[09/21 클론디자인] 당근 - 1. 홈

 

📌To Do List

* 홈 화면 캡쳐  ✅

* 섹션 나누기 ✅

* 제작할 컴포넌트 목록 작성 ✅

 

 

 

 

01 홈화면 캡쳐

✏️생각했던 것보다 더 많은 컴포넌트

 

당근 앱에 들어가 홈화면을 캡쳐했다.

당근의 홈화면은 다양한 게시글이 종합적으로 모아져있다.

중고거래 뿐만 아니라 알바구인, 부탁글, 잡담, 나눔글, 그리고 광고글까지.

하나하나의 게시글 별로 컴포넌트의 형태도 달라졌다.

'이런 경우엔 어떻게 해야하지?' 라는 의문점들이 생겼지만 일단 진행했다.

 

(근무하는 회사에서도 수주받은 프로젝트의 컴포넌트를 만들었을 때 정말 어려웠었다.

워낙 변수도 많고, boolian과 variants를 잘 적용하기위해 어떻게 해야할지 많이 고민하던 시간들이었다.

매번 느끼는 거지만, UI화면은 볼 땐 간단하다.

그냥 Top App Bar, Bottom App Bar.. 등 만들면 되는거 아니야?

하는 단순한 생각이 먼저 든다.

하지만 신경쓸 사항이 한 두가지가 아니다.

여러 상황에서 쓰일 것을 고려해서 만들어야한다.

사이즈, 컬러, 위치, 달라지는 아이템 등을 잘 조합해서 만드는 게 생각보다 어렵지만

왜자꾸 금방 할 수 있다고 생각이 드는건지ㅋㅋ 빨리하고싶은 마음에서 비롯되는것일까?)

 

 

02 섹션 나누기

✏️내일배움캠프에서의 경험을 살려

리스트, 카드, 앱바(상단, 하단), 칩, 바텀시트, 탭바, 썸네일, 버튼 등을 컬러로 나누어 어떤 컴포넌트가 배치되어있는지 확인했다.

플로팅 버튼도 어떤 건 아이콘 + 텍스트고 어떤 건 아이콘만 있다.

제일 상단으로 스크롤하면 아이콘 + 텍스트가 보이고

스크롤을 하면서 + 아이콘 하나의 플로팅버튼만 존재했다.

 

스크롤 시, 플로팅 버튼 ui가 변경되는 이유가 무엇일까?

혼자서 생각할 수가 없어 gpt에게 물어봤다.

 

 

 

1. 콘텐츠 탐색모드일 때 콘텐츠 가독성 확보 가능

2. 플로팅 버튼 기능 학습 목적

3. 텍스트 버튼은 탐색 시 방해요소로 작동할 수 있음

 

이 작은 버튼 하나에도 사용성을 고려한 디자인을 했다는 것을 알 수 있었다.

 

 

 

 

 

03 제작할 컴포넌트 리스트 작성

✏️'홈'화면에서만 벌써 이렇게 많다고?

컴포넌트를 하나하나 작성해보니 벌써 이만큼이나 나왔다.

원래 이만큼 나오는데 시간을 쪼개서 하다보니 많다고 느껴졌나보다..ㅎㅎ

 

 

 

<다음에 할 일>

- 컴포넌트 제작하기

 

꾸준히 하다보면 언젠간 실력이 늘 것이라 믿는다.