일관성있는 디자인을 위해
AI활용하기 (2/2)
AI로 코드화한 디자인시스템 기반으로 UI 그려내기
이전 글, '일관성있는 디자인을 위해 AI활용하기(1/2)에 이어 디자인시스템을 좀 더 자세히 구체화하고, 일관성 있는 UI를 정말 뽑아내는 방법에 대해 한번 테스트해보려고 한다.
#1. Material Design 3 디자인시스템 다듬기
지난 포스팅에서 아이콘을 svg 코드로 변환해두는 작업까지 시도해보았고, 생각보다 토큰 소비량이 많아서 claude code pro계정을 사용하는 나로서는 하루이틀 정도의 시간이 더 걸릴 수 밖에 없었다.
시간은 좀 걸렸지만 위 이미지와 같이 아이콘의 svg 변환 작업을 마무리하고 보니..
엥? svg만 있고 이 아이콘 파일을 설명해주는 json파일이 생성되지 않았다.
그래서 다시 icons.json 파일을 만들어달라고 요청해보았다.
icons 폴더 아래 icons.json 파일을 만들어줘. icons.json 파일은 아이콘에 대한 규칙을 설정하는 내용이야. 지금 붙여넣기한 내용 기준으로 설정해줘.
(간단한 설명 추가 - 아래 이미지 참고)
역시 똑똑한 claude code.
개떡같이 요청해도 찰떡같이 알아듣고 내가 생각했던 대로 잘 코드를 짜주고 내용을 구성해준다.
이번엔 앞에서 놓쳤던 AI가 이해하기 쉬운 시스템의 기반을 닦아놓을 차례.
이전 글에는 적어두었지만 실행하지 못했던 내용을 뒤늦게 나마 요청해 전체 구조를 만들어 놓고자 한다.
하지만 전체 구조가 어떻게 바뀔지 다소 불안하여 '계획을 먼저 세워달라'고 요청해본다.
지금 만들어진 디자인 시스템을 기반으로 Next.js 16, TypeScript, Tailwind CSS v4 기준으로 프로젝트 세팅을 하려고해. 이 디자인시스템 기반으로 피그마에 ui를 그리려고 하거든. 우선 계획을 세워줘.
claude code가 먼저 json위주로 만들어진 디자인 시스템을 쭉- 확인을 한 후에, tailwind css 테마만들고 리액트 컴포넌트들(tsx파일)도 만들고, 피그마 devmode 연결을 한다는 것으로 보인다.
뿐만 아니라 현재 디자인시스템 현황을 정확히 판단하고 각각의 단계를 phase별로 나누어서 차근차근 진행한다고 알려준다. 뭐, 당연히 Yes.!
이렇게 다시금 요청을 했을 때, 아래와 같이 디자인시스템 기반의 환경을 구축하여 필요한 폴더들이 만들어진 것을 볼 수 있다. 시스템 측면에서는 src폴더가 주요 폴더로 볼 수가 있고, design-system폴더는 그동안 만들었던 시스템 기반으로 tsx파일로 잘 정리가 되었음을 확인할 수 있었다. app폴더의 경우 신규 디자인/서비스의 구현을 요청했을 때 이 폴더에 차근차근 코드가 쌓이게 된다.
폴더는 최종적으로 조금 지저분해보여서, 기존 디자인시스템 json파일들은 design_system폴더(json raw파일이 모인 공간)로 다시금 묶어두었다. 폴더를 재구성하면서 claude.md도 알아서 업데이트 해주는 claude 센스..!
#2. 디자인 시스템 기반 일관성 있는 디자인
여기까지 오는데 생각보다 오랜 시간이 걸렸다.
이제는 지금까지 코드로 생성된 디자인시스템 기반으로 이미지를 생성해보고자 한다.
실제 디자인시스템 상에 있는 UI는 아래와 같다. AI가 기존 디자인시스템을 얼마나 잘 맞추어서 그려줄지가 궁금했다.
아래는 실제 Material Design 3 디자인 시스템 가이드에 올라온 디자인이다.
Claude code가 아래 보여지는 디자인과 같은 UI들을 기존 시스템 코드들을 명확히 참조해서 그려낼 수 있을까?
지금 만들어진 디자인시스템 기반으로 간단한 email앱을 만들어줘. 해당 앱에는 매일의 이메일 내용을 요약해주는 ai기능이 함께 담기면 좋겠어.
claude code에게 간단히 위와 같이 prompt를 남겨보았다.
그리고 claude code가 아래와 같은 이미지를 만들어내는데는 5분도 채 걸리지 않았다.
오..호?
Material Design에 해당하는 컬러, 폰트, 아이콘, 버튼, 카드ui등이 잘 들어간 것을 볼 수 있다.
그런데 문득 이런 생각이 들었다.
내가 만든 디자인시스템을
정확히 참조해서 만든 UI일까?
우선 claude code가 localhost에서 확인할 수 있도록 잘 만들어주었기에, chrome의 개발자도구를 통해 코드를 살짝 확인해보았다.
아래 이미지에서 보면 inbox에 해당하는 아이콘의 svg <path> 데이터가 design-system 폴더 내 email icon과 동일한 <path>데이터를 가지고 있는 것을 확인했다.
이는 AI가 아이콘을 임의로 생성하거나 대충 비슷한 것을 가져온 것이 아니라 내가 만들어둔 디자인시스템의 원본 소스를 그대로 활용했다는 이야기이다.
이는 디자인시스템 가이드를 코드수준에서 엄격하게 지키고 있다는 증거라고 할 수 있겠다.
#3. 배포해서 직접 확인해보기
인터넷 상에 배포해서 링크로 직접 확인해보고 싶어.
어떻게 진행하는 것이 좋을까?
기존에는 해당 코드를 깃허브에 올린 후 Netlify를 통해 import해서 확인해왔었다.
하지만 이번엔 claude code에게 직접 방법을 추천해달라고 요청해보았다.
그리고 Claude code의 가이드에 따라 DesignSystemTest라는 깃허브 레포지토리를 만들고 만들어진 디자인시스템과 email 앱을 업로드 해달라고 부탁해본다.
깃허브에 업로드하고 나니, Vercel에 가입하고 배포하라고 한다.
그대로 가이드를 따라가본다.
그리고 아래처럼 Vercel에 배포된 결과를 확인할 수 있었다.
이 또한 10분 컷!(아래 링크에서 Materia Design 3가이드에 맞춘 email 앱 확인가능)
https://design-system-test-ngssulsah-pentaxzs-projects.vercel.app/email
이번 실험을 통해 확인할 수 있었던 것은 분명하다.
디자인 시스템을 코드로 구조화하는 순간, AI는 단순히 비슷한 UI를 만들어내는 도구가 아니라 정의된 규칙을 그대로 따르는 ‘정확한 생산자’로 동작한다.
실제로 생성된 결과물은 토큰, 컴포넌트, 아이콘까지 디자인 시스템의 원본을 그대로 참조하고 있었고, 이는 가이드를 해석하는 과정 없이 일관성이 유지된다는 점에서 기존 방식과 본질적인 차이를 만든다고 생각한다.
결국 디자인의 일관성은 더 이상 개인의 숙련도나 노력에 의존하는 영역 보다는, 시스템 설계의 문제로 이동하고 있다. 앞으로 AI시대에는 얼마나 정교하게 시스템을 정의하고, 이를 실제 프로덕트 환경에서 확장 가능한 구조로 만들어낼 수 있느냐. 라는 것이 중요한 포인트가 될 것이다.
* 이렇게 claude code를 활용해보는 방법 외에도 다양한 방법들이 있을 수 있으니, 더 효율적인 방법이 무엇이 있을지는 지속적으로 찾아보고 적용해보고자 한다. (며칠 전 Figma에서 Make Kit이라는 기능을 내놓으면서 Figma 내에서도 디자인시스템을 지킨 UI를 뽑아낼 수 있도록 준비하고 있다는 소식을 들었다. 아직은 반쪽짜리로 보이긴 하지만, 더 효율적인 방법이 보이면 다시 포스팅 해보는 것으로. :)
Reference
https://brunch.co.kr/@8a0100de7ca0488/13
https://brunch.co.kr/@8a0100de7ca0488/15
https://help.figma.com/hc/en-us/articles/39241689698839-Get-started-with-Make-kits