UIUX 디자인 하네스 만드는 법

당근마켓 화면과 증권 앱 요구사항 문서를 넣으면 "당근 증권" 화면이 나오는 디자인 하네스를 만들었어요. 화이트보드에 단계를 그리고 클로드 코드와 다듬는 데 한 시간 남짓, 돌리는 데 두 시간 가까이 걸렸고, 방송이 끝날 무렵 펜팟(Penpot)에 관심종목 화면이 그려졌어요.

이 노트를 읽고 나면 할 수 있는 것

1. 맡기고 싶은 작업의 입력과 출력 사이에 어떤 중간 단계가 있는지 노드 그림으로 그려 보기
2. 그 그림을 클로드 코드에 넘겨 빠진 단계·의존관계·단계별 모델을 정하고 서브에이전트로 만들기
3. 결과가 마음에 안 들 때 "고쳐" 대신 어느 단계의 어떤 판단이 틀렸는지 짚어 하네스를 고치기

전체 3시간 37분짜리 다시보기(https://youtu.be/K90vyP1XBXo)에서 설계는 0:33~1:04, 실행은 1:36부터예요.

목차

• AI 디자인이 "그럴싸한" 데서 멈추는 이유 ▶ 0:06:57
• 두 시간 만에 만든 하네스가 낸 결과 ▶ 0:13:08
• 클로드 코드와 펜팟을 MCP로 잇기 ▶ 0:27:15
• 입력과 출력 사이부터 그려요 ▶ 0:33:20
• 그림을 넘기고 시니어 디자이너처럼 검토시키기 ▶ 0:50:49
• 돌리기 전에 넣은 장치들 ▶ 1:07:07
• 추출은 한 번, 나머지는 웨이브로 ▶ 1:36:30
• 디자인이 구리면 어느 단계가 문제인지부터 ▶ 1:58:43
• 펜팟에 그려지기까지, 그리고 무거운 하네스 ▶ 2:24:23
• Q&A ▶ 1:02:55
• 오늘 해볼 것 ▶ 3:36:15

AI 디자인이 "그럴싸한" 데서 멈추는 이유 ▶ 0:06:57

AI로 만든 디자인은 AI 치고는 잘했어요. 그런데 이 수준으로 디자인하는 디자이너가 취업하기는 어렵죠. ▶ 0:06:27 그래서 현업 디자이너들은 여전히 피그마를 손으로 만들어요.

하네스는 AI가 일을 단계별로 해내도록 짜 둔 작업 프로세스예요.

UI·UX 디자인은 거의 다 룰베이스예요. 룰을 잘 학습시켜 놓고 AI 에이전트에 MCP를 연동하는 걸로 충분해요. ▶ 0:07:15 MCP(Model Context Protocol)는 AI 에이전트가 외부 도구를 호출하게 해 주는 연결 규격이에요.

제가 컨설팅한 회사들에서는 이 방식으로 피그마를 고치는 일을 디자이너가 하지 않아도 되게 만들었어요. 사람은 의사결정 회의를 하고, 에이전트가 만든 결과에 피드백만 해요. ▶ 0:07:51 디자인 컨벤션은 100% 지키고, 시안을 여러 개 동시에 뽑아 고르고, 코드와 디자인이 어긋나는 것도 알아서 잡아요.

문제는 제가 디자인을 잘 못한다는 거예요. 개발 이해도가 높으니 바이브 코딩 프롬프트는 뾰족하게 쓰는데, 디자인 프롬프트는 그렇게 못 써요. 개발용 하네스는 20시간이면 만드는데, 디자인용은 40시간 넘게 걸렸어요. 기존 화면과 비슷한 건 잘 만들지만 새로운 UX가 필요하면 크게 흔들렸고요. ▶ 0:10:06

그래서 디자이너들이 어떤 사고 흐름으로 일하는지 컨닝하고 싶어서, 디자이너와 개발자가 팀을 짜서 디자인 하네스를 만드는 행사 '하네스톤'을 열었어요.