STEP 1. 상세페이지 기획 재료 입력
처음이신가요? 상황을 골라주세요
클릭하면 해당 위치로 바로 이동합니다.
자동 채우기 — 링크·이미지로 재료 만들기
자사·경쟁사 상세페이지 링크나 이미지(캡처)를 통으로 넣으면 아래 입력 항목들이 자동으로 채워집니다. 채워진 내용은 언제든 수기로 수정할 수 있어요.
🪟 수동 경로 — 요청서 복사해서 Aside 채팅에 직접 붙여넣기
📥 분석 결과 JSON 붙여넣기 → 자동 채우기
제품명
정식 제품명이 아직 없다면 모델명이나 별칭으로 적어주세요.
제품 카테고리
실물 상품 카테고리만 제공됩니다. 분류가 애매하면 직접 입력하기로 용도를 적어주세요.
타겟층 (페르소나)
아래 3문항에 답이 나오면 페르소나가 완성된 것입니다. 하나라도 막히면 리뷰(자사+경쟁사 3곳)부터 읽고 오세요.
개발 의도 · 판매 목적
왜 이 제품을 만들었는지, 이번 상세페이지로 달성하려는 목표(신규 출시 후킹, 첫 구매 전환 등)를 적어주세요.
핵심 강점 USP
최소 5가지. 중요한 순서대로 적으면(드래그로 순서 변경) 섹션 우선순위와 차별화 축 설계에 반영됩니다.
작동 원리 · 핵심 스펙
"왜 되는지"를 설명할 재료. 원리·구조·소재·수치 스펙을 적으면 메커니즘(4블록) 채점 항목과 FAB 번역에 쓰입니다.
사용 후 기대효과 (Before → After)
고객이 얻게 되는 변화를 Before > After 관점으로. 문제공감(PAS) 블록과 FAB의 Benefit 번역에 쓰입니다.
사용 방법 · 주의사항
사용/작동 방법, 보관·관리법, 법적 필수 주의문구(KC 등). 안전·주의 블록과 적합성 블록에 반영됩니다.
적합/부적합 대상 · 솔직한 단점
"이런 분께는 안 맞습니다"와 단점 선제 인정(양면 메시지)은 5블록·7블록 채점 항목입니다. 정직할수록 신뢰와 전환이 오릅니다.
신뢰 기반 자료 (RTB)
인증서, 시험성적서, 특허, 수상, 리뷰 수, 판매량, 재구매율 등. 근거 없는 주장은 초안에서 자동 제외됩니다(無근거 삭제 원칙).
경쟁사 비교 포인트
경쟁 제품의 강점·약점·리뷰 불만을 적으세요. 차별화 축(3블록)과 비교대상이동 설계에 쓰입니다. 00번 자동 채우기에서 경쟁사 링크를 분석하면 이 칸이 채워집니다.
'지금' 사야 할 이유 (결정 트리거)
교체 주기·시즌·소진 신호·한정 조건 등 타이밍 근거. 문제공감(2블록)의 결정 트리거 채점 항목입니다.
구성 · 혜택 · 배송/반품 정책
추천 구성(디폴트), 가격 혜택, 배송·교환·반품·A/S 조건. 전환(8블록) 채점 항목 4개가 모두 이 재료에서 나옵니다.
판매 채널
실제 게재 채널을 모두 선택하세요. 설득 구조 타입(A1·A2·B·C) 자동 추천에 반영됩니다.
가격대 · 구매결정 스타일 (관여도 판정)
저관여/고관여에 따라 설득 순서가 달라집니다. 두 가지만 고르면 자동 판정됩니다.
톤앤무드
복수 선택 가능. 자유 기술을 덧붙일 수 있습니다.
상세페이지 총 길이
기준 너비 860px 세로 기준. 섹션별 높이 배분에 사용됩니다.
STEP 2. 설득 구조 설계 (타입 선택 + 8블록 매트릭스)
하나의 상세페이지를 여러 타입으로 동시에 밀지 않습니다. 판매 채널과 브랜드 신뢰 수준, 관여도에 맞는 1개 타입을 선택하세요. 입력값 기반 추천 타입에 추천 배지가 붙습니다.
설득 구조 타입 선택
8블록 순서 매트릭스
선택한 타입 기준으로 블록이 재배열됩니다. 노란 테두리 = 기본(C타입) 대비 순서가 이동한 블록. 각 블록의 심리 장치와 목적을 함께 확인하세요.
STEP 3. 점수화 · 수정 우선순위 대시보드
기존 상세페이지(또는 초안)를 아래 32개 범용 항목으로 채점하세요. 전 카테고리 공용·저/고관여 공용 기준입니다. 0=없음 · 3=있으나 약함 · 5=완벽. 채점 즉시 아래 대시보드가 갱신됩니다.
AI 자동 채점 (선택)
기존 상세페이지 텍스트를 붙여넣으면 설정된 Claude 모델이 32항목을 자동 채점해 아래 표를 채웁니다. 비우면 STEP 4 초안을 채점합니다. 채점 후에도 수기 수정 가능합니다.
📥 Aside/외부 AI 채점 결과 JSON 붙여넣기
32항목 채점
블록 헤더를 누르면 접었다 펼 수 있습니다. 가중치(w)가 클수록 총점 영향이 큽니다.
진단 대시보드
점수가 새는 곳 · TOP 5
잃은 점수가 큰 항목부터. 감점이 큰 항목일수록 회복 폭이 큽니다.
가장 먼저 수정할 3가지
현재 점수 → 최대 회복점수. 우선순위 순.
2점 이하 항목이 카피에 담기도록 해당 섹션을 재작성합니다8블록 균형 레이더
점선 = 권장선(80%). 한 축만 파인 페이지는 그 블록에서 이탈이 발생합니다.
STEP 4. 상세페이지 초안 생성 · 내보내기
선택한 타입의 블록 순서대로 섹션타이틀(2행) · 서브메시지 · 포인트 · 비주얼 디렉팅 · 클로징 후킹을 갖춘 초안을 만듭니다. API 없이 즉시 생성되며, 채점에서 40% 이하로 나온 항목은 보완 지시로 초안에 함께 표기됩니다.
📥 Aside/외부 AI가 만든 초안 JSON 붙여넣기
수기 수정 지시 (선택)
원하는 수정 방향을 직접 적으세요. 아래 버튼으로 단독 반영하거나, 채점·리뷰의 [🔁 반영] 버튼을 누를 때 이 칸의 내용이 자동으로 함께 반영됩니다.
섹션 3개씩 배치로 재작성되며 완성분부터 반영됩니다AI 리뷰 — 기획·초안 검토
생성한 초안이나 기존 상세페이지 기획안을 AI가 32항목 기준으로 검토하고 블록별 개선점 + 수정 카피 제안을 돌려줍니다. 아래 칸을 비우면 위에서 생성한 초안을 리뷰합니다.
📥 Aside/외부 AI 리뷰 결과 JSON 붙여넣기
STEP 5. 피그마로 스케치 보내기
완성한 초안을 detail_page_final.json으로 내보내고, Claude Code가 피그마 캔버스에 본체 프레임·개요 카드·미니맵을 자동 생성합니다. 최초 1회 세팅 후엔 03번 명령만 반복하면 됩니다.
최종안 JSON 내보내기
STEP 4에서 생성·수정한 초안이 피그마 스케치의 원본이 됩니다. 초안이 없으면 먼저 STEP 4에서 만들어주세요.
방법 A · Claude Code로 자동 생성 — 최초 1회 세팅
Claude가 JSON을 읽고 피그마 캔버스에 프레임·텍스트를 자동으로 그려줍니다. 세팅은 처음 한 번만.
터미널(맥: '터미널' 앱 / 윈도우: 'PowerShell')에서 아래를 실행하세요. 안 되면 먼저 nodejs.org에서 Node.js를 설치합니다.
npm install -g @anthropic-ai/claude-code폴더를 하나 만들고(예: detail-tool), 그 안에 01번에서 저장한 detail_page_final.json과 SKILL.md(별도 제공 파일)를 넣습니다. 터미널에서 그 폴더로 이동한 뒤 claude 를 입력해 실행하세요.
Claude Code 안에서 아래 명령으로 피그마 플러그인을 설치합니다. 설치 후 재시작하고 /mcp → figma 선택 → 브라우저에서 Allow access 인증까지 하면 연결 완료.
claude plugin install figma@claude-plugins-official피그마에서 빈 디자인 파일을 만들고, 브라우저 주소창의 파일 URL을 복사해 둡니다.
방법 A 실행 · 매번 이 단계만 반복
Claude Code에 아래처럼 입력하세요. [피그마 파일 URL] 자리에 복사해둔 주소를 붙여넣으면 스케치 프레임이 캔버스에 생성됩니다.
detail_page_final.json 읽고 SKILL.md 규격대로 이 피그마 파일에 상세페이지 스케치 프레임 만들어줘 [피그마 파일 URL]섹션별 height_px 기준으로 프레임이 잡히고, 섹션타이틀·서브메시지·포인트·비주얼 디렉팅이 스케치 텍스트로 배치됩니다.
방법 B · 수기로 피그마에 붙여넣기 — 설치·세팅 불필요
Claude Code 없이 피그마만으로 옮기는 방법입니다. 01번의 [📝 수기 작업용 텍스트 복사]를 누르면 섹션별로 정리된 텍스트가 복사됩니다.
피그마에서 F 키 → 우측 패널에서 너비 860 입력. 이게 상세페이지 기준 폭입니다. 프레임 이름을 '01 상단 후킹'처럼 섹션명으로 바꾸세요.
프레임 선택 → Ctrl/Cmd+D로 복제해 세로로 나란히 배치. 각 프레임 높이는 복사한 텍스트에 적힌 '높이 ○○px'를 참고해 조절합니다.
T 키로 텍스트 레이어를 만들고, 복사해둔 텍스트에서 해당 섹션 부분을 붙여넣으세요. 섹션타이틀(2행)은 크게(32~40px), 서브메시지는 중간(18~20px), 포인트는 본문(14~16px) 크기로.
R 키로 회색 사각형을 그리고, 그 위에 '🖼 ...' 디렉팅 문구를 올려두면 디자이너가 이미지 자리를 바로 압니다.
프레임 전체 선택 후 Shift+A(오토레이아웃)를 걸면 간격 정리가 쉽습니다. JSON을 레이어에 자동 주입하고 싶으면 피그마 커뮤니티 플러그인 'JSON to Figma'를 검색해 쓰는 방법도 있습니다(01번의 JSON 복사 사용).
AI 설정 — 연결 · 작업별 모델
연결 방식 안내
기능별로 두 가지 경로를 사용합니다. 수기 작업(입력·채점·초안 골격)은 연결 없이 전부 동작합니다.
| 기능 | 경로 | 설명 |
|---|---|---|
| 초기 질문 자동완성 (00 자동 채우기 · 링크·이미지·리뷰 리서치) | Aside 브라우저 · 키 불필요 | design.4ucompany.kr 접속 시 [Aside 자동 분석 시작] 버튼 하나로 맥미니 Aside 브라우저가 자동 리서치해 결과를 직접 채워줍니다. (수동 백업: 요청서 복사 → Aside 채팅 → 결과 JSON 붙여넣기) |
| 이후 단계: 카피 완성 · 자동 채점 · 리뷰 | Claude API · 아래 키 필요 | 버튼 클릭 시 즉시 실행되고 결과가 자동 반영됩니다. 각 기능의 [붙여넣기] 칸은 백업 경로로 유지됩니다 |
Claude API 키 ●
console.anthropic.com에서 발급한 API 키. 이 브라우저(localStorage)에만 저장되고 외부로 전송되지 않습니다.
작업별 모델 선택
기획·초안 / AI 자동 채점 / 리뷰 각각 모델을 지정합니다. (00 자동 채우기는 Aside 담당이라 모델 지정이 필요 없습니다.) 기본 목록은 Fable 5 · Opus 5이며, 🔄로 계정의 실제 가용 모델 전체로 바꿀 수 있습니다. 모델 선택은 이 설정에서만 가능합니다.
용어사전 · 사용 매뉴얼
어려운 용어 사전
이 도구와 채점표에 나오는 용어를 쉽게 정리했습니다.
사용 매뉴얼 (순서대로)
입력 ↔ 채점 매핑표
STEP 1 입력 항목이 어느 블록 채점에 쓰이는지 한눈에.
연동법 · 문제 해결
두 가지 경로: ① 초기 질문 자동완성(00 자동 채우기)은 design.4ucompany.kr 접속 시 [Aside 자동 분석 시작] 버튼으로 맥미니의 Aside 브라우저가 자동 처리합니다(키 불필요). 자동 연동 장애 시에만 [요청서 복사] → Aside 채팅 → 결과 JSON 붙여넣기 수동 경로를 쓰세요. ② 이후 단계(카피 완성·자동 채점·리뷰)는 설정(⚙️)에 Claude API 키를 넣으면 버튼 클릭으로 즉시 실행됩니다. 키는 접속한 브라우저(localStorage)에만 저장되고 서버로 전송되지 않습니다.
Q. API 키가 없어요
console.anthropic.com에서 발급하거나, 각 기능 아래 [붙여넣기] 칸에 Aside가 만들어준 결과 JSON을 넣는 백업 경로를 쓰세요. 초안 골격·수기 채점은 키 없이도 됩니다.
Q. 붙여넣은 JSON이 해석 실패해요
따옴표 오류는 자동 복구를 시도합니다. 그래도 실패하면 값 안의 큰따옴표를 작은따옴표로 바꿔보세요.
Q. 키는 어디에 저장되나요?
이 브라우저의 localStorage에만 저장되고 외부로 전송되지 않습니다. [모두 리셋]을 해도 키는 유지됩니다.