크몽 지식창고

홈페이지 기획 단계별 가이드(기획서 작성법, 기획 사례, 기획 툴, 체크리스트, 기획 전략, 기획 비용)

2023-08-01

홈페이지 제작은 기획자, 개발자, 디자이너 등 여러 방면의 전문가가 함께 진행하기 때문에 홈페이지 제작 과정에서 발생할 수 있는 문제를 예방하고, 웹사이트를 더욱 효율적으로 개발하기 위해 먼저 홈페이지 기획을 진행해야 합니다.

홈페이지를 기획하기 위해서는 목표와 대상 그리고 주요 홈페이지 기획 단계별 가이드를 철저히 숙지하는 것이 중요합니다. 사용자의 니즈를 고려하여 직관적이고 효율적인 내비게이션을 설계하고, 디자인과 기능의 일관성을 유지하며 사용자 경험을 개선하는 계획을 세우는 것이 필요합니다.

💡이 콘텐츠를 다 읽으면 알 수 있어요 (3분)

1. 홈페이지 기획 단계별 가이드

2. 홈페이지 기획 단계별 가이드에 필요한 정보와 도구

3. 홈페이지 기획 단계별 가이드에서 중요한 요소

4. 홈페이지 기획을 도와줄 무료 템플릿

5. 홈페이지 기획 외주를 맡길 때 체크할 점

1. 홈페이지 기획 단계별 가이드

효과적인 홈페이지 기획 단계별 가이드는 ① 목표 및 타깃 대상 설정 ② 구조 설계 ③ 웹 접근성 고려 ④ 콘텐츠 및 디자인 기획 ⑤ 기술적인 측면 고려 등이 포함됩니다.

목표 및 타깃 대상 설정: 효과적인 홈페이지를 만드는 목표를 설정하고 타깃 대상을 정하여 프로필, 특성, 관심사 등을 분석합니다.
구조 설계: 사용자 중심의 구조를 만들기 위해 콘텐츠의 메뉴 구성, 배치 등을 설계합니다.
웹 접근성 고려: 모든 사용자가 홈페이지를 쉽게 이용할 수 있도록 제목 구조, 색상 대비, 폰트 등의 요소를 고려합니다.
콘텐츠 및 디자인 기획: 효과적인 정보 전달을 위해 콘텐츠의 종류, 양 등을 기획하고 사용자 경험을 고려한 디자인 요소를 기획합니다.
기술적인 측면 고려: 반응형 웹디자인을 적용할 것인지, 어떤 언어를 사용할지 등의 기술적인 측면을 고려합니다.

2. 홈페이지 기획 단계별 필수 정보와 도구

효과적인 홈페이지 기획 단계에는 ① 목적과 목표 ② 대상 사용자 ③ 정보 구조 등의 정보와 ④ 웹디자인 도구 ⑤ 프로젝트 관리 도구 등이 필요합니다.

목적과 목표: 홈페이지를 만들고자 하는 목적과 목표를 명확히 해야 합니다. 어떤 가치를 제공할 수 있는지 등의 논의가 필요합니다.
대상 사용자: 어떤 사용자를 대상으로 홈페이지를 만들 것인지를 결정해야 합니다. 그들의 요구사항 및 불만 사항 등을 수집 및 분석하여 홈페이지를 계획합니다.
정보 구조: 제공하고자 하는 정보를 어떤 방식으로 구성할 것인지, 계층 구조는 어떻게 할 것인지 등의 정보 구조를 설계합니다.
웹디자인 도구: 웹디자인을 진행하기 위한 Figma, Sketch 등의 도구가 필요합니다.
프로젝트 관리 도구: 전체적인 일정, 작업 분배 등의 프로젝트 관리를 위한 Trello, Jira 등의 도구도 필요합니다.

3. 홈페이지 기획 단계별 가이드 중요 요소

홈페이지 기획 단계별 가이드에서 중요 요소는 ① 홈페이지 목적 ② 사용자 분석 ③ UI/UX 디자인 ④ 웹 접근성 ⑤ 반응형 웹입니다.

홈페이지 목적: 홈페이지를 제작하는 목적에 따라 주요 기능 및 제작 범위가 달라지기 때문에 목적을 정확히 하는 것이 중요합니다.
사용자 분석: 사용자 중심의 디자인 구현을 위해 타깃 사용자의 특성 및 관심사 등을 분석할 필요가 있습니다.
UI/UX 디자인: 사용자 인터페이스(UI)와 사용자 경험(UX) 디자인에 따라 홈페이지 만족도가 달라지기 때문에, 사용자가 홈페이지에서 편안하고 직관적인 경험을 느낄 수 있도록 구성하는 것이 중요합니다.
웹 접근성: 모든 사용자가 웹사이트를 쉽게 접근하고 사용할 수 있도록 웹 표준 준수, 웹 폰트 사용, 이미지 대체 텍스트 등 여러 요소를 고려해야 합니다.
반응형 웹: 다양한 디스플레이의 보급이 보편화됨에 따라, 사용자 경험을 향상하는 반응형 웹의 제작이 중요해지고 있습니다.

4. 홈페이지 기획 무료 템플릿

홈페이지 기획을 도와줄 무료 템플릿에는 ① Start Bootstrap ② Templated ③ Colorlib ④ HTML5 UP 등이 있습니다.

Start Bootstrap: 풀페이지, 랜딩페이지 등의 템플릿으로 구분되어 있으며, 템플릿 사용 방법 및 디자인 가이드라인도 별도로 제공됩니다.
Templated: HTML5와 CSS3 등의 템플릿이 무료로 제공되며, 기본적인 구조부터 전문적인 부분까지 선택의 폭이 넓습니다.
Colorlib: Colorlib의 템플릿은 반응형 디자인과 여러 구성 요소를 가지고 있으며, 이커머스, 마이크로사이트 등의 카테고리로 구분되어 있어 목적에 맞게 템플릿을 선택하여 사용할 수 있습니다.
HTML5 UP: HTML5 UP에서 제공하는 템플릿은 소스 코드와 함께 제공되는 장점을 가지고 있으며, 홈페이지에 동적인 요소를 추가할 수 있는 효과도 갖추고 있습니다.

5. 홈페이지 기획 외주 체크리스트

홈페이지 기획 외주를 맡길 때는 ① 외주 업체의 전문성 ② 벤치마킹을 원하는 홈페이지 ③ 홈페이지 주요 기능 등을 체크해야 합니다.

외주 업체의 전문성: 기획 역량과 경험을 확인하기 위해 외주 업체의 포트폴리오를 체크합니다. 특히 이전에 수행한 작업물을 통해 개발 수준을 파악하는 것이 좋습니다.
벤치마킹을 원하는 홈페이지: 자세한 커뮤니케이션을 위해 벤치마킹을 원하는 홈페이지를 외주 업체에 알려주는 것이 좋습니다. 이는 아이디어를 기획화 시키는 데 있어 큰 도움이 됩니다.
홈페이지 주요 기능: 제작하고자 하는 홈페이지의 주요 기능을 미리 정리하면 대략적인 일정과 예산을 산출할 수 있습니다.