클로드가 한 세션에 구현한 스큐어모픽 키보드 시뮬레이터 — 공개 대화록, CORS 프록시된 언스플래시 배경

r/ClaudeAI의 한 개발자가 단일 Claude 세션으로 제작한 스큐어모픽 키보드 시뮬레이터를 공유했습니다. asdf.app.teenyapp.com에서 실행되는 이 앱은 실제 키보드로 타이핑할 때 불이 들어오는 현실적인 키보드를 렌더링합니다. Enter를 누르면 해당 줄이 모든 방문자에게 공개되는 공개 전사문에 표시됩니다.

주요 기술적 결정

• 초기 프롬프트: "위로 스크롤되는 계산기 테이프 기록이 있는 키보드 레코더, 스큐어모픽. Claude가 한 번에 v1을 배포했지만 일반적이었습니다."
• Figma 가져오기: 개발자가 원하는 키의 Figma 파일을 업로드했습니다. Claude는 fig kiwi(Figma 바이너리 형식용 커뮤니티 파서)를 설치하고, 98개 노드를 모두 탐색하여 정확한 그라데이션과 블러를 추출했습니다. CSS 재현은 "링 모양"으로 너무 날카롭게 나왔습니다. 해결책은 Figma의 SVG 레이어를 하나씩 포팅하는 것이었습니다.
• 타이핑 로직: 첫 번째 버전은 사용자 정의 div를 입력으로 사용했기 때문에 Cmd+ArrowLeft와 Cmd+Backspace가 작동하지 않았습니다. 해결책은 주황색 디스플레이 아래에 숨겨진 <input>을 사용하고, 그 값을 보이는 텍스트에 미러링하여 OS가 모든 단축키를 기본적으로 처리하도록 하는 것이었습니다.
• 배경: CORS 프록시를 통해 가져오고 캐시된 WebP로 제공되는 실제 Unsplash 사진(대리석, 호두나무, 헛간 나무, 슬레이트)을 사용했습니다.

이는 Claude가 모호한 아이디어에서 한 세션 내에 세련되고 기능적인 웹 앱으로 안내될 수 있음을 보여주는 실용적인 예시입니다. 디자인을 반복하고 LLM 출력의 특성을 해결하려는 의지가 있다면 말이죠.