250516 : 기어이 벼락치기를 하는구나

✏️ 오늘의 한줄평

이번주 내내 골골거리면서 할일을 회피하던 업보를 맞는다.. 큽.. 
과제 달려!!!

 

🕑 오늘의 일과

오전
09:00 - 10:00	디자인 카타 진행
10:00 - 11:30	아티클 스터디 - TIL 작성
11:30 - 12:00	튜터님들 순회
오후
14:00 - 17:00	개인과제 진행
17:00 - 18:00	'UI 디자인, 모르겠다면 일단 이렇게' 세션(1)
20:00 - 21:00	TIL 공유, 오늘 하루 보고/회고하기 → 오후 스크럼 작성

 

 

💬 오늘의 디자인 카타

구성 비교

A안	B안
전체 평점 (4.6/5)	리뷰 수: 120개
등급별 비율 (최고, 좋음, 보통, 별로, 나쁨)	긍정적인 키워드 비율 (ex. 음식이 맛있어요 70%, 친절해요 45%)
리뷰 수: 120개

 

선택한 안과 그 이유

나는 B를 선택했다. 전체적인 점수를 볼 수 있는 별점 리뷰와 다르게, 키워드 리뷰는 가게를 선택할 때 사용자가 중요하게 생각하는 요소를 나누어서 파악할 수 있게 분리해 구체적으로 맛/공간/서비스/양 등을 보여주니 선택할 때 조금 더 도움이 된다고 생각했다. 각 사람마다 맛집을 평가할 때 중요하게 생각하는 부분이 전부 다른데, 평가 항목을 나누어놓으면 평소에 잘 생각하지 않았던 부분까지 관찰할 수 있기 때문에 리뷰 정확성도 조금 더 올라갈 것 같다. 의사결정의 기준을 구체화할 수 있는 점도 좋다. ‘나는 분위기를 중시하니까 25%면 좀 낮네’ 같은 판단을 할 수 있는 것이다.

A안은 숫자를 커다랗게 표기해 5점 만점에 4.6이라는 것을 한눈에 볼 수 있고 평균점수 뿐만 아니라 각 등급별로 점수를 준 사람들의 비율을 보여주어 전반적인 평이 좋은지 나쁜지를 빠르고 쉽게 확인할 수 있게 한다. B안에 비해 조금 더 명확한 수치적 기준에 판단한 결과다. 하지만 사용자가 왜 좋다고 평가했는지가 불명확하고, 사람마다 평가하는 기준이 다르기 때문에(ex: 4점을 준 이유가 "너무 시끄럽지만 맛있다"라면 소음에 민감한 사람이 방문했을 때 큰 불편을 느낄 수 있다) 정보가 부족하다고 느꼈다.

 

실제 사례 확인

실제로 어플을 확인했을 때, 배달의민족/쿠팡이츠/캐치테이블은 A와 같은 형태를, 네이버 지도/카카오맵은 B와 같은 형태를 띄고 있었다. 그 중에서도 네이버 지도는 완전히 정성적 정보로 이루어져 있었는데, "고기 잡내가 적어요"처럼 해당 음식 카테고리에서 사람들이 민감하게 여기는 것, "특별한 메뉴가 있어요"처럼 맛집을 찾는 사람들이 중요하게 여기는 요소까지 볼 수 있고 전체 리뷰의 개수 자체가 타 서비스에 비해 매우 많아서 인상적이었다.

배달의 민족/쿠팡이츠/캐치테이블 리뷰

네이버 지도 / 카카오맵 리뷰

 

팀원 의견

• 의류와 같은 경우는 별점 리뷰가 더 좋을 것 같다. 도메인에 따라 어떤 스타일을 사용할지 달라질 것 같다.
• 두 가지 중 하나를 선택하기보다는 A안과 B안을 적절히 섞어쓰는 것이 좋다고 생각한다.
• 컬리의 경우 별점이 없고, 도움돼요를 많이 받은 리뷰를 상단에 배치해 사용자가 구체적인 리뷰를 직접 볼 수 있게 형태다. 특이한 부분이다. 별점을 뺀 이유는 무엇일까?
• 참고하면 좋을 아티클 : https://brunch.co.kr/@blackindigo-red/57

 

 

✏️ UI 디자인, 모르겠다면 일단 이렇게' 세션(1) 내용 정리

<여백(간격)>

★ 4배수, 8배수 원칙 기억하기

8: 조금 좁은 간격
12/16: 보통 많이 쓰는 간격
20: 섹션 사이의 간격

<폰트>

★ 본문용 폰트는 고딕체를 사용하자!
UI 디자인에는 프리텐다드만 써도 반은 간다.
- Noto Sans는 행간이 넓어서 인쇄물에 더 적합하다.
- Suit는 영문 사용에 주의해야 한다.
- 나눔스퀘어는 특정 무드를 줄 때만 사용하는 것이 좋다.

★ 자간은 건드리지 않는다!

★ 본문 행간은 '16pt/행간 24pt'를 기억하자. 
본문 행간 150%를 기준으로 하되 .5 소수점이 나오면 조심하는 것이 좋다.
제목 행간은 조금 더 좁게 135%~150%를 주면 좋다.
관찰을 많이 하자. 폰트-행간을 짝수로 외워두는 것도 좋다.

행간이 너무 넓으면 다른 문장처럼 보인다.
행간이 너무 좁으면 가독성이 떨어진다.

폰트마다 적합한 행간을 설정할 수 있어야 한다.

<색상>

★ 색상은 흑백을 제외하고 1~2개만 사용하자!
강조는 최대한 하나만, 나머지는 중립적인 색상(무채색)을 쓰자.

채도가 아주 높은 색을 사용할 때는 디지털 화면에서 너무 튀어보일 수 있으니 주의하자.
주황색-노란색-연두색과 하늘색-파란색 사이 (형광)구간은 명도가 높아 잘 쓰지 않는다.
반대로 진한 보라색은 명도가 너무 낮아 잘 쓰지 않는다.
노란색-검정색은 대비가 커 명시성이 아주 높다.
다크모드의 글자는 흰색보다 연한 회색을 사용하는 것이 좋다.