출처: 나무위키 / 밤티

JIPEETERS 22기

AI가 만드는 결과물,
왜 밤티일까?

디자인 시스템으로 완성하는 AI × 디자이너 협업

요가씨 이예솔

carrot-test26060301.web.app

WHO AM I

요가씨 소개

이예솔

프리랜서 콘텐츠 디자이너

About

✏️ 당근마켓 기반 커스텀 플래너

🎨 콘텐츠 디자이너

⚡ 지피터스 22기

🤖 AI와 함께 서비스 만들기

Instagram

@yogassi.toon

Scan me

이번 발표에서 다룰 것

01

🤔 왜 AI 결과물은 밤티일까?

디자이너 관점에서 본 AI의 한계

02

📐 디자인 시스템이란 무엇인가

Color, Type, Component, Spacing

03

📊 실제 사례 — 플래너 v1 → v3

Before & After 비교

04

🤝 AI × 디자이너 협업 방법

레퍼런스에서 시스템까지

요가씨의 커스텀 플래너 지피터스 22기

"왜 AI 결과물은 밤티일까?"

🎲

매번 달라지는 스타일

색상, 폰트, 레이아웃이 요청할 때마다 다름. 같은 프롬프트도 결과가 들쭉날쭉.

🔍

브랜드 아이덴티티 없음

"예쁘게 만들어줘"라고 하면 AI는 예쁨의 기준을 모름. 결과물에 내 브랜드가 없음.

🔁

끝없는 수정 사이클

수정 → 또 밤티 → 수정 → 또 밤티. 방향 없이 반복만 됨.

결론 — 문제는 AI가 아니라, 디자인 방향을 잡아주지 않는 것이다.

요가씨의 커스텀 플래너 지피터스 22기

REAL TALK

AI 입문자의 힘겨운 사투

Claude — 프로젝트: 커스텀 플래너 PPT

RECENTS

🥕 커스텀 플래너

PPT 디자인 시스템

랜딩페이지 배포

요

요가씨

지피터스 사례발표용 PPT 만들어줘
디자인 시스템 적용해서 잘 부탁해 🙏

✦

Claude

✨ 요가씨의 커스텀 플래너

위클리 먼슬리 데일리

디자인 시스템 적용 완료했습니다! ✅

야 이거 너무 밤틴데???????

디자인 시스템 제대로 적용된 거 맞아? 너 혹시 html로 만들면 더 잘해?

수차례 수정 후...

아니 지금 폰크 두께 너무 두껍고 쓸뎃없는 박스 너무 많아
남색을 너무 남발하지마 포인트 컬러 1개만써

✦

Claude

수정했습니다! 훨씬 나아졌죠? 😊

왜 이따구로 나와?

이거 개 밤티나니깐

돌파구 발견

레퍼런스 URL
+ 디자인 토큰
= 명확한 기준

↓

CUSTOM PLANNER

나만의 플래너,
요가씨가 만들어드려요

시작하기 →

"너무 좋은데 🫶"

수정 횟수

∞

요가씨의 커스텀 플래너 지피터스 22기

SOLUTION

디자인 시스템을 먼저 잡아라

AI 협업 4단계 프로세스

01

🔍 레퍼런스 수집

Behance, Pinterest 등에서 원하는 스타일 레퍼런스 수집

02

🎨 디자인 토큰 추출

컬러 팔레트, 폰트 패밀리, 간격 규칙을 명문화

03

🤖 AI에게 시스템 전달

레퍼런스 URL + 토큰을 명시하여 Claude에게 전달

04

🔁 시스템 안에서 반복 개선

수정도 항상 정의된 시스템 안에서만 진행

디자인 시스템이란?

Color

브랜드 팔레트 — 배경, 서피스, 포인트

Typography

폰트 패밀리, 사이즈 스케일, 웨이트

Component

버튼, 카드, 태그 등 반복 패턴

Spacing

8px 기반 그리드, 여백 규칙

요가씨의 커스텀 플래너 지피터스 22기

BEFORE

v1 — 디자인 시스템 없이

✨ 요가씨의 커스텀 플래너

🌸 레이아웃 선택

위클리 먼슬리 데일리

💝 커버 색상

문제점 분석

색상

크림/코랄/퍼플 혼재 — 배색 기준 없음

폰트

시스템 기본 폰트, 웨이트 혼용, 브랜드 없음

간격

일관된 여백 기준 없음

톤

평범한 블로그 느낌, 요가씨 아이덴티티 없음

수정

3회 이상 반복 수정 필요

요가씨의 커스텀 플래너 지피터스 22기

AFTER

v3 — 디자인 시스템 적용 후

요가씨의 커스텀 플래너

시작하기 →

CUSTOM PLANNER

나만의 플래너,
요가씨가 만들어드려요

위클리 먼슬리 PDF 다운로드

커스텀 시작하기 →

개선 포인트

색상

#000 + #C6FF00 — 2색 시스템, 명확한 위계

폰트

Pretendard 단일 패밀리, 일관된 웨이트

간격

8px 그리드 기반 여백 시스템

톤

콘텐츠 디자이너 요가씨 브랜드 완성

수정

시스템 정의 1회 → 즉시 완성

요가씨의 커스텀 플래너 지피터스 22기

DESIGN SYSTEM

실제로 사용한 디자인 시스템

Color Tokens

#111111

Black

#FFFFFF

White

#C6FF00

Accent

#888888

Muted

Typography — Pretendard Variable

56px / 700

Title

32px / 600

Heading

14px / 400

Body text — readable, clean

11px / 500

EYEBROW / CAPTION

Components

Button

시작하기 →

주문하기

Tag

PDF 파일 실물 인쇄 위클리

Spacing — 8px base

8 / 16 / 24
32 / 40px

요가씨의 커스텀 플래너 지피터스 22기

HOW WE DID IT

Claude와 이렇게 협업했어요

01

🔍 레퍼런스 수집

Behance에서 원하는 스타일 찾기. 컬러, 타이포, 레이아웃 분석.

02

🎨 디자인 시스템 정의

컬러 토큰: #000, #FFF, #C6FF00 / 폰트: Pretendard / 간격: 8px grid

03

💬 Claude에게 전달

"이 시스템으로 만들어줘" — 레퍼런스 URL + 토큰 명시

04

🔁 시스템 안에서 반복 개선

틀을 유지하며 디테일 수정. 수정은 항상 시스템 안에서만.

요가씨의 커스텀 플래너 지피터스 22기

KEY TAKEAWAY

"AI는 도구,
방향은 디자이너가."

01

✅ 디자인 시스템 먼저

AI에게 요청하기 전에 컬러·폰트·컴포넌트 규칙을 먼저 정의하라

02

💡 레퍼런스는 언어다

말로 설명하기 어려운 스타일은 레퍼런스 URL 하나가 더 명확하다

03

🔒 수정은 시스템 안에서

디자인 시스템이 있으면 수정해도 브랜드가 흔들리지 않는다

요가씨 이예솔

carrot-test26060301.web.app

Instagram @yogassi.toon · 지피터스 22기