Frontend Playground | 김미소의 포트폴리오

Motion Gallery

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

UI/UX에서 애니메이션이 사용자 경험에 얼마나 큰 영향을 주는지 직접 확인해보고 싶어, Framer Motion 라이브러리와 TailwindCSS를 활용해 인터랙션 실험들을 모아보았습니다.

컴포넌트들이 화면에 나타나거나 사라질 때, 혹은 마우스 오버 시 어떤 방식으로 반응하는 것이 가장 자연스럽고 즐거운 경험을 줄지 다양하게 시도해 보았습니다. whileHover, whileTap 같은 속성들을 조합하여 카드들이 마치 살아있는 것처럼 리듬감 있게 움직이도록 만들었고, variants를 활용해 컴포넌트 간 전환 시 부드러운 페이드, 슬라이드, 스케일 효과가 적용되는 과정을 탐구했습니다.

이 실험들을 통해 애니메이션이 단순히 시각적인 요소에 그치지 않고, 사용자의 시선 흐름을 유도하고 콘텐츠에 대한 몰입도를 높이는 중요한 도구임을 직접 경험할 수 있었습니다. TailwindCSS로 빠르게 스타일을 입히면서 Framer Motion으로 동적인 요소를 더하는 과정 자체가 즐거운 학습이었습니다.

Glassmorphism Test

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

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

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

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

Parallax Scroll Experiment

Tue, 07 Oct 2025 00:00:00 +0000

스크롤만으로 어떻게 웹사이트에 깊이감과 생동감을 줄 수 있는지 궁금해서, 바닐라 자바스크립트(Vanilla JS)와 CSS만으로 직접 Parallax 효과를 실험해 보았습니다.

가장 먼저 스크롤 위치(scrollY) 값을 받아와, 배경, 중간, 전경에 해당하는 각 이미지 레이어의 transform: translateY() 값을 다르게 조절하는 방식으로 접근했습니다. 각 레이어의 이동 속도에 차이를 두면서 입체감이 어떻게 변하는지 관찰하는 과정 자체가 재미있었습니다.

단순히 스크롤 이벤트에만 의존하면 애니메이션이 끊겨 보일 수 있다는 걸 알게 됐고, 이를 해결하기 위해 requestAnimationFrame을 사용해 브라우저 렌더링 주기에 맞춰 부드럽게 움직이도록 개선했습니다. 또한, 화면에 보일 때만 애니메이션이 동작하도록 IntersectionObserver를 적용해보거나 translateZ(0) 트릭으로 GPU 가속을 활성화하는 등, 성능 최적화 방법들도 함께 탐구해 보았습니다.

이번 실험을 통해 스크롤 기반 애니메이션의 기본 원리와 성능 최적화의 중요성을 직접 체감할 수 있었습니다.

Responsive Grid Layout

Mon, 06 Oct 2025 00:00:00 +0000

웹사이트에서 가장 기본적이면서도 까다로운 반응형 그리드 레이아웃을 어떻게 하면 더 효율적으로 만들 수 있을지 고민하며 시작한 실험입니다.

처음에는 TailwindCSS의 grid-cols-2, md:grid-cols-3처럼 분기점마다 직접 컬럼 수를 지정하는 방식으로 접근했습니다. 하지만 더 유연한 방법을 찾아보다가, 순수 CSS Grid의 repeat(auto-fit, minmax()) 속성을 알게 되었습니다.

이 속성을 적용하니, 화면 너비에 맞춰 아이템의 최소 크기를 보장하면서 자동으로 컬럼 수가 바뀌는 것을 확인할 수 있었습니다. 굳이 분기점을 일일이 설정할 필요가 없어 코드가 훨씬 간결해졌고, 모바일과 데스크탑 사이의 다양한 화면 크기에서도 자연스럽게 정렬되는 점이 인상적이었습니다. 여기에 Tailwind의 gap 유틸리티를 더해 아이템 간의 간격을 일정하게 유지하는 방법도 함께 테스트했습니다.

이번 실험은 Tailwind의 편리함과 순수 CSS Grid의 강력함을 함께 사용했을 때 얼마나 유연하고 효율적인 레이아웃을 만들 수 있는지 깨닫게 된 좋은 경험이었습니다.