결론부터: 툴의 뼈대(템플릿 시스템, GSAP 타임라인, 캔버스 배경, 코드 내보내기)는 잘 만들어져 있고, 문제는 세 가지 구체적인 지점에 있습니다. 아키텍처를 갈아엎을 필요는 없습니다.
1. 간판 효과인 '선 그리기'가 실제 로고 SVG에서 아예 동작하지 않습니다. 에서 모든 도형에 strokeDasharray/strokeDashoffset을 걸지만, 이 기법은 stroke가 있는 도형에만 보입니다. 실무에서 쓰는 로고 SVG는 거의 전부 fill만 있는 path라서, dashoffset을 아무리 움직여도 화면상 변화가 없습니다. 결과적으로 Minimal Outline 템플릿은 "로고가 0.12초 만에 그냥 뿅 나타나고 글로우만 살짝" — 사용자가 기대한 것과 전혀 다른 그림이 됩니다. Videobolt류 툴이 쓰는 표준 해법은: path를 복제해서 fill: transparent + stroke: 강조색으로 바꾼 사본으로 선을 그린 뒤, 원본 fill로 크로스페이드하는 방식입니다.
2. 씬에 '연출 레이어'가 없습니다. 참고하신 Clean Logo Reveal의 완성도는 로고 등장 자체가 아니라 그 위에 얹히는 것들에서 나옵니다 — 기울어진 라이트 스윕, 렌즈 플레어, 비네트, 바닥 반사, 그리고 전체 화면이 미세하게 줌아웃되는 카메라 무브. 지금 스테이지 DOM은 canvas + 로고 + 제목 + 부제 4개뿐이라() 어떤 템플릿도 스윕이나 플레어를 만들 수가 없고, 캔버스 배경 효과는 알파값이 0.03~0.07이라 사실상 안 보입니다. "밋밋하다"고 느끼신 가장 큰 이유가 여기입니다.
3. 연출 리듬이 없습니다. 다섯 템플릿 모두 "요소들이 0~70% 구간에서 power2.out으로 순서대로 페이드인" 구조입니다. 이건 UI 트랜지션이지 모션 디자인이 아닙니다. 레퍼런스급은 정지(기대감) → 임팩트 → 정착 → 광택 스윕(보상) → 홀드의 리듬이 있고, 글로우도 drop-shadow 하나가 아니라 여러 겹으로 쌓습니다.
부수적으로 발견한 버그 두 개: 의 clearProps:'all'이 로고 크기 슬라이더로 설정한 logoWrap.style.width까지 지워서 재생할 때마다 로고 크기가 리셋되고, power-impact의 충격파 링이 setTimeout 기반이라 타임라인과 어긋날 수 있습니다.
제안하는 방향 — 갈아엎기가 아니라 3단계 보강입니다:
- 스테이지에 FX 오버레이 레이어(스윕 띠, 플레어, 비네트, 반사)를 추가하고 템플릿이 가져다 쓰게 함
- fill 로고 대응 draw-on 변환(스트로크 사본 → fill 크로스페이드) 유틸 추가
- 템플릿 1~2개를 "Clean Reveal" 5단계 연출로 재작성 + 카메라 무브
댓글 0