Claude로 만든 스큐어모피즘 키보드 시뮬레이터 웹사이트 - 입력하는 모든 내용이 공개됨
Claude Design built this skeumorphic keyboard simulator website in one session - whatever you type and enter is visible to the public
핵심 요약
Claude를 활용해 만든 스큐어모피즘 키보드 시뮬레이터로, 입력 내용이 실시간으로 공개되는 독특한 웹사이트.
- 스큐어모피즘 구현 — Figma 노드와 SVG를 활용해 실제 키보드와 유사한 시각적 효과를 구현함.
- 공개 트랜스크립트 — 사용자가 입력한 모든 내용이 실시간으로 웹사이트에 공개되어 공유됨.
- 기술적 해결 — 입력 로직을 위해 숨겨진 input 태그를 사용해 OS 수준의 단축키를 완벽히 지원함.
- 커뮤니티 반응 — 실시간 공개 채팅의 무질서함과 보안 우려에 대해 다양한 의견이 오감.
이것은 스큐어모피즘 타이핑 앱입니다. 실제 키보드에서 누르는 키가 화면에 렌더링된 키보드에서 빛나고, 엔터를 누르면 입력한 내용이 모두가 볼 수 있는 공개 트랜스크립트로 전송됩니다.
"키보드 레코더와 그 위에 스크롤 되는 계산기 테이프 기록, 스큐어모피즘 스타일"이라는 한 줄 프롬프트로 시작했습니다. Claude는 v1을 한 번에 완성했지만, 너무 평범했습니다.
다음으로 제가 실제로 원했던 키의 Figma 파일을 업로드했습니다. Claude는 fig kiwi(Figma 바이너리 포맷을 위한 커뮤니티 파서)를 설치하고 98개의 노드를 모두 훑어 정확한 그라데이션과 블러 효과를 가져왔습니다. CSS 재구현 결과물은 계속해서 "고리 모양"이 생기고 너무 날카로웠습니다. 해결책은 Figma의 모든 SVG 레이어를 하나씩 포팅하는 것이었습니다.
타이핑 로직의 경우, 첫 번째 버전은 커스텀 div를 입력창으로 사용했기 때문에 Cmd+ArrowLeft와 Cmd+Backspace가 작동하지 않았습니다. 해결책은 주황색 디스플레이 아래에 숨겨진 <input>을 사용하여 그 값을 보이는 텍스트에 미러링하고, OS가 모든 단축키를 기본적으로 처리하도록 하는 것이었습니다.
배경은 실제 Unsplash 사진(대리석, 호두나무, 헛간 나무, 슬레이트)이며 CORS 프록시를 통해 가져와 캐시된 WebP로 제공됩니다.
라이브 링크: asdf.app.teenyapp.com
