정적인 포트폴리오는 서로 비슷해 보이기 마련입니다. 모든 디자이너의 사이트는 똑같은 JPEG 그리드 형식을 가지고 있죠. 우리는 병렬적으로 성장하는 제품 포트폴리오를 출시하고 있는 스튜디오인 Inithouse의 제품 페이지를 위해 뭔가 다른 것을 원했고, 그래서 '리빙 포토(living photos)'를 실험하기 시작했습니다. 이는 정지된 이미지에 숨을 불어넣는 짧은 AI 생성 애니메이션입니다.

우리가 이를 어떻게 구현했는지, 성능에 대해 무엇을 배웠는지, 그리고 직접 구현하는 데 필요한 코드를 소개합니다.

리빙 포토(living photos)란 정확히 무엇인가

일반 사진을 업로드하면, AI 모델이 이미지의 일부가 자연스럽게 움직이는 짧은 비디오 루프(video loop)를 생성합니다. 예를 들어 머리카락이 휘날리거나, 물결이 치거나, 눈을 깜빡이는 식입니다. 결과물은 깔끔하게 반복되는 2~4초 길이의 클립입니다.

우리는 바로 이 목적을 위해 alivephoto.online을 구축했습니다. 회원가입도, 계정도 필요 없습니다. 업로드하고, 약 30초를 기다린 뒤, 다운로드하면 됩니다. 이 도구는 처리가 완료되면 사진을 삭제합니다.

1단계: 적절한 소스 사진 선택하기

모든 사진이 똑같이 잘 작동하는 것은 아닙니다. 수천 건의 업로드를 통한 테스트 결과는 다음과 같습니다:

• 인물 사진(Portraits)이 가장 효과적입니다. 얼굴, 머리카락, 의류는 모델에게 명확한 움직임 대상(motion targets)을 제공합니다.
• 질감이 있는 제품 사진. 직물, 액체, 연기, 반사광 등은 모두 설득력 있게 애니메이션화됩니다.
• 물이나 하늘이 포함된 풍경 사진. 구름, 파도, 바람에 흔들리는 나뭇잎 등입니다.
• 평면적인 그래픽은 작동하지 않습니다. 로고, 아이콘, UI 스크린샷은 아티팩트(artifacts)를 생성합니다.

포트폴리오의 히어로 섹션(hero section)을 위해서는 가장 강력한 인물 사진이나 질감이 살아있는 제품 사진을 선택하세요.

2단계: 애니메이션 생성하기

alivephoto.online에 접속하여 이미지를 드래그 앤 드롭하고 생성(generate)을 누르세요. 짧은 비디오 클립을 받게 됩니다. 이를 다운로드하세요.

실제 서비스(production) 환경에서 사용하려면 GIF가 아닌 비디오 형식(MP4/WebM)을 사용해야 합니다. 그 이유는 다음과 같습니다:

GIF는 20-40배 더 큽니다. 아무도 12 MB짜리 히어로 이미지를 원하지 않습니다.

3단계: 루핑 배경(looping background)으로 임베드하기

다음은 깔끔하고 반응형인 구현 방식입니다:

<section class="hero">
  <video
    class="hero-bg"
...

poster 속성은 비디오가 로드되는 동안 정적 프레임을 보여줍니다. <img> 대체(fallback)는 비디오가 완전히 실패하는 예외적인 경우를 처리합니다.

.hero {
  position: relative;
  overflow: hidden;
...

4단계: 모바일 기기 적절히 처리하기

모바일에서 자동 재생 비디오는 대역폭을 많이 소모합니다. 사용자에게 배려하세요:

const hero = document.querySelector('.hero-bg');

if (window.matchMedia('(max-width: 768px)').matches) {
...

대안적 접근 방식: 모든 경우에 preload="none"을 사용하고 Intersection Observer로 로드를 트리거하세요:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
...

5단계: 영향 측정하기

저희는 자체 제품 랜딩 페이지에서 A/B 테스트를 진행했습니다. AI 반려동물 초상화를 생성하는 Pet Imagination에서는 정적 히어로와 살아있는 사진(living photo) 히어로를 비교 테스트했습니다.

애니메이션 버전이 더 오래 주의를 끌었습니다. 페이지 체류 시간(Time-on-page)이 증가했습니다. 이것이 귀하의 특정 전환율에 영향을 미칠지는 레이아웃과 CTA 배치에 따라 다릅니다.

핵심은: 애니메이션이 콜투액션(call to action)에서 주의를 분산시키지 않도록 하는 것입니다. 은은한 움직임이 극적인 움직임보다 낫습니다. 사진이 너무 많이 움직여서 방문자가 콘텐츠를 읽는 대신 그것을 보는 경우, 당신은 실패한 것입니다.

우리가 본 일반적인 실수들

너무 많은 움직임. AI는 드라마틱한 효과를 만들어낼 수 있습니다. 히어로 섹션에서는 강도를 낮추세요.

생동감 넘치는 사진(Living photos)은 절제하며 사용할 때 효과적입니다. 페이지당 하나의 애니메이션 히어로 섹션(hero section)만 사용하세요. 클립은 짧게 유지하세요. WebM 형식을 제공하고 MP4를 폴백(fallback)으로 사용하세요. 모바일 사용자에게는 선택권을 주어야 합니다. 접근성 설정(accessibility preferences)을 존중하세요.

우리는 성장하는 툴 포트폴리오를 구축하고 있는 스튜디오인 Inithouse의 여러 제품에 이 기술을 사용하고 있습니다. 만약 여러분의 포트폴리오 사진으로 생동감 넘치는 사진을 생성해보고 싶다면, alivephoto.online에서 회원가입 없이 무료로 이용할 수 있습니다.

원본 사진의 소유권은 여러분에게 있습니다. 저희는 처리가 완료된 후 사진을 삭제합니다.