윈도우에서 Claude Desktop Code 탭으로 Next.js 시작하기 — 설치부터 개발 서버까지

Claude Code를 쓰려면 터미널에서 CLI를 설치해야 한다고 알고 계신 분이 많습니다. 하지만 지금은 Claude Desktop 앱의 Code 탭만으로 코딩 에이전트를 바로 쓸 수 있습니다. 별도 CLI 설치 없이, 채팅하듯 프롬프트를 입력하면 Claude가 내 PC의 프로젝트 폴더에서 직접 파일을 만들고 명령을 실행합니다.

이 글에서는 아무것도 설치되지 않은 윈도우 PC에서 시작해, Next.js 프로젝트를 만들고 웹브라우저로 개발 서버에 접속하는 것까지 한 번에 따라가 봅니다.

이 글이 필요한 분: 윈도우 PC에서 Claude Desktop으로 코딩을 시작해 보고 싶은 분. 터미널 명령이 낯설어도 괜찮습니다 — 직접 입력하는 명령은 설치 명령 몇 줄이 전부이고, 나머지는 Claude가 대신 해 줍니다.

Next.js가 무엇이고, 왜 이걸로 만드나요?#

이 글에서 만들 것은 Next.js 웹앱입니다. Next.js는 웹사이트·웹앱을 만드는 대표적인 도구 모음(프레임워크)입니다 — 빈 땅에 집을 짓는 대신, 뼈대와 배관이 미리 갖춰진 조립 키트를 받아서 시작한다고 생각하면 됩니다.

웹 개발 도구는 수없이 많지만, 첫 시작으로 Next.js를 고른 이유는 이렇습니다.

• 세련된 화면을 빠르게 — 최신 UI 스타일과 다양한 화면 효과를 빠르게 구현할 수 있습니다. 실제로 이 글에서 프롬프트 한 줄로 생성된 프로젝트에도 요즘 널리 쓰이는 디자인 도구(Tailwind CSS)가 함께 구성됩니다.
• AI가 가장 잘 다루는 스택 — 전 세계에서 가장 널리 쓰이는 웹 프레임워크라 Claude가 학습한 예제도 그만큼 풍부합니다. “이렇게 바꿔줘”라고 말했을 때 결과물이 좋게 나올 확률이 높습니다.
• 무료로 배포까지 — Vercel처럼 Next.js를 공식 지원하는 무료 배포 서비스가 있어, 만든 앱을 몇 분 만에 인터넷 주소(URL)로 공유할 수 있습니다.
• 업무 자동화 도구도 웹으로 — 설치형 프로그램을 만들지 않아도, 웹 서비스만으로 대시보드·정리함·뽑기 같은 팀 업무 도구를 충분히 만들 수 있습니다. 글 후반에 소개할 잇다 데모 앱들도 Next.js의 토대인 React 계열 기술로 만들어졌습니다 — 오늘 익히는 흐름이 그대로 이어집니다.

전체 흐름은 다음 다섯 단계입니다.

1. Git 설치 (winget 명령 한 줄)
2. Node.js 설치 (winget 명령 한 줄)
3. Code 탭에서 프로젝트 폴더 지정
4. 프롬프트 한 줄로 Next.js 프로젝트 생성
5. 개발 서버 실행 후 브라우저 접속

---

시작 전 확인 — Claude Desktop을 완전히 종료하세요#

Git과 Node.js를 설치하기 전에, Claude Desktop이 켜져 있다면 먼저 완전히 종료해야 합니다.

여기에 함정이 하나 있습니다. 창을 닫는 것(X 버튼)은 종료가 아닙니다. Claude Desktop은 창을 닫아도 화면만 사라질 뿐 백그라운드에서 계속 실행됩니다. 완전히 종료하려면 작업 표시줄의 알림 영역(시스템 트레이)에서 Claude 아이콘을 찾아 우클릭 → 종료를 선택하세요.

왜 이렇게까지 해야 할까요? 프로그램은 시작되는 순간 환경변수 PATH — “도구를 찾을 때 뒤져 볼 폴더 목록”, 말하자면 주소록 — 를 한 번 읽어 기억하고, 실행 중에는 다시 읽지 않기 때문입니다. Claude Desktop이 켜진 채로 Git·Node.js를 설치하면 주소록 원본에는 새 도구의 위치가 추가되지만 이미 실행 중인 Claude Desktop이 들고 있는 복사본에는 반영되지 않습니다. 그 상태로 작업을 시작하면 Claude가 git이나 npm을 찾지 못하는 경로 문제를 겪게 됩니다.

순서만 기억하세요: ① Claude Desktop 완전 종료(트레이 아이콘 우클릭 → 종료) → ② Git·Node.js 설치 → ③ Claude Desktop 실행. 이 순서면 새로 설치된 도구의 위치가 함께 로딩됩니다.

1. Git 설치#

Claude Code는 작업 이력을 관리하기 위해 Git을 사용합니다. 윈도우에 기본 내장된 패키지 관리자 winget을 쓰면 설치 파일을 찾아다닐 필요 없이 명령 한 줄로 설치할 수 있습니다.

시작 메뉴에서 명령 프롬프트(또는 터미널)를 검색해 실행하고, 아래 명령을 입력합니다.

winget install git.git

처음 winget을 사용하면 소스 약관에 동의할지 묻는데, y를 입력하면 됩니다. 설치 도중 “이 앱이 디바이스를 변경할 수 있도록 허용하시겠어요?”라는 관리자 권한 확인 창이 뜨면 예를 선택하세요. Successfully installed가 출력되면 완료입니다.

2. Node.js 설치#

Next.js를 실행하려면 자바스크립트 실행 환경인 Node.js가 필요합니다. 같은 방법으로 설치합니다.

winget install openjs.nodejs

역시 관리자 권한 확인 창에서 예를 선택하면 자동으로 설치됩니다.

설치 확인: 설치 직후에는 기존에 열려 있던 창이 새 프로그램을 인식하지 못합니다. 명령 프롬프트를 닫고 새로 연 뒤 git --version, node --version을 입력해 버전이 출력되면 정상 설치된 것입니다.

3. 프로젝트 폴더 지정#

Git과 Node.js 설치를 마쳤으니 이제 Claude Desktop을 실행합니다. 앞에서 완전히 종료해 둔 덕분에, 이번 실행에서 새로 설치된 도구들의 위치(PATH)가 함께 로딩됩니다. 아직 설치 전이라면 claude.ai/download에서 내려받을 수 있습니다.

Claude Desktop의 Code 탭으로 이동하면 프롬프트 입력창이 보입니다. Claude가 작업할 폴더를 먼저 지정해야 하므로, 입력창의 폴더 선택… 버튼을 누릅니다.

폴더 선택 창이 열리면 작업할 폴더를 고릅니다. 아직 폴더가 없다면 새 폴더 버튼으로 빈 폴더를 만들어 선택하면 됩니다. 이 글에서는 C:\Projects\DemoProject 폴더를 만들어 사용합니다.

폴더를 선택하면 이 워크스페이스를 신뢰하시겠습니까? 라는 확인 창이 나타납니다. Claude Code가 이 폴더 안에서 파일을 읽고, 쓰고, 명령을 실행해도 되는지 묻는 것입니다. 내가 만든 폴더가 맞는지 경로를 확인하고 워크스페이스 신뢰를 누릅니다.

신뢰를 마치면 입력창에 작업 디렉터리가 표시됩니다. 이제 이 폴더 안에서 Claude에게 무엇이든 시킬 준비가 된 것입니다.

4. 프롬프트 한 줄로 Next.js 프로젝트 생성#

이제 입력창에 원하는 작업을 평소 말하듯 적으면 됩니다. 이 글에서는 다음과 같이 입력했습니다.

next.js 기본 프로젝트 구성을 하고, 커밋을 해줘. 커밋 유저의 이메일은
dev@itda.work 이고, 유저명은 Chinseok Lee 로 지정해줘.

커밋 유저 지정 부분은 각자의 이메일·이름으로 바꿔 적으세요. 입력하면 Claude가 알아서 프로젝트 구조를 만들고 의존성 설치를 진행합니다. 파일 탐색기로 폴더를 열어 보면 실시간으로 파일이 생겨나는 것을 확인할 수 있습니다.

몇 분 뒤 생성이 완료되면 Claude가 구성 내용을 정리해 보고합니다. 이번 실행에서는 Next.js 16.2.11(글 작성 시점 기준)에 App Router, TypeScript, Tailwind CSS, ESLint, Turbopack 구성으로 생성됐고, 빌드 검증과 Git 커밋까지 마쳤습니다.

재미있는 대목이 하나 있습니다. Next.js 생성 도구(create-next-app)는 대문자가 들어간 폴더명(DemoProject)을 프로젝트 이름으로 쓸 수 없는데, Claude가 이 문제를 만나자 임시 폴더에 소문자 이름으로 생성한 뒤 내용을 옮기는 방식으로 스스로 우회했습니다. 사람이 개입하지 않아도 막히는 지점을 알아서 풀어 가는 것이 코딩 에이전트의 힘입니다.

5. PowerShell 실행 정책 설정#

개발 서버를 띄우기 전에 한 가지 준비가 필요합니다. Code 탭의 내장 터미널은 PowerShell로 동작하는데, 윈도우의 PowerShell은 기본적으로 스크립트 실행을 차단하는 보안 정책을 갖고 있습니다. 이 상태로 npm 명령을 실행하면 “이 시스템에서 스크립트를 실행할 수 없으므로…”라는 오류가 납니다.

시작 메뉴에서 Windows PowerShell을 검색한 뒤 관리자 권한으로 실행을 선택합니다.

관리자 PowerShell 창에서 아래 명령을 입력하고, 확인 질문에 A(모두 예)를 입력합니다.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

RemoteSigned가 무슨 뜻인가요?

PowerShell 실행 정책은 어떤 스크립트의 실행을 허용할지 정하는 보안 설정입니다.

• Restricted(기본값): 모든 스크립트 실행 차단 — npm도 스크립트라서 막힙니다
• RemoteSigned: 내 PC에서 만든 스크립트는 허용하고, 인터넷에서 받은 스크립트는 서명된 것만 허용 — 개발 용도로 널리 쓰이는 균형 잡힌 설정입니다

한 번만 설정하면 이후에는 다시 할 필요가 없습니다.

6. 개발 서버 실행과 브라우저 접속#

이제 Code 탭으로 돌아옵니다. 세션 화면의 터미널 열기 아이콘(>_)을 누르면 프로젝트 폴더가 잡힌 내장 터미널이 열립니다. 여기에 개발 서버 실행 명령을 입력합니다.

npm run dev

Claude의 완료 보고에 함께 표시된 npm run dev 실행 버튼을 눌러도 됩니다.

서버가 시작되면 윈도우 방화벽이 Node.js의 네트워크 접근을 허용할지 묻는 창을 띄웁니다. 허용을 누르면 같은 네트워크의 다른 기기(스마트폰 등)에서도 접속할 수 있습니다. 내 PC에서만 확인할 거라면 취소해도 localhost 접속에는 지장이 없습니다.

터미널에 Ready가 표시되면 웹브라우저를 열고 주소창에 localhost:3000을 입력합니다. Next.js 시작 페이지가 나타나면 성공입니다.

서버를 멈추려면 터미널에서 Ctrl + C를 누르면 됩니다.

---

7. 여기서 얼마나 더 갈 수 있을까 — 데모 앱 시리즈#

오늘 만든 것은 시작 페이지 하나지만, 같은 방식 — 프롬프트로 만들고, 대화로 다듬기 — 으로 실제로 매일 쓰는 앱까지 갈 수 있습니다. 잇다가 교육용으로 만든 데모 앱 시리즈가 그 증거입니다. 전부 사람이 코드를 타이핑하지 않고 Claude와의 대화로 만들었고, 코드와 생성 지침이 itda-demo-apps 저장소에 공개되어 있습니다.

모두 지금 바로 브라우저에서 열어 볼 수 있는 살아 있는 앱들입니다. 아래 앱 스크린샷을 클릭하면 해당 앱이 새 탭에서 바로 열립니다 — 눈으로만 훑지 말고 직접 눌러 보면서 읽으시길 권합니다.

그중 세 개만 들여다보겠습니다.

홈트 뽑기 — 시리즈의 원형#

홈트 뽑기는 하체·푸시·풀·코어·전신 5개 패턴에서 하나씩 뽑아 매번 다른 서킷 운동을 만들어 주는 앱입니다. 운동 중에는 음성이 다음 동작과 폼 포인트를 읽어 줘서 폰을 보지 않아도 되고, 설치 없이 홈 화면에 추가해 오프라인에서도 동작합니다.

이 앱의 첫 버전은 claude.ai 대화창에서 아래 프롬프트로 시작됐습니다. 저장소 README에 그대로 공개되어 있는 실제 지침입니다.

홈트레이닝 서킷 운동 앱을 만들어줘.

- 운동을 하체/푸시/풀/코어/전신 5개 패턴으로 분류하고,
  "뽑기" 버튼을 누르면 각 패턴에서 하나씩 랜덤으로 뽑아
  오늘의 5동작 서킷을 만든다
- 시작하면 타이머가 준비 10초 → [운동 30초 → 휴식 15초] 반복으로 진행되고,
  휴식 중에는 다음 동작 이름을 크게 예고해준다
- 라운드 수·운동/휴식 시간은 설정 가능
- 데이터는 서버 없이 브라우저에만 저장
- 어두운 배경에 큰 숫자, 모바일 우선 디자인

물론 한 번에 완성된 것은 아닙니다. “타이머 숫자를 더 크게”, “휴식 때 다음 동작을 미리 읽어줘”처럼 대화로 고쳐 나가는 과정을 거쳐 지금의 모습이 됐습니다 — 오늘 우리가 Next.js 시작 페이지를 만들고 이어서 수정을 요청하는 것과 정확히 같은 흐름입니다.

🏋️ 홈트 뽑기 직접 실행해 보기 설치·가입 없이 브라우저에서 바로 열립니다. 뽑기 버튼을 눌러 오늘의 서킷을 만들어 보세요. →

점심 뽑기 — 프롬프트 한 줄로 태어난 파생작#

시리즈가 재미있어지는 지점은 두 번째 앱부터입니다. 점심 뽑기(팀 점심 메뉴 룰렛)는 Claude Code에서 홈트 뽑기 저장소를 열고 이 한 줄을 입력해 만들어졌습니다.

이 앱과 같은 구조·디자인으로 "점심 뽑기" 앱을 만들어줘.
팀 점심 메뉴를 카테고리별로 뽑고, 최근 먹은 건 제외해줘.

잘 만든 앱 하나가 다음 앱의 지침서 역할을 하는 것입니다. 각 저장소의 README와 CLAUDE.md에는 앱의 구조 설명과 제작 지침이 함께 담겨 있어서, Claude Code로 저장소를 열면 누구나 같은 방식으로 자기 팀의 앱을 파생시킬 수 있습니다.

🍱 점심 뽑기 직접 실행해 보기 카테고리를 고르고 뽑기를 돌려 보세요. 최근 먹은 메뉴가 제외되는 동작까지 확인할 수 있습니다. →

고장 길잡이 — 현장 기사님의 주머니 속 지도#

마지막은 업무 현장에서 바로 쓰는 모습이 그려지는 앱입니다. 고장 길잡이는 AS 기사님이 현장에서 문제 파악이 막힐 때 지도 역할을 해 주는 앱입니다. 업종(안마의자·정수기·에어컨· 보일러·커피머신)을 고르고 증상을 검색하면, 진단의 순서를 앱이 잡아 줍니다.

증상을 선택하면 원인 후보를 먼저 보여주고, 조치 단계를 순서대로 체크하며 진행하게 합니다. 위험 신호가 보이면 “현장 수리 중단, 기술지원 접수” 같은 에스컬레이션 기준을 경고 박스로 알려 주고, 현장에서 알아낸 노하우는 “내 해결 메모”로 내 기기에만 저장됩니다. 전파가 약한 지하 기계실에서도 쓸 수 있게 오프라인에서도 동작합니다.

주목할 점: 이 앱에는 AI 연동이 하나도 없습니다. 잘 정리된 데이터와 화면만으로도 현장 도구는 충분히 유용합니다. 물론 여기에 AI를 연동하면 — 증상을 말로 설명하면 원인 후보를 좁혀 주는 식으로 — 문제 파악을 한층 더 도와주도록 확장할 수도 있습니다. 데모의 이슈 데이터는 AI가 생성한 가상 제품 기준이라, 실제 도입할 때는 자사 매뉴얼과 AS 일지로 교체하고 베테랑 기사님의 검수를 거치면 됩니다.

AS 조직을 운영하고 계시다면 이런 형태의 도구를 꼭 한번 살펴보시길 권합니다 — 기사님들의 머릿속에만 있던 노하우가 팀의 자산이 되는 출발점이 될 수 있습니다.

🔧 고장 길잡이 직접 실행해 보기 업종을 고르고 증상을 검색해, 원인 후보와 조치 단계 체크리스트를 직접 눌러 보세요. →

---

마무리#

정리하면 이렇습니다.

• 직접 입력한 명령: winget 설치 두 줄, 실행 정책 한 줄, npm run dev 한 줄
• Claude가 대신한 일: 프로젝트 구성, 의존성 설치, 빌드 검증, Git 커밋, 문제 우회까지

이제 첫 페이지를 바꿔 보세요. 개발 서버를 띄워 둔 채로 입력창에 프롬프트를 이어서 입력하면 됩니다.

첫 화면의 제목을 "나의 첫 Next.js"로 바꾸고, 배경을 밝은 하늘색으로 바꿔줘.

저장과 동시에 브라우저 화면이 즉시 갱신되는 것을 보실 수 있습니다. 코드 편집기를 열지 않고도 웹 개발이 시작됩니다.

이런 앱, 우리 팀도 만들 수 있어요 — 위 데모들은 잇다의 기업·팀 AI 활용 교육 예시입니다. 교육에서는 아이디어 정리부터 배포·운영까지, 앱을 체계적으로 만드는 방법을 배웁니다. 교육·강의·워크숍이 필요하시면 문의하기로 연락 주세요.