홈페이지 사이트맵

홈페이지 사이트맵 템플릿

이 템플릿은 홈페이지의 최상위 네비게이션과 푸터를 간단한 색상 코드 레이아웃으로 정리합니다. 제품 관리자, UX/UI 디자이너, 마케팅 담당자 및 사이트 IA를 계획하고 이해관계자에게 전달하려는 엔지니어를 위해 만들어진 템플릿입니다.

구조 세부사항

• 제품(코랄/레드 #ff6464)

  • 흰 테두리의 원형 아이콘(장바구니)

  • 헤더 “제품”

  • 소제목 “홈 페이지 및 필터”

  • 레이블 “여기에 텍스트 입력”이 붙은 흰색 플레이스홀더 상자 3개

• 파트너(노란색/골드 #ffbe44)

  • 흰 테두리의 원형 아이콘(악수)

  • 헤더 “파트너”

  • 소제목 “랜딩 페이지 및 필터”

  • 레이블 “여기에 텍스트 입력” 플레이스홀더 3개

• Comapny(청록색 #5ec8b3)

  • 흰 테두리의 원형 아이콘(도시/건물)

  • 헤더 “Comapny”

  • 소제목 “홈 페이지”

  • 레이블 “여기에 텍스트 입력” 플레이스홀더 3개

• 연락처(시안 #4fd8dd)

  • 흰 테두리의 원형 아이콘(주소록)

  • 헤더 “연락처”

  • 부제 없음

  • 브랜드 배치를 위한 점선 테두리 사각형(레이블: “회사 로고”)

콘텐츠 계층

• 메인 내비게이션 섹션은 상단에 배치되며 명확한 제목과 작은 부제(연락처 제외)를 포함합니다.

• 제품, 파트너, 회사 섹션 아래에는 하위 페이지, 필터, 또는 딥 링크를 수용하는 세 개의 직사각형 상자가 배치됩니다.

푸터 섹션

• ‘Footer(메인 + 추가 내비게이션)’라는 제목의 푸터 영역에는 세로 구분선으로 구분된 네 개의 열이 포함됩니다:

  1) 연락처, 뉴스, 도움말

  2) 섹터(밑줄, 굵게): 섹터 1, 섹터 2, 섹터 3

  3) 제품(밑줄, 굵게): 지원, 액세서리, 장비

  4) 뉴스레터, 이용약관, 소셜 미디어

비주얼 요소

• 눈에 띄는 보라색 헤더 배너(#6631d7)가 있으며, 흰색 Georgia 서체로 “홈페이지 사이트맵”이 표시되어 있습니다.

• 섹션 카드는 위에 나열된 고유 색상을 사용하며, 각 카드에는 원형 아이콘이 함께 표시됩니다.

• Contact 열에 전용 로고 영역이 표시됩니다.

• 하단의 얇은 보라색 띠가 색상 구성에 통일감을 줍니다.

사용 방법

1) 모든 “여기에 텍스트 입력”을 실제 하위 페이지 이름이나 링크로 바꿉니다.

2) 필요하면 섹션 제목과 부제목을 업데이트하되, 명확성을 위해 색상 코딩은 유지하세요.

3) 아이콘 자리 표시자를 브랜드 아이콘으로 교체하세요.

4) 대시 테두리의 “YOUR LOGO” 영역에 회사 로고를 배치하세요.

5) 푸터 열을 최종 내비게이션 항목과 법적 링크로 채우세요.

모범 사례

• 초기 웹사이트 기획, IA/UX 워크숍, 이해관계자 리뷰, 개발 인수인계 시에 사용하세요.

• 섹션 수는 최소화하세요. 열당 항목은 3~5개를 권장합니다.

• 한눈에 파악하기 쉽도록 색상 일관성을 유지하세요.

• 템플릿을 정확히 그대로 반영하려면 “Comapny” 레이블에 유의하거나, 게시 전에 수정하세요.

감사합니다!

Khawaja Rizwan