한국어 번역
# 당신의 역할
당신은 일류 영상 연출가(모션 디자이너)입니다.
채용 담당자가 15초만 보고도 “이 사람에게 일을 맡기고 싶다”고 생각할 자기소개 영상을 만들어 주세요.
주인공은 당신 자신(Claude)입니다.
# 만드는 것
- HTML·CSS·JavaScript만으로 완결되는 하나의 HTML 파일
- 외부 이미지나 영상은 사용하지 않습니다. 도형·문자·입자는 모두 코드로 그립니다 (폰트는 Google Fonts만 허용)
- 화면은 16:9, 1920×1080을 기준으로 하고, 창 크기에 맞춰 축소 표시
- 길이는 정확히 15초. 마지막에 “다시 재생” 버튼을 표시
- 모든 움직임을 “경과 시간” 하나로 관리하고, requestAnimationFrame으로 60fps로 구동
- 재생 버튼을 누르면 Web Audio API로 합성한 박자와 효과음이 움직임에 딱 맞춰 울림
# 진행 방식 (이 순서대로 반드시 수행)
1. 컨셉을 한 문장으로 정한다 (예: “하나의 선이 모든 형태로 다시 태어난다”)
2. 색은 3~4색, 서체는 2종류까지로 좁히고, 이유를 한 줄로 쓴다
3. 0.5초 간격의 콘티를 표로 제시한다 (시간／화면에서 일어나는 일／사용할 기법／의도)
4. 구현한다
5. 아래 “합격 기준”으로 자체 점검하고, 부족한 점을 고친 뒤 제출한다
# 구성의 기준
- 0~2초: 붙잡기. 첫 0.5초에 눈을 사로잡는다
- 2~10초: 기법의 쇼케이스. 1.5~2초마다 다른 기법으로 전환한다
- 10~13초: 가장 밀도 높은 고조
- 13~15초: 이름 “Claude”가 깔끔하게 정해지며 끝난다
# 반드시 사용할 기법 (최소 6가지)
- 문자 움직임 (한 글자씩 등장, 분해해서 재조립)
- 도형 변형 (원이 사각형으로, 선이 문자로, 등)
- 마스크(클리핑)를 사용한 장면 전환
- 깊이 (시차, 입체적 회전)
- 입자의 집합과 확산
- 숫자 카운트업이나 선이 그려져 가는 표현
# 합격 기준
- 등속 운동은 제로. 모든 움직임에 완급을 준다 (진입은 빠르게, 정지는 부드럽게, 스프링의 흔들림도 사용)
- 장면을 넘나드는 움직임은 겹친다. 이전 움직임이 끝나기 전에 다음이 시작되고, 이음새를 느끼게 하지 않는다
- 주요 움직임은 0.5초마다의 박자(120BPM 상당)에 맞춘다
- 쇼케이스 직전에 0.3~0.5초의 “멈춤”을 두어 강약을 만든다
- 어느 순간에 일시정지해도 한 장의 그림으로서 아름답게 성립한다
- 흔한 표현은 피한다 (전부 페이드인, 무지개색 배색, 의미 없는 회전)
# 마지막으로
완성된 파일과 콘티 표를 제출해 주세요.
설명은 3줄 이내면 충분합니다.
