웹 개발에서 단순한 이미지를 넘어 생동감 있는 사용자 경험을 제공하기 위해 CSS 애니메이션은 매우 강력한 도구입니다. 이번 포스팅에서는 CSS의 position, animation, 그리고 repeating-linear-gradient 속성을 활용하여 마치 자동차가 도로 위를 달리는 듯한 패럴랙스(Parallax) 효과를 구현하는 방법을 살펴보겠습니다.

1. 애니메이션 구조 설계

이 애니메이션의 핵심은 여러 레이어를 서로 다른 속도로 움직여 입체감을 만드는 '패럴랙스 효과'에 있습니다. 요소들을 다음과 같은 계층 구조로 배치하여 깊이감을 형성합니다.

• 최상단 레이어: 자동차 (상하 미세 진동 효과)
• 중간 레이어: 도로 및 가로수 (빠른 이동)
• 하단 레이어: 구름 및 산 (느린 이동)
• 배경 레이어: 태양 및 하늘 (고정)

2. HTML 마크업 구성

의미 있는 클래스 네이밍을 통해 구조를 정의합니다. 아이콘 폰트(FontAwesome 등)를 사용하여 개별 요소들을 배치합니다.

<div class="stage">
  <div class="sun-light"></div>
  
  <!-- 배경 요소: 산 -->
  <i class="fa-solid fa-mountain" style="--d:1"></i>
  <i class="fa-solid fa-mountain" style="--d:2"></i>
  <i class="fa-solid fa-mountain" style="--d:3"></i>

  <!-- 배경 요소: 구름 -->
  <i class="fa-solid fa-cloud" style="--d:1"></i>
  <i class="fa-solid fa-cloud" style="--d:2"></i>
  <i class="fa-solid fa-cloud" style="--d:3"></i>

  <!-- 가로수 -->
  <i class="fa-solid fa-tree" style="--d:1"></i>
  <i class="fa-solid fa-tree" style="--d:2"></i>
  <i class="fa-solid fa-tree" style="--d:3"></i>

  <!-- 도로 및 주인공 차량 -->
  <div class="ground-track"></div>
  <i class="fa-solid fa-car-side principal-vehicle"></i>
</div>

3. 도로와 이동 애니메이션 구현

도로는 repeating-linear-gradient를 사용하여 점선을 표현하고, background-position을 애니메이션화하여 움직이는 효과를 줍니다.

.ground-track {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #2c3e50;
  z-index: 5;
}

/* 잔디 상단 라인 */
.ground-track::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 12px;
  background: #27ae60;
}

/* 도로 중앙 점선 구현 */
.ground-track::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 25px,
    #ecf0f1 25px,
    #ecf0f1 50px
  );
  animation: trackScroll 0.4s linear infinite;
}

@keyframes trackScroll {
  from { background-position-x: 0; }
  to { background-position-x: -50px; }
}

4. 자동차 엔진 진동 효과

자동차가 고정된 위치에서 달리는 것처럼 보이게 하기 위해 미세하게 위아래로 흔들리는 애니메이션을 적용합니다.

.principal-vehicle {
  position: absolute;
  bottom: 35px;
  left: 50px;
  font-size: 4em;
  color: #e74c3c;
  -webkit-text-stroke: 1px #000;
  z-index: 15;
  animation: vehicleVibration 0.15s ease-in-out infinite;
}

@keyframes vehicleVibration {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

5. 배경 요소의 패럴랙스 처리

산, 나무, 구름은 동일한 이동 애니메이션을 공유하되, animation-duration과 animation-delay를 다르게 설정하여 속도 차이를 만듭니다. CSS 변수(--d)를 활용하여 각 요소의 타이밍을 제어합니다.

/* 공통 이동 애니메이션 */
@keyframes slideFlow {
  from { transform: translateX(500px); }
  to { transform: translateX(-500px); }
}

.fa-mountain {
  position: absolute;
  bottom: 20px;
  font-size: 12em;
  color: #7f8c8d;
  z-index: 1;
  animation: slideFlow 20s linear infinite;
  animation-delay: calc(-5s * var(--d));
}

.fa-tree {
  position: absolute;
  bottom: 80px;
  font-size: 2.5em;
  color: #2ecc71;
  z-index: 4;
  animation: slideFlow 6s linear infinite;
  animation-delay: calc(-1.5s * var(--d));
}

.fa-cloud {
  position: absolute;
  top: calc(30px * var(--d));
  font-size: 3em;
  color: #fff;
  opacity: 0.8;
  animation: slideFlow 12s linear infinite;
  animation-delay: calc(-3s * var(--d));
}

6. 태양 효과 연출

box-shadow의 다중 레이어를 사용하여 부드럽게 퍼지는 빛 효과를 구현합니다.

.sun-light {
  position: absolute;
  top: 50px;
  right: 60px;
  width: 50px;
  height: 50px;
  background: #f1c40f;
  border-radius: 50%;
  box-shadow: 
    0 0 30px #f39c12, 
    0 0 60px #f39c12, 
    0 0 90px #e67e22;
}