로고를 이용한 로딩 모션 적용 정리
로고를 이용한 로딩 모션 적용 정리
0. 작업 목표
- 목적: 기존 로고를 그대로 활용하면서, 로딩 상태를 직관적으로 보여주는 모션을 구성.
- 조건: 로고 형태를 해치지 않고, 반복 재생 시 이질감이 없는 흐름으로 구현.
- 결과: 정적 로고 + SVG 트레이스 애니메이션을 결합한 2초 주기 로딩 컴포넌트 완성.
1. 구성 방식 한눈에 보기
| 구분 | 적용 방식 | 의도 |
|---|---|---|
| 로고 소스 | AIONCLOUD_Logo-1.svg, -2.svg, -3.svg 분리 사용 | 원본 자산 유지 + 파츠 단위 배치 |
| 레이아웃 | inline-flex + 우측 컬럼 구조 | 메인 심볼/보조 심볼 정렬 제어 |
| 모션 레이어 | 절대 배치 SVG(MotionLayer) 오버레이 | 기존 로고 위에 경로 애니메이션만 추가 |
| 트레이스 표현 | stroke-dasharray + stroke-dashoffset 키프레임 | "선이 흘러가는" 로딩 느낌 구현 |
| 반복 주기 | 2s ~ 2.1s 무한 반복 | 과도한 속도감 없이 지속 가능한 로딩 |
2. 구현 핵심 포인트
2.1 로고 파츠를 먼저 고정 배치
- 메인 심볼(
MainMark)과 보조 심볼(AccentTop,AccentBottom)을 먼저 배치해서 기본 로고 형태를 완성. - 보조 심볼은 우측 컬럼에 세로 정렬하고
gap,translateY로 시각적인 균형을 맞춤. - 모든 크기는 스케일 변수(
s = 0.75)를 기준으로 계산해서, 전체 크기 조정 시 유지보수가 쉬운 구조로 정리.
2.2 경로는 "기준선"과 "애니메이션 선"을 분리
BasePath: 옅은 색으로 고정 경로를 깔아서 전체 이동 구간을 먼저 인지되게 처리.TracePath: 같은 경로 위에 진한 색 선을 겹치고, dash 애니메이션으로 이동감을 부여.- 기준선/애니메이션 선을 분리해두면 색상, 두께, 속도 튜닝이 독립적으로 가능.
2.3 SVG Path를 이용한 순환 로딩
tracePath를 별도 path로 정의하고,stroke-dasharray를 길게 주어 "일부 구간만 보이는 선" 형태를 만듦.traceFlow키프레임에서stroke-dashoffset: 273 -> 0으로 이동시켜 경로를 따라 선이 흐르는 효과를 구현.- 애니메이션은
linear infinite로 설정해 끊김 없는 반복 재생을 유지.
2.4 useId로 path 참조 충돌 방지
- 컴포넌트 내부에서
useId()로 path id를 생성하고<mpath href={#${pathId}}>형태로 참조. - 동일 컴포넌트가 여러 번 렌더될 때 id 중복 문제를 피할 수 있어, 재사용성 측면에서 안정적.
3. 적용 코드에서 본 체크 포인트
- 로고 이미지 src 처리 시
string/object(src)케이스를 모두 대응해 번들러 차이를 흡수. - 모션 SVG는
pointer-events: none으로 설정해 UI 인터랙션 방해를 차단. viewBox와 실제 렌더 크기(width,height)를 분리해, 좌표계와 표시 크기를 독립 제어.TraceHead(circle +animateMotion)는 현재 숨김 처리되어 있어, 필요 시 헤드 포인트 강조용으로 즉시 확장 가능.
4. 작업하면서 정리한 점
- 로딩 모션은 "새 요소를 많이 추가"하기보다, 기존 브랜드 로고 위에 최소한의 움직임을 얹는 방식이 결과가 안정적.
- SVG path 기반 모션은 Lottie 없이도 가벼운 용량으로 충분히 구현 가능하고, 색/속도 미세 조정이 쉬움.
- 이후 확장 시에는 다크 모드 색상 세트와 로딩 배경 대비(AA 수준)까지 같이 점검하면 완성도가 높아짐.