Claude Code와 Cursor 환경 구축해 보기

AI를 활용한 개발 환경으로 주목받고 있는 Claude Code와 Cursor를 조합한 환경을 구축해 보았다.

셋업부터 실제로 EC 사이트(전자상거래 사이트)의 모크(Mock)를 작성하기까지의 흐름을 정리해 본다.

시험 삼아 모 EC 사이트를 참고하여 모크 페이지를 만들어 보았더니, 약 3분 만에 완성, 대단하다..

• macOS

터미널에서 동작하는 AI 코딩 어시스턴트.

한 번의 지시로 자립적으로 동작하며, 개발이나 리뷰, 수정 등도 해준다고 한다. (리뷰, 수정도 시도해 보고 싶다)

① npm으로 글로벌 설치

npm install -g @anthropic-ai/claude-code

② 설치 확인

claude --version

③ 최초 실행 및 인증

claude

최초 실행 시 브라우저가 열리며, Anthropic 계정 인증이 요구되므로 claude.ai에서 사인업(Sign up)한다.

주의: Claude Code 이용을 위해서는 Anthropic의 구독(Claude Pro / Max 플랜) 또는 API 키가 필요하다.

(④ API 키로 인증하는 경우 ※이 방식은 해본 적 없음)

export ANTHROPIC_API_KEY=your_api_key_here
claude

VS Code를 베이스로 한 AI 특화형 코드 에디터. 코드의 보완(Completion), 생성, 리팩터링(Refactoring)을 AI가 지원.

(어렴풋이 Claude Code로 대규모 개발/대량 파일 조사, 편집. Cursor로 코드 보완, 이런 식으로 구분해서 사용하게 되는 걸까?..

① 공식 사이트에서 다운로드

https://www.cursor.com 에 접속하여 「Download」 버튼을 통해 인스톨러를 다운로드.

② 설치

다운로드한 .dmg (Mac) 또는 .exe (Windows) 파일을 실행하고, 화면의 지시에 따라 설치.

Cursor에서 프로젝트 폴더를 열고, Cursor 내장 터미널(Ctrl + ``)에서 claude` 명령을 실행함으로써, 에디터와 AI 에이전트(Agent)를 심리스(Seamless)하게 사용할 수 있다.

프로젝트 폴더
├── index.html ← Claude Code가 생성
├── style.css ← Claude Code가 생성
...

작업 디렉터리를 생성하고, Claude Code를 기동하여 다음과 같이 지시했습니다.

mkdir ec-mock && cd ec-mock
claude

Claude Code에 대한 지시는 아래 내용뿐 (웃음)

amazon의 쇼핑 사이트 같은 html을 작성해 주세요

Claude Code가 자동으로 다음 파일을 생성했습니다:

index.html

소요 시간: 약 3분

📌

데모 페이지 (모 EC 사이트를 참고하여 생성한 것)

아직 Mock을 만들어 본 정도지만, 확실히 그럴싸한 것이 3분 만에 만들어졌다.

조금 더 이것저것 사용해 보면서 Claude Code의 대단함을 실감해 나가야겠다, 그런 나날이다..