2nd/10_Wiki/Topics/AI_and_ML/상업용 브랜드 이미지 및 디자인 시스템 구축.md

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-상업용-브랜드-이미지-및-디자인-시스템-구축	상업용 브랜드 이미지 및 디자인 시스템 구축	10_Wiki/Topics	verified	self	Brand Design System Visual Identity System AI Brand Pipeline	none	A	0.9	applied	branding design-system ai-image lora tokens		2026-05-10	pending	language framework typescript design-tokens

상업용 브랜드 이미지 및 디자인 시스템 구축

매 한 줄

"매 Design System 매 token + component + asset pipeline 의 single source of truth". Brand 의 visual identity (color, type, voice) 의 design token 으로 codify 후 component library + AI asset generator (brand LoRA) 의 distribute. 매 2026 의 Style Dictionary + Figma Variables + brand-specific LoRA + IP-Adapter 의 standard stack.

매 핵심

매 layer

• Foundation tokens: color primitives, type scale, spacing, radii.
• Semantic tokens: bg.surface, fg.muted, border.subtle (theme-aware).
• Component: button, card, input — token 의 consume.
• Asset: photo, illustration, icon — brand LoRA / vector library.
• Voice: tone-of-voice prompt template (LLM brand voice).

매 distribution

• Style Dictionary → CSS vars / iOS / Android / JSON.
• Figma Variables sync ↔ token JSON.
• Storybook 의 component reference.
• Brand LoRA 의 ComfyUI / replicate.

매 응용

1. Multi-platform consistent rebrand rollout.
2. Marketing asset 의 batch generation 의 brand consistency 보장.
3. Dark/light/high-contrast theme 의 single source.

💻 패턴

Foundation tokens (Style Dictionary)

// tokens/color.json
{
  "color": {
    "primary": {
      "50":  { "value": "#eff6ff" },
      "500": { "value": "#3b82f6" },
      "900": { "value": "#1e3a8a" }
    },
    "neutral": {
      "0":    { "value": "#ffffff" },
      "950":  { "value": "#0a0a0a" }
    }
  }
}

Semantic tokens (theme layer)

// tokens/semantic.light.json
{
  "bg": {
    "surface": { "value": "{color.neutral.0}" },
    "muted":   { "value": "{color.neutral.50}" }
  },
  "fg": {
    "default": { "value": "{color.neutral.950}" },
    "muted":   { "value": "{color.neutral.500}" }
  },
  "accent":    { "value": "{color.primary.500}" }
}

Build → CSS variables

// build.js
import StyleDictionary from 'style-dictionary';

StyleDictionary.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables',
        options: { selector: ':root' },
      }],
    },
    ts: {
      transformGroup: 'js',
      buildPath: 'dist/',
      files: [{ destination: 'tokens.ts', format: 'javascript/es6' }],
    },
  },
}).buildAllPlatforms();

Tailwind v4 의 token consume

/* app.css */
@import "tailwindcss";
@import "./dist/tokens.css";

@theme {
  --color-accent: var(--accent);
  --color-bg-surface: var(--bg-surface);
  --color-fg-default: var(--fg-default);
}

Component (semantic token 만 사용)

// Button.tsx
export function Button({ variant = 'primary', children }) {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-md font-medium transition-colors',
        variant === 'primary' && 'bg-accent text-white hover:bg-accent/90',
        variant === 'ghost' && 'bg-bg-muted text-fg-default hover:bg-bg-surface',
      )}
    >
      {children}
    </button>
  );
}

Brand LoRA training (kohya_ss)

# 매 20-50 brand asset (lookbook, ad, hero shot) 의 dataset
# 매 caption 의 trigger word "<acme>" 의 prepend
accelerate launch sdxl_train_network.py \
  --pretrained_model_name_or_path=stabilityai/stable-diffusion-xl-base-1.0 \
  --train_data_dir=./brand_dataset \
  --resolution=1024,1024 \
  --network_module=networks.lora \
  --network_dim=32 --network_alpha=16 \
  --learning_rate=1e-4 --max_train_epochs=15 \
  --output_dir=./loras --output_name=acme-brand-v3

Asset generator (brand LoRA + token-aware prompt)

import yaml
from diffusers import StableDiffusionXLPipeline
import torch

brand = yaml.safe_load(open("brand.yaml"))
# brand.yaml: { trigger: "<acme>", palette: ["#3b82f6","#0a0a0a"], mood: "minimal, bold" }

pipe = StableDiffusionXLPipeline.from_pretrained(
    "stabilityai/stable-diffusion-xl-base-1.0", torch_dtype=torch.float16
).to("cuda")
pipe.load_lora_weights("./loras/acme-brand-v3.safetensors", adapter_name="brand")
pipe.set_adapters(["brand"], adapter_weights=[0.85])

def gen(scene: str):
    return pipe(
        prompt=f"{brand['trigger']} {scene}, {brand['mood']}, brand color palette",
        negative_prompt="off-brand color, cluttered, generic stock photo",
        num_inference_steps=30, guidance_scale=6.0,
    ).images[0]

gen("hero shot, sneaker on rocky terrain, golden hour")
gen("packshot, white seamless, soft shadow")

Tone-of-voice template (LLM brand voice)

const BRAND_VOICE = `
You are writing copy for ACME, a minimalist outdoor brand.
Voice: confident, terse, sensory. NEVER use exclamation marks.
Lexicon: prefer "built" over "made", "trail" over "outdoors".
Forbidden: "amazing", "innovative", "revolutionary", "game-changer".
Sentence length: avg 8 words, max 14.
`;

await anthropic.messages.create({
  model: 'claude-opus-4-7',
  system: BRAND_VOICE,
  messages: [{ role: 'user', content: 'Write a hero headline for new trail runner.' }],
});

Dark theme override

// tokens/semantic.dark.json — same shape, different values
{
  "bg":  { "surface": { "value": "{color.neutral.950}" } },
  "fg":  { "default": { "value": "{color.neutral.0}" } }
}

:root { /* light */ }
:root[data-theme="dark"] { /* dark override generated */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* dark */ }
}

Figma Variables ↔ tokens sync

# 매 Tokens Studio plugin / figma-variables-cli
figma-variables export --file-id $FIGMA_FILE --out tokens/figma.json
node scripts/normalize-figma.js tokens/figma.json tokens/color.json
npm run build-tokens

매 결정 기준

상황	Approach
새 brand 의 from scratch	Foundation → Semantic → Component → Asset 의 순
Multi-theme (light/dark/contrast)	semantic 1 layer + theme override
AI asset 의 brand consistency	brand LoRA (weight 0.7-0.9) + IP-Adapter
Designer-Dev 의 sync	Figma Variables ↔ Style Dictionary
LLM copy 의 brand voice	system prompt 의 lexicon + forbidden + tone
Token 의 hard-code (ad-hoc color)	매 ban — semantic token 만

기본값: Style Dictionary + Tailwind v4 + brand LoRA + Figma Variables sync.

🔗 Graph

• 부모: Design System
• 변형: Design Tokens · Component Library
• 응용: 상업용 제품 사진 및 브랜드 로고 디자인
• Adjacent: Style Dictionary Pipelines · Figma Variables · Tailwind v4 · Storybook

🤖 LLM 활용

언제: brand-aware copy generation, asset prompt template, lexicon enforcement, multi-language brand voice. 언제 X: 매 legal-sensitive copy (claims, compliance) — human review 의 의무.

❌ 안티패턴

• Hard-coded hex: token bypass — semantic token 만 사용.
• Foundation 의 component 직접 consume: theme override 불가능 — semantic layer 의 거침.
• Brand LoRA 의 single asset overfit: dataset diversity (20+) 의 필요.
• Figma ↔ code 의 drift: 매 sync automation 의 부재 — bi-directional pipeline 의 추천.
• LLM voice 의 forbidden 의 부재: cliche ("game-changer") 의 leak.

🧪 검증 / 중복

• Verified (Style Dictionary docs, Figma Variables 2024, kohya_ss SDXL LoRA, Tailwind v4 docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — token layers + brand LoRA + voice template