https://misosos.github.io/tags/design/DesignHugo Blox Builder (https://hugoblox.com)ko-krWed, 08 Oct 2025 00:00:00 +0000https://misosos.github.io/media/sharing.pnghttps://misosos.github.io/tags/design/https://misosos.github.io/playground/frontend-playground/glassmorphism-test/Wed, 08 Oct 2025 00:00:00 +0000https://misosos.github.io/playground/frontend-playground/glassmorphism-test/<p>최신 UI 트렌드인 Glassmorphism이 어떻게 구현되는지 궁금해서 TailwindCSS만으로 직접 실험해 보았습니다.</p> <p>별도의 CSS 코드를 작성하는 대신, backdrop-filter와 blur 같은 TailwindCSS의 유틸리티 클래스들을 조합하며 실시간으로 변하는 모습을 관찰했습니다. 반투명 배경과 얇은 테두리 값을 조금씩 바꿔보면서, 유리가 배경 위에 떠 있는 듯한 가장 자연스러운 깊이감을 찾아가는 과정이 흥미로웠습니다.</p> <p>간단한 호버 애니메이션도 추가하여 인터랙션이 더해졌을 때 어떤 느낌인지 가볍게 테스트해 보았습니다. 이 작은 실험을 통해 복잡해 보이는 UI도 유틸리티 조합만으로 빠르고 직관적으로 구현할 수 있다는 점을 다시 한번 확인할 수 있었습니다.</p>