뉴스레터·블로그 본문 모션 활용 루트

조사·접근 확인일: 2026년 9월 30일. 대상: 글 사이의 움직이는 도해, 짧은 GIF, UI 시연, 데이터 비교. 읽는 사람의 이해와 읽기 흐름을 기준으로 효과를 골라.

근거 표기: 공식은 공급자 가이드·웹 접근성 기준, 연구는 해당 실험·리뷰 범위의 결과, 제안은 이 루트의 제작 시작값이야. 제안 수치를 업계 표준이나 검증된 최적값으로 부르지 마. 본문 [S번호]의 URL·날짜는 끝의 출처 표에서 확인해.

1. 목표와 제약

목표

목표	모션을 쓰는 조건	완성 상태
순서 이해	입력→처리→결과처럼 진행 순서 자체가 설명 대상	각 단계 번호와 연결 방향이 정적으로도 남음
대상 추적	같은 항목이 전후 상태에서 어디로 옮겨 갔는지 중요	전후 ID·라벨·색의 대응이 유지됨
차이 발견	수정 전후 같은 영역의 차이를 찾기 어려움	전후 비교와 핵심 차이 문장이 함께 남음
읽기 위치 안내	복잡한 도해에서 지금 볼 지점 하나를 지정해야 함	강조가 끝나도 원래 정보와 라벨이 읽힘
추가 설명 연결	메일 안에서 충분히 설명할 수 없음	요약 도해와 목적이 분명한 블로그 링크 제공

연구 근거: 애니메이션이 정적 도해보다 항상 학습에 유리한 건 아니야. 전달 개념과 시각 변화가 맞아야 하고, 너무 복잡하거나 빠른 변화는 이해를 방해할 수 있어. 그래서 시간·변환·순서를 설명할 필요가 없으면 정적 도해부터 선택해. [S1]

환경별 계약

환경·제약	확인된 근거	이 루트의 판단
이메일 GIF 재생	최신 Outlook도 설정에 따라 첫 프레임만 표시. Microsoft 문서는 기본 재생을 설명함. [S3]	“이메일은 자동재생 불가”로 뭉뚱그리지 마. GIF는 자동재생될 수도, 정지할 수도 있으니 둘 다 성립하게 설계
이메일 영상·스크립트	Mailchimp는 임베디드 미디어와 JavaScript 사용을 피하라고 안내. 지원 클라이언트에 의존함. [S4]	영상 자동재생·클릭 재생·Lottie·JS 제어를 공통 전제로 삼지 마. 정적 썸네일 또는 GIF에서 외부 설명 페이지로 연결
GIF 호환성 표의 한계	Can I email의 GIF 마지막 테스트는 2020년 2월 6일. 일부 비지원 및 Office 365 조건의 제한 재생 주석 존재. [S5]	최신 전체 환경의 보증으로 쓰지 마. 수신자 비중이 높은 실제 버전·설정에서 발송 테스트
이미지 다운로드·크기	Mailchimp는 이미지 최대 1MB를 권장하며 템플릿은 일반적으로 최대 폭 600px. 서비스별 가이드임. [S6]	제안: GIF 1개 300~800KB 목표, 1MB 초과 시 재설계. 600px를 보편 규격으로 강제하지 말고 실제 콘텐츠 폭에 맞춰
이메일 HTML 잘림	Mailchimp 안내상 Gmail은 메시지 크기 102KB 초과 시 본문을 접음. 메시지에는 HTML·문자·URL·추적 코드 등이 포함됨. [S7]	외부 GIF 파일 바이트와 HTML 바이트를 별도로 측정. 제안: 발송 서비스가 최종 가공한 HTML 80KB 이하 목표. 102KB를 GIF 용량 한도로 해석하지 마
자동 움직임과 독서	WCAG 2.2.2 A: 자동 시작·5초 초과·다른 콘텐츠와 병행하는 비필수 움직임에는 일시정지·정지·숨김 수단 필요. [S8]	메일은 저자 제어 버튼을 신뢰하기 어려우니 반복 포함 5초 이내 종료를 기본 선택. 긴 설명은 정적 대안 또는 제어 가능한 블로그로 이동
반복 GIF	W3C G152는 프레임 지연의 합과 반복 횟수로 전체 재생시간을 계산해 5초 이내 정지하는 방법 제시. [S9]	한 사이클이 3초여도 무한 반복이면 5초 제한을 충족하지 않음. 단회 재생 기본, 종료 프레임 유지 여부 실기 확인
블로그 모션 감소	W3C C39는 `prefers-reduced-motion`으로 비필수 움직임 억제하는 방법 설명. [S10]	정적 상태를 기본값으로 두고 허용된 환경에서만 모션 활성화. 이 설정만으로 긴 자동재생의 정지 제어를 대체하지 마
이미지 차단·스크린리더	W3C는 정보 이미지의 대체 텍스트와 복잡한 도해의 상세 텍스트 대안 안내. [S11]	짧은 alt에 핵심 의미, 본문에 과정·차이·수치표 제공. alt만으로 긴 차트 전체를 설명하려 하지 마
번쩍임	WCAG 2.3.1 A는 1초 3회 이하 번쩍임 또는 일반·적색 번쩍임 임계값 이하 요구. [S12]	이 루트는 플래시 0회 제안. 5초 이내라도 번쩍임 안전 기준은 따로 확인

매체·길이·접근성 기본값

항목	이메일	블로그
정보 단위	GIF 하나에 질문 하나, 핵심 변화 하나	본문 소제목별 질문 하나, 단계별 재생 가능
길이 제안	총 재생 2~4.5초, 단회 종료. 설명이 길면 정적으로 전환	단순 도해 3~8초, 다단계 시연 8~15초부터 시험. 자동재생이 5초를 넘으면 제어 제공
개수 제안	글 한 편에 자동 움직이는 자산 0~1개부터 시작	한 화면 범위에서 자동 움직이는 모듈 0~1개부터 시작
소리	소리 없이 완결. GIF는 음성 전달 매체가 아님	음성 없이도 완결. 설명 영상에 음성 추가 시 자막·텍스트 대안 별도 제공
텍스트	제목·요약·CTA는 실제 HTML 텍스트로 유지	설명·축·수치표는 가능한 한 HTML로 유지
재생 위치	로딩 시 시작할 수 있어 스크롤 도착 시점을 보장 못 함	기본은 클릭 재생. 가시 영역 진입 재생을 쓰면 이탈 시 멈추고 자동 반복하지 않게 설계
정적 대안	첫 프레임·마지막 프레임·본문 설명 각각 의미가 완결돼야 함	포스터와 단계별 정적 도해 제공. 모션 감소 시 GIF 파일 자체를 정적 자산으로 교체

이메일에서는 CSS로 GIF를 숨기거나 모션 감소를 적용하는 기능도 클라이언트별 검증 대상이야. 광범위한 정적 전달이 필수인 배포는 처음부터 PNG·JPG를 보내고, 모션은 블로그에서 선택 재생하게 해. 블로그의 CSS 애니메이션을 꺼도 <img> 안의 GIF 프레임 재생이 자동으로 멈추는 건 아니야.

2. 설계 로직

판단 순서

읽고 나서 답할 질문 → 정적 설명 작성 → 움직여야 하는 관계 확인 → 이메일·블로그 분기 → 대안·재생 계약 → 효과 조합 → 시간·용량 예산 → 실제 수신 환경 검수 순서로 정해.

순서	먼저 정할 것	다음 분기
1	“독자가 무엇을 이해해야 하나”를 한 문장으로 작성	목표가 단순 주목이면 정적 강조 우선
2	결론 문장·정적 도해·필수 수치 작성	정적 자료만으로 충분하면 모션 생략 [S1]
3	어려운 관계가 순서·대응·비교·주목 중 무엇인지 분류	주 효과 하나 선택. 필요할 때만 보조 주석 하나 추가
4	배포 환경과 수신자의 주요 클라이언트 확인	메일은 GIF·정적 썸네일, 블로그는 제어 가능한 도해·영상 검토
5	첫 프레임·alt·본문 대안·종료 상태 먼저 확정	정지하거나 이미지가 빠져도 설명이 성립하지 않으면 되돌아가
6	전체 재생이 5초 안에 이해 가능한지 확인	메일에서 불가능하면 정적 단계 도해+블로그 링크. 읽기 홀드를 줄여 억지 압축하지 마
7	주요 변화→주석→정지 순으로 배치	데이터 ID·축·단위와 카메라 구도를 먼저 고정
8	파일 크기와 최소 화면 가독성 확인	움직이는 면적·프레임률·색 수·해상도 순으로 조정. 라벨이 깨지면 정적 자산으로 복귀
9	실제 발송·CMS 게시 환경에서 테스트	미지원이면 폴백. 검증하지 못한 환경은 지원 보증하지 마

결정표

상황	쓸 효과·조합	이유·선택 조건	대체·중단 조건
단계 간 전달 경로가 헷갈림	연결선 드로우 → 현재 단계 하이라이트 → 전체 정지	진행 방향과 순서를 보여 줌. 단계 이름은 처음부터 고정	4단계 이상을 짧게 훑어야 하면 정적 번호 도해 또는 클릭 단계 진행 [S1]
동일 화면 수정 전후 비교	동일 구도 고정 + 단방향 와이프 + 차이 주석	공간 대응을 유지하고 바뀐 영역만 드러냄	서로 다른 화면·축척이면 나란히 정적 비교. 앞뒤 왕복 루프 피함
같은 항목의 순위·좌표 변화	ID 유지 점 이동·순위 재배치 → 도착 주석	객체 대응을 보존하는 전환을 활용. 실험적 근거는 차트 지각 과제 범위 [S2]	항목이 너무 많이 교차하면 선택 항목만 움직이거나 전후 표로 전환
특정 숫자·범위를 읽혀야 함	완성 차트 고정 + 주석 등장 또는 하이라이트	값이 바뀌는 연출 없이 읽기 위치 안내	카운트업이 실제 변화로 오인되면 삭제. 핵심 값은 항상 본문에도 표기
실제 시간 흐름이 설명 대상	x축 방향 리빌 + 현재 시점 표식 + 마지막 전체 차트	공개 순서를 시간 의미와 맞춤	선 길이 기준 드로우를 일정 시간 진행처럼 쓰지 마. 누락·불규칙 간격은 원자료대로
버튼 하나로 결과가 바뀜	고정 확대 인서트 + 커서 이동 → 클릭 표시 → 결과 컷	조작 대상과 결과를 연결. 실제 대기 생략은 명시	글자가 작거나 필요한 입력 단계가 많으면 블로그 시연으로 이동
복잡한 원리를 가르침	단계 분절 + 주석 리빌 + 사용자 다음 버튼	일시적 정보의 속도를 독자가 조절하게 함 [S1]	이메일에 긴 무한 반복 설명을 넣지 마. 요약 포스터로 연결
브랜드 분위기·행사 주목	정적 제목 우선, 필요하면 단회 밑줄·하이라이트	생산적 모션을 기본으로 하고 강한 표현은 드물게 사용 [S13]	CTA·날짜가 뒤 프레임에만 나오거나 독서 방해가 생기면 모션 제거
자동재생·이미지 다운로드가 불확실	정적 포스터 + HTML 요약 + “움직이는 도해 보기” 링크	전달 환경 실패에도 독자가 의미·다음 행동을 알 수 있음 [S3][S11]	재생을 켜야만 핵심 정보를 읽을 수 있는 설계 금지

연구 사례에서 가져올 조합

Heer·Robertson의 DynaVis 예시는 산점도에서 막대그래프로 바꿀 때 바로 모든 속성을 보간하는 방식과 단계적으로 변환하는 방식을 비교해 보여 줘. 단계 방식은 먼저 점을 새 x좌표에 옮기고 축을 바꾼 뒤, 점을 막대로 변환해. 가져올 판단은 대응 위치를 보여 준 다음 형태를 바꾸기야. 뉴스레터에서도 위치·축·형태를 동시에 바꾸기보다 하나씩 설명하는 편집안으로 써. 연구는 통제된 차트 과제에서 전환의 지각 효과를 다뤘고, 이메일 클릭률이나 모든 독자의 이해 향상을 보장하지 않아. [S2]

3. 구조 템플릿

시간은 모두 제안값이야. 이메일 템플릿은 첫 프레임을 단독 정적 요약으로 만들고 마지막에도 완성 상태를 남겨. 아래 구간 합계가 한 번 재생 시간이며, 반복까지 포함한 총 시간을 따로 계산해.

A. 이메일 3단계 과정 도해: 4.5초 단회

본문 배치: 문제 문장 → 정적 요약을 포함한 GIF → 단계별 설명 3문장 → 자세한 설명 링크.

시간	화면·효과	읽기 역할
0.0~0.8초	세 단계·화살표·결론이 모두 보이는 완성 요약	첫 프레임만 보여도 설명 성립
0.8~1.4초	첫 연결선 강조 드로우, 단계 1 라벨 유지	입력에서 처리로 가는 방향
1.4~2.0초	두 번째 연결선 강조 드로우, 단계 2 라벨 유지	처리에서 결과로 가는 방향
2.0~2.5초	결과 영역 주석 등장	결과에서 읽을 지점 하나
2.5~4.5초	완성 도해 홀드 후 종료	처음 구조와 결과를 함께 확인

새 정보는 GIF에만 넣지 마. 단계를 설명하는 글이 길면 모션을 압축하지 말고 정적 번호 도해를 써. 이메일 로딩 중 단회 재생을 놓쳐도 본문 설명이 남아야 해.

B. 이메일 전후 비교: 4초 단회

본문 배치: 바뀐 점 한 문장 → 동일 영역 비교 GIF → 전후 핵심 차이 2행 → 원문·블로그 링크.

시간	화면·효과	읽기 역할
0.0~0.8초	전후 핵심 차이를 보여 주는 작은 비교 인셋·라벨 상시 표시. 주 화면은 이전 상태	첫 프레임에서도 전후 결론 확인
0.8~1.4초	주 화면에 단방향 와이프 0→100%	같은 위치의 변경을 발견
1.4~1.8초	바뀐 영역 하이라이트 1개 등장	관찰해야 할 차이 지정
1.8~4.0초	이후 상태와 비교 인셋 고정, 종료	결과와 전후 차이를 다시 읽음

인셋 글자가 작아지면 GIF를 버리고 전후 이미지를 세로로 배치해. 되돌아가는 루프는 수정이 취소되는 인상을 줄 수 있으니 쓰지 마.

C. 데이터 뉴스레터·블로그 공용: 4.4초 단회

본문 배치: 결론·기간·단위 → 완성 차트 → 동작 설명·원자료 표. 메일은 GIF, 블로그는 동일 포스터에서 선택 재생 가능.

시간	화면·효과	읽기 역할
0.0~1.0초	완성 막대·축·값·기간·출처와 결론 표시	처음부터 실제 수치 확인
1.0~1.5초	비교할 두 막대 주변에 강조 테두리 순차 등장	비교 대상 지정, 막대 길이는 유지
1.5~2.0초	차이값 주석 리빌	계산된 차이와 단위 확인
2.0~4.4초	차트·주석 고정 후 종료	판단을 마칠 읽기 시간

수치 근거를 읽히는 목적이면 막대 성장·카운트업보다 이 템플릿을 먼저 써. 원자료로 차이값을 계산하고 비율의 분모·기준 기간을 표시해. 순위 변화가 주제일 때만 ID 대응 이동으로 교체하고 전후 표를 남겨.

D. 블로그 UI 시연·설명 도해: 클릭 재생 12초

본문 배치: 결과 약속 문장 → 정적 포스터·재생 버튼 → 단계 설명 → 시연 → 요약·정적 단계 이미지. 이메일에는 포스터와 링크만 배치.

시간	화면·효과	읽기 역할
재생 전	완성 결과 포스터, 재생·정적 설명 선택	재생 없이도 목표를 확인
0~2초	전체 UI 정지, 고정 확대 인서트	어디서 조작하는지 확인
2~3초	커서 이동 0.7초 + 클릭 표시 0.3초	입력 행동 확인
3~4초	결과 컷 또는 대응 상태 변경	행동과 결과 연결. 대기 생략 시 표시
4~7초	결과 홀드 + 주석 리빌 1회	달라진 부분 설명
7~9초	입력·결과 정적 비교	앞 상태를 기억에만 맡기지 않음
9~12초	요약 홀드, 종료	다음 행동을 읽음

재생·일시정지·다시보기와 키보드 조작을 제공해. 사용자가 재생을 시작해도 중간 읽기 속도를 조절할 수 있게 해. 단계가 늘면 12초에 억지로 맞추지 말고 단계 버튼 방식으로 바꿔. 모션 감소에서는 포스터·정적 단계만 제공해. GIF를 재생 도구로 쓴다면 숨김만으로 일시정지를 흉내 내지 말고 정적 전환 또는 제어 가능한 포맷을 선택해.

4. 권장 효과·파라미터와 피할 것

이징·시각 기준

이징 값은 Carbon 공식 곡선을 가져오고, 아래 효과 시간·거리·프레임률은 본문 삽입용 제안으로 조정했어. Carbon의 UI 모션 지침을 이메일 학습효과의 실증 근거로 확대하지 마. [S13]

이름	값	쓸 곳
LIN	`linear` 또는 `cubic-bezier(0,0,1,1)`	불투명도, 진행 경로, 실제 시간에 대응하는 리빌
STD	`cubic-bezier(0.2,0,0.38,0.9)`	대응 객체의 위치·상태 이동
ENT	`cubic-bezier(0,0,0.38,0.9)`	주석·강조 진입
없음	즉시 상태 교체	컷, 모션 감소 대안

표의 px는 최종 표시 크기 기준이야. GIF 원본을 2배 크기로 만들면 좌표·선 두께도 그에 맞춰 변환해. 600px 원본을 300px로 표시하면 원본의 24px 글자는 표시상 12px가 되므로 모바일에서 다시 확인해.

접근성 기준: 일반 텍스트 대비 4.5:1, 큰 텍스트 3:1을 확인해. 큰 텍스트 여부는 실제 표시 크기로 판정하고, 색만으로 전후·선택·증감을 구분하지 마. 라벨·기호·패턴을 함께 써. 블로그 조작 버튼은 키보드 접근과 보이는 포커스를 유지해. [S14]

효과 선택 범위

효과·로컬 사전 용어	파라미터 시작 범위	함께 쓸 것	제한·이유
하이라이트 스윕·밑줄 드로우	250~500ms, ENT, 강조 1곳, 선 2~3px	고정 라벨 + 최종 강조 유지	글자 관통·대비 저하·링크 오인 금지
주석 등장·Annotation reveal	200~400ms, ENT 또는 LIN, 이동 0~8px	완성 도해 → 주석 → 1.5~2.5초 홀드	이동이 목적이 아니면 fade만 사용. 핵심 설명은 본문에도 제공
선 그리기·Path draw	연결 하나 400~800ms, LIN, 선 2~3px	단계 번호 + 화살표 + 현재 단계 강조	선 길이와 실제 시간축 진행을 혼동하지 마
와이프·Wipe	400~700ms, STD, 단방향 0→100%	동일 구도 + 전후 라벨 + 차이 주석	카메라 이동과 동시에 쓰지 마. 동일 영역 비교에 한정
점 이동·순위 재배치	600~1000ms, STD, 추적 대상 1~3개부터 시작	ID 고정 + 전후 값 + 도착 주석	중간 위치가 관측값인 것처럼 보이지 않게 표시. 객체 대응 근거 [S2]
막대 성장	500~800ms, LIN 또는 STD, 항목 시차 0~80ms	고정 축·단위 + 최종 수치 + 정적 표	첫 프레임이 빈 차트라면 이메일에 채택하지 마. 클릭 재생 블로그에서 우선 검토
커서 이동·클릭 리플	이동 400~800ms, STD, 클릭 150~300ms, 리플 직경 16~24px	고정 확대 인서트 → 클릭 → 결과 컷	클릭 시점과 UI 변화 일치. 실제 성능·대기시간으로 오인시키지 마
하드 컷·고정 인서트	컷 0ms, 세부 홀드 1~2.5초	전체 구도 → 고정 세부 → 결과	작은 UI를 팬·줌으로 쫓기보다 읽을 크기로 먼저 크롭
짧은 크로스페이드	150~300ms, LIN	비문자 도해의 상태 교체	글자·숫자 두 장이 겹치면 컷으로 대체
모션 축소·정적 대안	이동 0px, scale 1, 즉시 교체 기본	최종 값 + 번호 도해 + 사용자 단계 선택	GIF 교체까지 확인. 단순 CSS 정지는 충분하지 않을 수 있음 [S10]

인코딩·독서 예산

항목	제안 시작값	초과 시 조치
이메일 GIF	300~800KB, 단회 2~4.5초	1MB 초과 시 움직임 면적·프레임 수부터 줄이고 정적 링크 검토 [S6]
프레임률	도해 8~12fps, 짧은 커서 이동 12~15fps부터 시험	움직임이 뚝뚝 끊기면 경로·속도 조정 후 필요 구간만 프레임 추가. 30fps를 무조건 쓰지 마
색·배경	단색 배경, 제한된 색, 움직이지 않는 영역 최대화	사진·그라디언트·블러·노이즈가 많으면 정적 포스터+블로그 영상 검토
본문 폭	실제 템플릿 콘텐츠 폭에 맞춤, 모바일 320~375px 뷰포트에서 확인	작은 라벨을 더 압축하지 말고 도해를 단순화하거나 별도 설명으로 이동
라벨	최소 표시 14~16px부터 시험, 한글 복잡도에 따라 확대	원본 수치보다 실제 모바일 렌더 결과 우선
변화 후 홀드	핵심 단계 0.8~1.5초, 결론 1.5~2.5초부터 시험	읽지 못하면 길이를 늘리고 메일은 정적으로 전환
동시 변화	주 효과 1개 + 보조 강조 1개 이하	차트·타이핑·줌이 겹치면 순서 분절
총 재생 계산	`각 프레임 표시시간 합 × 실제 전체 재생 횟수`	인코더 loop 값의 의미가 다를 수 있으니 실제 재생 확인. 5초 넘으면 제어 또는 정적 전환 [S9]

가변 프레임 지연을 쓰면 긴 홀드를 같은 정지 프레임 여러 장으로 복제할 필요가 없어. 메일 편집기·발송 서비스가 GIF를 리사이즈하거나 재인코딩했다면 최종 전송된 파일의 프레임 지연·반복·용량을 다시 확인해.

피할 것

피할 것	이유·근거	바꿀 선택
무한 반복, 3초 GIF를 여러 번 반복해 5초 넘기기	본문 독서와 병행하는 자동 움직임의 제어 문제 [S8][S9]	단회 종료 또는 정적 포스터
모션 뒤 프레임에만 결론·CTA·날짜 배치	첫 프레임만 표시될 수 있음 [S3]	첫 프레임 요약과 HTML 문장·링크
타자기·스크램블·단어 릴레이로 본문 공개	읽을 정보가 일시적이고 변화를 따라가야 함. 연구 기반 편집 판단 [S1]	완성 문장 고정 + 짧은 핵심어 강조
수치 overshoot·bounce·elastic, 의미 없는 카운트업	데이터 범위 초과·실제 변화 오인 위험. 정직한 데이터 표현 원칙에 따른 제안	실제 값 고정, 강조 테두리 또는 주석
휩팬·큰 줌·패럴랙스·화면 흔들림	읽기 위치 변화·비필수 움직임을 늘림. 모션 억제 원칙 [S10]	고정 인서트·즉시 컷·작은 주석
번쩍임·강한 적색 플래시	지속시간과 별개의 광과민 위험 기준 [S12]	밝기 변동 없는 강조
GIF 재생을 위해 사용자 접근성 설정 해제 유도	설정에 따라 멈추는 환경에서도 의미를 전달해야 함 [S3][S10]	정적 대안·본문 설명
파일을 줄이려고 글자·축·단위 삭제	설명 목적이 무너짐 [S11]	효과를 줄이고 정적 차트 유지
그림 전체를 클릭 링크로만 만들고 목적을 숨김	기능 이미지의 alt는 기능·목적을 전달해야 함 [S11]	별도 “단계별 도해 보기” 텍스트 링크

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

프롬프트 1. 이메일 과정 도해

뉴스레터·블로그 모션 활용 루트의 템플릿 A로 이메일 본문을 설계해.
주제는 “문서 업로드 → 자료 검색 → 출처 포함 답변”, 독자는 AI 업무 초보자야.
먼저 정적 요약 도해와 단계별 HTML 설명 3문장을 작성해.
모션은 연결선 강조 드로우와 결과 주석만 사용해. 카메라는 고정해.
4.5초 단회 GIF를 계획하고 첫 프레임·마지막 프레임 모두 전체 단계와 결론을 보여 줘.
폭은 실제 템플릿 콘텐츠 폭에 맞추고 300~800KB를 목표로 삼아.
프레임별 지연·전체 재생 횟수·총 시간·최종 파일 바이트를 보고해.
이미지 차단·첫 프레임 표시·모바일 축소에서도 설명이 성립하게 해.
alt, 실제 HTML 설명, “단계별 설명 보기” 링크 문구를 함께 제공해.
5초 안에 이해하기 어렵거나 1MB를 넘으면 정적 도해+블로그 링크로 바꿔.
제작 제안값과 공식 제약을 구분하고, 검증하지 못한 클라이언트는 밝혀.

프롬프트 2. 데이터 뉴스레터

제공한 월별 데이터로 뉴스레터 본문 도해를 만들어.
원자료가 없거나 단위·기간·분모가 불분명하면 수치를 만들지 말고 먼저 확인해.
독자가 답할 질문은 “이번 달에 가장 크게 바뀐 항목은 무엇인가”야.
루트의 템플릿 C를 적용해 완성 차트를 첫 프레임부터 표시해.
막대 성장·카운트업 대신 비교 대상 강조와 차이값 주석만 사용해.
4.4초 단회 종료, 고정 축·최종 수치·기간·출처를 유지해.
GIF와 같은 의미의 정적 차트, 핵심 결론 문장, 원자료 HTML 표를 제공해.
증감률과 퍼센트포인트를 구분하고 계산 근거를 기록해.
이메일 HTML 크기와 외부 GIF 바이트를 따로 측정해.
모바일에서 라벨이 작으면 GIF를 정적 차트로 바꿔.
호환성·파일 크기·반복·첫 프레임·이미지 차단 검사 결과를 함께 보고해.

프롬프트 3. 블로그 시연과 이메일 연결

블로그에서 “필터 선택 전후 결과가 어떻게 달라지는지” 설명하는 모듈을 설계해.
뉴스레터·블로그 모션 활용 루트의 템플릿 D를 적용해.
정적 포스터를 기본으로 두고 클릭하면 12초 시연을 재생하게 해.
전체 구도 → 고정 확대 인서트 → 커서·클릭 → 결과 컷 → 전후 비교 → 요약 순서로 배치해.
실제 시연과 가상 재현을 구분하고 대기 구간을 잘랐다면 표시해.
재생·일시정지·다시보기와 키보드 조작을 제공해.
prefers-reduced-motion에서는 정적 포스터·단계 이미지·본문 설명을 제공해.
이메일 버전은 결과 요약 포스터와 “필터 동작 보기” HTML 링크로 작성해.
스크립트가 실행되지 않거나 영상이 로드되지 않아도 설명과 링크가 남게 해.
효과별 시간·이징·정적 대안과 CMS 게시 후 검수 결과를 보고해.

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

상태는 통과·실패·미검증·해당 없음 중 하나로 기록해. 핵심 전달·접근성 항목이 실패하면 정적 대안으로 바꾸고 재검수해. 실제 환경 미검증을 통과로 표시하지 마.

검사	통과 기준	확인 방법
목표	독자가 답할 질문 하나와 모션의 이유가 명시됨	기획 문장과 최종 화면 대조
정적 완결	첫 프레임·종료 프레임·본문 각각에서 결론과 핵심 관계 확인 가능	GIF 첫 장·마지막 장 별도 보기, 본문만 읽기
정보 대안	alt·캡션·단계 설명·수치표가 도해 의미를 보존	이미지 차단과 스크린리더 읽기 순서 확인
실제 HTML	제목·본문·CTA가 이미지에만 있지 않음	이미지 로딩 중지 후 확인
의미 대응	단계 번호·ID·축·단위·기간이 전환 전후 일치	중간 프레임과 전후 상태 대조
수치 정직성	최종값 원자료 일치, 중간 상태가 관측값으로 오인되지 않음	원자료 계산·표 대조
시간·반복	이메일은 반복 포함 총 재생 5초 이내 종료	프레임 지연 계산 + 실제 수신 화면 타이머 확인
종료 유지	마지막에 완성 상태 유지, 루프·빈 화면 복귀 없음	GIF 파일과 서비스 재가공본 각각 재생
제어	블로그에서 재생·정지·다시보기와 키보드 사용 가능	Tab·Enter·Space 및 재생 중 본문 탐색 확인
모션 감소	OS 설정을 켜면 정적 의미가 남고 비필수 움직임 억제	GIF 자산 교체·JS 타임라인·영상 자동 시작까지 확인
번쩍임	이 루트의 제안인 플래시 0회 만족	전환·클릭·반복 경계 프레임 확인
독서 흐름	자동 움직이는 모듈이 같은 화면에서 경쟁하지 않음	본문을 읽으며 모바일 스크롤 점검
가독성	축·라벨·주석이 모바일 실제 크기에서 읽힘	320~375px 뷰포트와 실제 이메일 앱 확인
대비·색 대안	텍스트 대비 충족, 색 없이도 전후·선택·증감 구분 가능	표시 크기별 대비 측정, 라벨·기호 확인, 다크 모드 확인
이미지 용량	제안 예산 충족, 1MB 초과라면 재설계 또는 근거 기록	최종 호스팅·전송 파일 바이트 측정
HTML 잘림	최종 메일에서 전체 결론·링크·하단 정보 노출	ESP 추적 코드 포함 테스트 발송, Gmail 확인
수신 환경	주요 클라이언트에서 재생 또는 의미가 완결된 폴백 확인	Gmail 웹·모바일, Outlook Windows, Apple Mail 중 대상 환경. 버전·OS·설정·검수일 기록
CMS 환경	실제 게시 화면에서도 포스터·레이아웃·제어 유지	에디터의 태그 제거·재인코딩·로딩 실패 확인
재생 실패	동작하지 않아도 사용자가 다음 행동을 알 수 있음	정적 이미지·스크립트 비활성·영상 로드 실패 상태 확인

출처 목록

발행·수정일이 본문에서 확인되지 않은 상시 문서는 “날짜 미표기”로 기록했어. 검색 엔진의 크롤링 날짜를 발행일로 쓰지 않았어. 아래 웹 자료는 모두 2026년 9월 30일 검색·접근 확인 기준이야. WCAG 이해 문서·기법은 해설·구현 예시이며 규범 본문과 구분해서 읽어.

ID	출처·종류	발행·수정·테스트 날짜	URL	적용 범위
S1	Tversky·Morrison·Bétrancourt, Animation: can it facilitate? 연구 리뷰 원문	2002년, IJHCS 57, 247~262. 개정 원고 승인 2002년 4월 4일	논문 PDF	정적 자료 우선 검토, 개념과 변화의 일치, 지각 가능성·단계화. 이메일 성과 연구 아님
S2	Heer·Robertson, Animated Transitions in Statistical Data Graphics. 저자 연구실 자료·연구 사례	2007년, IEEE TVCG 13(6), 1240~1247	UW Interactive Data Lab	객체 대응·단계 전환, DynaVis 사례. DOI 10.1109/TVCG.2007.70539
S3	Microsoft Support, The animated graphic in my e-mail message doesn't work. 공식 지원 문서	날짜 미표기. 적용 제품 Microsoft 365·Outlook 2024·2021 명시	Microsoft 공식 지원	기본 GIF 재생과 설정에 따른 첫 프레임 표시
S4	Mailchimp, Limitations of HTML Email. 공식 제작 가이드	날짜 미표기	HTML 이메일 제약	JS·iframe·임베디드 영상 의존 회피. 모든 현재 클라이언트의 상세 지원표로 쓰지 않음
S5	Can I email, GIF image format. 업계 호환성 테스트 자료	페이지의 마지막 테스트 2020년 2월 6일	GIF 지원 테스트	비지원·제한 재생 주석 참고. 2026년 전 환경 보증으로 사용하지 않음
S6	Mailchimp, About Template Images. 공식 가이드	날짜 미표기	템플릿 이미지	이미지 1MB 권장, 일반적인 최대 600px 템플릿. 공급자 기준
S7	Mailchimp, Gmail is clipping my email. 공식 지원 문서	날짜 미표기	Gmail 이메일 잘림	102KB 메시지 크기와 HTML·텍스트·URL·추적 코드 설명
S8	W3C WAI, Understanding SC 2.2.2: Pause, Stop, Hide. 공식 기준 해설	날짜 미표기, WCAG 2.2 해설	정지·일시정지·숨김	자동 움직임의 조건·예외·정지 수단
S9	W3C WAI, Technique G152. 공식 구현 기법	날짜 미표기, WCAG 2.2 기법	GIF를 5초 이내 정지	프레임 지연 합·재생 횟수·총 지속시간 계산
S10	W3C WAI, Technique C39. 공식 구현 기법	날짜 미표기, WCAG 2.2 기법	모션 감소 설정 적용	사용자 선호 반영, 비필수 인터랙션 모션 억제
S11	W3C WAI, Images Tutorial·Complex Images. 공식 접근성 가이드	날짜 미표기	이미지 대안, 복잡한 도해	정보·기능 이미지 alt, 상세 설명·데이터 대안
S12	W3C WAI, Understanding SC 2.3.1: Three Flashes or Below Threshold. 공식 기준 해설	날짜 미표기, WCAG 2.2 해설	번쩍임 기준	1초 3회 및 일반·적색 번쩍임 임계값
S13	IBM Carbon Design System, Motion overview. 공식 디자인 시스템	날짜 미표기	모션·이징 가이드	productive·expressive 구분, standard·entrance 곡선, 과도한 장식 억제
S14	W3C, Web Content Accessibility Guidelines 2.2. 규범 본문	W3C Recommendation 2024년 12월 12일 판 URL	WCAG 2.2 규범 본문	접근성 성공 기준의 규범적 조건 확인

로컬 자료	확인 범위	이 루트에 가져온 내용
`../references/dictionary/README.md`	실제 파일 확인	사전의 범주·연결 구조
`../references/dictionary/2-transitions-camera.md`	실제 파일 확인, 문서 확인일 2026년 9월 30일	컷·와이프·인서트·카메라 구분, 공통 이징 명칭
`../references/dictionary/3-type-data-ui.md`	실제 파일 확인	하이라이트·선 그리기·주석·객체 대응·정적 대안 용어. 영상용 수치를 이메일 규격으로 그대로 복사하지 않음

사전 인덱스가 참조하는 「1 애니메이션 원칙과 모션 기본기」·「4 설명 영상 연출과 학습 원리」 파일은 조사 시점 해당 폴더에서 발견되지 않았어. 내용은 추정하지 않았고, 필요한 원칙은 위 공식 자료·연구로 보완했어.