[AI] 클로드 코드 직접 사용해보기 (CLAUDE.md, 자주 쓰이는 명령어, 프롬프트)

https://hyunki99.tistory.com/131

[AI] 클로드 코드 설치 방법 + 가격 정보 (feat. 인텔리제이에서 실행하기)

 

지난 글에서 클로드 코드를 설치하고 IDE에 통합까지 완료했습니다. 😀

이제 직접 사용해봐야겠죠?

 

어디에 먼저 사용해볼까 고민하다가

예전에 만들어두고 방치한 제 개인 보일러플레이트 프로젝트인

🔗nextjs-shadcn-boilerplate에 적용해보기로 했습니다.

 

클로드 코드 사용하는 방법 함께 알아봅시다. 😎

 

---

📝 프로젝트 정보 저장하기  (CLAUDE.md 생성)

 

⦁CLAUDE.md 파일이란?

 

클로드 코드는 마크다운 파일에 AI와 협업하기 위한 문서를 작성할 수 있습니다.

이곳에 프로젝트 정보, 기술 스택 버전, 코딩 컨벤션 등의 정보를 작성하면 클로드 코드가 이를 참고한 답변을 생성해 줍니다.

 

간단하게 /init 명령어를 통해 생성하고 필요한 부분을 수정해 보세요.

프롬프트를 통해서도 생성 및 수정이 가능합니다.

이 문서 그 자체로도 프로젝트를 설명할 수 있는 좋은 문서가 되기도 합니다. 👍

 

프롬프트 예시) 프로젝트 분석해서 CLAUDE.md 생성. package.json 및 주요 컴포넌트 참고해서 기술 스택, 프로젝트 구조 포함

 

 

⦁ CLAUDE.md 잘 작성하는 방법

1. 기술 스택 및 버전 명시

클로드는 프로젝트의 코드를 탐색하는 과정을 통해 라이브러리의 버전을 추론합니다.

이대로도 크게 문제는 발생하지 않지만, 추론이 틀렸을 경우 LTS 버전으로 코드를 작성해 주기 때문에

문제가 발생할 수 있습니다.

 

특히나 라이브러리 버전에 민감한 프론트엔드 생태계에서는 기술 스택의 버전을 명시하는 것이 좋겠죠? 😀

* Claude Code의 버전 처리 방식
CLAUDE.md 파일에는 프로젝트의 도구와 버전을 선언해야 합니다. (예: Tailwind CSS 4.1)
이를 통해 Claude Code가 프로젝트 컨텍스트를 이해합니다

* 버전이 명시되지 않았을 경우에는?
다음과 같은 순서로 판단합니다.
1. package.json / requirements.txt 등 확인 프로젝트의 의존성 파일을 먼저 읽음 실제 설치된 버전 확인

2. 코드 패턴 분석 코드 작성 스타일로 버전 추론 예: async/await 사용 → 최신 Node.js

3. 최신 안정 버전 가정 명시가 없으면 일반적으로 최신 LTS 버전 사용 -> ⚠️ 위험성 존재

- 클로드 코드  product-self-knowledge/SKILL.md

 

예시)

## Tech Stack
Next.js ^15.4.7 with App Router
React ^19.1.0
TypeScript ^5
Tailwind CSS ^4.1.4
shadcn/ui with Radix UI primitives
next-themes ^0.4.4 for dark mode
lucide-react ^0.477.0 for icons
ESLint ^8 + Prettier ^3.5.2

 

 

2. 프로젝트 아키텍쳐, 폴더 구조 명시

CLAUDE.md -> 폴더 구조

폴더 구조를 명시해 놓았더니, 컴포넌트를 생성할 때 규칙에 맞는 폴더로 파일이 생성되었습니다.

이거 보고 깜짝 놀랐습니다. 😮

 

이 외에도 많은 내용이 있지만 직접 만들어보고 점점 개선해 나가는 방법을 추천드립니다.

여러분의 방법도 공유해 주세요 ! 😀

 

⦁ 🧾 CLAUDE.md  전체 예제

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a Next.js 15+ boilerplate with Tailwind CSS v4.1 and shadcn/ui components. It uses TypeScript and includes a pre-configured setup with dark mode support using next-themes.

## Tech Stack

- **Next.js** ^15.4.7 with App Router
- **React** ^19.1.0
- **TypeScript** ^5
- **Tailwind CSS** ^4.1.4
- **shadcn/ui** with Radix UI primitives
- **next-themes** ^0.4.4 for dark mode
- **lucide-react** ^0.477.0 for icons
- **ESLint** ^8 + **Prettier** ^3.5.2

## Development Commands

### Development

```bash
yarn dev        # Start development server
yarn build      # Build production bundle
yarn start      # Start production server
yarn lint       # Run ESLint
yarn prettier   # Check code formatting with Prettier
```

## Architecture

### Directory Structure

- **`src/app/`** - Next.js App Router pages and layouts
  - **`(Main)/`** - Route group with MainLayout wrapper
  - Uses route groups for shared layouts without affecting URL structure
- **`src/components/`** - React components organized by category
  - **`ui/`** - shadcn/ui components (button, dropdown-menu, etc.)
  - **`layouts/`** - Layout components (Header, Footer, MainLayout)
  - **`theme/`** - Theme-related components (ThemeProvider, ModeToggle)
  - **`common/`** - Common/shared components
- **`src/constants/`** - Application constants including routes
- **`src/lib/`** - Utility functions (includes `cn()` for Tailwind class merging)
- **`src/hooks/`** - Custom React hooks
- **`src/css/`** - Global styles and Tailwind configuration
- **`src/api/`** - API-related code

### Path Aliases

TypeScript paths are configured with `@/*` pointing to `src/*`:

```typescript
import { cn } from '@/lib/utils';
import { Header } from '@/components/layouts/Header';
```

### Layout System

The app uses a nested layout structure:

1. **Root Layout** (`src/app/layout.tsx`) - Wraps everything with ThemeProvider
2. **Main Layout** (`src/app/(Main)/layout.tsx`) - Applies MainLayout component to pages in the (Main) route group
3. **MainLayout Component** (`src/components/layouts/MainLayout.tsx`) - Contains Header, main content area, and Footer with predefined spacing

### Theming

- Uses **next-themes** with class-based dark mode (`attribute="class"`)
- Theme toggles between light/dark/system modes
- Custom color tokens defined in `src/css/globals.css` using OKLCH color space
- CSS variables for layout dimensions:
  - `--header-height: 64px`
  - `--container-max-width: 1200px`
  - `--container-px: 16px`

### Styling Approach

- **Tailwind CSS v4.1** with native CSS imports (`@import 'tailwindcss'`)
- Uses Pretendard font loaded from CDN
- `cn()` utility function combines clsx and tailwind-merge for conditional classes
- Prettier with `prettier-plugin-tailwindcss` automatically sorts Tailwind classes

### shadcn/ui Configuration

The project uses shadcn/ui with the following config (from `components.json`):

- **Style**: default
- **Base color**: zinc
- **CSS Variables**: enabled
- **Icon library**: lucide-react
- **RSC**: enabled (React Server Components)

To add new shadcn/ui components, the config expects:

- Components in `@/components` (mapped to `src/components/`)
- UI components in `@/components/ui`
- Utils in `@/lib/utils`

### Code Style

ESLint and Prettier are configured:

- Extends `next/core-web-vitals` and `prettier`
- Single quotes, semicolons, 2-space indentation
- Trailing commas for ES5
- 80 character line width

### Navigation

Navigation routes are centralized in `src/constants/routes.ts` as `NAV_LIST` array with `name` and `href` properties.

---

---

📝 명령어 & 프롬프트

https://docs.claude.com/en/resources/prompt-library/library

Prompt Library - Claude Docs

공식 문서에도 참고할 수 있는 다양한 프롬프트 예시를 제공합니다.

게임 만들기같이 재밌는 것도 있더라고요. 한번쯤 둘러보시는 것을 추천드립니다. 😎

 

⦁자주 쓰이는 명령어

/clear	대화 기록을 컨텍스트 윈도우에서 제거
/explain	선택한 코드의 동작을 자세히 설명
/edit	선택한 코드 블록을 특정 요구사항에 맞게 수정
/test	유닛 테스트 코드 자동 생성
/refactor	가독성/성능 개선을 위한 코드 리팩토링 제안
/comment	코드에 주석 자동 추가
/doc	함수/컴포넌트 문서화
/commit	커밋 메시지를 생성하거나 변경 요약 작성
/review	현재 변경된 코드 리뷰
/run	현재 실행 가능한 명령어나 스크립트 실행 요청

 

이건 작은 팁인데, 토큰 사용량을 줄이기 위해서는 /clear를 주기적으로 실행해야 합니다.

 

새로운 작업을 시작할 경우 한 번씩 컨텍스트를 초기화 해주세요!

컨텍스트가 많이 쌓이면 질문 한번에 사용량 20%씩도 소모하더라고요 🥲

 

⦁자주 쓰이는 프롬프트 예시

🧩 코드 설명 요청
이 코드가 어떤 역할을 하는지 간단히 설명

🔧 코드 리팩토링
이 코드의 중복을 줄이고, 더 모듈화된 형태로 리팩토링

🧪 테스트 생성
이 함수에 대한 Jest 테스트 코드 생성

🧰 문서화
이 React 컴포넌트에 대한 JSDoc 주석 생성

🚀 성능 개선
이 코드의 렌더링 최적화를 위한 개선 방안 제안

🧭 새로운 기능 추가
이 컴포넌트에 검색 필터 기능을 추가

🔍 리뷰 요청
이 변경사항에 대한 코드 리뷰

 

❗️프롬프트가 길어질 수록 사용하는 토큰이 늘어날 수 있으니, 간결하고 명확하게 프롬프팅하는 것을 추천드립니다. 😀

 

---

---

📝 실제 사용기

📘깃허브링크

GitHub - HongHyunKi/nextjs-shadcn-boilerplate

 

 

프롬프트 : 이 프로젝트는 보일러 플레이트 프로젝트야. 개선점을 찾고 모던하게 코드 변경

클로드 코드의 작업 리뷰

 

✅ 프롬프트 한줄에 엄청난 양의 작업을 해냈습니다. 헐랭 😮

 

프롬프트 : Next.js + tailwind + shadcn 보일러 플레이트에 맞는 메인페이지 꾸며서 만들어줘 완벽한 반응형으로 세련되게

 

✅ 프로젝트 세팅은 되었으니, 샘플 페이지를 부탁해 보았습니다.

next.js 공식 문서 같은 디자인의 UI가 뚝딱 완성되었습니다.

결과는 여기에서 확인하실 수 있습니다. 😀

패딩 값 같은 디테일한 조정은 잘 못 하더라고요. 🤔

 

약 10번의 질문 이후 사용량

30분 정도 사용했고, 프로젝트 전체에 걸친 코드 수정이 몇번 발생해서, Pro 플랜 사용량의 약 30%를 사용했습니다.

그래도 5시간마다 세션이 초기화 돼서 아직까지 엄청 부족하다는 느낌은 못받았습니다. 😎

---

---

📝 사용 후기

 

최근까지는 적절히 코드 조각을 잘라 붙여

ChatGPT에게 질문하는 방식으로 AI를 사용해왔습니다.

 

클로드 코드는 코드 조각을 직접 입력할 필요 없이

프로젝트 전체를 컨텍스트로 사용할 수 있고,

심지어 직접 파일까지 제어 할 수 있기 때문에

더욱 강력한 생산성을 체감했습니다.

 

현재 회사에서는 두가지 방법을 적절히 섞어가며

업무에 AI를 사용하고 있습니다. 😀

 

이제는 확실히 AI 없이 개발하던 시절로는

점점 더 돌아가기 힘들어 질 것 같습니다. 😌

 

이길 수 없다면 합류하라!

개발자 여러분 모두 화이팅입니다. 😎

 

---

 

(추가) 클로드는 코딩만 하자

클로드가 생성한 - 개발자가 의자에 누워서 바이브 코딩하는 밈 이미지 생성

 

---

참고 문헌 :