홈페이지 기획, 무엇을 하나요? 요구사항 정의부터 화면 설계까지
홈페이지 제작을 준비하면서 “회사 소개와 서비스 안내, 문의 페이지가 필요합니다”라고 요청하는 경우가 많습니다.
하지만 같은 메뉴를 가진 홈페이지라도 방문자가 누구인지, 어떤 정보를 찾는지, 운영자가 무엇을 관리해야 하는지에 따라 구성과 기능은 달라집니다.
홈페이지 기획은 이러한 조건을 정리해 어떤 페이지를 만들고, 각 화면에서 무엇을 보여주며, 어떤 기능이 어떻게 작동해야 하는지 구체화하는 과정입니다.
브랜드 컨설팅에서 전달할 가치와 방향을 정했다면, 기획에서는 이를 실제 사용자가 이용할 수 있는 구조로 만듭니다.
이번 글에서는 요구사항 정의 → UX 리서치·기능 정의 → IA·와이어프레임 → 설계 확정의 네 단계를 살펴봅니다.
01. 요구사항 정의: 홈페이지의 목적과 제작 범위를 정합니다
첫 단계에서는 홈페이지를 만드는 이유와 필요한 조건을 확인합니다.
회사 소개가 목적인지, 제품 문의를 받으려는 것인지, 회원이 서비스를 이용하는 플랫폼인지에 따라 우선순위가 달라집니다. 목적이 여러 개라면 이번 제작에서 가장 중요한 목표부터 정리해야 합니다.
먼저 확인할 질문
- 홈페이지의 주요 방문자는 누구인가요?
- 방문자가 어떤 정보를 확인하길 원하나요?
- 정보를 확인한 뒤 어떤 행동을 하길 원하나요?
- 반드시 필요한 페이지와 기능은 무엇인가요?
- 현재 준비된 자료와 추가로 필요한 자료는 무엇인가요?
- 예산과 희망 일정에 어떤 조건이 있나요?
기존 홈페이지가 있다면 유지할 부분과 불편한 부분도 함께 살펴봅니다. 참고 사이트를 전달할 때는 주소뿐 아니라 어떤 구성이나 기능을 참고하고 싶은지 설명해주세요.
요청을 구체적인 조건으로 바꿉니다
예를 들어 “문의 기능이 필요하다”는 요청에는 여러 방식이 있을 수 있습니다.
이름과 연락처만 받으면 되는지, 파일 첨부가 필요한지, 접수 내용을 이메일로 전달할지, 관리자 화면에서 처리 상태까지 관리할지 확인해야 합니다.
이처럼 요청의 의미를 구체화하면 작업 범위와 필요한 기능을 정하기 쉬워집니다.
이 단계에서 정리하는 결과
제작 목적, 주요 사용자, 필요한 콘텐츠와 기능, 자료 준비 상태, 일정과 제약사항을 요구사항 문서로 정리합니다. 확정된 내용과 추가 확인이 필요한 사항도 구분해둡니다.
02. UX 리서치·기능 정의: 사용자의 흐름과 실제 작동 방식을 살펴봅니다
UX는 사용자가 서비스를 이용하며 겪는 경험을 의미합니다. 홈페이지에서는 정보를 찾고, 내용을 이해하고, 문의하거나 신청하는 과정이 여기에 포함됩니다.
UX 리서치에서는 사용자가 어떤 상황에서 방문하고, 무엇을 찾으며, 어디에서 어려움을 겪는지 살펴봅니다.
프로젝트의 범위에 따라 담당자 인터뷰, 고객의 상담 질문, 기존 사이트의 이용 데이터, 사용자 인터뷰나 사용성 테스트 등을 활용할 수 있습니다. 경쟁 사이트 검토만으로 사용자의 필요를 모두 확인했다고 판단하지는 않습니다.
사용자의 이동 흐름을 정리합니다
예를 들어 기업 홈페이지에서 제품 문의를 받으려면 다음과 같은 흐름을 검토할 수 있습니다.
제품 찾기 → 특징과 사양 확인 → 관련 자료 확인 → 문의 작성 → 접수 결과 확인
각 단계에서 필요한 정보가 빠져 있거나 다음 화면으로 이동하기 어렵다면 이용이 불편해질 수 있습니다.
사용자가 어떤 질문을 가질지, 그 질문에 어느 화면에서 답할지 정리하는 것이 중요합니다.
기능은 이름과 함께 동작 조건을 정의합니다
‘검색’, ‘예약’, ‘문의’라는 기능명만으로는 구현 범위가 명확하지 않습니다. 입력 조건과 처리 방식, 예외 상황까지 정리해야 합니다.
- 기능: 구체적으로 정할 내용
- 검색: 검색 대상, 필터, 결과 정렬, 결과가 없을 때의 안내
- 문의 신청: 입력 항목, 필수·선택 구분, 첨부파일, 접수 알림
- 예약 : 가능한 일정, 중복 처리, 변경·취소 방식
- 자료 다운로드: 공개 범위, 로그인 필요 여부, 파일 관리 방식
- 관리자: 담당자 권한, 수정 가능한 항목, 접수 내역 관리
사용자 화면뿐 아니라 담당자가 정보를 확인하고 운영하는 방식도 함께 고려합니다.
이 단계에서 정리하는 결과
주요 이용 흐름과 불편 요소, 기능별 동작 조건을 정리합니다. 이번에 반드시 구현할 기능과 이후 확장할 기능을 구분하면 예산과 일정에 맞춰 범위를 조정하기 좋습니다.
03. IA·와이어프레임: 정보의 구조와 화면의 뼈대를 만듭니다
필요한 콘텐츠와 기능이 정리되면 페이지를 어떻게 나누고 연결할지 설계합니다.
이때 사용하는 대표적인 자료가 IA와 와이어프레임입니다.
IA는 정보의 구조를 정리합니다
IA는 Information Architecture의 약자로, 정보를 분류하고 배치하는 구조를 의미합니다. 홈페이지에서는 메뉴 체계, 페이지의 위계, 명칭과 연결 관계 등을 정리합니다.
예를 들어 기업 홈페이지는 다음과 같이 구성할 수 있습니다.
- 회사 소개: 기업 개요, 주요 연혁
- 제품·서비스: 목록, 분야별 상세 페이지
- 자료실: 소개서, 기술 자료
- 소식: 공지사항, 인사이트
- 문의: 상담 신청, 위치·연락처
이는 설명을 위한 예시이며, 모든 홈페이지에 같은 메뉴가 필요한 것은 아닙니다.
자료가 얼마나 있는지, 방문자가 무엇을 찾는지, 운영 중 어떤 콘텐츠를 추가할지를 고려해 구조를 정해야 합니다. 내부 조직에서 사용하는 명칭이 방문자에게도 이해하기 쉬운지 확인하는 과정도 필요합니다.
와이어프레임은 화면의 구성과 우선순위를 보여줍니다
와이어프레임은 색상이나 장식보다 콘텐츠와 기능의 배치를 중심으로 만든 화면 설계 자료입니다.
어떤 제목과 설명을 먼저 보여줄지, 사진과 자료를 어디에 배치할지, 버튼을 누르면 어디로 이동하는지 등을 확인할 수 있습니다.
제품 상세 화면이라면 다음과 같은 내용을 정리할 수 있습니다.
- 제품명과 핵심 설명
- 주요 특징과 사양
- 사용 사례와 관련 자료
- 문의 버튼과 다음 이동 경로
디자인 전에 이러한 구성을 검토하면 필요한 내용이 빠지지 않았는지, 정보의 순서가 적절한지 확인하기 좋습니다.
모바일과 화면 상태도 함께 확인합니다
PC 화면을 작게 줄이는 것만으로 모바일 이용이 편해지는 것은 아닙니다. 작은 화면에서 메뉴와 표, 긴 설명, 신청서가 어떻게 배치될지 검토해야 합니다.
또한 정상적으로 사용하는 장면 외에도 다음과 같은 상태를 고려합니다.
- 검색 결과가 없는 경우
- 필수 입력 항목이 빠진 경우
- 파일 형식이나 용량이 맞지 않는 경우
- 신청이 완료되거나 처리에 실패한 경우
모든 화면을 같은 수준으로 상세하게 작성할 필요는 없지만, 중요한 동작과 예외 상황은 제작 전에 확인하는 것이 좋습니다.
이 단계에서 정리하는 결과
메뉴와 페이지 목록, 주요 이용 흐름, 와이어프레임을 정리합니다. 필요한 경우 화면별 설명과 기능 명세를 연결해 디자인·개발 담당자가 같은 내용을 확인하도록 합니다.
04. 설계 확정: 디자인과 개발에 사용할 기준을 합의합니다
설계 자료가 준비되면 의사결정권자와 실제 운영 담당자가 함께 검토합니다.
메뉴가 필요한 내용을 담고 있는지, 사용자가 다음 행동을 찾기 쉬운지, 담당자가 운영할 수 있는지 확인합니다.
설계 확정 전 확인할 내용
- 제작 목적과 주요 사용자가 반영되어 있나요?
- 필요한 페이지와 콘텐츠가 빠지지 않았나요?
- 주요 버튼의 이동 위치와 동작이 명확한가요?
- 문의·예약 등의 입력 조건이 정리되어 있나요?
- 모바일 이용과 주요 예외 상황을 검토했나요?
- 관리자 기능과 외부 서비스 연동 범위가 정해졌나요?
- 준비할 자료와 담당자, 전달 일정이 정리되어 있나요?
검토 후에는 확정한 범위와 미결 사항을 구분하고, 문서의 버전과 기준일을 남깁니다.
설계 확정 후에도 변경은 가능하지만, 페이지 구조나 기능이 달라지면 디자인과 개발 일정에 영향을 줄 수 있습니다. 변경 내용과 영향을 확인한 뒤 진행하는 기준을 함께 정해두는 것이 좋습니다.
홈페이지 기획은 제작에 사용할 설계도를 만드는 과정입니다
기획 자료는 분량보다 내용의 명확성이 중요합니다.
누구를 위한 홈페이지인지, 어떤 정보를 보여줄지, 기능이 어떻게 작동할지 관계자들이 같은 기준으로 이해할 수 있어야 합니다.
요구사항과 이용 흐름, 메뉴 구조, 주요 화면을 미리 정리하면 디자인과 개발 과정에서 무엇을 확인하고 결정해야 하는지도 분명해집니다.
홈페이지 제작을 준비하고 있다면 필요한 메뉴를 적는 것에서 한 걸음 더 나아가, 방문자가 무엇을 확인하고 어떤 행동을 하길 원하는지 함께 정리해보세요.
잡오브브라더스에 홈페이지 기획을 문의하실 때는 사업 소개 자료와 주요 사용자, 필요한 기능, 참고 사이트를 전달해주세요. 아직 구체화되지 않은 부분은 요구사항과 이용 흐름을 살펴보며 정리할 수 있습니다.