Atomic Design: 원자, 분자, 유기체
컴포넌트를 원자, 분자, 유기체, 템플릿, 페이지로 분류하여 디자인과 엔지니어링 사이에서 공유할 어휘를 만듭니다.
Atomic Design: 원자, 분자, 유기체은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
원자적 디자인이란?
원자적 디자인(Brad Frost, 2013)은 UI 컴포넌트를 복잡성에 따라 다섯 단계로 구성하는 사고 모델입니다. 원자, 분자, 유기체, 템플릿, 페이지로 나뉘며 디자이너와 엔지니어가 공유하는 어휘를 제공합니다.
원자 — 가장 작은 구성 요소
더 이상 나눌 수 없는 단일 목적 컴포넌트입니다. 버튼, 입력 필드, 아이콘, 레이블, 색상 견본 등이 해당합니다. 추상적이며 어떤 상황에서도 재사용할 수 있습니다.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>분자 — 단순한 컴포넌트 그룹
원자를 결합해 유용한 기능을 만듭니다. SearchBar는 입력 + 버튼 + 아이콘으로 구성됩니다. FormField는 레이블 + 입력 + ErrorMessage로 구성됩니다. 여전히 범용적으로 사용할 수 있습니다.
function SearchBar({ onSearch }) {
return (
<div className="search-bar">
<Input placeholder="Search..." />
<Button onClick={onSearch}>
<Icon name="search" />
</Button>
</div>
);
}유기체 — 복잡한 영역
인터페이스의 뚜렷한 영역을 구성하는 더 큰 조합입니다. 예를 들면 Header(로고 + 탐색 + 검색창 + 사용자 메뉴), ProductCard(이미지 + 제목 + 가격 + 버튼), SignupForm이 있습니다. 구체적인 맥락을 더 많이 반영합니다.
function Header({ user }) {
return (
<header>
<Logo />
<Navigation links={navLinks} />
<SearchBar onSearch={handleSearch} />
<UserMenu user={user} />
</header>
);
}템플릿 — 페이지 뼈대
실제 콘텐츠 없이 유기체를 배치한 와이어프레임 수준의 레이아웃입니다. BlogTemplate에는 Header, Article 슬롯이 있는 Main, Sidebar가 포함됩니다.
function BlogTemplate({ header, article, sidebar, footer }) {
return (
<div className="blog-layout">
{header}
<div className="main">
<main>{article}</main>
<aside>{sidebar}</aside>
</div>
{footer}
</div>
);
}페이지 — 실제 콘텐츠
실제 콘텐츠가 들어간 템플릿입니다. /blog/[slug] 페이지는 실제 게시물, 사이드바 위젯, 크롬이 포함된 BlogTemplate을 렌더링합니다.
폴더 구조
많은 팀이 수준에 따라 컴포넌트를 구성합니다.
src/components/
atoms/
Button.tsx
Input.tsx
Icon.tsx
molecules/
SearchBar.tsx
FormField.tsx
organisms/
Header.tsx
ProductCard.tsx
templates/
BlogTemplate.tsx
pages/
BlogPage.tsx장점
디자이너와 개발자가 공유하는 어휘를 제공합니다. 중복보다 조합을 장려합니다. 디자인 시스템을 더 쉽게 구축할 수 있습니다. 가장 작은 재사용 가능 단위부터 생각하게 합니다.
비판: 엄격한 분류는 어렵습니다
실제로는 분자와 유기체의 경계가 모호합니다. 많은 팀에서 어떤 항목이 어디에 속하는지를 두고 논쟁하게 되며, 이는 명확성이라는 목표를 무너뜨립니다.
현대적인 대안: 기능 기반 구성
많은 대규모 React/Vue 코드베이스는 엄격한 원자적 단계보다 기능(auth/, checkout/, dashboard/)을 기준으로 구성하는 방식을 선호합니다. 원자적 디자인은 공유 디자인 시스템 계층에서는 여전히 효과적입니다.
Storybook에서 원자적 디자인 사용하기
Storybook은 원자적 디자인에 잘 맞습니다. 최상위 범주를 원자, 분자, 유기체로 나누면 컴포넌트 라이브러리를 쉽게 탐색할 수 있습니다.
원자적 디자인을 사용할 때
적합한 경우: 여러 앱에서 공유하는 디자인 시스템 라이브러리, 공유된 사고 모델이 필요한 대규모 팀, 디자이너가 적극적으로 참여하는 프로젝트입니다. 피해야 할 경우: 소규모 앱, 프로토타입, 함께 배치하는 것보다 기능 구성이 더 중요한 기능 중심 SPA입니다.
빠른 확인
원자적 디자인에서 입력 + 버튼 + 아이콘으로 구성된 SearchBar는 어떤 종류의 컴포넌트인가요?
복습: 원자적 디자인
다섯 단계는 다음과 같습니다. 원자(Button, Input, Icon), 분자(SearchBar, FormField), 유기체(Header, ProductCard), 템플릿(레이아웃), 페이지(실제 콘텐츠)입니다. 공유 어휘와 조합 우선 사고를 사용하며, 폴더 구조는 각 계층을 반영합니다. 공유 디자인 시스템에 적합하지만, 앱 코드에서는 기능 기반 폴더가 원자적 구조보다 나은 경우가 많습니다.
자주 묻는 질문
“Atomic Design: 원자, 분자, 유기체” 강의는 무료인가요?
네 — “Atomic Design: 원자, 분자, 유기체” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Atomic Design: 원자, 분자, 유기체”에서 뭘 배우나요?
컴포넌트를 원자, 분자, 유기체, 템플릿, 페이지로 분류하여 디자인과 엔지니어링 사이에서 공유할 어휘를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Atomic Design: 원자, 분자, 유기체” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Atomic Design: 원자, 분자, 유기체
- Turborepo를 사용한 모노레포 설정
- 마이크로 프런트엔드: Module Federation
- 기능 기반 폴더 구조