스타트업의 AI 디자인 시스템 구축기: 실패와 배움의 여정

안녕하세요! Design AI LAB의 학습자, 함께 배우는 여정에 동참하고 있는 이름 없는 학습자입니다. 오늘은 제가 스타트업에서 AI 디자인 시스템이라는 거창한 목표를 가지고 헤딩했던, 솔직하고 엉성했던 경험담을 공유하려고 해요. 완벽한 성공담은 아니지만, 아마 저와 비슷한 고민을 하는 분들께 작은 길라잡이가 될 수 있지 않을까 싶습니다. 성공보다 실패와 그로부터 얻은 배움에 초점을 맞춰 이야기해볼게요!

1. 이 프로젝트를 왜 시작했을까? – 혼돈 속 한 줄기 빛, AI

제가 몸담고 있는 스타트업은 초고속 성장이라는 명분 아래, 디자인과 개발이 항상 숨 가쁘게 돌아가는 곳이었어요. 문제는 이 초고속이 가끔 초혼돈으로 변질된다는 점이었죠. 디자이너마다 버튼 디자인이 미묘하게 다르고, 개발자들은 이게 최신 버전인가요?를 끊임없이 물어봤어요. 새로운 기능이 나올 때마다 바퀴를 다시 만들고 있다는 느낌을 지울 수 없었습니다. 디자인 시스템의 필요성은 모두가 느끼고 있었지만, 막상 누가 손대려고 하면 시간 없음이라는 거대한 벽에 부딪혔죠.

그러던 중, 저는 Design AI LAB에서 AI가 디자인 프로세스를 어떻게 혁신할 수 있는지 배우기 시작했습니다. 문득 이런 생각이 들었어요.

어차피 수작업으로 디자인 시스템을 구축하는 건 시간이 너무 오래 걸려.
그럼 AI의 힘을 빌리면 이 혼돈을 좀 더 빠르게 정리할 수 있지 않을까?
AI가 스스로 디자인을 학습하고, 일관성을 찾아주고, 심지어 코드를 생성해준다면…
이것이야말로 꿈의 디자인 시스템 아닌가?

솔직히 말하면, 반은 호기심이었고 반은 절박함이었습니다. AI가 만능 해결책처럼 느껴졌고, 제 손으로 이 마법 같은 일을 직접 해보고 싶었죠. 저의 작은 스타트업에 AI 디자인 시스템을 도입해서, 디자인 생산성을 극대화하고, 디자이너와 개발자 모두의 삶을 윤택하게 만들겠다는 다소 거창한 꿈을 꾸게 되었습니다.

2. 이렇게 해봤어요: 이상과 현실 사이의 고군분투

초기 시도: AI로 제로에서 유를창조하기?

가장 먼저 시도했던 건, AI가 디자인 컴포넌트를 직접 만들어주면 어떨까 하는 아이디어였습니다. 저희 서비스의 기존 디자인 에셋들을 학습 데이터로 삼아, 새로운 버튼이나 카드 UI를 텍스트 프롬프트만으로 생성해내는 것이 목표였죠. 예를 들어, 파란색의 크고 둥근 primary 버튼, 텍스트는 시작하기라고 입력하면, 바로 Figma 컴포넌트가 뚝딱 나오는 상상을 했습니다.

Figma 플러그인 & LLM 연동 시도: OpenAI API와 Figma 플러그인을 연동해서, 텍스트 프롬프트를 입력하면 Figma 레이어를 생성하는 스크립트를 짜봤습니다.
기존 디자인 패턴 학습: 저희 서비스의 가장 많이 쓰이는 버튼, 인풋 필드, 카드 등을 추출해서 LLM에 입력하고, 특징을 학습시키려 노력했습니다.

막힌 부분: AI는 만능이 아니구나깨달음의 순간들

결론부터 말하면, 이 시도는 꽤 처참하게 실패했습니다. 왜냐구요? 몇 가지 큰 장벽에 부딪혔거든요.

데이터의 질 문제: 저희 기존 디자인 에셋들은 디자인 시스템이라는 이름이 무색할 정도로 일관성이 없었어요. 똑같은 파란색이라도 미묘하게 다른 Hex 코드를 가진 버튼들이 수십 개였고, 폰트 사이즈도 제각각이었죠. AI는 이 모든 것을 데이터로 인식했으니, 학습을 하면 할수록 더욱 혼란스러운 결과물을 내놓았습니다. 쓰레기를 넣으면 쓰레기가 나온다(Garbage In, Garbage Out)는 격언을 뼈저리게 느꼈죠.
AI의 시각적 이해 한계: LLM은 텍스트를 기반으로 동작하기 때문에, 파란색이라는 단어는 이해해도, 저희 브랜드의 특정 파란색이 가지는 미묘한 톤 앤 매너나, 활성화 상태의 미세한 그림자 효과 같은 시각적 디테일을 정확히 표현하지 못했습니다. 결과물은 항상 엉성하거나, 맥락에 맞지 않는 경우가 다반사였어요.
통합의 어려움: Figma에서 AI가 생성한 레이어를 실제 컴포넌트로 만들고, 이를 개발자들이 사용할 수 있는 형태로 변환하는 과정이 생각보다 복잡했습니다. 단순히 레이어를 생성하는 것을 넘어, 오토 레이아웃, Variant 설정, 그리고 개발 친화적인 이름 규칙 등을 AI가 자동으로 지켜주기를 기대하는 건 너무 큰 욕심이었죠. 결국 사람이 일일이 수정해야 했고, 오히려 더 많은 시간을 잡아먹는 비효율을 초래했습니다.
환각(Hallucination) 현상: AI가 제시하는 가이드라인이나 속성 값은 때때로 저희 서비스의 디자인 철학과 완전히 동떨어진 내용이거나, 심지어 존재하지 않는 CSS 속성을 추천하기도 했습니다. 이런 기능은 우리 서비스에 없는데…?하는 경우가 빈번했죠.

솔직히 좀 막막했습니다. AI는 아직 여기까지는 안 되는 건가?하는 좌절감도 들었구요.

3. 실패와 배움: 안 되는 건 버리고, 되는 것에 집중하기

AI는 창조보다 증강에 강하다는 깨달음

처음의 거창한 목표(AI가 디자인을 제로에서 창조하는 것)는 내려놓기로 했습니다. 대신, AI는 인간의 작업을 보조하고, 반복적인 작업을 자동화하며, 기존 데이터에서 패턴을 찾아내는 데 강하다는 원칙을 되새겼어요. 제가 실패했던 지점들을 다시 돌아보고, AI를 활용할 수 있는 현실적인 방향으로 선회했습니다.

이렇게 방향을 바꿨어요:

기존 디자인 에셋 정리에 AI 활용하기:

AI가 새로운 디자인을 생성하는 건 어렵다는 걸 알았으니, 반대로 기존의 혼란스러운 디자인 에셋에서 일관성 없는 부분을 찾아내고, 정리하는 데 AI를 활용하기로 했습니다. 간단한 스크립트를 짜서 Figma 파일 내의 모든 레이어를 분석하고, 비슷한 디자인 속성(색상, 폰트 사이즈, 간격 등)을 가졌지만 미묘하게 다른 값들을 가진 요소들을 리스트업 했습니다. 예를 들어, #FFFFFF와 #FEFEFE처럼 거의 동일하지만 다른 색상들을 찾아내어, 이것들은 사실 같은 화이트여야 합니다!라고 알려주는 식이었죠. 이는 디자인 토큰을 정의하는 데 엄청난 도움이 되었습니다.

AI는 판단을 대신해주는 게 아니라, 판단을 위한 데이터를 효율적으로 가공해주는 도구라는 걸 배웠어요.
문서화 및 가이드라인 초안 생성에 LLM 활용:

디자인 시스템에서 중요한 부분은 바로 문서화입니다. 각 컴포넌트가 어떻게 사용되어야 하는지, 어떤 상황에 적합한지 등을 명확히 정의하는 것이죠. 이 부분에서 LLM(ChatGPT)이 큰 힘을 발휘했습니다. 수동으로 정의한 각 컴포넌트의 이름, 역할, 주요 속성을 입력해주면, LLM이 이 컴포넌트는 어떤 목적을 가지며, 언제 사용되어야 하는지, 그리고 피해야 할 사용법은 무엇인지에 대한 초안 가이드라인을 작성해줬습니다.
- 프롬프트 예시: 이 버튼 컴포넌트의 이름은 Primary Button이고, 핵심 액션을 유도할 때 사용됩니다. 주황색(#FF7F00)이며, 클릭하세요, 확인, 제출과 같은 텍스트가 들어갑니다. 이 정보를 바탕으로 이 버튼의 사용 가이드라인 초안을 작성해주세요. 접근성 관련 내용도 포함해주세요.
물론 100% 완벽하진 않았지만, 텅 빈 문서에서 시작하는 것보다 훨씬 효율적이었습니다. 제가 내용을 검토하고, 저희 서비스에 맞게 수정하는 과정을 거쳤죠. 휴먼-인-더-루프(Human-in-the-loop)의 중요성을 깨달은 순간이었습니다.
간단한 코드 스니펫 및 예제 생성:

디자인 시스템은 개발자와의 협업이 필수적입니다. 각 컴포넌트가 어떤 코드로 구현되는지 예제를 제공하는 것이 좋죠. LLM은 이 부분에서도 유용했습니다. 특정 컴포넌트의 디자인 속성을 입력하면, 해당 컴포넌트를 구현할 수 있는 HTML/CSS 코드 스니펫이나 React 컴포넌트 예제 초안을 생성해줬습니다. 역시 완벽하진 않았지만, 개발자들이 컴포넌트를 이해하고 시작하는 데 필요한 리소스를 빠르게 제공할 수 있었어요.

4. 완벽하진 않지만 이 정도 나왔어요: 작은 성과들

저희가 최종적으로 구축한 AI 디자인 시스템은 거창한 AI가 모든 것을 자동으로 해주는 미래적인 시스템은 아닙니다. 하지만 AI의 도움을 받아 훨씬 효율적으로 기반을 다진, AI로 증강된(AI-augmented) 디자인 시스템이라고 부를 수 있을 것 같아요.

핵심 컴포넌트 라이브러리 구축: Figma에 모든 핵심 UI 컴포넌트(버튼, 인풋, 카드, 모달 등)를 Variant와 Auto Layout을 활용하여 체계적으로 정리했습니다. 이 과정에서 AI가 기존 에셋의 문제점을 찾아주는 데 크게 기여했습니다.
디자인 토큰 시스템 정립: AI 분석을 통해 추출하고 정리된 색상, 폰트, 간격 등의 디자인 토큰을 명확히 정의하고, Figma Styles와 개발 코드에 적용했습니다.
초기 문서화 및 가이드라인: Storybook과 같은 툴을 활용하여 각 컴포넌트의 시각적 요소, 사용 예시, 그리고 LLM이 초안을 작성해준 가이드라인을 담은 문서 사이트를 만들었습니다.
반복 작업 시간 감소: 디자이너와 개발자 모두 새로운 기능을 만들 때, 바퀴를 다시 만드는 대신 기존 컴포넌트를 활용하는 빈도가 훨씬 늘었습니다. 특히 디자인 토큰과 기본 컴포넌트가 잡히면서, 불필요한 디자인 논쟁이 줄어들었어요.

아직 갈 길은 멀지만, 과거의 혼돈보다는 훨씬 정돈되고 효율적인 환경을 만들어나가고 있다는 점에서 의미 있는 결과라고 생각합니다.

5. 이 프로젝트를 통해 배운 것들: 함께 배우는 여정의 가치

이 길고 험난했던 AI 디자인 시스템 구축 여정을 통해, 정말 많은 것을 배웠습니다.

AI는 도구일 뿐, 만능 해결책이 아니다: AI는 특정 문제를 해결하기 위한 강력한 도구이지만, 모든 것을 자동으로 처리해주는 마법은 아닙니다. AI의 강점과 한계를 명확히 이해하고, 적절한 문제에 적용하는 지혜가 필요합니다.
시작은 미약하나 끝은 창대하리라대신, 작게 시작하고 빠르게 실패하라: 처음부터 거창한 AI 시스템을 만들려 하지 말고, AI가 가장 큰 가치를 줄 수 있는 작은 문제부터 해결해나가며 점진적으로 확장하는 것이 중요합니다. 실패는 과정일 뿐, 중요한 건 거기서 배우고 다음 스텝으로 나아가는 것입니다.
데이터의 중요성: AI는 좋은 데이터를 먹고 자랍니다. 아무리 뛰어난 AI 모델이라도, 부실한 데이터 위에서는 좋은 결과를 기대할 수 없습니다. AI를 도입하기 전에 데이터 정제에 충분한 시간을 투자해야 합니다.
인간의 역할은 여전히 중요하다: AI는 초안을 만들고, 패턴을 찾아주고, 정보를 제공하지만, 최종적인 판단과 검토, 그리고 미묘한 맥락의 이해는 여전히 인간의 몫입니다. AI와 인간의 협업, 즉 휴먼-인-더-루프가 성공의 핵심입니다.
프로세스와 문화가 기술보다 먼저다: 아무리 좋은 AI 기술과 디자인 시스템을 구축해도, 팀원들이 그것을 활용하고 업데이트하는 문화가 형성되지 않으면 무용지물이 됩니다. 기술 도입은 항상 그 기술을 사용할 사람들과 프로세스를 함께 고려해야 합니다.

저 혼자만 이렇게 헤딩했던 것이 아니라, Design AI LAB에서 함께 고민하고 이야기 나누었던 경험들이 저에게 큰 힘이 되었습니다. Learning Design & AI Together라는 슬로건처럼, 혼자였다면 포기했을 순간에도 그래, 다들 이렇게 배우면서 성장하는 거겠지!라는 위안을 얻을 수 있었어요.

6. 다음 도전: 더 현명하게, 더 깊이 있게

이번 프로젝트를 통해 얻은 경험과 배움을 바탕으로, 다음에는 이런 도전들을 해보고 싶습니다.

AI 기반의 디자인 시스템 건강 검진툴 개발: 현재 구축된 디자인 시스템을 AI가 주기적으로 스캔하여, 새로운 디자인 파일에서 시스템 가이드라인을 벗어나는 요소(예: 사용되지 않는 색상, 변형된 폰트, 잘못된 컴포넌트 사용 등)를 자동으로 감지하고 보고해주는 시스템을 만들어보고 싶습니다. 단순한 규칙 기반을 넘어, 시각적 유사성을 AI가 판단하는 방향으로요.
개인화된 디자인 시스템 가이드: AI가 디자이너나 개발자의 작업 맥락을 이해하고, 필요한 컴포넌트나 가이드라인을 능동적으로 추천해주는 개인 비서역할을 하도록 고도화하고 싶습니다.
디자인 시스템 진화에 AI 활용: 서비스가 성장함에 따라 디자인 시스템도 진화해야 합니다. 사용자 피드백이나 새로운 시장 트렌드를 AI가 분석하여, 기존 컴포넌트의 개선점이나 새로운 컴포넌트의 필요성을 제안하는 데 활용하는 방안을 모색하고 싶습니다.

아직도 AI와 디자인 시스템의 조합은 미지의 영역이 많지만, 이번 경험을 통해 저는 불가능하다!가 아닌 아직은 어렵지만, 이런 방향으로는 가능성이 있다!라는 희망을 보게 되었습니다. 앞으로도 꾸준히 배우고, 도전하고, 이 실패와 배움의 여정을 함께 공유해나가겠습니다. 긴 글 읽어주셔서 감사합니다!

Image Source: Generated by AI (Design AI Lab)

스타트업 AI 디자인 시스템 구축: 실패에서 배우는 실전 노하우