오늘은 웹페이지 애니메이션 오류를 해결하며 한 단계 성장한 하루였습니다.
페이지마다 어떤 곳에서는 스크롤 시 페이드 인 아웃 효과는 잘 작동하지만 카드 줌 효과가 되지 않고,
또 다른 페이지에서는 카드 줌은 되지만 스크롤 애니메이션이 작동하지 않는 문제가 발생했습니다.
처음에는 단순한 CSS 오류라고 생각했지만, 원인은 생각보다 구조적인 문제였습니다.
구조를 분리하자 두 효과가 동시에 자연스럽게 작동했고,
페이지 전반의 완성도도 눈에 띄게 좋아졌습니다.
이번 작업을 통해 단순히 “효과가 안 된다”에서 멈추는 것이 아니라,
CSS 속성이 어떻게 동작하고 어떤 경우에 충돌이 발생하는지 구조적으로 이해하는 것이 중요하다는 점을 다시 한 번 느꼈습니다.
겉으로 보이는 디자인보다, 그 아래의 구조와 원리를 이해해야 문제를 빠르게 해결할 수 있다는 것을 체감한 하루였습니다.
앞으로는 기능을 추가할 때마다 단순히 코드를 붙이는 것이 아니라,
각 요소의 역할과 책임을 먼저 설계하고 작업하는 습관을 가져가려 합니다.
작은 애니메이션 하나에서도 시스템적인 사고가 필요하다는 것을 배운 의미 있는 성장의 하루였습니다.
AI로 수정이 불가능해서 수기로 수정하니 배우는 점이 많은것 같습니다.