[내일배움캠프_UX/UI] 2주차 수요일 TIL

TIL (Today I learned)

 

 

🙄 오늘 나는 무엇을 했나요

오늘은 나름 스케줄표대로 진행했다.

오전에는 그동안 정리 못했었던 1,2주차 강의 내용을 복습 겸 정리했다.

오후에는 5주차 강의 듣고, 과제 하던 도중에

4시에 튜터님 특강을 들었다.

UI 역량 강화를 위한 비주얼 디자인이란 제목으로 강의를 하셨는데,

5주차 강의 내용이랑 겹치는 부분이 많아서 신기했다.

시각적으로 좋아 보이는 디자인들이라...

그리고 새롭게 과제들이 주어졌다!

디자인 원칙이 잘 적용된 사례들 찾아보고 클론하기

최대한 많이!

따로 과제를 제출해야하는 것은 아니어서 알아서 혼자해야한다.

열심히 해봐야지...!

아쉽게도 6주차 과제까지는 진행하지 못했다.

내일 쉬는 날이니까 과제하고 싶은 마음이 생기면 마저 해야겠다.

😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은 나름 잘 집중했던 것 같다

조금씩 스케줄에 적응이 되는 것 같다.

아 아침에 motp만 인증해놓고 출석하기 버튼을 안 눌렀다!

7분 정도 지각.. 나머지 공부로 채워야한다.

너무 졸려서 눈을 반은 감은채로 해서 이런 일이 일어난 것 같다.

아침에 급하게 하지 말고, 공부할 준비를 잘 해야겠다.

또 문제점을 아까 뭔가 생각했던 것 같은데 생각이 안난다.

🧐 오늘은 어떤 것을 배웠나요

[5주차]
디자인 원칙
: 인지심리학의 관점에서 디자인할 때 지켜야할 규칙
- 사람들이 편안하게 느낌고 자연스럽게 행동하도록 유도하여
  사용성이 높은 제품을 만들 수 있다.

게슈탈트 심리학
- 주변에 있는 요소 간의 관계와 맥락에 따라 영향을 받음
- 착시현상 : 사람의 뇌는 있는 그대로 받아들이지 않고,
               의식이 기본적으로 통일성, 연속성, 유사성을 요구함
- 사용자의 의식이 기대하는 대로 디자인 되어 있지 않으면
  몰입이 깨지고, 제품 이탈할 수 있음

1) 유사성의 원리 : 비슷한 것끼리 하나로 묶음
   형태(모양), 크기, 색상, 방향을 이용한 유사관계 형성
   형태의 유사성이 제일 약함, 색상의 유사성이 제일 강함
2) 근접성의 원리 : 가까운 것끼리 하나로 묶음
    유사성의 원리보다 근접성 원리가 더 강함
3) 폐쇄성의 원리 : 공백, 틈, 간격을 닫힌 형태로 인식
4) 연속성의 원리 : 직선, 곡선을 따라 배열된 것을 하나로 인식
5) 공통성의 원리 : 같은 방향으로 움직이는 것끼리 관련성이 높다고 인식

 

UX 비주얼 디자인 원칙
: 데이터를 바탕으로 증명된 여러가지 시각적인 원칙
- 시각적인 매력을 근거를 들어 설명할 수 있고, 사용성을 높여준다.

1) 스케일
- 상대적인 크기를 사용하여 중요도와 순위를 표시
- 일반적으로 3가지 이하의 크기를 사용
2) 시각적 위계
- 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인 하는 것
- 크기, 색상(채도, 대비), 간격, 배치 등으로 표현
- 사용자가 화면에서 정보를 찾는데 도움
- Large, Medium, Samll 3가지로 분류
3) 균형
- 디자인 요소간에 적당한 배열이나 비율을 주는 것
- 시소처럼 균형을 맞추는 것
- 대칭이나 수직이나 수평의 축에 비슷한 시각적 정보가 배치되도록
대칭 : 안정적, 정적인 느낌
비대칭 : 중심 축을 기준으로 비대칭 분포, 역동적이고 신선한 느낌
방사형 : 중앙의 점을 기준으로, 시선을 중앙에 집중
4) 대비
- 눈에 띄게 두 요소간의 차이를 두는 것
- 특정 부분을 돋보이게 하고 싶을 때
- 덜 중요한 요소가 너무 흐릿한 글자는 사용성을 떨어뜨림

UX/UI 심리학 법칙
- 사람의 마음에 대한 이해를 바탕으로 디자인
- 데이터가 없는 초기 제품에 대한 의사결정 근거가 됨
- 이론적 근거를 바탕으로 주장하고, 설득할 무기로 활용
- 좋은 디자인의 체크리스트
- 사용자의 경험, 행동을 이해할 수 있도록 도움

1) 제이콥의 법칙
새로운 제품도 자신이 이미 알고 있는 방식으로 작동하길 원한다.
- 보편적이고 익숙한 방식으로 설계하는 것이 중요
* 멘탈모델 : 사람들이 갖고 있는 생각 패턴
- 제품에 변화가 있을 때 멘탈모델을 잘 활용하는 것이 좋음
- 스큐어모피즘 : 실제와 비슷하게 동작
- 토글 : 기계 장치

2) 피츠의 법칙
인터렉션해야하는 대상이 거리가 가깝고, 크기가 커야 사용성이 좋다
- 정확하게 선택할 수 있을 만큼 충분히 큰 사이즈
- 마우스나 손가락이 쉽게 닿을 수 있는 영역에 배치
- 중요한 기능은 오른손 엄지가 잘 닿는 곳에 위치

3) 힉의 법칙
의사결정에 걸리는 시간은 선택지 개수와 복잡성에 비례해 늘어남
- 복잡하고 많은 양의 정보가 들어오면 인지부하가 생김
* 인지부하 : 뇌가 처리할 수 있는 양보다 정보가 많으면 생김
   인지부하가 한계점을 넘어가면 사용자 이탈함
- 복잡한 작업은 더 작은 단계로 나눈다.
- 선택지의 개수를 최소화하거나 추천 선택지로 부담을 낮춤
- 너무 추상적 단순화하면 생각해야 하니까 또 인지 부하가 생김

4) 밀러의 법칙
보통 사람은 정보를 7±2개 정도만 기억할 수 있다.
컨텐츠나 메뉴 개수가 아니라 그룹핑된 정보의 덩어리의 갯수
정보를 구조화, 그룹화하는 것이 중요


기업의 디자인 원칙
- 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드
- 공통되고 일관된 원칙으로 의사결정 기준이 되고, 시간을 절약

-Spotify
연관성 : 개인화된 느낌, 문화권에 맞춘 정보 제공
인간 : 기술, 기능적으로 보이지 않고 감정을 나눔, 캐릭터 사용
통일성 : 일관된 경험과 친숙함, 신뢰 구축, 디자인의 재사용

---

 

[6주차]
레퍼런스 분석
- 다양한 사례를 수집해서 분석해보는 것
- 좋은점, 나쁜점, 그 이유를 찾고, 인사이트 정리하기
- 스스로 생각하는 힘을 기르고, 디자인 능력을 높이는 방법

화면 구조 분석
- 파운데이션 → 엘리먼트 → 모듈 → 페이지
- 파운데이션 : 더이상 쪼개지지 않는 가장 기본 요소 (색상, 폰트, 아이콘 등)
- 엘리먼트 : 파운데이션이 모여서 만드는 요소 (버튼, 뱃지, 탭 등)
- 모듈 : 엘리먼트가 모여서 만드는 요소 (리스트, 캐러셀, 네비게이션등)
- 페이지 : 모듈이 모여서 만드는 최종 화면 (홈, 마이페이지, 회원가입 등)

디자인 원칙 기반 분석
- 쪼개본 UI 요소들을 디자인 원칙에 대입해보면서 평가
- 핵심은 주장과 그에 알맞은 논리적인 근거 찾기

인사이트 정리하기
- 참고하거나 적용하면 좋을 것들 그룹화해서 정리하기
- 나쁜 사례, 아쉬운 점은 개선점까지 생각해보기

UXUI 디자인 패턴
- 앱이나 웹에서 자주 사용되는 디자인 요소
- 사용자와 디자이너 모두에게 도움이 됨
- 제이콥의 법칙으로 인해 사용자는 익숙한 방식으로 사용
- 온보딩, 로딩, 검색, 회원가입
- UI 패턴 : 리스트, 카드, 캐러셀


온보딩
- 제품을 처음 만나는 과정의 경험
- 평균적으로 3일 이내에 DAU의 77%가 이탈하기 때문에
  첫인상을 긍정적으로 기억하도록 온보딩을 잘 설계해야함

1) 튜토리얼
- 제품이 복잡하거나 어려울 때, 특정기능 강조할 때
- 사용성 측면에서 추천하지 않음, 사용자의 행동 제한
2) 가치 보여주기
- 제품 사용하면서 얻을 수 있는 가치를 소개
- Skip 기능 제공
- 캐러셀로 자동으로 넘어가도록 구성, 동영상도 좋음
3) 개인화 설정하기
- 개인 맞춤 정보를 제공할 수 있도록 선택지주고 정보를 입력하게 하는 방법, 개인화가 핵심 기능일 때


로딩
- 가능한 빨리 콘텐츠를 표시
- 로드 중이고, 완료하는데 시간이 얼마나 걸릴지 명확히 전달
- 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음

1) 스피너 아이콘, 애니메이션 활용
- 연속적인 움직임으로 기다리는 시간을 짧게 느끼게 함
2) 프로그레스 바
- 진행 상황을 시각적으로 파악할 수 있도록 함
3) 스켈레톤
- 화면의 빈 버전, 페이지를 예측할 수 있도록 함
- 스켈레톤으로 인해 실제 화면의 로드를 방해하지 않도록 주의

 

검색
- 정보를 빠르게 찾을 수 있도록 키워드로 찾는 방법
- 사용자가 원하는 결과를 보여줄 수 없을 때 다른 행동을 유도
- 추천 컨텐츠를 보여주거나 다른 키워드로 검색을 유도

1) 기본 검색 화면
- 검색의 중요도에 따라 검색 기능의 위계가 다름
- 구글, 네이버에 비해 유튜브는 검색 아이콘이 작음
2) 연관 상품 추천 / 연관 검색어 추천
- 검색 화면은 전반적인 정보 탐색이 이뤄지는 공간
- 탐색을 돕기 위한 요소들 추가
3) Empty view
- 검색결과가 없을 때 빈 화면을 어떻게 채울지
- 추천 상품, 베스트 상품으로 행동을 유도하는 것도 좋음


핀테크/금융
- 법과 정책의 영향을 많이 받음, 심의를 받아야 하는 경우도 있음
- 여러 앱을 동시에 비교하는 것을 추천

- 핀테크 : 금융에 테크를 결합한 서비스
- 은행사 : 1금융, 인터넷 은행, 2금융/저축은행
- 카드사, 증권사, 보험사

- 주요 기능 : 금융자산 연결, 자산/소비 분석, 신용대출 비교

콘텐츠
- 담고 있는 콘텐츠의 종류(영상, 텍스트, 웹툰 등)에 따라 차이가 큼
- 영상은 계속 보지만, 오디오는 안 봄. 텍스트 콘텐츠는 가독성 중요
- 체류시간을 늘리는 UXUI를 찾는 것을 추천
- 마음에 드는 컨텐츠가 많을 수록, 콘텐츠를 몰입해서 소비할 때 오래 머무름

- 영상 오디오, 웹툰, 텍스트

 

커머스
- 전자상거래인 이커머스, 온라인에서 판매 및 거래가 이뤄지는 플랫폼
- 상품으로 인한 영향을 크게 받음
- 상품 탐색 → 구매로 이어지는 사용자 여정에 집중하는 것 추천
  구매를 포기하는 구간, 구매를 결심하게 만드는 요인에 집중

 

 

오늘도 머리 많이 굴렸다. 더 많이 생각하고 생각하자