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

장면별 콘티

완성된 음악 포함 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프레임 · 1920×1080 · 30fps. 음악이 포함된 H.264/AAC 형식의 완성 MP4입니다.

가상 제품을 이미지 기반 2.5D로 연출한 콘셉트 필름입니다. 장면·문구·배경음악을 함께 감상하고 완성 영상을 다운로드할 수 있습니다.