홈페이지 제작, ‘기획’ 완벽 가이드 (for 비개발자)

2024.04.23

|

240

홈페이지는 개발 분야의 전문가와 협업으로 제작됩니다. 따라서 시작하기 전에 탄탄한 기획이 없으면 제작 과정에서 효율이 떨어지기 마련입니다. 홈페이지 제작 기획서에는 사용자에 대한 이해, 그리고 콘텐츠의 구성에 대한 철저한 정의가 필요하며, 사용자의 니즈를 고려한 직관적인 구성과 디자인, 기능의 일관성까지 갖춰야 좋은 홈페이지를 구현해 낼 수 있습니다. ​

홈페이지 기획의 중요성에 대해 알았으니, 이제 기획서에 어떤 내용들이 포함되어야 할 지 구체적으로 알아보겠습니다. ​

✍️ 이 글의 순서

• 홈페이지 기획 단계와 필요한 내용
• 홈페이지 기획 툴 추천
• 홈페이지 기획 외주 맡길 때 체크리스트 ​

비개발자-홈페이지-기획-가이드

홈페이지 기획 단계와 필요한 내용 ​

홈페이지 기획 단계

홈페이지 기획은 총 네 단계로 이루어집니다. ​

1. 홈페이지를 만드는 목표와 타깃 대상을 정하여 그들의 프로필, 특성, 관심사 등을 분석한 페르소나를 만듭니다.
2. 사용자 경험을 중심으로 한 콘텐츠의 메뉴 구성과 배치를 설계합니다.
3. 효과적인 정보 전달을 위한 콘텐츠의 종류와 양을 정리합니다.
4. 사용자 경험을 고려한 디자인 요소를 기획합니다. 예를 들어, 웹 접근성을 높이기 위한 제목 구조와 색상 대비, 폰트 등의 요소가 결정되어야 합니다.
5. 반응형 웹 디자인 적용 여부 및 개발 언어 결정 등 기술적인 측면에 대한 요구사항을 정의합니다. ​

홈페이지 기획에 필요한 내용은? ​

• 제작 배경 및 목표
• 타겟 고객
• 자사만의 가치와 차별점
• 핵심 전략
• 레퍼런스

홈페이지의 최종 목표는 비슷할 수 있지만, 세부적인 목적과 메인 타겟 고객은 기업마다 다릅니다. 브랜딩, DB 수집, 제품 홍보 등 제작 배경에 따라 홈페이지가 갖춰할 기능과 디자인도 달라집니다. 따라서 홈페이지를 통해 얻고자 하는 목표를 먼저 구체화한 다음에, 이 아이디어를 기반으로 홈페이지에 필요한 기능과 방향성을 정리하는 과정이 이어가야 합니다.

홈페이지는 브랜드의 얼굴이기도 합니다. 웹사이트의 UI/UX 디자인은 사용자가 머무르는 기간과 재방문 가능성에 큰 영향을 끼칩니다. 사이트의 구성에서 브랜드의 가치와 장점이 드러난다면 유의미한 성과를 가져올 수 있습니다.

또 홈페이지를 만들 때 무조건 ‘좋아 보이는 것’은 다 넣으려고 하는 대표님들도 계신데요. 이렇게 되면 홈페이지가 산만해져 오히려 중요한 셀링 포인트의 존재감이 옅어질 수도 있습니다. 그러니 전략적인 기획을 통해, 핵심 요소에 스포트라이트를 주는 것을 권장합니다. ​

마지막으로, 텍스트만으로 정리한 컨셉은 사람에 따라 추상적이라고 느낄 수도 있습니다. 내가 원하는 컨셉과 유사한 시각적 레퍼런스가 있다면 반드시 첨부해 주세요. 첨언하자면, 사이트의 URL만 업로드하는 것보다 어떤 점을 벤치마킹하고 싶은지 이유까지 정리해 놓아야 정리가 확실해집니다. ​

홈페이지-기획-단계-필요한-내용

홈페이지 기획 툴(Tool) 추천 ​

웹디자인 툴

홈페이지의 메뉴 배치나 UI/UX를 결정하기 위해서는 웹디자인 툴이 필요한데요. 보통 Figma, Sketch와 같은 도구를 사용​합니다. Figma와 Sketch는 각각의 강점이 다르므로, 프로젝트의 특성과 팀의 요구사항에 따라 적절한 툴을 선택하는 것이 중요합니다. ​

툴 선택은 컨디션에 따라 다릅니다. 우선 실시간 협업이 필요하거나 디자인 시스템 관리가 중요한 경우 Figma가 적합합니다. 심볼 및 레이어 스타일 기능이 중요하거나 플러그인 활용도가 높은 경우 Sketch가 더 적합하죠. ​

➕ 기획 무료 템플릿 ​

Start Bootstrap (난이도: 보통)
부트스트랩 기반의 다양한 템플릿을 제공하며, 문서화가 잘되어 있어 초보자도 쉽게 사용할 수 있습니다. ​

Templated (난이도: 보통)
깔끔하고 모던한 디자인의 템플릿을 제공하며, 커스터마이징이 용이합니다. ​

Colorlib (난이도: 쉬움)
다양한 테마와 디자인을 제공하며, 초보자도 쉽게 사용할 수 있습니다. ​

HTML5 UP (난이도: 어려움)
고급스러운 디자인의 템플릿을 제공하지만, 커스터마이징이 다소 어려울 수 있습니다. ​

홈페이지-기획-툴-추천

외주 개발사에서 기획에 참여하기도 ​

위의 과정이 워낙 복잡하다 보니, 홈페이지 제작 기획 단계부터 아웃소싱 업체의 도움을 받는 경우도 많습니다. 그런데 기획은 자사의 비즈니스 모델과 핵심 가치에 대한 이해가 있어야 완성도 있는 기획이 나오게 됩니다. 하지만 외부 인력은 현실적으로 단시간에 모든 것을 파악하기에 어려움이 있죠. 따라서 홈페이지 기획을 외주 맡길 때에는 반드시 아래의 사항을 준비해 두실 것을 권장합니다. ​ ​

기획, 외주 맡기기 전 준비해야 할 것 ​

1. 유사 분야 경험 Check

먼저 업체의 기획 역량과 경험을 확인할 수 있는 포트폴리오를 확인하셔야 합니다. 타사와의 비밀 유지 조항이 있을 경우, 전체 기획서를 공개하기는 어려울 텐데요. 가능한 우리의 비즈니스와 가장 비슷한 업종의 진행물을 확인해 보시고, 해당 웹사이트의 구조를 확인하시는 것으로 레퍼런스를 검증하시길 바랍니다. ​

2. 초안 준비, 자료 정리

제작하고자 하는 홈페이지의 주요 기능을 미리 정리하여 초안을 작성해 주시면, 대략적인 일정과 예산을 산출하는 데에 도움이 됩니다. 이렇게 여러 업체의 견적을 받아서 비교해 보면, 가장 합리적인 견적이 무엇인지 아실 수 있습니다. 또한 기획 외주는 초안만으로 홈페이지의 설계를 짜는 것이기 때문에, 가능한 많은 자료를 주는 것이 좋습니다. ​

외주-개발사-기획-참여

외주가 부담스럽다면, 위시켓이 도울게요. ​

홈페이지 제작이 처음이라면 기획부터 막막하게 느껴질 텐데요. 그렇다고 기획을 외주로 잡자니 무언가 불안함이 느껴질 수도 있습니다. 그렇다면 국내 1위 IT 아웃소싱 플랫폼 위시켓에 도움을 받는 것도 하나의 방법입니다. ​

위시켓에서는 홈페이지 외주 제작사와의 매칭 전 담당 매니저가 1:1로 기획부터, 견적, 계약에 대한 상세한 가이드를 제공해 드리고 있습니다. 주로 IT 외주 경험이 적은 스타트업과 중소기업들의 개발 진입 장벽을 낮춰드리고 있죠. ​

아래를 누르면 위시켓 웹사이트로 이동합니다. 들어가 실제 완료된 프로젝트 중 여러분과 유사한 형태의 프로젝트를 찾아 보고, 준비 과정을 조금 더 구체화시켜 보시기 바랍니다.


🔖 함께 보면 도움되는 글

기업 홈페이지 제작 사기 피해 예방법 5가지

홈페이지 제작 업체가 폐업했을 때 대처 방법

홈페이지 제작 비용, 견적서 항목 쉽게 이해하기


국내 1위 IT 아웃소싱 플랫폼 위시켓 >

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

스케치위시켓피그마홈페이지 기획홈페이지 기획 도구홈페이지 기획 방법홈페이지 기획 외주홈페이지 기획서홈페이지 기획안홈페이지 기획툴홈페이지 웹디자인홈페이지 위시켓홈페이지 제작홈페이지 제작 업체홈페이지 제작 외주
다음 글

위시켓 블로그의 새로운 소식 받기