스크립트
00:00:00안녕하세요 여러분, 컨퍼런스에서 좋은 시간 보내고 계시길 바랍니다. 시작하기 전에,
00:00:19실제로 디자이너이신 분, 예를 들어 제품 디자인을 하시는 분은 몇 분이나 되나요? 손을
00:00:24들어주세요. 네, 한 분, 또 다른 분, 좋습니다. 나머지는 전부 엔지니어분들이라고 가정해도 되겠죠?
00:00:32네, 거의 그렇군요. 알겠습니다. 오늘 발표는 기술적인 내용보다는 실제 경험에 가까운,
00:00:40AI Engineer 컨퍼런스와 저희의 지난 다른 컨퍼런스들을 위해 어떻게 디자인을 만들었는지,
00:00:46그리고 AI가 어떻게 저를 도왔는지에 대한 이야기입니다. 오늘의 주제는 '디자이너 1명 플러스 AI',
00:00:54즉 디자이너인 저와 수백 개의 산출물입니다. 자, 시작해 볼까요.
00:01:00제 이름은 빈센트 웬디이고, AI Engineer에서 시니어 크리에이티브 디자이너를 맡고 있습니다.
00:01:07AI Engineer는 아주 작은 팀이라 현재 구성원은 12명에서 15명 정도밖에 되지 않으며,
00:01:15모두 각자의 일을 맡아 하고 있습니다. 그리고 AI는 모든 사람이 모든 일을 하는 데
00:01:24정말 큰 도움이 되는 수단이었다고 생각합니다. 이 정도 규모의 행사에서는 당연히 문제가 생기기 마련입니다.
00:01:33그 문제는 바로 규모의 문제, 혹은 도전 과제라고 부를 수 있는 것인데, 이를 어떻게 극복할까요?
00:01:40답은 기본적으로 자동화입니다. 이에 대해서는 이 발표의 후반부에 다루도록 하겠습니다. 이 발표를 준비할 때만 해도 참가자가 6,000명일 것으로 예상했는데, 지금은 7,000명이 되었습니다. 뭐, 우리로서는 좋은 일이죠.
00:01:53그리고 140곳이 넘는 스폰서, 300명이 넘는 스피커, 600개가 넘는 세션이 있는데 디자이너는 단 1명입니다.
00:02:10그리고 모두가 디자인을 필요로 합니다. 사소한 것 하나까지 전부 디자인이 필요하죠. 스폰서에게는 에셋이 필요하고, 스피커에게는 그래픽이 필요하며,
00:02:19길을 잃지 않도록 안내 표지판도 필요합니다. 이것이 바로 저희가, 제가 하는 일입니다. 스티커부터 시작해서—굿즈나 스티커 좋아하시나요?
00:02:31마음에 드셨으면 좋겠네요. 그 디자인도 제가 만들었으니까요. 랜딩 페이지, 스피커 발표 공지, 트랙 마스코트까지 여러분이 보시는 모든 것,
00:02:41여기서 보시는 대부분의 것들, 안내 표지판부터 디지털 사이니지, 랜딩 페이지까지 모든 것이
00:02:51하나의 산출물입니다. 그리고 1,000개의 디테일은 곧 실패할 수 있는 1,000가지 방법이 있다는 뜻이기도 합니다. 누락된 스폰서 로고는 엄청난 문제가 될 수 있고,
00:03:04일정이 잘못된 스피커 역시 큰 문제를 일으키기 때문입니다. 그토록 많은 종류의 산출물을 감당하는 것은 불가능해 보이지만, 네, 제 디자인 팀을 소개합니다.
00:03:16바로 저와 Devin, GPT, 그리고 Figma입니다. 그리고 지금 우리는 도구가 더 이상 문제가 되지 않는 단계에 와 있으며,
00:03:31오히려 진짜 문제를 마주하는 것이 우리의 강점이 되는 시점에 와 있습니다. 예를 들어, 누군가 제게 “AI Engineer를 디자인할 때 무엇에서 영감을 받았나요?”라고 물었을 때
00:03:41당시에는 답을 몰랐지만, 생각해 보니 결국 저에게 영감을 준 것은 문제 그 자체였습니다.
00:03:46이 AI Engineer를 디자인하도록 영감을 준 문제 말이죠. 이 부분은 발표 후반부에 더 자세히 다루겠습니다.
00:03:53자, 여러분은 2025년에 시몬 윌슨(Simon Willison)의 발표를 보신 적이 있나요?
00:04:00네.
00:04:01네, 아주 흥미롭죠? 그는 모든 LLM에게 벡터 파일을 만들어 달라고 요청했습니다.
00:04:11기본적으로 자전거를 타는 펠리컨을 그려달라는 것이었는데, 이는 테스트를 위한 것이었습니다.
00:04:16제가 다시 테스트해 보았을 때도 기초 모델은 여전히 이런 작업을 수행하고 있었고,
00:04:20디자이너인 제게는 바로 쓸 수 있는 수준이 아니었습니다. 하지만 디자이너로서 우리는 틀을 깨고 생각해야 하며,
00:04:26간단히 GPT에게 자전거를 타는 펠리컨의 정적 이미지, 예를 들어 PNG 파일을 만들어 달라고 요청한 뒤
00:04:33Figma에서 벡터화하여 바로 출시할 수도 있습니다.
00:04:37그러므로 우리는 LLM의 역량에만 얽매이지 않고 틀을 깨고 생각해야 합니다.
00:04:44그렇다면 이 규모의 문제를 어떻게 해결할까요?
00:04:52기본적으로 다섯 가지입니다. 첫째는 기반 다지기, 재사용 가능한 디자인,
00:04:56자동화된 워크플로, 검증된 산출물, 그리고 마찰 요소 제거입니다.
00:05:00기반 다지기는 우리가 제대로 구축해야 하는 가장 핵심적인 부분입니다.
00:05:06디자인 시스템, 타이포그래피, 색상, 컴포넌트 같은 요소들 말이죠.
00:05:11이것이 일단 구축되고 나면, 예를 들어 웹사이트를 만들 때
00:05:17이 체계 안에서 모든 것이 설정됩니다. 네, 이건 그냥 예시일 뿐입니다.
00:05:22기본 색상과 악센트 색상뿐만 아니라
00:05:26타이포그래피 및 기타 여러 요소들을 갖추고 있죠.
00:05:31그리고 여러분은 '아토믹 디자인(Atomic Design)'에 대해 들어보셨나요?
00:05:37제 이전 백그라운드가 제품 디자이너였기 때문에,
00:05:41사용자 중심 디자인을 만들어야 하는 환경이나 아토믹 디자인 개념에 꽤 익숙합니다.
00:05:46아토믹 디자인 같은 개념도 있잖아요. 가능한 가장 작은 단위를 만들고,
00:05:50그걸 마치 레고 블록처럼 조합해서,
00:05:53산출물로 완성하는 방식이죠. 이것은 현재 제 업무에서도 꽤 유용하게 쓰이고 있습니다.
00:06:02따라서 이러한 기반을 모두 설정하고 나면, 예를 들어
00:06:09저희는 Devin을 정말 많이 사용합니다. 사무실에서 우리 모두는 Devin을 씁니다.
00:06:14모두가 말이죠, 예를 들어 Devin을 아주 적극적으로 활용합니다.
00:06:18이 경우 저는 이렇게 요청하기만 하면 됩니다. “데스크톱 타이포그래피는 이걸 쓰고,
00:06:25모바일 타이포그래피는 저걸 써줘.”
00:06:29Claude나 다른 LLM들은 뜬금없는 폰트 크기를 제멋대로 적용하기 좋아한다는 걸 우리가 잘 알기 때문입니다.
00:06:35우리가 명확히 정의해주지 않으면 이전 작업물처럼 지저분한 결과물이 나오게 되죠.
00:06:41타이포그래피, 색상 등을 정의한 다음에는 재사용 가능한 디자인 단계로 넘어가게 됩니다.
00:06:50웹사이트에 브랜드 정체성이 제대로 반영되도록 설정하고 나면,
00:06:57AI Engineer의 다른 팀들, 예를 들어 마케팅 팀 같은 곳에서는
00:07:02기본적으로 모든 것을 직접 만들 수 있습니다. 이를 기반으로 이메일 디자인을 생성할 수도 있고,
00:07:08웹사이트를 바탕으로 전단지나 문서도 만들 수 있습니다.
00:07:13사전에 이미 정의되어 있기 때문입니다.
00:07:18디자인이 준비되면 그냥 반복해서 사용하기만 하면 됩니다.
00:07:24예를 들어 마스코트의 경우 거의 동일한 디자인을 유지하면서
00:07:28반복해서 활용합니다. 이런 요소들을 이미 정의해 두었다면
00:07:34모든 곳에 공통으로 적용되는 디자인을 하나 만들어낼 수 있습니다.
00:07:38그리고 이 부분이 제가 가장 이야기하고 싶어 하는 부분인데,
00:07:41바로 자동화된 워크플로입니다.
00:07:43예를 들어 방 밖을 나가서 둘러보면
00:07:48일정표가 있죠? 각 세션과 발표자들의 일정표말입니다.
00:07:52예전에는 Figma에서 수동으로 작업했었지만, 이제는 Devin을 사용합니다.
00:07:58어떻게 하는지 보여드리겠습니다.
00:08:02자,
00:08:04지금 우리는 최신 데이터를 불러옵니다.
00:08:08Devin에게 “이 방에 이런 레이아웃으로 해줘”라고 요청하기만 하면 됩니다.
00:08:14그러면 바로 내보내기를 해사 PNG로 다운로드할 수 있고,
00:08:18데이터도 정확해서 곧바로 USB 메모리에 담아
00:08:22화면에 띄울 수 있습니다.
00:08:25예전에는 불가능했던 일입니다.
00:08:28디자이너와 개발자 사이의
00:08:31마찰이 너무 컸기 때문입니다.
00:08:33픽셀 단위로 완벽하게 만들기가 어려웠습니다.
00:08:35디자이너가 엔지니어들에게
00:08:38“이게 디자인입니다”라고 전달한 뒤에도—
00:08:40아니, 디자인을 구현하는 엔지니어들에게 말이죠.
00:08:44“이대로 구현해 주세요”라고 요청하면
00:08:46픽셀 단위까지 완벽하게 만들어 오지 못합니다.
00:08:49피드백을 주고받는 과정이 정말 많죠.
00:08:52하지만 Devin을 쓰면 이렇게 말하면 됩니다.
00:08:54“조금 더 정확하게 만들어 줄 수 있어?”라고요.
00:08:58MCP를 연결할 수도 있고,
00:09:00만약 잘 안 되더라도
00:09:02스펙 시트나 그와 비슷한 문서를 제공하여
00:09:06여백이나 폰트 크기 같은 세부 사항들을
00:09:11명확하게 지정해 줄 수 있습니다.
00:09:14이것이 바로 우리가 스피커 공지용 그래픽을 만드는 방식입니다.
00:09:20발표자가 300명이 넘는데
00:09:22그걸 하나하나 직접 처리하는 건 불가능하잖아요?
00:09:26그래서 이런 도구를 만들었습니다.
00:09:29스피커 공지 페이지에 접속해서
00:09:32직접 직접 테스트해 볼 수도 있습니다. 예를 들어 이 화면처럼요.
00:09:38여기서 선택을 하고
00:09:40이름을 바꿀 수도 있습니다.
00:09:42네, 그렇습니다.
00:09:44예를 들어 이렇게 원하는 이름으로 변경할 수 있죠.
00:09:48가로 모드도 지원하며
00:09:51마찬가지로 불러올 수 있습니다.
00:09:53스피커의 프로필 사진과 세부 정보가 준비되어 있다면
00:09:56자동으로 내보내기가 됩니다.
00:09:59또한 트레이딩 카드 형태도 제공하는데
00:10:01생각보다 인기가 꽤 좋습니다.
00:10:05다양한 테마도 준비되어 있고요.
00:10:07이 모든 것이 픽셀 단위로 완벽합니다.
00:10:11예를 들어 이 카드처럼요.
00:10:14이것은 TBPN에서 영감을 받은 것입니다.
00:10:19그렇다면 어떻게 픽셀 퍼펙트로 결과물을 만들어낼 수 있을까요?
00:10:23바로 살펴보겠습니다.
00:10:25이전 프로세스는 제가 제품 디자이너로 커리어를 시작할 때만 해도
00:10:34단순히 이런 식이었죠.
00:10:37먼저 조사를 하고,
00:10:39제품을 빌드하는 전형적인 디자인 씽킹 과정을 거쳤습니다.
00:10:42피드백 루프를 돌리는 등의 과정 말입니다.
00:10:45하지만 지금 제게 그런 방식은 너무 구식이 되었습니다.
00:10:49저희 같은 경우 Slack, Figma를 거쳐
00:10:54다시 Slack으로 돌려보냅니다. 저희 Devin이 Slack에 상주하고 있거든요.
00:10:58그리고 필요한 모든 것을 배포합니다.
00:11:01예를 들어 MCP를 연결하거나 스펙 문서를 활용하는 식인데,
00:11:07이런 스펙 시트를 사용합니다.
00:11:10관심 있으신 분들을 위해 말씀드리면 Figma 플러그인입니다.
00:11:15무료입니다.
00:11:15이 플러그인은 기본적으로 PDF에 주석을 달아줍니다.
00:11:20사실 디자이너들은 레이어 이름을 잘 정리하지 않죠.
00:11:24그래서 그냥 '프레임 3', '프레임 4' 같은 이름들이 많습니다.
00:11:29하지만 LLM은 이걸 찰떡같이 알아듣습니다.
00:11:31모든 여백, 폰트 크기,
00:11:37그리고 색상 같은 요소들을 완벽하게 정의해 줍니다.
00:11:40픽셀 단위로 완벽한 제품을 개발하는 데 확실히 도움이 될 겁니다.
00:11:44그리고 우리에게는 방금 전, 오늘 올라온 사진들이 있는데요,
00:11:51연사별로 썸네일을 만들어야 하잖아요?
00:11:55그래서 데빈에게 이 사람이 누구냐고 물어봤습니다.
00:11:58그랬더니 꽤 잘 해내더라고요.
00:12:01마치 틴더 같은 느낌으로 말이죠,
00:12:06동일 인물인지 아닌지 판별하는 식입니다.
00:12:09그리고 꽤 정확하다고 생각합니다.
00:12:11제이슨 류예요.
00:12:12맞습니다.
00:12:13그리고 우리는 이걸 컨텍스트 용도로 활용할 수 있습니다.
00:12:18예전에는 썸네일을 만들 때,
00:12:19사진작가가 찍은 모든 사진 코드를 일일이 찾아야 했고
00:12:23가능하다면 시간대별로 하나씩 뒤져봐야 했습니다.
00:12:27하지만 이제는 그냥 “아, 이 사람이 제이슨 류구나” 하고
00:12:30사진을 다운로드한 뒤,
00:12:31썸네일에 바로 붙여넣으면 됩니다.
00:12:34정말 놀랍죠.
00:12:36제 말은, 우리가 살고 있는 이 세계가 사실상,
00:12:40디자이너인 제 입장에서 보면 이미 정점에 달해 있다는 겁니다.
00:12:43이보다 더 뭘 더 바랄 수 있겠어요, 그렇죠?
00:12:48이미 자동화할 수 있는 것들이 있고,
00:12:50디자인을 빠르게 만들어주는 도구들도 이미 있으니까요.
00:12:54기본적으로 필요한 건 오직 문제뿐입니다.
00:12:56풀어 가치가 있는 문제가 생기기만 하면,
00:12:59기본적으로 무엇이든 해결할 수 있으니까요.
00:13:03다시 본론으로 돌아와서요.
00:13:04이렇게 또 삼천포로 빠졌네요.
00:13:06네.
00:13:07그리고-- 네.
00:13:09이것도 우리가 테스트해 본 정말 놀라운 점입니다.
00:13:11아시다시피 우리 스폰서가 수백 개나 되잖아요?
00:13:16140개가 넘죠.
00:13:18그리고 로비에 가보시면 아시겠지만,
00:13:21모든 스폰서가 들어간 현수막이 있습니다.
00:13:24그래서 저는 기본적으로 데빈에게 이렇게 말했습니다. 이 그래픽에--
00:13:29혹시 빠진 로고가 없는지 확인해 줄 수 있냐고 물었죠.
00:13:33제가 직접 테스트해본 결과 정확도가 100%였습니다.
00:13:38정말 대단한 일이죠.
00:13:40여러분께 굿즈로 나눠드린 티셔츠에도 똑같은 방식을 사용했습니다.
00:13:48그리고 놀랍게도 데빈은 시각적인 요소들을 시각화하는 법을 알고 있더군요.
00:13:54시각적으로 무언가를 감지하는 방법 말입니다.
00:13:56이건 정말 놀라웠습니다.
00:13:58인간인 우리야 실수를 할 수 있으니까요.
00:14:02아, 알고 보니 작은 로고 하나가 빠져 있었네, 하는 식으로요.
00:14:05하지만 이런 방식을 쓰면 더블 체크를 할 수 있습니다.
00:14:09즉, 인간과 AI를 결합하는 거죠.
00:14:13그야말로 나만의 QA 팀이 생긴 셈입니다.
00:14:15그리고 마찰을 줄이는 거고요.
00:14:17이것이 바로 사고방식의 전환입니다.
00:14:21디자이너로서 우리는 디자이너가 아니라 사용자의 관점에서 생각해야 합니다.
00:14:26그렇죠?
00:14:27모든 사용자에게는 저마다의 필요가 있으니까요.
00:14:29예를 들어 여기 행사장 약도를 따라 걸어본다고 해봅시다.
00:14:33기본적으로 저는 참가자가 되어 등록처로 가고,
00:14:39어디로 가야 할지--
00:14:41길찾기 안내와 QR 코드를 확인하는 등의 과정을 상상해 봅니다.
00:14:46여러분들이 길을 잃지 않고 방이나 다른 장소를 잘 찾아갈 수 있도록
00:14:50기본적으로 모든 것이 연결되어 있어야 합니다.
00:14:55그리고 진짜 업무는 예외 상황을 처리하는 것입니다.
00:15:00예를 들어서... 아, 제가-- 네.
00:15:03예를 들어 일정 변경 사항이 생겼다고 해봅시다.
00:15:09우리가 이 시스템을 만들었을 때는 마침 수정 버튼이 없었어요.
00:15:13그런데 어느 날 아침에 갑자기 일정을 업데이트해야 한다는 연락이 온 겁니다.
00:15:19당연히 수정 버튼은 없었죠.
00:15:21그래서 저는 그냥 데빈에게 물어봤습니다. 수정 버튼 좀 만들어 줄 수 있냐고요.
00:15:25그러더니 뚝딱 만들어 주더군요.
00:15:26이제 모든 걸 변경한 다음 PNG로 내보내 화면에 다시 띄울 수 있게 되었습니다.
00:15:32정말 편리하지 않나요?
00:15:34이러한 예외 상황들은-- 예전에는 전부 수동으로 처리해야 해서 불가능했던 일입니다.
00:15:41하지만 이제는 훨씬 더 쉬워졌습니다.
00:15:43결론적으로 규모의 문제를 해결하려면 실제로 아주 작게 생각해야 합니다.
00:15:51상상할 수 있는 가장 작은 부분까지 생각하세요.
00:15:53잘못될 수 있는 모든 가능성을 생각하고 미리 해결하려고 노력하는 겁니다.
00:15:59또한 지금은 기본적으로 모든 것을 자동화할 수 있는 시대입니다.
00:16:04이 시점에서 문제를 마주하는 것은 오히려 여러분에게 이득이 될 것입니다.
00:16:11그 덕분에 더 나은 제품을 내놓고 훌륭한 결과물을 완성할 수 있을 테니까요.
00:16:18네, 제가 공유해 드릴 내용은 여기까지입니다.
00:16:20제 발표가 여러분께 조금이나마 도움이 되었기를 바랍니다.
00:16:23이상입니다.
00:16:26감사합니다, 여러분.
00:16:29정말 감사합니다.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기