선이 그려지고, 단계가 나타납니다.

저는 모션을 맡고 있지만, 타임라인 작업을 할 때마다 느낍니다. 이건 절대 혼자 만드는 게 아닙니다. 단계가 잘못 쪼개져 있으면 아무리 예쁘게 그려도 헷갈리고, 정렬이 어긋나 있으면 선을 그려봤자 어수선합니다. 좋은 타임라인은 기획이 순서를 정하고, 레이아웃이 그 순서를 한 줄에 앉히고, 모션이 그 줄에 시간을 입히는 합작입니다.

왜 ‘과정을 보여주는 것’이 신뢰를 만들까요?

견적을 받고 나서 한참 연락이 없으면 사람은 불안해집니다. 일이 멈춘 건지, 잘 가고 있는 건지 알 수가 없으니까요. 타임라인은 그 불안을 ‘예측가능성’으로 바꿉니다. 전체가 다섯 단계라는 걸 보여주고, 지금 두 번째라는 걸 알려주면, 남은 길이 보입니다. 신뢰는 결과가 아니라 과정이 보일 때 생깁니다.

그래서, 직접 스크롤해 보세요

말로 설명하는 것보다 빠릅니다. 아래 위젯이 화면에 들어오면 선이 왼쪽에서 오른쪽으로 그려지고, 단계가 하나씩 등장합니다.

선은 어떻게 ‘그려지는’ 걸까요?

마법처럼 보이지만 원리는 단순합니다. SVG 선에 pathLength="1"을 줘서 길이를 1로 정규화하고, stroke-dasharray와 stroke-dashoffset을 둘 다 1로 둡니다. 그러면 선이 화면 밖으로 밀려나 안 보입니다. 스크롤로 위젯이 들어오는 순간 dashoffset을 0으로 줄이면, 가려졌던 선이 처음부터 끝까지 ‘그려지듯’ 나타납니다. 손으로 펜을 끄는 그 느낌이요.

단계는 왜 ‘동시에’가 아니라 ‘하나씩’ 나올까요?

여기가 모션의 의도입니다. 다섯 단계를 한 번에 띄우면 그냥 ‘목록’입니다. 60~120ms 간격으로 차례차례 등장시키면(이걸 스태거라고 합니다) 단계가 순서대로 ‘쌓이는’ 느낌이 생깁니다. 그 짧은 시간차가 ‘이건 과정이다’라는 의미를 눈에 새깁니다. 정보의 순서를 시간의 순서로 번역하는 거죠.

이 위젯에는 누구의 손이 들어갔나요?

세 사람입니다. 기획은 “진단→설계→제작→검증→운영” 다섯 단계로 일을 쪼갰습니다(왜 다섯인지, 무엇을 합치고 무엇을 나눌지가 기획의 판단입니다). 레이아웃은 그 다섯을 한 직선 위에 균등하게 앉히고, 모바일에서 줄이 무너지지 않게 정렬을 잡았습니다. 모션은 그 위에 드로우와 스태거로 시간을 입혔습니다. 하나라도 빠지면 어색해집니다.

성능은 괜찮나요?

가볍습니다. 선 그리기는 stroke-dashoffset, 단계 등장은 transform과 opacity만 바꿉니다. 이 속성들은 브라우저가 레이아웃을 다시 계산하지 않고 GPU에서 처리해서 60fps를 유지합니다. 외부 애니메이션 라이브러리도 쓰지 않습니다. 위 위젯이 지금 이 페이지에서 가볍게 도는 이유입니다.

움직임을 싫어하는 사람은요?

저는 항상 prefers-reduced-motion을 챙깁니다. 이 설정을 켠 사용자에게는 드로우와 스태거를 끄고, 선과 단계를 처음부터 완성된 상태로 보여줍니다. 전달하려는 정보(이 일은 다섯 단계로 진행된다)는 똑같이 전해지고, 어지러움은 생기지 않습니다. 멋과 배려는 같이 갑니다.

한 컷의 그림이, 한 단락의 설명을 이깁니다

“저희는 진단부터 운영까지 다섯 단계로 진행합니다”라는 문장을 읽는 것과, 그 다섯 단계가 선을 따라 차례로 켜지는 걸 보는 것은 전혀 다른 경험입니다. 후자가 더 빨리 이해되고, 더 오래 기억됩니다. 그게 구조와 모션을 함께 다루는 이유입니다.

이 한 줄 위에, 누구의 판단이 겹쳐 있나요?

저는 모션을 맡았지만, 타임라인 작업에서 제 일은 가장 마지막입니다. 그 앞에 기획과 레이아웃의 판단이 먼저 깔려 있어야 제가 시간을 입힐 수 있죠. 누가 무엇을 결정했고, 그게 화면에서 어떻게 보이는지 한 표로 풀어 봤습니다.

표의 위에서 아래로 일이 흐릅니다. 기획이 순서를 못 잡으면 제가 아무리 예쁘게 그려도 헷갈리고, 레이아웃이 어긋나면 드로우가 어수선해집니다.

그리고 그 '선이 그려지는' 마법은 무거운 라이브러리가 아니라, SVG가 원래 가진 속성 몇 개로 끝납니다. 이 타임라인을 구동하는 기술을 그대로 적어 둡니다.

전부 브라우저 기본 기능입니다. 손으로 펜을 끄는 듯한 그 드로우가, 사실은 dashoffset 숫자 하나를 1에서 0으로 줄이는 일이라는 게 늘 재밌습니다.

이 작품에 들어간 기술

이 타임라인은 세 파트의 합작입니다. 각 파트가 단독으로 어떻게 일하는지는 아래 글에 1인칭으로 적어 두었습니다.

• 기획 · 단계 설계 — 일을 어떻게 단계로 쪼개고 순서를 정하는가. 기획 담당자의 노트 →
• 레이아웃 · 정렬 — 단계를 한 줄 위에 균등하게 앉히고 반응형으로 지키는 법. 레이아웃 담당자의 노트 →
• 모션 · 드로우·스태거 — 선을 그리고 단계에 시간을 입히는 법. 모션 담당자의 노트 →

항목	문단으로 설명	타임라인으로 시각화
이해	읽고 머릿속에서 순서 재구성	선을 따라 순서가 눈에 보임
신뢰	“잘 되겠지” 추측	전체·현위치가 보여 예측가능
기억	문장은 금세 흐려짐	한 컷의 그림으로 더 오래 남음