[ch4] 일관된 디자인을 위한 컴포넌트

공통 UI 요소 찾기

• UI 디자인에서 공통으로 사용하고 있는 요소를 컴포넌트로 만들어서 사용할 수 있다.
• 기본 요소 : 가장 작은 요소의 컴포넌트. 칩, 아이콘, 라디오 버튼, 체크 박스, 버튼 등이 있다.
• 조합 요소 : 기본 요소 + 기본 요소, 기본 요소 + 조합 요소. 카드(이미지+텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트+버튼) 등의 조합이 있다.
• 섹션 : 조합 요소 + 조합 요소 + 여백(마진, 패딩). 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등이 있다.
• 개발자 모드에서 분석 : 
  ▶ 안드로이드 개발자 모드 : 안드로이드의 경우, 개발자 모드로 접속하여 레이아웃 구조를 확인할 수 있다.
  개발자 모드로 접속법 → 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > pin번호 입력
  또는 설정 > 개발자 옵션 > 레이아웃 범위 표시 로 접속.
  
  ▶ web 개발자 모드 : web에서 개발자 모드로 접속하여 레이아웃 구조를 확인할 수 있다.
  개발자 모드로 접속법  →  맥 : 옵션+커맨드+i 윈도우 : F12
  
  

컴포넌트 구성

• UI 컴포넌트는 다양한 엘리먼트와 컴포넌트를 조합하여 만들어진다.
  ▶ 엘리멘트 : 더 이상 쪼개지지 않는 가장 작은 단위. 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등의 요소들이 이에 속한다.
  ▶ 컴포넌트 : 엘리멘트끼리 조합하여 재사용 가능한 블록 형태의 컴포넌트로 만들며, 컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업한다.
  ▶ 합성 컴포넌트(Compound Component) : 컴포넌트끼리 조합으로 만들어진 컴포넌트.
  ▶ 페이지 : 합성 컴포넌트를 활용하여 그린 UI 화면.
  
• 컴포넌트 네이밍 : 구성요소를 네이밍을 통해 구조화하여 다른 이들과 원활한 커뮤니케이션을 할 수 있다.
  ▶ 영문 네이밍 : 아이콘 또는 컴포넌트 네이밍은 개발에 활용될 확률이 높기 때문에 영문으로 정의한다.
  ▶ 사용 맥락에 따른 네이밍 : 
  level : item, module, section 등
  type : button, card, list, chips, checkbox 등
  direction :  row, vertical, column, horizontal 등
  size : small, medium, large, xlarge, 2xlarge 등
  ▶ 에셋Assets 패널 : 파일 경로는 file > page > frame(section) 의 구조를 따르고 있으며, 에셋 패널은 이런 파일 구조를 반영하여 라이브러리 경로를 표시하며, 파일 경로의 각 단계는 Assets 패널의 제목을 나타낸다.
  

컴포넌트 종류

• 네비게이션 바 컴포넌트 : 모든 서비스에서 공통으로 사용하고 있으며, 보통 기본 요소로는 아이콘과 라벨을 가지고 있는 UI 컴포넌트. 
• 카드 컴포넌트 : 텍스트, 이미지, 버튼 등의 콘텐츠를 하나의 컨테이너에 묶어 시각적으로 구분하고, 사용자가 특정 작업이나 정보를 쉽게 인식하고 상호작용할 수 있도록 설계된 컴포넌트를 말한다.
• 캐러셀 컴포넌트 : 하나의 콘텐츠 영역 내에 여러 개의 서로 다른 콘텐츠를 표시할 수 있는 컴포넌트를 말한다.