#TIL_8 🍀 레퍼런스 분석 - 북모리 / 프로토타입 구현 과제

월요일... 화이팅하지 못하는 나에게 화이팅!!!!!

---

0. 디자인 카타

💭 나의 의견

B. 업데이트 후를 선호한다.

업데이트 전 UI는 A와 B의 투표율 차이가 강조되고, 2가지 색상을 사용하여 직관성이 높다. 하지만 투표 UI로는 사용자에게 보다 익숙하지 않은 형태라고 생각한다. 반대로 업데이트 후는 익숙한 투표 UI 형태를 띄고, 투표 비율이 각각의 바 형태로 변경되어 가독성이 좋아졌다고 할 수 있다. 하지만 2가지 색상을 사용했던 전과 달리 검정색 바로 통일 되어있기 때문에 개인적으로 아쉬운 부분이다. 사용자가 색상을 선택할 수 있는 기능이 있으면 더 좋은 UI가 될 것 같다고 생각한다.

 
💭 팀원들과의 의견 정리

B. 업데이트 후를 선호한다.

A는 투표율 차이를 강조하고 두 가지 색상을 사용해 직관성을 높였지만, 사용자에게 익숙하지 않은 형태로 인해 가독성이 떨어지고 시각적 정보 전달력이 낮다는 단점이 있다.

B는 막대 그래프를 활용하여 투표 결과를 직관적으로 보여주고, 익숙한 투표 방식으로 가독성을 높였으며, 정돈된 디자인을 통해 시각적 피로도를 줄였다는 점에서 긍정적으로 평가된다. 다만, 색상이 단조롭게 변경되어 강조가 덜 된다는 아쉬움이 있으며, 이를 보완하기 위해 사용자 맞춤 색상 선택 기능이 추가된다면 더욱 효과적인 UI가 될 것으로 보인다.

---

1. 디자인 아티클 읽기

아직 자고 있는 나의 뇌를 깨우기 위해 디자인 지식을 채워 줄 아티클을 몇 가지 읽으며 공부를 시작했다.
대부분 배웠던 내용이지만 배우고 또 배울 수록 나의 부족한 부분을 알게 되고 더욱 더 성장할 수 있는 것이기에
매일 30분 정도 좋은 글들을 읽으면서 하루를 시작하려고 한다.
 
오늘은 색에 대해 한 번 더 짚고 넘어가는 시간을 가졌다.

 

Jongmin Park, 2018.04.08, https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

---

2. 레퍼런스 분석 - 북모리

깔끔한 UI가 마음에 들어서 선택한 독서 어플 북모리! 온보딩과 Empty view가 인상 깊은 앱이었다.
디자인 원칙 기반 분석 결과가 항상 비슷하게 나와서 다음엔 흔치 않은? 디자인 원칙이 잘 보여지는 앱을 분석해보고 싶다.

2번째 레퍼런스 분석! 하다보니 점점 익숙해진다 ㅇ-ㅇb

또 너네야?

---

3. 피그마 썸네일 제작

레퍼런스 분석 썸네일 만드려고 시작한 혼자만의 실습...
하나 만들고 아 하나만 더 만들까? 하나만 더!!!!!!! 하다가 4개를 추가로 만들어버린 🤦‍♀️ 못 말려

하지만 예쁘잖아 (와중에 플러그인 지금 보니까 맘에 안듦)

---

4. 프로토타입 구현 과제

오늘은 지난 주에 했던 개인 과제 3단계 : 프로토타입 구현을 이어서 진행하였다.
과제가 6일까지라 그렇게 시간이 많지는 않지만 컬러가 마음에 안들어서 일단 갈아엎고 시작..!!

전체적인 포인트 컬러를 수정하고 컴포넌트들의 잘못된 부분들을 손 봤다.

 
컴포넌트 수정, 애니메이션 추가 등 지난 주에 구축하였던 화면들을 마무리 하였고, 마지막 화면의 틀까지 구축하였다.

완전 뿌듯하자나

 

Figma Preview 화면

---

🔗 참고 자료

디자인 콘텐츠를 한 눈에 볼 수 있는 서핏, https://www.surfit.io/explore/design

디자인 콘텐츠 - 서핏

디자인 카타 토픽 참고 사이트 디자이너스, https://designus.io/topic

토픽 | 디자이너스