[AX] AI로 디자인하는 나만의 방법
1. 개발자가 디자인까지 하게 된 이유
디자이너 없이 제품 만들기
회사나 규모있는 공모전 등이 아니면 디자이너가 없는 경우가 대부분이다. 이 때는 보통 다음 방법들을 사용한다.
- 내가 Figma로 직접 그린다 → 시간이 녹는다. 퀄리티도 안 나온다.
- 템플릿·컴포넌트 라이브러리를 산다 → 그럴듯한데 어느 제품에 갖다 놔도 비슷하다.
- AI한테 그냥 시킨다 → 대부분 '밤티'로 나오며, 고치다가 오히려 시간이 더 걸린다.
따라서 나는 "AI를 잘 쓰는 방법"을 선택하고 여러가지 방법을 써보았다. AI를 통해 디자인을 잘 하기 위해서는, 결국 시중에 나와있는 AI를 적절히 활용하며, 문서를 잘 쓰는 것이 방법이였다.
전체 워크플로우
① PRD 작성
② ManyFast → 기능 명세서 · User Flow · 와이어프레임 그리기
③ Figma에 와이어프레임 옮기기
④ User Flow 다시 그리기
⑤ 레퍼런스 수집
⑥ DESIGN MD 만들기 (Khroma로 색 확정)
⑦ Stitch에 레퍼런스 + DESIGN MD 먹이기 → 수정 반복
⑧ Midjourney로 asset 뽑기
⑨ 실제 개발 시 Claude Artifact로 후보 뽑고 고르면서 진행 (인터랙션 결정)단계가 많아 보이는데, 실제로 손이 많이 가는 건 ①, ⑥, ⑦이다. 나머지는 AI가 뽑은 걸 검수하고 고르는 일이다.
내 원칙 두 가지
나는 디자인할 때 다음 아래 2가지 원칙을 중요시한다.
1) 랜딩페이지에는 과한 스크롤 기반 애니메이션은 넣지 않는다.
최근 인스타그램 이나 트렌드를 보면 멋있는 스크롤 기반 랜딩페이지 만들기가 유행하고 퀄리티도 매우 좋다. 멋있는 건 사실이다.
하지만, 디자인에서 중요한 것은 '멋있는 것'이 아닌, '사용자가 보기 좋은 것'이라고 생각한다.
따라서 나는 성능을 최적화하며 최소한의 애니메이션 및 인터랙션으로 랜딩페이지 만드는 것을 매우 선호한다.
2) DESIGN.md + 레퍼런스가 전부다.
DESIGN.md를 통해 AI로 디자인하는 것은 예전부터 많이 알려져 있다.
하지만, 단순히 여기에 디자인 툴(Figma, Stitch 맟 기타 서비스)를 사용하면 이 또한 AI 냄새가 물씬 나는 '밤티' 디자인이 나온다.
따라서, 이미 위대한 디자이너분들이 만들고 사용자에게 반응이 좋은 서비스들의 디자인을 '레퍼런스'로 사용하여 입증된 디자인에 내 취향을 섞는 것이 나의 결론이다.
2. 디자인 뼈대 만들기
ManyFast
많은 디자인 툴을 찾아보다가, 개인적으로 가장 쓰기 좋았던 서비스다.
PRD를 넣으면 정제된 PRD -> 기능 명세서 -> User Flow -> Wireframe 순으로 차근차근 만들 수 있으며, 이 떄 AI의 도움을 받으면서 쉽게 제작할 수 있다.
특히, 프로토타이핑이 된 채로 Figma에 '내보내기'를 할 수 있어 개발 비용이 현저히 줄어들게 되며, 최근에는 업데이트가 이루어져 팀원을 초대해 같이 작업할 수 있다.
계정 한 개당 무료로 1번 사용할 수 있으므로, 잘 이용해보면 좋다.
PRD 작성
- 문제 — 누가 어떤 상황에서 뭘 못 해서 불편한가
- 타깃 — 핵심 사용자 한 문장
- 핵심 기능 — 이번 버전에 들어갈 것 / 안 들어갈 것
- 기능/비기능 - 중요한 기능과 그렇지 않은 기능 분류
- 성공 기준 — 뭐가 되면 성공인가
여기서 공을 들이는 이유는 하나다. 이 문서가 이후 8단계 전부의 입력값이기 때문이다..
PRD가 흐리면 ManyFast가 뽑는 명세서도 흐리고, 와이어프레임도 흐리고, 결국 디자인도 흐리다. 쓰레기를 넣으면 쓰레기가 나온다.
Figma에 User Flow 옮기고 다시 그리기
User Flow 내보내기 기능이 있지만, 내보내면 퀄리티가 그렇게 좋지 않다.
아무리 잘 뽑혔다 해도 이를 시각화해두는 것이 서비스 제작에 매우 중요하다. 팀원이 있으면 더욱 그렇다.
따라서, 나는 'Figjam'으로 간편하게 User Flow를 나 또는 팀원이 보기 편한 방식으로 제작한다.
아래처럼 고쳐놓으면 읽기 편해진다!
Figma에 옮긴 Wireframe 수정
ManyFast 내에서 AI로 수정을 하는 것에는 한계가 있으므로, Figma에서 원하는 부분만 수정한다.
만약 팀원이 있으면, 팀원에게 '코멘트'를 요청하거나 같이 회의하면서 와이어프레임을 고치고, 수정이 많이 필요하거나 방법을 모르는 부분은 Agent(Claude Code, Codex)를 연결하여 수정하면 간단하게 원하는 와이어프레임을 제작할 수 있다.
이 때 와이어프레임은 흑백으로, 컴포넌트 안 쓰고 사각형과 텍스트로만 빠르게 그린다. 여기서 예쁘게 그리면 시간 낭비다. 예쁜 건 ⑦번이 해준다.
예시는 아래와 같다.
3. 디자인 준비 — 레퍼런스와 DESIGN MD
레퍼런스 수집하는 법
레퍼런스 없이 생성하면 AI의 취향대로 나오고, 결국 'AI 냄새'가 나게 된다. (ex. 보라색 그라데이션, 유리 카드, 흔한 이모티콘)
수집 기준은 "예쁜 앱"이 아니라 "내 앱과 같은 문제를 푸는 화면"이다. 피드 화면을 만들 거면 잘 만든 피드를, 온보딩을 만들 거면 잘 만든 온보딩을 모은다.
주로 내가 레퍼런스를 수집하는 방법은 다음과 같다.
가장 좋아하는 레퍼런스 사이트이며, 무료로 서비스 내 대부분의 UI를 수집할 수 있다.
단 서비스가 그렇게 많진 않다.
- 타 레퍼런스 사이트
- 직접 수집(+AI 활용)
실제 핸드폰으로 앱을 깔아서 캡쳐 후 피그마에 넣는다.
하지만 품이 많이 들어, 요즘은 'Claude Skill'을 만들어서 자동으로 앱을 실행시켜 캡처 후 수집하고 있다.
실제로 현재 하고있는 프로젝트를 위해 아래와 같이 Figma에 많은 레퍼런스를 수집해두었다.
DESIGN.md 만들기
DESIGN.md는 "이 제품의 디자인 규칙"을 적은 마크다운 문서다.
Google Stitch에서 처음 도입한 개념인데, 최근에는 AI로 디자인할 때 거의 표준으로 쓰이고 있다.
ref) Google Stitch에서 처음 도입한 Design.md 관련 thread 글
이 문서 하나가 있으면 어느 툴을 쓰든(Stitch, Claude 등) 같은 규칙을 먹일 수 있다. 툴이 바뀌어도 디자인이 안 바뀐다.
Khroma로 색 고르기
DESIGN.md에서 제일 오래 걸리는 게 컬러다. 나는 Khroma로 정한다.
Khroma는 내가 색을 고르면 그 취향을 학습해서 어울리는 조합을 무한 생성해주는 AI 컬러 툴이다. 쓰는 방법은 단순하다.
- 처음에 마음에 드는 색을 50개 정도 고른다. 여기서 대충 고르면 이후 추천이 전부 어긋난다.
- 학습이 끝나면 조합(듀오·팔레트)이 쏟아진다. 내 무드에 맞는 조합이 나올 때마다 수집한다.
- 수집한 색들과 레퍼런스를 활용하여
DESIGN.md를 만든다.
색 이론을 몰라도 "내 눈에 좋은 조합"을 계속 보다 보면 톤이 수렴한다. 감으로 hex를 찍던 때보다 팔레트 정하는 시간이 확 줄었고, 무엇보다 조합으로 골랐기 때문에 색끼리 싸우지 않는다.
예시로 나온 결과는 아래와 같다.
4. 디자인 실행
Stitch에 레퍼런스 + DESIGN MD 먹이기
이제 생성이다. Stitch는 구글의 AI UI 디자인 툴이다. 프롬프트를 넣으면 Gemini가 모바일·웹 화면을 생성해주고, Pro 요금제가 있다면 거의 무제한으로 쓸 수 있다.
와이어프레임 + 레퍼런스 + DESIGN.md를 넣고 원하는 사항을 입력하여 UI를 만들면 되는데, 처음에는 그렇게 안 이쁜 UI가 나올 가능성이 크다.
한 방에 나올 거라고 기대하면 안 된다. 첫 결과물은 그냥 초안이다. 여기에 여러 레퍼런스를 참고해서 넣으며 원하는 취향대로 디자인을 할 수 있고, 이미지도 넣으면서 퀄리티 높은 UI를 만들 수 있다.
예시는 아래와 같다.
이렇게 뽑고, 'Figma로 변환'을 하면 단순 이미지가 아닌 컴포넌트, 구조 등을 나눈 정말 디자이너가 만들어준 Figma 파일이 나오게 된다.
Midjourney로 asset 뽑기
UI에 들어갈 이미지, 아이콘 등을 Midjourney로 뽑을 수 있다.
만들어진 디자인 틀이 허전하거나 이미지가 부실할 때, Midjourney로 그에 맞는 이미지를 만들고 asset으로써 사용하면 디자인 퀄리티가 높아진다.
이미지 예시처럼 프롬프트를 잘 입력하고 여러 번 수정하다보면 원하는 이미지가 나온다.
Claude Artifact로 후보 뽑고 고르기
이걸 사용하는 이유는 2가지다.
1) 실물로 비교해야 고를 수 있다. Artifact는 실제 동작하는 HTML로 나온다. 정적 이미지가 아니라 브라우저에서 눌러보고 스크롤해보면서 고르면 판단이 다르다. 이미지로 예뻤던 후보가 만져보면 답답한 경우가 꽤 있다.
2) 내 눈을 못 믿기 때문이다. 디자이너가 아닌 내가 한 방향만 보고 "이게 맞다"고 확신하는 건 위험하다. 후보를 나란히 놓고 고르는 쪽이 항상 결과가 나았다.
여기까지 오면 디자인 지식이 없는 내가 최대한 나의 취향을 반영한 디자인을 구현할 수 있다.
5. 내가 만들어본 것들
- 랜딩페이지
https://ourcinema-landing.netlify.app/
- DRT 앱 공공 디자인
- 현재 만들고 있는 앱 디자인
6. 참고 자료
ManyFast
Stitch
Khroma
Midjourney
Claude Artifact Docs
https://code.claude.com/docs/ko/artifacts
레퍼런스 사이트