내 사이트를 원하는 디자인으로 · /clone-website 세팅 가이드

---
name: clone-website
description: 참고 사이트 주소를 받아 그 사이트의 디자인(첫 화면 구도·섹션 구성·색·글꼴·그림 스타일)으로 지금 폴더의 내 사이트를 다시 짠다. 글은 그대로 둔다. "/clone-website <주소>"로 실행.
---

# clone-website

목표: 내 사이트를 한눈에 봤을 때 "아, 이거 <참고 사이트> 느낌이네"라는 말이 나오게 만든다. 색만 바꾸는 건 실패다. 사이트다움은 뼈대(첫 화면 구도, 섹션이 어떻게 쌓이는지, 크기 대비, 그림 쓰는 방식)에서 나온다.

## 1. 참고 사이트 읽기

    firecrawl scrape <참고 주소> -f markdown,branding --full-page-screenshot --wait-for 2500 --json -o ref.json

ref.json의 screenshot 주소에서 전체 캡처를 받아 ref.png로 저장하고, 위에서부터 화면 높이 단위로 잘라 전부 직접 본다. branding 값은 참고만 한다(틀릴 때가 있다). 실제 색은 캡처에서 확인한다.

## 2. 뼈대 메모 (사용자에게 짧게 보여 주기)

캡처를 보고 아래를 적는다.
- 첫 화면: 무엇이 화면을 채우나(전폭 사진/전폭 타일/큰 제품 화면), 제목 위치와 크기, 버튼 모양과 개수
- 섹션 목록: 위에서부터 각 섹션의 유형(전폭 타일, 2열 타일, 카드 줄, 큰 숫자, 후기 카드, 로고 줄, 띠 배너 등), 배경색, 정렬, 높이
- 크기 대비: 제목과 본문 글자 크기 비율, 여백 양
- 그림 쓰는 방식: 제품 화면을 크게, 손그림, 사진 위 글씨, 기기 목업 등
- 그 사이트에만 있는 표시 3개 (예: 화면을 꽉 채우는 타일 + 가운데 제목 + 알약 링크 두 개)

## 3. 내 내용을 그 뼈대에 다시 배치

- 내 사이트의 글은 한 글자도 바꾸지 않는다. 대신 섹션 순서·묶음·배치는 참고 사이트 구성에 맞춰 자유롭게 바꾼다. 원래 카드 3개였던 내용도 참고 사이트가 전폭 타일을 쌓는 곳이면 타일로 쌓는다.
- 그림·사진 자리는 HTML/CSS/SVG로 새로 그린다(앱 화면, 기기 목업, 추상 그래픽, 손그림 선). 이미지 파일을 새로 만들거나 참고 사이트 이미지를 가져오지 않는다.
- 참고 사이트의 로고·이름·문구·사진은 쓰지 않는다. 내 이름과 내 문구만.
- 이모지 아이콘, 그라데이션 글자는 참고 사이트에 없으면 쓰지 않는다.

## 4. 비교하며 고치기 (최소 2번)

1440px 폭으로 내 페이지 전체를 캡처해 ref.png와 같은 높이 구간끼리 나란히 놓고 본다. 첫 화면 구도, 섹션 유형 순서, 글자 크기 대비, 배경색 리듬이 다르면 고친다. 두 번째 비교에서도 "한눈에 같은 집안"이 아니면 한 번 더 고친다.

## 5. 마무리

데스크톱(1440px)·휴대폰(390px) 폭에서 깨지거나 가로로 넘치는 곳이 없는지 확인하고, 바꾼 뼈대를 3–5줄로 알려 준다. 작업용 캡처 파일은 지운다(ref.json은 남긴다).