본캠프 12일차_디자인 카타, 과제, WIL

[디자인 카타]

 

 

[A]

 

A는 접었다 폈다할 수 있는 방식으로, 목록들이 위에서 아래로 나열되어 있다. 그룹의 제목과 내용이 폰트의 굵기와 크기 등으로 시각적 위계를 한눈에 알 수 있다. 무엇보다 마음에 들었던 점은 사용자가 그룹들을 마음대로 접고 펼 수 있다는 점이다. 예를 들어, 내가 원하는 물건이 '청소기'라면 가전 디지털 항목에 들어갈 때 B보다 적은 스크롤을 통해 들어갈 수 있다.

B는 둥근 사각형 컴포넌트 안에 항목들이 각각 들어있고, 2~3열로 정렬되어 있다. 사용자 대부분이 z모양으로 1열의 좌우를 읽고, 2열의 좌우, 마지막으로 3열의 좌우 순서(예시: 주방가전 → 냄비/프라이팬 → 칼/도마 → 주방조리도구 → 그릇/홈세트)로 읽을 것이라고 가정했다.

그래서 A의 위에서부터 아래로 한 줄로 읽는 것과 B의 z패턴으로 왔다갔다 읽는 것 중 어느 것이 사용자에게 원하는 정보를 더 쉽고 빠르게 줄 수 있을지 궁금했다. A를 선택한 확실한 이유는 B를 선택할 경우 하위 그룹으로 갈 때 많은 스크롤이 필요할 것으로 보였기 때문이다.

그런데 A가 처음부터 전부 닫혀 있다면 모든 제품을 둘러보고 싶은 사용자에게 카테고리를 하나씩 누르는 추가적인 액션을 요구하게 된다. 그러나 처음부터 전부 열려 있다면 기존에 A가 가진 장점이 사라질 것이다. 이런 경우 어떻게 해야 할까? A를 유지하되 그룹이 너무 많다면 두 열 정도로 나누는 것이 어떨까? 그래서 검색과 필터 기능이 있는 것 같다. 오늘 카타를 통해 처음으로 목록에 대한 UI를 고민하게 되었는데, 데이터의 중요성을 깊이 깨달았다. 실제 사용자들은 카테고리를 볼 때 어떤 방식을 제일 선호할지 궁금하다.

 

 

참고하기 좋은 아티클: https://yozm.wishket.com/magazine/detail/1561/

위기·성장의 순간, 고객을 잡는 카테고리 디자인 | 요즘IT

목록과 관련된 구글 머터리얼: Lists – Material Design 3

Lists – Material Design 3

추가 정보 아티클: https://brunch.co.kr/@tigrisdesign/2

UI 용어를 정리해야 하는 이유

매번 카타를 적다보면 용어를 몰라서 어려웠는데, 이 아티클이 깔끔하게 정돈되어있어서 좋았다. A 형태를 Accodian 라고 부르는 것 같다. 

 

 

---

 

[강의 숙제]

 

🐸 UXUI 디자인 입문 - 5주차

 

HW. 디자인 원칙의 실제 사례 찾아보기

 

1️⃣ 게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보기

유사성의 원리

근접성의 원리

페쇄성의 원리

연속성의 원리

공통성의 원리 

 

1) 근접성의 원리

오늘의 집 홈 화면

가운데 회색 선을 기준으로 위와 아래의 간격이 떨어져있어서 서로 다른 카테고리인 것을 알 수 있다.

 

2) 폐쇄성의 원리

플로 홈 화면

오른쪽 이미지의 일부가 보여서 스와이프를 하면 다른 컨텐츠를 볼 수 있음을 알 수 있다.

 

3) 유사성의 원리

필라이즈 온보딩 화면

색상을 통해 복용 중인 약 - 소염진통제 - 여드름 치료제가 관계있다는 것을 한 눈에 알아볼 수 있다.

 

2️⃣ UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보기

스케일

시각적 위계

균형

대비

 

1) 균형 

삼쩜삼, 필라이즈

 

수직, 수평선을 기준으로 비슷한 양의 시각 정보가 배치되어있다.

 

2) 시각적 위계

배민 홈 화면

중요도순으로 가게명이 가장 잘 보이고, 그 다음 별점, 소요 시간, 거리가 보인다.

 

3) 대비

카카오페이 온보딩 화면

중요한 '인증'버튼과 주변 배경의 색의 차이가 커서 한 눈에 돋보인다.

 

3️⃣ [심화] 아래에 1가지를 골라 좋은 사례라고 생각되는 제품의 화면을 찾아보고 그 근거를 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙을 활용해서 설명해보기

토스 온보딩

로딩

검색

회원가입

리스트

 

---

 

🔹 WIL(Weekly I Learned)

 

-일주일을 돌아보기

 

🐹 FACTS (사실, 객관):

 

이번 주는 디자인 입문 강의를 완강했다. 오전 디자인 카타 시간에 내 생각을 정리하고, 관련된 디자인 정보를 찾는 것이 루틴이 되었다. 오후에는 강의를 듣고, TIL을 작성했다. 그리고 첫 개인 과제를 제출 완료했다. 튜터님께 나의 과제물들을 보여드리기 부끄러워서 궁금했던 것이나 개선해야 할 것을 여쭤보지 못한 채 미루기만 했는데, 마지막 날 아침에 상황의 심각성을 깨닫고 튜터님께 찾아갔다. 친절하게 개선해야 할 것들에 대해 조언해주셔서 정말 좋은 시간이었다.

 

🐧 FEELINGS (느낌, 주관):

 

개인 과제를 조금 더 미리미리 해둘 것을 후회했다. 설날 연휴에 UX/UI는 전부 잊고 쉬었던 탓에 꼭 하고 싶었던 프로토타입 과제를 하지 못했다. 그리고 튜터님께 자주 찾아가서 여쭤볼 걸 부끄럽다는 핑계로 혼자 막무가내로 진행했다. 다음 피그마 개인 과제 때는 쑥스럽더라도 바로바로 찾아갈 것이다! 이번 주 잘한 것이 있다면, 7일 중 4일 총 6시간을 운동한 것. 첫날과 다르게 체력이 나아진 것 같다. 이 기세로 꾸준히 운동 가기!

 

🐭 FINDINGS (배운 것):

 

- 좋은 UXUI는 좋은 데이터 분석에서 나온다.

- UXUI를 진행할 때는 꼭 뾰족함을 기억하자. 

 

- 더 나은 다음 주를 만들기 위해

 

🐸 FUTURE (미래):

 

새로운 주가 다시 시작되었다. 매일매일 성장하고 나와 한 약속들을 지키고 싶다. 우선 첫 번째로 피그마 심화를 완강할 것이고, 여태까지 배웠던 것들을 복습해보겠다. 여태까지 캠프를 9시에 마치면 오늘 할 일을 다 끝냈다고 생각돼서 회화공부나 토익 같은 것을 전혀 하지 못했다. 9시에 마쳐도 대략 4시간 정도 남은 것이니까 이 시간들을 잘 활용하고 싶다. 시간을 그냥 흘러가게 두는 것은 나 자신에게 미안한 행동이다. 아주 조금씩이라도 좋으니까 외국어 실력을 꼭 길러서 나의 두 번째 목표인 '해외 취업하기'를 이루고 싶다.