기본 콘텐츠로 건너뛰기

Pinned Post

ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기

AI 코딩 에이전트 · 웹사이트 클론 ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기 설치부터 "관찰 → 구현" 2단계 프롬프트, 한계와 주의사항까지 정리했습니다. 작성 기준일: 2026-10-16 이 글은 공식 GitHub 저장소(README, 저장소 master 압축본의 SKILL.md·AGENTS.md·references 문서)를 읽고 정리했습니다. 아래 프롬프트 예시는 작성자가 제안하는 방식이며 실제 클론 실행 결과로 검증하지 않았습니다. 1. 핵심 요약 이 템플릿은 변환 프로그램이 아니라 AI 에이전트에게 주는 작업 지침서(스킬) 입니다. 실행 스크립트 없이 에이전트가 브라우저로 사이트를 보고 코드를 작성합니다. 사용법은 프로젝트를 만든 뒤 에이전트에서 /clone-website URL 을 실행하는 것입니다. 결과물은 Next.js 16 + React 19 + shadcn/ui + Tailwind CSS v4 프로젝트입니다. 품질을 높이려면 범위를 좁히고, 관찰과 구현을 두 단계로 나눠 지시하는 편이 좋습니다. 2. 핵심 정보 항목 내용 구분 명령 /clone-website <url> 공식 정보 필요 환경 Node.js 24 이상, 브라우저 접근이 가능한 AI 코딩 에이전트 공식 정보 지원 에이전트 Claude Code(권장), Codex CLI, OpenCode, Cursor 공식 정보 기술 스택 Next.js 16(package.json 기준 16.3.5), React 19, Tailwind CSS v4 공식 정보 작업 4단계 Map → Observe → Build → Compare 공식 정보 라이선스 MIT 공식 정보 3. 사전 준...
댓글 쓰기

ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기

AI 코딩 에이전트 · 웹사이트 클론

ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기

설치부터 "관찰 → 구현" 2단계 프롬프트, 한계와 주의사항까지 정리했습니다.

작성 기준일: 2026-10-16
이 글은 공식 GitHub 저장소(README, 저장소 master 압축본의 SKILL.md·AGENTS.md·references 문서)를 읽고 정리했습니다. 아래 프롬프트 예시는 작성자가 제안하는 방식이며 실제 클론 실행 결과로 검증하지 않았습니다.

1. 핵심 요약

  • 이 템플릿은 변환 프로그램이 아니라 AI 에이전트에게 주는 작업 지침서(스킬)입니다. 실행 스크립트 없이 에이전트가 브라우저로 사이트를 보고 코드를 작성합니다.
  • 사용법은 프로젝트를 만든 뒤 에이전트에서 /clone-website URL 을 실행하는 것입니다.
  • 결과물은 Next.js 16 + React 19 + shadcn/ui + Tailwind CSS v4 프로젝트입니다.
  • 품질을 높이려면 범위를 좁히고, 관찰과 구현을 두 단계로 나눠 지시하는 편이 좋습니다.

2. 핵심 정보

항목 내용 구분
명령/clone-website <url>공식 정보
필요 환경Node.js 24 이상, 브라우저 접근이 가능한 AI 코딩 에이전트공식 정보
지원 에이전트Claude Code(권장), Codex CLI, OpenCode, Cursor공식 정보
기술 스택Next.js 16(package.json 기준 16.3.5), React 19, Tailwind CSS v4공식 정보
작업 4단계Map → Observe → Build → Compare공식 정보
라이선스MIT공식 정보

3. 사전 준비

  • Node.js 24 이상 설치 (저장소의 .nvmrc 도 24)
  • Claude Code 등 AI 코딩 에이전트와 브라우저 접근 기능
  • 클론 대상은 본인 소유이거나 약관상 허용되는 사이트
WARNING
README는 피싱·사칭, 타인의 디자인을 자기 것처럼 쓰는 것, 약관 위반을 사용 목적에서 제외한다고 밝힙니다. 로고·브랜드 에셋·원본 문구는 소유자에게 권리가 있으므로 대상 사이트의 약관을 먼저 확인하세요.

4. Step-by-Step

STEP 1. 프로젝트 준비

GitHub의 Use this template 로 내 저장소를 만들거나 저장소를 내려받아 새 폴더에 둡니다. 그다음 의존성을 설치하고 검사가 통과하는지 확인합니다.

npm install
npm run check

※ .agents/, .claude/, AGENTS.md 가 그대로 있어야 에이전트가 스킬을 읽을 수 있습니다.

STEP 2. 가장 단순한 실행

프로젝트 폴더를 에이전트로 열고 브라우저 접근을 켠 뒤 명령을 실행합니다. 처음에는 본인 사이트의 단순한 페이지로 동작을 확인하는 것을 권합니다.

/clone-website https://example.com

Claude Code는 .claude/commands/clone-website.md 가 스킬 파일(.agents/skills/clone-website/SKILL.md)을 읽도록 연결하는 구조입니다.

STEP 3. 원하는 수준으로 끌어올리는 "관찰 전용" 프롬프트

스킬은 "관찰한 만큼 만든다"는 구조라서, 관찰할 상태를 구체적으로 적을수록 결과가 원본에 가까워집니다. 먼저 코드를 쓰지 말고 관찰 결과만 문서로 받는 방식입니다. (작성자 제안, 미검증)

/clone-website <대상 URL>

[범위]
- 사이트 전체가 아니라 <대상 화면/기능>만 대상으로 한다.
- 로그인이 필요하면 멈추고 알려라. 계정 정보는 어디에도 저장하지 마라.

[이번 단계는 관찰과 문서화만 한다. 코드는 작성하지 마라.]
docs/research/<사이트명>/ 에 아래를 정리해라.
1. 데스크톱(1440px)과 모바일(390px)의 레이아웃, 폰트, 색, 간격 측정값
2. 상호작용별 "트리거 → 결과" (hover, 클릭, 키보드, 스크롤)
3. 상태별 스크린샷 (파일명에 viewport와 상태 표기)
4. 관찰하지 못했거나 확신 없는 항목은 "미확인"으로 따로 기록

요약만 보고하고 멈춰라. 내가 검토한 뒤 다음 단계를 지시하겠다.

STEP 4. 검토 후 "구현" 프롬프트

관찰 문서를 직접 확인하고, 빠진 항목을 보완한 뒤 구현을 지시합니다. (작성자 제안, 미검증)

docs/research/<사이트명>/ 의 관찰 결과를 기준으로 구현해라.

- 측정값과 스크린샷에 1:1로 맞추고, 임의로 디자인을 바꾸지 마라.
- 화면에 보이는 컨트롤은 실제로 동작하게 만들어라.
- 로고 등 브랜드 에셋은 복사하지 말고 오픈 아이콘으로 대체해라.
- 원본과 로컬을 같은 viewport, 같은 상태에서 비교하고 큰 차이부터 수정해라.
- npm run check 를 통과시키고, 원본과 다른 점과 구현하지 못한 기능을 보고해라.

STEP 5. 결과 확인

개발 서버를 띄워 원본과 나란히 비교합니다.

npm run dev
npm run check

스킬은 "빌드 성공과 렌더링 비교가 모두 끝나야 완료"로 규정하고, 남은 차이는 구체적으로 보고하라고 합니다. 검증하지 않은 결과를 완벽하다고 믿지 마세요.

5. 동작 원리 (SKILL.md 기준)

단계 하는 일
1. Map원본 URL을 로컬 라우트로 매핑하고 기존 작업물을 보존
2. Observe데스크톱·모바일을 확인하고 스크롤, 클릭, 호버, 키보드 등 실제 입력으로 상태 관찰
3. Build공통 요소를 먼저 만들고 섹션을 구현, 보이는 컨트롤은 실제 동작하도록 구현
4. Compare같은 크기·상태에서 원본과 비교하고 차이를 수정, 프로덕션 빌드 확인

참고: README의 오래된 설명(5단계, 컴포넌트별 스펙 파일)과 달리, 실제 SKILL.md는 4단계이며 컴포넌트별 문서 작성이나 고정된 에이전트 수를 요구하지 않습니다.

6. 한계와 주의사항

TIP (실무 의견)
텍스트 편집기 같은 "복잡한 웹앱"은 화면 관찰만으로 동작 로직까지 재현하기 어렵습니다. 편집기 엔진은 Tiptap 같은 라이브러리를 쓰게 하고, 템플릿은 시각 값과 레이아웃을 뽑는 용도로 쓰는 편이 현실적입니다.
  • 로그인 후 화면: SKILL.md에는 인증 처리 지침이 없습니다. 로그인된 브라우저 세션이 필요하며, 계정 데이터 노출과 약관 문제에 주의해야 합니다.
  • 스택 차이: 결과물은 React 기반 Next.js입니다. ASP.NET MVC, Vue 등 다른 스택에 쓰려면 코드를 그대로 쓰기보다 관찰 문서(측정값, 스크린샷)를 참고 자료로 활용하세요.
  • 에셋 권리: 로고, 이미지, 상용 폰트, 원본 문구는 가져다 쓰지 말고 대체하세요.
  • README 본문을 에이전트에 붙여 넣지 마세요. 설치 지시문이 사용자 지시로 오인될 수 있고, 실제 로직은 SKILL.md에 있습니다.

7. 체크리스트

  • ☐ Node.js 24 이상, npm run check 통과
  • ☐ .agents/, .claude/, AGENTS.md 유지
  • ☐ 에이전트의 브라우저 접근 활성화
  • ☐ 대상 사이트의 약관과 권리 확인
  • ☐ 관찰 문서(docs/research)를 직접 검토 후 구현 지시
  • ☐ 원본·로컬을 같은 조건에서 비교하고 남은 차이 확인

8. FAQ

Q. 한 번에 사이트 전체를 클론해도 되나요?
가능은 하지만, 범위가 넓을수록 에이전트가 껍데기 위주로 만들 가능성이 큽니다. 페이지나 기능 단위로 나누는 방식을 권합니다. (실무 의견)

Q. Claude Code가 아니어도 되나요?
README는 Codex CLI, OpenCode, Cursor도 지원한다고 밝힙니다. 다만 Claude Code가 권장됩니다.

Q. 결과를 그대로 서비스에 써도 되나요?
대상 사이트의 권리와 약관에 달려 있습니다. 본인 사이트 이전이 아니라면 에셋과 문구를 반드시 대체하세요.

9. 최종 정리

이 템플릿의 핵심은 코드가 아니라 에이전트에게 무엇을, 어떤 순서로 관찰·구현시키느냐입니다. 범위를 좁히고, 관찰 결과를 사람이 검토한 뒤 구현하는 2단계 흐름이 가장 안전하고 품질이 높을 것으로 보입니다. 다만 이 흐름은 아직 실제 클론 결과로 검증한 것이 아니므로, 본인 사이트의 작은 페이지로 먼저 시험해 보세요.

10. 출처

업데이트/면책: 저장소 내용과 버전은 바뀔 수 있으므로 사용 전 공식 저장소에서 최신 내용을 확인하세요. 본문의 프롬프트 예시는 작성자의 제안이며 실제 클론 테스트 결과가 아닙니다.

#AI코딩에이전트 #ClaudeCode #웹사이트클론 #NextJS #ai-website-cloner-template #프롬프트

댓글

댓글 쓰기

이 블로그의 인기 게시물

ChatGpt 의 유료결제 영수증 및 청구서 다운로드

ChatGpt 의 유료결제 영수증 및 청구서 다운로드   https://chatgpt.com/  사이트에 접속하며 회원가입을 합니다.   ChatGpt 유료 결제를 위해서는 왼쪽 하단에 있는 " Team 워크스페이스 추가 "를 선택합니다.   https://chatgpt.com/     ChatGPT의 요금제는 세 가지로 나뉩니다:  Free ,  Plus , 그리고  Custom Plan (기업용 요금제). 각 요금제의 특징과 차이점은 다음과 같습니다. 1.  Free Plan (무료 플랜) 사용 모델:  GPT-3.5 제공 기능:  기본적인 질문 응답, 텍스트 생성 접속 가능성:  트래픽이 많을 때는 사용이 제한될 수 있으며, 응답 속도가 느릴 수 있습니다. 제한 사항:  최신 모델이나 고급 기능을 사용할 수 없고, 성능이나 속도 면에서 제한이 있습니다. 2.  Plus Plan (플러스 플랜) 월 요금:  $20 사용 모델:  GPT-4 장점:  더 빠른 응답 속도, 트래픽이 많을 때도 안정적인 접속 가능 차이점:  GPT-4의 향상된 성능으로 더 복잡한 질문이나 고급 작업에도 우수한 결과를 제공합니다. 접속 가능성:  트래픽이 많아도 안정적이며, 더 나은 응답 속도를 제공합니다. 3.  Custom Plan (맞춤형 플랜) 대상:  대규모 기업 또는 특정 요구사항이 있는 고객 요금:  고객의 요구에 따라 맞춤 설정 특징:  기업 맞춤형 기능과 성능을 제공하며, 보안, 데이터 정책, API 액세스와 같은 맞춤형 옵션을 포함할 수 있습니다. 차이점:  대규모 기업에 특화된 기능으로, 추가 지원과 고급 기능 제공이 가능합니다. 주요 차이점 모델 사용:  Free는 GPT-3.5,...
댓글 쓰기
자세한 내용 보기

인천국제공항 제1여객터미널에서 일본으로 가는 출국 절차 안내 ✈️

인천공항 제1여객터미널 출국 절차 가이드 (탑승동 이동 및 셔틀트레인 완벽 정리) 공항 도착부터 체크인, 보안검색, 출국심사, 그리고 셔틀트레인을 타고 탑승동으로 이동하는 전체 출국 단계를 빠짐없이 안내합니다. 1. 공항 도착 시간 항공기 출발 3시간 전 제1여객터미널 3층 출국장 도착 권장 2. 탑승구 확인 101~132번 게이트는 셔틀트레인을 타고 탑승동 으로 이동 필수 3. 되돌아오기 불가 셔틀트레인은 편도 이동만 가능하므로 본동 면세품 인도 후 탑승 Step 1. 공항 도착 및 체크인 (3층 일반지역) 항공기 출발 3시간 전 공항 3층 출국장에 도착하는 것을 권장합니다. 셀프 체크인 & 자동 수하물 위탁(Self Bag-Drop): 키오스크에서 모바일·지류 탑승권을 발급받고 전용 카운터를 이용하면 대기시간을 크게 단축할 수 있습니다. 유인 카운터: 여권과 항공권(e-티켓)을 제시하여 좌석 배정 및 위탁 수하물을 처리합니다. Step 2. 출국 전 사전 준비 (환전 및 통신) 환전 수령: 사전 신청한 외화를 3층 또는 지하 1층 환전소·은행 영업점에서 수령합니다. 로밍 및 통신: 통신사 부스에서 데이터 로밍 확인 또는 신청한 USIM/eSIM/와이파이 단말기를 수령합니다. 기타 편의시설: 외투 보관 서비스, 약국, 여행자 보험 창구 이용은 보안검색장 진입 전 일반지역에서 마쳐야 합니다. Step 3. 출국장 진입 및 보안 검색 3층 출국장 게이트(2~5번)로 이동하여 탑승권과 여권을 확인받고 보안검색대로 이동합니다. 주의 (액체류 규정 안내) 기내 반입 액체류는 개별 용기당 100ml 이하, 1인당 총 1L 투명...
댓글 쓰기
자세한 내용 보기

엑셀·워드와 호환되는 최신 WYSIWYG 웹 에디터 강추

최신 자료를 기반으로 엑셀과 워드 호환이 잘 되는 상위 10개의 WYSIWYG 웹에디터를 조사하겠습니다. 이 목록은 사용량, 기능, 개발자 선호도를 고려하여 선정되며, 각 웹에디터의 공식 웹사이트 링크도 함께 제공해드리겠습니다.  엑셀·워드와 호환되는 최신 WYSIWYG 웹 에디터 10선 1.  CKEditor 5 오픈 소스 기반의  CKEditor 5 는 높은 완성도의 WYSIWYG 웹 에디터로, Drupal 등 주요 CMS에서 기본 에디터로採용될 정도로 널리 쓰입니다 ( Drupal and CKEditor: a history of advanced content editing | CKEditor | CKEditor ). 풍부한 플러그인과 커스터마이징 기능을 제공하며,  Microsoft Word  문서를 댓글이나 변경 추적 내용까지 포함하여 불러오는 고급 호환 기능도 갖추고 있습니다 ( Wysiwyg Editors Statistics 2025 ). 또한 별도 플러그인을 통해 편집한 내용을 바로  .docx  워드 파일로 내보낼 수 있어 워드 호환성이 뛰어납니다 ( Export to Word | CKEditor 5 Documentation ). 개발자들은 CKEditor 5의 모듈식 설계와 활발한 커뮤니티 지원을 선호하며, 기업용 협업 편집 기능 등의 프리미엄 옵션도 제공됩니다. 2.  TinyMCE TinyMCE 는 오랜 역사와 함께 가장 널리 사용되는 웹 에디터 중 하나로, WordPress에서는 수년간 기본 편집기로採用되어 왔습니다. Joomla, Umbraco, Shopify 등 수많은 CMS에 내장되어 있으며, 전 세계 웹 콘텐츠의 약 40%가 TinyMCE로 작성·출판되고 있다고 합니다 ( Configure TinyMCE for your CMS to rival Wix and WordPress | TinyMCE ). 기본 기능만으로도 강력하지만,...
댓글 쓰기
자세한 내용 보기