덱과 사이트 모션 활용 루트

조사·접근 확인일: 2026년 9월 30일. 대상: 스크롤덱 발표, 웹사이트, 웹 기반 체험관 UI.

핵심: 읽을 내용과 조작 상태를 먼저 완성하고, 관계·변화·피드백을 설명할 때만 모션을 붙여. 기본 조합은 정적 기준점 + 작은 상태 변화 + 읽기 정지야. 강조 장면에만 공유 요소 전환이나 단계적 리빌을 추가해.

근거 표기: [S]는 이번 웹 검색·본문 확인 자료, [L]은 로컬 사전, [제안]은 이 루트의 제작 시작값이야. 제안한 초·진행률·거리·빈도는 보편 표준이나 실험으로 확정된 최적값이 아니야. 실제 콘텐츠·기기·사용자 점검으로 조정해. 원문의 기술 기능과 이 문서의 설계 판단을 구분해.

1. 목표와 제약

매체별 목표

용도	성공 목표	길이·진행 단위 [제안]	환경·제약	근거와 설계 귀결
스크롤덱 발표	청중이 현재 논점과 이전 논점의 관계를 따라가기	6~12장, 발표 5~10분부터 설계. 장별 진행률 p=0…1	발표자 조작, 리모컨·키보드, 프로젝터, 청중의 뒤쪽 시야	이동보다 정지 상태의 가독성 우선. 장 제목·진행 위치·핵심 도형 유지 [S4][S5][L1][L2]
웹사이트	필요한 정보 발견, 비교, 신청·구매·탐색 완료	소개 4~6섹션. 읽는 시간은 사용자에게 맡기기	모바일·데스크톱, 터치·키보드, 저성능 기기, 재방문	작업 피드백은 짧게, 본문은 즉시 접근 가능하게. 시각 효과를 기다려야 CTA를 누르는 구조 피하기 [S4][S6]
데이터 스크롤리텔링	같은 데이터 대상의 변화와 설명을 연결하기	3~5단계, 단계별 p 또는 선택 버튼	빠른 스크롤, 역방향 탐색, URL 직접 진입, 작은 화면	기준 축·범례를 유지하고 한 번에 한 관계를 변경. 정적 표·단계 설명 제공 [S7][S8][L2]
체험관 UI	처음 온 관람객이 행동하고 결과·원인을 이해하기	1회 체험 45~90초, 3~5단계부터 설계. 읽기는 무제한 대기	공유 기기, 서서·앉아서 사용, 소음, 호버 없는 터치, 네트워크 불안정	행동 직후 상태를 표시하고 다음 단계는 명시적 버튼으로 진행. 접근성 설정을 화면에서 선택 가능하게 [S1][S3][S9][S10]

길이는 콘텐츠 양을 정하는 시작값이야. 60초 체험이라고 각 관람객을 60초 뒤 강제로 종료하지 마. 발표의 읽기 홀드 역시 청중이 충분히 읽었다는 보장이 아니야.

접근성 계약

항목	기준·수준	이 루트에서 할 일
사용자 행동으로 생기는 모션	WCAG 2.3.3, AAA. 본질적인 경우 외에는 끌 수 있어야 함	AA를 목표로 하더라도 이 루트는 모션 감소를 추가 채택. 시차·줌·회전·큰 이동 제거 [S2]
자동 움직임	WCAG 2.2.2, A. 자동 시작 + 5초 초과 + 다른 콘텐츠와 병행하는 움직임에는 일시정지·정지·숨김 수단, 본질적 예외 있음	배경 영상·자동 캐러셀에 지속 가능한 정지 버튼 제공. 호버 중에만 멈추는 방식 피하기 [S3]
자동 갱신	WCAG 2.2.2, A. 위 5초 조건을 자동 갱신에도 적용하면 안 됨	실시간 수치·자동 교체 메시지에는 정지 또는 갱신 빈도 제어 제공 [S3]
키보드·포커스	2.1.1 A, 2.1.2 A, 2.4.7 AA, 2.4.11 AA	Tab·Enter로 핵심 작업 완수, 포커스 표시, 탈출 가능. 고정 패널이 포커스 대상을 완전히 가리지 않게 [S1][S12]
드래그	2.5.7 AA. 본질적 예외 외에는 드래그 없는 단일 포인터 대안 필요	슬라이더·전후 비교에 클릭·탭 버튼 또는 수치 입력 추가. 키보드 대안만으로 충족했다고 판단하지 마 [S9]
터치 목표	2.5.8 AA. 24×24 CSS px 또는 간격 등 명시된 예외 조건	체험관 주요 버튼은 44~64 CSS px 높이부터 시험 [제안]. 물리 크기·화면 배율·도달 범위도 현장 확인 [S11]
제한 시간	2.2.1 A. 시간 제한에 끄기·조정·연장 중 해당 대안과 예외 조건 적용	유휴 초기화는 경고·계속 사용 버튼 제공. 연장 절차는 원문 조건까지 검토 [S10]
번쩍임·의미 전달	2.3.1 A, 1.4.1 A, 1.4.3 AA	플래시 전환은 이 루트에서 제외. 성공·오류를 색과 움직임만으로 전달하지 말고 문구·기호 병용 [S1]

공유 체험관의 OS 설정은 현재 관람객 선호를 나타내지 않을 수 있어. 초기 화면에 ‘모션 줄이기’를 노출하고 보수적으로 시작하는 걸 권장해 [제안]. 이전 관람객의 답변·개인 정보는 초기화하되 모션 감소 설정은 세션 중 유지해.

2. 설계 로직

판단 순서

사용자 목표부터 정해. ‘이 장면에서 무엇을 이해하거나 실행하나’를 한 문장으로 적어. 한 장면에 비교·탐색·입력을 전부 맡기지 마.
정적 정보 구조를 만들어. 제목, 전후 상태, 단계 라벨, 축·단위, 다음 행동을 효과 없이 배치해. 이 상태로 목적을 달성하지 못하면 레이아웃·설명을 먼저 수정해 [S4][S5].
입력과 진행 주체를 정해. 발표자는 장 단위 이동, 독자는 기본 스크롤, 관람객은 버튼·탭을 기본으로 선택해. 스크롤을 가로채는 관성·강제 스냅은 기본값에서 제외 [제안].
트리거를 세 가지 중 골라. 연속적인 대응 관계면 스크롤 진행률, 섹션 도착 알림이면 진입 후 짧은 시간 재생, 조작 상태 변화면 입력 직후 시간 재생을 써 [S7][S13].
효과의 역할을 하나 지정해. 주목, 관계, 변화, 피드백 중 하나를 주역으로 삼아. ‘멋있게’만 남으면 효과를 생략해 [S4].
최소 조합을 골라. 기준점은 정적, 설명할 대상 하나만 이동·변형, 완료 뒤 라벨·정지 상태를 남겨. 제목과 차트와 배경을 동시에 크게 움직이지 마 [S5][제안].
모션 감소 대안을 먼저 확정해. 같은 결론·조작·전후 관계를 즉시 상태 교체, 단계 버튼, 정적 주석으로 전달해. reduce에서는 무조건 opacity 0으로 남는 요소가 없어야 해 [S2][S7].
실패·취소·역방향 상태를 정해. 빠른 스크롤, 연속 클릭, 로딩 실패, 뒤로 가기, 직접 진입에도 최종 상태와 정보가 일치하게 해 [S13][제안].
거리·시간·이징을 배정하고 검수해. 아래 표를 시작값으로 사용해. 모션 제거 상태, 실제 입력 기기, 느린 기기에서 목표를 다시 확인해 [S4][S6].

흐름: 목표 → 정적 구조 → 입력·트리거 → 모션 역할 → 최소 효과 조합 → 감소 대안 → 상태 복원 → 파라미터 → 검수.

상황별 결정표

상황	쓸 효과·조합	이유	감소 모드·예외
첫 화면에서 주제 제시	정적 제목·CTA + 핵심 도형만 짧은 리빌	내용·행동을 먼저 파악하고 도형에 주목하게 [S4][S5]	제목·도형·CTA 즉시 표시
긴 본문이나 입력 양식	정적 본문 + 포커스·선택 상태 변화	읽기·입력 중 시선을 안정시키기 [S4][제안]	상태 문구·테두리 유지
입력→처리→결과 원리	단계 리빌 + 같은 도형 유지 + 현재 단계 라벨	단계 소속과 연결 관계를 설명 [S5][L2]	단계 버튼과 번호 붙인 정적 도해
동일 대상의 목록→상세	공유 요소 위치·크기 연결 + 상세 패널 등장	같은 대상임을 추적하게 [S5]	선택 대상 이름 유지하며 즉시 상세 표시
서로 무관한 장·페이지	즉시 교체 또는 짧은 페이드	무관한 대상을 모프해 잘못 연결하지 않기 [제안][L1]	즉시 교체
전후 결과 비교	정렬된 두 화면 + 경계 와이프 + 전후 라벨	같은 위치의 차이를 드러내기 [L1]	나란히 비교 또는 전후 버튼. 드래그 외 조작 추가 [S9]
차트 필터·순위 변경	ID를 유지한 점·막대 이동 + 고정 축 + 변경 요약	대상 추적 지원. 일부 전환의 지각 개선 연구가 있으나 모든 차트·학습 효과로 일반화하지 마 [S8]	새 값 즉시 표시 + 전후 값 표
읽은 위치 표시	진행 바 `scaleX` + 정적 장 번호	스크롤 거리와 대응하는 연속 단서 [S7][제안]	정적 장 번호·현재 섹션만 표시
버튼·선택 카드	즉시 선택 표시 + 짧은 색·테두리 전환	입력을 받았음을 확인 [S4]	동일 상태 즉시 표시
성공·오류·대기	상태 문구·아이콘 + 필요시 작은 페이드	애니메이션과 실제 처리 상태 분리 [S4][제안]	문구 유지, 오류 이유·재시도 제공
브랜드 감정 강조	한 장면에 제한한 도형 조립 또는 작은 깊이 변화	표현적 모션을 주요 순간에 배치 [S4]	정적 대표 이미지. 시차를 필수 정보로 쓰지 마 [S2]
체험 대기 화면	정적 초대 문구 + 시작 버튼	주변 시야에서 반복 모션이 읽기를 방해하지 않게 [S14][제안]	영상 사용 시 정지·재생 제공 [S3]

3. 구조 템플릿

네 템플릿의 길이·분배는 [제안]이야. 스크롤 구간은 초로 환산하지 마. 사용자가 빠르게 건너뛰면 설명을 놓칠 수 있으니 목차·단계 선택·정적 설명을 함께 제공해.

A. 발표용 스크롤덱: 문제 → 원리 → 증거 → 적용

발표 6~8분, 8장부터 시작해. 아래 초는 발표 리허설 배분이며 자동 넘김 시간이 아니야.

비트	발표 배분	효과 배치	읽기·조작
1장 질문·문제	0~40초	제목 고정, 문제 대상 리빌 150~240ms	핵심 질문 한 개
2장 얻을 결과	40~80초	결과 카드 한 개 등장	목차·약속 정적 유지
3~5장 원리	80~260초	동일 도형을 이어 단계 리빌, 장마다 강조 대상 하나	발표자 다음·이전 버튼, 설명 중 정지
6장 전후 증거	260~340초	축척 맞춘 와이프 또는 점 이동	전후 라벨·자료 출처 고정
7장 직접 적용	340~410초	클릭 위치 강조 + 즉시 결과 상태	행동 순서·주의점 표시
8장 정리·행동	410~450초	정적 요약, 필요시 작은 페이드	QR·링크·다음 행동 즉시 표시

장 내부는 p=0.00~0.30 진입, 0.30~0.75 완성 상태 유지, 0.75~1.00 다음 장 연결부터 시험해 [L1][L2]. 꼭 퇴장시키지는 마. 키보드 착지 p=0.35, 대표 캡처 p=0.55에서 핵심 설명이 완성돼야 해. 이 수치는 로컬 사전의 Scrolline 계약을 따른 값이며 웹 전체 표준은 아니야.

감소 모드: 장별 완성 상태를 표시하고 이전·다음으로 교체해. 큰 이동·줌·핀을 제거해도 장 번호와 설명은 남겨. 발표 화면에는 조작 포커스와 슬라이드 가독성을 함께 점검해.

B. 웹사이트: 가치 → 작동 방식 → 증거 → 행동

섹션	트리거·타이밍	효과 조합	제한
가치 제안	첫 렌더, 도형만 150~240ms	정적 제목·CTA + 도형 리빌	CTA 활성화를 연출 끝까지 미루지 마
작동 방식	섹션 진입 뒤 150~300ms, 1회	3단계 카드 리빌 또는 선택 탭	본문 전체를 투명하게 숨기지 마
증거·비교	사용자가 비교 버튼 선택, 240~400ms	와이프 또는 수치 상태 전환 + 라벨	비교 결과는 정지 상태로 남기기
자주 묻는 질문	클릭·Enter, 150~240ms	펼침 상태·아이콘 방향 변화	`aria-expanded`, 내용·포커스 접근 보장
행동	진입 즉시 읽기 가능	정적 CTA + 입력 피드백 70~150ms	무한 펄스·떠다니는 CTA 제외

스크롤을 계속해야만 본문이 나타나는 구조는 설명이 필요한 한 섹션에만 제한해 [제안]. 모바일에서는 고정 도해 옆 본문을 위아래 레이아웃으로 바꾸고 가로 스크롤 강제를 피하자. 브라우저 미지원·JS 실패에는 순서대로 읽는 페이지를 제공해 [S7][제안].

C. 데이터 스크롤리텔링: 전체 → 변화 → 예외 → 결론

단계	화면 구성	진행률·시간	모션
전체	기준 차트·축·단위·범례	단계 진입 즉시	차트 정적, 기준 집단 표시
변화	같은 대상의 다음 상태	p=0.00~0.25 변화, 0.25~0.85 유지	점·막대 이동, 축 고정
예외	특이 집단과 원자료	다음 단계 선택. 주석 150~240ms	해당 대상만 강조, 주석 표시
결론	한 문장 해석·한계·원자료 표	시간 제한 없음	결론 정적, 선택 결과 유지

연속 추적이 목적이면 p에 선형으로 대응해. 단계 전환만 필요하면 도착 후 240~500ms 시간 재생을 써. 두 방식을 동일 속성에 동시에 붙이지 마 [S7][S13][제안]. 축 범위가 바뀌면 별도 단계로 알리고 새 단위를 표시해. 값이 늘었다는 연출과 단순 공개 연출을 구분해 [L2].

감소 모드: 전체·변화·예외를 번호 붙인 정적 차트와 버튼으로 제공해. 차트 모프 대신 전후 값을 즉시 교체하고 설명은 남겨. 역방향 탐색에서도 ID·라벨·선택이 원상 복원돼야 해.

D. 체험관 UI: 초대 → 선택 → 실행 → 해석 → 다시 하기

상태	권장 체험 배분	효과·피드백	다음 상태 조건
초대	0~5초, 대기 가능	정적 시작 버튼·언어·모션 설정	시작 탭·Enter
선택	5~20초, 대기 가능	선택 테두리·체크 + 70~150ms 전환	선택 후 실행 버튼
실행	20~35초의 설명 배분, 실제 대기는 별도	즉시 ‘처리 중’ 표시, 단계 라벨	실제 완료 이벤트 또는 오류
해석	35~60초, 대기 가능	결과 150~240ms 페이드 + 원인 주석	사용자가 다음 선택
다시 하기	60~75초, 대기 가능	정적 다시 하기·처음으로	명시적 선택 또는 접근 가능한 유휴 초기화

대기 애니메이션 길이를 실제 처리시간·정답 판정과 연결하지 마. 처리 중 중복 실행을 막고 상태를 알려. 실패하면 입력을 보존하고 재시도·취소를 제공해 [제안]. 설명용 모의 실행은 화면에 명시해 [L2].

유휴 90~180초 뒤 경고, 경고 뒤 최소 20초 연장 기회부터 검토해 [제안]. 실제 제한 시간을 적용할 경우 WCAG 2.2.1의 전체 연장 조건을 충족하게 구현해 [S10]. 단순히 ‘20초 경고’만으로 통과 판정하지 마. 모션 설정 변경은 즉시 반영하고 결과·선택 상태를 지우지 마.

4. 권장 효과와 파라미터

시간과 진행률 구분

제어 방식	파라미터	적용·주의
시간 재생	`duration` ms, `delay` ms	클릭 피드백·도착 후 리빌. GSAP 입력은 초이므로 ms÷1000 [S13]
연속 스크롤	p=clamp((현재 위치−시작 위치)/(끝 위치−시작 위치), 0, 1)	진행률에 상태 대응. p=0.4는 0.4초라는 뜻이 아님 [S7]
보간 지연	GSAP `scrub:true` 또는 숫자 초	직접 대응은 `true`, 완만한 추종은 0.1~0.3초부터 시험 [제안]. 로컬 기본 0.6초는 지연이 느껴지면 줄이기 [S13][L2]
핀 구간	별도로 정의한 스크롤 거리	`vh`는 거리 단위. 장 내부 p와 별개로 설계. 150~250vh 거리부터 시험하되 빠른 건너뛰기·모바일 확인 [제안]

animation 단축 속성 뒤에 animation-timeline을 선언해 재설정을 피하고, 지원 검사 실패 시 기본 정적 화면을 유지해 [S7]. 핀 해제 시 빈 공간도 정리해. 스크롤·키보드·모션 설정이 서로 다른 장면 상태를 만들지 않게 해 [제안].

효과별 시작값

거리 단위는 CSS px야. 프로젝터·키오스크에서 1920×1080 영상용 px를 그대로 가져오지 마. 먼저 실제 글자 크기·뷰포트·시야로 검수해 [L1][L2].

효과	언제 쓰나	범위·조합 [제안, 별도 표기 제외]	감소 모드
선택·버튼 상태	입력 접수	70~150ms, 색·테두리·아이콘. 본문 이동 0	즉시 동일 상태
페이드 리빌	주석·결과·작은 패널	110~240ms, opacity 0→1, 이동 없이	0ms 기본, 필요시 100ms 이하 작은 페이드
짧은 이동 + 페이드	제목·카드 소속 알림	150~300ms, y 8~24px 또는 x 8~32px	이동 제거, 완성 상태
행·카드 스태거	순서 있는 3~6개 항목	항목 간 20~60ms, 전체 500ms 이내	동시에 표시
공유 요소 전환	같은 대상의 요약→상세	240~400ms, 대응 요소 1~3개, 기준점 유지	이름·선택 테두리 유지하며 교체
와이프 비교	정렬된 전후 차이	시간형 240~500ms, 스크롤형 변화 p 구간 0.15~0.30	나란히 표시·전후 버튼
점·막대 상태 보간	같은 데이터의 상태 변경	시간형 240~500ms. 정체성 ID 유지, 1회 전환	즉시 값 변경·전후 표
선 그리기	순서·연결 경로 설명	300~600ms 또는 p 구간 0.20~0.35. 라벨 먼저 표시	완성 경로·번호 표시
하이라이트·밑줄	핵심 구절·원인 위치	110~240ms, 한 화면 주역 1개	정적 강조와 설명
진행 바	현재 읽은 위치	p에 선형 `scaleX`, 원점 왼쪽, 별도 시간 지연 0	장 번호·현재 섹션
카운트업	보조적인 성과 강조	300~600ms, 1회. 정확한 최종값·단위 별도 유지	최종값 즉시 표시
작은 시차·장식 확대	감정 강조 한 장면에 한정	시차 총 8~24px, 장식 scale 1→1.02~1.05부터 시험	정적 이미지. 민감도 안전 기준으로 해석하지 마

시간 범위는 Carbon의 토큰을 참고해 조정한 제안이야. Carbon 공식 토큰은 70·110·150·240·400·700ms이며, 위 거리·개수·진행률은 공식 규격이 아니야 [S4]. 시차·확대의 낮은 수치도 모든 사용자에게 안전하다는 의미는 없어 [S2].

이징과 조합 규칙

역할	곡선	적용
스크롤 연속 대응·진행률	`linear`	스크롤 거리와 변화의 관계를 추적할 때 [제안]
UI 상태 이동	`cubic-bezier(0.2, 0, 0.38, 0.9)`	Carbon productive standard [S4]
작은 대상 진입	`cubic-bezier(0, 0, 0.38, 0.9)`	Carbon productive entrance [S4]
강조 순간	`cubic-bezier(0.4, 0.14, 0.3, 1)`	Carbon expressive standard. 전체 사이트 기본값으로 확대하지 마 [S4]

같은 기능에는 같은 방향·곡선을 써 [S5]. 숫자·확률·막대 길이에 bounce·elastic·overshoot를 적용하지 마. 중간값이 실제 범위를 넘는 오해를 만들 수 있어 [L2][제안]. 타이포는 제목·뜻 단위 어구로 제한하고 긴 본문은 글자별 타자기·스크램블을 피하자 [L2].

기본 조합: 정적 제목 + 카드 리빌. 관계 조합: 고정 기준점 + 공유 요소 이동 + 상세 라벨. 데이터 조합: 고정 축 + 대상 보간 + 주석. 체험 조합: 즉시 선택 표시 + 결과 전환 + 다음 버튼. 하나의 주역에 보조 효과 1~2개부터 시작해 [제안].

피할 것과 대안

피할 것	이유·근거	대안
휩팬·풀스크린 회전·터널 줌의 반복	읽기와 위치 감각을 흔들고 감소 대안이 필요 [S2][L1]	정적 기준점·작은 패널 이동
본문 주변의 무한 시차·부유 장식	주변 시야 움직임이 읽기에 부담. Apple 사례에서 정적 대안 사용 [S14]	고정 배경·대표 이미지
애니메이션을 지우기만 하는 감소 구현	원래 초기 숨김 상태·핀 여백이 남아 정보 소실 [S7][제안]	완성 상태·레이아웃·단계 설명 함께 복원
강제 관성·스크롤 가로채기·긴 핀	빠른 탐색·뒤로 읽기를 어렵게 함 [제안]	기본 스크롤·목차·단계 버튼
이동·회전하는 버튼, 호버 전용 설명	목표를 누르기 어렵고 터치·키보드에서 정보 누락 [S1][S11]	고정 버튼·클릭으로 여는 설명
매 프레임 전체 DOM 측정, 무거운 블러·그림자	레이아웃·페인트 비용이 커질 수 있음 [S6]	transform·opacity 우선, 실제 기기 프로파일링
가짜 진행률·연출 종료에 맞춘 성공 표시	실제 처리 결과와 UI 상태 불일치 [제안]	실제 완료 이벤트·대기 문구·재시도
단일 숫자만 빠르게 카운트업	정확한 값·단위를 읽기 어렵고 비교 의미가 약해짐 [L2][제안]	최종값 정적 유지·전후 설명

성능은 transform·opacity라고 자동 보장되지 않아. 레이어·큰 이미지·합성 부하를 실제 기기에서 확인해 [S6]. 60Hz 화면은 프레임 간격 약 16.7ms지만 이를 모든 화면의 합격 기준으로 쓰지 마. 입력 무시·스크롤 끊김·상태 지연 여부를 함께 기록해 [제안].

5. 에이전트 프롬프트 예시 3개

예시 1. 스크롤덱 발표

이 루트의 템플릿 A로 ‘AI 답변에서 출처를 확인하는 법’ 8장 스크롤덱을 만들어. 청중은 비개발자, 발표는 7분, 프로젝터와 키보드로 진행해. 문제·결과·원리 3장·전후 증거·직접 적용·정리를 배치해. 먼저 효과 없는 완성 화면을 구성하고 장마다 모션 역할 하나를 지정해. p=0.00~0.30 진입, 0.30~0.75 읽기 유지부터 설계하되 퇴장을 강제하지 마. p=0.35와 0.55에서 핵심 설명이 완성되게 해. 정적 제목, 단계 리빌, 한 번의 전후 와이프를 중심으로 조합해. 모션 감소에서는 완성 상태·장 번호·이전·다음 버튼을 제공해. 장별 목표, 효과·거리·이징·진행률, 감소 대안, 빠른 이동·역방향 검수 결과를 함께 제출해. 실제 자료와 설명용 예시를 구분해.

예시 2. 웹사이트

이 루트의 템플릿 B로 예약 서비스 소개 웹사이트를 만들어. 모바일 우선, 가치·작동 방식·전후 비교·FAQ·예약 CTA 순서로 구성해. 제목과 CTA는 첫 렌더부터 읽고 누를 수 있게 해. 장식 도형 리빌 150~240ms, 선택 피드백 70~150ms, FAQ 전환 150~240ms부터 시작해. 기본 스크롤을 유지하고 스크롤 속도로 읽기 시간을 보장한다고 가정하지 마. 공유 요소는 같은 대상의 상세 보기 한 곳에만 써. prefers-reduced-motion과 사이트 모션 줄이기 설정에서 의미·조작을 보존해. JS 실패와 스크롤 애니메이션 미지원에서도 모든 핵심 정보·예약 링크를 제공해. 키보드, 터치, 직접 URL 진입, 빠른 스크롤, 감소 설정 변경을 검수하고 적용값이 제안인지 공식 토큰인지 명시해.

예시 3. 체험관 UI

이 루트의 템플릿 D로 ‘질문 조건에 따라 AI 결과가 바뀌는 체험’ 공유 터치 키오스크를 만들어. 초대·선택·실행·해석·다시 하기의 5상태, 권장 체험 60~75초로 구성하되 읽기 단계는 사용자가 진행하게 해. 시작 화면에 모션 줄이기와 언어 선택을 제공해. 선택은 즉시 표시하고 색·테두리 전환 70~150ms, 결과 전환 150~240ms를 사용해. 드래그·호버가 없어도 모든 행동이 가능하게 하고 버튼 높이 44~64 CSS px부터 현장 검수해. 실행 중 중복 입력, 취소, 실제 완료, 네트워크 실패, 재시도를 상태표에 정의해. 모의 결과면 설명용 예시를 표시해. 유휴 초기화는 시간 제한 접근성 조건에 맞춘 경고·연장·처음으로 흐름을 설계해. 감소 모드에서도 선택·결과·이유가 남고, 초기화 뒤 이전 관람객 정보가 남지 않는지 검수해. 상태표·모션 표·감소 대안·현장 점검 항목을 제출해.

6. 체크리스트: 완성 판정

문서 제작 완료와 결과물 검증 완료를 구분해. 이 조사에서는 웹·키오스크를 제작하거나 사용자 시험을 수행하지 않았어. 아래 항목은 후속 제작의 판정 기준이야.

번호	검사	통과 조건	남길 증거
1	목적	모든 효과에 주목·관계·변화·피드백 중 설명 가능한 역할 있음	장·상태별 효과 표
2	정적 완성	애니메이션 없이도 핵심 설명·행동·전후 관계가 남음	정적 화면·설명
3	시간 단위	초·ms·p·스크롤 거리를 구분하고 정의함	타이밍·진행률 표
4	읽기	본문·축·단위가 안정적으로 유지, 자동 넘김 없이 다시 읽기 가능	실제 콘텐츠 화면
5	감소 초기 진입	OS reduce와 사이트 설정에서 숨겨진 핵심 콘텐츠·핀 공백 없음	일반·감소 비교 캡처
6	감소 중간 변경	모션 중 설정 변경해도 선택·결과·포커스 유지	조작 기록
7	접근 방식	Tab·Enter, 터치·클릭으로 동일 핵심 작업 완료. 드래그 없는 포인터 대안 있음	입력 방식별 완료 기록
8	포커스	표시가 보이고 고정 패널에 완전히 가려지지 않음. 모달 닫으면 합리적 위치로 복귀	키보드 조작 기록
9	상태 복원	빠른 이동·역방향·새로고침·직접 진입에도 라벨·값·단계 일치	시작·중간·끝 상태 비교
10	자동 움직임	해당 WCAG 조건의 정지·갱신 제어가 있고 정지 뒤에도 다른 작업 가능	정지·재개 기록
11	데이터 정직성	최종값·단위·분모·축·원자료 일치, 보간을 실측값으로 오인시키지 않음	원자료 대조·정적 표
12	실패·반복 입력	중복 실행·취소·오류·재시도 처리, 성공은 실제 상태에 따라 표시	상태별 조작 기록
13	기기 성능	목표 모바일·프로젝터·키오스크에서 입력·스크롤·읽기에 반복적인 지장 없음	기기·브라우저 버전과 측정 기록
14	미지원 대안	JS·스크롤 기능 실패 시 본문·결론·핵심 행동 제공	기능 차단 상태 화면
15	체험 세션	유휴 경고·연장 가능, 명시적 초기화, 이전 관람객 정보 제거	시간 제한·초기화 기록
16	출처·가정	공식 기준, 로컬 계약, 제안값, 연구 범위가 구분됨	출처 URL·날짜·설계 가정

완성 판정: 해당 항목 전부 통과. 적용하지 않는 항목은 제외 이유를 적어. 정보 소실·조작 불가·데이터 불일치·모션 감소 실패가 있으면 미완성이야. 이 체크리스트만으로 WCAG 전체 적합성을 선언하지 마.

출처 목록

모든 웹 자료 접근 확인일은 2026년 9월 30일이야. 날짜 미표시는 게시·수정일을 추정하지 않았다는 뜻이야. W3C Understanding은 해설 자료이며 규범 요구사항은 [S1]에서 확인해. URL을 열었으나 본문 확인에 실패한 자료는 아래 근거 목록에서 제외했어.

ID	출처·URL	게시·수정일	사용 범위·한계
S1	W3C, Web Content Accessibility Guidelines 2.2	Recommendation 2024년 12월 12일	웹·모바일·키오스크 범위, 키보드·번쩍임·색·대비 기준. 전체 적합성 검증을 수행했다는 뜻은 아님
S2	W3C, Understanding 2.3.3 Animation from Interactions	본문 수정 2025년 9월 16일	AAA, 상호작용 모션 중지·감소와 본질적 예외, 시차의 위험
S3	W3C, Understanding 2.2.2 Pause, Stop, Hide	날짜 별도 확인 안 됨	자동 움직임 5초 조건, 자동 갱신 구분, 지속 가능한 정지 수단
S4	IBM Carbon, Motion overview	페이지 표시 2026년 9월 23일	productive·expressive, 공식 곡선·시간 토큰. 표시 수정일은 개별 문장의 개정일을 보장하지 않음
S5	IBM Carbon, Motion choreography	페이지 표시 2026년 9월 23일	의미·공간 일관성, 공유 요소, 스태거·순서. Carbon의 디자인 선택을 보편 규칙으로 확대하지 않음
S6	Google web.dev, How to create high-performance CSS animations	본문 날짜 별도 확인 안 됨	공식 구현 가이드. transform·opacity, 레이아웃·페인트, 성능 점검. 실제 기기 성능은 별도 검증
S7	MDN, Scroll-driven animation timelines	본문 날짜 별도 확인 안 됨	스크롤·시간 타임라인 차이, 역방향 진행, 감소 설정, 단축 속성 재설정
S8	Jeffrey Heer·George Robertson, Microsoft Research, Animated Transitions in Statistical Data Graphics	InfoVis 2007년 11월	연구 소개·초록 확인. 두 통제 실험에서 일부 그래픽 지각 개선 보고. 논문 전체 분석·새 사용자 시험은 수행하지 않음
S9	W3C, Understanding 2.5.7 Dragging Movements	날짜 별도 확인 안 됨	AA, 단일 포인터로 드래그 없이 조작. 키보드 접근성과 별도 요구
S10	W3C, Understanding 2.2.1 Timing Adjustable	날짜 별도 확인 안 됨	시간 제한의 끄기·조정·연장과 예외. 체험 권장 길이·유휴 제안값의 출처는 아님
S11	W3C, Understanding 2.5.8 Target Size Minimum	날짜 별도 확인 안 됨	24×24 CSS px와 간격·동등 조작 등 예외. 44~64px 제안과 구분
S12	W3C, Understanding 2.4.11 Focus Not Obscured Minimum	날짜 별도 확인 안 됨	AA, 작성자 콘텐츠가 포커스 대상을 완전히 가리지 않게 함
S13	GSAP, ScrollTrigger documentation	날짜 미표시, v3 문서	scrub·pin·진행률·시간 단위. 지원 브라우저별 실제 동작은 제작 시 검증
S14	James Craig, WebKit, Responsive Design for Motion	게시 2017년 5월 15일, 사례 갱신 5월 25일	블로그는 실사례 분석에만 사용. Apple 웹사이트의 확대·배경 영상·시차·2.5D·잎 장식에 대한 감소 대안 기록. 현재 사이트를 직접 시험한 결과는 아님
L1	로컬 00 한눈에, 2 전환·컷·카메라	2번 문서 확인일 2026년 9월 30일	컷·와이프·푸시·슬라이드·모프 구분, p 분배, 영상 수치의 매체별 조정
L2	로컬 3 타이포와 데이터 애니메이션	조사일 2026년 9월 30일	타이포·차트·UI 효과, 35% 착지·55% 완성, Scrolline 계약의 사전 기록. 사전이 참조한 외부 로컬 문서는 이번에 별도 확인하지 않음