8. 실전 예제 2. 와이어프레임 만들기

1. UX, UI디자이너는 왜 와이어프레임을 만들어야 할까?

 

와이어프레임 ?

미드타입 프로토타입의 한 종류

 

와이어프레임을 만드는 목적

1. 팀원들과의 커뮤니케이션

  -> 세부 사항을 적용하지 않기 때문에 빠른 수정과 업데이트가 가능하다.

2. UI 디자인 단계로 넘어가는 것이 수월해진다.

  -> 기능적인 요소를 미리 논의하고 단계를 넘어가기 때문에, 디자인 단계에서 좀 더 시각적인 부분에 집중할 수 있다.

 

와이어프레임의 구성 요소

텍스트, 도형

색은 최대한 단순하게 사용한다.

의도적으로 시각적 퀄리티를 높이지 않는다.

#기능적인 부분에 집중하기 위함

 

워크플로우 ?

화면 간의 이동을 표시하는 것

  -> 개발자, PM 등 팀원이 앱이 어떻게 동작하는지 이해하는데 도움을 준다.

 

---

2. 기초 작업하기: 사이트맵과 로우파이 스케치

 

사용자는 앱에 진입했을 때 4개의 탭을 제공받는다.

  -> 홈, 카테고리, 좋아요, 프로필

카테고리에서는 세부 카테고리가 있다.

  -> 예를 들면, 스니커즈, 운동화, 슬리퍼 등 신발의 종류

세부 카테고리를 선택하면 실제 제품들을 살펴볼 수 있다.

  -> 그 중 제품을 선택하면 상세페이지로 넘어가서 구매까지 이어질 수 있게 한다.

홈 화면에서는 대표 카테고리와 대표 상품을 보여준다.

  -> 대표 카테고리에서 카테고리 탭으로 넘어갈 수 있는 연결고리를 준다.

좋아요 탭에서는 제품 상세 페이지에서 즐겨찾기로 등록한 제품을 모아서 보여준다.

프로필에서는 사용자의 정보를 표시하고 정보를 수정할 수 있게끔 한다.

 

각 화면에 공통적으로 들어갈 하단 탭 바가 있다. (홈, 카테고리, 좋아요, 프로필)

홈 화면에는 검색바와 앱 소개, 대표 카테고리, 신상품(대표 제품)이 존재한다.

  -> 모두보기 버튼을 통해 대표 카테고리에서 카테고리 탭으로 갈 수 있게 한다.

제품을 선택하면 상세 페이지로 이동한다.

  -> 상세 페이지에서는 제품 정보를 확인하고 즐겨찾기, 공유, 구매확정을 할 수 있다.

  -> 구매 확정 버튼을 누르면 구매 확정 페이지로 이동한다.

구매 확정 페이지에서는 상품 정보, 배송정보, 페이 정보, 카드 정보 등을 확인한다.

  -> 구매 전 정보가 맞는지 확인하기 위함이다.

좋아요 탭에서는 좋아요를 누른 상품(즐겨찾기한 상품)을 모아서 보여준다.

 

---

3. E-commerce 모바일 앱 와이어프레임 만들기 1. 홈 화면 / 카테고리 화면

 

 

---

4. E-commerce 모바일 앱 와이어프레임 만들기 2. 상세 화면 / 구매확정 화면

 

 

---

5. E-commerce 모바일 앱 와이어프레임 만들기 3. 피그마로 워크플로우 만들기