[내일 배움 캠프] 7일차

최준용·2026년 1월 7일

반복되는 UI 요소를 컴포넌트로 정의하고, 컴포넌트의 범위를 명확히 설정하면 재사용과 일관성이 쉬워집니다.

컴포넌트는 크게 기본 요소(아이템), 조합 요소(모듈), 섹션 세 가지 기준으로 분류할 수 있습니다 .

기본 요소는 칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등 가장 작은 단위의 컴포넌트이며, Color, Typography, Icon 등으로 구성됩니다.

조합 요소는 카드(이미지, 텍스트, 버튼 조합), 서치바(아이콘+입력 필드), Snackbar(텍스트+버튼) 등으로, 기본 요소끼리 또는 다른 조합 요소와 조합해 만듭니다.

섹션은 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등으로서, 조합 요소 여러 개와 여백(마진, 패딩 포함)까지 고려된 큰 단위의 컴포넌트입니다.

개발자 모드를 사용하면 실제 서비스에서 화면의 레이아웃 구조와 컴포넌트 구현 방식을 확인할 수 있습니다. 아이콘의 터치 영역, 칩의 패딩 등, 컴포넌트의 마진·패딩의 세부 적용 기준을 알 수 있습니다.

개발자 모드로 컬러, 패딩, 마진, 네이밍을 비롯한 상세 구조를 파악하며, 컴포넌트 구조 정의와 효율적 오토 레이아웃 적용에 실질적으로 도움이 됩니다.

엘리먼트는 더 이상 분해할 수 없는 UI의 가장 작은 단위로, 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등이 포함됩니다.

엘리먼트들은 디자인 시스템의 파운데이션으로 정의되는 요소들입니다.

엘리먼트를 조합하면 컴포넌트가, 컴포넌트를 조합하면 합성 컴포넌트가 됩니다.

네비게이션 바는 모든 서비스에서 공통적으로 사용하는 중요한 UI 컴포넌트이며, 디자인 요소로는 아이콘, 라벨, 오토 레이아웃, 프레임 네이밍 등이 포함됩니다.

컴포넌트 구조는 작은 요소(아이템)부터 점진적으로 큰 요소(내비게이션 바 전체)로 만들어야 하며, 각 아이템은 아이콘과 텍스트 라벨로 구성됩니다.

카드 컴포넌트는 세로 직사각형, 정사각형, 가로 직사각형 등 다양한 형태와 사이즈로 나누어 제작하며, 각 형태별로 프로퍼티(레이아웃, 사이즈)를 적용해 컴포넌트의 확장성과 유연성을 높입니다.

카드 컴포넌트를 완성한 후 이를 복제해 캐러셀 컴포넌트의 기본 재료로 활용합니다.