프로덕트 소식은 넘쳐나지만 대부분 이런 게 나왔대에서 끝납니다. 그래서 뭘 어떻게 하라고? 내 작업에 어떻게 써먹지? 거기까진 연결이 잘 안 되죠. 따라서 요즘 프로덕트 메이커는 바로 쓸 수 있는 것, 그 중에서도 주목해볼 만한 것을 엄선해서 매주 금요일에 전달드리려 합니다.

요즘 프로덕트 메이커는 매주 세 가지를 골라 전합니다:

써볼 것: Claude Code 치트시트 - 명령어부터 단축키까지 매일 자동 업데이트되는 한 장짜리 레퍼런스
참고할 것: 20년 전 게임을 브라우저로 이식한 개발자 - AI 없었으면 불가능했다
적용해볼 것: MCP로 Claude Code 디자인 감도 높이기

1. 써볼 것: 명령어부터 단축키까지 매일 자동 업데이트되는 한 장짜리 레퍼런스

Claude Code 치트시트는 cc.storyfox.cz에서 운영하는 Claude Code 전용 레퍼런스 페이지입니다. 단축키, 슬래시 명령어, MCP 서버 관리, 스킬·에이전트 설정, CLI 플래그, 환경 변수까지 한 페이지에 정리되어 있습니다. Claude Code 버전이 업데이트될 때마다 자동으로 반영되며, 현재 v2.1.83 기준입니다. Hacker News에도 올라왔습니다.

Claude Code를 처음 쓰기 시작하면 명령어가 어디 있는지 찾는 것 자체가 일입니다. /help를 쳐봐도 양이 많고, 공식 문서를 뒤지다 보면 시간이 금방 지나가죠. 이 치트시트는 그 탐색 비용을 줄여줍니다.

어떻게 쓰나요?

cc.storyfox.cz에서 바로 볼 수 있고, A4 가로 출력도 지원합니다. 윈도우·맥 전환 스위치가 있어서 운영체제에 맞는 단축키를 바로 확인할 수 있습니다. 주요 내용을 추려보면 이렇습니다.

자주 쓰는 단축키

Ctrl+C: 입력·생성 취소
Ctrl+D: 세션 종료
Ctrl+L: 화면 지우기
Ctrl+O: 상세 출력 전환 (thinking 내용 확인 가능)
Ctrl+R: 히스토리 검색
Ctrl+G: 프롬프트를 외부 에디터에서 편집
Ctrl+B: 작업을 백그라운드로 실행
Ctrl+T: 작업 목록 전환
Ctrl+V: 이미지 붙여넣기
Shift+Tab: 권한 모드 순환 (일반 → 자동 수락 → 계획 모드)
Alt+T: 사고(thinking) 모드 전환
Alt+P: 모델 전환
Esc+Esc: 되돌리기

입력 접두사

/: 슬래시 명령어 실행
!: bash 명령어 직접 실행
@: 파일 언급 및 자동완성

알아두면 유용한 슬래시 명령어

/compact: 컨텍스트 압축 (긴 세션에서 비용 절감)
/effort: 노력 수준 설정 (low/med/high/max)
/plan: 계획 모드 진입, 실행 전 검토
/btw: 현재 컨텍스트 비용 없이 별도 질문
/loop: 반복 스케줄 작업 설정
/branch: 대화 분기 생성 (/fork에서 변경됨)

세션 피커 단축키

P: 세션 미리보기
R: 세션 이름 변경
/: 세션 검색
A: 전체 프로젝트 보기
B: 현재 브랜치 기준 보기

최근 추가된 것들 (v2.1.83)

Ctrl+X, Ctrl+K: 백그라운드 에이전트 종료 (기존 Ctrl+F에서 변경)
CwdChanged / FileChanged 훅 이벤트 추가
managed-settings.d/ 드롭인 정책 파편 지원

누구에게 좋을까요?

Claude Code를 막 시작했거나 명령어를 자주 까먹는 분들에게 유용할 것 같습니다. 이미 능숙하게 쓰고 있다면 최근 변경 사항 확인용으로 가끔 들러보는 정도면 충분할 거고요. 매일 자동 업데이트된다는 점에서 북마크 하나 해두면 공식 문서 대신 쓸 수 있습니다.

2. 참고할 것: 건즈 온라인, 20년 만에 브라우저로 돌아왔다

벨로그를 둘러보다 흥미로운 글을 하나 발견했습니다. 벨로그 닉네임 blueocean이라는 분이 쓴 글인데요. 원문의 내용을 바탕으로 프로덕트 메이커 관점에서 인사이트를 정리해봤습니다. 이 글은 2003년 출시된 윈도우 전용 온라인 TPS 게임 건즈 온라인(GunZ: The Duel)을 WebAssembly + WebGL로 브라우저에서 돌아가도록 이식한 과정을 공유한 내용인데요. 3월 26일 기준, 벨로그 좋아요 102개를 받으며 개발자 커뮤니티에 공유되어 화제가 되었습니다.

건즈 온라인은 2007년경 클라이언트·서버 전체 C++ 소스코드가 유출된 이후 커뮤니티에서 계속 유지·보수되어 왔습니다. blueocean님은 그 소스코드를 기반으로 작업했는데, 게임 코드 자체는 거의 건드리지 않은 채 새로 필요한 코드의 99%를 AI가 썼다고 하네요. 핵심 도구는 Google Antigravity와 Claude Code였습니다.

기존 방식과 무엇이 다른가요?

blueocean님은 이전에도 같은 시도를 한 적이 있다고 합니다. 그 때는 JavaScript와 Three.js로 브라우저판을 처음부터 다시 만들려 했는데, 맵 렌더링까지는 갔지만 게임 엔진 전체를 재구현하는 벽에 막혀 결국 프로젝트가 흐지부지됐고요. 당시 작업한 레포지토리(three-gunz)는 지금도 GitHub에 남아 있다고 합니다.

두 번째 시도에서는 방향을 바꿨습니다. C++ 소스코드를 Emscripten으로 WebAssembly로 컴파일하면 브라우저에서 돌릴 수 있지만, 건즈는 윈도우 전용 그래픽 API인 Direct3D에 달라붙어 있어서 그냥은 불가능했다고 하네요. 이번에는 게임 코드를 건드리는 대신 게임과 그래픽 API 사이에 번역 레이어를 끼워 넣는 방식을 택하여 진행했다고 합니다.

어떻게 작동하나요? (원문 참고 내용)

번역 레이어의 핵심 아이디어는 간단합니다. 게임이 Direct3D에 명령을 보낼 때, 그 명령을 가로채서 브라우저가 이해하는 WebGL 명령으로 바꿔주는 래퍼(d3d9-webgl)를 중간에 끼워 넣는 겁니다. 게임 코드는 여전히 Direct3D에 명령을 보내고 있다고 생각하지만, 실제로는 브라우저 위에서 돌아가는 구조입니다.

렌더링 외에도 서버, 사운드, 입력, 파일 시스템까지 윈도우 전용으로 묶여 있던 것들을 하나씩 브라우저 표준으로 교체했습니다. 음성 파일 포맷을 바꾸는 것만으로 전체 에셋 용량을 88% 줄였고, 결국 링크 하나로 10초 안에 플레이 가능한 상태가 됐습니다.

무엇을 얻어가야 하나요?

이 프로젝트에서 진짜 배울 점은 기술이 아닙니다. blueocean님은 WebGL이나 Direct3D를 잘 몰랐습니다. 그 기술을 몰라도 성공할 수 있었던 이유가 여기 있습니다.

핵심은 두 가지입니다. 하나는 문제를 어떻게 쪼개느냐입니다. 게임 전체를 다시 짜는 게 아니라 번역 레이어 하나를 만드는 문제로 바꾸는 순간, 불가능해 보이던 것이 풀리기 시작했습니다. 다른 하나는 타이밍입니다. 몇 년 전에는 이 번역 레이어를 직접 짜야 했지만, 지금은 AI가 대신 써줍니다. 같은 아이디어가 지금은 실행 가능한 프로젝트가 된 겁니다. 오래 미뤄온 프로젝트가 있다면 다시 꺼내볼 이유가 생겼습니다. 코드를 AI가 써주는 지금, 필요한 건 기술이 아니라 문제를 잘게 쪼개는 능력입니다.

게임은 gunz.sigr.io에서 직접 플레이해볼 수 있습니다. 더 깊은 기술적 맥락과 이식 과정이 궁금하다면 아래 원문을 꼭 읽어보시길 추천합니다. 일본어 원문과 한국어 번역글 모두 같은 분이 직접 작성한 것 같습니다!

일본어 원문 (Zenn): https://zenn.dev/aespa/articles/c9156ae9771367
한국어 번역글 (벨로그): https://velog.io/@aespa/claude-code-gunz-the-duel-web-port
원작자 트위터: https://twitter.com/LostMyCode

3. 적용해볼 것: MCP로 Claude Code 디자인 감도 높이기

마지막으로 소개할 인사이트는 요즘IT 작가 그릇님의 글입니다. MCP를 연결해 Claude Code로 앱 디자인 감도를 끌어올린 과정을 직접 경험하고 공유한 내용인데요. Claude Code의 까만 터미널 창이 낯설어 커서나 Antigravity로 돌아갈까 고민했던 분이, MCP를 연결하면서 메인 도구로 전환하게 된 이야기입니다.

무슨 문제를 해결하려 했나요?

그릇님이 느낀 문제는 바이브 코딩으로 만든 결과물이 어떤 도구를 쓰든 비슷비슷하게 느껴진다는 것이었습니다. 특히 Claude Code로 만든 결과물이 평범하게 보였고, 원하는 감성과 다른 차가운 블루 톤의 UI가 나왔죠. Stitch로 UI 디자인을 만들어 연결했지만, 키 비주얼을 잡는 데는 한계가 있었다고 합니다.

어떻게 해결했나요?

그릇님의 목표는 웰다잉 앱이었습니다. 죽음 준비가 아니라 삶의 기록이라는 메시지를 담아야 했고, 따뜻한 느낌이 필요했습니다.

먼저 Claude Desktop에 블렌더 MCP를 연결해서 3D 오브제를 만들었습니다. Claude가 별빛 조약돌이라는 키워드를 제안했고, 삶이 끝나는 게 아니라 별이 되어 빛난다는 핵심 메시지와 함께 골드 빛 조약돌을 블렌더로 렌더링했습니다. 3D 툴을 한 번도 써본 적 없었지만, 프롬프트에 오브제 형태, 재질, 조명까지 구체적으로 설명하면 Claude가 블렌더 안에서 직접 세팅하고 렌더링해줬다고 했습니다.

다음으로 Stability AI MCP를 연결해 앱 전체의 컨셉 이미지와 키 비주얼을 만들었습니다. 단순히 이미지를 뽑는 게 아니라 배경 제거, 스타일 조정, 업스케일을 한 대화 안에서 연결해 워크플로로 자동화할 수 있었다고 하죠.

마지막으로 Claude Code에 Figma와 Stitch MCP를 연결했습니다. 블렌더와 Stability AI로 만든 결과물을 Figma에서 컴포넌트로 정리한 뒤, Claude Code에 Figma 스펙에 맞춰 동기화하고 전체 UI에 반영해줘라고 요청해서 최종 완성했습니다.

MCP 연결 순서 요약

블렌더 MCP → Claude Desktop 연결, 3D 키 비주얼 제작
Stability AI MCP → Claude Desktop 연결, 컨셉 이미지 및 배경 생성
Stitch MCP → Claude Code 연결, 초기 UI 컴포넌트 구성
Figma MCP → Claude Code 연결, 디자인 토큰 동기화 및 전체 UI 반영

적용해볼 질문

지금 만들고 있는 프로덕트에서 디자인이 기능을 따라가지 못하고 있는 부분이 있나요? 그릇님의 경험처럼 MCP를 연결하면 디자인 방향을 바꾸더라도 컴포넌트를 전체 화면에 일관되게 적용할 수 있습니다. 프롬프트에 기능 명세만 넣는 게 아니라 어떤 감정을 전달할지, 어떤 메시지를 담을지까지 써봤나요? 같은 기능의 앱이라도 디자인에 따라 사용자가 느끼는 감정이 달라질 수 있습니다.

실행해볼 수 있는 것

Claude Code를 쓰고 있다면 /mcp 명령어로 현재 연결된 MCP 목록을 확인해보세요. Figma나 Stitch MCP가 없다면 하나만 연결해서 디자인 파일을 Claude Code가 직접 읽게 해보세요.
블렌더 MCP는 연결 과정이 복잡한 편이지만, 연결되고 나면 3D 툴 경험 없이도 대화만으로 결과물을 만들 수 있습니다. 스미더리, 컴포시오, mcp.so에서 필요한 MCP를 검색하면 설치 명령어를 바로 받을 수 있습니다.

그릇님이 직접 겪은 시행착오와 더 구체적인 프롬프트가 궁금하다면 요즘IT 원문을 꼭 읽어보시길 추천합니다.

이렇게 적용해보세요

Claude Code를 쓰고 있다면 cc.storyfox.cz를 북마크해두세요. 명령어를 찾는 데 쓰는 시간이 줄어듭니다.
오래 미뤄온 프로젝트가 있다면 다시 꺼내보세요. AI가 코드를 쓰는 역할을 맡으면서 예전에는 혼자 하기 어려웠던 것들의 문턱이 낮아졌습니다. 건즈 이식 프로젝트처럼 때가 올 때까지 기다렸다가 지금 실행하는 것도 전략입니다.
Claude Code로 만드는 결과물이 비슷비슷하게 느껴진다면 MCP 연결부터 해보세요. 어떤 감정을 전달할지를 프롬프트에 담고, 디자인 도구와 직접 연결하면 결과물이 달라집니다.

다음 주에도 여러분이 놓치지 말아야 할 프로덕트 메이커 소식을 정리해서 찾아뵙겠습니다. 요즘 프로덕트 메이커 콘텐츠가 도움이 되셨다면, 꼭 작가 알림 설정을 부탁드립니다. 콘텐츠 내용 중 잘못된 정보나 정정이 필요한 부분이 있다면 댓글로 알려주세요. 빠르게 수정하겠습니다. 다음 주에 또 만나요!