티스토리 뷰
사례 3
토스페이 모바일 앱의 미니 버전을 만드는 것으로 실습을 진행하였다.
토스페이는 원래 토스 앱 안에 내장된 기능이지만, 온오프라인 결제를 원활하게 하기 위한 목적에서 분리된 독립 앱으로 구성되었다고 이해하였다.
총평 : 메인 그룹, 프로덕트 그룹, 유틸리티 그룹, 컴퍼니 그룹까지 전체적인 정보 구조를 잘 구성하였다.
Main 그룹
- 스플래시, 권한 설정, 온보딩 3개, 코치마크, 메인 페이지, 메인 팝업 등이 포함되어 있다. 잘 구성되었다.
Product 그룹
- 카테고리, 상품 카테고리 하위에 목록 페이지, 목록 상세 페이지가 있으며, 상세 페이지 내에는 기본 탭, 리뷰 탭, 안내 탭이 구성되어 있다. 이 부분도 잘 처리하였다.
- 랭킹과 기획전도 포함되어 있는데, 랭킹은 상세 페이지가 기존 상세 페이지와 중복되므로 ‘0’으로 표기한 것으로 보인다. 중복되는 상세 페이지는 굳이 다시 작성하지 않아도 된다.
- 기획전은 목록과 상세가 구분되어야 하므로 상세 페이지를 별도로 구성하였다. 기획전 상세에서도 상품 상세로 연결되는 흐름이 있을 것이며, 이 역시 중복이므로 별도로 작성하지 않아도 된다.
- 이벤트에서는 상세 페이지에서 쿠폰을 제공하는 것으로 구성하였고, 쿠폰을 다운로드 받았을 경우, 해당 쿠폰은 마이페이지 하위에 있는 마이 쿠폰함(쿠폰 혜택 메뉴)으로 저장된다. 쿠폰 목록과 상세 페이지가 각각 존재하며, 이벤트와 마이페이지 간에 기능 연계가 잘 이루어져 있다.
=> 이처럼 연동 관계가 있는 구조는 서로 크로스체크를 하며 맞추는 작업이 필요하다.
Utility 그룹
유의해야 할 점은
로그인(메뉴)과 로그인 페이지는 다르다는 것이다.
로그인 메뉴는 내비게이션의 진입점으로 존재하는 항목이며,
로그인 페이지는 실제 아이디와 비밀번호를 입력할 수 있는 물리적인 UI 페이지이다.
- 이 로그인 페이지에서는 아이디 찾기, 비밀번호 찾기, 회원가입으로 연결될 수 있다.
- 회원가입 메뉴는 이미 유틸리티 하위에 구성되어 있으므로, 로그인 페이지 내부의 회원가입은 중복으로 간주하여 구조도에서는 생략하였다.
- 패스워드 찾기, 아이디 찾기, 본인 인증 페이지 등은 모두 외부 인증을 받기 때문에 외부 0’으로 표기하였다.
=> 이러한 외부 페이지는 우리가 직접 제작하지 않으며, 통신사, 국가, 신용평가기관에서 제공하는 시스템을 활용한다.
- 사용자가 외부 페이지에서 정보를 입력하여 인증 결과를 받은 후, 우리 시스템에서는 해당 결과값만 받아와 다음 단계로 진입하게 된다.
- 회원가입과 회원가입 기본 정보는 서로 다른 항목으로 구분될 수 있다.
- 예를 들어, 토스에서는 전화번호나 이메일을 통해 1차 인증을 선행한 뒤 기본 정보를 추가 입력하는 방식이 있을 수 있다.
- 이메일 등록이나 추가 정보 입력, 추천인 아이디 입력 등 단계별로 구분해 페이지를 설계하면 좋다.
- 배송 정보 입력은 팝업 형태로 구현되어 있으며, 우편번호 찾기 팝업은 카카오, 우체국 등 외부 API를 사용할 수 있기 때문에, 이 경우는 ‘외부 0’으로 처리하거나 생략 가능하다.
- 간편 가입(소셜 로그인)은 네이버 등 외부 서비스를 활용하기 때문에 관련된 회원가입 정보도 모두 ‘외부 0’으로 표기한 것으로 보인다.
마이페이지
- 마이홈은 상단에 위치하는 것이 적절하다.
- 장바구니는 마이홈 하위에 위치하거나, 유틸리티 하위로 별도로 분리해도 무방하다. 두 위치 모두 가능성이 있으며, 현재 마이홈 안에 장바구니가 있어도 문제되지 않는다.
- 장바구니 하위에는 주문서 작성 페이지가 연결되어 있으며, 이 또한 자연스러운 흐름이다.
- 브랜드콘과 기프트콘 관련 항목도 다뤄야 한다.
- 기프트콘의 경우 유효기간이 만료되면 소멸되거나 환불될 수 있으므로, 환불 정보를 입력할 수 있는 계좌번호 등록 페이지와 같은 항목도 필요할 수 있다.
- 고객센터는 공지사항, 1:1 문의, 자주 묻는 질문 등 메뉴가 잘 정리되어 있다.
- 현장 결제의 경우, 유틸리티 하위에 위치해 있다.
- 처음에는 본인 인증 절차를 거치며, 인증이 완료되면 서명, 인증 코드(6자리) 입력 등의 절차가 이어질 수 있다.
- 이후 결제 목록이나 지출 내역으로 바로 이동하는 흐름이 구성된다.
- 이러한 절차는 전체적으로 잘 정리되어 있으며, 컴퍼니 그룹까지도 완성도가 높다.
'[기획] > 화면설계 심화' 카테고리의 다른 글
정보구조도 실습 피드백 (3) (1) | 2025.04.25 |
---|---|
정보구조도 실습 피드백 (1) (1) | 2025.04.23 |
개별 설계 효율적으로 하는 법 (0) | 2025.04.22 |
화면 설계를 위한 기반 요소와 정보구조도 실습 예시 (0) | 2025.04.22 |
화면 설계의 방식과 장단점 (0) | 2025.04.21 |