[강의학습일지] UXUI 디자인 입문 6주차 강의

레퍼런스 분석

• 여러 가지 사례를 분류해 생각해 보고 도움이 될만한 부분을 찾아보는 과정
• 얻고 싶은 정보-다양한 사례수집-세부적 요소로 나눠서 살펴보기
• 좋은 점, 나쁜 점, 이유를 찾고 분석해서 인사이트를 정리해서 좋은 디자인을 구분할 수 있다.

1. 화면구조 분석

• 화면을 구성하는 요소를 나누는 방법
      - 예), 파운데이션 → 엘리먼트 → 모듈 → 페이지
•  파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소
      - 예) 색상, 폰트, 아이콘 등
• 엘리먼트: 파운데이션이 모여서 만드는 요소
      - 예) 버튼, 뱃지, 탭 등
• 모듈: 엘리먼트가 모여서 만드는 요소
      - 예) 리스트, 캐러셀, 내비게이션 등
• 페이지: 모듈이 모여서 만드는 최종 화면
      - 예) 홈, 마이페이지, 장바구니, 회원가입 등

Human Interface Guidelines | Apple Developer Documentation

Material Design

2. 디자인 원칙 기반 분석

• 좋은점, 나쁜 점 다양하게 찾아보고 논리적 근거를 찾는 게 중요
• 게슈탈트 심리학
• UX 비주얼 디자인 원칙
• UX/UI 심리학 법칙
• 기업의 디자인 원칙

3. 인사이트 정리

• 분석한 내용으로 얻은 인사이트를 정리. 사례를 개선해서 내 것으로 만들기

UXUI 디자인 패턴

• 다수의 제품에서 공통적으로 볼수있는 디자인 요소

1. 온보딩
   • 유저가 앱을 처음 접하고 앱을 배우기 시작하는 첫 단계
   • 기능을 이해하고 가치를 느낄 수 있도록 돕는 과정
   • 튜토리얼, 가치 보여주기, 개인화 설정
2. 로딩
   • 정보 전송, 불러올때 사용자가 기다리는 단계
   • 앱과 상호작용한다는 것을 사용자에게 알려줌
   • 스피너 아이콘or브랜드 아이덴티티를 담은 애니메이션 활용, 프로그레스 바, 스켈레톤
3. 검색
   • 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 화면
   • 정보의 양이 많은 서비스+앱의 핵심이라면 검색 기능을 추가해 사용자의 빠른 정보 탐색을 도울 수 있음
   • 자동완성 기능, 연관 상품 or검색어 노출, Empty View(검색 결과 없음)
4. 회원가입
5. 리스트
6. 카드
   • 각각 구분된 정보를 담아 하나의 네모 안에 넣는 형태
   • 네모 안에 들어간 정보는 자연스럽게 하나의 덩어리로 인식이 되어 시각적으로 정보의 구분이 됨
7. 캐러셀(Carousel)
   • 콘텐츠 영역 내에 여러 개의 서로 다른 이미지나 텍스트의 슬라이드를 가로로 슬라이드 시켜 콘텐츠를 순환시킴

[레퍼런스 분석1] 핀테크/금융

• 가이드라인, 심의, 제약사항 등 조건이 있음
• 여러 가지 앱을 동시에 보면서 분석(금융자산 연결, 자산/소비 분석, 신용대출 비교)
• 핀테크: 금융+테크. 금융 서비스와 정보기술(IT)의 융합을 통한 금융서비스 및 산업
• 금융기관 은행사: 1 금융권, 2 금융권 or저축은행, 인터넷 은행
• 금융기관 카드/증권/보험사

[레퍼런스 분석2] 콘텐츠

• 콘텐츠 속성에 따라 필요한 UXUI 속성이 다름
• 체류시간 늘리는 UXUI를 찾는데 집중하기(콘텐츠 구성, 콘텐츠 몰입할 수 있도록 하기)
• 영상, 오디오, 웹툰, 텍스트

[레퍼런스 분석3] 커머스

• 전자상거래 이커머스. 상품으로 인한 영향을 크게 받음
• 상품 탐색에서 구매까지 이어지는 사용자 여정에 집중. 어디서 이탈하는지 확인

* GNB: Global Navigation Bar

• 메뉴 종류 웹사이트 최상위 메뉴
• 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치
• GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동 가능