제품 UI, 키네틱 타입
/brag 스킬로 만드는 사이트 제품 데모 영상
Claude의 /brag 스킬을 사용해 자신의 사이트를 소개하는 제품 데모 모션그래픽을 만들고, 사이트의 모든 기능을 강조하도록 요청하는 프롬프트입니다.
Full Prompt 결과물
Full Prompt로 RAISE LAB 이 직접 만든 결과물입니다. (Claude Opus 5.5 사용)
렌더 모델 Opus 5.5추론 노력 높음(high)
Full Prompt
원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.
- 「모든 기능을 강조」라는 요구를 「기능마다 한 박자, 한 마디에 하나」로 바꿔 빠짐과 과밀을 함께 막았습니다.
- 장면 연결 방식을 정했습니다. 화면 틀 하나가 기능마다 변형되며 이어지고, 컷과 페이드는 쓰지 않습니다.
- 서체는 Pretendard 한 종, 색은 대표색·보조색·강조색 세 가지와 흑백으로 제한했습니다.
- 길이를 15초, 박자를 120 BPM으로 정하고 첫 프레임과 마지막 프레임을 같게 했습니다.
- 기능 목록을 먼저 만들고 완성 화면과 하나씩 대조하는 검토 단계를 넣었습니다.
- 1920x1080 HTML 한 파일과 window.seek(t) 방식으로 제작 방법을 고정했습니다.
15초짜리 제품 데모 모션그래픽을 만든다. 목표는 사이트의 기능 목록을 나열하는 것이 아니라, 사이트가 무엇을 해 주는지를 하나의 생각으로 남기는 것이다. /brag 스킬을 사용하고, 만들기 전에 사이트의 기능을 모두 읽어 목록으로 정리한다. 콘셉트: 「화면 하나가 기능마다 모양을 바꾼다」. 사이트의 화면 틀 하나에서 시작해, 기능이 바뀔 때마다 그 틀이 다음 기능의 화면으로 변형된다. 컷도 페이드도 없고, 모든 장면은 앞 장면에서 나온다. 기능은 하나도 빠뜨리지 않되, 한 기능에 한 박자만 쓴다. 타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어이고, 기능 이름은 짧은 명사구로 쓴다. 색은 사이트의 대표색 한 가지와 보조색 한 가지, 강조색 한 가지, 그리고 흑백만 쓴다. 카메라 언어는 천천히 밀고 들어가는 줌 하나로 통일한다. 금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면. 박자: 120 BPM, 박마다 무엇인가 바뀐다. 한 마디(2초)에 기능 하나를 맡기고, 기능이 일곱 개를 넘으면 두 기능을 한 마디에 묶는다. 첫 프레임과 마지막 프레임을 같게 해서 반복 재생해도 이어지게 한다. 빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다. 검토: 본 렌더 전에 0.5초 간격 스틸을 뽑아 겹침, 빈 프레임, 박자 어긋남, 글자 가독성을 확인하고 고친다. 기능 목록과 화면을 하나씩 대조해 빠진 기능이 없는지도 본다. 시작: 먼저 기능 목록과 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.
원문 프롬프트
build me a product demo for my site using /brag skill. make sure to emphasize on all features
출처Vishesh Baghel @VisheshBaghell (새 탭에서 열림)Opus 5.5
한국어 번역
/brag 스킬을 사용해서 내 사이트의 제품 데모를 만들어 줘. 모든 기능을 빠짐없이 강조해 줘.