UI 컴포넌트와 디자인 패턴은 어떻게 분류할까?

앱이나 웹 화면을 자세히 보면 버튼, 입력칸, 카드, 탭처럼 같은 부품이 계속 반복됩니다. 이 부품을 UI 컴포넌트라고 부르고, 부품을 조합해 자주 생기는 문제를 푸는 검증된 방법을 UI 디자인 패턴이라고 부릅니다. 이 글에서 참고한 분류 체계와 도구의 원본 주소는 글 끝에 모아 두었습니다.

컴포넌트가 수십 개를 넘어가면 "이건 어디에 넣고, 무엇이라고 부르지?"가 문제가 됩니다. 이 글에서는 컴포넌트를 나누는 대표적인 두 가지 기준인 크기(아토믹 디자인)와 역할(디자인 시스템의 분류)을 살펴보고, 실제 화면에서 자주 쓰는 디자인 패턴과 컴포넌트를 설계할 때 놓치기 쉬운 점을 정리합니다.

핵심 요약

• 컴포넌트는 크기로 나누면 원자·분자·유기체·템플릿·페이지(아토믹 디자인), 역할로 나누면 동작·입력·탐색·피드백·데이터 표시·담기의 여섯 갈래로 정리됩니다.
• 디자인 패턴은 컴포넌트를 조합해 반복되는 문제를 푸는 방법으로, 하단 탭 바, 무한 스크롤, 스켈레톤 로딩, 단계별 입력 같은 것이 대표적입니다.
• 좋은 컴포넌트는 모양보다 상태(로딩, 오류, 비어 있음, 비활성)를 함께 설계해야 하고, 분류는 팀이 같은 이름으로 부르게 하는 데 의미가 있습니다.

컴포넌트는 부품이고 패턴은 부품을 쓰는 방법입니다

컴포넌트는 화면을 이루는 재사용 가능한 부품입니다. 버튼 하나, 날짜 선택기 하나처럼 모양과 동작이 정해져 있어 여러 화면에서 같은 것을 가져다 씁니다. React나 Vue 같은 프레임워크에서는 컴포넌트가 실제 코드 단위이기도 합니다.

디자인 패턴은 그보다 한 단계 위의 개념입니다. "글 목록이 길 때 어떻게 보여 줄까", "회원가입 항목이 많을 때 어떻게 나눌까"처럼 자주 생기는 문제에 대해 이미 검증된 해법입니다. 같은 컴포넌트라도 어떤 패턴으로 조합하느냐에 따라 쓰기 편한 화면이 되기도 하고 헷갈리는 화면이 되기도 합니다.

크기로 나누면 아토믹 디자인의 다섯 단계가 됩니다

그림 1

가장 널리 알려진 분류는 Brad Frost가 제안한 아토믹 디자인입니다. 화학에서 원자가 모여 분자가 되고 분자가 모여 유기체가 되듯, 작은 부품을 조합해 큰 화면을 만든다는 생각입니다.

• 원자: 더 쪼갤 수 없는 기본 부품입니다. 버튼, 입력칸, 라벨, 아이콘이 여기에 속합니다.
• 분자: 원자 몇 개가 모여 하나의 일을 하는 단위입니다. 입력칸과 버튼을 묶은 검색창이 대표적입니다.
• 유기체: 분자와 원자가 모여 화면의 한 구역을 이룹니다. 로고·메뉴·검색창을 담은 헤더, 상품 카드 목록이 여기에 속합니다.
• 템플릿: 실제 내용 없이 유기체의 배치만 정한 페이지 뼈대입니다.
• 페이지: 템플릿에 실제 사진과 글을 채운, 사용자가 보는 최종 화면입니다.

이 방식의 장점은 작은 부품을 고치면 그 부품을 쓰는 모든 화면이 함께 바뀐다는 것입니다. 다만 실제 프로젝트에서는 "이게 분자인가 유기체인가"를 두고 논쟁이 생기기 쉬워, 원자·분자·유기체 세 단계만 쓰거나 이름을 팀에 맞게 바꿔 쓰는 경우도 많습니다.

역할로 나누면 여섯 갈래로 정리됩니다

그림 2

Google의 Material Design 3는 컴포넌트를 목적에 따라 동작, 담기, 소통, 탐색, 선택, 텍스트 입력의 여섯 갈래로 나눕니다. Ant Group의 Ant Design은 일반, 레이아웃, 탐색, 데이터 입력, 데이터 표시, 피드백, 기타의 일곱 갈래를 씁니다. 이름은 조금씩 다르지만 묶어 보면 대체로 여섯 갈래로 정리됩니다.

• 동작: 버튼, 플로팅 버튼, 아이콘 버튼처럼 무언가를 실행시킵니다.
• 입력·선택: 입력칸, 체크박스, 스위치, 날짜 선택기처럼 사용자에게서 값을 받습니다.
• 탐색: 탭, 하단 탭 바, 메뉴, 페이지 번호처럼 다른 곳으로 이동시킵니다.
• 피드백: 토스트, 알림, 진행 표시, 스켈레톤처럼 지금 상태를 알려 줍니다.
• 데이터 표시: 카드, 목록, 표, 배지, 아바타처럼 정보를 보여 줍니다.
• 담기·겹치기: 레이아웃, 모달, 바텀 시트, 툴팁처럼 다른 컴포넌트를 담거나 화면 위에 띄웁니다.

역할 분류는 새 부품이 정말 필요한지 판단할 때 쓸모가 큽니다. "이것은 여섯 중 무엇을 하는가"를 먼저 물으면, 이미 있는 컴포넌트로 해결되는 경우가 생각보다 많습니다.

자주 쓰는 디자인 패턴은 문제별로 정해져 있습니다

디자인 패턴은 수없이 많지만, 대부분의 앱과 웹에서 반복해서 만나는 것은 몇 가지로 좁혀집니다.

• 탐색 패턴: 주요 메뉴가 3~5개라면 휴대폰에서는 하단 탭 바가 엄지로 누르기 쉽습니다. 메뉴가 많으면 햄버거 메뉴(세 줄 아이콘)로 숨기지만, 숨긴 메뉴는 덜 눌린다는 점을 감안해야 합니다.
• 목록 패턴: 끝없이 둘러보는 피드에는 무한 스크롤, 특정 항목을 다시 찾아야 하는 검색 결과에는 페이지 번호, 그 사이에는 "더 보기" 버튼이 맞습니다.
• 입력 패턴: 항목이 많은 가입·주문 양식은 단계별 입력(스테퍼)으로 나누고, 오류는 제출 후가 아니라 칸을 벗어날 때 바로 알려 주는 인라인 검증이 친절합니다.
• 피드백 패턴: 내용을 불러오는 동안에는 빈 화면 대신 스켈레톤(회색 자리 표시)을 보여 주고, 가벼운 완료 알림은 토스트로, 되돌릴 수 없는 삭제 확인은 모달로 구분합니다.
• 점진적 공개: 처음에는 꼭 필요한 것만 보여 주고, 고급 설정은 "더 보기"나 펼치기로 숨겨 화면을 단순하게 유지합니다.

컴포넌트는 모양보다 상태를 함께 설계해야 합니다

디자인 시안에는 보통 버튼이 가장 보기 좋은 모습 하나만 그려집니다. 하지만 실제로 버튼은 기본, 마우스를 올렸을 때, 눌렀을 때, 키보드로 선택했을 때(포커스), 비활성, 로딩 중 같은 여러 상태를 오갑니다. 목록이라면 데이터가 하나도 없을 때(빈 상태)와 불러오다 실패했을 때(오류 상태)도 필요합니다.

이 상태들을 처음부터 함께 정해 두지 않으면 개발 단계에서 화면마다 제각각 만들어집니다. 특히 포커스 상태는 키보드나 화면 낭독기로 쓰는 사용자에게 꼭 필요하므로 지우지 않아야 합니다. 실무에서는 Storybook 같은 도구로 컴포넌트마다 상태별 모습을 한곳에 모아 두고, 디자이너와 개발자가 같은 화면을 보며 확인합니다.

구분	내용	시사점
크기 분류 (아토믹 디자인)	원자 → 분자 → 유기체 → 템플릿 → 페이지	작은 부품을 고치면 전체 화면에 반영됩니다
역할 분류 (디자인 시스템)	동작, 입력·선택, 탐색, 피드백, 데이터 표시, 담기	새 부품이 필요한지 판단하는 기준이 됩니다
디자인 패턴	하단 탭 바, 무한 스크롤, 스테퍼, 스켈레톤 등	반복되는 문제에 검증된 해법을 씁니다
상태 설계	기본, 포커스, 비활성, 로딩, 빈 상태, 오류	시안에 없는 화면까지 미리 정해 둡니다

정리하며

UI 컴포넌트는 크기로 나누면 아토믹 디자인의 다섯 단계, 역할로 나누면 동작·입력·탐색·피드백·데이터 표시·담기의 여섯 갈래로 정리됩니다. 디자인 패턴은 이 부품들을 조합해 목록, 탐색, 입력, 로딩 같은 반복되는 문제를 푸는 검증된 방법입니다.

어떤 분류를 고르느냐보다 중요한 것은 팀 전체가 같은 이름으로 부르고, 같은 부품을 다시 쓰는 것입니다. 처음에는 Material Design이나 Ant Design의 분류를 그대로 빌려 쓰고, 프로젝트에 맞게 조금씩 다듬어 가는 것이 현실적인 출발점입니다.

원본과 참고 자료

• Atomic Design · Brad Frost · 온라인 공개 도서 · atomicdesign.bradfrost.com
• Material Design 3 · Google · 디자인 가이드 · m3.material.io/components
• Ant Design · Ant Group · MIT · github.com/ant-design/ant-design
• Storybook · Storybook 팀 · MIT · github.com/storybookjs/storybook

분류 체계와 라이선스는 2026년 10월 26일 기준 각 공식 페이지와 GitHub 저장소에서 확인했습니다.

한마디로 정리하면

UI 컴포넌트는 블록 장난감과 같습니다. 가장 작은 블록(원자)을 몇 개 붙이면 바퀴나 창문 같은 부품(분자)이 되고, 부품을 모으면 자동차나 집(유기체)이 되며, 그것들을 배치해 마을(페이지)을 만듭니다.

블록 상자를 정리하는 방법은 두 가지입니다. 크기별로 나눠 담을 수도 있고(아토믹 디자인), 바퀴는 바퀴끼리, 창문은 창문끼리 쓰임새별로 나눠 담을 수도 있습니다(역할 분류). 그리고 "튼튼한 다리는 이렇게 조립한다" 같은 검증된 조립 설명서가 디자인 패턴입니다.

상자를 잘 정리해 두면 필요한 블록을 금방 찾고, 이미 있는 블록을 또 만들지 않게 됩니다. 분류의 진짜 목적은 바로 그것입니다.