Web Guide서브 페이지공통 레이아웃페이지 템플릿
서브 페이지 공통 레이아웃 설계
페이지마다 구조가 다르면 방문자는 매번 새로 적응해야 합니다.
공통 틀을 정해 두면 사용성이 올라가고 제작·운영 비용도 줄어듭니다.

01공통 요소를 정한다
모든 서브 페이지에 공통으로 들어가는 요소를 먼저 정합니다. 이것이 고정되면 나머지는 본문 영역만 달라집니다.
방문자는 어느 페이지에 가도 같은 자리에 같은 것이 있으므로 헤매지 않습니다.
1
상단 영역
로고, 메뉴, 검색, 언어 전환. 모든 페이지 동일.
2
페이지 제목
지금 어느 페이지인지. 같은 위치에 같은 스타일로.
3
경로 표시
홈 > 서비스 > 상세. 뎁스가 깊으면 유용합니다.
4
본문 영역
페이지마다 다른 부분. 최대 폭을 통일합니다.
5
하단 CTA
문의 유도. 모든 페이지 끝에 같은 형태로.
6
푸터
회사 정보, 법적 표기, 사이트맵.
02유형별 템플릿을 만든다
모든 서브 페이지가 똑같을 수는 없습니다. 몇 가지 유형으로 나누고 각각의 템플릿을 만들면 효율적입니다.
템플릿이 정해져 있으면 나중에 페이지를 추가할 때도 빠르고 저렴합니다.
소개형
텍스트와 이미지 위주. 회사소개, 서비스 설명.
목록형
여러 항목 나열. 제품 목록, 사례 목록, 게시판.
상세형
목록의 개별 항목. 제품 상세, 게시물 보기.
폼형
입력이 있는 페이지. 문의, 신청, 검색.
랜딩형
독립적인 구성. 캠페인, 광고 도착 페이지.
03모든 페이지에 다음 행동을 둔다
서브 페이지에서 정보를 다 본 방문자가 무엇을 해야 할지 모르면 그대로 나갑니다. 페이지 끝에 다음 행동을 제시해야 합니다.
문의 버튼이 기본이고, 관련 페이지 링크를 함께 두면 더 좋습니다.
문의나 상담 유도. 모든 페이지 공통.
'이 서비스와 함께 보는 페이지'.
상세 페이지에서 필수.
순서가 있는 콘텐츠에서 유용합니다.
04일관성이 곧 사용성이다
같은 기능이 페이지마다 다른 위치에 있으면 방문자는 매번 찾아야 합니다. 작은 불편이지만 쌓이면 이탈로 이어집니다.
버튼 스타일, 제목 크기, 여백, 링크 색까지 통일하세요.
페이지마다 다를 때
버튼 위치와 색이 제각각 · 제목 크기가 다름 · 방문자가 매번 적응 · 제작과 운영 비용도 증가
일관성이 있을 때
같은 자리에 같은 것 · 학습 없이 사용 · 신뢰감 · 페이지 추가가 쉽고 저렴
CHECK POINT
□ 모든 서브 페이지의 공통 요소를 정했는가
□ 페이지 유형별 템플릿이 있는가
□ 본문 최대 폭이 통일되어 있는가
□ 모든 페이지 끝에 다음 행동이 있는가
□ 상세 페이지에 목록으로 돌아가는 경로가 있는가
□ 버튼·제목·링크 스타일이 통일되어 있는가
□ 새 페이지를 추가할 때 쓸 템플릿이 있는가
#서브 페이지#공통 레이아웃#페이지 템플릿#일관성#CTA 배치#경로 표시#사용성#홈페이지 디자인#웹비스타#홈페이지 제작