사이드 프로젝트 화면을 Claude나 Codex에게 맡기면 기능은 금방 돌아갑니다. 그런데 어딘가 AI가 만든 티가 나고, "좀 더 자연스럽게"라고 몇 번을 다시 말해도 잘 안 고쳐지는 순간이 있죠. 10월 30일 깃허브 주간 트렌딩 4·10·11위가 모두 코딩 에이전트용 디자인 스킬이었을 만큼, 지금 많은 사람이 같은 고민을 하고 있어요.
10월 26일 Y Combinator 유튜브에 공개된 Design Review 대담에서, Shopify에서 프로덕트 디자인 스튜디오를 이끄는 디자인 디렉터 마빈 슈바이볼트가 이 고민에 대한 답을 보여 줬어요. 그는 요즘 Figma를 아이디어를 끄적이는 낙서장으로 쓰고, Codex와 Claude Code로 폰이나 컴퓨터에서 바로 써 볼 데모를 만든다고 합니다. 그러면서도 AI는 코드는 써도 무엇이 좋아 보이고 나빠 보이는지는 모른다고 말했죠. 조쉬의 뉴스레터에 정리한 대담 중, 혼자 만드는 사람이 지금 쓰는 에이전트로 따라 해 볼 만한 대목만 추렸습니다.
그가 주말에 만든 화면 하나는 직접 찍은 잔디 영상 여섯 개를 2×3 격자로 보여 주고, 하나를 열었다가 아래로 끌어내리면 닫히는 구조였어요. Codex가 만들어 주긴 했지만, 한 장을 끌어내리면 제자리로 완전히 돌아갈 때까지 다른 영상을 누를 수 없었습니다. 움직이는 도중에도 다음 입력을 받아 주는, 끊을 수 있는 동작이 아니었던 거죠.
그는 Figma로 가서 아주 단순한 상자들을 그렸어요. 빨간 상자를 누르면 올라오고, 쓸어서 치우는 도중 파란 상자를 누르면 파랑이 올라오는 단계를 그림으로 보여 준 겁니다. Codex는 그 그림을 그가 해석한 것과 비슷하게 알아들었다고 해요. 그의 말로는 글이나 말로는 설명하지 못했지만, 그릴 수는 있었다고요.
Codex에 동작을 설명하려고 Figma에 그린 상자 그림. 빨간 상자가 올라오는 도중 파란 상자가, 그다음 초록 상자가 올라오는 단계를 그렸다. 이미지 출처 : YouTube Y Combinator, 20:47·20:56
잔디 영상을 웹에서 도는 셰이더로 옮길 때는 처음부터 꼼꼼하게 시켰어요. 픽셀 단위로 정확하게, 색은 같은 헥스 코드로 하라고요. Codex는 "문제없어요" 하더니 전혀 딴판인 결과를 냈습니다.
그는 그 결과를 캡처해 원본 영상과 함께 ChatGPT에 주고 "저쪽 에이전트는 왜 내가 하려는 걸 못 알아듣지?"라고 물었어요. 빛이 어디서 들어오고 어떤 그림자인지 설명해 줘야 하고, 이미지를 여섯 부분쯤으로 나눠 하나씩 만든 뒤 합쳐 보라는 답이 왔다고 해요. 모델이 바닥이 평평한 층이 아니라 작은 언덕이라는 걸 모르자, 이번엔 ChatGPT에게 지형도를 그리게 해 다시 넣었고요.
(편집 도식) 잔디 셰이더를 진단한 순서. 이미지 출처 : 원인터뷰를 바탕으로 편집부 재구성
Codex에 풀잎 변형이 몇 가지냐고 묻자, 약 21만 7천 개인데 서로 0.6, 0.7, 0.8 정도밖에 차이가 안 난다는 답이 왔다고 해요. 그는 이걸 화면과 채팅을 오가며 주고받고 싶지 않아 직접 볼 수 있는 조절 장치를 붙였습니다. 조시 퍼킷이 만든 무료 오픈소스 도구 DialKit으로 풀잎 길이와 지형 깊이를 슬라이더로 꺼내 놓은 거예요.
구조를 드러내자 실수도 보였습니다. 처음 들어간 지형도가 완전히 틀리고 비뚤어져 있었고, 다섯 프롬프트 전에 무언가 잘못 해석됐는데 그걸 모르니 어차피 원하는 결과에 닿을 수 없었던 거죠. 주말에 따라 만든 캐러셀도 비슷했어요. 프롬프트를 91번 썼는데, 옆에 값 패널을 붙이고 나서야 그 속을 들여다볼 수 있었다고 해요. 빨리 끌어내릴수록 튕기는 힘이 세지는 '풀 부스트' 같은 값도 거기서 맞춥니다. 어색하면 자기는 알지만, 채팅으로 주고받아서는 통하지 않는다는 게 그의 말이에요.
조시 퍼킷이 만든 무료 오픈소스 도구 DialKit의 공식 사이트. 코딩 에이전트에 붙여 넣을 프롬프트 예시를 함께 싣는다. 이미지 출처 : DialKit
대담 후반에는 시청자들이 보낸 사이트 여섯 곳을 리뷰했어요. 두 사람이 짚은 기준은 혼자 만든 서비스의 첫 페이지에도 그대로 쓸 수 있습니다.
먼저 목표는 하나여야 해요. 진행자 애런 엡스타인은 같은 색 버튼이 여럿이면 무엇부터 누를지 모른다고 했고, 슈바이볼트는 사람들을 모아 움직이게 할 단 하나가 무엇인지 스스로 물어보라고 했습니다.
기능을 탭 뒤에 숨기지도 않아요. 가장 중요한 세 가지만 3칸 카드로 보여 주고, 누르면 더 많은 정보가 이어지게 하라는 제안이었어요. 중요한 섹션은 위에 둡니다. 사람들은 스크롤하면서 떨어져 나가니까요.
AI로 쉽게 뽑은 장식도 경계합니다. 아주 작은 글씨나 모서리를 오가는 작은 점처럼 이해를 돕지 않는 장식은 진행자가 먼저 짚었고, 슈바이볼트는 기능을 설명하는 그림이라면 인포그래픽을 해 본 일러스트레이터와 일하는 것도 나쁘지 않다고 받았어요.
마지막은 스크롤을 가로채지 않는 것이에요. 그는 웹사이트의 부드러운 스크롤을 "업계의 재앙"이라고 부르며 브라우저 기본 스크롤을 쓰라고 했습니다. 생각은 원래 끊기니 소프트웨어도 끊을 수 있어야 한다는 거죠.
(편집 도식) 리뷰에서 두 사람이 짚은 기준을 랜딩 페이지 한 장에 옮긴 그림. 이미지 출처 : 원인터뷰를 바탕으로 편집부 재구성
정리하면, 그가 한 일은 말로 안 되는 판단을 눈에 보이게 꺼내 놓는 것이었어요. 동작은 그림으로, 틀린 결과는 다른 모델의 진단으로, 보이지 않는 구조는 지형도로, 어긋난 느낌은 값으로요. 그래도 좋고 나쁨은 사람이 정한다는 게 그의 말입니다.
막혔을 때 그가 한 일과 리뷰 기준, 대담 Q&A 전체는 뉴스레터에 담았습니다.
https://maily.so/josh/posts/knrjk241zld
조쉬의 뉴스레터는 AI와 함께 일하는 창업가·빌더의 이야기를 매주 보내 드려요.
