피그마 디자인 시스템, AI에게 학습시키는 방법 총정리

디자인 시스템 데이터 구조화 통한 업무 효율 개선 과정

안녕해요! 4년차 UI/UX 디자이너 비니에요 ><

어디에서든 가장 뜨거운 주제 중 하나가 AI인 것 같은데요,

요즘 디자인 업계에서도 AI 이야기가 정말 많이 나오죠?

저도 처음에는 AI가 제 일을 대신하면 어쩌나 걱정도 했지만,

이제는 AI를 어떻게 하면 제대로 부려먹을 수(?) 있을지 고민하는 게 일상이 되었어요...ㅎㅎ

(매일같이 AI랑 기싸움 하는 중...)

오늘은 제가 실무에서 정말 많이 고민했던 주제를 가져왔어요.

바로 우리가 공들여 만든 피그마 디자인 시스템을

AI에게 학습시켜서 실무에 제대로 활용하는 방법이에요 :)

오늘은 그 방법을 처음부터 끝까지 한 번 알려드려볼게요~

---

AI가 디자인 시스템에 맞춰서 화면을 생성했으면 좋겠어요!

요즘 AI로 화면을 뚝딱 만들어주는 툴들이 정말 많아졌어요.

하지만 실무에서 쓰기에 가장 큰 문제는 바로

결과물이 우리 서비스의 브랜드 가이드와 맞지 않는다는 점이에요 ㅠㅠ

AI가 예쁜 화면을 그려줘도 우리 회사의 폰트, 컬러, 간격 규칙을 지키지 않으면

결국 디자이너가 다시 다 수정해야 하거든요!

그래서 실무 도입의 핵심 지표는 결과물의 정합성이 되어야 해요!

AI가 생성한 화면이 기존에 우리가 구축해둔 디자인 시스템과
얼마나 잘 동기화되어 있는지가 정말 중요해요.

AI가 브랜드의 약속을 얼마나 잘 지키는지가 AI 활용 능력의 척도가 된다고 생각해요.

---

피그마 디자인 시스템, AI 학습용 데이터로 바꾸려면?

AI는 우리 디자이너들처럼 피그마의 레이어 구조나 시각적인 배치를

눈으로 보고 직관적으로 이해하지 못해요 ㅠㅠ

우리가 보기엔 예쁜 버튼이지만 AI에게는 그저 좌표값들의 나열일 뿐이거든요!

그래서 우리는 이 시각적인 정보들을 AI가 읽기 쉬운 형태로 바꿔줘야 해요.

가장 좋은 방법은 바로 시각 정보를 구조화된 데이터인 JSON 형식으로 변환해서 학습시키는 거에요.

JSON은 계층적인 구조를 가지고 있어서

디자인 요소들 사이의 관계와 규칙을 아주 명확하게 정의해줄 수 있거든요 ㅎㅎ

이렇게 데이터를 구조화하면 AI도

"아, 이 컬러는 Primary 브랜드 컬러구나!" 하고 정확하게 인지할 수 있게 돼요.

---

피그마 디자인 시스템을 AI에 학습 시키는 방법 4 Step!

이제 본격적으로 어떻게 AI에게 우리 디자인 시스템을 학습시키는지 단계별로 알아볼까요?

이 순서만 따라서 AI를 학습시키면 한번에 우리 브랜드 톤앤매너에 맞는 디자인을

AI가 생성할 수 있게 될거에요 :)

---

Step 1. 디자인 시스템 파운데이션 정리하기

가장 먼저 해야 할 일은 학습의 기본이 될 피그마 내 디자인 시스템을 깔끔하게 정리하는 거에요!

컬러 파운데이션부터 타이포그래피 스타일,

그리고 가장 기본적인 컴포넌트들을 먼저 살펴봐야 해요.

이름이 중구난방이거나 쓰지 않는 스타일이 섞여 있으면

AI가 학습할 때 혼란을 느낄 수 있으니 미리미리 정리해두는 게 좋아요.

---

Step 2. 디자인 토큰 JSON 데이터 추출하기

정리가 끝났다면 이제 데이터를 뽑아낼 차례에요!

피그마에서 Design Tokens 플러그인 같은 도구들을 활용하면

우리가 설정한 색상, 타이포그래피, 간격 값들을 JSON 형태로 추출할 수 있어요 :)

이 과정이 꼼꼼할수록 AI가 만들어내는 결과물의 퀄리티가 확 올라가요.

---

Step 3. AI가 읽기 편한 모듈별 데이터 최적화

추출한 JSON 데이터를 그대로 AI에게 던져주기보다는,

AI가 문맥을 파악하기 좋게 모듈별로 분리해서 정리해주는 게 훨씬 좋아요!

예를 들어 버튼 관련 데이터, 입력창 관련 데이터 등으로 나누는 거죠 ㅎㅎ

계층 구조를 명확하게 다듬어주면 AI가 특정 화면을 구성할 때

어떤 데이터를 가져와야 할지 훨씬 더 잘 판단할 수 있게돼요.

---

Step 4. 에셋 인덱싱과 리소스 리스트 구축

마지막으로 아이콘이나 이미지 같은 시각 리소스들도 잊지 말아야 하는데요!

AI가 이 리소스들의 경로와 명칭을 식별할 수 있도록 별도의 리스트를 만들어주는 과정이 필요해요.

파일명이 일정한 규칙에 따라 정리되어 있다면

AI가 적재적소에 정확한 아이콘을 배치할 수 있게 되죠.

이렇게 4단계만 거치면 AI 학습 준비는 끝이에요!!!

---

디자인 시스템 활용으로 효율을 극대화하세요!

디자인 시스템은 이제 단순히 컴포넌트들을 모아둔 라이브러리 역할을 넘어

제품의 중심이 되는 데이터가 되었다고 생각해요.

우리가 공들여 만든 이 시스템이 얼마나 체계적인지에 따라 제품의 일관성이 결정되거든요 ㅎㅎ

하지만 요즘은 이런 시스템을 구축하는 것보다,

만들어진 시스템을 어떻게 실무에 잘 활용하느냐가 더 중요해진 시대가 되었죠.

저는 국내에서 IT 비즈니스 파트너로 이름을 알린 똑똑한개발자와 함께 프로젝트를 진행하면서

이런 디자인 시스템 활용의 중요성을 정말 많이 느꼈는데요,

똑똑한개발자는 디자인 시스템을 AI나 개발 환경에서 즉시 사용할 수 있게 체계적으로 관리하시더라고요.

수많은 프로젝트를 거치며 쌓인 그분들만의 데이터 구조화 노하우 덕분에

이번에 저와 함께 했던 프로젝트에서도

복잡한 디자인 토큰들까지 AI가 바로 학습하기 좋은 형태로 정리해주셨어요 :)

단순히 가이드를 만드는 데 그치지 않고 이를 AI 워크플로우와 연결해서

실질적인 작업 효율을 극대화시키는 과정이 정말 인상적이었어요.

디자이너의 의도를 데이터로 치환하고 이를 효율적으로 사용하는 역량이

프로젝트의 결과물을 얼마나 다르게 만드는지 직접 보니까 정말 신기하더라고요.

똑똑한개발자 홈페이지에 자체 디자인 시스템 가이드도 나와있으니,

한 번 참고해보시면 정말 좋을 것 같아요~ 아래 링크 남겨드릴게요 ㅎㅎ

TOKTOKHAN.DEV

---

디자이너에게 AI 활용 역량이란?

오늘 알아본 것처럼 구조화된 데이터를 다루는 능력은

AI 시대를 살아가는 디자이너에게 정말 필수적인 실무 능력이 될 것 같아요 ㅎㅎ

매번 새로운 툴에 적응하느라 정말 바쁘지만

빠르게 적응할수록 업무 효율도 올라가고,

개인적인 AI 활용 역량 또한 성장하니, 게으름 피우지 않고 공부해야겠죠?!

오늘도 감사합니다!

아직 살짝은 쌀쌀한 날씨니...몸 조심하세요 ㅎㅎ