도구에 의존하면 얼핏 보기에 "괜찮아" 보이는 결과물을 빠르게 얻을 수 있습니다. 하지만 결과물은 대개 어디서 본 듯한 평범한 디자인이 되기 마련입니다. 이것이 바로 "AI 디자인"의 본질이며, 현재 가장 큰 차별화가 이루어지는 지점이기도 합니다.
Claude Code를 기반으로 구축한 프로덕션 라인(makeLP 프로젝트)을 활용해 동일한 기반 위에 세 가지 개성이 뚜렷이 다른 사이트를 만든 경험을 바탕으로, 재현 가능한 방법을 간략히 정리해 보겠습니다.
공장처럼 만드는 시스템, 일회성 마법이 아니다
좋은 결과물을 한 번 만드는 것만으로는 자산이 되지 않습니다. 재현 가능해야 하기 때문에, 우리는 제작을 4단계로 진행합니다.
제작 → 품질 → 검증 → 개선.
이를 뒷받침하는 4가지 구성 요소가 있습니다.
・스킬: 방법론적 템플릿 (제작용 motion-lp-builder, 반 AI 원칙을 위한 frontend-design, 대량 분류용 bulk-categorize)
・서브 에이전트: 전문 역할 (드로잉 및 비평용 lp-visual-verifier, 레퍼런스를 스펙으로 변환하는 design-reference-analyst, 분류용 bulk-classifier)
・레퍼런스 라이브러리: "사이트 유형 × 업종"별로 분류된 4,074개의 SANKOU 목록을 보관하는 선반
・진화하는 규칙: CLAUDE.md (표준 흐름/규율) + 메모리 (비평을 영구적으로 저장)
준비 및 전제 조건
기반은 Vite + React + GSAP (ScrollTrigger) + Lenis로 고정됩니다. 핵심은 "스크롤 진행률을 제작에 직접 연결하는 것"입니다. 스크롤 양이 표현의 입력값이 됩니다 (배경 비디오 프레임 스크러빙, 고정, 패럴랙스, 등장 애니메이션).
주제에 따라 두 가지 유형의 에셋을 선택합니다.
・AI 생성 (Higgsfield): 리조트와 같은 사실적인 이미지가 필요할 때
・코드 드로잉 (SVG/Canvas/CSS): B2B 및 기술 분야에 더 적합합니다. 크레딧이 필요하지 않습니다.
판단이 어렵다면 "사진이어야 하는가, 다이어그램이어야 하는가?"를 기준으로 결정합니다.
STEP 1: 제작
순서가 중요합니다. 바로 코드를 작성하지 말고, 먼저 브랜드 브리프(누구에게 무엇을 약속할 것인지, 색상, 타이포그래피, 움직임의 강도)를 한 페이지로 확실히 정리해야 합니다. 동일한 기반을 사용하더라도 결과물을 차별화하는 것은 코드가 아닌 브리프입니다.
AI 생성을 선택했다면 크레딧 사용 규율을 따르세요.
- 잔액 확인
- get_cost로 예상 비용 확인
- 먼저 히어로 이미지 한 장 제작
- 이를 레퍼런스로 삼아 나머지 이미지 생성하여 질감 통일 5. 완료를 기다리고 다운로드.
구현 시에는 제작을 스크롤에 직접 연결합니다 (프레임 스크러빙/고정/패럴랙스/등장). 그리고 항상 견고하게 만들어야 합니다: prefers-reduced-motion에 대한 정적 폴백, 에셋이 없어도 npm run dev가 작동하도록 하고, 터치 및 캔버스의 전원 절약을 고려합니다.
STEP 2: 품질 - 양산형 디자인에서 벗어나기
"AI 디자인"을 6가지 요소로 분해하고 제거합니다.
- 그라데이션의 과도한 사용 (특히 텍스트 및 보라색 그라데이션) → 단일 색상 + 하나의 악센트로 축소
- 표준 부품을 표준 순서로 나열하기 → 구조 자체에 독특한 콘셉트 부여 (예: 페이지 전체를 워크플로우 캔버스로 활용)
- 둥글려서 "부풀린" 숫자 → 구체적으로 표현 (예: "월 600건의 인보이스 → 0"과 같은 전/후)
- 이모지 아이콘 → 사용 금지. 필요하면 SVG로 직접 드로잉
- 블록 왼쪽 가장자리에만 색상 막대 사용 → 사용 금지. 표면, 여백, 타이포그래피에 색상 활용
- 모든 것이 대칭적이고, 균일하며, 둥글고, 부드러운 그림자 처리 → 비대칭 도입 및 여백 강도의 변화
원칙은 다음과 같습니다: 색상 구성은 단일 색상 + 하나의 악센트, 타이포그래피는 하나의 개성 있는 서체로 강조, 여백에 힘을 주고, 움직임은 "집중"을 위해 사용합니다.
STEP 3: 검증 - 빌드 통과 ≠ 완성
코드가 통과하더라도 실제 화면에서 핀, 스크러빙, 등장 애니메이션이 제대로 작동하지 않을 수 있습니다. 따라서 lp-visual-verifier가 dev 서버를 시작하고, puppeteer-core를 통해 기존 Chrome/Edge를 조작하여 각 섹션을 렌더링 및 캡처한 후 "눈으로 직접 비평"합니다.
세 가지 핵심 포인트:
・검증자는 코드를 수정하지 않습니다 (원인을 분리하기 위해)
・prefers-reduced-motion으로 캡처하면 고정 영역과 등장을 기다리는 하단 섹션을 정적으로 시각화할 수 있습니다.
・항상 모바일 너비로도 캡처합니다.
단 한 번의 비평 → 수정 사이클만으로도 품질이 크게 향상됩니다. 빌드 성공에 만족하지 마세요.
STEP 4: 개선 + 레퍼런스 라이브러리
design-reference-analyst는 레퍼런스 사이트를 읽고 단순한 인상이 아닌 "공통 패턴"과 "개선 사양(어디를 어떻게)"으로 변환합니다. sankou-reference 라이브러리는 4,074개의 항목이 두 가지 축으로 분류되어 있어 "관광 × 특수 LP 예시만" 즉시 찾아볼 수 있습니다 (각 행의 노트에서 내용을 확인 가능).
대량 분류 자체도 템플릿화되어 있습니다 (bulk-categorize: 분할 → 서브 에이전트 병렬 처리 → 집계 → 수정).
성장하는 규칙
이것이 가장 큰 발견입니다. 클라이언트의 비평을 일회성 수정으로 끝내지 말고, 영구적인 규칙으로 승격시키세요.
예시:
"이모지 아이콘은 AI 같아 보여요" "왼쪽 색상 막대는 AI 같아 보여요" → 이를 메모리와 CLAUDE.md의 금지 규칙으로 전환 → 이후 모든 사이트에서 자동으로 회피합니다.
즉, 사용할수록 "AI 디자인"이 사라집니다. 스킬과 서브 에이전트를 갖추면 수평 확장도 용이해집니다.
세 가지 개성 있는 사이트 제작
・AZURE BAY (썸머 풀 LP / B2C): 청록색 + 골드. Higgsfield 생성. 스크롤에 따라 풀 비디오 프레임 스크러빙.
・FLOWGEAR (n8n 구현 지원 / B2B): 단일 코랄 색상 + 플랫, 이미지 생성 없음. 페이지 전체가 n8n 워크플로우 캔버스. 부풀린 숫자 대신 구체적인 전/후.
・STATIK (가상 스튜디오의 실험실): 근접 블랙 + 모노 + 하나의 애시드 컬러. Canvas 키네틱 텍스트 그리드 + 커스텀 커서. 단순 LP를 넘은 몰입형 경험.
공통점은 "단일 색상 + 하나의 악센트", "구체적으로 말하기", "하나의 콘셉트로 돌파구 마련"입니다. 주제에 따라 수단을 선택하는 것이 평균에서 벗어나는 첫걸음입니다.
직접 구축하기 위한 최소 구성
- 스크롤 연결 기반을 템플릿화 (매번 처음부터 작성하지 않음)
- 반 양산형 원칙을 단일 규칙 시트로 정리 (그라데이션/이모지/왼쪽 바 금지...)
- 제작 후 항상 실제 화면을 캡처하여 확인
- 비평할 때마다 규칙으로 승격
일반적인 함정과 대책: 크레딧 낭비 (히어로 우선 + 예비 견적), 검증 누락 (실제 화면 캡처), 모션 접근성 (reduced-motion), 모바일 깨짐 (항상 다양한 너비로 캡처).
요약
AI는 "빠른 손"일 뿐, "눈"이 아닙니다.
눈(검증)과 규칙(학습)을 시스템에 통합하는 순간, AI가 만든 사이트는 AI 디자인에서 벗어납니다.
