CSS | 김미소의 포트폴리오

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 가속을 활성화하는 등, 성능 최적화 방법들도 함께 탐구해 보았습니다.

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

순수 웹 언어로 TodoList 구현

Thu, 25 Sep 2025 00:00:00 +0000

순수 웹 언어인 html,css,javascript만을 사용해서 간단한 TodoList를 만들었습니다.