키보드 — 세 번의 입력으로 만드는 리듬

장면별 콘티

완성된 음악 포함 MP4에서 추출한 화면입니다. 구간의 끝은 다음 장면 시작 프레임이며, 전환 효과는 두 구간에 걸쳐 이어질 수 있습니다.

장면 1 · 0초–1.7초 · 0–50f

손끝의 질감

큰 키캡 이미지와 왼쪽 카피를 보여주며 입력 전의 질감에 집중합니다.

움직임 — 제품 이미지를 -5도 기울이고 x 좌표를 조금씩 옮깁니다. 별도 EdgeLight를 얹습니다.

전환 — 49–62f 도입 문구 퇴장과 51–79f 제품 전체 공개가 이어집니다.

음향 — 짧은 합성 플럭과 탄력 있는 베이스가 리듬을 시작합니다. 실제 키보드 녹음은 아직 들려주지 않습니다.

연출 판단 — 입력 도구라는 기능보다 손끝의 접촉이라는 감각을 먼저 보여줍니다. 실제 스위치 구조나 타건 성능의 시연은 아닙니다.

장면 2 · 1.7초–5.233초 · 51–156f

몰입의 도구

밝은 배경 위에 키보드 전체와 두 줄 메시지를 나눠 놓습니다.

움직임 — 56f부터 제품이 진입하고 157f부터 중앙 배치로 이동합니다. 하이라이트는 제품 알파 안에서만 지나갑니다.

전환 — 157–188f에 어두운 구리빛 엔딩과 INPUT 워드마크가 나타납니다.

음향 — 54f의 공개 큐에 새 프레이즈를 놓고 다음 타이핑 구간을 준비합니다.

연출 판단 — 전체 레이아웃을 읽을 시간을 둔 다음 작은 키 움직임에 집중합니다. 제품의 전체 이동과 키 눌림은 별도 효과입니다.

장면 3 · 5.233초–8초 · 157–239f

세 번의 입력과 한 문장

제품 위의 세 키 영역이 짧게 눌리고 하단 문장이 글자 수에 따라 나타납니다.

움직임 — 188–221f에 문자열을 slice로 노출합니다. 192/200/208f부터 PNG의 다각형 영역을 3px까지 아래로 옮겼다가 되돌립니다.

전환 — 세 키 효과는 각 7f 정도의 작은 구간입니다. 문구 완성 221f 뒤에는 커서가 228–239f에 사라집니다.

음향 — 192/200/208f(6.400/6.667/6.933초)에 합성 키 효과음을 놓습니다. 세 소리가 모든 글자에 1:1 대응하는 것은 아닙니다.

연출 판단 — 짧은 반복으로 리듬을 만들고 마지막에 문장을 정착시킵니다. 실제 키 입력·스위치 물리·타건 녹음이 아닌 레이어 애니메이션입니다.

핵심 이벤트 큐

• 54f / 1.8초 — 전체 제품 공개 음악 큐
• 192f / 6.4초 — 첫 키 동작·효과음
• 200f / 6.667초 — 두 번째 키 동작·효과음
• 208f / 6.933초 — 세 번째 키 동작·효과음
• 221f / 7.367초 — 문구 완성

제작 해설

1. 전체 이동과 키 동작은 다른 책임

제품 전체는 위치·폭·기울기를 보간합니다. 키 눌림은 그 위에 동일한 PNG를 세 번 더 놓고 clipPath로 특정 다각형 영역만 보이게 하는 구조입니다. 눌릴 때 최대 3px 내려가고 명암이 조금 어두워집니다. 키캡을 분리한 실제 3D 모델이나 스위치 시뮬레이션을 사용하지 않았습니다.

2. 타이핑 문구의 길이는 시간에서 계산

188–221f의 진행률에 전체 문자열 길이를 곱하고 정수로 내린 뒤 slice로 표시합니다. 문장을 바꾸면 같은 33프레임 안에서 노출하는 글자 수가 달라집니다. 세 키 효과음은 리듬의 액센트이지 모든 글자의 개별 입력 소리를 재현하는 것은 아닙니다.

3. 소리와 이미지 캡처의 시점 구분

키 이벤트 시작은 192/200/208f입니다. 콘티의 세 추가 캡처는 변위가 커지는 195/203/211f를 사용합니다. 이벤트 시작 프레임과 대표 이미지가 찍힌 프레임을 같은 값이라고 쓰면 동기화 설명이 틀립니다. 최종 문구가 완성된 모습은 222f에서 확인합니다.

핵심 코드

const typed=text.slice(0,Math.floor(ramp(f,188,221)*text.length));

실제 Keyboard의 문자열 노출식입니다. 카피가 길어지면 폰트 크기·화면 여백과 함께 노출 속도를 조정해야 합니다.

수정 순서와 깨지는 조건

1. 새 키보드 이미지에서 세 키의 다각형 좌표를 다시 잡습니다. 기존 clipPath를 그대로 두면 다른 키나 빈 공간이 움직일 수 있습니다.
2. 전체 제품의 px·py·pw와 복제 레이어의 크기·좌표를 맞춥니다. 제품만 이동하면 키 영역이 따로 떠 보입니다.
3. 문구 길이와 188–221f 노출 속도를 정한 다음 세 이벤트의 8프레임 간격을 검토합니다.
4. 192/200/208f 효과음과 각 3프레임 뒤 동작 캡처를 함께 확인합니다. 완성 영상은 실제 키 입력 시스템의 데모가 아닙니다.

사용한 기술

검증 범위와 한계

제작 당시의 최종 파일 기록에서 8초·240프레임·H.264/AAC, 디코딩·음량·무음과 장면 캡처를 확인했습니다. 이 해설은 해당 최종본과 제작 소스를 대조해 작성했습니다.

이미지 기반 2.5D 합성입니다. 실제 제품의 3D 모델·물리 시뮬레이션·성능 검증이나 실판매 광고가 아닙니다. 음악은 외부 녹음·샘플·음악 생성 모델 없이 직접 합성한 임시 BGM이며 YuE2Mac은 사용하지 않았습니다.

기술 검사 통과는 연출과 음악의 미적 승인을 의미하지 않습니다. 시청·청취 판단은 별도로 남아 있습니다. MP4는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.