컴포넌트 만들기와 화면 구성(TIL 20일)

주말 동안 많이 만들어놨어야 했는데 일요일은 하루 종일 놀아서 한 게 별로 없는 상태...
컴포넌트 만들면서 질문이 몇 가지 생겨서 튜터님께 물어보았다! (6가지)

 

질문1.

 

필터 칩에 아이콘을 사용하려고 하는데, 기본 아이콘 크기(24dp)가 칩 내부에서는 너무 크게 느껴져 14dp 정도로 줄여 사용하려고 합니다. 이 경우 컴포넌트 자체를 14dp로 별도로 만들어 사용하는 것이 맞는지, 아니면 24dp 아이콘을 유지한 채 인스턴스에서만 축소해서 사용하는 것이 맞는지 궁금합니다.

(아이콘 세트는 크기가 통일되어야 할 것 같고, 반면 인스턴스 단위 축소는 이후에 컴포넌트 수정이 불가능할 것 같아서)

 

답변: 후자가 맞음. 그래서 아이콘을 스케일 설정해둬야 하는데, 외곽선 만들기 후 유니온 해주면 된다. (스트로크인 상태X)

 

 

 

 

질문 2.

 

개수·가격과 같은 정보를 표현할 때, 숫자 영역과 단위(예: 원, 개, 명 등)를 각각 분리된 텍스트로 구성해야 하는지, 아니면 하나의 텍스트 영역으로 처리해도 되는지 궁금합니다. (조건:숫자와 단위의 텍스트 스타일이 동일한 경우입니다)

 

답변: 전자가 맞음.

 

 

질문 3.

터치 영역을 고려한다면 아이콘 레이어를 한번 더 감싸서 터치 영역을 만들어줘야하나요? (48*48으로? 아니면 지금처럼 컴포넌트를 만들어두는게 맞나요?)

 

답변: 만들어줘야함. (옆의 컴포넌트 높이가 40이라 40*40으로 만들어주심)

 

 

 

질문 4. 

 

1.계속 이 영역이 반복된다고 생각해서 카테고리와 상품이름, 가격을 묶은 컴포넌트를 만들었는데 이게 하나로 묶여도 되는지? 2.product_info라는 이름을 지어줬는데 적절한지?

 

답변: 하나로 묶여도 됨, 이름 짓는 건 케바케라 ok

 

 

 

 

 

질문 5.

 

'평균가 대비 NN원 비싸요/저렴해요'라는 컴포넌트를 만들고 싶은데, 그러면 바뀌는 부분은 텍스트 프로퍼티를 어떻게 정해두는 게 좋은가요?

 

답변: 질문 2의 답변처럼 텍스트 영역을 따로 만들어둬야함.(이 경우 '원 저렴해요'는 반복되니까, price 영역과 나눠서 총 3개로)

 

 

그런데 이 배너에서 사용된 색상의 명도 대비가 좋지 않아서 명도 대비를 체크해주는 사이트를 소개해주셨다.

웹접근성 명도 대비 검사 | 사이트로

사이트로(SITERO)

초록색 배너 배경색과 글씨 색상을 가져와서 적용한 것

여기서 AAA 기준을 충족 못했는데 (AAA 기준이란 웹 접근성 명암비 기준 최고 등급) 그렇다면 배경 색을 조금 더 연한 걸 써야한다는 뜻...

 

그리고 색상은 컬러칩을 만들어둬야했는데 내가 귀찮아서(...) 그냥 프라이머리 컬러에서 HSL의 H값을 조정해서 만들었다.

튜터님이 이쁜 색상 편하게 골라써야될 때 TailwindCSS Colors를 추천해주셨다.

 

이렇게 생긴 피그마 파일 같은 건데(피그마 커뮤니티 검색창에 검색하면 나옴) 색상 만들기가 어려우면 여기서 뽑아서 쓰라고 하셨다. 나의 경우 50-700을 사용하면 아마 명도 대비가 괜찮을 거라고 하셨다.

 

마지만 질문 6.

 

시맨틱 컬러로 요소마다 스타일을 지정해두면 시간이 너무 오래 걸릴 것 같아서 일단 아토믹 컬러로 컴포넌트 색상을 지정해두었는데, 이렇게 작업해도 괜찮은가요?

 

답변: 괜찮음.

 

 

 

 

 

그래서 이렇게 질문하고나서 다시 화면 작업을 이어갔다....

 

채팅 화면 컴포넌트 요소와 화면 구성

 

요소 자체를 만드는 데에는 많은 시간이 걸리지 않는다. 오히려 네이밍 컨벤션을 정리하고, 실제 서비스에서 사용되는 UI 패턴을 조사, 분석하는 과정에 더 많은 시간이 소요되었다...
특히 채팅 컴포넌트의 색상 사용 방식, 프라이머리 컬러 적용 여부, 발신자/수신자 간 시각적 구분, 읽음/읽지 않음 표시 방식 등 플랫폼별 차이를 비교하며 나만의 화면을 만드는 데 집중했던 것 같다.

그리고 딴짓도 오늘은 엄청해서...ㅎㅎ 내일은 카페 가서 빡집중을 할 예정이다.. 역시 집에 하루종일 앉아있으니까 무념무상 상태가 되는 듯...