Files
2nd/10_Wiki/Topics/AI_and_ML/Moodboard Creation.md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

7.0 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-moodboard-creation Moodboard Creation 10_Wiki/Topics verified self
Moodboard
Mood Board
Visual Reference
Creative Direction
none A 0.85 applied
design
creative-direction
moodboard
ai-image
workflow
2026-05-10 pending
language framework
none figma

Moodboard Creation

매 한 줄

Moodboard는 컬러·타이포·이미지·텍스처를 한 화면에 큐레이션해 프로젝트의 톤·분위기·방향성을 정렬하는 시각적 리퍼런스 보드이며, 2026년에는 Pinterest/Milanote/Figma + Midjourney/Nano Banana 결합 워크플로우가 표준이다.

매 핵심

1. 목적

  • Stakeholder 정렬: "이런 느낌"을 텍스트보다 빠르게 합의.
  • Brief → Visual 변환: 마케팅 brief를 디자이너가 해석할 수 있는 시각 언어로.
  • Style guide 씨앗: 컬러 팔레트, 타이포, 사진 스타일 → brand system.
  • AI 프롬프트 재료: Midjourney --sref 이미지 reference, ControlNet input.

2. 구성 요소

요소 역할 예시
Imagery 톤·무드 photo, illustration
Color palette 감정·온도 5-7 hex
Typography 보이스 display + body 2종
Texture / Material 촉감 grain, gloss, fabric
Reference work 벤치마크 competitor, art, film stills
Keywords 언어 앵커 "muted", "editorial", "kinetic"

3. 도구 (2026)

  • Pinterest: 큰 이미지 풀, 검색 강력. 단점: 이미지만.
  • Milanote: 텍스트+이미지+링크+노트 자유 캔버스. 1인 / 작은 팀.
  • Figma + FigJam: 협업 보드, dev handoff 매끄러움.
  • Eagle / Raindrop: 이미지 라이브러리 관리.
  • Mural / Miro: 워크샵형 협업.
  • Are.na: 큐레이터형 + 사회적 발견.
  • Notion / Craft: 텍스트 중심 + 이미지.

4. AI-augmented Workflow (2026 표준)

  1. Brief → ChatGPT/Claude로 키워드 5-10개 brainstorm.
  2. Pinterest scrape + Eagle 정리.
  3. Midjourney --sref 또는 Nano Banana로 변형 생성.
  4. Figma에 6-12 이미지 + 컬러 + 타이포 정렬.
  5. Stakeholder review → 3-5 키워드로 narrowing.
  6. Final moodboard → style guide / generation prompt seed.

5. 좋은 moodboard의 특징

  • Tight curation: 6-12장 (50장 X) — 너무 많으면 메시지 흐려짐.
  • Coherent palette: 추출 컬러가 서로 어울림.
  • Variety in level: macro (분위기) + micro (디테일/텍스처).
  • Keywords annotated: "왜 이 이미지가 들어왔는지" 짧은 캡션.
  • Source credit: 윤리·법적 안전.

6. 안티패턴 회피

  • 너무 많은 이미지 / 모순된 톤.
  • competitor 그대로 베끼기 (방향 X).
  • 이미지만 — 컬러/타이포 누락.
  • AI 이미지만 — 기존 작품 reference 없음.

💻 패턴

// 1. Figma 플러그인 — Pinterest URL → 이미지 일괄 import
async function importPinterest(boardUrl: string) {
  const pins = await fetch(`/api/pinterest?board=${boardUrl}`).then(r => r.json());
  pins.forEach((p, i) => figma.createImageAsync(p.url));
}
# 2. Color palette extraction
from PIL import Image
from sklearn.cluster import KMeans
import numpy as np
img = np.array(Image.open("ref.jpg").resize((100,100))).reshape(-1, 3)
kmeans = KMeans(n_clusters=6).fit(img)
palette = [tuple(map(int, c)) for c in kmeans.cluster_centers_]
# 3. moodboard.yaml — 구조화된 source-of-truth
project: campaign_summer_26
keywords: [editorial, muted, golden_hour, slow]
palette:
  - "#E8DCC4"
  - "#A8896B"
  - "#3D2E20"
typography:
  display: "Editorial New"
  body: "Inter"
references:
  - { url: "https://...", caption: "warm grain" }
  - { url: "https://...", caption: "negative space" }
// 4. Midjourney --sref pipeline
const prompt = `editorial portrait, muted golden hour, slow film grain --sref https://moodboard/img1.jpg https://moodboard/img2.jpg --ar 4:5 --s 250`;
# 5. AI-generated mood expansion
import anthropic
client = anthropic.Anthropic()
out = client.messages.create(
  model="claude-opus-4-7",
  max_tokens=500,
  messages=[{"role":"user","content":
    "Brief: launching a sustainable kids' clothing brand. "
    "Generate 8 moodboard keywords and 5 reference photographer names."}],
)
// 6. Eagle API — tag-based query
const items = await fetch("http://localhost:41595/api/item/list?tags=editorial,muted")
  .then(r => r.json());
# 7. Color palette → CSS tokens
def palette_to_css(palette):
    return "\n".join(f"  --c-{i}: {hex};" for i, hex in enumerate(palette))
print(":root {\n" + palette_to_css(["#E8DCC4","#A8896B"]) + "\n}")
// 8. Notion DB schema
{
  "Properties": {
    "Image": "files",
    "Tag": "multi_select",
    "Source": "url",
    "Why": "rich_text",
    "Approved": "checkbox"
  }
}
# 9. Stable Diffusion ControlNet — moodboard image as style ref
# pip install diffusers
from diffusers import StableDiffusionXLControlNetPipeline
# pipeline runs IP-Adapter on moodboard image
// 10. Approval workflow — Slack bot
slack.message({
  channel: "#design",
  text: "Moodboard v3 ready",
  blocks: [
    { type: "image", image_url: moodboardPng, alt_text: "v3" },
    { type: "actions", elements: [
      { type: "button", text: "Approve", value: "approve" },
      { type: "button", text: "Iterate", value: "iterate" },
    ]},
  ],
});

매 결정 기준

상황 추천 도구
1인 빠른 탐색 Pinterest + Milanote
디자인 팀 협업 Figma + FigJam
워크샵 / brainstorm Mural / Miro
큐레이션 + 커뮤니티 Are.na
이미지 자산 관리 Eagle / Raindrop
Brand system 시작 Figma + 컬러 토큰 추출
AI 생성 baseline Midjourney --sref
클라이언트 승인 PDF 1-pager export

🔗 Graph

🤖 LLM 활용

  • Brief → 키워드 8개 + 사진작가 5명 추천.
  • 이미지 6장 업로드 → 공통 컬러/감정 분석 텍스트.
  • Moodboard → Midjourney/Nano Banana 프롬프트 자동 변환.
  • 클라이언트 피드백 → 키워드 narrowing 제안.

안티패턴

  • 30+ 이미지 dump: 메시지 희석.
  • Competitor 그대로 모방: 방향성 부재.
  • 컬러/타이포 누락: visual reference만 있고 system 없음.
  • AI 이미지 100%: reality / cultural context 약함.
  • 출처 미표기: 라이선스 리스크.
  • stakeholder 부재로 만든 보드: rework 폭증.

🧪 검증 / 중복

  • 검증: It's Nice That, AIGA, Adobe blog, Figma community.
  • 중복: Style Guide (downstream artifact) — 본 문서는 process / curation.

🕓 Changelog

  • 2026-05-10: 신규 작성. Moodboard 구성/도구/AI workflow/안티패턴.