Claude Code for Front-end #4: Claude Code를 200% 활용하는 법

AI와 대화하는 방법이 생산성을 결정한다들어가며Claude Code 설치했다고 끝난 게 아닙니다. 진짜 실력은 어떻게 말을 거는가에서 갈립니다.같은 도구를 써도 누군가는 1시간 걸릴 작업을 10분에 끝내고, 누군가는 여전히 "왜 안 되지?"를 반복합니다. 차이는 단순합니다. 프롬프트를 어떻게 쓰느냐.오늘은 매일 쓰는 실전 프롬프트 패턴을 공개합니다. 복붙해서 바로 쓸 수 있는 것들만 모았습니다.프롬프트의 기본 구조모든 좋은 프롬프트는 이 4요소 구조를 따릅니다:[컨텍스트] + [작업] + [제약조건] + [출력 형식]실전 예시:컨텍스트: Next.js App Router 프로젝트입니다.작업: 사용자 프로필 페이지를 생성하세요.제약조건: TypeScript를 사용하고, Tailwind CSS로 스타일링하세..

• format_list_bulleted SETTING
• · 2026. 1. 7.
• textsms

Claude Code for Front-end #3: MCP 서버로 Claude Code 능력 확장하기

프로덕션 레벨 개발을 위한 7가지 필수 MCP 서버 활용법1️⃣ 들어가며Claude Code를 쓰면서 이런 생각 해보신 적 있나요?"음... React 공식 문서 찾아보고 돌아와야겠네""이 UI 컴포넌트 만드는 데 시간이 너무 오래 걸리는데...""코드베이스가 너무 커서 뭐가 어디 있는지 찾기도 힘들어"저도 그랬습니다. Claude Code는 분명 강력한 도구인데, 뭔가 2% 부족한 느낌이었죠. 그 2%를 채워주는 게 바로 MCP 서버입니다.실제로 저는 7개의 MCP 서버를 프로젝트에 도입한 후 개발 생산성이 3배 이상 향상되었습니다. 이 글에서는 그 경험을 바탕으로 실전에서 검증한 MCP 서버들과 활용법을 공유하고자 합니다.2️⃣ MCP란 무엇인가?기본 개념MCP(Model Context Protoco..

• format_list_bulleted SETTING
• · 2026. 1. 7.
• textsms

Claude Code for Front-end #2: .claude 디렉토리

모든 프로젝트에 적용되는 나만의 AI 환경 - 프로젝트를 넘나들며 일관성 유지하기1️⃣ 들어가며1편에서 프로젝트별 CLAUDE.md 작성법을 소개했습니다. 각 프로젝트에서 Claude Code가 의도를 정확히 이해하고 코드를 작성할 수 있게 되었습니다.그런데 여러 프로젝트를 진행하면서 한 가지 패턴을 발견했습니다.모든 CLAUDE.md에서 반복되는 내용이 존재합니다.# 프로젝트 A의 CLAUDE.md- TypeScript에서 `any` 타입 사용 금지- TODO 주석 대신 완전한 구현- Git feature branch 전략 사용- 한국어로 응답# 프로젝트 B의 CLAUDE.md- TypeScript에서 `any` 타입 사용 금지 (또 쓴다...)- TODO 주석 대신 완전한 구현 (또 쓴다...)- G..

• format_list_bulleted SETTING
• · 2026. 1. 7.
• textsms

Claude Code for Front-end #1: CLAUDE.md 작성 가이드

Claude Code와 대화하는 법 - AI에게 프로젝트를 설명하는 가장 효과적인 방법1️⃣ 들어가며Claude Code에게 "회원가입 페이지 만들어줘"라고 요청했을 때 두 가지 상황이 벌어집니다.상황 A: "어떤 필드가 필요하신가요? 어떤 상태 관리 라이브러리를 쓰시나요? 스타일링은 어떻게 하시나요?"상황 B: "React Hook Form과 Zod로 이메일/비밀번호/비밀번호 확인 필드를 만들었습니다. Zustand로 인증 상태를 관리하고 Tailwind로 스타일링했습니다."차이는 단 하나, CLAUDE.md 파일의 존재 여부입니다.2️⃣ CLAUDE.md가 필요한 이유AI 코딩 도구의 핵심은 "컨텍스트"Claude Code는 대화할 때마다 프로젝트의 맥락을 파악해야 합니다. CLAUDE.md는 프로젝..

• format_list_bulleted SETTING
• · 2026. 1. 7.
• textsms