정보구조(IA, Information Architecture)와 사이트맵 작성, 내비게이션 만들기 - 패스트캠퍼스 챌린지 7일차

세션 4. UX/UI 디자인 노하우

 

어떻게 도출된 기능을 구조화 해야 할까요

 

정보구조(IA, Information Architecture)

• 분류와 계층
  • 만들기 전, 사이트맵을 작성하고 제품의 대표 페이지들을 시각적으로 보여주기
  • 사이트맵에는 상하구조/좌우구조가 있음
  • 무에서 유를 만들기가 어려우므로 경쟁사를 벤치마킹하여 구조화 후 수정
  • 사이트맵은 SEO를 고려하여 구성
• 내비게이션
  • 모달, 홈, 상단 내비게이션, 하단 내비게이션
• 검색
• 레이블링
  • 참조 번호와 레이블을 붙여야 함

 

어떻게 내비게이션을 만들어가야 할까요?

유저 플로우(User Flow) : 사용자가 의도한 목적을 달성하기 위해 거쳐야하는 일련의 단계를 시각화한 것
User Goal ▶ Task Flow ▶ Wire Flow

 

사용자 목적(User Goal) : 여정 지도를 기반으로 사용자의 제품 사용 목적을 정의

태스크 플로우(Task Flow) : 사용자가 목적을 달성하기 위해 해야할 것들을 각 스크린 단위로 시각화

와이어 플로우(Wire Flow)

• 각 스크린 별로 상세한 레이아웃과 기타 필요한 요소들을 추가
• 개발 구현을 위해 필요한 내용들을 추가 (에러 발생 상황, 정보 개수 등)
  
  

플로우 차트 요소 추가 : 와이어 플로우에 플로우의 차트 요소 추가

 

---

강의 수강화면

강의 수강 7일 차인 오늘 드디어 UI 디자인에 대한 첫 강의를 들을 수 있었다(!)

 

IA(정보구조)에 대한 개념은 2004~2005년 쯤 온라인사업들을 구상하면서 웹프로젝트 실무의 일환으로 배웠는데, 그 개념을 배운 덕분에 이후 내가 맡게 된 수십여 건의 웹프로젝트들을 고객과 함께 사이트맵을 작성하는 것부터 시작하게 되었다. 그리고 여기서 와이어플로우라는 명칭으로 하는 프로세스는 '스토리보드'라는 이름으로 진행해왔다. 오늘 내가 배운 새로운 프로세스들을 앞으로 수십년 간 만날 미래 고객들과 함께 진행하게 될 거란 생각을 하니, 강의를 듣고 내용을 정리하는 이 시간이 굉장히 귀중하다. 

 

오늘 강사님은 Sketch라는 프로그램을 이용해 직접 와이어 프레임을 만들어 보는 것을 시연해주셨다. 함께 만들어가 볼까요, 라고 하셨지만 툴 사용법은 아직 전혀 배운 것이 없어서 구경만 했다. 프로그램이 뭔가 동글동글하고 귀여운 느낌인 것이 거부감없이 친숙하게 느껴진다. 이 프로그램 자체도 UX/UI디자인 프로세스를 통해 만들어졌을 것이다. 어서 툴 사용법을 차근 차근 배우고 내 것을 만들어 보고 싶다. 

 

 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa