의사결정 매트릭스 · 2026-06-18

AI 캠페인 제안서 로딩 애니메이션
2026년 최적 진행 UX는?

DiagnosingPanel — 5~10초간 바이어 분석 → 캠페인 설계를 보여주는 멀티스텝 로딩 UI. 실제 per-stage 진행 이벤트도, 토큰 스트리밍도 없는 제약 아래에서 가장 정직하고 체감이 빠른 애니메이션 패턴을 5개 옵션으로 비교했다.

최종 추천 ① 멀티스텝 체크리스트 Stepper (개선형) 8.49/10

추천안 미리보기 (CSS 전용, JS 0줄)

현행 stepper에 active 스텝 shimmer + @starting-style 페이드인 + aria-live 알림을 이식한 모습.

바이어를 분석하고 초안을 그리는 중이에요

약 5~10초 정도 걸려요

  1. 선택한 바이어 그룹 살펴보는 중
  2. 비슷한 캠페인 성과 참고 중
  3. 회사 영업 정보 정리 중
  4. AI가 캠페인 설계 중

↑ active 행에만 shimmer가 흐른다 — "멈춤"이 아니라 "처리 중"을 알리는 신호. prefers-reduced-motion에서 모든 모션 정지.

분석 대상 질문

per-stage 진행 이벤트가 없고 시간 기반 추정만 가능한 5~10초 AI 로딩 패널에, 2026년 기준 가장 좋은 진행 애니메이션 패턴은 무엇인가? (대상: 수출기업 매니저 · 디자인 토큰: rd-blue-500 / rd-n 그레이스케일)
현행 구현 (DiagnosingPanel.tsx)
  • 메인 인디케이터: Loader2 80×80 animate-spin + 내부 Sparkles animate-pulse
  • 진행 표현: 4단계 <ol> — stage당 1.5초 시간 기반, done=체크 / active=스피너 / todo=빈 원
  • 정직성 의도: 실제 backend 흐름(6쿼리 병렬 → callAIObject, 5~10초)과 시간 매핑, 과장 없음
  • 한계: 단순 spinner + 시간추정. 2026 SOTA의 shimmer·staged reveal·streaming 미적용

비교한 옵션 5종

① 멀티스텝 체크리스트 Stepper 추천

현행 4단계 체크리스트를 유지하되 active 스텝 shimmer + 등장 페이드 + 상태 라벨을 강화. AI Loading States 패턴의 "request lifecycle + status label"에 정확히 부합.

② Skeleton / Shimmer 프리뷰

완성될 제안서 레이아웃의 회색 골격에 shimmer를 흘려보냄. 체감 성능 1위(연구상 30~40%↑)지만 결과 레이아웃을 미리 알아야 함.

③ 진행률 Progress bar + 라벨

% 진행바 + 단계 텍스트. advancement는 잘 보이나, 실제 진행을 모르면 가짜 %가 됨.

④ 스트리밍 텍스트 (AI thinking)

AI가 생각을 토큰 단위로 흘려보내는 식. 가장 트렌디하나 backend가 중간 토큰을 안 주면 "가짜 스트리밍" = 과장.

⑤ Lottie / SVG morph 일러스트

풍부한 모션 일러스트. 시각적으로 화려하나 진행 정보 0 + 번들 무게 + react19 호환 리스크.

평가요소 & 가중치

평가요소가중치근거
정직성·투명성20%per-stage 이벤트·토큰 스트림이 없는 제약에서 "fake certainty"를 피하는 것이 최우선 (uxpatterns.dev AI Loading States 핵심 원칙)
체감 대기시간 단축18%5~10초는 충분히 길어 "멈춤" 인상이 이탈로 직결. shimmer는 blank+spinner 대비 perceived load 40%↓
디자인 시스템 적합성17%rd-blue/rd-n 토큰·기존 컴포넌트 재사용 여부. 새 패턴 도입은 일관성 비용
접근성15%aria-live 폴라이트 알림 + prefers-reduced-motion 대응. 모든 토큰 애니메이트 금지
구현 난이도15%React 19 + CSS/framer-motion 기준. 낮을수록 고득점. 번들·backend 개조 비용 포함
2026 트렌드 부합도15%View Transitions·@starting-style·AI thinking UX 등 현행 SOTA 패턴 반영도
합계100%

점수 매트릭스

옵션 정직성
20%		 체감
18%		 DS적합
17%		 접근성
15%		 구현
15%		 트렌드
15%		 총점
① 멀티스텝 Stepper 979998 8.49
② Skeleton/Shimmer 697778 7.31
③ Progress bar+라벨 588886 7.10
④ 스트리밍 텍스트 586559 6.31
⑤ Lottie/SVG morph 465646 5.13

가중점수 = 원점수 × 가중치. 총점 만점 10.00. 채점은 아래 리서치 출처에 기반.

옵션별 장단점 & 선택 기준

① 멀티스텝 체크리스트 Stepper (개선형) — 8.49 1위

장점

  • 4단계가 실제 backend 흐름과 1:1 매핑 → 가장 정직
  • 현행 코드 거의 그대로 → 구현 비용 최저
  • rd-blue/CheckCircle2 등 기존 패턴 재사용

단점

  • shimmer 단독안보다 체감단축은 약간 낮음
  • 시간 기반 추정이라 단계 전환 타이밍이 실제와 어긋날 수 있음
  • 화려함은 ⑤보다 떨어짐

선택해야 하는 이유: 정직성·DS적합·구현난이도 3개 고가중 항목을 모두 석권. active 스텝에 shimmer만 얹으면 체감단축(②의 강점)까지 흡수.

선택하지 말아야 할 때: 결과 제안서 레이아웃이 고정적이고 미리 보여줄 수 있다면 ②가 더 강할 수 있음.

② Skeleton / Shimmer 프리뷰 — 7.31

장점

  • 체감 성능 1위 (perceived load 30~40%↓)
  • shimmer = "active processing" 신호
  • 완성 화면으로의 전환이 매끄러움

단점

  • 제안서 레이아웃이 가변적이라 골격 모사가 어려움
  • "무슨 작업 중"인지 텍스트 정보가 빈약
  • 스크린리더 정보량 부족

선택해야 하는 이유: 결과 레이아웃이 안정적이고 체감속도가 최우선일 때.

선택하지 말아야 할 때: 지금처럼 작업 단계를 명시적으로 알려야 할 때 — 정직성 항목에서 손해.

③ 진행률 Progress bar + 라벨 — 7.10

장점

  • advancement를 가장 직관적으로 표현
  • 기존 trial progress bar 패턴 재사용 가능
  • 접근성(progressbar role) 양호

단점

  • 실제 진행을 모르면 % 자체가 거짓말
  • 막대가 멈추면 오히려 불안 가중
  • unknown-finish AI 작업엔 uxpatterns가 비권장

선택해야 하는 이유: 진짜 결정론적 진행률(예: N/M 처리)이 backend에서 나올 때.

선택하지 말아야 할 때: 완료 시점을 모를 때 = 지금 케이스.

④ 스트리밍 텍스트 (AI thinking) — 6.31

장점

  • 2026 가장 트렌디한 AI UX
  • 텍스트가 흐르면 살아있는 느낌
  • 진짜 스트리밍이면 정직성 최고

단점

  • backend가 중간 토큰을 안 줌 → 가짜 스트리밍은 과장
  • 빠르게 바뀌는 aria-live는 스크린리더 폭주
  • 진짜 하려면 SSE 개조 필요

선택해야 하는 이유: 향후 callAIObject를 스트리밍으로 전환한다면 1순위 후보로 격상.

선택하지 말아야 할 때: 지금처럼 단일 응답 구조 — 정직성·접근성·구현 모두 손해.

⑤ Lottie / SVG morph 일러스트 — 5.13

장점

  • 브랜드 감성·완성도 인상
  • 모션 자유도 최고

단점

  • 진행 정보 0 = spinner와 본질 동일
  • Lottie는 heavy lib(번들↑·동적 import 규칙)
  • react19 호환 리스크 + 디자이너 에셋 의존

선택해야 하는 이유: 온보딩 등 "정보 전달보다 브랜딩"이 목적인 화면.

선택하지 말아야 할 때: 작업 진행 가시화가 목적인 로딩 — "visual noise" 경고에 정면 위배.

최종 권고

① 멀티스텝 체크리스트 Stepper(개선형)을 채택하고, 다음 3가지를 이식한다 — 본질을 더하지 않고 현행을 다듬는 방향:

  1. active 스텝에 shimmer 1줄 — ②의 체감단축 강점을 가장 싼 비용으로 흡수. (active 행 텍스트에 흐르는 그라데이션)
  2. @starting-style 페이드인 — 단계가 done으로 바뀔 때 체크가 부드럽게 등장 (transform 금지, opacity만 → reflow jank 회피, 프론트 디자인 규칙 §제자리 교체 준수).
  3. aria-live="polite" 단계 알림 + prefers-reduced-motion에서 shimmer/spin 정지. 현행 aria-busy는 유지.

→ "김치볶음밥 원칙": 새 패턴(④⑤)을 얹는 대신 이미 정직하게 작동하는 stepper를 다듬는 것이 정답. 향후 callAIObject가 스트리밍을 지원하면 ④를 재평가.

리서치 출처

  1. UX Patterns for Developers — AI Loading States (fake certainty 금지·aria-live·reduced-motion 원칙)
  2. Telerik — Loading UI/UX Patterns for AI Applications (contextual messaging·progressive disclosure)
  3. UXPin — Progress Tracker Best Practices 2026 (3~7 step 권장)
  4. Onething — Skeleton Screens vs Loading Spinners (perceived load 30~40%↓, shimmer=active 신호)
  5. LogRocket — Skeleton Loading & Perceived Performance
  6. 2026 CSS Features — @starting-style·View Transitions 프로덕션 가용
  7. Chrome for Developers — Scroll-triggered animations (Chrome 145, 2026)
  8. Ripplix — UI Animation Guide 2026 (마이크로 애니메이션 100~300ms·restraint)

불확실성 표기: 채점의 "체감단축" 수치는 일반 연구 평균(30~40%)을 본 케이스에 추정 적용한 값으로, 실측 A/B는 별도 검증 필요.