컴포넌트로 분리하기

유틸리티 클래스로 빠르게 스타일을 입히다 보면, 같은 버튼을 페이지마다 똑같은 클래스 묶음으로 다시 적게 됩니다. 버튼이 열 곳에 있는데 모서리 둥글기를 바꾸려면 열 군데를 모두 고쳐야 합니다. 이 문제를 푸는 방법이 컴포넌트(component)입니다. 컴포넌트란 반복되는 화면 조각을 하나의 재사용 단위로 떼어 내고 이름을 붙인 것입니다. 디자인 토큰이 '값'을 묶었다면, 컴포넌트는 '화면 조각'을 묶습니다.

반복을 알아채기

같은 모양이 두세 번 이상 나타나면 컴포넌트 후보입니다. 대표적으로 버튼, 카드, 네비게이션 바, 입력칸, 배지 등이 있습니다. 핵심 질문은 '이 조각이 다른 곳에도 똑같이 나타나는가'입니다. 그렇다면 한 번 정의하고 여러 번 불러 쓰는 편이 안전합니다.

같은 코드를 두 번 복사해 붙이는 순간을 경계하세요. 그 지점이 대개 컴포넌트로 떼어 낼 신호입니다. 복사본이 늘어날수록 수정 비용도 함께 늘어납니다.

버튼을 컴포넌트로

가장 단순한 방법은 자주 쓰는 클래스 묶음에 이름을 하나 붙이는 것입니다. Tailwind에서는 @apply로 여러 유틸리티를 하나의 클래스 안에 모을 수 있습니다.

/* 버튼 컴포넌트 정의 */
.btn {
  @apply px-4 py-2 rounded font-medium;
}
.btn-primary {
  @apply bg-violet-500 text-white hover:bg-violet-600;
}

<button class="btn btn-primary">신청</button>
<button class="btn btn-primary">저장</button>

카드와 네비

카드는 보통 둥근 모서리, 옅은 그림자, 안쪽 여백, 테두리로 이뤄집니다. 네비게이션은 좌우로 펼쳐진 링크 묶음입니다. 이런 묶음도 같은 방식으로 이름을 붙여 재사용합니다.

• 카드(card) — rounded-lg border shadow p-6 묶음. 제목, 본문, 동작 버튼을 담는 그릇입니다.
• 네비(nav) — flex gap-6 items-center로 링크를 가로로 정렬한 묶음입니다.
• 배지(badge) — text-xs px-2 py-1 rounded-full로 작은 상태 표시입니다.

변형(variant) 만들기

같은 컴포넌트라도 상황에 따라 모습이 조금 다를 수 있습니다. 버튼이라면 강조용(primary)과 보조용(secondary)이 있죠. 이때는 공통 부분(btn)을 두고, 다른 부분만 별도 클래스(btn-primary, btn-secondary)로 분리합니다. 공통과 차이를 나누는 이 사고방식이 컴포넌트 설계의 핵심입니다.

1. 화면에서 반복되는 조각을 찾습니다.
2. 공통 클래스 묶음에 이름을 붙입니다.
3. 달라지는 부분만 변형 클래스로 분리합니다.
4. 여러 곳에서 같은 이름을 불러 씁니다.