본문으로 건너뛰기

집에선 출력을,회사에선 정확도를 연마합니다.

혼자선 빠르게, 함께선 신중하게.

─ 프론트엔드 개발자 박수범

사이드프로젝트로 만든 AI 도구가 실사용자에게 닿고, 그 경험을 다시 팀 워크플로우에 가져옵니다.

웹접근성 컨설턴트로 시작해서, 구조와 의미를 먼저 보는 사고가 기본기예요.

  • Open VSX
    6,124
    Claude Code Skills Panel · downloads
  • npm weekly
    18
    claude-distill · 지난 7일

Live · 매일 09:00 KST 자동 갱신 · last sync 2026. 6. 15.

Now Building
  • Buildingclaude-distill v0.5 — i18n 자동 분리 작업 중
  • WritingAEO / GEO 최적화 (스레드 예정)
From the Threads

요즘의 고민과 생각

스레드에 먼저 짧게 써 둔 고민이나 생각을, 여기서는 한 편만 골라 조금 더 길게 옮겨 둡니다. 피드의 최신순이 아니라, 지금 내게 붙잡히는 이야기를 남기는 쪽에 가깝습니다.

@water_bum_2
#개발자 성장2026.05.14

집에서는 출력, 회사에서는 정확도

집에서 클로드 쓸 땐 뭐든 만들 수 있을 것 같았는데, 수학 교구 개발팀에 들어가니 정반대였다.

집에서 퇴근 후 클로드맥스를 켜면 0에서 95까지 자유도 끝판왕이다. 제약 없고 내가 곧 룰이라 익스텐션도 만들고 npm 패키지 배포까지 다 해봤다.

근데 회사에서 도입되니 완전 다른 도구가 됐다. 매쓰캔버스라는 수학 교구를 만드는데, 대부분 이미 95까지 완성돼 있고 필요한 건 95에서 100으로 가는 과정이다. 섬세하고, 복잡하고, 다른 사람 코드를 함부로 못 바꾼다.

수학 교구라는 도메인이 특히 그렇다. 숫자 하나, 부등호 하나, 좌표 한 칸 차이가 아이들 학습 경험을 완전히 바꿔 놓기 때문에 대충 비슷한 답이 통하지 않는 분야다.

이러다 보니 집에서는 출력을, 회사에서는 정확도를 연마하게 됐다. 같은 도구인데 쓰는 법이 정반대가 됐다.

@water_bum_2 · ThreadsRead on Threads
AI-Native Workflow

AI 와 경쟁하지 않고, 지휘합니다.

Claude Max 를 메인으로, claude-distill 로 세션 간 컨텍스트를 관리하고, Skills 로 반복 작업을 한 클릭으로 줄입니다. 자유도가 아니라 '제약'을 설계하는 파이프라인이에요.

01AI 가 빈 손으로 시작하지 않게

Context Engineering

CLAUDE.md · knowledge.md · gotchas.md

프로젝트마다 결정 이유(판례)·함정 기록·도메인 규약을 분리한 markdown 으로 미리 설계합니다. 한 파일에 다 때려박지 않고 layer 를 나눠야 다음 세션에서 관련 컨텍스트만 정확히 복구돼요.

02반복 작업을 한 클릭으로

Skill-based Execution

Claude Code Skills Panel

자주 쓰는 작업 패턴(코드리뷰·테스트 작성·디자인 토큰 매칭 등)을 슬래시 커맨드/Skills 로 등록해서 매 세션 같은 설명을 반복하지 않습니다. 30개를 넘는 커맨드를 카드 그리드로 시각화하는 게 본업이 된 이유.

03기획 → 인터페이스 → 구현

Phased Prompting

Phase Split

한 번에 다 시키지 않고 phase 별로 쪼개 지시합니다. 앞 단계 산출물이 다음 프롬프트의 완벽한 컨텍스트가 되도록 설계해 구현 오류를 사전 차단해요.

04세션 휘발성 무력화

Auto Handoff

claude-distill · Stop hook

세션 종료 시 4단 게이트(휴리스틱 → Haiku → dedup → 재귀 가드)로 결정·페일·환경 quirk 를 자동 추출해 markdown 에 누적. 다음 세션은 어제 노하우를 시스템 프롬프트로 들고 시작합니다. LLM 비용 약 90% 절감.

Core Principles

컨텍스트가 곧 자산

AI 협업의 진짜 비용은 어제 한 결정을 오늘 다시 설명하는 것. 매 세션 휘발되는 노하우를 자동 누적해 다음 세션의 출발점으로 만듭니다.

자유도보다 제약

막연한 자유는 환각의 입구. 엣지 케이스를 사전에 막고 입력을 뾰족하게 다듬어 정해진 레일 위에서 정교하게 움직이게 합니다.

비용 모델 없는 협업은 지속 불가

세션마다 LLM 부르면 금세 한 달 $60. 4단 게이트로 본 추출 호출률을 약 10% 수준까지 낮춰 세션 평균 비용을 0 에 가깝게.

100% 위임하되 100% 신뢰는 X

AI 산출물도 추론 과정·변경 사항을 먼저 문서화시킵니다. 그 문서가 곧 검수 필터이자, 회귀가 들어와도 즉시 잡히는 안전망.

Skills & Tools

Frontend

React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Zustand

Backend

Node.js
Supabase
NestJS

Tools

Git
Figma
Vercel
Chrome DevTools

Featured Projects

언커버 (Uncover)
Web

언커버 (Uncover)

저작권 문제없는 음원을 찾고 영상과 미리 매칭해보는 스트리밍 플랫폼. Recoil 상태 관리와 Audio/Video 동기화 로직 구현.

React
TypeScript
Recoil
AWS S3
View Details
AI 협업 포트폴리오 (subeom.dev)
Web Platform

AI 협업 포트폴리오 (subeom.dev)

Next.js 14와 FSD 아키텍처, Supabase로 구축하고 AI와 협업하여 완성한 나만의 포트폴리오 플랫폼

Next.js 14
TypeScript
Supabase
FSD Architecture
+2
View Details
항해플러스 아카이빙
Backend

항해플러스 아카이빙

LMS 과제 제출 이력 영구 보존 서비스. 결함 허용 PR 매칭 알고리즘 설계 및 4-Layer Fallback 로직 구현.

Node.js
NestJS
GitHub API
React
+2
View Details
Claude Code Skills Panel
Developer Tools

Claude Code Skills Panel

Claude Code 슬래시 커맨드를 한 번의 클릭으로 실행하는 VS Code 확장. Open VSX 4,466 다운로드 · 평점 5.0, 7일 만에 v0.44.6, 4개 IDE · 4개 언어 배포.

VS Code Extension API
Node.js
Vanilla JavaScript
Webview API
+3
View Details

Latest Articles

지속적인 학습과 성장을 기록합니다. 최근 작성한 블로그 글들을 확인해보세요.