사이트맵 예시로 보는 홈페이지 구조…메뉴는 어떻게 나눠야 하나

사이트맵은 홈페이지나 앱을 만들기 전에 어떤 페이지가 몇 개 있고 그 페이지들이 어떤 순서와 계층으로 연결되는지를 한눈에 보여주는 설계도다. 사이트맵 예시를 찾아보는 사람은 대부분 실제 화면을 만들기 전 단계에서, 자신의 서비스에 필요한 메뉴와 페이지를 빠짐없이 정리하고 싶어서 검색하는 경우가 많다. 이 기사는 사이트맵이 어떤 구조로 이루어지는지, 어떻게 만들고 어떻게 읽는지, 그리고 흔히 헷갈리는 부분까지 순서대로 정리한다.

사이트맵은 어떤 틀로 이루어지나

사이트맵의 기본 형태는 나무 모양의 계층 구조다. 맨 위에는 첫 화면인 홈이 있고, 그 아래로 회사소개, 상품, 고객센터 같은 큰 갈래인 대분류가 놓인다. 각 대분류 아래에는 다시 세부 페이지인 소분류가 붙는다. 예를 들어 상품이라는 대분류 아래에 상품목록, 상품상세, 장바구니 같은 소분류가 이어지는 식이다. 이런 계층을 표나 상자와 화살표로 그린 것이 흔히 말하는 사이트맵 예시이며, 페이지 수가 많은 서비스일수록 계층을 몇 단계로 나눌지가 설계의 핵심이 된다.

사이트맵을 만드는 절차

사이트맵 만들기는 보통 세 단계로 진행된다. 먼저 서비스에 필요한 모든 페이지를 목록으로 뽑아낸다. 다음으로 성격이 비슷한 페이지끼리 묶어서 대분류와 소분류를 정한다. 마지막으로 이 묶음을 표나 다이어그램 형태로 그려서 전체 구조가 균형 있게 보이는지 확인한다. 이 과정에서 한 메뉴 아래에만 페이지가 몰리거나 반대로 텅 비는 경우가 자주 생기는데, 이럴 때는 분류 기준 자체를 다시 검토하는 편이 낫다. 사이트맵 생성 사이트라 불리는 도구들은 이런 목록과 계층을 화면에서 상자와 선으로 빠르게 그려 주는 역할을 한다.

사이트맵 디자인과 아이콘은 무엇을 위한 것인가

사이트맵 디자인이라고 하면 화려한 그래픽을 떠올리기 쉽지만, 실제로는 계층과 흐름을 명확하게 읽히도록 만드는 것이 목적이다. 상자의 색을 대분류별로 다르게 칠하거나, 페이지 성격에 따라 서로 다른 사이트맵 아이콘을 붙이는 것도 이런 이유에서다. 예를 들어 문서 모양 아이콘은 정보 페이지를, 장바구니 모양 아이콘은 구매 관련 페이지를 나타내는 식으로 약속을 정해 두면 팀원 모두가 같은 그림을 같은 방식으로 읽을 수 있다. 디자인이 예뻐 보이는 것보다 누가 봐도 구조가 헷갈리지 않는 것이 더 중요한 기준이다.

다음 표는 기획 단계에서 쓰는 사이트맵과 검색엔진에 제출하는 사이트맵이 어떻게 다른지 정리한 것이다.

사이트맵을 등록하고 보는 방법에서 자주 헷갈리는 점

사이트맵 보는법을 검색하는 사람 중 상당수는 기획 문서로서의 사이트맵과, 검색엔진에 등록하는 파일 형태의 사이트맵을 같은 것으로 여기고 헷갈려 한다. 앞의 표에서 보듯 둘은 목적 자체가 다르다. 기획용 사이트맵은 사람이 보고 구조를 이해하기 위한 그림이나 표이고, 검색엔진 제출용은 프로그램이 읽어서 페이지 목록을 파악하도록 만든 파일이다. 사이트맵 등록이라는 말은 대개 후자를 가리키며, 이는 서비스를 열기 전 기획 단계보다는 실제로 페이지가 만들어진 뒤에 진행하는 작업이다.

또 하나 흔한 오해는 사이트맵을 한 번 만들면 끝이라고 생각하는 것이다. 서비스에 새로운 메뉴나 페이지가 추가되면 사이트맵도 함께 갱신해야 실제 구조와 문서가 어긋나지 않는다. 오래된 사이트맵을 그대로 두면 나중에 팀에 합류한 사람이 실제와 다른 구조를 보고 혼란을 겪을 수 있다. 그래서 사이트맵은 완성된 결과물이라기보다 서비스가 바뀔 때마다 함께 고쳐 나가는 기준 문서로 보는 편이 맞다.

사이트맵을 새로 그려 보려 한다면 가장 먼저 확인할 것은 서비스에 실제로 필요한 페이지 목록이 빠짐없이 정리되어 있는지, 그리고 그 페이지들을 묶는 분류 기준이 이용자 입장에서 자연스러운지 두 가지다. 이 두 가지가 정리된 다음에 표나 다이어그램 도구를 골라 구조를 그려 보면 훨씬 수월하게 사이트맵을 완성할 수 있다.

· · · · · · · · · ·

스페셜타임스는 AI 기술의 도움을 받아 더 빠르고 다양한 뉴스를 독자에게 전달하기 위해 노력하고 있습니다.