비디자이너를 위한 머터리얼 테마 빌더와 AI 활용법 3단계

디자인 감각이 전혀 없는 1인 개발자, 기획자, 마스터메이커가 프로덕트를 빌드할 때 가장 고통받는 영역은 다름 아닌 색상 시스템이다. [LINK]
피그마(Figma)를 붙잡고 수십 개의 UI 요소를 일일이 칠해보며 밤을 새우는 비효율은 이제 끝내야 한다.
구글 머터리얼 디자인 3(Material Design 3, 이하 M3) 수학적 알고리즘과 인공지능(AI)을 결합하면 비디자이너도 10분 만에 대기업 수준의 정돈된 디자인 시스템을 구축하고 코드에 이식할 수 있다. 본 글에서는 씨앗 색상 하나로 시작하여 자동화 도구를 결합하는 완벽한 3단계 프로세스를 상세히 다룬다.

1. 머터리얼 테마 빌더로 디자인 토큰 명세서 추출하기

디자인 시스템의 시작은 완벽하게 계산된 색상 이름표, 즉 ‘디자인 토큰’을 준비하는 것이다. 구글 알고리즘의 연산력을 빌리기 위해 가장 먼저 실행해야 할 단계이다.

ㄱ. 이미지 기반이 아닌 커스텀 컬러 주입하기

머터리얼 테마 빌더(Material Theme Builder) 공식 웹사이트에 접속하면 기본적으로 이미지 기반 추출 모드가 활성화되어 다소 복잡하게 느껴질 수 있다.
당황하지 말고 좌측 메뉴의 [Custom] 탭을 선택한다. 그리고 내 서비스의 정체성을 대변할 Primary(기본 강조색) 색상 상자를 클릭하여 단 하나의 HEX 코드만 입력한다. 예를 들어 신뢰감을 주는 금융 서비스라면 파란색, 친근한 커뮤니티라면 주황색을 정해 입력하는 방식이다.

ㄴ.전체 명세 데이터 다운로드 절차

Primary 컬러가 입력되는 순간,
구글 알고리즘이 이에 완벽하게 조화되는 서브 컬러(Secondary), 삼차 컬러(Tertiary), 무채색 배경 및 글자색(Neutral)을 라이트 모드와 다크 모드용으로 각각 수십 개씩 실시간 계산해낸다.
화면 우측 상단의 [Export] 버튼을 클릭하여 명세를 다운로드해야 한다. 만약 화면 해상도나 브라우저 창 크기에 따라 글자가 숨겨져 있다면 사각형 4개가 모인 아이콘(⊞)을 클릭하거나 폰트 설정을 마친 후 활성화되는 다운로드 메뉴를 확인하면 된다. 웹 프로젝트를 준비 중이라면 반드시 [Web (CSS)] 또는 [Material Theme (JSON)] 파일 세트를 내려받아야 한다.

2. AI에게 완벽한 디자인 가이드라인 주입하고 학습시키기

많은 메이커가 실수하는 영역이 AI에게 “내 메인 컬러는 와인색이니까 알아서 코딩해줘”라고 모호하게 명령하는 것이다.
완벽한 결과물을 얻으려면 1단계에서 추출한 토큰 명세 문서 자체를 AI에게 학습시켜 규칙을 엄격하게 통제해야 한다.

ㄱ. 프롬프트 치트키로 AI 설계사 고용하기

대화창을 열고 1단계에서 다운로드한 JSON 또는 CSS 코드 내용 전체를 붙여넣으며 아래와 같은 정밀 프롬프트를 함께 던져야 한다.

AI 주입용 마스터 프롬프트 예시: “내가 디자이너 없이 웹 프로덕트를 직접 만들고 있어. 아래 붙여넣은 데이터는 구글 머터리얼 디자인 3 규칙에 맞춰 테마 빌더에서 추출한 내 브랜드의 전용 디자인 토큰(색상 세트)이야. 앞으로 네가 나에게 웹 페이지나 특정 UI 컴포넌트 코드를 짜줄 때, 임의로 #3B82F6 같은 구체적인 HEX 코드를 하드코딩하지 마. 대신 반드시 내가 준 CSS 변수 var(--md-sys-color-...) 형태의 토큰 이름표만 사용해서 스타일을 만들어줘.

특히 컴포넌트를 조립할 때 아래 M3 핵심 규칙을 엄격하게 지켜야 해:

최상위 브랜드 강조 버튼 및 활성 배경: var(--md-sys-color-primary) / 그 위의 글자색: var(--md-sys-color-on-primary)
일반 카드, 섹션 구역, 리스트 배경: var(--md-sys-color-surface-container)
가장 기본이 되는 본문 텍스트 색상: var(--md-sys-color-on-surface)
경고, 에러 알림, 삭제 액션: var(--md-sys-color-error)

이 매핑 메커니즘을 완벽히 이해했으면 준비되었다고 답변하고, 내 토큰 명세서에서 어떤 색상들이 중심이 되었는지 요약해줘.”

ㄴ. 맥락 중심의 컴포넌트 요청법

가이드라인이 성공적으로 주입되면 AI는 단순한 코드 작성기에서 ‘디자인 가이드라인 준수 부서’로 진화한다.
이후 화면 구성을 요청할 때는 시각적인 묘사 대신 맥락을 전달해야 한다. 예를 들어 “여기에 다크모드 스위치랑 언어 선택 셀렉트박스를 넣어줘. 부가 기능이니까 너무 튀지 않게 보조색 컨테이너 토큰들을 활용해서 React 코드로 작성해줘”라고 요청하면 AI가 알아서 명세서 안의 이름표를 조립해 조화로운 코드를 짜낸다.

3. 전수 조사 대시보드와 자동화 스크립트로 기존 코드 체질 개선하기

눈으로 디자인 시스템의 작동 여부를 확인하고, 기존에 구현되어 있던 수많은 구형 코드 파일에 새 테마를 입히는 단계이다. 사람이 수작업으로 노가다를 하는 비효율을 방지해야 한다.

ㄱ. 전수 조사 가이드북 페이지 빌드

어떤 이름의 토큰이 실제로 어떤 색상으로 표현되는지 눈으로 확인해야 AI와 소통비용이 제로가 된다.
프로젝트 폴더 내에 임의의 index.html 파일을 생성하고 아래 명세 페이지 코드를 삽입하여 브라우저로 띄워두어야 한다. 테마 모드 전환을 누르면 모든 컴포넌트의 배경과 선, 글자색이 수학적으로 안전하게 뒤바뀌는 대기업 수준의 시스템을 체감할 수 있다.

<!DOCTYPE html>
<html lang="ko" class="light-mode">
<head>
<meta charset="UTF-8">
<title>M3 완전판 컴포넌트 & 토큰 매퍼</title>
<style>
:root.light-mode {
--md-sys-color-primary: #8C4A60; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #FFD9E2;
--md-sys-color-surface-container: #FAEAED; --md-sys-color-on-surface: #22191C; --md-sys-color-outline: #837377;
}
:root.dark-mode {
--md-sys-color-primary: #FFB0C8; --md-sys-color-on-primary: #541D32; --md-sys-color-primary-container: #703349;
--md-sys-color-surface-container: #261D20; --md-sys-color-on-surface: #EFDFE1; --md-sys-color-outline: #9E8C90;
}
body { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); font-family: sans-serif; padding: 40px; }
.m3-btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none; padding: 10px 24px; border-radius: 100px; cursor: pointer; }
</style>
</head>
<body>
<h1>디자인 시스템 가이드북</h1>
<button onclick="document.documentElement.classList.toggle('dark-mode')">테마 전환</button>
<div style="margin-top: 20px;">
<button class="m3-btn-filled">Filled Button</button>
</div>
</body>
</html>

ㄴ. 파이썬 기반 일괄 치환 자동화

기존에 사용 중이던 프로젝트 소스 코드(.html, .css, .js, .tsx 등) 내부의 하드코딩된 옛날 색상값들을 전역 토큰으로 한 방에 변경하기 위해 아래 파이썬(Python) 스크립트를 생성하여 실행해야 한다.

import os
import re

COLOR_MAP = {
"#3b82f6": "var(--md-sys-color-primary)",
"#ffffff": "var(--md-sys-color-surface-container-lowest)",
"#1f2937": "var(--md-sys-color-on-surface)",
}

def migrate_project(project_dir):
for root, dirs, files in os.walk(project_dir):
if 'node_modules' in root or '.git' in root: continue
for file in files:
if file.endswith(('.html', '.css', '.js', '.jsx', '.tsx')):
path = os.path.join(root, file)
with open(path, 'r', encoding='utf-8', errors='ignore') as f:
content = f.read()

modified = False
for orig, token in COLOR_MAP.items():
pattern = re.compile(re.escape(orig), re.IGNORECASE)
if pattern.search(content):
content = pattern.sub(token, content)
modified = True

if modified:
with open(path, 'w', encoding='utf-8') as f:
f.write(content)
print(f"[치환 완료] {path}")

if __name__ == "__main__":
migrate_project(os.path.dirname(os.path.abspath(__file__)))

이 매그레이션 파일을 프로젝트 최상단 루트 폴더에 넣고 콘솔창에서 실행하면 수작업 수정 없이 단 10초 만에 기존 시스템 전체가 신규 구글 M3 디자인 토큰 체계로 완전히 이관 및 리팩토링된다.

4. 요약

비디자이너 프로덕트 메이커에게 가장 강력한 무기는 시각적 그림을 그리는 기술이 아니라 기획과 로직 시스템을 설계하는 역량이다.

1단계: 머터리얼 테마 빌더에서 핵심 규격 변수(CSS)를 자동으로 추출 완료했음.
2단계: AI에 규칙 대조용 프롬프트를 먹여 가이드라인 중심의 설계 파트너로 고정했음.
3단계: 컴포넌트 대시보드와 파이썬 일괄 스크립트로 수작업 없는 자동 치환 체계를 마쳤음.

이 프로세스를 프로덕트에 장착하는 순간, 어설픈 색상 오남용으로 인한 시각적 실수가 제로에 수렴하게 되며 라이트 모드와 다크 모드가 완벽히 공짜로 연동되는 놀라운 생산성 향상을 맞이하게 될 것이다.