UI Components | 김미소의 포트폴리오

Button Variants

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

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

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

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

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

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

웹사이트에서 흔히 쓰이는 모달 창이 너무 갑자기 나타나거나 사라지면 사용자 경험을 해친다고 생각했습니다. 어떻게 하면 더 부드럽고 자연스럽게 만들 수 있을지 Framer Motion을 이용해 직접 실험해봤습니다.

가장 먼저, 모달이 사라질 때의 애니메이션을 구현하기 위해 Framer Motion의 AnimatePresence 컴포넌트가 어떻게 동작하는지 알아보았습니다. 이를 바탕으로, 모달 창이 나타날 때는 배경이 어두워지면서(Fade) 창은 살짝 커지는(Scale) 효과를 동시에 적용해보며 가장 만족스러운 조합을 찾아나갔습니다.

애니메이션 외에도 사용 편의성을 높이기 위해 ESC 키를 누르거나 모달 창 바깥의 어두운 영역을 클릭했을 때 창이 닫히는 로직을 추가하는 과정도 함께 진행했습니다. 이번 실험을 통해 애니메이션이 단순히 꾸미기용이 아니라, 사용자의 행동을 방해하지 않고 자연스럽게 상호작용의 흐름을 만들어주는 중요한 UX 장치임을 다시 한번 느낄 수 있었습니다.

Dashboard Card

Fri, 03 Oct 2025 00:00:00 +0000

데이터를 한눈에 보여주는 대시보드를 만들 때 가장 핵심적인 요소는 ‘카드’ 컴포넌트라고 생각했습니다. 그래서 어떤 상황에나 잘 어울릴만한 깔끔한 카드 UI를 직접 만들어보는 작은 실험을 진행했습니다.

단순한 테두리만으로는 입체감을 표현하기 어려워, Tailwind의 shadow (그림자)와 ring (테두리 링) 유틸리티를 어떻게 조합해야 가장 깔끔해 보일지 여러 가지로 시도해봤습니다. 또한, 사용자가 카드에 마우스를 올렸을 때 주목하고 있다는 느낌을 주기 위해 그림자와 테두리 색상이 은은하게 변하는 효과를 추가하는 과정도 탐구했습니다.

카드 안에서는 가장 중요한 지표(Metric)가 눈에 잘 띄도록 폰트 크기와 굵기를 조절하며 최적의 위계를 찾아보려 했습니다. 이번 실험을 통해 사용자의 시선을 자연스럽게 이끌고 데이터의 가독성을 높이는 UI 디자인의 작은 디테일들을 직접 고민해볼 수 있었습니다.

Dark Mode Toggle

Thu, 02 Oct 2025 00:00:00 +0000

요즘 웹사이트의 필수 기능이 된 다크모드를 직접 구현해보며 그 원리를 이해하고 싶었습니다.

가장 먼저 React의 useState를 이용해 ’light’와 ‘dark’ 상태를 관리하고, TailwindCSS의 dark: 클래스가 어떻게 동작하는지 알아보는 것부터 시작했습니다. 단순히 상태를 바꾸는 것에서 더 나아가, 사용자가 설정한 테마가 새로고침 후에도 유지되도록 localStorage에 값을 저장하고 불러오는 기능도 실험해 보았습니다.

기능 구현 후에는 시각적인 완성도를 높이는 데 집중했습니다. 테마가 바뀔 때 배경색이 부드럽게 전환되도록 transition-colors를 적용해보고, Framer Motion을 이용해 토글 스위치 자체가 조금 더 재미있게 움직이도록 만들어보았습니다.

단순해 보이는 토글 하나에도 상태 관리, 데이터 영속성, 사용자 경험을 위한 시각적 디테일까지 여러 요소를 고민해볼 수 있는 의미 있는 실험이었습니다.