CSS만으로 무한 반복되는 도시 일러스트레이션을 pixel 단위와 gradient 조합으로 구현한 기록

Context

기존 CSS Art는 일반적으로 작은 크기와 responsive한 특성을 가진다. 이미지와 SVG 없는 순수 CSS로 거대한 도시 풍경을 표현하려면 새로운 접근이 필요하다.

Technical Solution

• :root 단일 요소에 radial, linear, conic, repeating gradient를 조합하여 건물, 나무, 벽돌 등 도시 구성 요소 구현
• 상대 단위(vmin, em) 대신 pixel 단위의 절대 좌표 사용하여 요소 간 정밀한 정렬 확보
• background-size와 background-position 조작으로 무한 반복 패턴 생성
• traffic light 동작, 분수 물 흐름, 조명 깜빡임 등 기본 animation 구현
• ::before/::after pseudo-element 사용은 성능 저하 유발으로 인해 배제하고 :root 단일 요소에 집중

Impact

::before/::after pseudo-element 추가 시 animation 성능이 상당히 저하되어 적용하지 않기로 결정함

Key Takeaway

CSS 단일 요소와 gradient 조합만으로도 복잡한 비주얼 표현이 가능하며, pixel 단위 절대 좌표와 배경 반복 기법으로 무한 확장이 가능한 설계 원칙 확인 가능