「단축키, 외운 순간이 피크」 문제를 Claude Code와 함께 해결했다

만든 것

단축키를 툴별로 모아서 관리할 수 있는 Web 앱 「KeyMap」을 만들었습니다.

평소에는 시스템 엔지니어로 일하고 있습니다만, 구현은 VS Code 상의 Claude Code와 상담하며 진행하고, 자신은 “사용성”에 대한 판단에 집중한다는 방식으로 제작을 진행했습니다.

할 수 있는 기능은 심플합니다.

VS Code / Chrome / Figma와 같이 툴별로 단축키를 등록할 수 있음
등록한 단축키가 키보드 위에서 빛나며 보임 (키보드 비주얼라이저)
JIS / US 배열 전환 대응

왜 만들었는가

단축키란, 외운 순간이 피크이기 때문입니다.

새로운 툴을 쓰면서 「오, 이거 편리하네」라고 외웁니다. 하지만 3일이 지나면 절반은 잊어버립니다.

게다가 VS Code · Chrome · Figma... 처럼 툴이 늘어날수록 머릿속의 대응표는 어지러워집니다.

치트 시트(Cheat sheet)를 인쇄하거나 메모 앱에 적어보기도 했지만,

툴마다 제각각 다른 곳에 흩어져 있고, 텍스트의 나열로는 「어떤 키를 눌러야 하는지」가 몸에 익지 않습니다.

결국 어느 것도 지속되지 않았습니다.

제가 원했던 것은 「외우기」를 노력하는 툴이 아니라, 「잊지 않기」를 시스템화하는 툴이었습니다.

툴별로 정리되어 있고, 키의 위치를 시각적으로 알 수 있는 것. 없다면 직접 만들자는 생각이 출발점이었습니다.

KeyMap으로 할 수 있는 것

1. 툴별 단축키 관리

앱 단위로 카드를 나누고, 거기에 단축키를 등록합니다.

「이 툴의 이 키가 뭐였더라」를 찾는 장소를 한 곳으로 정하는 것이 포인트입니다.

2. 키보드 비주얼라이저

가장 공을 들인 부분입니다. 등록한 단축키를 실제 키보드 위에서 빛나게 표시합니다.

Ctrl + Shift + P라고 텍스트로 적히는 것보다, 해당 키가 하이라이트되는 편이 「손가락이 어떻게 움직이는지」가 더 잘 남습니다.

툴을 전환할 때 빛나는 키가 확 바뀌는 것도 은근히 기분 좋은 포인트입니다.

3. JIS / US 배열 전환

JIS 109 / JIS 87 / US 104에 대응합니다. 배열에 따라 물리적 위치가 달라지므로, 자신의 키보드와 동일한 모습으로 확인할 수 있습니다.

기술 스택

Vite + React (JavaScript / JSX)
순수 CSS + CSS 커스텀 프로퍼티 (CSS Custom Properties) (var(--accent) 등으로 색상 배합을 일괄 관리)
키보드 배열 및 단축키 데이터는 src/data/에 정의
측정에 @vercel/analytics, 호스팅은 Vercel

화려한 프레임워크는 사용하지 않고, Vite로 가볍게 띄워 React로 구성하는 심플한 구성입니다.

키보드 배열 데이터를 src/data/에 두고, 등록된 단축키를 해당 키에 매핑하여 빛나게 하고 있습니다.

개발 스타일: 「판단은 나, 구현은 Claude Code와 함께」

이번에 가장 쓰고 싶은 내용입니다.

평소 SE로 일하고 있기 때문에 「직접 전부 작성할」 수도 있었지만,

이번에는 일부러 VS Code 상의 Claude Code에게 구현을 맡기고, 자신은 “사용성”에 대한 의사결정에 집중하는 분담 방식을 택했습니다.

만들고 싶은 경험을 말로 전달하고, 나온 차이점(diff)을 SE의 눈으로 리뷰하고, 다시 수정하는 과정을 반복했습니다.

🔗 Claude Code: https://docs.claude.com/en/docs/claude-code/overview

구체적인 예시: 「버튼처럼 보이지 않는 문제」를 함께 해결

앱 목록 항목이 겉보기에는 단순한 타이틀로만 보여서, 클릭할 수 있다는 것을 인지하지 못하는 문제가 있었습니다.

그래서 Claude Code에게 이렇게 상담했습니다.

앱 목록에 커서가 닿았을 때도 호버(hover) 효과가 나타나게 해주세요.
애초에 전환 버튼이라기보다 타이틀처럼 보이니, 한눈에 버튼임을 알 수 있게 해줬으면 합니다.

돌아온 수정 방식이 매우 좋았습니다.

요소를 div에서 <button>으로 변경 → cursor: pointer나 키보드 조작 등의 네이티브한 동작이 자동으로 활성화됨
호버 시 var(--accent) 테두리 + 배경을 출력하여, 만질 수 있는 것이라는 것을 한눈에 알 수 있는 모습

단순히 색을 바꾸는 것에 그치지 않고, ** <button> 태그를 사용함으로써 접근성 (Accessibility, 키보드 조작)까지 동시에 확보하는 것**——

이러한 "올바른 요소를 선택하는" 판단을 상담하며 완성해 나갈 수 있었던 것이 이번 개발의 보람이었습니다.

"이렇게 보여주고 싶다"는 것을 내가 결정하고, "어떻게 구현하는 것이 적절한가"를 함께 고민하는 것. 이 역할 분담은 상당히 쾌적했습니다.

어려웠던 점: VS Code 상에서 Claude를 사용하는 것 자체

솔직히 가장 큰 장벽은 기술적인 문제라기보다 "VS Code 상에서 Claude와 함께 만드는" 스타일에 익숙해지는 것이었습니다.

지금까지 스스로 코드를 작성해 온 사람 입장에서는 처음에는 감을 잡기가 어려웠습니다.

어디까지 맡기고, 어디를 스스로 판단할 것인가에 대한 경계
무엇을 어떻게 전달해야 의도대로의 구현이 돌아오는가 (지시의 해상도)
나온 차이점(diff)을 제대로 리뷰하고 반영하기 ("Ask before edits"로 확인하며 진행하기)

익숙해지니, 나는 "어떤 경험을 만들고 싶은가"에 집중하고, 작성하는 부분은 맡기는 리듬이 생겼습니다.

SE로서 가장 효과적이었던 것은 "코드를 쓰는 능력"보다 "무엇을 만들어야 하는지, 어떻게 사용하기 쉽게 만들지를 언어화하는 능력"이었다는 것이 개인적인 발견입니다.

앞으로

클라우드 동기화: 여러 단말기에서 사용할 수 있도록 (현재는 단말기 로컬 중심)
팀 내 공유: 팀 내에서 단축키 표를 공유
내보내기 (Export): 등록된 목록을 치트 시트(Cheat sheet)로 출력

이러한 부분들은 사용하는 사람들의 목소리를 들으며 우선순위를 결정해 나갈 예정입니다.

마치며

"외우려고" 노력하는 것이 아니라, "잊지 않도록" 시스템화하는 것.

그런 도구로서, Claude Code와 이인삼각(二人三脚)으로 KeyMap을 만들었습니다.

직접 사용해 본 소감이나 "이런 기능이 있으면 좋겠다"는 의견, 버그 보고도 대환영입니다.

⌨️ 단축키를, 잊지 않도록.