브랜드 모션 규칙은 3줄이면 된다: ease-out-expo와 reveal 1회 원칙

혼자 브랜드를 굴리다 보면 모션 가이드 문서는 늘 뒤로 밀려요. 만들어 놔도 안 읽고요. 그래서 규칙을 3줄로 줄였어요. 랜딩 페이지, 앱 화면, 짧은 홍보 영상까지 같은 3줄을 써요.

1줄: 이징은 하나만

제가 쓰는 값은 cubic-bezier(0.16, 1, 0.3, 1)이에요. 사이트마다 소수점이 조금 다른 버전이 돌아다니는데, 어느 쪽이든 하나를 골라 고정하는 게 핵심이에요. 시작이 빠르고 끝이 길게 늘어져서 요소가 "도착했다"는 느낌을 줘요.

직접 만들어 보니 ease-in-out과 ease-out-expo를 한 페이지에 섞었을 때 화면이 어수선했어요. 하나로 통일했더니 요소 수는 그대로인데 훨씬 차분해졌고요. 문제는 곡선의 종류가 아니라 페이지마다 곡선이 다르다는 점이더라고요.

2줄: 등장은 한 번만

스크롤할 때마다 다시 뜨는 fade-in, 한 번쯤 보셨을 거예요. 이걸 끄는 게 두 번째 줄이에요. 요소는 처음 보일 때 딱 1회 올라오고, 다시 내려와도 그 자리에 그냥 있어요.

IntersectionObserver로 한 번 보이면 unobserve()를 호출하면 끝이에요. 테스트해 보면 코드 1줄 차이인데 페이지가 "움직이는 곳"이 아니라 "정리된 곳"으로 느껴져요. 항목이 여러 개면 60ms씩만 시차를 두고, 그마저도 첫 화면 한 곳에서만 써요.

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

3줄: 길이 상한과 끄기

전환은 200~600ms 안에서만 써요. 짧은 쪽은 버튼 상태, 긴 쪽은 첫 화면 등장. 운영체제에서 "동작 줄이기"를 켠 사람에겐 전부 끄고요. 위 코드의 마지막 블록이 그 역할이에요.

적용해 봤더니 이 줄이 가장 큰 효과를 냈어요. 모션 시간이 통일되니 영상 편집 템플릿에도 같은 값을 그대로 넣을 수 있었거든요. 숏폼 자막이 올라오는 속도와 랜딩 버튼이 눌리는 속도가 같아지면, 보는 사람은 이유를 몰라도 "같은 브랜드"라고 느껴요.

왜 3줄로 충분한가

콘텐츠 운영에서 모션은 로고보다 자주 노출돼요. 랜딩 1개, 앱 화면 여러 개, 영상 수십 개. 그런데 관리하는 사람은 저 혼자예요. 규칙이 문서 한 페이지를 넘어가면 지키지 않게 되더라고요.

플랜씨처럼 로그인 없이 계산기 하나로 끝나는 페이지라면 더 그래요. 사용자는 숫자를 보러 왔지 화면이 춤추는 걸 보러 오지 않았거든요. 첫 화면에 결과가 한 번 올라오면 그걸로 충분해요.

3줄을 디자인 문서 맨 위에 적어 두고, 새 화면을 만들 때마다 그 줄만 확인해요. 돌려 보니 모션 관련 수정이 거의 사라졌어요. 규칙이 짧으니 어길 일이 없더라고요.