7월 17일 금요일
7월 17일 금요일
7월 17일 금요일
7월 17일 금요일
엑스플로디는 디자이너를 위한 큐레이션 사이트입니다.
처음에는 디자이너에게 유용한 도구를 한곳에 모아보자는 단순한 아이디어에서 시작했습니다. 그런데 만들수록 단순한 링크 모음보다는, 디자이너가 아이디어를 찾고, 도구를 고르고, 무언가를 만들고, 나중에 다시 참고할 수 있는 흐름을 만들고 싶어졌습니다.
지금 엑스플로디는 크게 세 영역으로 구성되어 있습니다.
처음 예상했던 것보다 훨씬 커졌습니다. 작은 툴킷으로 시작했지만, 지금은 리소스와 글, 작업물이 서로 연결되는 큐레이션 플랫폼에 가까워지고 있습니다.
처음 궁금했던 질문은 이것이었습니다.
비개발자도 AI로 실제 제품을 만들고 운영할 수 있을까?
그래서 초기 기획 이후 프로젝트의 여러 부분을 AI와 함께 진행했습니다.
물론 AI가 모든 것을 혼자 해준 것은 아닙니다.
AI는 반복 작업을 빠르게 처리하고 구조를 잡는 데 큰 도움이 됐습니다. 제 역할은 방향이 맞는지, 실제로 쓸 수 있는 결과인지, 디자이너 관점에서 경험이 자연스러운지 계속 판단하는 쪽에 가까웠습니다.
가장 먼저 작업한 것은 디자인 토큰이었습니다.
Figma에서 색상이나 타입 스케일이 바뀌면 코드도 함께 바뀌어야 했습니다. 이걸 매번 손으로 맞추는 건 너무 번거로웠습니다.
그래서 Figma MCP를 연결해 Figma 변수를 읽고, 토큰 JSON으로 저장한 뒤, CSS 변수와 TypeScript 맵을 생성하는 구조를 만들었습니다.
그다음 Card, Tab, HeaderMenu 같은 UI 컴포넌트를 정리했습니다. Storybook과 Chromatic도 연결해서 컴포넌트가 실제 화면에서 어떻게 보이는지 확인할 수 있게 했습니다.
여기서 한 가지가 분명해졌습니다.
Figma의 Auto Layout, variants, 토큰 이름이 잘 정리되어 있을수록 AI가 만든 결과물도 훨씬 좋아집니다.
디자인 시스템은 사람을 위한 문서일 뿐 아니라, AI가 작업할 때 참고하는 중요한 기준이기도 했습니다.
엑스플로디에서 가장 중요했던 것은 많이 모으는 일이 아니었습니다.
디자이너가 빠르게 판단할 수 있도록 좋은 도구를 정리하는 것이 더 중요했습니다.
그래서 리소스를 볼 때마다 이런 질문을 계속했습니다.
처음에는 콘텐츠 톤이 들쭉날쭉했습니다. 어떤 항목은 기능 설명처럼 보였고, 어떤 항목은 개인적인 감상에 가까웠습니다.
그래서 카테고리, 태그, 한 줄 설명, 실무 팁의 기준을 계속 다듬었습니다. AI는 반복 정리와 초안 검토를 도와줬지만, 최종 판단은 결국 사람이 해야 했습니다.
결국 큐레이션의 핵심은 자동화가 아니라 관점이었습니다.
제가 만들고 싶었던 엑스플로디는 링크가 많은 사이트가 아니라, 디자이너가 믿고 탐색할 수 있는 실용적인 리소스 지도였습니다.
리소스만으로는 조금 부족하게 느껴졌습니다.
좋은 도구를 소개하는 데서 멈추고 싶지 않았습니다. 그 도구를 어떻게 이해하고 실제 작업과 연결할 수 있는지도 보여주고 싶었습니다.
그래서 Insight와 Works를 확장했습니다.
Insight는 디자인, 제품, AI, 브랜딩 관련 아티클과 책을 디자이너 관점에서 정리하는 공간입니다. 아티클은 빠르게 훑을 수 있는 큐레이션 노트처럼, 책은 핵심을 잡는 데 도움이 되는 독서 노트처럼 정리하고 있습니다.
Works는 사용자가 만든 프로젝트를 올릴 수 있는 공간입니다. 커버 이미지, 갤러리 이미지, 본문, 사용한 리소스, 태그, 최종 결과 링크를 함께 등록할 수 있습니다.
단순히 최종 이미지를 올리는 곳이 아니라, 무엇을 만들었고 어떤 리소스를 사용했는지 기록하는 작은 케이스 스터디 공간처럼 느껴지게 만들고 싶었습니다.
가장 많이 고민한 부분은 연결 구조였습니다.
사용자가 Works에 사용한 리소스를 입력하면, 엑스플로디는 그것을 카탈로그에 등록된 리소스와 연결합니다. 그러면 리소스 상세 페이지에서 그 도구로 만든 Works를 볼 수 있습니다. Insight 콘텐츠도 관련 리소스와 연결됩니다.
제가 만들고 싶었던 흐름은 이런 모습이었습니다.
처음에는 이것들이 각각 분리된 페이지였습니다.
이제는 조금씩 하나의 흐름으로 이어지고 있습니다.
제품처럼 운영하려면 보이지 않는 부분도 꽤 중요했습니다.
콘텐츠가 바뀌었을 때 필요한 페이지만 갱신되도록 캐시 구조를 정리했고, 공개/링크 공개/비공개 Works도 권한에 맞게 다르게 보이도록 나눴습니다.
업로드 경험도 계속 다듬었습니다. 작품 등록 모달, 단계형 입력, 본문 블록 에디터, 이미지 업로드, 리소스 자동완성 같은 것들이요.
하나하나는 작은 기능처럼 보이지만, 실제로 뭔가를 올리고 수정해보면 이런 디테일이 꽤 크게 느껴지더라고요.
당연히 삽질도 많았습니다.
AI 도구를 너무 자주 바꾸면서 컨텍스트가 끊겼고, Airtable에서 Supabase로 옮기면서 다시 짠 것도 많았습니다.
로컬에서는 되는데 Vercel에서 깨지는 문제도 있었고, Storybook에서 런타임 에러가 난 적도 있었습니다.
특히 환경변수나 Supabase 키처럼 보안이 걸린 부분은 AI 결과물을 그대로 믿으면 안 되겠다고 느꼈습니다.
AI는 빠르게 만들지만, 보안, 권한, 실패 상태, 접근성, 시각적 완성도는 사람이 끝까지 봐야 했습니다.
이번 프로젝트를 하면서 제일 크게 느낀 건, AI 덕분에 디자이너가 본인의 생각을 처음부터 끝까지 직접 구현해 낼 수 있게 되었다는 점입니다.
예전에는 시안까지 만들고 나면, 그다음부터는 개발팀과 핸드오프 중심으로 일하는 경우가 많았습니다. 그런데 이번에는 시안에서 멈추지 않고 실제 서비스 구조, 데이터 흐름, 업로드 경험, 배포 이후 운영까지 직접 만져볼 수 있었습니다.
직접 만들어보니 화면만 볼 때는 잘 안 보이던 것들이 보이기 시작했고, 서비스를 보는 관점도 조금 달라졌습니다.
AI가 모든 걸 대신해준 건 아니지만, 시안에서 실제 결과물까지 가는 거리를 확실히 줄여줬습니다. 덕분에 디자이너로서 서비스 전반을 더 입체적으로 이해할 수 있었습니다.
이 사이드 프로젝트 덕분에 디자인에 더 재미를 느끼게 됐고, 더 다양한 걸 시도해 보고 싶다는 생각을 했습니다.
더욱 좋아지는 엑스플로디를 기대해 주세요.
