뉴스 정보 뉴스 컴퓨터 소프트웨어 및 개발 Min-jun (민준) 10월 23, 2025 0 Comments

실제 적용(2부) — Smashing Magazine

모션은 까다로울 수 있습니다. 너무 많으면 주의가 산만해지고, 너무 적으면 밋밋한 느낌이 듭니다. 주변 애니메이션이 중간에 있습니다. 쇼를 방해하지 않으면서 분위기를 더해주는 미묘하고 느리게 움직이는 디테일입니다. 시리즈 2부에서는 웹 디자인의 선구자인 Andy Clarke가 주변 애니메이션이 웹사이트 디자인에 개성을 더할 수 있는 방법을 보여줍니다.

먼저 요약하면 다음과 같습니다.

주변 애니메이션은 처음에는 눈치채지 못할 수도 있는 일종의 수동적 움직임입니다. 하지만 그들은 미묘한 방식으로 디자인에 생명을 불어넣습니다. 요소는 색상 간에 미묘하게 전환되거나, 천천히 움직이거나, 점진적으로 위치가 바뀔 수 있습니다. 요소는 나타나고 사라지고, 크기가 변경되거나, 천천히 회전하여 브랜드의 개성에 깊이를 더할 수 있습니다.

1부에서는 Quick Draw McGraw 만화책의 표지를 CSS/SVG 애니메이션으로 재현하여 주변 애니메이션의 개념을 설명했습니다. 하지만 모든 사람이 만화 캐릭터에 애니메이션을 적용할 필요는 없다는 것을 알고 있으므로 2부에서는 Reuven Herman, Mike Worth 및 EPD라는 세 가지 매우 다른 프로젝트에서 주변 애니메이션이 어떻게 작동하는지 공유하겠습니다. 각각은 모션이 어떻게 할 수 있는지를 보여줍니다. 브랜드 아이덴티티를 강화하다, 성격그리고 스토리텔링 페이지를 장악하지 않고.

루벤 허먼

로스앤젤레스에서 활동하는 작곡가 Reuven Herman은 자신의 작품을 소개하는 웹사이트만을 원하지 않았습니다. 그는 자신의 성격과 고객이 그와 함께 일할 때 경험한 경험을 전달하기를 원했습니다. 음악가들과 함께 일하는 것은 항상 창의적으로 자극을 줍니다. 그들은 비판적이고 참여적이며 아이디어가 가득합니다.

LA 기반 작곡가 Reuven Herman의 디자인 — LA 기반 작곡가 Reuven Herman을 위한 디자인. (큰 미리보기)

Reuven의 클래식과 재즈 배경은 나에게 앨범 커버 디자이너 Alex Steinweiss의 작업을 생각나게 했습니다.

나는 Alex가 2,500개가 넘는 독특한 표지 디자인에 가져온 깊이와 질감에서 영감을 얻었으며 그의 기술을 Reuven의 일러스트레이션에 통합하고 싶었습니다.

Reuven Herman의 일러스트레이션 — Reuven Herman을 위한 내 일러스트레이션 두 개. (큰 미리보기)

Reuven의 일러스트레이션에 생명을 불어넣기 위해 저는 몇 가지 핵심 주변 애니메이션 원칙을 따랐습니다.

애니메이션 유지 느린 그리고 매끄러운.
원활하게 반복 그리고 급격한 변화는 피하세요.
사용 레이어링 복잡성을 구축합니다.
주의가 산만해지지 않도록 하세요.
고려하다 접근성 그리고 성능.

내 연구실에서 이 주변 애니메이션을 볼 수 있습니다. Reuven 사이트의 경우:

악보 통선은 물결 모양 상태와 직선 상태 사이에서 변형됩니다.
시차와 같은 깊이를 만들기 위해 음표가 다양한 속도로 표류합니다.
피아노 건반이 떠 있는 것처럼 보입니다.

첫 번째 단계는 항상 한 번에 하나의 요소 세트를 내보내고 최적화하여 애니메이션용 SVG를 최적화하는 것입니다. 항상 최종 파일에 표시되는 순서대로 마스터 SVG를 점진적으로 구축합니다. 배경에서 앞으로 작업하면서 먼저 물결 모양 상태의 악보 오선을 내보냈습니다.

…그들의 직선 상태가 이어집니다:

내 애니메이션의 첫 번째 단계는 상태 사이의 오선을 변형하는 것입니다. 다양한 색상의 획이 있는 6개의 경로로 구성됩니다. 나는 물결 모양의 선으로 시작했습니다.

이제 CSS는 경로 지점 간 애니메이션을 활성화하지만 각 상태의 지점 수는 일치해야 합니다. GSAP에는 그러한 제한이 없으며 포인트 수가 다른 상태 간에 애니메이션을 적용할 수 있으므로 이러한 유형의 애니메이션에 이상적입니다. 나는 새로운 직선 경로 세트를 정의했습니다.


const Waves = {
  p1: "[…]",
  p2: "[…]",
  p3: "[…]",
  p4: "[…]",
  p5: "[…]",
  p6: "[…]"
};

그런 다음 6초 동안 앞뒤로 반복되는 GSAP 타임라인을 만들었습니다.

const waveTimeline = gsap.timeline({
  repeat: -1,
  yoyo: true,
  defaults: { duration: 6, ease: "sine.inOut" }
});

Object.entries(Waves).forEach(([id, d]) => {
  waveTimeline.to(`#${id}`, { morphSVG: d }, 0);
});

또 다른 주변 애니메이션 원칙은 레이어링을 사용하여 복잡성을 구축하는 것입니다. 사운드 믹스를 구축하는 것과 같다고 생각하세요. 리듬, 톤, 타이밍의 변화를 원합니다. 내 애니메이션에서는 세 줄의 음표가 서로 다른 속도로 움직입니다.

각 행의 애니메이션 지속 시간은 GSAP를 사용하여 정의됩니다. 100 에게 400 전체 애니메이션에 시차 스타일 효과를 부여하는 데 초가 소요됩니다.

const noteRows = [
  { id: "#notes-row-1", duration: 300, y: 100 }, // slowest
  { id: "#notes-row-2", duration: 200, y: 250 }, // medium
  { id: "#notes-row-3", duration: 100, y: 400 }  // fastest
];

[…]

다음 레이어에는 중심을 중심으로 천천히 회전하는 피아노 건반에 의해 투사되는 그림자가 포함되어 있습니다.

gsap.to("shadow", {
  y: -10,
  rotation: -2,
  transformOrigin: "50% 50%",
  duration: 3,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});

마지막으로, 동시에 회전하지만 그림자와 반대 방향으로 회전하는 피아노 건반 자체는 다음과 같습니다.

gsap.to("#g3-keys", {
  y: 10,
  rotation: 2,
  transformOrigin: "50% 50%",
  duration: 3,
  ease: "sine.inOut",
  yoyo: true,
  repeat: -1
});

전체 애니메이션은 내 연구실에서 볼 수 있습니다. 모션을 세심하게 레이어링함으로써 사이트가 콘텐츠를 지배하지 않으면서도 살아있는 느낌을 주는 것은 루벤의 에너지와 완벽하게 일치합니다.

마이크 워스

앞서 언급했듯이 모든 사람이 만화 캐릭터를 애니메이션화할 필요는 없지만 가끔씩 그렇게 합니다. Mike Worth는 에미상을 수상한 영화, 비디오 게임, TV 작곡가로서 나에게 자신의 웹사이트 디자인을 요청했습니다. 이 프로젝트를 위해 저는 오랑우탄 모험가 오랑고 존스(Orango Jones)의 캐릭터를 만들고 일러스트레이션했습니다.

Orango는 Mike 웹사이트의 모든 페이지에서 주변 애니메이션과 기능을 위한 완벽한 주제임이 입증되었습니다. 그는 독자를 모험 속으로 데려가며 그 과정에서 독자는 Mike의 음악을 경험하게 됩니다.

마이크 워스(Mike Worth)를 위한 일러스트레이션 — Mike Worth를 위한 또 다른 일러스트레이션입니다. (큰 미리보기)

Mike의 “정보” 페이지에서는 주변 애니메이션과 상호 작용을 결합하고 싶었습니다. Orango는 Mike의 웹사이트의 다른 곳으로 이동하는 데 도움이 되는 희미한 표시가 있는 석판을 발견한 동굴에 있습니다. 그림에는 누군가가 오랑고의 돋보기를 누르면 빛의 흐름이 동굴과 태블릿 위로 이동하는 것처럼 숨겨진 기능인 부활절 달걀이 포함되어 있습니다.

내 SVG는 의도적으로 구조화되어 있으며 뒤에서 앞으로 동굴, 광선, 오랑고 및 탐색 기능이 포함되어 있습니다.

또한 Orango의 돋보기 위에 배치한 숨겨진 원 주위에 앵커를 추가하여 조명 샤프트를 켜고 끄는 큰 탭 대상으로 추가했습니다. data-lights SVG의 값:

그런 다음 CSS에 하위 항목 선택기 두 개를 추가했습니다. data-lights 값:

[data-lights="lights-off"] .light-shaft {
  opacity: .05;
  transition: opacity .25s linear;
}

[data-lights="lights-on"] .light-shaft {
  opacity: .25;
  transition: opacity .25s linear;
}

느리고 미묘한 회전은 조명 샤프트에 자연스러운 움직임을 추가합니다.

@keyframes shaft-rotate {
  0% { rotate: 2deg; }
  50% { rotate: -2deg; }
  100% { rotate: 2deg; }
}

조명 토글이 활성화된 경우에만 표시됩니다.

[data-lights="lights-on"] .light-shaft {
  animation: shaft-rotate 20s infinite;
  transform-origin: 100% 0;
}

절연된 가벼운 샤프트 — 가벼운 샤프트가 분리되었습니다. (큰 미리보기)

주변 애니메이션을 개발할 때 성능을 고려하는 것이 중요합니다. CSS 애니메이션이 가볍더라도 흐림 필터 및 그림자와 같은 기능은 여전히 저전력 장치에 부담을 줄 수 있기 때문입니다. 접근성을 고려하는 것도 중요하므로 다른 사람의 의견을 존중하세요. prefers-reduced-motion 환경설정:

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

애니메이션 기능이 순전히 장식적인 경우 추가하는 것을 고려하세요. aria-hidden="true" 접근성 트리가 복잡해지지 않도록 하려면 다음을 수행하세요.


  […]

Mike의 Orango Jones를 사용하면 주변 애니메이션이 미묘한 분위기에서 재미있는 스토리텔링으로 전환됩니다. 가벼운 샤프트와 부드러운 상호 작용은 초점을 잃지 않으면서 디자인에 내러티브를 엮어 애니메이션이 브랜드 아이덴티티와 사용자 경험을 모두 지원할 수 있음을 입증합니다. 내 연구실에서 이 애니메이션을 보세요.

EPD

EPD는 작곡가에서 벗어나 부동산 투자회사다. 그들은 나에게 새로운 웹사이트를 위한 창의적인 컨셉을 디자인하도록 의뢰했습니다. 부동산 투자 회사를 빠르게 검색하면 일반적으로 상호 교환 가능한 웹 사이트 디자인에 압도당하게 됩니다. 여기에는 일반적인 도시 스카이라인의 빛바랜 스톡 사진이나 다양한 인종의 사람들이 악수하는 전폭 배너가 포함됩니다.

EPD의 경우 회사가 소유할 수 있는 독특한 시각적 스타일을 개발하고 싶었기 때문에 EPD의 브랜드와 글로벌 포트폴리오를 모두 반영하는 그래픽적이고 스타일화된 스카이라인을 제안했습니다. 회사의 로고마크를 연상시키는 다양한 크기의 원을 이용하여 만들어 보았습니다.

부동산 투자회사를 위한 디자인 — 부동산 투자 회사 EPD를 위한 나의 디자인. (큰 미리보기)

주변 애니메이션의 요점은 그것이 지배적이지 않다는 것입니다. 이는 배경 요소이지 행동 촉구가 아닙니다. 누군가의 눈이 끌린다면 너무 과할 수도 있으므로, 실제로 보고 있어야만 알 수 있을 것 같은 느낌이 들 때까지 애니메이션을 되돌립니다. 저는 두바이, 런던, 맨체스터 등 세 가지 스카이라인 디자인을 만들었습니다.

맨체스터와 런던의 스카이라인을 보여주는 삽화 — 맨체스터와 런던. EPD용 일러스트레이션 두 개. (큰 미리보기)

이러한 각 주변 애니메이션에서는 바퀴가 회전하고 큰 원의 색상이 무작위 간격으로 변경됩니다.

이 그림을 애니메이션에 맞게 최적화하기 위해 바퀴를 제외한 모든 요소가 포함된 기본 경로를 내보냈습니다.


  
  
  […]

다음으로 다음을 포함하는 레이어를 내보냈습니다. circle 색상을 변경하고 싶은 요소입니다.


  
  
  
  […]

맨체스터 그림에서 무작위로 보이는 원 — 내 맨체스터 그림에 무작위로 보이는 원이 있습니다. (큰 미리보기)

다시 한 번 GSAP를 사용하여 스카이라인을 가로질러 빛처럼 깜박이는 원 그룹을 선택했습니다.

function animateRandomDots() {
  const circles = gsap.utils.toArray("#banner-dots circle")
  const numberToAnimate = gsap.utils.random(3, 6, 1)
  const selected = gsap.utils.shuffle(circles).slice(0, numberToAnimate)
}

그런 다음 2초 간격으로 fill 해당 원의 색상은 청록색 액센트에서 내 그림의 나머지 부분과 동일한 황백색으로 변경됩니다.

gsap.to(selected, {
  fill: "color(display-p3 .439 .761 .733)",
  duration: 0.3,
  stagger: 0.05,
  onComplete: () => {
    gsap.to(selected, {
      fill: "color(display-p3 .949 .949 .949)",
      duration: 0.5,
      delay: 2
    })
  }
})

gsap.delayedCall(gsap.utils.random(1, 3), animateRandomDots) }
animateRandomDots()

그 결과 도시 자체가 살아있는 것처럼 부드럽게 깜박이는 스카이라인이 탄생했습니다. 드디어 바퀴를 돌렸습니다. 여기서는 CSS를 사용하면 가능하므로 GSAP를 사용할 필요는 없습니다. rotate 홀로:

맨체스터 그림의 회전 바퀴 — 내 맨체스터 그림에서 바퀴를 회전합니다. (큰 미리보기)


#banner-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotateWheel 30s linear infinite;
}

@keyframes rotateWheel {
  to { transform: rotate(360deg); }
}

CSS 애니메이션은 가볍고 페이드 및 회전과 같은 단순하고 반복적인 효과에 이상적입니다. 구현하기 쉽고 라이브러리가 필요하지 않습니다. 반면 GSAP는 경로 모핑 및 시퀀스 타임라인을 처리할 수 있으므로 훨씬 더 많은 제어 기능을 제공합니다. 어떤 것을 사용할지는 나에게 필요한지 여부에 따라 달라집니다. GSAP의 정밀도 또는 CSS의 단순성.

바퀴를 계속 돌리고 원이 빛나게 함으로써 스카이라인 애니메이션은 배경에 머물면서도 디자인에 독특한 느낌을 줍니다. 이는 EPD의 브랜드 아이덴티티를 강화하는 동시에 스톡 사진의 진부한 표현을 피하고 부동산 투자와 같은 보수적인 분야에서도 주변 애니메이션이 메시지를 손상시키지 않으면서 분위기를 더할 수 있다는 증거입니다.

마무리

Reuven의 음악적 질감부터 Mike의 내러티브 중심 Orango Jones 및 EPD의 빛나는 스카이라인에 이르기까지 이 프로젝트는 어떻게 주변 애니메이션 상황에 맞게 조정됩니다. 때로는 표류하는 음표나 회전하는 바퀴처럼 순전히 대기적인 느낌을 주기도 합니다. 다른 때에는 상호작용과 원활하게 조화를 이루어 방해받지 않고 호기심을 충족시킵니다.

작곡가의 즉흥 연주를 반영하든, 재미있는 서술 장치로 사용하든, 보수적인 산업에 미묘한 차이를 추가하든, 동일한 원칙이 적용됩니다.