웹사이트 빌더 — 템플릿 수정 + Netlify 배포
목표
사용자의 간략한 설명을 바탕으로 기존의 검증된 템플릿을 수정(처음부터 빌드하지 않음)하여 멋지고 프로덕션에 바로 사용할 수 있는 랜딩 페이지를 제작합니다. 그런 다음 Netlify에 라이브로 푸시하고 URL을 반환합니다.
입력
- 브랜드 이름: 회사/프로젝트 이름
- 핵심 주제: 무엇인지에 대한 한 문장 (또는 확인할 URL)
- 분위기/미학: 방향 (예: "어두운 테크", "임상적 럭셔리", "브루탈리스트")
- 전환 목표: CTA가 무엇이어야 하는지 (기본값: 상담 예약)
템플릿 위치
기본 템플릿은 작업 공간 루트의 website-template/에 있습니다. 완전하고 작동하는 React + Vite + Tailwind v3 + GSAP 사이트입니다.
구조
website-template/
├── src/
│ ├── App.jsx # 루트 레이아웃 (모든 섹션 가져오기)
│ ├── index.css # Tailwind 가져오기, 노이즈 오버레이, 스크롤바
│ ├── main.jsx # 진입점
│ └── components/
│ ├── Navbar.jsx # 플로팅 내비게이션, 스크롤 반응형
│ ├── Hero.jsx # 전체 뷰포트 히어로, 배경 이미지, GSAP 텍스트 나타내기
│ ├── Features.jsx # 밝은 배경 섹션, 3개의 인터랙티브 마이크로 UI
│ ├── DiagnosticShuffler.jsx # 자동 순환 누적 카드 위젯
│ ├── TelemetryTypewriter.jsx # 터미널 스타일 타자기 위젯
│ ├── AdaptiveRegimen.jsx # 애니메이션 커서가 있는 캘린더 선택기
│ ├── Philosophy.jsx # 시차 배경, 단어 분할 텍스트 나타내기
│ ├── Protocol.jsx # 스태킹 스크롤 카드 (GSAP ScrollTrigger 고정)
│ ├── Membership.jsx # 호버 효과가 있는 3단계 가격
│ └── Footer.jsx # 컬럼이 있는 어두운 푸터
├── tailwind.config.js # 색상 토큰, 폰트, border-radius
├── postcss.config.js # 표준 postcss + autoprefixer
├── vite.config.js # Vite + React 플러그인
├── package.json # React 19, GSAP, Lucide, Tailwind v3
└── index.html
기술 스택 (변경 금지)
- React 19 + Vite 7
- Tailwind CSS v3 (
tailwind.config.js+@tailwind지시문 사용 — v4 아님) - GSAP 3 with ScrollTrigger
- Lucide React 아이콘
- PostCSS + Autoprefixer
디자인 시스템 (tailwind.config.js 내)
colors:
moss: '#070707' — 진한 검은색 강조
clay: '#0026FF' — 테크 블루 기본색
cream: '#EAEAEA' — 약간 흰색 텍스트
charcoal: '#070707' — 기본 어두운 배경
fonts:
sans: Plus Jakarta Sans, Outfit
serif: Cormorant Garamond
mono: system monospace
프로세스
1단계: 템플릿 복사
cp -R website-template/ site-name/
cd site-name
rm -rf node_modules
npm install
2단계: 브랜드에 맞게 커스터마이징
다음 파일을 수정하세요. 구조를 재구성하거나 처음부터 다시 작성하지 마십시오.
-
tailwind.config.js— 브랜드 미학에 맞게 색상 토큰(moss,clay,cream,charcoal)과 폰트를 변경합니다. 클래스 이름은 동일하게 유지하고 16진수 값만 변경합니다. -
index.css— 새 폰트 선택에 맞게 Google Fonts 가져오기 URL을 업데이트합니다. -
index.html—<title>을 업데이트합니다. -
컴포넌트 복사본 — 각 컴포넌트에서 브랜드별 텍스트를 찾아 바꿉니다:
Navbar.jsx— 브랜드 이름, 내비게이션 링크, CTA 버튼 텍스트Hero.jsx— 헤드라인, 부제목, 태그라인, 배경 이미지 URLFeatures.jsx— 섹션 제목, 부제목DiagnosticShuffler.jsx— 카드 제목, 값, 트렌드 (브랜드와 관련되게)TelemetryTypewriter.jsx— 타이핑 메시지 배열, 상태 레이블AdaptiveRegimen.jsx— 위젯 레이블, 버튼 텍스트Philosophy.jsx— 두 가지 대비되는 문장, 섹션 레이블, 배경 이미지Protocol.jsx— 단계 제목, 설명, 섹션 제목Membership.jsx— 등급 이름, 가격, 기능, 설명 (또는 필요하지 않은 경우 CTA 섹션으로 대체)Footer.jsx— 브랜드 이름, 태그라인, 링크 컬럼, 저작권
-
Unsplash 이미지 — Hero.jsx와 Philosophy.jsx의 배경 이미지 URL을 브랜드에 맞는 이미지로 교체합니다.
https://images.unsplash.com/photo-ID?w=2000&q=80형식을 사용하세요.
3단계: 빌드 및 배포
npm run build
npx netlify-cli deploy --prod --dir=dist --create-site site-name
사이트가 이미 Netlify에 연결된 경우:
npm run build
npx netlify-cli deploy --prod --dir=dist
참고: 대화형 sites:create 명령어는 비-TTY에서 멈춥니다. 항상 --create-site 플래그를 사용하세요.
4단계: 라이브 URL 반환
하지 말아야 할 것
- 컴포넌트를 처음부터 다시 작성하지 마십시오. 템플릿이 작동합니다. 복사본, 색상 및 이미지만 수정하세요.
- Tailwind v4로 전환하지 마십시오. 템플릿은
tailwind.config.js와 함께 v3를 사용합니다. 유지하세요. - 인터랙티브 마이크로 UI(DiagnosticShuffler, TelemetryTypewriter, AdaptiveRegimen)를 제거하지 마십시오. 이것들이 시각적 차별화 요소입니다. 콘텐츠를 브랜드에 맞게 조정하세요.
- 구조적 레이아웃(둥근 섹션 전환, 스태킹 스크롤 카드, 시차 철학 섹션)을 변경하지 마십시오. 이것들이 멋지게 보이게 하는 요소입니다.
- 필요하지 않은 한 새로운 npm 종속성을 추가하지 마십시오.
커스터마이징 치트 시트
분위기 변경
전체 미학은 tailwind.config.js에서 4가지 색상 토큰을 변경하여 전환됩니다.
| 분위기 | charcoal (배경) | clay (강조) | cream (텍스트) | moss (어두운 강조) |
|---|---|---|---|---|
| 테크 블루 (기본) | #070707 | #0026FF | #EAEAEA | #070707 |
| 골드 럭셔리 | #070707 | #C9A84C | #F5F0E8 | #0A0A0A |
| 네온 사이버 | #0A0A0A | #00FFD1 | #E0E0E0 | #0A0A0A |
| 클리니컬 화이트 | #FAFAFA | #2563EB | #1A1A1A | #F5F5F5 |
| 테라코타 오가닉 | #1A1410 | #CC5833 | #F2F0E9 | #2E4036 |
| 에메랄드 콘텐츠 | #090909 | #10B981 | #F0F0F0 | #0A0A0A |
클라이언트에 가격이 필요 없는 경우
Membership.jsx 콘텐츠를 전체 너비 CTA 섹션으로 교체하세요 (컴포넌트 파일은 유지하고 JSX만 변경).
작업 예제: 1SecondCopy (SEO 콘텐츠 작성 서비스)
이것은 필요한 수정 깊이의 표준 참조입니다. 모든 컴포넌트의 텍스트 콘텐츠는 변경되지만 구조/레이아웃 변경은 0입니다.
색상 (tailwind.config.js)
moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'
컴포넌트별 변경 사항
| 컴포넌트 | 변경된 내용 | 동일하게 유지된 내용 |
|---|---|---|
Navbar.jsx | 브랜드 → "1SECONDCOPY_", 링크 → Process/Platform/Pricing, CTA → "Get Started" | 플로팅 내비게이션, 스크롤 블러, 모바일 햄버거 |
Hero.jsx | 헤드라인 → "Words that Rank.", 태그라인 → "Content Writing, With a Twist", 상위 1% 작가에 대한 부제목, Unsplash 배경 → 작문 테마 | GSAP 텍스트 나타내기, 레이아웃, 그래디언트 오버레이 |
Features.jsx | 제목 → "Your Content Command Center", 실시간 대시보드에 대한 부제목 | 3열 마이크로 UI 그리드, 섹션 구조 |
DiagnosticShuffler.jsx | 카드 → "Content Velocity: 48 articles", "Avg. SERP Position: #4.2", "Turnaround Time: 2.1 days", 레이블 → "Content Analytics" | 자동 순환 애니메이션, 카드 구조 |
TelemetryTypewriter.jsx | 메시지 → 콘텐츠 파이프라인 단계 ("Researching target keywords...", "Matching writer to brief..."), 레이블 → "Live Queue", 통계 → "In Queue: 3 briefs" / "Avg. Delivery: 2.1 days" | 타자기 효과, 터미널 스타일 |
AdaptiveRegimen.jsx | 레이블 → "Content Scheduler", 제목 → "Select Publish Day", 버튼 → "Submit", GSAP 색상 → #10B981 | 캘린더 그리드, 애니메이션 커서, 날짜 칩 |
Philosophy.jsx | 기존 방식 → "Hire freelancers. Manage revisions. Pray it ranks." vs 새 방식 → "Submit a brief. Get SEO content that converts.", Unsplash 배경 교체 | 시차 스크롤, 단어 분할 나타내기, 레이아웃 |
Protocol.jsx | 단계 → "Brief & Research" / "Expert Writing" / "SEO & Delivery", 제목 → "The Process.", 그들의 워크플로우에 대한 설명 | 스태킹 스크롤 카드, GSAP 고정, SVG 그래픽 |
Membership.jsx | 등급 → Starter $0.09/word, Bulk $0.08/word, Enterprise Custom, 모든 기능이 콘텐츠 서비스용으로 다시 작성됨 | 3열 그리드, 호버 효과, 인기 배지 |
Footer.jsx | 브랜드 → "1SECONDCOPY_", 태그라인 → "SEO content on-demand", 컬럼 → Services/Company, 상태 → "Writers Online" | 레이아웃, 핑 도트 애니메이션, 저작권 |
핵심 포인트
10개 파일에 걸쳐 약 200줄의 텍스트 변경. 레이아웃, 애니메이션 또는 구조적 변경은 0입니다. 색상과 복사본이 모든 주요 작업을 수행하기 때문에 사이트가 완전히 다르게 보입니다.
환경
필요 사항:
- Node.js 18+
npx netlify-cli(자동 설치)netlify login을 통해 인증된 Netlify 계정
첫 실행 설정
실행하기 전에 작업 공간에 .gitignore 파일이 있는지 확인하십시오. 없으면 사용자가 이 스킬을 처음 사용하는 것이라고 가정합니다. 그런 경우:
- 사용자에게 이 스킬을 처음 실행하는 것인지 물어보십시오.
- 예인 경우, 스킬 작동 방식과 구성/설정해야 할 사항(API 키, 환경 변수, 종속성 등)을 안내하십시오.
- Nick이 그들의 성공을 기원한다는 것을 알려주십시오!