Windows 11에서 AI Website Cloner 설치하기: PowerShell부터 웹사이트 실행까지

작성 기준일: 2026년 10월 16일

이번 가이드에서는 Windows 11 PC에서 AI Website Cloner Template을 직접 설치하고 실행하는 과정을 설명합니다.

설치 과정은 다음 순서로 진행합니다.

전체 설치 순서

PowerShell 실행
Node.js 24 LTS 설치 및 확인
Git 설치 및 확인
프로젝트 다운로드
npm 패키지 설치
프로젝트 검사
AI 코딩 에이전트에서 프로젝트 열기
웹사이트 재구성 및 로컬 실행

1. PowerShell 실행하기

Windows에서 명령어를 입력하려면 PowerShell을 사용합니다.

키보드에서 Windows 키를 누릅니다.
검색창에 PowerShell을 입력합니다.
Windows PowerShell 또는 PowerShell을 실행합니다.

일반적인 개발 도구 설치와 프로젝트 명령 실행에는 관리자 권한이 필요하지 않습니다. 특별한 이유가 없다면 일반 사용자 권한으로 진행하세요.

2. Node.js 설치하기

이 프로젝트는 Node.js 24 이상을 요구합니다. 기존에 Node.js가 설치되어 있더라도 버전을 먼저 확인해야 합니다.

Node.js 공식 다운로드 페이지에서 Windows용 Node.js 24 LTS 설치 프로그램을 선택합니다.

2-1. 설치 여부 확인

PowerShell에서 다음 명령을 입력합니다.

node -v
npm -v

정상 확인 기준

node -v: Node.js 버전이 표시됩니다.
npm -v: npm 버전이 표시됩니다.
Node.js 버전이 24 이상이어야 합니다.

Node.js가 설치되어 있지 않거나 버전이 낮다면 공식 다운로드 페이지에서 설치 프로그램을 내려받습니다.

2-2. 설치 프로그램 실행

내려받은 Windows용 .msi 설치 파일을 실행합니다.
설치 마법사의 안내에 따라 진행합니다.
기본 설치 옵션을 유지하고 설치를 완료합니다.
PowerShell을 닫았다가 다시 실행합니다.
node -v와 npm -v를 다시 입력합니다.

주의: 설치 후에도 기존 버전이 표시되거나 명령을 찾을 수 없다면 터미널을 다시 열고 PATH 설정을 확인하세요. 여러 Node.js 버전 관리 도구를 사용 중이라면 실제로 선택된 버전도 점검해야 합니다.

3. Git 설치하기

Git은 GitHub에 저장된 프로젝트를 PC로 내려받을 때 사용합니다.

먼저 설치 여부를 확인합니다.

git --version

버전이 표시되지 않는다면 Git for Windows 공식 설치 페이지에서 설치 프로그램을 내려받습니다.

Windows용 Git 설치 프로그램을 실행합니다.
설치 마법사의 안내에 따라 진행합니다.
설치가 끝나면 PowerShell을 새로 실행합니다.
git --version으로 설치를 확인합니다.

4. 프로젝트를 다운로드할 폴더 만들기

프로젝트를 저장할 개발 폴더를 준비합니다. 여기서는 C:\Dev를 예시로 사용합니다.

다음 명령은 폴더가 없으면 생성하고, 이미 존재하면 그대로 사용합니다.

New-Item -ItemType Directory -Force -Path C:\Dev
Set-Location C:\Dev

PowerShell에서 Set-Location은 지정한 폴더로 이동하는 명령입니다.

5. GitHub 프로젝트 다운로드하기

이제 공식 저장소를 PC로 복제합니다.

git clone https://github.com/JCodesMore/ai-website-cloner-template.git ai-website-cloner

다운로드가 끝나면 프로젝트 폴더로 이동합니다.

Set-Location C:\Dev\ai-website-cloner

현재 폴더가 맞는지 확인합니다.

Get-Location
Get-ChildItem

프로젝트의 파일과 폴더가 표시되면 다운로드 단계가 완료된 것입니다.

다른 경로를 사용하려면?
예를 들어 D:\Projects에 저장하고 싶다면 앞 단계의 경로를 해당 위치로 변경하면 됩니다. 이후 명령도 실제 프로젝트 경로에 맞춰 실행해야 합니다.

6. npm 패키지 설치하기

프로젝트에는 Next.js, React, TypeScript 등 실행에 필요한 패키지가 정의되어 있습니다. Git으로 소스 코드를 내려받았다고 해서 필요한 패키지까지 모두 설치된 것은 아닙니다.

프로젝트 루트에서 다음 명령을 실행합니다.

npm ci

npm ci는 잠금 파일을 기준으로 의존성을 설치하는 명령입니다. 설치가 완료되면 프로젝트에 필요한 패키지가 준비됩니다.

설치 중 오류가 발생한다면 다음 항목을 확인합니다.

Node.js 버전이 24 이상인지
현재 폴더에 package.json과 package-lock.json이 있는지
인터넷 연결과 npm 레지스트리 접근이 가능한지
오류 메시지에 특정 패키지나 권한 문제가 표시되는지

오류가 발생했다고 바로 package-lock.json을 삭제하거나 임의로 패키지 버전을 변경하지 마세요. 먼저 오류 원인을 확인하는 것이 좋습니다.

7. 프로젝트가 정상인지 검사하기

패키지 설치가 끝나면 다음 명령을 실행합니다.

npm run check

이 프로젝트에서 제공하는 검사 명령은 다음 작업을 순서대로 수행합니다.

npm run lint — ESLint 검사
npm run typecheck — TypeScript 타입 검사
npm run build — 프로덕션 빌드

명령이 오류 없이 종료되면 초기 프로젝트의 해당 검사를 통과한 것입니다. 실제 웹사이트 재구성 이후에도 다시 실행해 변경된 코드에 문제가 없는지 확인하세요.

8. AI 코딩 에이전트에서 프로젝트 열기

AI Website Cloner는 단순히 설치만 하는 도구가 아닙니다. AI 코딩 에이전트가 프로젝트의 지침과 스킬을 읽고 작업하도록 연결해야 합니다.

공식 저장소는 Claude Code, Codex CLI, Cursor, OpenCode를 지원 대상으로 안내합니다.

Claude Code를 사용하는 경우

Claude Code는 Windows에서 Git for Windows 또는 WSL 기반 환경을 사용할 수 있습니다. 공식 설치 안내를 확인하세요.

Claude Code 공식 설치 가이드

공식 문서에 안내된 npm 설치 방식 중 하나는 다음과 같습니다.

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

이 명령은 Claude Code를 설치하기 위한 것입니다. AI Website Cloner 프로젝트의 의존성을 설치하는 명령인 npm ci와는 용도가 다릅니다.

설치 후 Claude Code 실행 환경에서 프로젝트 폴더를 엽니다. Git Bash를 사용하는 Windows 환경에서는 다음과 같이 이동할 수 있습니다.

cd /c/Dev/ai-website-cloner
claude

PowerShell 경로와 Git Bash 경로 표기법은 다릅니다. 위 명령은 Git Bash 기준이며, PowerShell에서 그대로 사용하지 마세요.

처음 실행할 때는 인증 안내가 나타날 수 있습니다. 공식 안내에 따라 인증하고, 작업 폴더 접근 및 명령 실행 권한을 확인합니다.

다른 에이전트를 사용한다면 해당 프로그램에서 C:\Dev\ai-website-cloner 폴더를 프로젝트로 엽니다. 에이전트별 설치 방법은 각 공식 문서를 따르세요.

9. 웹사이트 재구성 시작하기

프로젝트와 AI 에이전트 준비가 끝나면 본인이 소유하거나 재구성 권한을 받은 웹사이트를 대상으로 작업합니다.

Claude Code에서 제공되는 프로젝트 명령의 기본 형식은 다음과 같습니다.

/clone-website https://example.com

https://example.com은 사용법을 설명하기 위한 예시 주소입니다. 실제 작업에서는 허가받은 사이트 주소로 바꾸세요.

작업 전에 다음을 확인하세요.

에이전트가 프로젝트의 AGENTS.md 및 관련 스킬을 읽을 수 있는가?
브라우저를 통한 원본 페이지 조사 기능이 준비되어 있는가?
파일 수정과 터미널 명령 실행에 필요한 권한이 설정되어 있는가?
작업 전 Git 상태를 확인하고 필요한 변경 사항을 커밋했는가?

10. 개발 서버 실행하기

AI가 코드를 생성한 후에는 실제 브라우저에서 확인해야 합니다.

프로젝트 루트에서 실행합니다.

npm run dev

터미널에 표시되는 로컬 주소를 확인하고 브라우저에서 엽니다. 기본 포트인 3000을 사용할 수 있다면 주소는 다음과 같습니다.

http://localhost:3000

다른 프로그램이 포트를 사용 중이면 개발 서버가 다른 포트를 안내할 수 있습니다. 이 경우 터미널에 표시된 주소를 사용하세요.

브라우저에서 화면이 표시되면 다음 항목을 확인합니다.

페이지 레이아웃과 글꼴, 이미지가 정상적으로 표시되는가?
메뉴와 버튼이 실제로 동작하는가?
모바일 화면에서도 콘텐츠가 잘리지 않는가?
터미널에 컴파일 오류가 없는가?

개발 서버를 종료하려면 서버를 실행 중인 터미널에서 Ctrl + C를 누릅니다.

11. 설치 중 자주 발생하는 문제

문제 1. node 또는 npm 명령을 찾을 수 없음

Node.js가 설치되지 않았거나 PATH 설정이 적용되지 않았을 수 있습니다. 설치 후 PowerShell을 다시 열고 버전을 확인하세요.

문제 2. git 명령을 찾을 수 없음

Git 설치 여부와 PATH 설정을 확인합니다. 설치 프로그램을 실행한 뒤 새 터미널을 열어 다시 확인하세요.

문제 3. npm ci가 실패함

현재 디렉터리가 프로젝트 루트인지 확인하고, Node.js 버전 및 오류 메시지를 점검하세요. 패키지 레지스트리에 대한 네트워크 접근도 확인해야 합니다.

문제 4. npm run check가 실패함

출력된 첫 번째 오류부터 확인합니다. 린트 오류, TypeScript 타입 오류, 빌드 오류는 서로 원인이 다를 수 있습니다. 오류를 수정한 후 다시 실행하세요.

문제 5. /clone-website 명령을 인식하지 못함

올바른 프로젝트 폴더를 열었는지, Claude Code용 명령 파일과 공통 스킬이 존재하는지 확인합니다. 다른 에이전트에서는 동일한 슬래시 명령이 지원되지 않을 수 있으므로 해당 에이전트의 사용 방식에 맞춰야 합니다.

12. 최종 확인 체크리스트

□ PowerShell에서 Node.js 24 이상 확인
□ Git 설치 및 버전 확인
□ 프로젝트 파일 다운로드 완료
□ npm ci 완료
□ npm run check 통과
□ AI 에이전트에서 프로젝트 폴더 열기
□ 허가된 대상 URL로 작업 시작
□ 개발 서버에서 화면 확인
□ 변경 후 검사와 기능 테스트 수행

공식 출처

이 글은 공식 문서와 저장소를 바탕으로 구성한 설치 안내입니다. 작성자가 사용자의 Windows PC에서 직접 실행한 테스트 결과는 아닙니다. 설치 화면과 버전, 에이전트별 기능은 업데이트에 따라 달라질 수 있으므로 실행 전 공식 문서를 확인하세요.

#Windows11 #AIWebsiteCloner #NextJS #React #ClaudeCode #Codex #웹개발 #AI코딩

LUCKY BLOG

이 블로그 검색

Pinned Post