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

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

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

할 수 있는 일은 심플합니다.

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

단축키란, 외운 순간이 피크인 법이죠.

새로운 툴을 써보고 "오, 이거 편리한데"라고 외웁니다. 하지만 3일이 지나면 절반은 잊어버립니다.

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

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

툴마다 제각각 다른 곳에 흩어져 있고, 텍스트의 나열로는 "어떤 키를 누르는가"가 몸에 익지 않습니다.

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

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

툴별로 정리되어 있고, 키의 위치를 시각적으로 알 수 있다. 없다면 만든다, 가 출발점입니다.

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

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

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

Ctrl + Shift + P

라고 텍스트로 적히는 것보다, 해당 키가 하이라이트되는 편이 "손가락이 어떻게 움직이는가"를 더 잘 남겨줍니다.

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

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/에 두고, 등록된 단축키를 해당 키에 매핑하여 빛나게 하고 있습니다.

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

평소 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와 함께 만드는" 스타일에 익숙해지는 것이었습니다.

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

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

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

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

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

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

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

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

직접 사용해 본 소감이나 "이런 기능이 필요하다"는 의견, 버그 보고도 대환영입니다.

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