프런트엔드 실력을 보여 주는 30초 모션그래픽과 인터랙티브 페이지

Full Prompt

원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.

• 원문이 모델에게 맡긴 주제를 「커서 한 줄이 화면 전체가 된다」라는 하나의 콘셉트로 정했다.
• 사용자 정보를 알 수 없으므로 개인 사실을 지어내지 않고 작업대라는 주제를 고정했다.
• 서체 Pretendard 한 종, 한국어 화면 글자, 포인트 두 색과 흑백으로 시각 규칙을 정했다.
• 30초를 120 BPM 15마디로 나누고 마디마다 기법 하나, 첫 끝 프레임 일치를 요구했다.
• 영상과 인터랙티브 HTML을 한 파일로 묶고, 마우스 위치가 seek 시간을 정하는 방식으로 구현을 정했다.
• 파티클 폭발, 글로우, 바운스 이징 등 흔한 장식을 금지하고 스틸 검토 단계를 넣었다.

30초짜리 모션그래픽 영상과, 같은 장면을 직접 만져 보는 인터랙티브 모드를 HTML 한 파일에 만든다. 목표는 프런트엔드 실력을 기능 목록이 아니라 하나의 생각으로 남기는 것이다.
콘셉트: 「커서 한 줄이 화면 전체가 된다」. 깜박이는 커서가 입력창이 되고, 입력창이 버튼으로, 버튼이 카드로, 카드가 대시보드로 자라난 뒤 다시 커서 한 줄로 돌아온다. 모든 장면은 앞 장면에서 변형돼 나오며 컷은 없다. 사용자에 대한 정보가 없으므로 개인 사실을 지어내지 않고, 만드는 사람의 작업대라는 주제를 직접 정한다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어. 색은 포인트 두 가지와 흑백만.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 120 BPM, 한 마디 2초, 총 15마디. 마디마다 기법 하나(마스크 리빌, 레이아웃 변형, 선 그리기, 숫자 카운트 등)를 겹치지 않게 쓴다. 첫 프레임과 마지막 프레임을 같게 맞춘다.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다. 인터랙티브 모드는 같은 seek 함수를 쓰되 마우스 가로 위치가 시간을, 세로 위치가 강조 정도를 정한다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다. 인터랙티브 모드도 양 끝과 중간에서 깨지지 않는지 본다.
시작: 먼저 마디별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

用你最强的思维和能力，根据对我的了解，自行寻找我可能喜欢的主题，制作一个30s的视频还有互动html，尽可能的展示你的前端能力！

출처geekzen @DemitiyaGeekzen (새 탭에서 열림)·Opus 5.5