11장. FO/BO 사이트맵 초안 3안과 선택 기준
UX 관점에서 바라보기
10장 도메인 객체를 화면 구조로 전환하기
10장에서 정의한 도메인 객체(상품·카테고리·고객·장바구니·주문·쿠폰)를 실제 화면 구조로 전환한다. 사이트맵(Sitemap)은 웹사이트의 페이지 계층과 연결 관계를 표현하는 다이어그램이다. FO는 고객 관점, BO는 운영자 관점으로 구성한다.
사이트맵을 작성하는 목적은 첫째, 필요한 화면 목록을 파악해 개발 범위를 추정한다. 둘째, 화면 간 이동 경로를 설계해 네비게이션 구조를 정한다. 셋째, 팀원과 화면 구조를 합의해 설계 방향을 통일한다.
정답은 없다. 같은 기능도 화면 구조를 다르게 설계할 수 있다. 이 장에서는 3가지 안을 제시하고, 쇼핑몰 특성에 맞는 선택 기준으로 최종안을 결정한다.
FO 사이트맵 초안 3안
FO는 고객이 상품을 탐색하고 구매하는 경로를 중심으로 설계한다. 핵심 흐름은 "홈 → 카테고리/검색 → 상품 상세 → 장바구니 → 결제 → 주문 완료"다.
FO 안 1: 플랫 구조 (Flat Structure)
모든 주요 화면을 홈에서 1 depth로 접근하는 구조다.
홈
├─ 카테고리
│ └─ 상품 리스트
│ └─ 상품 상세
├─ 검색 결과
│ └─ 상품 상세
├─ 장바구니
├─ 결제 (상품 상세 및 장바구니에서만 접근이 가능한 페이지)
├─ 주문 완료 (결제 완료 후 접근이 가능한 페이지)
├─ 마이페이지
│ ├─ 주문 내역
│ ├─ 찜한 상품
│ ├─ 쿠폰함
│ ├─ 배송지 관리
│ └─ 회원 정보
└─ 로그인/회원가입
장점
구조가 단순해 구현이 빠르다
고객이 원하는 화면에 최대 3 클릭 내 도달한다
URL 구조가 짧고 확실하다 (/cart, /checkout, /mypage)
단점
카테고리 depth가 깊어지면(3 depth) 상품 리스트 URL이 복잡해진다
마이페이지 내부 화면이 많아지면 네비게이션이 혼란스럽다
적합한 경우
SKU 300개 정도의 소규모 쇼핑몰
카테고리가 2 depth 이하로 단순한 경우
빠른 론칭이 우선인 MVP
FO 안 2: 계층 구조 (Hierarchical Structure)
카테고리와 마이페이지를 depth로 세분화하는 구조다.
홈
├─ 카테고리
│ ├─ 상위 카테고리 (의류)
│ │ ├─ 중위 카테고리 (상의)
│ │ │ └─ 하위 카테고리 (티셔츠)
│ │ │ └─ 상품 리스트
│ │ │ └─ 상품 상세
│ │ └─ 중위 카테고리 (하의)
│ └─ 상위 카테고리 (뷰티)
├─ 검색
│ └─ 검색 결과
│ └─ 상품 상세
├─ 장바구니
├─ 주문 (상품 상세 및 장바구니에서만 접근이 가능한 페이지)
│ ├─ 결제
│ ├─ 주문 완료
│ └─ 주문 조회
│ └─ 주문 상세
├─ 마이페이지
│ ├─ 주문 관리
│ │ ├─ 주문 내역
│ │ ├─ 취소/반품
│ │ └─ 정기 배송 (옵션)
│ ├─ 혜택 관리
│ │ ├─ 쿠폰함
│ │ ├─ 적립금
│ │ └─ 등급 안내
│ └─ 계정 관리
│ ├─ 회원 정보
│ ├─ 배송지 관리
│ └─ 알림 설정
└─ 계정
├─ 로그인
├─ 회원가입
└─ 비밀번호 찾기
장점
기능별 그룹핑이 명확해 확장성이 좋다
마이페이지가 체계적으로 정리되어 찾기 쉽다
URL이 의미 구조를 반영한다 (/mypage/orders/detail/12345)
단점
화면 depth가 깊어져 개발 공수가 증가한다
고객이 원하는 화면까지 클릭 수가 많아진다
초기 300 SKU 규모에는 과도한 구조다
적합한 경우
SKU 1,000개 이상의 대규모 쇼핑몰
카테고리가 3 depth이고 상품이 많은 경우
확장 계획이 명확한 장기 프로젝트
FO 안 3: 하이브리드 구조 (Hybrid Structure)
플랫 구조를 기본으로 하되, 자주 사용하는 마이페이지만 계층화하는 절충안이다.
홈
├─ 카테고리
│ └─ 상품 리스트 (필터·정렬 포함)
│ └─ 상품 상세
├─ 검색 결과
│ └─ 상품 상세
├─ 장바구니
├─ 결제 (상품 상세 및 장바구니에서만 접근이 가능한 페이지)
├─ 주문 완료 (결제 완료 후 접근이 가능한 페이지)
├─ 마이페이지
│ ├─ 대시보드 (주문·쿠폰·찜 요약)
│ ├─ 주문 내역
│ │ └─ 주문 상세
│ ├─ 쿠폰함
│ ├─ 찜한 상품
│ └─ 설정
│ ├─ 회원 정보
│ ├─ 배송지 관리
│ └─ 알림 설정
└─ 로그인/회원가입
장점
구현 속도와 사용성의 균형이 좋다
마이페이지 대시보드에서 핵심 정보를 한눈에 볼 수 있다
확장 시 세부 화면을 추가하기 쉽다
단점
대시보드 설계에 추가 공수가 필요하다
카테고리 depth가 깊어지면 여전히 URL이 복잡해진다
적합한 경우
MVP이지만 확장 가능성을 고려한 경우
재구매율이 중요해 마이페이지 경험을 강화하려는 경우
쿠폰·등급 같은 리텐션 기능을 적극 활용하려는 경우
BO 사이트맵 초안 3안
BO는 운영자가 상품·주문·고객·프로모션을 관리하는 경로를 중심으로 설계한다. 작업 빈도와 효율을 우선한다.
BO 안 1: 기능별 그룹 (Functional Group)
상품·주문·고객·프로모션·설정 5개 그룹으로 묶는다.
대시보드
├─ 상품 관리
│ ├─ 상품 리스트
│ ├─ 상품 등록
│ ├─ 상품 수정
│ ├─ 카테고리 관리
│ └─ 재고 관리
├─ 주문 관리
│ ├─ 주문 리스트
│ ├─ 주문 상세
│ └─ 배송 관리
├─ 고객 관리
│ ├─ 고객 리스트
│ ├─ 고객 상세
│ └─ 등급 관리
├─ 프로모션
│ ├─ 쿠폰 관리
│ ├─ 배너 관리
│ └─ 이벤트 관리
└─ 설정
├─ 배송 정책
├─ 결제 설정
└─ 권한 관리
장점
운영자가 작업 유형별로 빠르게 찾을 수 있다
네비게이션이 명확하고 학습 곡선이 낮다
권한 관리가 쉽다 (예: CS 담당자는 주문 관리만 접근)
단점
상품 등록 후 재고 관리가 다른 메뉴에 있어 이동이 필요하다
연관 작업(상품 등록 → 프로모션 배너 연결)이 분산된다
적합한 경우
운영 인력이 역할별로 명확히 구분된 경우
각 담당자가 자기 영역만 집중하는 구조
BO 안 2: 작업 흐름 중심 (Workflow-Oriented)
운영자의 일일 작업 순서를 따르는 구조다.
대시보드
├─ 오늘 할 일
│ ├─ 신규 주문 (결제 확인 필요)
│ ├─ 출고 대기 (배송 정보 입력 필요)
│ ├─ CS 대응 필요 (취소·반품 요청)
│ └─ 재고 경고 (품절 임박)
├─ 콘텐츠 작업
│ ├─ 상품 등록/수정
│ ├─ 배너/프로모션 관리
│ └─ 쿠폰 생성
├─ 데이터 조회
│ ├─ 주문 내역
│ ├─ 고객 정보
│ └─ 매출 통계
└─ 설정
├─ 카테고리/정책
└─ 권한/알림
장점
운영자가 매일 해야 할 작업을 놓치지 않는다
우선순위가 명확해 업무 효율이 높다
초보 운영자도 순서대로 따라 하기 쉽다
단점
"오늘 할 일"이 비어 있으면 불필요한 화면이 된다
특정 데이터를 직접 찾기 어렵다 (예: 특정 고객 검색)
적합한 경우
운영 인력이 2명으로 적고 모든 역할을 겸하는 경우
매일 반복되는 작업이 명확한 경우
BO 안 3: 하이브리드 (대시보드 + 기능별)
대시보드에서 긴급 작업을 처리하고, 기능별 메뉴로 상세 관리하는 절충안이다.
대시보드
├─ 요약 위젯
│ ├─ 오늘 주문 건수/금액
│ ├─ 출고 대기 건수
│ ├─ CS 대응 필요 건수
│ └─ 품절 임박 SKU
├─ 빠른 작업
│ ├─ 주문 상태 일괄 변경
│ └─ 긴급 공지 등록
└─ 메뉴
├─ 상품
│ ├─ 리스트/등록/수정
│ ├─ 카테고리
│ └─ 재고
├─ 주문
│ ├─ 리스트/상세
│ └─ 배송 관리
├─ 고객
│ ├─ 리스트/상세
│ └─ 등급/블랙리스트
├─ 마케팅
│ ├─ 쿠폰
│ ├─ 배너
│ └─ 통계
└─ 설정
장점
긴급 작업은 대시보드에서 즉시 처리하고, 세부 관리는 메뉴에서 한다
작업 맥락에 따라 유연하게 접근할 수 있다
확장 시 기능별 메뉴에 추가하기 쉽다
단점
대시보드 위젯 설계와 API 개발에 추가 공수가 필요하다
운영자가 두 가지 경로(대시보드/메뉴)를 모두 학습해야 한다
적합한 경우
주문 처리 속도가 중요한 쇼핑몰
운영 효율과 데이터 관리를 모두 중시하는 경우
선택 기준 (쇼핑몰 특화)
세 가지 안 중 하나를 선택하는 기준은 다음과 같다.
기준 1: 론칭 일정과 개발 리소스
8주 MVP 일정이라면 FO 안 1(플랫) + BO 안 1(기능별)이 가장 빠르다. 계층 구조나 대시보드는 화면 수가 많아져 개발 시간이 증가한다.
기준 2: SKU 규모와 카테고리 depth
초기 300 SKU에 카테고리 3 depth라면 FO 안 3(하이브리드)이 적절하다. 플랫 구조로 시작하되 마이페이지는 정리해 확장 여지를 남긴다.
기준 3: 운영 인력 구성
인력 2명이 모든 역할을 겸한다면 BO 안 3(하이브리드)이 효율적이다. 대시보드에서 긴급 작업을 빠르게 처리하고, 메뉴에서 세부 관리한다.
기준 4: 비즈니스 목표
재구매율 35%가 목표라면 FO에서 마이페이지 경험이 중요하다. FO 안 3(하이브리드)으로 쿠폰·주문 내역을 강화한다.
전환율 2.5%가 우선이라면 FO 안 1(플랫)로 결제까지 클릭 수를 최소화한다.
최종 선택: 쇼핑몰 MVP 권장 안
5장 제약(8주·2명·300 SKU)과 목표(전환율·재구매율)를 고려하면 다음 조합이 적절하다.
FO: 안 3 (하이브리드)
빠른 구현과 확장성의 균형
마이페이지 대시보드로 재구매율 지원
결제까지 최대 3 클릭 유지
BO: 안 3 (하이브리드)
대시보드로 일일 작업 효율 확보
기능별 메뉴로 상세 관리
2명 운영 인력이 역할 분담하기 쉬움
이 조합은 MVP를 빠르게 론칭하면서도, 2차 릴리즈에서 기능을 추가할 여지를 남긴다.
사이트맵과 IA(Information Architecture)는 거의 같지만, 역할면에서 차이가 있다.
IA는 웹사이트나 앱의 정보를 어떻게 구성하고 연결할지에 대한 논리적 설계도다. 사용자가 원하는 정보를 얼마나 쉽게 찾을 수 있느냐를 중심으로 설계한다.
사이트맵은 말 그대로 고객을 위한 웹사이트의 페이지 목록이다. 보통 IA를 시각화한 결과물이다. 사용자 또는 검색엔진이 사이트 구조를 빠르게 이해하도록 돕는 역할을 한다.
기획 단계에서 IA 구조를 설계하고 sitemap으로 그대로 차용되는 경우도 있지만, 그렇지 않은 경우도 존재한다.
제목을 사이트맵으로 정한 이유는 UX측면에서 알아보고자 했다. 기획자는 개발이나 디자인 관점이 아닌 UX 관점에서 봐야 한다.
