# GEAR · 촉감과 입력을 다루는 제품 페이지
2026-09-12 BRIEF와 REFERENCES 작성 후 설계.

## 토큰
Fog #dedbe8 / Chalk #f4f4ef / Carbon #2c3033 / Violet #645775 / Coral #d95b41 / Line #c8c6cb.
SUIT 본문과 한글, Albert Sans 제품명. 제품명 100–180px/800, 본문 16px, 정보 13px. 한 번의 큰 TACT 75 타이포와 실제 키보드 사진에 시선을 집중한다. 나머지 영역의 제목은 30–44px.
기존 G 심벌과 HMSOFT GEAR 벡터를 유지한다. 밝은 배경에 단색, 어두운 footer에 반전. 작은 서브브랜드를 읽을 수 있는 높이 44px.

## 화면
```
[ GEAR                 키보드 / 입력 체험 / 스위치     ]
[ TACT 75                                      마감  ]
[                   넓은 키보드 제품 사진             ]
[ 제품에 대한 짧은 설명              구성 선택        ]
[ 직접 입력하는 전체 키보드 / 입력창과 현재 키         ]
[ 키 구조를 눌러 보기          스위치 감각과 이동량    ]
[ 제품 마감·스위치 선택                     구성 확인  ]
```
사진 배경과 페이지의 안개빛을 이어붙인다. 타이포는 사진 위에 임의로 얹지 않고 독립된 높이를 갖는다. 키보드의 가로 형태가 기억에 남는 중심이다.
모바일은 타이포 64px, 제품 전체가 잘리지 않는 사진, 입력 키보드는 가로 배열을 축소하고 텍스트 입력창을 별도로 유지한다.

## 모션
제품 첫 사진 2.4초 정착 후 정지, 정지 버튼 제공. 키 입력은 해당 키캡의 100ms 내려감/160ms 복귀. 스위치 구조 펼치기는 사용자가 조작하고 층별 450ms 이동. 스위치 이동량 슬라이더에 따라 스템과 힘 그래프 커서가 함께 움직인다. reduced motion이면 모든 변화 즉시 적용, 테스터 기능은 유지.

## 사전 비평
검정 바탕/네온/RGB/영문 슬로건의 게이밍 기본형을 폐기했다. 기존 QWE/ASD 여섯 버튼을 제품과 무관한 장식으로 두지 않고, 직접 입력할 수 있는 전체 키보드로 확장한다. 이미지 속 케이스·키캡·다이얼을 두 마감에서 유지한다. 설명에 없는 성능 숫자를 시각 장식으로 쓰지 않는다.


## 구현 후 확정한 자산과 조작
초기 AI 키보드 사진에 누락된 키가 있어 폐기했다. 82키 배열을 src/key-layout.js에서 화면 입력과 직접 작성한 Three.js 모델이 함께 사용한다. 모델 렌더를 참조해 정지 이미지의 재질을 다듬고, 채택한 Ink 이미지를 편집해 Fog 마감을 만들었다. 첫 화면의 3D 버튼은 필요할 때만 모델과 렌더러를 불러온다. 드래그/방향키/시점/확대·축소를 지원하며 반복 자동 회전은 없다. 사진은 2.4초의 한 번 움직임과 정지 버튼을 갖는다. 실시간 모델과 정지 이미지의 광학 차이는 ASSETS.md에 명시했다. 모바일에서 전체 키보드가 보이도록 사진의 맞춤 방식을 바꿨다.