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 #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