<aside>

공통 UI 요소

<aside>

기본 요소 가장 작은 요소

칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등

</aside>

<aside>

조합 요소(Module)

기본 요소 + 기본 요소 / 기본 요소 + 조합 요소

예) 카드(이미지기본+텍스트기본),

서치바(아이콘기본+입력필드조합)

Snackbar(텍스트기본+버튼조합) 등

</aside>

<aside>

섹션(Section)

조합 요소 + 조합 요소 + 여백(마진,패딩)

예 ) 네비게이션 바, 앱 바, 탭, 캐러셀, 리스트 등

</aside>

</aside>

<aside> ⚙️

개발자 모드에서 분석하기

개발자 모드를 활용하면 레이아웃 구조를 확인할 수 있다!

• 안드로이드

  • Step 1
    • 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > pin번호 입력
  • Step 2
    • 설정 > 개발자 옵션 > 그림 > 레이아웃 범위 표시

  

• Web 개발자 모드

  단축키

  • 맥 : ⌥ Option + ⌘command + i
  • 윈도우 : F12

  

<aside> 💡

Tip

• 각 요소의 기준을 명확히 정의
• 큰 영역 > 작은 영역 순(섹선 → 모듈 → 아이템)으로 반복되는 UI를 찾아야 함! </aside>

</aside>

<aside>

컴포넌트 구성

UI 컴포넌트는 다양한 엘리먼트와 컴포넌트를 조합하여 만들어짐

• 엘리먼트(Element)

  더 이상 쪼개지지 않는 가장 작은 단위

  컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등의 요소

  

• 컴포넌트(Component)

  엘리먼트 + 엘리먼트의 조합

  재사용이 가능한 블록 형태의 컴포넌트

  

• 합성 컴포넌트(Compound Component)

  컴포넌트 + 컴포넌트의 조합

  

• 페이지(Page)

  합성 컴포넌트를 활용해 그려낸 UI 화면

  

<aside> 💡

컴포넌트는 작은 단위부터 큰 단위로 작업!

</aside>

</aside>

<aside>

컴포넌트 네이밍 원칙

디자이너와 개발자의 원활한 커뮤니케이션과 체계적인 관리를 위해 일관된 컴포넌트 네이밍이 필요함

• 영문 네이밍 원칙

  네이밍은 영문으로 정의

  아이콘과 컴포넌트 네이밍은 개발로 활용될 확률이 높음 → 영문으로 정의

• 사용 맥락에 따른 네이밍 원칙

• Assets 패널 적용하기

  Assets 패널은 파일의 구조를 반영하여 라이브러리 경로를 표시

  파일 경로 : Fill > page > frame(section)

  네이밍은 Assets 패널에도 영향을 주고, 알파벳 순으로 정렬되므로 규칙적인 네이밍 필요

  ✔에셋 패널 단축키 : alt + 2

</aside>

<aside>

UI 클론 디자인

• UI를 클로닝 하면서 디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법을 익힐 수 있음
• 전반적인 UI 구조 파악 가능
• 인기 있는 트렌드를 파악하고 이유를 분석할 수 있음

UI 화면 구조

• 큰 블록(페이지) → **작은 블록(컴포넌트)**순으로 설계!

<aside>

블록 구조의 장점

• 재사용성 - 같은 컴포넌트를 여러 곳에 활용 가능
• 유지 보수 용이 - 한 번의 수정으로 전체 UI에 반영 가능
• 유연성 - 추가·삭제, 위치 변경이 필요한 경우 레이아웃에 큰 변화 없이 유연하게 작업 가능

💡 페이지 내에 빈틈없이 쌓는 것이 포인트!

</aside>

</aside>