본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
오늘은 왜 네이게이션을 만들어가야할지 그리고 유저 플로우, 테스크 플로우, IA등을 실제로 와이어프레임을 스케치를 통해 러프하게 작업하면서 구조화하는 법을 배웠다. 스케치로 와이어프레임과 간단한 프로토타입을 만들수 있고, 이제는 이렇게 하나하나 하지 않고 overflow를 이용하는 것도 꿀팁이였다.
part4 디자인 시스템 구축
UX/UI 디자인 노하우
강의 노트: 유저 플로우와 내비게이션 설계 방법
1. 내비게이션 설계의 시작: 유저 플로우 작성
- 유저 플로우(User Flow): 사용자가 목적을 달성하기 위해 거치는 일련의 단계를 시각화한 것
- 순서:
- 사용자의 목적(Goal) 설정 (ex. 커피 주문하기)
- 테스크 플로우(Task Flow): 각 스크린에서 수행해야 할 과업 정의
- 와이어 플로우(Wire Flow): 각 스크린의 구성 요소 시각화
2. 테스크 플로우 예시: 모바일 앱에서 커피 주문
- 홈 화면 → 주문 버튼 → 커피 리스트 확인 → 커피 선택 → 토핑 여부 확인 → 주문 완료
- 각 단계는 스크린 단위로 텍스트로 먼저 정리
3. 와이어 플로우 작성 팁
- 와이어프레임 작성 시 요구사항을 기반으로 세부 내용 포함
- 예: 마케팅 배너, 추천 메뉴, 최근 주문 메뉴 등
- IA(정보 구조)를 바탕으로 내비게이션 요소도 배치
- 상단: 로고, 검색, 알림
- 하단: 홈, 내 활동, 장바구니, 프로필, 도움말 등
4. 정보 구조(IA)와 내비게이션의 관계
- IA 요소: 분류, 계층, 레이블, 내비게이션, 검색
- 요구사항 반영 → 레이아웃에 반영 (예: 최근 주문 메뉴 노출 요청)
- 각 메뉴 및 기능에 번호(예: 1.0, 2.0 등) 부여 → 와이어프레임 및 디자인 파일 정리에 유리
5. 설계 시 고려사항
- 사용자의 요구 + 이해관계자의 요구 + 기술적 제약을 통합적으로 반영
- 레이아웃 설계 시 각 화면의 역할을 명확히 구분
- 예외 상황, 에러 케이스, 데이터 양 제한 등도 함께 정의 필요
6. 도구 사용 제안: Overflow
- 스케치와 연동되는 서드파티 툴
- 장점:
- 드래그 앤 드롭으로 플로우 작성 가능
- 조건 분기 표현에 적합 (ex. 로그인 여부에 따라 다른 플로우)
- 개발자와 공유 시 이해도↑
- https://overflow.io/s/W2U581Q9/?node=ea0b2b6b
Made with Overflow
W2U581Q9
overflow.io
10. SEO 관점에서의 IA 중요성
- 검색 엔진 최적화(SEO)를 위해 사이트맵(XML, txt 등) 제출
- URL 구성도 IA 구조에 맞게 설계 필요
- 예: cafemenu.com/디저트/과일주스/바나나
- IA는 UX뿐 아니라 검색 노출 전략과도 연결됨
11. 마무리
- 지금까지의 내용으로 사용자의 요구를 반영한 기능 정의 → 정보 구조화 → 시각적 설계까지 실현 가능
- 앞으로는 이 구조를 어떻게 더 잘 다듬고 고도화할지 학습 예정
학습 인증샷
패스트캠퍼스, 환급챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발, 오공완
