Button Variants

Sun, 05 Oct 2025 00:00:00 +0000

프로젝트를 진행하다 보면 버튼 스타일이 조금씩 달라져 전체적인 통일성을 해치는 경우가 많았습니다. 이걸 해결해보고자, 재사용 가능한 버튼 컴포넌트를 미리 만들어보는 실험을 시작했습니다.

TailwindCSS의 @apply를 활용해 기본 스타일, 크기, 상태 변화 등을 하나의 컴포넌트 클래스로 묶는 과정을 탐구했습니다. 이를 바탕으로 가장 자주 쓰이는 Primary (주요), Success (성공), Danger (위험) 등 여러 목적에 맞는 버튼 ‘Variants’를 만들어보았습니다.

특히 hover, focus, active 같은 여러 상태 변화에 일관된 시각적 피드백을 주는 것에 집중했습니다. 그림자나 모서리 둥글기(border-radius) 같은 디테일도 통일해서, 어떤 버튼을 가져다 써도 디자인 시스템 안에서 벗어나지 않도록 규칙을 만들어가는 과정이었습니다.

이번 실험은 단순한 스타일링을 넘어, 어떻게 하면 더 체계적으로 UI 컴포넌트를 관리하고 재사용성을 높일 수 있을지에 대한 고민을 담고 있습니다. 앞으로 진행할 프로젝트의 개발 속도를 높여줄 좋은 기반이 될 것 같습니다.

Button | 김미소의 포트폴리오

Button Variants