형용사의 속도로 디자인하기 — 폴 바카우스 (Renaissance Geek, Inc.)
AAI Engineer
Computing/SoftwareSmall Business/StartupsPhotography/Art
Transcript
00:00:00시작해 볼까요. 여러분 환영합니다. 와주셔서 감사합니다. 제 이름은 폴이고, 여러분을
00:00:21식곤증으로부터 구해보려고 합니다. 한번 해보죠. 자, 이 발표의, 이 강연의 콜드 오프닝은
00:00:29impeccable이 뭔지 알면 훨씬 더 이해가 잘 되겠지만, 만약
00:00:35그게 뭔지 모르신다면, 코딩 하네스를 더 나은 디자이너로 만들어 주는 디자인 스킬이자,
00:00:39여러분을 더 나은 디자이너로 만들어 줄 수도 있는 도구입니다. 직접 써보실 수 있죠. 클라우드 코드,
00:00:43GitHub Copilot, Cursor, Codex 등 모든 하네스에서 작동합니다. 그리고 이 강연은 도구 자체보다는
00:00:51이 도구를 빌드한 제 접근 방식에 대한 이야기입니다. 하지만 꽤 전형적인 웹사이트로
00:00:59시작해 보겠습니다. 자, 이것은 의도적으로 아주 기초적으로 만든 웹사이트인데요,
00:01:05다음에 보여드릴 내용의 맥락을 이해할 수 있도록 이걸 먼저 보여드리는 겁니다. 보시다시피
00:01:11그냥저냥 쓸만한 웹사이트죠. 대단하진 않습니다. 꽤 밋밋하지만, 적어도 색상이나 뭔가 조금은 있네요.
00:01:19자, 이제 여기에 명령어를 내려봅니다. impeccable을 사용해서 더 대담하게 만들고, 워크플로우 섹션을 더 대담하게 만들어라. 이건 impeccable이 설치된 상태입니다. 자, 여기 보면 완벽하지는 않습니다. 몇 가지 문제가 있죠. 예를 들어, 거기에 있는 섹션 번호 같은 건 아주 전형적인 AI
00:01:41루프의 흔적입니다. GPT가 정말 좋아하고요. 제 말은, Claude도 사실 정말 좋아한다는 겁니다. 그리고 종종
00:01:48이런 게 스며들죠. 그러니 이걸 완벽하다고 할 수는 없겠지만, 전보다는 훨씬 대담해졌다고 말할 수 있겠네요.
00:01:54자, 많은 사람들이 impeccable을 설치해서 써본 다음에 저한테 이렇게 묻습니다. 음, 플라시보 효과 아닐까요? 모델 자체만으로도 이미 충분히 훌륭한 거 아닐까요? 실제로 효과가 있는 건지 잘 모르겠네요. 자, 비교해 봅시다. 이것은 완전히 똑같은 프로젝트이며, impeccable 없이 똑같은 프롬프트를 넣어 extra high 설정으로 돌린 GPT 5.5입니다.
00:02:16약간의 차이는 있다고 말씀드릴 수 있겠네요. 하지만 판단은 여러분 몫입니다. 전과 후가 꽤 다르며, 왜 그런지, 그리고 그 접근 방식이 무엇인지 이야기해 보겠습니다.
00:02:35자, 형용사의 속도로 디자인하기. 방에 든 코끼리부터 치우자면, 이것들은 형용사일 뿐만 아니라 동사이기도 합니다.
00:02:44하지만 그중 일부는 형용사죠.
00:02:49먼저, 엔지니어와 디자이너의 역할 경계가 흐려지고 있습니다. 그 어느 때보다 디자인 엔지니어가 되는 사람들이 많아졌죠. 디자이너들이 코딩으로 넘어오고, 엔지니어들이 디자인으로 넘어가며, 그 반대의 경우도 마찬가지입니다.
00:03:02제게 다가와서 이런 말을 건네는 분들의 최고의 코멘트 중 일부는, impeccable 덕분에 이제 모든 사람이 소통할 수 있는 공통의 디자인 언어가 생겼다는 것입니다.
00:03:11하지만 제 생각에는 이 세계들이 정말로 충돌하고 있으며, 전형적인 핸드오프(인수인계) 방식은 어느 정도 깨졌습니다. PM 측의 무엇(what)으로 시작해서, 디자인으로 넘어가고, 그러고 나서 이 인수인계와 크리틱(비평) 과정을 거친 뒤, 궁극적으로 엔지니어가 빌드하는 그런 폭포수(waterfall) 프로세스 말입니다.
00:03:30그러니까 그런 방식은 이제 더 이상 현실에 맞지 않습니다. 여러분은 어떠실지 모르겠지만, 대기업과 소기업 모두에서 그런 방식이 아주 빠른 속도로 무너지고 있다고 생각합니다.
00:03:41그리고 실제 디자인 작업을 할 때면, 현재 우리가 플레이할 수 있는 세계가 대략 두 가지 정도 있는 것 같습니다.
00:03:48하나는 픽셀 공간에서의 직접 조작 방식입니다. 피그마에서 여백, 패딩 등 무엇이든 직접 조작하는 식이죠. 아니면 Webflow나 최종 출력물 또는 디자인을 직접 조작하는 다른 도구를 쓰는 것입니다.
00:04:04좋습니다만, 그렇게 하면 다른 모든 사람들은 에이전트 중심적으로 루프를 돌리고 루프 맥싱을 하며 미쳐 날뛰고 있는데 나만 뒤처지고 있다는 느낌을 받게 됩니다.
00:04:13그래서 이제 반대쪽 극단으로 넘어가, 에이전트에게 제발 이걸 디자인해 달라고 하거나 빌드해 달라고 요청하게 되죠.
00:04:18하지만 적어도 제게는, 우리가 아직 충분히 탐구하지 않은 이 중간 지대가 있는 것 같습니다.
00:04:24정확한 통제 수준은 어느 정도일까요? 정확히 어떤 타이밍에 루프 속에 인간을 개입시킬 수 있을까요?
00:04:32그래서 이 생각이 떠올랐습니다. 얼마 전에 아주 인기가 많았던 트윗이었죠.
00:04:38Opus로 div 중앙 정렬하기. 네, Opus를 아주 훌륭하게 활용한 건 아니죠.
00:04:44하지만 이 문제는 어느 정도 대변해 줍니다. 그러니까, 언제 어떤 도구를 써야 할까요?
00:04:51어떤 작업을 수행하는 데 어떤 도구가 언제 적절할까요?
00:04:56제 생각에는 현재 대부분의 작업에 있어 패딩, 마진, 간격 등을 직접 조작하는 것은
00:05:03사실 너무 낮은 추상화 수준에 머물러 있습니다.
00:05:08반면에 완전히 에이전트 중심적으로 가면, 이런 웹페이지가 나오게 됩니다.
00:05:15뭐 2022년쯤에나 보던 결과물이라고 할 수 있겠네요.
00:05:17여기 계신 분들이라면 누구나 전형적인 AI 슬롭(싸구려 AI 결과물) 패턴을 짚어내실 수 있을 겁니다.
00:05:21하지만 보라색 그라데이션은 사실 그 단계를 훨씬 넘어섰습니다.
00:05:24대부분의 프론티어 모델에서는 더 이상 보라색 그라데이션을 쓰지 않아요.
00:05:28이제는 이런 스타일이 나오는데, Claude의 말마따나 옷만 바꿔 입은 셈입니다.
00:05:33하지만 본질적으로는 여전히 슬롭이죠.
00:05:37그냥 목표물이 계속 바뀔 뿐입니다.
00:05:39그래서 이제는 제가 'Claude 베이지'라고 부르는 것, 이런 인스트루멘털 세리프 폰트와 이탤릭체를 쓰게 됩니다.
00:05:44디자인 자체가 나쁘다는 뜻은 아닙니다.
00:05:46그냥 Claude 디자인에서 나오는 모든 결과물이 다 그렇게 생긴 것뿐이죠.
00:05:49그리고 모든 것이 똑같이 보이면, 제가 부르는 속칭 '알고리즘적 유니클로' 같은 상태가 됩니다.
00:05:55역시 그리 좋지는 않죠.
00:05:57자, 오늘 세션의 첫 번째 파격 발언입니다.
00:06:01디자인은 원샷으로 끝낼 수 없습니다.
00:06:04많은 사람들이 그러길 원하고, 언젠가는 그렇게 될지도 모르죠.
00:06:08다만 현재 시점에서는 불가능하다고 생각합니다.
00:06:11어쩌면 영원히 불가능할지도요.
00:06:13정말로 멋져 보이고 효과적인 디자인을 만들기 위해서는,
00:06:19여러분이 무엇을 하려는지, 타겟 오디언스가 누구인지, 무엇을 빌드하려는지에 대한 맥락이 풍부해야 합니다.
00:06:26그리고 멀티샷으로 진행되어야만 하죠.
00:06:28디자인을 계속 반복해서 다듬어야 합니다.
00:06:31혼자서 비즈니스를 하더라도 말입니다. 1인 기업이 아니라면 더욱 그렇겠죠.
00:06:33의견이 서로 다른 다양한 사람들이 있을 수 있습니다.
00:06:38사용자들도 저마다 의견이 있고요.
00:06:40제 말은, 디자인은 원래 복잡하고 지저분하다는 겁니다.
00:06:41그게 바로 프로세스죠.
00:06:42그걸 애써 외면하고 에이전트에게
00:06:43“내 대신 이 문제를 해결해 줘”라고 말한다고 해서
00:06:48안타깝게도 문제가 해결되지는 않습니다.
00:06:51또 다른 문제는, 여러분이 디자인의 언어를 모른다거나
00:06:57이해관계자(스태이크홀더)들이 디자인의 언어를 모를 경우,
00:07:00정말 순식간에 엄청나게 답답해진다는 점입니다.
00:07:02무언가를 디자인해 보신 분들이라면 이런 경험이 어떤 것인지 대충 아실 겁니다.
00:07:06그러다 보면 마음속에서 '음...' 하는 느낌이 차오르죠.
00:07:11그리고 어느 순간에는 '아아악...' 하게 됩니다.
00:07:16그러므로 정말로 가장 먼저 물어야 할 질문은, 감정적 영역이 무엇인가 하는 것입니다.
00:07:20절대 느껴져서는 안 되는 느낌은 무엇인가요?
00:07:22레퍼런스는 무엇인가요?
00:07:23오디언스는 누구인가요?
00:07:24이것들은 모두 반드시 알아내야 할 정말 중요한 질문들입니다.
00:07:27비록 세계 최고의 디자인 스튜디오라 할지라도, 인간 디자인 스튜디오에 찾아가서
00:07:33디자인 디렉터에게 다가가 이렇게 말할 수는 없잖아요.
00:07:36“저희 브랜드를 위한 디자인을 원해요.”
00:07:38그러면 디자인 디렉터가 고개를 끄덕입니다.
00:07:39“접수했습니다.”
00:07:41그리고 그냥 가버리고요.
00:07:42말이 안 되잖아요.
00:07:44그들은 당연히 여러분이 무엇을 만들려고 하는지,
00:07:47거기서 무엇을 얻어내고 싶은지 파악해야 합니다.
00:07:50중요한 점은, 이 예시처럼 2026년 버전의 AI 슬롭 같은 경우에도,
00:07:55그냥 대충 바이브 코딩으로 뚝딱 만든 피치에는 여기서 아무도 결정을 내린 게 없습니다.
00:08:00그냥 이걸 원샷으로 뚝딱 만들어 낸 것뿐이죠.
00:08:02이 페이지에 대해 진지하게 결정된 것은 아무것도 없습니다.
00:08:05그냥 대충 쓸만해 보일지는 몰라도, 완전히 텅 비어 있죠.
00:08:10그래서 제가 여기서 주장하는 논지이자, 지난 몇 달 동안 구축하려고 노력해 온 것은,
00:08:17형용사와 동사를 사용해 에이전트를 올바른 방향으로 유도하는 데 꼭 필요한 만큼의 통제력만을 제공하는 도구입니다.
00:08:23제가 말씀드리는 단어들은 바로 이런 부류입니다.
00:08:26이런 단어들을 말하는 거죠.
00:08:29이걸 더 대담하게(bolder) 만들어라, 이걸 더 차분하게(quieter) 만들어라.
00:08:32이걸 정제하라(distill).
00:08:33그러니까 기본적으로 단순화하라는 뜻입니다.
00:08:35다듬어라(polish).
00:08:36더 조밀하게 만들거나 단단하게(harden) 만들어라.
00:08:39예를 들어 '단단하게(harden)' 만든다는 것은 이 디자인이 전반적으로 확실히 잘 작동하는지 확인한다는 뜻입니다.
00:08:44특정 기기에서 성능이 안 좋을 수도 있죠.
00:08:46반응형이 아닐 수도 있고요.
00:08:48이것들이 바로 우리가 디자인 세계에서 사용하는 단어들입니다.
00:08:54그리고 두 사람이 정확히 똑같은 작업을 시도하는 것을 지켜보다 보니,
00:08:58한 명은 디자인을 전혀 접해본 적 없는 엔지니어이고,
00:09:01다른 한 명은 디자이너일 때,
00:09:03심지어 똑같은 모델과 똑같은 하네스 등 모든 것을 똑같이 사용하더라도,
00:09:08그들이 사용하는 언어에 따라 얻어내는 결과물에 엄청난 차이가 있다는 것을 발견했습니다.
00:09:11그래서 저는 그 언어를 스킬로 압축해서,
00:09:18더 나은 방식으로 자신을 표현할 수 있는 시스템으로 만들어 보려고 노력해 왔습니다.
00:09:22예를 들어, 여기에 베이스라인이 있다고 해봅시다.
00:09:27거기서 더 대담하게 만들면,
00:09:28에이전트는 여러분의 맥락에서 '대담하게'라는 게 무엇을 의미하는지 실제로 알게 됩니다.
00:09:32더 차분하게 만들 수도 있죠.
00:09:33그게 무슨 뜻인지도 알고요.
00:09:34정제(distill)하라고 하면 그 뜻도 잘 압니다.
00:09:36하지만 도대체 어떻게 더 대담하게 만들란 말일까요?
00:09:42여러분의 프로젝트 맥락에서 대담하다는 건 무엇을 의미할까요?
00:09:44이것은 정말 중요한 질문입니다.
00:09:46왜냐하면 데모 시작 부분에서도 보셨듯이,
00:09:49콜드 오프닝에서 볼 수 있듯,
00:09:51그냥 GPT나 Claude 등에 무작정 “이걸 더 대담하게 만들어 줘”라고 요청하면,
00:09:55우리가 무슨 뜻으로 한 말인지 전혀 알지 못하니까요.
00:09:57물론 대담하다는 게 무엇을 의미할지에 대한 자신만의 레퍼런스는 가지고 있겠지만,
00:10:01결국 자기 마음대로 해버릴 겁니다, 그렇죠?
00:10:03새로운 색상을 지어내기도 하고요.
00:10:05새로운 색상을 멋대로 만들어냅니다.
00:10:06새로운 그라데이션을 지어내죠.
00:10:07뭐— 아무튼 상관없습니다.
00:10:10impeccable에서 그 말이 실제로 의미하는 것은 그라데이션도, 글래스모피즘도, 네온도 아니라
00:10:17실제로는 계층 구조(hierarchy), 스케일, 결단력 있는 타이포그래피입니다.
00:10:20디자인 시스템을 깨뜨리지 않으면서도
00:10:24사용자가 집중해야 할 요소를 적절히 부각시키는 것들을 말합니다.
00:10:29그리고 이건 '더 굵게', '완벽하게'라고 말할 때 실제로 불러와지는 파일 안의 문장입니다.
00:10:38누군가에게 작업물을 보여주며 “이걸 더 굵게 만들어 줘”라고 해보세요.
00:10:42“이걸 더 굵게 만들어 줘.”
00:10:43그들이 그걸 곧이곧대로 믿는다면, 여러분은 실패한 겁니다.
00:10:45그래서 이는 에이전트 스스로 수행하도록 실제로 지시하는 내용입니다.
00:10:49그러면 에이전트는 종종 되돌아보며 '음, 잘 모르겠네'라고 합니다.
00:10:54'여기 작업이 좀 별로였던 것 같아'라구요.
00:10:57형용사는 가벼운 단어입니다.
00:11:00가벼운 단어, 참 독일어 같은 표현인데, 맷 포콕도 최근에 이와 비슷한 이야기를 했습니다.
00:11:06그분 역시 정말 훌륭한 기술들을 많이 만드시죠.
00:11:08그래서 이 아이디어는 그의 트윗에서 영감을 받았습니다.
00:11:11하지만 정말 큰 공감이 가는 내용입니다.
00:11:15이러한 단어들은 기본적으로 의미를 불어넣고, 뜻을 채워 넣는 단어들입니다.
00:11:21그 자체로 의미가 있죠.
00:11:22모델에게도 이미 어느 정도 의미가 통하지만요.
00:11:24이를 여러분이 관심 있는 분야로 구체화하여 번역해 내는 것입니다.
00:11:29그리고 올바른 수준(altitude)은 정말이지 계속 바뀝니다.
00:11:34글쎄요, 그 정도 추상적인 수준에서는 어떤 문제도 해결할 수 없다고 봅니다.
00:11:39이것도 아주 중요한 부분입니다.
00:11:40작업의 아주 초기 단계에는 여전히 여지가 남아 있습니다.
00:11:43예를 들어, 탐색적인 작업을 원하거나 화면에 뭔가를 빨리 띄워보고 싶을 때 말이죠.
00:11:47아니면 마지막 마무리를 다듬고 싶을 때처럼요.
00:11:50제 생각엔 현재로선 AI가 인간을 대체할 만큼 완벽하지는 않습니다. 마지막 5%, 10%, 어쩌면 20%의 작업에 대해서는요.
00:11:57좋은 결과물을 훌륭한 결과물로 끌어올리는 과정 말입니다.
00:12:00그럼에도 실제로 상황을 더 낫게 만들어 주긴 합니다.
00:12:04저는 20년 이상 도구를 만들어 왔습니다.
00:12:07이렇게 제 연식이 드러나네요.
00:12:10하지만 언제나 도구를 만들 때면, 저는 먼저 워크플로를 도식화합니다.
00:12:13제가 돕고자 하는 타겟 사용자의 실제 워크플로가 어떠한지 고민하죠.
00:12:17그리고 디자인의 워크플로는 선형적이지 않습니다.
00:12:20복잡하고 지저분하죠.
00:12:21수많은 다양한 단계가 존재합니다.
00:12:23다양한 사람들이 관여하기도 하고요.
00:12:25그래서 저는 프로세스의 모든 단계를 도식화하고 고민했습니다.
00:12:28이 여정 속에서 개입할 수 있는 지점은 어디일까?
00:12:31그리고 그 과정에서 어떻게 도움을 줄 수 있을까 하고요.
00:12:34그렇게 디자인의 초기화 및 구체화(shaping) 과정부터 시작하게 됩니다.
00:12:38다양한 동사와 형용사를 활용해 제작(crafting)과 반복 작업 단계로 넘어가고,
00:12:44마침내 실제 완성도를 높이고 다듬는 단계로 이어집니다.
00:12:46마지막에는 이를 다시 디자인 시스템으로 가져오게 되죠.
00:12:49기술적인 부분과 디자인적인 요소를 정리 정돈하는 것입니다.
00:12:53자, 여기 제가 실제로 출시를 망설였던 명령어의 한 예가 있습니다.
00:12:58'오버드라이브(overdrive)'라는 명령어입니다.
00:13:01저는 impeccable 안에서 무언가 완전히 도를 넘은(over the top) 결과물을 만들려고 이 명령어를 제작했습니다.
00:13:08일종의 반쯤 농담 같은 거였다고 할까요?
00:13:11하지만 사람들은 이 기능에 정말 열광하고 환호했습니다.
00:13:15너무 좋아하더라고요.
00:13:16이건 단지 한 가지 예시일 뿐입니다. 물론 한 번에 뚝딱 만든 건 아니고요.
00:13:20이건 제가 만든 셰이더 라이브러리인 '래디언트 셰이더'를 위해 제작한, 꽤나 현실적인 사건의 지평선 셰이더입니다.
00:13:28하지만 여기에 오버드라이브 명령어를 사용해 더욱 과장되게 만들어 보았죠.
00:13:33더 터무니없고 멋지게요.
00:13:34그래서 가끔은 확신이 서지 않는 명령어들을 생각해내곤 합니다.
00:13:38그리고 커뮤니티를 통해 테스트를 해보죠.
00:13:39반응이 좋으면, 아, 이 기능으로 즐거움을 얻는 사람들이 더 많구나 하고 깨닫게 됩니다.
00:13:44아, 자, 보시죠.
00:13:49자, 시작합니다.
00:13:50좋습니다.
00:13:51아무 설명 없는 형용사는 그저 조금 더 그럴듯한 프롬프트일 뿐입니다.
00:13:54그러므로 여러분이 사용하는 단어가 무슨 뜻인지 에이전트에게 확실히 알려주어야 합니다.
00:13:59학습 데이터 안에 너무나 다양한 의미가 담겨 있기 때문에 정확히 짚어주어야 하죠.
00:14:05자, 또 다른 이야기가 있습니다.
00:14:08Impeccable을 자동으로 사용하는 방식을 만들어달라는 요청을 정말 많이 받았습니다.
00:14:14정말 엄청나요.
00:14:16지칠 정도로요.
00:14:17적어도 일주일에 한 번씩은 누군가 트윗을 보내 이렇게 말합니다. 멋진 아이디어가 있어요!
00:14:21그냥 Impeccable이 알아서 모든 작업을 다 하게 두면 안 되나요?
00:14:24이제 더 이상 어떤 명령어도 직접 고를 필요가 없게요.
00:14:26하지만 그건 핵심이 아닙니다.
00:14:27핵심은 여러분이 원하는 최종 결과물을 직접 제어할 수단을 제공하는 것입니다.
00:14:31이건 단 한 번에 디자인을 뚝뚝 만들어내는 도구가 될 수 없습니다.
00:14:34애초에 그런 의도가 아니에요.
00:14:36앞으로도 절대... 사실 지금도 관련 풀 리퀘스트가 올라와 있지만 이 이유 때문에 닫지 않고 있습니다.
00:14:41'오토(자동)' 기능은 없으며, 앞으로도 생기지 않을 것입니다.
00:14:46제 생각에는—다음 연사분들 중 일부에게는 좀 불편하게 들릴 수도 있겠지만—취향은 증폭될 수 없다고 봅니다.
00:14:54아 죄송합니다, 취향은 증폭될 수 있다고 생각합니다.
00:14:56저는 이걸 '증폭된 장인정신(amplified craft)'이라고 부릅니다.
00:14:58도구와 함께 협력하여 자신의 취향을 날카롭게 가다듬고 더 잘 드러내도록 만들 수는 있다고 생각해요.
00:15:04하지만 연구실에서 인공적으로 배양해 낼 수는 없다고 확신합니다.
00:15:07취향이란 정의상 본질적으로 맥락적이기 때문입니다.
00:15:12문화적인 것이죠.
00:15:13희소한 가치입니다.
00:15:15모두가 똑같은 것을 복제해 내기 시작하면, 그것은 정말 모호해지기 시작합니다.
00:15:20그리고 우리는 더 이상 그것을 취향이라고 여기지 않게 되죠.
00:15:23이것이 제 생각입니다.
00:15:24아주 뜨거운 감자인 주제라는 건 잘 알지만, 저는 제 도구들로 취향을 억지로 만들어내려 하는 게 아닙니다.
00:15:32제가 준비한 내용은 여기까지입니다.
00:15:33이번 세션은 디자인을 위한 올바른 통제 수준을 찾는 것에 관한 이야기였습니다.
00:15:36대단히 감사합니다.
00:15:37질문이 있으시다면 몇 가지 받을 시간도 여유가 있을 것 같네요.
00:15:40감사합니다.
00:15:54다음에 뵙겠습니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video