코드로 제작된 애니메이션 차트
빈 페이지에서 시작하는 세 가지 프롬프트: 만들기, 다시 살펴보기, 내보내기.
시작하기 전: brand.md와 MOTION.md 파일이 있다면 읽으십시오. 파일이 없다면 먼저 brand-intake를 실행하거나, 헥스 코드, 폰트, 로고 파일을 요청하십시오. 이 지침 없이 결과물을 '브랜드에 맞춤'이라고 부르지 마십시오.
1단계: 숫자를 요청한 후 기다리십시오
제목, 레이블, 정확한 값, 그리고 이것이 실제 결과인지 샘플 데이터인지 확인하십시오. 샘플 데이터는 모든 프레임에 "일러스트 데이터" 레이블이 표시됩니다. 숫자를 반올림하거나, 형식을 바꾸거나, 추가하지 마십시오.
프롬프트 1: 만들기
LinkedIn 게시물용 애니메이션 그래픽 하나를 원합니다. 브라우저에서 열 수 있는 단일 HTML 파일로 만드십시오.
제목: "[제목]". [샘플 데이터인 경우: "일러스트 데이터"를 계속 표시하십시오.]
값: [레이블 1: 값 1], [레이블 2: 값 2], ...
애니메이션은 네 가지 상태로 구성됩니다:
1. 시작: [처음 모습].
2. 변화: [움직이는 한 가지 요소]. 어떤 것도 사라지고 교체되지 않습니다.
3. 유지: 완성된 차트, [핵심 값]에 레이블이 표시됨.
4. 복귀: 시작 지점으로 부드럽게 돌아가며, 루프에 끊김이 없습니다.
타이밍: 총 8초. 변화에 약 2초, 유지에 4초, 복귀에 1.5초.
디자인: 배경 [BG], 텍스트 [TEXT], 강조 [ACCENT], [FONT]. 외부 폰트나 이미지 사용 금지. 그라데이션, 글로우, 바운싱 효과 금지.
크기: 1080 x 1350 픽셀.
제작 규칙:
- 시간만으로 모든 프레임을 계산하십시오. window.seek(초)를 추가하십시오.
- 제목, 레이블, 축은 절대 움직이지 않습니다. 차트만 변경됩니다.
- 마지막 프레임은 첫 번째 프레임과 정확히 일치해야 합니다.
만든 후, 0초, 1초, 2초, 4초, 7초 시점의 스크린샷을 찍으십시오. 텍스트 겹침이나 잘린 부분이 없는지 확인하십시오. 발견한 문제를 수정하고 무엇을 변경했는지 알려주십시오.
프롬프트 2: 다시 살펴보기
다섯 개의 캡처된 프레임과 루프 경계를 검사하십시오. 값이 그대로 유지되는지, 레이블이 읽기 쉬운지, 겹치는 부분이 없는지, 각 요소가 적절한 시점에만 나타나는지 확인하십시오. 실제로 관찰된 문제만 보고하십시오. 발견한 문제를 수정하고, 이전 버전을 보존한 후 동일한 프레임을 다시 캡처하십시오. 문제가 발견되지 않으면 그렇게 말하고 수정 사항을 임의로 만들지 마십시오.
프롬프트 3: 내보내기
이제 이 차트를 게시 가능한 비디오와 GIF로 변환하십시오. 이 컴퓨터에 이미 설치된 도구를 사용하십시오. 설치되지 않은 것이 필요하면, 설치하기 전에 중단하고 무엇이 필요한지 알려주십시오. MP4(1080 x 1350, 8초)와 영원히 반복되는 GIF를 만들어 주십시오. 그런 다음 완성된 GIF에서 세 개의 프레임을 보여주어 제대로 나왔는지 확인할 수 있게 해주십시오.