PART 01) AI로 디자인한 방법 작업 환경 : VS Code + Claude + Figma 저는 개발자분들이 쓰는 코드 에디터인 VS Code에 AI 툴 Claude를 연결해, 그 안에서 디자인과 퍼블리싱을 진행했어요. 디자인 시스템과 화면을 코드(md·html·tsx)로 다루면서, 제가 코드로 기준과 방향을 잡고, 실제 화면을 디자인하고 구현하는 데에는 Claude를 사용하는 방식이에요. 그리고 시안을 팀원과 공유하거나 세밀한 마무리가 필요할 때는 Figma를 함께 사용했어요.
AI로 디자인 시스템 만들기
지도 서비스를 일관성 있게 디자인하려면, 그 토대가 될 디자인 시스템이 먼저 필요했어요. 그런데 기존 보플의 디자인 시스템은 컬러·타이포그래피·간격 같은 규칙이 명확하게 문서화돼 있지 않았어요. 그래서 본격적인 디자인에 들어가기 전에, 시스템부터 명확하게 정리할 필요가 있었어요.
기존에 정리되어 있던 보플의 디자인 시스템 이를 위해, 클로드에게 기존 보플 디자인 시스템을 바탕으로 아래 항목들을 구체적으로 정리해달라고 요청했어요.
Color — 컬러 팔레트 및 시맨틱 컬러 체계Typography — 폰트 크기, 굵기, 줄간격 등Spacing — 여백과 간격 규칙Shadow — 그림자 단계Gap — 컴포넌트 간 간격Step 1. 클로드와 소통하며 디자인 시스템 초안 만들기
클로드와 대화를 주고받으며 토큰 항목을 하나씩 정의하고 검토했어요. 컬러는 몇 단계로 나눌지, 각 단계를 어디에 쓸지 같은 것들을 정하며 초안을 만들어갔어요. 이때 한 가지는 분명히 정해두고 작업했어요. AI가 제안하는 걸 그대로 받지는 않는다는 거였어요. 풀 스케일을 다 펼칠 수도 있었지만, 쓰임이 분명한 색부터 토큰으로 정리하고 나머지는 확장 여지로 남겨뒀어요.
AI를 활용해서 Atomic Color와 Semantic Color 위계 설정하기 Step 2. 디자인 시스템을 md 파일로 만들고, VS code로 옮기기
완성한 디자인 시스템은 클로드에게 design-system_final.md 파일로 정리해 달라고 한 뒤, VS Code에 저장했어요. 앞으로 퍼블리싱이나 프론트 구현을 할 때, 정해둔 규칙을 벗어나면 안 되기 때문에, 컬러·타이포그래피·간격 같은 토큰 규칙을 한곳에 명확히 문서화해둘 필요가 있었어요. 이 파일은 이후 모든 작업의 기준점으로 삼았어요.
디자인 시스템을 md 파일로 저장 Step 3. 피그마에 토큰화 및 문서화
정리된 디자인 시스템은 기획자분들, 다른 디자이너분들과 협업하려면 시각적으로 정리된 자료가 필요했어요. 그래서 클로드와 Figma MCP를 활용해 피그마에 토큰을 적용하고 문서화를 진행했어요.
Figma MCP로 피그마 문서 작성 Figma MCP로 디자인 시스템을 토큰화하기
피그마 없이 AI로 디자인하기
디자인 시스템을 만든 뒤에는 본격적으로 화면을 디자인하기 시작했어요. 이때 피그마 사용은 최소한으로 줄이고, 가능한 한 AI만으로 디자인해보기로 했어요. 그런데 막상 아무것도 없는 상태에서 초기 디자인을 시작하려니 막막한 지점이 생겼어요.
피그마 없이 디자인하는 과정은 정해진 길이 없었기 때문에, 여러 방법을 시도하고 다듬으며 저만의 흐름을 만들어갔어요. 그중 실제로 도움이 됐던 네 가지 방법을 정리해봤어요.
1) 기획서 md 하나로 전체 화면 초안 만들기 변환한 기획서 md를 바탕으로 클로드에게 화면 디자인을 1차로 진행해달라고 요청했어요. 그러자 클로드가 디자인은 물론, 각 단계에 필요한 프로토타입까지 구현해줬어요. 다만 디자인 시스템을 md로 저장해뒀는데도, 시스템에 없는 컬러나 아이콘 스타일이 섞여 들어오는 문제가 있었어요. 그래서 '디자인 시스템 md만 사용하라'는 메모리 md를 따로 두었더니 톤앤매너를 벗어나는 현상이 눈에 띄게 줄어듦을 확인할 수 있었어요.
md 내용만 사용해 1차로 시각화한 디자인 초안 2) 여러 시안을 한눈에 검토할 수 있는 'HTML' 적극 활용하기 피그마 없이 디자인해야 했기에, 먼저 클로드에게 초기 시안을 여러 방향으로 뽑아달라고 했어요. 몇 번의 시행착오 끝에 찾은 가장 잘 맞는 방식은 미리보기를 HTML로 만드는 것이었어요. 로컬 서버를 그대로 유지하면서도 여러 시안을 빠르게 펼쳐 비교할 수 있었거든요. 한 번에 여러 시안을 검토하고 그중 하나를 골라 업데이트하는 흐름으로 일하다 보니, 작업 속도도 자연스럽게 빨라졌어요.
로컬 서버가 실제 프론트 구현과 맞닿아 있어 개발자분과 소통하는 환경이라면, HTML은 그 전 단계에서 디자이너가 여러 시안을 가볍게 띄워놓고 테스트해보는 준비 환경에 가까워요. 다만 HTML은 디자인 정확도가 떨어져 정렬이나 규격이 어긋나는 일이 많다는 한계가 있는데, 그래도 최소한의 미리보기 역할로는 충분히 유용했어요.
로컬 서버와 HTML 환경 여러 디자인 시안을 HTML로 미리보기 3) 코드를 Figma 환경에 구현하기 세 번째는 개발 환경에서 만든 화면(코드)을 다시 Figma로 불러오는 방법이에요. HTML로 시안을 만들고 로컬 서버에서 확인하다 보니, 아쉬운 지점이 있었어요. 1px 정도 틀어진 부분이나 정교하고 세밀한 마무리까지 AI로 잡으려면 토큰이 많이 소모돼서 효율이 떨어졌어요. 그리고 작업하다 보면 차라리 디자이너가 손으로 직접 하는 편이 더 빠른 지점도 있었어요.
이런 경우에는 VS Code에 구현한 디자인을 다시 Figma로 불러올 필요가 있었어요. 처음에는 Figma MCP를 사용했는데, Figma가 기본으로 제공하는 폰트가 아니면 폰트가 깨지거나 누락되는 문제가 생겼어요. 다시 말해, 디자이너들이 많이 쓰는 Pretendard나 SUIT는 Figma 기본 폰트가 아니라서 호환이 어려웠어요. 게다가 Figma MCP의 기술이 아직 완전하지 않다 보니, 코드를 피그마로 옮길 때 정렬이 틀어지는 이슈도 있었어요.
코드로 만든 디자인을 피그마로 옮긴 것
그래서 주변 개발자분들의 도움을 받아 여러 시행착오를 거친 끝에, 코드를 피그마 디자인 환경으로 불러올 때 아래 지점들을 고려하면 호환 정확도가 높아진다는 걸 확인할 수 있었어요.
4) 디자인된 UI 화면은 TSX 파일로 소통하기 초반에는 AI와 소통할 때 항상 화면을 이미지로 캡처한 뒤 프롬프트를 입력했어요. 그런데 캡처한 화면을 함께 줬는데도, AI가 제가 말하지 않은 컴포넌트까지 건드려 수정하는 경우가 있었어요. 이미지만으로는 제가 어느 부분을 말하는지 AI가 정확히 알기 어려웠던 거예요.
그래서 TSX 파일을 따로 모아 정리한 뒤, 소통할 때 정확한 컴포넌트 명칭을 함께 제시했어요. TSX 파일은 화면을 구성하는 UI 컴포넌트를 코드로 담아둔 파일이에요. 버튼, 카드, 입력창처럼 화면을 이루는 각 조각이 저마다 이름을 가진 하나의 컴포넌트로 정리되어 있어요. 덕분에 이미지로 막연하게 가리키는 대신, "이 CategoryTabs.tsx
이렇게 네 가지 방법을 거치면서, AI와의 소통 오류를 줄이고 디자인 작업의 속도를 끌어올릴 수 있었어요.
