티스토리 뷰
사례 1
Main 영역
- 메인 그룹에서 스플래시 권한 설정, 메인 페이지, 메인 팝업은 모두 잘 구성하였다.
- 이 두 가지는 한 번만 나오는 성격이므로, 경우에 따라 다른 방식으로 구성할 수 있다는 점을 고려해야 한다.
Product 영역
- 메뉴가 다양하게 있으나, 대부분 중복될 가능성이 높다. 특별한 옵션 차이가 없다면 비슷하게 구성될 수 있다.
- 예를 들어 여행, 패션을 기준으로 보면 목록 페이지 하위에 상세 페이지가 있으며,
상세 페이지에는 기본 정보 외에 정보 탭, 리뷰 탭, QnA 탭이 존재한다.
QnA 탭
- 질문 등록이 필요하므로 등록 기능이 반드시 필요하다. 이 등록 기능은 QnA 탭 안에 구현하거나, 고객센터 하위의 일대일 문의 탭에서 구현한 후 QnA에서 불러오는 방식도 가능하다.
- 어느 쪽이든 한쪽에는 반드시 존재해야 전체 흐름이 성립된다.
- QnA는 등록 기능과 상세 보기 기능이 있으며, 판매자가 남긴 답변 영역은 별도 페이지로 간주하는 것이 일반적이다.
- 비록 하나의 흐름으로 볼 수 있으나, 정보 구조상 개념적으로는 다른 내용이기 때문에 분리하는 것이 좋다.
QnA 결과
- 마이페이지 하위의 ‘나의 문답 관리’에서 목록 및 상세 페이지로 연결되어야 한다.
- 메뉴는 분리되어 있지만 관리 체계는 이어져야 한다는 점을 이해해야 한다.
상세 페이지에 대해
- 상세 페이지는 수정 기능을 포함할 수도 있고, 수정 모드가 별도 페이지로 구현될 수도 있다. 이처럼 CRUD 형태로 구성되는 게시판은 대부분 유사한 구조를 갖는다.
- 구축 단계에서 카테고리 분류 값은 정보 구조와는 별도로 관리한다. 별도의 정책서나 카테고리 분류 체계를 통해 관리하고, 정보 구조에서는 공통적인 한 벌만 정의하면 된다. 이러한 참고용 기입도 유용한 방식이다.
검색 결과 화면
- 일반적으로 목록 페이지에서 구성되며, 그리드 형식(1단, 2단, 3단 등) 또는 썸네일 형식으로 나뉜다. PC 환경에서는 4단, 5단까지 구성될 수 있다. 단 수가 다르면 목록 페이지도 각기 새로 구성된다고 보면 된다.
- 따라서 썸네일, 1~3단 그리드 정도는 기본적으로 기획해두면 디자이너가 작업하기에 유리하다.
- 준비가 되어 있지 않으면 하나를 그리는 시간에 세 개를 그려야 할 수도 있다.
Utility 영역
로그인 하위에 로그인 페이지가 존재하며, 그 하위로 아이디 및 비밀번호 찾기 페이지가 포함된다.
우편번호 검색
- 자체 구현도 가능하지만 카카오, 네이버, 우체국 등 외부 기관의 팝업창을 활용할 수도 있다.
- 이 경우 외부 팝업은 ‘0’으로 표기하고, 자체 제작 시에는 ‘1’로 구분한다.
- 우편번호 검색 결과 페이지 또한 반드시 기재해야 하며, 실제 구현 시 반영될 수 있기 때문에 참고 항목으로라도 명시해두는 것이 좋다.
마이페이지
- 마이홈에는 대시보드 성격의 마이홈 1 페이지가 존재하며, 메뉴 하위에는 반드시 실제 페이지가 존재해야 한다.
- 리뷰 작성 시 상품을 찾아야 하므로, 리뷰 작성 모드는 상품을 포함하는 구조가 된다.
- 기획서에는 이 화면의 명칭을 명시적으로 작성해야 하며, 이는 기획자가 지정한 이름을 유지해야 한다.
- 해당 명칭을 프론트에서 노출할지 여부는 디자이너가 판단한다.
- 따라서 장바구니처럼 길거나 복잡한 명칭은 프론트에서 줄일 수 있지만, 기획서와 설계서에서는 원래 명칭을 유지해야 한다.
- 관심 브랜드 목록과 상세가 중복되는 이유는 목록에서 특정 항목을 클릭하면 전시 영역의 브랜드 상세로 이동하기 때문이다.
=> 따라서 브랜드 상세와 관심 브랜드 상세는 실제로 연결되어 있으며, 브랜드 상세에서 상품 상세로 이어질 수 있으므로
중복 페이지로 간주할 수 있다.
- 상품 영역과 연계하려면 프로젝트 하위에 브랜드 관련 메뉴가 필요하며, 브랜드 목록과 상세 페이지가 함께 구성되어야 한다.
배송 주소
- 목록과 상세 페이지가 있으며, 상세 페이지에는 수정 및 등록 기능이 분리되어 존재할 수 있다.
- 미니앱에서는 이 부분이 크게 중요하지 않을 수 있으나, 실제 운영 단계에서는 이 흐름을 고려해야 한다.
결제하기
- 외부 시스템을 연동하는 경우가 많다.
-- 예를 들어, 무통장입금 팝업은 자체 제공 가능하므로 ‘1’로 설정한다.
-- 간편결제 등록 화면(카드 등록, 패스워드 입력 등)은 자체 제작이 필요한 영역이므로 포함해야 한다.
주문/배송/환불 이력
- 마이페이지 하위의 메뉴로 포함되며, 마이페이지 하위에 직접 메뉴를 구성할 수도 있고, ‘주문관리’라는 상위 메뉴 아래로 하위 메뉴들을 구성할 수도 있다.
- 인지 용량을 고려하여 메뉴가 7개 이상이 되면 그룹핑하여 간결하게 구성하는 것이 좋다.
Company 영역
- 전체적으로 흐름이 잘 잡혀 있으며, 본 기획은 아웃렛 전용 상품이라는 점에서 아웃렛 특성에 맞는 기능들을 특화하려는 의도가 명확하다.
- 예를 들어, 기획전, 타임딜, 전문 할인 영역인 ‘클리어런스’ 같은 메뉴를 추가 구성하면 보다 아웃렛 특화 기능이 강화될 수 있다.
사례 2
일정 만들기 기능
- 성격에 따라 유틸리티 영역으로 볼 수도 있고, 해당 플랫폼의 주력 상품으로 판단하여 프로덕트 영역에 포함시킬 수도 있다. 이러한 이유로, 이 기능의 위치는 한 번 더 고려해볼 필요가 있다.
유틸리티
- 하위에 회원가입과 마이페이지가 존재하는데, 일반적으로는 로그인을 가장 먼저 구성하는 것이 일반적이다. 현재 로그인 메뉴가 존재하지 않는 점은 보완이 필요하다. 로그인 → 회원가입 → 마이페이지 순으로 구성하는 것이 바람직하다.
마이페이지 하위에는 예약 내역과 고객센터가 존재하는데, 예약 내역 하위에는 마일리지와 주문 이력이 포함되어 있다.
- 구조상으로는 주문 이력이 우선이며, 마일리지 등은 마이페이지 하위의 별도 메뉴로 분리하는 것이 더 나은 구조로 판단된다.
- 즉, 마이페이지에서 예약 정보를 확인한 다음, 관련 혜택을 확인할 수 있도록 하는 흐름이 더 자연스럽다.
장바구니 목록
- 하위에는 주문서 작성이 존재하며, 주문서 작성이 '1'이면 반드시 '1'로 카운팅을 명확히 해두어야 한다. 이렇게 해야 나중에 오차 없이 페이지 수나 구성을 정확하게 파악할 수 있다.
고객센터
- 메뉴얼은 전반적으로 나쁘지 않다. 다만, '0'으로 표기된 항목은 나중에 제거할 가능성이 있으므로, 현재부터 표기 원칙을 명확히 정해두는 것이 중요하다.
- 예를 들어, ‘0’을 한 칸 띄고 작성하였다면, 이후에도 동일한 방식으로 작성해야 나중에 일괄 수정 시 혼란이 없다. 붙여쓰기와 띄어쓰기와 같은 표기 방식은 처음부터 일관성 있게 유지해야 한다.
공지사항
- 목록과 상세 페이지가 모두 존재하므로 각각이 어떤 역할을 하는지를 명확히 구분하여 기입하는 것이 좋다.
- 자주 묻는 질문(FAQ) 마찬가지이다. UI적으로는 목록과 상세가 붙어 있는 형식일 수 있지만, 정보 구조상으로는 목록과 상세를 분리하여 정의해두는 것이 좋다.
- FAQ와 같은 게시판은 등록, 수정, 삭제 기능이 모두 포함되므로, 각 기능마다 별도의 페이지가 필요함을 염두에 두어야 한다.
'[기획] > 화면설계 심화' 카테고리의 다른 글
정보구조도 실습 피드백 (3) (1) | 2025.04.25 |
---|---|
정보구조도 실습 피드백 (2) (1) | 2025.04.25 |
개별 설계 효율적으로 하는 법 (0) | 2025.04.22 |
화면 설계를 위한 기반 요소와 정보구조도 실습 예시 (0) | 2025.04.22 |
화면 설계의 방식과 장단점 (0) | 2025.04.21 |