UXUI 인턴

[유데미x스나이퍼팩토리] UI/UX 인턴형 프로그램 4기 과정 9일차 - ios디자인 가이드 및 유저 플로우

vpdcong 2024. 7. 5. 09:47

 

 

 

오늘 이론 수업은 UX 기획 - 전략과 산출, ios 가이드라인에 대해서 배웠다. 

 

디벨롭(구체화)

- UX전략

- 아이디어 도출

- 아이디어 평가

- 사용자 시나리오

 

UX 전략

- 포지셔닝

- 핵심가치

- 서비스 모델

- 컨셉설정

 

가치도출

- 인사이트 : 우리 서비스에 필요한 변화

- 가치 : 서비스를 통해서 사용자에게 제공할 결과

- 전략 : 장기적인 발전과 성장을 달성하기 위한 계획

 

포지셔닝 맵

우리 서비스가 시장 내에서 위치를 파악하고 앞으로 어떤 위치로 나아가야 하는지 정의한다.

 

유저플로우

  1. 외부탐색 - 서비스 접근 전에 외부에서 이루어지는 탐색과 이를 통해 서비스에 접근하기 전까지의 과정(ex 네이버에서 인프런을 검색)
  2. 접근 - 서비스를 들어와서 탐색을 시작하기 전까지의 과정(스플래시, 온보딩, 로그인, 요금제안내 등 다양)
  3. 탐색 - 콘텐츠 탐색, 메뉴를 통한 탐색(Browsing), 검색을 통한 탐색(Searching), 추천에 의한 탐색,뒤로가기(Back key) 탐색 등 제공
  4. 조회 - 정보 조회, 큐레이션 정보, 통계 정보, 사용자 리뷰 (ex 네이버지도에서 위치조회, 컬리에서 상품조회)
  5. 주활동 - 구매나 예약, 거래와 같이 사용자가 서비스의 핵심 기능을 실행
  6. 이탈 - 앱 종료

 

 

딜리버(산출)

- IA : 디자인을 위한 정보 구조도 설계
- User Flow : 특정 작업을 위해 움직이는 경로 설계
- 와이어프레임 : 화면 단위의 레이아웃 설계
- UI / GUI 디자인 상세 설계

 

IA

  • 코드 - 해당 페이지에 대한 고유 코드~
  • 계층 구조- 메뉴 구조를 표현하는 방법(Dept h 1,Dept h 2,Dept h 3...)
  • 형태정의 - 해당 페이지의 형태(Type) 정의 (HTML/Link/Program)
  • 구조 - 페이지의 표현 구조 정의(팝업/레이어/iFrame/모달/얼랏)
  • 요소 - 해당 페이지에 삽입될 객체 정의(요소, 이미지, 동영상, 문서,첨부파일)
  • 권한- 페이지 접근에 대한 권한 정의(회원/비회원/멤버쉽 회원)
  • 설명 - 메뉴나 페이지별 상세한 설명, 주의사항 등 명시

 

 

와이어프레임

윤곽 잡는 것

- 컬러 최대한 빼기

- 폰트는 시스템 폰트

- 스타일 빼기

- 최대한 디자인 없게

 

 


 

 

 

 

오늘 피그마수업은 프로토타입 실습으로 진행했다. XD 프로토타입만 하다가 피그마 프로토타입은 처음 해보는거였는데 쉽지 않다. XD랑 비슷하면서도 달라서 아예 새로 공부해야된다 ...

 

 

 

이후 오후에는 유저 플로우를 설계했다. 왼쪽이 전이고 오른쪽이 후다. 플로우는 처음 해보는거라 팀원을 따라서 해보았는데 나름 할만했다.

 

 

 

이후 시간이 좀 남아서 홈화면 와이어프레임도 만들었다.

 

 

정말 열심히 만들었다

 

홈화면 와이어프레임 만드는것도 꽤나 오래 걸렸었는데 다른화면들까지 다 하면 정말로 오래걸릴거같은 느낌적인 느낌... 이번 교육에서 UI디자인을 하는 시간이 너무 짧아서 아쉬운 것 같다.

 

 

 

 

——————————————————————————

본 후기는 유데미 x 스나이퍼팩토리 UI/UX 인턴형 프로그램 4기 과정(B-log) 리뷰로 작성 되었습니다.