Copyright © MINSOL DESIGN
UI 자동 생성
FigmaMake를 활용한
생성형 AI 환경에 맞게 디자인 시스템을 재정의하여 UI 생산 속도를 개선하고
협업 비용을 구조적으로 감소시켰습니다.
DATE
ROLE
TOOL
2026. 01 - 2026. 02
디자인 시스템 표준화 - 기여도 90%
Figma, Figma Make
Weekly 회의 시연에 사용할 수 있는
Layout 화면에 적용할 멀티컬럼 Attribute 만들어줘
PoC·기획 단계에서 UXUI 논의를 효과적으로 하고싶어요
잦은 업데이트·담당자 교체로 분산된 리소스 → 탐색·재사용이 어려워요
Variant 상태 정의 미흡→ 유지보수 비용이 증가하고 AI 생성이 불가능해요
Attribute 작업량과 소요 시간 대비 결과가 미비한 수준이예요
Pain Point
OVERVIEW
AI 활용이 확대되면서, 생성형 AI에서는 디자인 시스템의 구조적 완성도가 곧 생산성과 직결되는 환경이라고 판단했어요. 시스템 구조화를 위해
약 300개의 컴퍼넌트를 전수 조사 후, 문서 작업부터 시작하여 네이밍 규칙을 설정하고 구조를 재정비했어요.
핵심 성과
네이밍 규칙
attribute/option1/input_active
대분류 (영역)
중분류 (역할)
에셋 이름
상태
Snake case 사용
마크업의 컨벤션 반영: Class name, 그룹핑, 풀네임 작성 등
Discover the key to grow your business
24
Lorem ipsum dolor sit amet consectetur adipiscing elidolor mattis sit phasellus mollis sit aliquam sit nullam neques.
32
Get started
Learn more
Home
About
Pricing
Features
Services
Portfolio
24
Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam mauris sed ma
32
About us
Mission
Our team
Awards
Testimonials
Privacy policy
Services
Web design
Web development
Mobile design
UI/UX design
Branding design
Portfolio
Corporate websites
E-commerce
Mobile apps
Landing pages
UI/UX projects
Contact us
Information
Request a quote
Consultation
Help center
Terms and conditions
Copyright © 2025 BRIX Agency | All Rights Reserved | Terms and Conditions | Privacy Policy
Numbers that showcase our success
40
200+
24
Websites build
97%
24
Client satisfaction
34+
24
Team members
100+
24
Amazing clients
Button
Element Align
Center
Radius
Type
Contained
Width
Flexible
Height
XLarge
Composition
Icon+Text
Sub Icon
Green
Color
Green
Hover Color
None
Outline Color
Outline Width
320
px
Text
Font Size
Medium
Font Weight
Medium
Font Family
Default
Black
Font Color
Link
Link URL
/
Open link in
New Window
Save
Preview
Share
Save
Project Name
Published
Home
Weekly 회의 시연에 사용할 수 있는
Layout에 적용할 수 있는 멀티컬럼 어트리뷰트 만들어줘
업무 효율 70% 향상↑ (Attribute 기준)
컴포넌트 탐색 시간 80% 단축 및 재사용률 증가
생성형 AI 최적화로 작업 속도 극대화
협업 비용 30% 이상 감소↓
디자이너에게 의지하지 않고 PoC/ 기획 단계에서 UI 생성 및 시각화 가능
디자인-개발 간 리소스 사양 관련 슬랙/미팅 문의 약 30% 감소
Variant 구조
Select box
Radio Button
Button
Input
Preset
color_basic
Font Color
Black
color_none
Font Color
None
구조화 + 문서 작업 후, 담당자가 아니어도 Ctrl+F로 탐색 가능하도록 가이드 제작
CHANLLENGE & STRATEGY
초기에 전체 화면 UI 자동 생성 시도 시, 실무 적용 수준의 완성도 재현에 한계가 있음을 확인하고 전략을 수정했어요.
TRY 1
완성도 20%
FAIL
[전체 UI] UI Frame + 자연어 입력
TRY 2
완성도 50%
FAIL
[제한된 영역의 UI] UI 이미지 + 자연어 입력
TRY 3
완성도 80%
SUCCESS
[제한된 영역의 UI] 컴퍼넌트 라이브러리 재정비 + LLM 프롬프트 엔지니어링(HTML+CSS) 입력
TO-BE
컴퍼넌트 바로 탐색 + AI로 UI 생성
기획부터 개발까지 연결되는 일관된 리소스 생산 환경을 구축
AS-IS
직접 분산된 컴퍼넌트를 찾던 복잡한 파일 구조
컴퍼넌트 중복 및 네이밍·Variant 체계 미흡으로 AI 자동 생성 어려움/재작업 발생
디자이너
말씀하신게 이 파일 맞을까요? 변경 히스토리 알고 계실까요?
개발자
이번 기능 업데이트에 OO의 OO필드와 같은 신규 필드가 필요해요
디자인 파일1
디자인 파일2
디자이너/기획자
[AI 프롬프트] 이 이미지를 FigmaMake가 100% 그대로 재현할 수 있도록
HTML에 바로 적용 가능한 마크업 문법을 작성해보자
개발자
이번 기능 업데이트에 attribute/option2의 신규 필드가 필요해요
