디자인 시스템이 없어도 컴포넌트 사고가 필요한 이유: 작은 프로젝트에서 시작하는 법

컴포넌트 사고는 화면을 통째로 그리지 않고, 버튼·카드·입력창처럼 다시 쓰는 부품으로 나눠서 생각하는 방식이에요. 디자인 시스템은 이 부품을 문서로 정리한 결과물일 뿐이라서, 시스템이 없는 작은 프로젝트에서도 부품으로 나눠 생각하면 수정이 쉬워지고 화면끼리 어긋나지 않아요. 오히려 시스템이 없을수록 이 습관이 더 필요해요.

"우리는 디자인 시스템 만들 규모가 아니에요." 작은 사이트나 혼자 하는 프로젝트에서 많이 듣는 말이에요. 맞는 말이에요. 문서까지 갖춘 디자인 시스템은 필요 없을 수 있어요. 그런데 그게 컴포넌트로 생각하지 않아도 된다는 뜻은 아니에요.

---

컴포넌트 사고란?

컴포넌트 사고는 화면을 페이지 단위가 아니라 부품 단위로 보는 것이에요. 메인 페이지, 상품 페이지, 문의 페이지를 각각 따로 그리는 대신, 그 안에 반복해서 나오는 버튼, 카드, 입력창, 알림 같은 부품을 먼저 보고 이걸 조립해서 페이지를 만든다고 생각하는 거예요.

브래드 프로스트(Brad Frost)가 2013년에 소개한 아토믹 디자인(Atomic Design)이 이 생각을 잘 정리한 예예요. 작은 부품(원자)이 모여 조금 큰 부품(분자)이 되고, 그게 모여 섹션과 페이지가 된다는 방식이에요.

컴포넌트 사고와 디자인 시스템은 무엇이 다른가요?

구분	컴포넌트 사고	디자인 시스템
정체	생각하는 방식	정리된 결과물
필요한 것	습관	문서, 라이브러리, 관리하는 사람
규모	페이지 한 장에서도 가능	보통 여러 팀, 여러 제품
시작 시점	첫 화면부터	부품이 쌓이고 나서

디자인 시스템은 컴포넌트 사고가 쌓여서 생기는 결과예요. 순서가 반대가 아니에요. 시스템을 먼저 만들지 않아도, 부품으로 나눠 생각하는 건 첫날부터 할 수 있어요.

---

디자인 시스템이 없어도 컴포넌트 사고가 필요한 이유는?

고칠 곳이 한 곳으로 줄어요

버튼을 페이지마다 따로 만들었다면, 버튼 둥글기를 바꾸고 싶을 때 모든 페이지를 다 찾아 고쳐야 해요. 하나라도 놓치면 그 페이지만 옛날 버튼이 남아요. 버튼을 부품 하나로 만들어 두면 한 곳만 고치면 전부 바뀌어요.

비슷하지만 조금씩 다른 부품이 안 생겨요

부품 없이 작업하면 어느새 비슷한 버튼이 여러 개 생겨요. 높이가 40px인 버튼, 42px인 버튼, 둥글기가 6px인 버튼, 8px인 버튼. 하나하나는 티가 안 나지만 화면을 오가면 "뭔가 어긋난" 느낌을 줘요. 부품을 먼저 정해 두면 새로 만들기 전에 있는 걸 먼저 찾게 돼요.

상태를 빠뜨리지 않아요

화면을 통째로 그리면 그 화면에 보이는 모습 하나만 그리기 쉬워요. 부품으로 생각하면 자연스럽게 "이 버튼은 마우스를 올렸을 때, 눌렀을 때, 비활성일 때, 로딩 중일 때 어떻게 보이지?"를 같이 물어요.

구분	버튼에서 챙길 상태	입력창에서 챙길 상태
기본	평소 모습	비어 있을 때 (안내 문구)
상호작용	호버, 눌림, 키보드 포커스	입력 중, 포커스
예외	비활성, 로딩 중	오류, 읽기 전용

디자이너와 개발자가 같은 말을 해요

요즘 웹 개발은 대부분 컴포넌트 단위로 만들어요. 리액트(React), 뷰(Vue) 같은 도구가 다 그렇고, 피그마(Figma)도 컴포넌트와 변형(Variants)으로 부품을 관리해요. 디자이너가 부품 단위로 넘기면 개발자는 그대로 컴포넌트로 옮기면 돼요. "메인 페이지의 그 파란 버튼"이 아니라 "Button의 primary"라고 말할 수 있게 돼요.

AI에게 맡길 때도 편해요

요즘은 AI로 화면을 만드는 일이 많은데, "이 페이지 만들어 줘"보다 "이 카드 컴포넌트를 써서 목록을 만들어 줘"라고 할 때 결과가 훨씬 안정적이에요. 부품이 정해져 있으면 AI가 새로운 스타일을 지어내지 않고 있는 걸 조립해요.

---

시스템 없이 컴포넌트 사고를 하려면 어떻게 하나요?

거창한 문서 없이도 할 수 있는 것부터 해요.

1. 두 번 나오면 부품으로 만들어요

같은 모양이 두 번째로 나오는 순간 부품으로 묶어요. 처음부터 모든 걸 부품으로 만들 필요는 없어요. 반복되는 게 보일 때 묶으면 돼요.

2. 이름을 붙여요

이름이 있어야 다시 찾을 수 있어요. "회색 상자"보다 "PostCard", "Notice"처럼 하는 일을 이름으로 붙여요.

3. 다른 점은 옵션으로 만들어요

비슷한데 조금 다른 부품이 필요하면 새로 만들지 말고 옵션(변형)으로 나눠요. CSS로 쓰면 이런 식이에요.

/* 버튼 부품 하나에 옵션 두 개 */
.btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
}
.btn--primary   { background: #00A30F; color: #fff; }
.btn--secondary { background: #fff; color: #00A30F; border: 1px solid #00A30F; }

<button class="btn btn--primary">저장</button>
<button class="btn btn--secondary">취소</button>

높이, 여백, 둥글기는 .btn 한 곳에 있어서 모든 버튼이 같고, 색만 옵션으로 달라져요.

4. 색과 간격은 값 몇 개로 줄여요

부품 안의 색과 간격도 정해 둔 몇 가지 값에서만 골라요. CSS 변수로 두면 한 곳에서 바꿀 수 있어요. 이것만 해도 미니 디자인 시스템의 절반은 생긴 셈이에요.

---

이 블로그는 어떻게 하고 있나요?

이 블로그에도 따로 디자인 시스템 문서는 없어요. 대신 글 안에 들어가는 인사말, 자주 묻는 질문, 정리 같은 상자를 전부 정해진 블록(부품) 으로만 만들어요. 새로운 모양의 상자가 필요할 때 그 글에만 HTML로 따로 꾸미지 않고, 블록을 하나 추가해서 편집 화면과 게시 화면이 같이 쓰게 해요.

덕분에 정리 상자의 색을 한 번 바꾸면 지금까지 쓴 모든 글의 정리 상자가 같이 바뀌어요. 글이 40편이 넘었는데도 글마다 모양이 어긋나지 않는 건 이 덕분이에요.

---

자주 묻는 질문

---

정리