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

---
id: wiki-2026-0508-상업용-브랜드-이미지-및-디자인-시스템-구축
title: 상업용 브랜드 이미지 및 디자인 시스템 구축
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Brand Design System, Visual Identity System, AI Brand Pipeline]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [branding, design-system, ai-image, lora, tokens]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: 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)
```json
// 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)
```json
// 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
```javascript
// 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
```css
/* 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 만 사용)
```tsx
// 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)
```bash
# 매 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)
```python
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)
```typescript
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
```json
// tokens/semantic.dark.json — same shape, different values
{
  "bg":  { "surface": { "value": "{color.neutral.950}" } },
  "fg":  { "default": { "value": "{color.neutral.0}" } }
}
```
```css
:root { /* light */ }
:root[data-theme="dark"] { /* dark override generated */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* dark */ }
}
```

### Figma Variables ↔ tokens sync
```bash
# 매 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|Style Dictionary]] · [[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 |