AI로 디자인하라는데, 대체 뭘로?
회사에서 AI로 디자인하라는 요구는 나왔다.
그런데 정작 무엇을 어떻게 해야 하는지에 대한 설명은 없다.
돌아온 것은 대략적인 방향뿐이었다. Figma 대신 Design.md 같은 문서를 만들고,
AI를 이용해 HTML 화면을 생성하면 된다는 이야기였다.
낯설다. - 그리고 HTML이라니…… 가우뚱했다.
Design.md라는 건 대체 어떻게 만들어야 하는지, AI에는 어떻게 요청해야 하는지 알 수 없었다.
만들어진 HTML을 이후에 어떻게 수정하고 관리해야 하는지도 설명되지 않았다.
그래서 Design.md가 뭔데요?
검색해보니 Google의 Stitch와 함께 소개되는 디자인 규칙 파일이라고 했다.
‘그래, 구글에서 AI가 디자인을 이해하기 위해 필요한 뭔가를 만든 거구나.’
처음에는 AI 디자인을 위해 꼭 필요한 특별한 파일이나 새로운 작업 방식이 따로 존재하는 줄 알았다.
여기 있는 사이트를 참고해보세요
참고하라며 전달받은 사이트도 있었다.
여러 웹사이트의 디자인 정보를 Design.md 형태로 정리해놓은 곳이었다.
그중 쇼핑몰 사례를 살펴보고, 기존 문서를 가져와 우리 프로젝트에 맞게 수정하면 빠를 것이라고 했다.
물론 다른 쇼핑몰의 디자인을 그대로 가져오라는 뜻은 아니었다. 문서의 형식과 내용을 참고해 우리 프로젝트에 맞는 Design.md를 만들어보라는 취지였을 것이다.
문서를 열어보고 든 생각은 단순했다.
‘이거 CSS 정리해놓은 것 아닌가?’
왜 굳이 새로 만든 건지, 그냥 CSS를 쓰면 되는 것은 아닌지부터 궁금했다.
디자인보다 먼저 만든 것
문서의 역할은 대충 알겠는데, Design.md 원문은 디자이너가 읽기에 편한 형식이 아니었다.
제목과 목록, 여러 기호가 섞여 있었고 디자인 규칙의 구조와 계층도 한눈에 들어오지 않았다.
게다가 나 혼자 이해하고 끝낼 문서도 아니었다. 다른 디자이너들도 내용을 확인하고, 우리 프로젝트에 맞게 수정하며 함께 사용해야 했다.
어떤 디자인 규칙이 들어 있는지 한눈에 확인할 방법이 필요했다.
그래서 Claude Code의 도움을 받아 Design.md를 디자인 가이드처럼 보여주는 도구를 만들었다.
http://aperire.net/md-view.html
AI로 디자인하라는 요구를 받고 가장 먼저 만든 것은 디자인 결과물이 아니었다.
디자이너들이 문서를 함께 보기 위한 도구였다.
그리고 한참 뒤, Codex가 작업 폴더 안에 여러 개의 .md 파일을 만드는 것을 보다가 문득 궁금해졌다.
‘그런데 md가 뭐지?’
예전부터 프로그램을 내려받으면 들어 있던 README.md. 별생각 없이 보아왔던 바로 그 문서 형식이었다.
AI 디자인만을 위한 특별한 파일인 줄 알았는데, 알고 보니 텍스트를 일정한 규칙으로 정리한 문서였다.
하지만 더 현실적인 질문은 여전히 남아 있었다.
이 문서와 HTML만으로 Figma에서 하던 수정과 협업을 대신할 수 있을까?