디자인 본부 · 실전 플레이북

🎨 디자인·브랜딩·콘텐츠 플레이북

knowledge-vault의 디자인·브랜딩·콘텐츠 지식 21개를 실제 작업 시 따라 하는 회사-프로젝트별 스텝으로 합성. 각 스텝 = 액션 + 🛠 도구 + 💡 팁. 원문: reports/design_branding_content_playbook.md
📋 상황판📅 캘린더📡 SNS🧪 제품📊 간트
🧑‍🎤

1. 디자인 스튜디오 — 퍼스널 브랜딩

Jen의 어텐션을 신뢰→수익으로 전환하는 파운더 개인 브랜드 시스템을 세운다.
  1. 브랜드 철학을 한 문단으로 고정 — 누구의/어떤 문제/고객 추천멘트/만들기 전 답답했던 순간 4요소 🛠 텍스트 문서
    💡 이게 있어야 이후 시각 키워드·레퍼런스가 안 흔들린다
    브랜딩_인풋_리서치
  2. 강한 관점(POV)을 콘텐츠 축으로 — 예쁜 사진 X, '문제 제기+해결책' 포맷, 강한 주장이 공유 유도 🛠 콘텐츠 기획
    💡 뻔한 콘텐츠보다 '의견 있는 콘텐츠'가 퍼진다
    SNS_수익화_퍼스널브랜딩
  3. 어텐션→수익 4단계 설계 — ①주목 확보 ②일관 아이덴티티로 신뢰 ③디지털상품·부트캠프·협업으로 수익화 ④시스템화 🛠 퍼널 설계
    💡 팔로워 수 아닌 전환율이 수익을 만든다
    SNS_수익화_퍼스널브랜딩
  4. 마케팅·홍보는 AI 자동화 말고 사람답게 — 발로 뛰고 진정성으로 후킹, 영상 편집도 사람 손 🛠 수동 운영
    💡 개발/코딩은 AI 위임, 바이럴은 진정성이 핵심
    마케팅_바이럴_1인서비스_수익화
  5. 무료 가치 먼저 → 신뢰 후 유료 전환 — 무료 입문(5일 마스터마인드 등)으로 팬 축적 후 유료화 🛠 부트캠프/리드마그넷
    💡 '왜 이제야 유료화했냐' 반응이 나올 때가 전환 타이밍
    SNS_수익화_퍼스널브랜딩
📦 산출물 · 브랜드 철학 1문단 + 강한 관점 콘텐츠 축 + 어텐션→수익 퍼널 + 무료→유료 전환 플랜
⚠ SNS 수익화 사례($1M/일)는 대형 팔로워 기반 특수상황 — 수치 맹신 금지, 핵심은 어텐션 확보 전략 자체.
🏷️

2. 디자인 스튜디오 — 제품 브랜드 네이밍/아이덴티티

제품(더젠레이블 등)의 네임·아이덴티티·비주얼 방향을 레퍼런스 기반으로 도출한다.
  1. 목표 있는 인풋 리서치 — 국내30·해외30 등 숫자 목표 정하고 엑셀에 기록, 고가 시장 먼저 벤치마킹 🛠 엑셀 리서치 시트
    💡 목표 없는 인풋은 감상, 목표 있는 인풋만 아웃풋이 된다
    브랜딩_인풋_리서치
  2. 겉모습 모방 X, 원리를 '훔치기' — 왜 이 색인지·왜 비웠는지 뒤에 숨은 원리를 가져온다 🛠 분석 노트
    💡 같은 레퍼런스 수천 명이 AI에 넣으면 원본(경쟁자)만 각인
    브랜딩_인풋_리서치
  3. AI로 브랜드 철학 → 시각 키워드 변환 — 뻔한 키워드 제거 + 여러 전문가 시선으로 추상 키워드 추출 🛠 Claude/GPT
    💡 '의료기기 레퍼런스' 말고 '집 안에서 자연스럽게 케어되는 공간' 같은 추상 키워드로
    브랜딩_인풋_리서치
  4. 차별화 플랫폼에서 레퍼런스 수집 — Cosmos(무드/색 AI분류)·Are.na·Midjourney 검색 🛠 Cosmos·Are.na
    💡 흔한 핀터레스트만 쓰면 남들과 같은 결과
    브랜딩_인풋_리서치
  5. 브랜드 전략 초안 원스톱 — 목표 한 줄 → 시장리서치·네이밍·아이덴티티·타깃·크리에이티브 기획서 → 키비주얼 → 반응형 웹 초안 🛠 Manus AI
    💡 방향이 이미 있으면 처음부터가 아니라 검증·확장용으로
    ManusAI_브랜드기획_웹원스톱
  6. 카테고리 포지셔닝 프레임 확정 — 안티에이징 레드오션 회피, '롱제비티/기전 제어'로(검색량 100배↑, 2030년 1,300억달러) 🛠 포지셔닝 문서
    💡 경쟁축은 '신선한 성분'이 아니라 '과학·데이터 기반 신뢰'
    K뷰티_롱제비티_포지셔닝트렌드
  7. 컬러·폰트 팔레트 확정 — hex까지(예: 웰니스그린 22C58B/1A1A1A/FFFFFF, 에스코어드림·나눔스퀘어) 🛠 그린팔레트 6종 레퍼런스
    💡 팔레트를 Claude Design/Manus에 주입해 전 페이지 톤 통일
    디자인레퍼런스_그린팔레트_폰트조합
📦 산출물 · 네임/아이덴티티 초안 + 포지셔닝 프레임 + 컬러·폰트 시스템(hex·페어링) + 키비주얼
⚠ 레퍼런스 그대로 복제 금지(참고 틀로만). Manus 자동 생성물은 초안 — 페르소나·법적 표현은 사람이 검수.
📄

3. 상세페이지 제작 (DDP) — 경쟁사 합치기→구조→비주얼→카피

여러 1등을 합쳐 원래 1등을 '초과'하는 상세페이지를 디자인 몰라도 만든다.
  1. 경쟁사 상세페이지 '합치기' — 스마트스토어+쿠팡 리뷰 많은 순 상위 캡처 → 1등을 뼈대로, 2·3등의 잘된 이미지·카피로 보강 🛠 화면 캡처
    💡 1등 하나만 베끼면 원본만 각인, 여러 1등을 합쳐야 초과
    상세페이지_경쟁사합치기
  2. (품질 루트) 무드보드→피그마→와이어프레임 — 브랜드 무드부터(타겟별 설계 포인트 다름), 구조 먼저 후 디자인 🛠 Figma
    💡 14섹션 구조 있으면 무드보드 단계만 추가해 무드(웜골드·딥네이비, 신뢰감) 고정
    상세페이지_디자이너워크플로우_DDP
  3. 카피를 '내 상품'으로 교체 — 조립한 이미지 순서대로 AI에 업로드 후 '순서 유지, 카피만 내 상품으로 개선' + 내 스펙 첨부 🛠 GPT/Claude
    💡 순서 섞이면 '몇 번~몇 번만' 식으로 나눠 요청
    상세페이지_경쟁사합치기
  4. 디자인 = AI 이미지 생성 — '첨부와 비슷한 스타일, 카피 변형 없이 주어진 내용만' / 다른 카테고리 스타일 섹션도 차용 🛠 Gemini 나노바나나
    💡 레퍼런스(스타일 참고)가 성패의 핵심
    상세페이지_경쟁사합치기
  5. 제품 사진을 실물로 교체 (가장 중요) — 실물 각도별 촬영 → '사진 속 제품을 첨부 실물로 변경'으로 스왑 🛠 Gemini 나노바나나
    💡 라이프스타일 사진 미확보를 Midjourney 없이 해결
    상세페이지_경쟁사합치기
  6. AI 배경 생성 + 와이어프레임 결합 — AI 연출 배경에 실물 합성 🛠 AI 이미지 + Figma
    💡 타겟(40~60대 여성)이면 배경도 따뜻함·안정·프리미엄 케어
    상세페이지_디자이너워크플로우_DDP
  7. 섹션별 반복 — 위 스텝을 모든 섹션에 반복 → 전체 상세페이지 완성 🛠 반복
    💡 빠진 설득 포인트는 자사 랜딩 섹션 구조와 대조해 찾기
    상세페이지_경쟁사합치기
📦 산출물 · 섹션별로 조립된 전체 상세페이지(카피+비주얼+실물 이미지)
⚠ 경쟁사 카피 차용 시 '치료·예방·개선' 표현·경쟁 브랜드 실명·의료기기 오인 문구를 AI가 따라쓰지 않게 프롬프트에 '의료기기법·표시광고법 위반 표현 제외' 명시. 스펙·강점은 판매자가 정확히 정의(GPT 상상 금지).
💧

4. NIRed/더젠레이블 뷰티 — 브랜딩+상세페이지+론칭 콘텐츠

롱제비티 포지셔닝 위에 브랜드 시스템→랜딩/킥스타터→론칭 콘텐츠까지 일관되게 만든다.
  1. 포지셔닝 = 롱제비티/기전 제어 고정 — 증상 마스킹 X, 세포·모낭 기전 자극, '신뢰 > 성분' 🛠 포지셔닝 문서
    💡 킥스타터 덱에 시장규모(1,300억$/2030)+검색 100배를 매력도 근거로
    K뷰티_롱제비티_포지셔닝트렌드
  2. 브랜드 디자인 시스템 선구축 — 컬러·타이포·컴포넌트를 Figma 디자인시스템(Wanted/Wix/Vapor 기반)으로 먼저 → Claude Design 주입 🛠 Figma + Claude Design
    💡 시스템 먼저 잡으면 모든 페이지가 빠르고 통일감('디자인은 소유')
    기획문서_ClaudeDesign_파이프라인·AI_디자인_워크플로우
  3. 페이지는 기획문서 먼저 → 디자인 — PRD·기능명세·유저플로우·와이어프레임 만들어 Claude Design에 통째 첨부 후 시작 🛠 Manyfast → Claude Design
    💡 초기 기획이 구조화 안 되면 이후 전 단계가 흔들린다
    기획문서_ClaudeDesign_파이프라인
  4. 이미지-퍼스트로 톤 확정 후 개발 — UI 시안 이미지 먼저 → Taste Skill로 품질↑ → 프론트 → 애니 → 배포 🛠 Codex + Taste Skill
    💡 시안 먼저 잡으면 재작업이 준다
    이미지퍼스트_웹디자인_Codex_TasteSkill
  5. 히어로/소셜프루프를 전환 데이터대로 — 단일 수치 히어로(+18%)·명명된 고객수(+22%)·스티키 CTA(+11%)·폼 3필드↓·LCP 2초↓ 🛠 랜딩 구조 설계
    💡 5개 다 적용 시 +35% 기대
    AI_랜딩페이지_제작
  6. 전환 심리 퍼널 — 3초 훅(단 하나의 핵심) + 온보딩 개인화 질문(두피 진단 3문항)으로 락인 + 킥스타터 직전 '당신 두피 리포트 준비됨' 🛠 퍼널/카피
    💡 구조(개인화→투자→기대)는 빌리되 미끼-스위치 다크패턴은 버린다
    전환심리_세일즈
  7. 히어로컷 비주얼은 조건부 파티클 — NIR 글로우 인트로 3~5초 액센트로만, 피부결·제품 텍스처 안 가리는 선까지 🛠 CapCut/Pikimov/DaVinci(무료), 히어로 1편만 TouchDesigner 외주
    💡 A/B 필수 — 저장·공유는 파티클, 전환은 제품 정직노출일 가능성
    디자인레퍼런스_파티클비주얼_뷰티히어로컷
  8. 론칭 초기 리뷰·UGC 시딩 — 킥스타터 전후 초기 리뷰를 크로스보더 UGC로(Buy&Get-back) → 소셜프루프 재활용 🛠 0.8L Global (@0.8l_global)
    💡 두피 디바이스(의료기기)도 취급 가능한지 수수료·조건 사전 문의
    레퍼런스_0.8L_글로벌UGC리뷰플랫폼
  9. 콘텐츠 벤치마크 역설계 — 교육-퍼스트→전환 채널을 후크공식/전환CTA/큐레이션→수익/비포애프터로 분석 🛠 GINA (@ginaparkedtoslay) 등
    💡 '팩트 뷰티' 신뢰 톤이 '임상은 따라가고 디자인은 소유' 포지션과 같은 결
    레퍼런스_GINA_뷰티크리에이터_브랜딩
📦 산출물 · 롱제비티 포지셔닝 + 브랜드 디자인 시스템 + 랜딩/GLOW/킥스타터 페이지 + 히어로컷 + UGC 시딩 플랜
⚠ 제품 효과 자체 조작(비포애프터 과장) 편집 금물 — 배경·연출 톤에만. 효능 단정·의사 사칭·의료기기 오인 금지. 신뢰 브랜드에 다크패턴 미끼-스위치는 독.
🎬

5. 콘텐츠 공장 — 숏폼/릴스/인스타툰

릴스·숏폼·인스타툰을 데이터 기반 포맷으로 반복 생산해 도달·브랜드 인바운드를 만든다.
  1. 채널은 인스타 릴스 우선 + 1일 1릴스 — 릴스 바이럴이 랭킹 직행(70위→1위), 매일 올려 터지는 포맷 직접 테스트 🛠 인스타 릴스
    💡 틱톡은 외국 유저 유입용
    마케팅_바이럴_1인서비스_수익화
  2. 감으로 X, 데이터로 최적화 — 대상 계정 최근 릴스 20개 스크래핑 → 황금 시간대 + 후킹 패턴 추출 🛠 Apify(무료가입·월$5 크레딧) + Claude
    💡 기본 내장 Apify 커넥터 그냥 누르면 안 됨, 별도 셋업 필요
    Claude_Apify_인스타릴스분석
  3. 인스타툰은 썸네일 구조부터 템플릿화 — 팔로워 부트스트랩 전 포맷(썸네일 구조) 먼저 고정 🛠 썸네일 템플릿
    💡 '공식'은 미검증(리드젠 광고) → 상위 썸네일 10~20개 직접 역설계해 검증 후 적용
    인스타툰_바이럴공식_썸네일구조
  4. 대본은 세컨드브레인으로 자동 기획 — 크리에이터 세컨드브레인에 4기둥·스크립트 템플릿 물려 초안 자동 생성 🛠 Claude 자동화
    💡 브랜드 보이스를 먼저 가르쳐두면 대본 품질 일관
    크리에이터_Claude자동화_비디오스킬
  5. AI 페이스캠 합성 — 셀카 몇 장 학습 → 스튜디오 배경/의상 → TTS+립싱크 → 기존 영상에 원형 페이스캠 합성 🛠 Higgsfield Soul + Wan 2.7 + FFmpeg
    💡 Kling·Sora는 부적합, 립싱크는 Wan 2.7
    AI_영상콘텐츠자동화
  6. 배경·소품·분위기는 텍스트로 편집 — 재촬영 없이 낮↔밤·계절·배경·소품을 프롬프트로 🛠 Higgsfield(Gemini Omni Flash)
    💡 효과 조작(비포애프터 과장) 금물, 배경·연출 톤에만
    Higgsfield_텍스트영상편집
  7. 편집 노가다 자동화 + 롱폼 재활용 — 줌·자막·전환을 Claude Code에 위임, 3시간 영상→10분 매뉴얼화 🛠 Claude 비디오 스킬
    💡 전문가 인터뷰·롱폼을 클립·요약·FAQ 소스로 재활용
    크리에이터_Claude자동화_비디오스킬
  8. 스킬 체이닝으로 반자동화 — 페이스캠·썸네일·자막·업로드를 각각 스킬로 등록 후 상위 스킬로 순차 실행 🛠 Claude Code 스킬
    💡 여러 영상을 탭으로 병렬 제작하면 병목은 대본 검토뿐
    AI_영상콘텐츠자동화
📦 산출물 · 데이터 기반 발행 캘린더 + 릴스/인스타툰 템플릿 + 페이스캠·자막·업로드 자동화 파이프라인
⚠ 마케팅은 자동화보다 진정성으로 후킹. 인스타툰 '공식'·바이럴 수치는 미검증 → 직접 역설계 검증. 효과 과장·허위광고 리스크 영상 조작 금지.
🖥️

6. 랜딩페이지/웹 · 전환 카피/세일즈

AI 디자인 스택으로 고전환 랜딩페이지를 빠르게 만들고 카피로 전환을 끌어올린다.
  1. 코드부터 X, 카피→디자인→구현 순서 — 리서치로 핵심 메시지, '뻔한 말을 숫자로'('많은 고객 신뢰'→'200만개 납품, 95% 공급률') 🛠 리서치+카피
    💡 같은 AI라도 순서가 결과(기본값 탈출)를 바꾼다
    AI_디자인_워크플로우
  2. 디자인 시스템을 먼저 주입 — 브랜드·색·폰트·말투·레퍼런스 200단어+ 한 필드에, getdesign.md(Vercel·Linear·Stripe 무료) 파일 붙여넣기 🛠 Claude Design + getdesign.md
    💡 Claude Design 내부 디자인시스템 기능은 쿼터 20~25% 선소모 → 끄고 파일 첨부가 유리
    AI_디자인_워크플로우
  3. 레퍼런스로 AI-slop 탈출 — 핀터레스트 3~4개 → Claude 일반채팅(Opus, 스크린샷 3배 잘 읽음)에 '비주얼 스타일 프롬프트 만들어줘' → Claude Design에 🛠 Claude(Opus)
    💡 레퍼런스가 성패의 50%, 보라 그라데이션 AI-slop 회피
    AI_디자인_워크플로우
  4. 고화질 생성 + 토큰 0 수정 — High Fidelity + 3문장 프롬프트 → 'Tweaks 개수 많이 늘려줘'로 슬라이더 수십 개로 무한 조정 🛠 Claude Design(Tweaks/Markup/Edit)
    💡 슬라이더는 토큰 0, 전체 재생성 금지(섹션만 요청 시 비용 1/10)
    AI_디자인_워크플로우
  5. 히어로 전환 패턴 데이터대로 — 단일 수치 히어로(+18%) 최고, 동영상 자동재생(-7%)·팀 재고사진(-11%) 최악, LCP 2초가 급변점 🛠 랜딩 구조
    💡 동영상 히어로는 CDN+포스터로 LCP 1.5초 이내 유지해야 중립
    AI_랜딩페이지_제작
  6. 소셜프루프·CTA·폼 최적화 — 명명된 고객수(+22%)>로고(+8%), 스티키 CTA(+11%), 폼 1필드 12.4% vs 6필드 3.1%(자격질문은 2단계 폼) 🛠 랜딩 구조
    💡 '수천 팀이 신뢰'=소셜프루프 없는 것과 같음, 구체성이 전환
    AI_랜딩페이지_제작
  7. 카피는 결과 중심 + 3초 법칙 + PAS — 기능 나열 X, 결과 중심 / 3초 안에 '이게 뭐야·왜·뭘 해야' 답 / Pain-Agitate-Solve 🛠 카피
    💡 DTC AI 카피는 편집 필수: em-dash 남발·'leverage/optimize'·막연한 형용사 제거
    AI_랜딩페이지_제작
  8. 배포는 손실 없이 핸드오프 — Share→'Hand off to Claude Code'→Vercel, 또는 ZIP→Netlify Drop 즉시 라이브. 단일 HTML은 카페24 삽입에 바로 🛠 Claude Code / Netlify Drop / Vercel
    💡 21st.dev 무료 애니메이션 컴포넌트로 파티클 추가
    AI_디자인_워크플로우·AI_랜딩페이지_제작
  9. 대안 스택 선택 — 정밀반복=Claude Design, 웹 원스톱=Manus, 캔버스 제어=Claude Code+Framer MCP, 토큰 복제=Design Lang, 3D모션=Codex 🛠 상황별 택1/조합
    💡 '실행이 빨라질수록 취향(Taste)이 병목' — 무엇을 만들 것인가가 차별점
    AI_랜딩페이지_제작·ManusAI
📦 산출물 · 고전환 랜딩페이지(라이브 URL) + 전환 최적화 히어로·소셜프루프·CTA·폼·카피
⚠ 전환율 벤치마크는 업종별로 다름(웨비나 11.4% vs DTC 2.3%) — 엉뚱한 목표로 무한 리디자인 금지. '전환율 낮은 예쁜 디자인은 전환율 높은 단순한 디자인보다 나쁘다.' 레퍼런스 그대로 복제 금지.

🧭 공통 원칙 — 전 프로젝트 관통

📚 소스 인덱스 (knowledge-vault)