Glassmorphism Test

Wed, 08 Oct 2025 00:00:00 +0000

최신 UI 트렌드인 Glassmorphism이 어떻게 구현되는지 궁금해서 TailwindCSS만으로 직접 실험해 보았습니다.

별도의 CSS 코드를 작성하는 대신, backdrop-filter와 blur 같은 TailwindCSS의 유틸리티 클래스들을 조합하며 실시간으로 변하는 모습을 관찰했습니다. 반투명 배경과 얇은 테두리 값을 조금씩 바꿔보면서, 유리가 배경 위에 떠 있는 듯한 가장 자연스러운 깊이감을 찾아가는 과정이 흥미로웠습니다.

간단한 호버 애니메이션도 추가하여 인터랙션이 더해졌을 때 어떤 느낌인지 가볍게 테스트해 보았습니다. 이 작은 실험을 통해 복잡해 보이는 UI도 유틸리티 조합만으로 빠르고 직관적으로 구현할 수 있다는 점을 다시 한번 확인할 수 있었습니다.

Dashboard Card

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

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

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

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

UI | 김미소의 포트폴리오

Glassmorphism Test

Dashboard Card