소개
초등학교 6학년 아들의 사진 폴더를 열었습니다. 그냥 쌓여 있는 파일 더미였는데, 정리하다가 한 가지를 알게 됐습니다. 아이가 지금 잘하는 것들이 갑자기 생긴 게 아니라 아주 어릴 때 사진에도 전부 들어 있더라는 것.
그래서 목표를 이렇게 잡았습니다. 칭찬하는 앨범이 아니라 증거를 보여주는 앨범. 다정함, 잘 웃는 것, 겁나도 해보는 것, 끝까지 하는 것 — 네 가지를 연대기로 배치하고, 각 장면마다 "그때 이미 그랬다"는 증거 사진을 붙였습니다.
클로드로 디자인을 만드는 일 자체에 두려움이 있었는데, 이번엔 그냥 해봤습니다.
진행 방법
도구 — Claude(Cowork) + 사진 폴더 + HTML 단일 파일 슬라이드(1920×1080 고정)
작업 순서
사진 폴더를 연대기순으로 정리하고, 시기별로 "이 사진이 증명하는 것"을 한 줄씩 붙여 스토리 가이드를 먼저 만들었습니다. 디자인보다 이게 먼저입니다.
스토리를 4막으로 나눴습니다. 제1막 원래 그랬다(유아기) → 제2막 함께 가는 사이(2024 여행) → 제3막 해본다(2025) → 제4막 열두 살의 증명(2026).
연도가 바뀌는 구간에 오도미터(숫자 굴림) 모션을 넣기 위해 아래 프롬프트를 그대로 투입했습니다.
사용한 프롬프트 전문
1920×1080 고정 슬라이드 HTML을 만들어줘. 년도 오도미터 모핑:
[구조]
- 4자리 숫자. 각 자리는 width 고정 + overflow:hidden 창.
창 안에 0~9를 세로로 반복한 스트립을 두고 transform:translate3d 로만 이동.
- 이미지는 왼쪽 창(overflow:hidden) 안에 z-index 역순으로 겹쳐 쌓고,
다음 장으로 갈 때 맨 위 레이어만 translateX(-100%) 로 밀어낸다.
들어오는 이미지는 절대 움직이지 않는다.
- 캡션은 위치 이동 없이 opacity 만.
[모션 규칙 — 반드시 지킬 것]
- 숫자는 최단거리가 아니라 항상 앞으로만 굴린다: (target-cur+10)%10
- 네 자리가 동시 출발/동시 도착. 스태거 금지.
- 숫자 680ms / 이미지 460ms / 캡션 260ms, 모두 같은 시점 시작
- easing: cubic-bezier(0.25, 0.2, 0.35, 0.65)
- 년도 유지 1050ms
- font-size나 width는 절대 transition 하지 말 것 (transform 전용)
- prefers-reduced-motion 대응 포함프롬프트를 짧게 설명하면 이렇습니다. "무엇을 넣어달라"가 아니라 "무엇을 하지 말라"를 숫자로 못 박은 것이 전부입니다. 스태거 금지, font-size 트랜지션 금지, 들어오는 이미지는 고정. 금지 조항 세 줄이 결과물의 안정성을 거의 다 만들었습니다.
사진 29장, 슬라이드 20여 장, 마지막은 아이가 직접 채울 빈 프레임으로 닫았습니다.
결과와 배운 점
가장 만족스러웠던 것은 가독성이었습니다. 모션이 화려해서가 아니라, 움직이는 요소를 딱 하나로 줄여서 그렇습니다. 숫자가 굴러갈 때 이미지는 멈춰 있고, 캡션은 자리를 옮기지 않고 밝기만 바뀝니다. 시선이 한 번에 한 군데만 갑니다.
시행착오 세 가지
첫째, 처음엔 숫자를 최단거리로 굴렸더니 어떤 자리는 위로, 어떤 자리는 아래로 움직여서 시선이 흩어졌습니다. (target-cur+10)%10으로 항상 앞으로만 굴리게 하니 그제야 "달력이 넘어가는" 느낌이 났습니다.
둘째, font-size를 트랜지션했더니 글자가 미세하게 떨렸습니다. 크기 변화는 전부 transform: scale로 바꿔야 합니다.
셋째, CSS Grid로 카드 전환을 짰더니 애니메이션이 아예 생기지 않았습니다. absolute + px 값으로 직접 움직이는 방식으로 바꿔서 해결했습니다.
꿀팁 하나 — 스토리 가이드를 먼저 쓰고 디자인을 나중에 하는 순서. 사진을 시간순으로 나열한 것과, "이 사진이 무엇을 증명하는가"를 한 줄씩 붙여둔 것은 결과물이 완전히 다릅니다. 후자로 해야 모션이 장식이 아니라 문장 부호가 됩니다.
그리고 솔직한 후기 — 다 만들어놓고 혼자 보다가 눈물이 찔끔 났는데, 정작 아들은 "이걸 왜 보내?"라고 했습니다. 좀 속상했습니다. 그래도 언젠가 한 번은 다시 열어볼 거라 생각하고 남겨둡니다.
앞으로 — 클로드 디자인은 무섭다고만 생각했는데 몇 번 시도해보니 그렇지 않았습니다. 수업을 들으면서 PPT 활용 퀄리티가 눈에 띄게 올라가는 게 느껴져서, 이 모션 토큰 세트를 강의안·컨설팅 보고서 슬라 이드에도 그대로 옮겨볼 생각입니다.
도움이 필요한 부분 — 어떻게 하면 더 고도화를 할 수 있을까? 그 고민이 생겼습니다
두 명의 한국 어린이가 테이블에 앉아 있다
벤치에 앉아 있는 남자의 사진이 실린 한국 잡지
