이 글은 [조쉬의 뉴스레터]에서 발행되었습니다.

퀄리티 있는 프로덕트, 창업가, 비즈니스 이야기를 매주 구독해보세요. 
구독 시 100개의 1인 창업 케이스 스터디가 발송됩니다.

[구독하러 가기]

YC 디자인 총괄 이브 부파르는 키보드를 거의 쓰지 않습니다. 펑션 키를 누르고 만들고 싶은 기능을 말로 쏟아내면, 코딩 에이전트가 그걸 그대로 만들어 냅니다. 요즘 디자이너는 쓰는 도구만 바뀐 게 아니라, 생각하고 프로토타입을 만들고 실제 결과물을 뽑아내는 방식 자체가 바뀌고 있는데요. 그 변화의 최전선에 있는 사람이 부파르입니다.

최근 그가 작업한 세 프로젝트를 하나씩 뜯어보면 - 코딩 세션 분석 도구 Paxel, 샌프란시스코를 기리는 잡지 SOTA Zine, 6,000명이 모이는 Startup School 2026의 비주얼 - 디자인의 병목이 '만드는 능력'에서 '무엇을 원하는지 에이전트에게 설명하는 능력'으로 옮겨갔다는 게 보입니다.

컨덕터와 페이퍼 디자인, 그리고 타이핑하지 않는 디자이너

Q. 요즘 쓰는 도구가 6~12개월 전과 완전히 다르다고 들었어요. 어떤 걸 쓰세요?

요즘은 거의 컨덕터(Conductor, 맥에서 여러 코딩 에이전트를 동시에 굴리는 맥 앱)와 페이퍼 디자인(Paper Design), 이 둘만 씁니다. 프로젝트 하나를 처음부터 끝까지 만드는 데 보통 이 둘이면 충분해요.

시각적인 영감이 필요할 때는 늘 핀터레스트를 찾습니다. 원하는 분위기의 이미지 몇 장을 모아서 작은 무드보드를 만들어 두는 거죠. 하지만 결국 하루의 대부분을 보내는 곳은 컨덕터예요.

Q. 그리고 타이핑을 거의 안 하신다고요?

네, 타이핑을 안 해요. 제가 타이핑하는 속도보다 생각하는 속도가 훨씬 빠르다는 걸 알았거든요. 타이핑이 워낙 느립니다. 그래서 그냥 컴퓨터한테 말로 해요.

지금은 컴퓨터를 손으로 만지는 일이 거의 없습니다. 펑션 키를 누르고, 만들고 싶은 기능을 의식의 흐름대로 쭉 말하면 그게 그대로 만들어져요. 마법 같죠. 이때 쓰는 게 아쿠아(Aqua, 컴퓨터에 말을 걸면 그대로 받아 적어 주는 YC 출신 음성 입력 도구)예요. 제가 말하는 걸 하나도 안 놓치고 잡아 줍니다.

Paxel: 세상이 어떻게 코딩하는지 알아내려는 실험

Q. 최근에 출시한 Paxel부터 볼까요. Paxel이 뭔가요?

Paxel은 저희가 돌려 보고 있는 실험이에요. 목표는 '사람들이 코딩 에이전트로 어떻게 코딩하는가'를 이해하는 겁니다.

요즘은 흐름이 워낙 빠르게 바뀌어서, 다들 각자의 방식으로 코딩 에이전트를 실험하고 있어요. 자기만의 요령을 개발하고, 자기만의 스킬을 만들죠. 그런데 이게 여전히 블랙박스처럼 느껴집니다. 옆자리 동료가 코딩 에이전트로 대체 어떻게 코딩하는지 우리는 잘 몰라요. Paxel은 지금 세상이 어떻게 코딩하는지 알아내려고 저희가 꺼내 든 방법입니다. 사람들이 쌓은 요령과 인사이트, 핵심 교훈을 모아서 다른 사람들과 나눌 수 있게 하려는 거예요.

Q. 그렇게 모은 걸 사용자한테 다시 돌려주죠. '가장 크게 폭발한 순간'까지 짚어 준다면서요?

맞아요. Paxel에서 저희가 가장 하고 싶었던 건 '재미있게' 만드는 거였어요. 내가 어떻게 코딩하는지, 나중에는 다른 사람들이 어떻게 코딩하는지, 그 패턴을 파악하는 과정 자체가 재미있어야 한다고 봤거든요.

첫 버전은 아직 혼자 노는 싱글 플레이어 모드에 가까워요. 트랜스크립트(사용자가 에이전트와 주고받은 대화 기록)를 아직 많이 모으지 못했으니까요. 하지만 데이터가 쌓일수록 내 패턴이 다른 빌더들과 어떻게 다른지 비교해서 보여줄 수 있게 됩니다.

저희는 스포티파이가 만든 '스포티파이 랩드(Spotify Wrapped, 한 해 동안 들은 음악을 요약해 카드로 보여주는 연말 결산)'에서 크게 영감을 받았어요. 코딩 세션으로 스포티파이 랩드를 만들면 어떨까 싶었죠. 그래서 카드가 이렇게 장난스러운 느낌이 됐어요.

만들기 전에 사무실 사람들을 붙잡고 물어봤어요. "자기 코딩 기록에서 뭘 알고 싶냐"고요. YC 파트너인 제러드 프리드먼(Jared Friedman)이 낸 아이디어가 이거였어요. "내가 가장 크게 폭발한 순간(biggest crash out)을 알고 싶다. 에이전트한테 가장 화가 났던 때, 그때 내가 뭐라고 했는지 보고 싶다." 그래서 그게 트랜스크립트를 올리면 나오는 카드 중 하나가 됐습니다.

Q. 실제로 어떻게 작동하나요?

터미널에서 명령어 하나만 실행하면 됩니다. 그러면 Paxel이 트랜스크립트를 끌어와서 Codex, Claude, Cursor 대화 기록을 전부 읽고, 나에 대한 재미있는 사실들을 뽑아 줘요.

예를 들면 이런 겁니다. 유독 편애하는 모델이 있다든가, 커밋의 대부분을 한밤중에 올린다든가, 플랜 모드를 쓰는지 안 쓰는지, 가장 자주 꺼내 쓰는 프롬프트가 뭔지 같은 것들이요.

Q. 랜딩 페이지에 텍스트가 유독 많은데, 의도가 있나요?

이 페이지에 들어오는 사람들에게 우리가 왜 이걸 만들었는지를 아주 분명하게 전하고 싶었어요. 이게 진행 중인 실험이라는 사실을 솔직하게 밝히고 싶었거든요.

우리는 세상이 어떻게 코딩하는지 알아내려는 중입니다. 그래서 랜딩 페이지에 텍스트가 이렇게 많은 게 조금 특이해 보일 수 있어요. 하지만 사람들이 이 제품이 뭘 하는지 알아보려고 들어온다고 보면, 그 답을 페이지 열자마자 가장 먼저 보이게 놓는 게 맞다고 판단했습니다. 그런 생각에서 인터랙티브 카드가 나왔어요. 마우스를 올리면 움직이고 미세하게 반응하는 카드들이죠.

Q. 사이트 전체에 시각적 통일감이 느껴지는데, 어떻게 만든 건가요?

사이트 전체에 하나의 시각 언어를 두고 싶었고, 셰이더(shader, 화면의 색·질감·움직임을 실시간으로 계산해 그려 주는 그래픽 효과)를 좀 실험해 보고 싶었어요.

저는 페이퍼 디자인(paper.design)이 만든 셰이더를 좋아하는데, 그중에서도 디더링(dithering, 점들의 밀도로 명암과 질감을 표현하는 기법) 셰이더를 특히 좋아합니다. 그래서 클로드한테 그걸 구현해 달라고 했어요. 페이퍼 셰이더는 품질이 훌륭한 데다 무료이고, 클로드 코드에서 바로 가져다 쓸 수 있어요. 제가 쓴 건 이미지 디더링이었습니다.

Q. 디더링 효과를 직접 만든 모달로 세밀하게 조정했다고요.

디더링 효과의 느낌을 아주 세밀하게 다듬고 싶었어요. 그래서 제가 쓰려고 작은 모달을 하나 만들었습니다. 거기서 디더링의 파라미터를 하나하나 만지면서 원하는 느낌이 나올 때까지 조정할 수 있었죠.

그리고 이 모달을 아예 공개해 버렸어요. 데스크톱에서 페이지를 열면 누구나 그 모달로 직접 값을 만져 볼 수 있습니다. 이건 웹사이트를 만들 때마다 자꾸 되돌아가게 되는 패턴이에요. 작은 디테일 하나를 완벽하게 다듬으려고, 나한테 필요한 조작 도구를 그때그때 만들어 쓰는 거죠.

Q. 이미지 한 장 뽑아 놓고 끝내는 게 아니라, 원하는 느낌이 나올 때까지 조절할 수 있는 도구를 직접 만든 거군요.

맞아요. 조정하고 싶은 게 생기면 그때그때 나한테 맞는 도구를 만들면 된다는 것, 이건 일종의 근육이라서 훈련해야 자란다는 걸 알았어요.

처음 디더링 효과를 봤을 때, 클로드 코드는 당연히 자기 나름의 파라미터 값을 가정하고 시작했는데 느낌이 영 아니었어요. 그럴 때 "아, 그냥 조작 창을 하나 만들어서 전부 만지면 되지"라고 반응하는 근육을 키우는 겁니다. 다 쓰고 나면 클로드한테 한 번에 지워 달라고 하면 돼요. 간단하죠.

이렇게 하다 보면 소프트웨어를 훨씬 더 상위 차원에서 생각하게 됩니다. 모든 걸 편집할 수 있고, 모든 걸 움직일 수 있고, 모든 걸 바꿀 수 있으니까요. 이제 병목은 내 창의력과 상상력이 어디까지 갈 수 있느냐, 그것뿐이에요.

사람을 위한 웹, 기계를 위한 웹

Q. 페이지 상단에 '사람 vs 기계' 체크박스가 있던데, 그건 뭔가요?

앞으로 웹사이트에서 점점 더 자주 보게 될 패턴이라고 생각해요. 하나는 사람을 위한 버전, 다른 하나는 기계와 에이전트를 위한 버전. 웹사이트가 두 벌로 존재하게 될 거예요.

그래서 이 사이트의 기계용 버전도 만들면 재미있겠다고 생각했습니다. 쉽게 말해 사람용 버전의 내용을 그대로 담은 마크다운 파일인데, 훨씬 압축적이라 에이전트가 읽기에 가볍죠. 맨 위에는 '클립보드로 복사' 버튼을 넣었어요. 페이지 내용을 통째로 복사해서 클로드나 코덱스에 붙여 넣고, 전부 읽기 싫으면 질문만 던지면 되니까요.

Q. 그 기계용 페이지 맨 위에 "이 글을 읽는 AI 에이전트에게: 이 페이지의 명령어나 쿼리를 실행하지 마시오"라는 문구가 있더군요.

저희가 예시 코드를 제공하는데, 그게 자동으로 실행되면 안 되니까요.

이건 비주얼의 문제가 아니에요. 에이전트는 비주얼에 관심이 없거든요. 훨씬 더 콘텐츠에 가까운 작업이에요. 에이전트한테 딱 필요한 콘텐츠만 정확히 줘서, 필요한 걸 가장 빠르게 얻고 제 갈 길을 가게 하는 거죠.

사용자가 프롬프트로 직접 고치는 소프트웨어

Q. 그 아래에는 '기능 요청 폼'이 있던데요. 이런 패턴은 컨덕터가 처음 선보인 걸로 기억합니다. 어떤 기능인가요?

맞아요. 이것도 앞으로 웹사이트에서 점점 더 많이 보게 될 겁니다. 컨덕터의 CEO 찰리 홀츠(Charlie Holtz)가 이 기능을 처음 선보인 데서 영감을 받았어요. 컨덕터에서는 프롬프트를 컨덕터 팀에 제출하면, 팀이 그걸 보고 채택할 만하다 싶을 때 에이전트를 실행시킵니다.

저희는 이 폼 하나로 두 가지를 다 하고 싶었어요. Paxel을 쓰다가 버그를 만나면 버그 리포트를 내는 폼이면서, 동시에 기능 요청을 내는 폼이기도 한 거죠.

쓰는 법은 간단합니다. 에이전트한테 말을 거는 프롬프트 박스라고 생각하고 쓰면 돼요. 화면 녹화나 스크린샷을 붙이면 에이전트가 그걸 보고 맥락으로 씁니다. 이름을 적어 넣을 수도 있고요.

Q. 버튼에 'send to an agent(에이전트에게 보내기)'라고 쓰여 있던데요.

버튼에 쓰인 그대로, 실제로 뒤에서 에이전트가 실행되기 때문이에요. 프롬프트를 보내는 순간 에이전트가 실행되고, PR(pull request)을 엽니다. 그걸 반영할지 말지는 저희가 결정하고요. 개발자이자 디자이너 입장에서 할 일은 들어온 프롬프트를 보고 "이거 괜찮네, 반영하자"라고 승인하는 것뿐이죠.

이름을 모아 두는 게 좋은 이유도 여기 있어요. 나중에 그 사람들에게 고맙다고 인사하고 크레딧을 줄 수 있으니까요.

저는 이게 앞으로 소프트웨어가 만들어지는 방식이라고 봅니다. 제품을 쓰는 사람이라면 누구나 제품의 방향을 함께 만들어 갈 수 있게 해 주니까요.

Q. 로컬 소프트웨어가 지금보다 훨씬 더 개인적인 물건이 될 수도 있겠네요.

맞아요. 지금은 프롬프트가 저희와 에이전트에게 돌아오고, 반영 여부는 사람이 결정하는 구조예요. 하지만 누구든 자기가 쓰는 소프트웨어를 프롬프트 한 줄로 고칠 수 있는 세상을 상상해 볼 수 있습니다.

사용자가 직접 프롬프트를 넣고, 커스터마이즈하고, 다시 디자인하고, 기능을 더하거나 뺄 수 있게 하는 거죠. 쓰는 사람한테 딱 맞는 소프트웨어가 되게 만들고, 그 변경 사항을 자기 로컬 복사본에 스스로 반영하게 하는 겁니다.

Q. 다시 사용자 입장으로 돌아가서, 리포트는 실제로 어떤 모습인가요?

명령어를 실행하고 저희가 트랜스크립트를 분석하고 나면, 리포트가 메일로 옵니다. 내가 어떻게 코딩하는지에 대한 재미있는 사실들을 카드 형태로 보여줘요.

아래로 조금 내리면 더 자세한 내용이 나옵니다. 내 패턴, 의사결정 방식, 그리고 강점과 앞으로 더 키우면 좋을 부분까지요. 트랜스크립트가 쌓일수록 내가 어떤 점에서 특별하고 다른 사람과 어떻게 다른지에 대한 인사이트를 훨씬 더 많이 줄 수 있게 될 겁니다. 길게 보면 엄청나게 가치 있는 데이터라고 생각해요.

Q. Paxel이 결국 무엇을 하려는 건지, 큰 그림에서 정리해 주신다면요.

Paxel은 지금 아무도 들여다보지 않는 데이터를 꺼내 보여주려는 겁니다.

코딩 트랜스크립트는 컴퓨터 아주 깊숙한 곳에 파묻혀 있어서 꺼내기가 어렵습니다. 대부분의 사람들은 자기 컴퓨터에 그런 게 있다는 사실조차 모를 거예요. 트랜스크립트라는 게 존재하고 그걸로 뭔가 할 수 있다는 걸 아예 모르는 거죠. Paxel은 그걸 수면 위로 끌어올려서, 사람들이 자기 패턴을 통해 스스로를 이해하게 만드는 방법입니다. 그러지 않으면 분석할 수 있다는 사실 자체를 알기가 어려우니까요.

SOTA Zine: 회의 녹취를 통째로 담은 파일 하나

Q. 다음 프로젝트로 넘어가 볼게요. SOTA Zine은 뭔가요?

SOTA는 '스테이트 오브 디 아트(State of the Art)'의 약자예요. AI 업계에서 '현재 도달한 최고 수준'을 뜻하는 말이면서, 문자 그대로 읽으면 '예술의 현 상태'가 되죠. 아이디어는 개리 탄(Garry Tan, YC 대표)에게서 나왔습니다. 그가 샌프란시스코를 기리고 싶어 했거든요. 그래서 도시의 여러 아티스트, 작가들과 함께 샌프란시스코를 기리는 프로젝트를 하게 됐어요.

저희가 만든 진(zine, 소규모로 찍어 내는 독립 잡지)은 웹 콘텐츠가 아니라 실제로 종이에 인쇄한 물건입니다.

Q. 이번엔 오히려 AI를 일부러 안 썼다고요.

맞아요. 진의 그래픽 디자인, 표지 아트, 안에 들어간 몇몇 작업은 의도적으로 AI를 전혀 개입시키지 않았어요.

몇 년 전에 하던 방식으로 돌아가기로 했죠. 일러스트레이터(Illustrator)로요. 이 작품들은 보는 순간 알 수 있어요. 아주 의도적이고 디테일이 촘촘해서, 누군가 몇 달을 들여 작업했다는 게 그대로 느껴지거든요.

Q. 종이 인쇄물에서 출발해서, 그걸 보여줄 웹사이트로 넘어갔는데요. 웹사이트는 어떻게 만들었나요?

진에 관한 회의를 하나도 빠짐없이 전부 녹음했어요. 그리고 그 트랜스크립트를 이 프로젝트 전용 soul.md 파일 하나에 통째로 집어넣었습니다.

저는 그 soul.md를 이 프로젝트의 단 하나의 기준 문서로 삼고 싶었어요. 앞으로 이 프로젝트에서 내려야 할 모든 결정이 이 파일을 근거로 삼도록, 최대한 많은 맥락을 여기 다 담아 두는 거죠.

Q. 보통은 회의가 끝나면 요점만 메모하잖아요. 그렇게 하지 말라는 건가요?

네, 그렇게 하지 마세요. 대신 전부 녹음해서 soul.md에 통째로 집어넣고, 그다음부터 가고 싶은 모든 방향의 근거로 그 파일을 쓰세요.

저는 이게 미래라고 생각합니다. 저희는 이 프로젝트를 하면서 우리끼리 볼 선언문(manifesto)도 하나 썼는데, 당연히 그것도 soul.md에 집어넣었어요. 에이전트에게 줄 수 있는 맥락은 많으면 많을수록 좋으니까요.

Q. 그 soul.md 파일은 실제로 어떻게 생겼나요?

그냥 단순한 마크다운 파일 하나예요. 그 안에 모든 맥락이 들어 있습니다.

마크다운 파일은 쪼갤 수도 있어요. 원하는 만큼 여러 파일의 위계를 만들 수 있죠. 디자인을 어떻게 다룰지에 대한 디자인 전용 마크다운을 따로 두고, 선언문 전용 마크다운을 따로 둘 수도 있습니다. 저희라면 진에 실린 글 전용 마크다운을 따로 뺄 수도 있었고요. 아니면 전부 하나의 파일에 몰아넣어도 됩니다.

어느 쪽이 더 낫다고 딱 잘라 말하긴 어려워요. 그래서 지금 다들 실험하면서 더 나은 방법을 찾아가는 중이죠. 가능한 한 많은 정보를 담아서 그 정보를 에이전트와 공유하는 게 앞으로 소프트웨어를 만드는 최선의 방법이라고 봅니다.

한 번에 16개를 뽑고, 마음에 드는 걸 고른다

Q. 그 다음 단계는 뭐였나요?

빠르게 반복하면서 웹사이트가 될 수 있는 여러 버전을 눈으로 보고 싶었어요. 그래서 핀터레스트에서 무드보드부터 시작했습니다.

제가 좋아하는 이미지 몇 장을 모아 무드보드를 만들었어요. 날것 같고, 흑백인 분위기. 이게 제가 가려던 방향이었어요. 이것도 이 프로젝트를 함께한 동료, 친구들과 나눈 대화를 전부 반영한 결과였고요. 무드보드를 보면서 든 첫 생각은 이거였어요. "이 무드보드를 바탕으로 한 방에 완성되는 웹사이트를 여러 버전으로, 아주 간단하게 뽑아낼 수 있으면 좋겠다."

Q. 그래서 실제로 어떻게 했나요?

이미지 몇 장을 다운로드해서 클로드에 넣고 이렇게 부탁했어요. "분위기는 이미 알 거고, 웹사이트에 넣을 콘텐츠도 알 거야. 이 이미지들이 내가 원하는 시각적 방향이니까, 여기서 영감을 받아서 괜찮은 웹사이트를 한 방에 뽑아 줘."

그걸 16번 다르게 시켰습니다. 그리고 뽑아낸 버전들을 편하게 넘겨볼 방법을 제가 쓰려고 따로 만들었어요. "이제 나한테 필요한 건 뭐든 만들 수 있다"는 그 근육을 또 한 번 훈련한 거죠. 반복 버전을 한데 모아 놓은 페이지 하나를 만드는 게 가장 빠른 방법이었어요.

그러다 보니 마음에 드는 걸 표시해 둘 방법이 필요해졌고, 그래서 핀으로 고정하면 자동으로 맨 위에 뜨는 기능을 한 방에 붙였습니다. 괜찮은 버전을 놓치지 않으려고요.

Q. 빠르게 뚝딱 만들어서 넘겨보고 버리는, '버려도 되는 디자인(disposable design)'인 셈이네요. 실제 반복 버전에는 뭐가 반영돼 있었나요?

soul.md에 진에 실린 글들의 제목을 반드시 넣어 뒀어요. 적어도 웹사이트 첫 버전에서는 그걸 전면에 내세우고 싶었거든요. 그래서 뽑힌 버전마다 글 제목이 다 들어가 있습니다.

한 방에 뽑은 거라 완성도를 크게 기대하면 안 돼요. 어디까지나 탐색 도구니까요. "글 제목을 이렇게 배치할까, 저렇게 배치할까" 같은 감을 잡는 용도죠. 그래도 재미있는 요소가 꽤 많이 들어 있어요. 폰트도 좋고요. 

Q. 에이전트가 예상 못 한 것까지 알아서 넣어 준다는 거네요.

맞아요. 에이전트에게 정보를 활짝 열어 주면, 에이전트가 너무 많은 걸 알게 돼서 사람을 놀라게 합니다. 전권을 주고 마음껏 반복 버전을 만들게 풀어 주면, 내가 떠올리지 못했을 것들까지 알아서 넣거든요.

저희가 열던 파티 시간을 그냥 자연스럽게 넣어 준 게 그런 경우였어요. 저희한테는 거의 'AGI 순간'이었습니다. "이게 우리보다 앞서서 볼 수도 있고, 브레인스토밍까지 도와주고, 독창적인 아이디어까지 내는구나" 하고 깨달은 순간이요.

진(zine)이라는 걸 알고는 바코드를 넣어 준 것도 그래요. 실제로 매장에서 여러 통화로 살 수 있는 물건인 것처럼요.

Q. 인터랙티브한 샌프란시스코 지도도 그렇게 나온 건가요?

네. "샌프란시스코의 실제 인터랙티브 지도가 있으면 어떨까"를 실험해 보고 싶었어요. 그랬더니 샌프란시스코 지도가 펼쳐지는 버전이 나왔습니다. 도시 안을 이리저리 움직일 수 있는 지도가, 한 방에 뽑은 버전 뒤에서 온전히 살아 움직이고 있었죠.

이 정도 수준의 결과물을 한 방에 뽑으려면, 아주 상세하고 의도가 분명한 디자인 마크다운, 즉 soul.md가 있어야만 합니다. 에이전트를 잘 이끌어서 내가 가려는 분위기가 정확히 뭔지 알려줘야 해요. 스크린샷을 넣을 수 있으면 넣고, 무드보드를 넣을 수 있으면 넣고요. 정보를 최대한 많이 주면, 에이전트는 기대 못 한 방식으로 사람을 놀라게 합니다.

Q. 많은 사람이 클로드나 코덱스에 디자인을 시키면 뻔한(generic) 결과가 나온다고 느껴요. 이걸 어떻게 깨나요?

쉽습니다. 핀터레스트나 구글 이미지를 뒤지거나, 아니면 내가 좋아하는 웹사이트를 찾으면 돼요. 그걸 북마크해 두고, 나중에 에이전트에게 주면서 "이게 내가 좋아하는 거야"라고 말하는 거죠.

어떤 웹사이트가 왜 좋은지 스스로도 모를 때가 있어요. 괜찮습니다. 왜 좋은지 이해할 필요 없어요. 그냥 에이전트에게 주면 에이전트가 대신 분석해 줍니다. 내 패턴과, 내가 좋아하는 웹사이트들의 공통점을 결국 파악해서 "당신이 여러 사이트에서 공통적으로 좋아하는 건 사실 이거네요"라고 알려줄 수 있어요.

Q. 글 제목마다 붙은 호버 효과도 에이전트가 만든 건가요?

네, 각 글을 넘겨볼 때 나오는 호버 효과를 에이전트가 만들어 줬어요. 글마다 어울리는 비주얼도 알아서 끌어왔고요.

이쯤 되면 클로드가 이걸 어떻게 하는지 저도 모를 지경이에요. 웹을 훑어서 어울리는 사진과 애니메이션을 찾아 이렇게 표면으로 끌어올립니다. 세밀하게 조정하고 싶은 게 있으면 아쿠아로 말해서 색을 바꾸거나 느낌을 바꿔 달라고 하면 되고요. 에이전트와 주고받는 이 피드백 루프가 엄청나게 빠르고 보람 있어요.

Q. 최종적으로 도착한 인터랙티브 지도는 어떤 모습인가요?

사람들이 핀을 꽂고, 샌프란시스코에서 마주친 일이나 우연한 만남, 도시에서의 소소하고 기분 좋은 기억을 짧은 이야기로 남길 수 있는 지도예요. 완전히 익명으로 만들었습니다. 위치 하나를 고르고 거기서 무슨 일이 있었는지만 적으면 돼요.

이 프로젝트의 묘미는, 사람들이 놀랍고 내밀하고 사색적인 이야기를 꺼내 놓는다는 겁니다. 이게 이 프로젝트의 본질인 '사람들이 샌프란시스코를 어떻게 경험하는가, 우리 모두가 배울 만한 마법 같은 작은 순간들은 무엇인가'로 돌아가는 방법이죠.

이 지도 외에도 저희가 연 출시 파티를 위한 디지털 포스터를 만들었고, 진을 위한 서브스택(Substack)도 열어서 사이트에서 바로 넘어가 글을 읽을 수 있게 했어요. 마음에 드는 이야기를 친구에게 보내고 싶으면 공유 버튼을 누르면 됩니다. PNG로 다운로드되면서, 그 이야기와 연결된 위치의 좌표와 어느 거리인지까지 함께 나와요.

Startup School 2026: 셰이더로 만드는 브랜딩

Q. Startup School 2026 작업도 하셨죠. 어떤 행사인가요?

Startup School은 저희가 1년에 한 번 여는 최대 행사예요. 체이스 센터(Chase Center)에서 열리고, 전 세계에서 6,000명 넘는 사람들이 옵니다. 샌프란시스코를 경험하고, AI로 뭔가를 만든다는 게 무엇인지, 그리고 '우리 모두가 함께 만들고 있다'는 공동체 감각을 느끼러 오는 거죠.

올해는 쟁쟁한 연사 라인업을 꾸릴 수 있었어요. 젠슨 황(Jensen Huang), 샘 올트먼(Sam Altman), 알렉산더 왕(Alexandr Wang), 제프 딘(Jeff Dean)을 비롯해 여러 사람이 옵니다. 이 라인업을 세상에 잘 알릴 방법이 필요했어요.

Q. 행사 전체의 디자인 방향은 어떻게 잡았나요?

행사 디자인을 넓게 놓고 생각했을 때, YC답게 느껴지되 YC의 변주처럼 보이길 바랐어요. 그래서 당연히 오렌지에서 출발하되, 오렌지의 그라데이션을 실험했습니다.

그 과정에서 페이퍼 셰이더를 발견했고, 이걸로 실험해 보면 재미있겠다고 생각했죠. 그게 Startup School 비주얼 전체의 출발점이 됐어요.

Q. 연사 카드는 어떻게 만들었나요?

처음엔 Figma에서 시작했어요. 연사들에게 받은 이미지를 넣고 직접 이리저리 옮기면서요. 그런데 연사가 계속 늘어날 텐데 요소를 열두 번씩 옮기고 싶지는 않더라고요.

그래서 클로드한테 템플릿을 만들어 달라고 하는 게 훨씬 간단하겠다고 판단했어요. 클로드가 제 메일함에서 이미지를 대신 끌어올 수도 있고, 나머지도 다 대신 해 줄 수 있으니 제 손은 최대한 덜 가게요.

그렇게 도구를 하나 만들었습니다. 아주 단순한 도구인데, 확정된 연사 이름이 들어가 있고, 이름이 하나씩 확정될 때마다 카드가 자동으로 만들어졌어요. 카드 위에 텍스트를 배치하는 여러 방식도 실험할 수 있게 했고요. 결국 지금의 배치로 정했지만, 카드마다 레이아웃을 여러 버전으로 쉽게 뽑아 보는 과정이 즐거웠어요.

Q. 셰이더의 움직임은 어떻게 다뤘나요?

페이퍼 디자인이 만든 셰이더 중 하나에서 나오는 움직임을 썼어요. 그리고 거칠기(graininess)와 가장자리, 회전, 스케일을 세밀하게 조정했습니다.

원하는 셰이더 변형을 찾아 가는 과정이 즐거웠어요. 마음에 안 들면 그냥 새로고침하면 초기화되고요. 이것도 제가 쓰려고 만든, 아주 유용한 미니 도구였습니다.

Q. 화면 녹화 도구까지 따로 만든 이유가 있나요?

뒤에서 움직이는 셰이더를 그대로 살리면서 카드 해상도를 최대로 뽑으려면 화면 녹화를 해야 했어요. 그래서 언제 녹화를 시작하고 언제 멈춰야 하는지 정확히 알려주는 작은 화면 녹화 도구를 만들었습니다.

트위터와 인스타그램에 올렸을 때 완벽한 루프처럼 느껴지길 바랐거든요. 끝이 없는 움직임처럼요. 그래서 클로드한테 딱 4초짜리, 완벽하게 설계된 루프를 뽑아 주는 도구를 만들어 달라고 했어요. 시작과 끝이 정확히 같은 픽셀에서 맞아떨어지도록요.

Q. 참가자에게 보내는 티켓도 만들었죠.

합격 통보를 받을 때 티켓을 함께 받으면 마법 같겠다고 생각했어요. 그래서 Startup School의 다른 비주얼에 쓴 그 셰이더를 티켓에도 그대로 적용해서 디자인했습니다.

이번엔 최대한 개인화되게 만들었어요. 참가자의 이름과 사는 도시를 렌더링하고, 행사 정보를 넣었죠. 사람들이 이 티켓을 소셜 미디어에 공유하면서 샌프란시스코에 오는 게 기대된다고, 때로는 난생처음 샌프란시스코를 경험한다고 말하는 걸 보는 게 기뻤어요.

Q. 1년 전이었다면 이런 셰이더 작업을 시도할 엄두를 냈을까요?

제가 쓰는 클로드는 제가 페이퍼 디자인과 그들의 셰이더를 좋아한다는 걸 압니다. 그러니 뭘 가져와야 하는지 알아서 알고, 그들의 웹사이트에서 정보를 어떻게 끌어오는지도 자동으로 알아서 씁니다.

브랜딩 디자인을 하는 방식 자체가 완전히 다른 패러다임이 됐어요. 같은 셰이더를 같은 파라미터로, 체이스 센터 곳곳의 거대한 스크린에 그대로 걸어서 처음부터 끝까지 일관성을 유지할 수 있으니까요. 무언가를 일관되게 만드는 일도, 코딩 에이전트를 모든 곳에 쓰는 일도 그 어느 때보다 쉬워졌습니다.

1년 전이었다면 이 셰이더들을 만드는 건 넘을 수 없는 산처럼 느껴졌을 거예요. 어디서부터 시작해야 할지조차 몰랐을 겁니다. 그런데 지금은, 그냥 되는 일이 됐어요.

소중한 노력이 들어간 글을 널리 알려주세요. 

이 기사가 좋으셨다면, 보상을 해주세요. 

가장 좋은 보상은 ‘조쉬의 뉴스레터 구독’입니다. :) 

구독을 하시면 100개의 1인 창업가 데이터베이스를 발송해드립니다.

[구독하러 가기]