엑스플로디 워크 로그 1: 디자이너가 AI로 실제 프로덕트를 만든 과정
1. 무엇을 만들었나
엑스플로디는 디자이너를 위해 만든 큐레이션 사이트입니다.
엑스플로디는 디자이너를 위해 만든 큐레이션 사이트입니다.
시작은 단순한 생각이었습니다. “정말 유용한 디자인 도구를 한곳에 모으면 좋지 않을까?” 하지만 만들기 시작하자 단순한 북마크 목록으로 끝내고 싶지 않았습니다. 디자이너가 새로운 아이디어를 발견하고, 적합한 도구를 고르고, 실제 결과물을 만든 뒤 나중에 다시 참고할 수 있는 자연스러운 흐름을 만들고 싶었습니다.
현재 엑스플로디는 크게 세 영역으로 나뉩니다.
처음 상상했던 것보다 훨씬 큰 형태로 자랐습니다. 작은 툴킷으로 시작했지만, 이제는 리소스와 글, 실제 프로젝트가 서로 연결되는 큐레이션 플랫폼으로 조금씩 확장되고 있습니다.
처음 가장 궁금했던 질문은 이것이었습니다.
“비개발자 디자이너가 AI를 활용해 실제로 작동하는 프로덕트를 만들고 운영할 수 있을까?”
초기 제품 구상을 정리한 뒤 프로젝트의 거의 모든 영역에서 AI와 함께 작업했습니다.
물론 AI가 모든 일을 마법처럼 알아서 해준 것은 아닙니다. 다만 반복 작업을 빠르게 넘기고 탄탄한 구조를 세우는 데에는 훌륭한 가속기였습니다. 제 역할은 “이 방향이 맞는가?”, “실제로 쓸 수 있는가?”, “디자이너 관점에서 이 인터랙션이 자연스러운가?”를 계속 판단하는 제품 드라이버에 가까웠습니다.
가장 먼저 손댄 것은 디자인 토큰이었습니다.
Figma에서 색상이나 타이포그래피 스케일이 바뀔 때마다 코드도 함께 맞춰야 했습니다. 매번 수동으로 처리하는 것은 생각만 해도 번거로운 일이었습니다.
그래서 Figma MCP로 Figma 변수를 직접 읽고, 토큰 JSON으로 저장한 뒤 CSS 변수와 TypeScript 맵을 자동 생성하는 파이프라인을 구성했습니다.
그다음 Card, Tab, HeaderMenu 같은 핵심 UI 컴포넌트를 정리했습니다. Storybook과 Chromatic도 연결해 실제 화면 맥락에서 컴포넌트를 시각적으로 점검할 수 있게 했습니다.
이 과정에서 한 가지가 아주 분명해졌습니다.
Figma의 Auto Layout, Variant, 토큰 이름이 깔끔하게 정리되어 있을수록 AI가 생성한 코드의 품질도 좋아집니다.
디자인 시스템은 사람을 위한 문서에 그치지 않습니다. AI가 코드를 작성할 때 기준으로 삼는 중요한 참조 체계이기도 합니다.
엑스플로디를 만들면서 목표는 “링크를 최대한 많이 모으자”가 아니었습니다. 디자이너가 한눈에 판단할 수 있도록 좋은 도구를 신중하게 선별하는 일이 훨씬 중요했습니다.
새로운 리소스를 볼 때마다 이런 질문을 던졌습니다.
초기에는 글의 톤도 일정하지 않았습니다. 어떤 글은 건조한 기능 명세처럼 읽혔고, 어떤 글은 가벼운 개인 블로그처럼 느껴졌습니다.
그래서 카테고리, 태그, 한 줄 소개와 실용적인 활용 팁의 기준을 계속 다듬었습니다. AI는 초안의 형식을 정리하고 리서치 속도를 높이는 데 큰 도움을 줬지만, 최종 편집 판단은 언제나 사람이 해야 했습니다.
결국 큐레이션의 핵심은 자동화가 아니라 관점입니다. 엑스플로디를 거대한 링크 모음이 아니라, 디자이너가 믿고 편하게 탐색할 수 있는 실용적인 리소스 지도로 만들고 싶었습니다.
리소스 목록만으로는 조금 부족했습니다. 좋은 도구를 소개하는 데서 멈추지 않고, 그 도구를 어떻게 이해하고 실제 결과물과 연결할 수 있는지 보여주고 싶었습니다.
그래서 Insight와 Works로 제품을 확장했습니다.
최종 이미지만 한 장 올리는 공간이 아니라, 무엇을 만들었고 어떤 도구를 사용했는지 기록하는 작은 케이스 스터디 공간으로 설계했습니다.
