[UI 디자인의 모든 것] Ch4: 컴포넌트 범위, 엘리먼트와 컴포넌트

 

공통 UI 요소 찾아보기

📌 UI 디자인에서 공통으로 사용하고 있는 요소를 컴포넌트로 만들 수 있다!

•  

기본요소(Item)

• 가장 작은 요소의 컴포넌트
• 칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등

출처: UI 디자인 원칙_챕터4-1

조합 요소(Module)

• 기본 요소 + 기본 요소 or 기본 요소 + 조합 요소
• 카드(이미지 + 텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트, 버튼) 등

출처: UI 디자인 원칙_챕터4-1

섹션(Section)

• 조합 요소 + 조합 요소 + 여백(마진, 패딩)
• 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등

출처: UI 디자인 원칙_챕터4-1

---

엘리먼트와 컴포넌트

 

컴포넌트의 구성

• 엘리먼트
  • 쪼개지지 않는 가장 작은 단위
  • 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등
• 컴포넌트
  • 엘리먼트 + 엘리먼트를 조합하여 재사용 가능한 블록의 형태
• 합성 컴포넌트
  • 컴포넌트 + 컴포넌트 조합
    

    

    출처: UI 디자인 원칙_챕터4-2

• 페이지
  • 합성 컴포넌트를 활용해 UI 화면을 그려낼 수 있음
  • 📌 컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업하기

 

 

컴포넌트 네이밍

• 영문 네이밍: 개발로 활용될 확률이 높기 때문
• 사용 맥락에 따른 네이밍
  

  

  출처: UI 디자인 원칙_챕터4-2

• Assets 패널 적용
  • 단축키: alt +2