[TIL] 6강 완강 + 개인 과제(2) 50% 달성

 

0. 오늘의 노래

 

노래 좋아서 추가~

 

---

1. 오늘 학습 키워드

	오전 학습 목표 (~14시)	오후 학습 목표 (~19시)	저녁 학습 목표 (~21시)
손민정	✅ 디자인 카타 ✅ 개인 과제(2) 진행(50%) ⬛ 데일리 일정 재조정 : 필수과제 2 확인	⬛ 6강 완강 ⬛ 5강 숙제 확인, 제출 ⬛ 1강 숙제 제출 ✅ 개인 과제(2) 진행(선택)	✅ TIL 작성(~20:30) ⬛ 미달성 목표 달성

뭘 이렇게 못했지?

하지만 나중엔 다 달성했죠? ㅎㅎ

 

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

오늘도 이것저것 진행.

 

09:00 ~ 09:40
디자인 카타

 

 참고자료는 다음과 같은 것들이 있었다.

 첫 번째는 다른 분께서 동일한 주제의 디자인 카라를 다루셨던 블로그.🔗 

 두 번째는요즘 IT라는 페이지의 "프로필 화면 어떻게 구성할까?" 🔗라는 아티클이다. 대부분의 레퍼런스를 여기서 수집했다. 너무 좋더라!

 

 

---

 

10:00 ~
일정 조정 및 개인 과제(2) 진행

 

 12/15(월) 개인 일정으로 튜터님과 예정되어 있던 세션을 조정했다. 12/16(화) 19시.

 피드백은 꼭 받고 싶었었는데, 흔쾌히 수정해주셔서 감사했다 정말루..🥺

 

 추가적으로 개인 과제(2)도 진행하면서 한 46..48%를 달성했다. 야후!

 

 

---

14:00 ~ 15:25
강의 6주차 진행

 

 사실 얼마나 했는지 기억도 안 난다.

 아마 오후 중으로 6-5를 수강하고 있었던 걸로 기억하는데..

 용어는 사바사니까 다르다는 사실에 너무 의의 가지지 말라고 하셨다. 내 용어로 정리할 수 있으면 된다~중요한 건 무슨 특성/역할인지 아는 것! 1강은 길게 적지 않고 2강으로 넘어갔다.

6-2. UX/UI 디자인 패턴

디자인 패턴: 디지털 제품, 주로 앱/웹에서 자주 사용되는 디자인 요소

• UX/UI 디자인 패턴 활용 시의 장점
  • 자주 쓰는 패턴은 사용자에게 익숙하기 때문에 쓰는 데 어려움이 없다. → 제이콥의 법칙
  • UX/UI 패턴을 디자인 시스템으로 만들어 두면 반복해서 재사용 가능 → 불필요한 에너지 소모 감소
• 자주 사용되는 UX/UI 디자인 패턴의 종류

 1. 튜토리얼

• 제품 조작법이나 설명을 넣는 방식.
• 배경에 검정 오퍼 깔고 설명하는 경우가 잦으나, 사용자의 흐름을 끓고 제작자가 보여주고 싶은 것만 보여주는 경우가 될 수도 있음.

---

2. 가치 보여주기

제품 사용 시의 이점(가치)를 화면으로 보여주기

• 온보딩 과정 생략을 원할 시 바로 제품 홈으로 skip 기능을 권장
• 캐러셀을 이용해 사용자가 화면을 자동으로 넘기도록 구성하는 것 권장(에너지 쓰지 않도록)

---

3. 개인화 설정하기

첫 화면에서부터 가치를 느낄 수 있도록 개인화 화면을 제공하고 있음(사용자 본인 정보 입력 등): 서비스 자체가 그 사람의 특성에 맞는 정보를 보여주는 것, 그게 핵심 기능일 때 잘 맞음

로딩 시간이 2분이 걸린다고 내도록 로딩 화면만 띄워 놓는 건 하수다.

1. 스피너 아이콘 혹은 애니메이션 활용

: 연속적 움직임을 통해 시스템이 정보를 처리하는 중임을 사용자에게 알려줌

2. 프로그래스 바

: 상단 네비게이션/타이틀 아래 넣어서 진행 상황을 게이지 형태로 보여줌

3. 스켈레톤

: 실제 정보는 없지만 그래픽으로 정보의(콘텐츠 칸 등의) 뼈대 형대 등을 보여주는 화면

좌측은 불러오는 화면의 빈 버전.

• BUT, 이 또한 특정 그래픽임 → 실제 화면 로드를 방해하지 않도록 주의!!
  → 코드로 만들 수 있는 제일 단순한 회색 박스를 사용해 불러오는 페이지 예측하도록 표현하기

키워드로 빠르게 사용자가 원하는 정보 찾기

 

1. 기본 검색 화면
   • 제품에서 검색의 중요도에 따라 검색 기능의 위계가 다르다.
   • 돋보기 모양 아이콘으로만 배치/홈 화면 정면에 검색바 아주 크게 배치한 사례로 나뉨. 이마트의 경우 50:50, 혹은 30:70으로 비중을 가져간다고 볼 수 있다. → 상품의 경우 검색해서 담는 것도 중요하고 신상품/이벤트 상품 등에서 고르는 것도 중요하기 때문

---

2. 연관 상품 추천 / 연관 검색어 노출

• 검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간이다.
• 연관 상품을 검색하러 들어왔지만 생각할 필요 없이 탐색할 수 있다. 카테고리/공간 등등
• 추천도 이뤄지도록 화면 구성(중간 최근 본 상품)
• 정확한 글자가 떠오르지 않거나 오타를 입력했을 때에도 정확한 정보를 제시해줄 수 있도록 → 사용성을 높이는 검색의 디자인 패턴

추천 구성

---

3. Empty view: 검색 결과가 없을 때

• 사용자에게 보여줄 결과가 없을 때 사용자가 도움을 얻을 수 있는 UI/UX를 설계할 수 있음
• 다른 앱들이 어떻게 보여주는지 보면 좋음. 유저의 행동이 멈춘 것이 아니라 이어지도록/다른 행동 할 수 있도록 유도해 주는 것이 좋음
• 배민의 경우 브랜드 특유의 그래픽 디자인 사용, 권장 행동 텍스트로 올려 줌

4. 회원가입

5. 리스트

6. 카드

7. 캐러셀

 

 

---

6-3. [레퍼런스 분석 1] 핀테크/금융

• 핀테크/금융 제품의 특징
  • 돈과 관련된 산업이다 보니 국가, 금융 기관의 법과 정책의 영향을 많이 받습니다.
  • UI에 대한 구체적인 가이드라인이 있다거나 화면에 대해서 관련 기관의 심의를 받아야 하는 경우도 있죠.

• 나만의 인사이트를 찾아보는 훈련 하기! → 디자인에 굉장히 도움됨

• 은행사 안에서도 3개로 나눠질 수 있음. 1금융 / 인터넷 / 2금융, 저축은행
• 핀테크들 많기 때문에 대출 비교 서비스들 분석하면 도움 될 것 같다고 하심.

• 만들려는 솔루션이 분명해 특정 디자인 패턴만 보고 싶은 경우
• 시장이나 도메인 분석 차원에서 시장분석으로 비슷한 도메인 앱을 전반적으로 분석하고 싶은 경우
• GNB: 글로벌 네비게이셩 바
• 명칭에 정답 있는 건 아님. 조직마다 UI 구조는 부르는 이름 다르니, 찾겠다고 스트레스 받지 말라. 다만 각각의 요소 나눠보고 그 요소들이 어떤 특성을 가지고 있는지 알아보자.

 

• 구조에 따라 나눠보고 분석하기
  → 핀테크는 소비 / 지출에 대한 항목을 중요하게 제출함. 어떠한 디자인 원칙 하에서 이러한 화면들을 디자인했는지 보면 좋음

 

 

---

6-4. [레퍼런스 분석 2] 콘텐츠

중요하게 생각해야 하는 포인트

사용자를 콘텐츠에 오래 머무르게 하는 것

콘텐츠 주요 레퍼런스

레퍼런스 분석 사례: 티빙

• 같은 썸네일을 사용해도 레이아웃에 변주를 줘서 탐색의 재미를 줌.
• 섹션이 여러 개 이어지는데 같은 섹션에서도 다르게 구성할 수 있다! → 참고하며 분석하기

• 내용 구성을 다르게 하며 같은 레이아웃이지만 좀 다른 이미지를 주고 있다.
• 튜터님께선 경제적으로 디자인한 좋은 사례라고 말씀하셨다.
• 사실 섹션 구성 시 가장 쉬운 건 디자인 변경(A - B 다르게 디자인) → but 디자이너, 엔지니어 리소스 둘 다 필요한데, 위와 같은 경우 특정 컨텐츠도 강조하면더 리소스 추가 필요 없다고.

• 티빙 내에서 공급자적으로 가져갈 수 있는 이점(리소스 절약, 원하는 컨텐츠 강조 등)을 다 챙길 수 있었다!

 

---

6-5. [레퍼런스 분석 3] 커머스

• 커머스 제품의 특징

• 주의 기울이면 좋을 Point! → 사용자가 어느 흐름에서 구매를 포기하고 나가는지 & 어느 지점에서 구매를 결심하는지
• 디자인 원칙 기반 분석

 

• F플로팅 A액션 B버튼
• 예시 터치 영역이 40x40이었는데 UX/UI 심리학 시간에 배운 피츠의 영역: 터치해야되는 대상 크기는 사용자가 충분히 선택할 수 있을 만큼 충분히 커야 함. 44px 정도.

 

---

6-6. 레퍼런스 분석하기: 카카오톡

HW. 레퍼런스 분석하기: 카카오톡

1. 카카오톡 화면 분석하기~~

화면 메인 5개 캡쳐하셨었음. 스크롤하시면서 눈에 띄는 UI 있는지 살펴보는 것도 좋음.

1. 화면 구조 분석 → UI 요소
2. 디자인 원칙 기반 분석 → Good&Bad 사례 각각 2개씩, 4개 찾고 디자인 원칙에 근거해 작성

 

 

---

19:00 ~ 
개인 과제(2) 남은 분량을 확인하고 외부 ZOOM 특강에 참여했다. 나노바나나 AI 강의.

 

 

이건 부트캠프 외적인 거니까 생략하기로.

 

 

---

3. 학습하며 겪었던 문제점 & 에러

 - 문제&에러에 대한 정의
 - 내가 한 시도
 - 해결 방법
 - 새롭게 알게 된 점
 - 이 문제&에러를 다시 만나게 되었다면? 

생략~

 

 

---

4. 내일 학습 할 것은 무엇인지

	오늘 달성한 목표	오늘 달성 못한 목표 & 이유	내일 목표
손민정	- 디자인 카타 - 개인 과제(2) 진행(50%) - 6강 완강, 숙제 제출	- 1, 5강 숙제 제출: 필기 찾지 못함 - TIL 작성(~20:30): 외부 특강 수강	- 12/15 쉬어가기 보충 - 개인 일정 - 개인 과제(2) 진행(80%)

 

 월요일에 쉬어가는 만큼 주말 중 보충하면 좋을 것 같았다. 일단 바쁜 일정도 있긴 하니..어느 정도 되는 데까지만 해 봐야 할 듯.

이상!