AI 시대, 디자이너는 끝났을까?ㅣ원티드랩 프로덕트디자인팀의 클로드 코드 정복기

인사이트 2026.09.17

“AI가 발전할수록 디자이너의 일자리가 사라질 것이다”. 요즘 이런 이야기 많이 들어보셨죠?

그런데 원티드랩 프로덕트디자인팀에서는 정반대의 일이 벌어지고 있습니다. 며칠 걸리던 프로토타입을 순식간에 만들고, 코딩을 할 줄 몰라도 직접 서비스를 구현하고, 개발자에게 요청하던 작업까지 디자이너가 직접 해내기 시작했거든요. 그 중심에는 클로드 코드를 비롯한 AI 도구가 있습니다.

그 결과 프로덕트디자인팀은 오히려 기획과 프로토타이핑, 개발 단계까지 업무 영역을 확장하며 그야말로 ‘미친 성과’를 만들어내고 있습니다. AI 시대 디자이너가 어떻게 스스로 미래를 만들어 갈 수 있는지, 원티드랩 프로덕트 디자이너들의 생생한 목소리를 통해 전해드립니다.

*본 아티클은 유튜브 ‘채널 원티드’의 ‘왓츠인마이 AI’ 영상을 바탕으로 제작되었습니다.

디자인 고민 90% 줄여주는 ‘템플릿 사이트’의 등장

지난 3월, 프로덕트디자인팀은 원티드의 제품 경험을 만들기 위한 디자인 시스템 ‘몽타주(Montage)’를 오픈 소스 형태로 공개했습니다. AI 에이전트가 디자인 맥락을 이해할 수 있도록 설계된 것이 몽타주의 가장 큰 특징이에요. 자체 구축한 전용 MCP(Model Context Protocol)를 통해 AI와 디자인 시스템을 직접 연결해 바이브 코딩에 적극 활용하고 있죠. 원티드의 디자인 언어를 바탕으로 만든 코드와 리소스, UX 가이드라인으로 구성돼 구성원 누구나 효율적으로 제품을 만들도록 돕습니다.

원티드 디자인 시스템 몽타주

이어 프로덕트 디자이너 김도은 님은 사내 디자이너 및 비개발자들이 바이브 코딩을 할때 디자인 시스템을 더 잘 적용할 수 있게 도와주는 ‘템플릿 사이트’를 제작해 배포했어요. 템플릿 사이트가 실무자들의 일을 어떻게 줄여주는지 살펴볼게요.

원티드랩 구성원들의 몽타주 템플릿 사이트 사용법

Step 1. 템플릿 사이트 설치: 템플릿 사이트의 설치 명령어를 복사한 후, 터미널을 열어 클로드(Claude)에 로그인하고 붙여넣기만 하면 설치가 완료됩니다.

Step 2. 자연어로 로컬 개발: 원하는 디자인 템플릿을 선택해 복사한 뒤, 클로드 코드에 “이 템플릿을 사용해서 이벤트 결제 페이지 만들어 줘”와 같이 자연어로 요청합니다. 그러면 AI가 로컬 환경에서 코드를 작성하고 동작하는 페이지를 즉석에서 만들어 줍니다.

비개발자 구성원이 몽타주 템플릿으로 만든 페이지

이때 몇 가지 팁이 있는데요, 우선 클로드 코드에 깃허브(GitHub)를 연동해 두면 이전에 작업하던 맥락을 그대로 이어서 작업을 진행할 수 있습니다. 또 클로드에 'Add Template’ 스킬을 등록하면 매번 반복되는 템플릿 추가 작업을 자동화할 수 있어요. 예를 들어 “결제 템플릿 추가해 줘”라고 요청하면, 클로드가 워크플로우에 따라 자동으로 피그마 링크를 달라고 요청합니다. AI가 미리 정의된 순서대로 단계를 안내해 주며 작업을 진행하기 때문에, 사람이 실수로 프로세스를 까먹는 일이 없어 엄청나게 빠르게 작업을 끝낼 수 있어요.

놀랍게도 이 템플릿 사이트를 구현하는 데는 하루도 채 걸리지 않았습니다. 클로드 코드와 함께해서 가능했던 일이죠. 물론 완벽하게 원하는 형태로 동작하도록 고도화하는 데는 클로드와의 끊임없는 피드백 과정이 필요했어요.

“잘못 구현된 부분이 있으면 “이거 왜 이렇게 나오게 했어? 다시는 이런 실수 하지 않게 업데이트해 줘”라고 따끔하게 학습시키며 시스템을 완성했습니다. AI를 사용하면서 예전보다 제가 할 수 있는 일의 영역이 훨씬 넓어졌다는 걸 실감했어요.”

- 원티드랩 프로덕트디자인팀 김도은

💡놓치면 아까운 꿀팁

AI를 쓰다 보면 특유의 로봇 같고 어색한 어조가 묻어나기 마련이죠. 그럴 땐 클로드에 ‘Im-Not-AI’ 스킬을 등록해 사용해 보세요. 어색한 AI식 말투를 자연스럽고 완벽한 한국어로 바꿔 주는 무료 기능이라 보고서나 문구를 작성할 때 유용합니다.

출처: epoko77-ai 깃허브

디자이너 한계를 뛰어넘어 만든 ‘원티드 버디’

기존의 원티드 홈 화면은 탐색 위주의 공간이라 모든 사용자에게 동일한 화면이 노출되었습니다. 프로덕트 디자이너 박민주 님과 김슬기 님은 홈 화면에서 사용자의 커리어 상태와 선호도를 기반으로 필요한 순간에 맞춤형 도움을 제공하는 ‘원티드 버디(Wanted Buddy)’ 기능을 만들었어요.

원티드 버디

기획부터 스펙 문서 작성까지, AI와 함께한 여정

기획 초기 단계에서 사용자의 개인 선호를 수집하기 위한 스펙 문서를 작성할 때 클로드를 적극 활용했습니다. 수집하려는 다양한 선호도 항목들을 정리해 클로드 코드에 던진 뒤, “이 항목들이 화면에 노출될 때 어떤 우선순위로 배치해야 가장 사용성이 좋을까?” 하고 의견을 묻는 식이었죠.

클로드가 제안한 검증 결과를 바탕으로 자동으로 마크다운 포맷의 기획 스펙 문서를 작성합니다. 정리된 마크다운 스펙은 앞서 소개한 자동화 스킬을 활용해 프로덕트디자인팀이 공동으로 관리하는 공식 기획 스펙 문서 페이지에 즉시 자동으로 업데이트되도록 했어요.

“프로덕트 디자인에 AI를 사용할 때 가장 큰 장점은,디자이너가 기획한 아이디어를 직접 구현하고 빠르게 검증할 수 있다는 점이에요. 단순히 기획 내용을 화면으로 구체화하는 데 그치지 않고, 아이디어를 실제로 동작하는 프로토타입으로 만들어 사용 흐름까지 직접 경험해볼 수 있거든요.”

- 원티드랩 프로덕트디자인팀 박민주

피그마 Dev 모드에서 UI 프롬프트를 복사해 클로드 코드에 입력하면 디자인이 적용된 프로토타입 코드가 바로 구현됩니다. 기존에도 프로토타입을 통해 아이디어를 검증할 수 있었지만, AI를 활용하면 더 짧은 시간 안에 실제 서비스에 가까운 형태로 만들어보고 구체적인 데이터와 사용 흐름까지 확인할 수 있어요.덕분에 기획 단계에서 다양한 아이디어를 빠르게 시도하고, 직접 사용해보며 문제를 발견하고 개선하는 과정을 반복할 수 있습니다. 결과적으로 AI를 활용하며 아이디어를 구체화하는 속도와 검증의 깊이를 동시에 높이게 된 셈이죠.

AI로 3D 캐릭터 만들기, 단 3단계면 충분해요

원티드 버디 서비스에 들어가는 귀여운 입체 캐릭터는 3단계로 이뤄진 AI 워크플로우로 제작되었습니다. 캐릭터 제작을 100% AI에만 맡기지 않고, 디자이너의 드로잉 역량과 AI 툴의 시너지를 결합한 하이브리드 방식을 사용했어요.

초기 스케치(위)와 완성된 3D 캐릭터(아래)

Step 1. 아이디어 구체화 및 러프 스케치

캐릭터의 성격과 고유 테마를 부여한 뒤, 표현하고자 하는 캐릭터의 이목구비와 비율을 담아 2D로 러프하게 밑그림을 그립니다.

Step 2. 3D 변환 및 외형 다듬기

스케치 이미지를 캡처해 나노바나나(Nano Banana) 등의 생성형 이미지 AI 툴에 입력하고, 3D 캐릭터로 변환해 달라고 요청합니다. AI가 스케치 이미지를 그대로 따오기 때문에 처음에는 결과물이 엉성해 보일 수 있어요. 하지만 전체 형태가 마음에 들면 그때부터 세부 묘사를 조정해 나갑니다. “이빨은 딱 한 개만 넣어줘”, “입은 조금 더 작게 조절해 줘” 같이 세부 피드백을 지속적으로 입력하며 원하는 최종 형태의 입체감을 뽑아냅니다.

캐릭터 외형이 완성되면 클로드를 활용해 다양한 각도와 표정을 담은 ‘캐릭터 시트(Character Sheet)’를 생성합니다. 이 캐릭터 시트가 다음 단계에서 일관성을 유지하는 핵심 무기가 됩니다.

Step 3. 일관성 있는 모션 그래픽 구현

캐릭터가 걷거나 점프하고 뒤를 도는 등의 동적인 애니메이션을 만들기 위해 비디오 생성 AI인 ‘클링(Kling)’을 활용합니다.

클링의 '주체 생성(Subject Reference)' 영역에 2단계에서 미리 만들어 둔 캐릭터 시트를 이미지 인풋으로 통째로 집어넣습니다. 여러 각도가 포함된 캐릭터 시트를 레퍼런스로 고정한 상태에서 “점프하는 모션을 만들어 줘” 같은 프롬프트를 작성하면, 제가 창작한 고유한 캐릭터 외관을 완벽하게 유지하면서 왜곡 없이 자연스럽게 역동적으로 움직이는 고품질 3D 모션 그래픽이 탄생합니다.

“AI 툴에 대한 경험이 적다 보니 회사 메인 서비스가 아닌 아주 가벼운 테스트용 프로젝트부터 부담 없이 적용해 보았는데, 생각보다 다루기 쉽고 눈앞에서 무언가 뚝딱 만들어지는 재미를 느끼면서 순식간에 자신감이 붙었습니다. 지금은 누구보다 적극적으로 AI를 사용하는 전도사가 됐죠.”

- 원티드랩 프로덕트디자인팀 김슬기

한 달 만에 신규 서비스를 론칭할 수 있었던 비결

일반적으로 기업이나 사용자들이 타깃 리서치를 진행하려면 대상자 섭외, 설문 설계, 결과 분석까지 엄청난 시간과 비용이 소모됩니다. 원티드는 방대한 유저 데이터를 바탕으로 누구나 AI와 대화하며 간편하게 설문을 만들 수 있는 ‘원티드 서베이’ 서비스를 만들었습니다. 목적과 타깃, 결과 활용 방법 등을 입력하면 AI가 적합한 질문 세트를 즉시 자동 설계합니다.

프로덕트 디자이너 박민선 님은 피그마 Dev 모드와 클로드 코드를 활용해 원티드 서베이의 디자인을 완성했어요. 단 한 달 만에 마크업부터 프론트엔드 동작성까지 완벽하게 구현할 수 있었죠.

원티드 서베이

개발부터 QA까지 디자이너가 직접 할 수 있다고?

몽타주 덕분에 클로드가 코드를 짤 때 컴포넌트의 간격, 색상, 레이아웃 규격을 매우 쉽게 이해할 수 있습니다. 덕분에 개발 효율이 상상을 초월할 정도로 높아졌죠.

이전에는 이미지를 바꿀 때마다 디자이너가 에셋을 내보내기(Export)해서 개발자에게 전달하고, 개발자가 적용하면 디자이너가 눈으로 다시 크로스 체크하는 과정을 거쳐야 했어요. 지금은 디자이너가 로컬 환경에서 화면을 보다가 바꾸고 싶은 그래픽이나 에셋이 생기면, 즉시 클로드 코드를 통해 자연어로 개발 코드를 직접 수정할 수 있습니다. 피그마에서 해당 에셋의 링크를 따거나 프롬프트를 복사해 클로드 코드에 “이 에셋으로 그래픽 변경해 줘”라고 입력하면 실시간으로 코드가 완벽하게 업데이트됩니다.

클로드 코드로 디자인을 수정하는 모습

AI와 협업하면서 새롭게 생긴 고민들

물론 AI와 일하는 게 마냥 편하기만 한 것은 아닙니다. 패러다임이 바뀌면서 완전히 새로운 형태의 허들이 생겼거든요.

우선 손으로 그리던 일러스트나 레이아웃 배치 등 단순 노동 시간은 엄청나게 줄었지만, AI를 똑똑하게 제어하고 서비스의 복잡한 논리를 정돈하기 위한 기획서 작성 및 스펙 문서 작업이 기하급수적으로 늘어났습니다.

또 클로드에게 여러 개의 복잡한 작업을 동시에 시켜두고 결과를 기다리는 시간이 생깁니다. 겉보기에는 아무것도 안 하고 멍하니 모니터만 보고 노는 것처럼 보일 수 있지만, 사실 머릿속은 풀가동 중이에요. 여러 프로세스가 어디까지 진행되었고 어떤 에러가 났는지 일일이 실시간으로 확인하고 모니터링해야 하기 때문에 정신적인 피로도가 꽤 큽니다.

💡놓치면 아까운 꿀팁

많은 분이 클로드에 화면 캡처 스크린샷을 업로드하고 비슷하게 코드로 짜달라고 요청합니다. 하지만 이미지만 주면 대략적인 레이아웃만 흉내 낼 뿐, 간격이나 서체가 아주 미세하게 틀어집니다. 이때 피그마 공식 MCP를 활용해 화면의 피그마 링크(Figma Link)를 클로드에 직접 제공해 보세요. 클로드가 링크를 타고 들어가 피그마 내부에 세팅된 컴포넌트 간격, 색상 코드값, 폰트 스타일, 오파시티 값까지 정확하게 읽어와 사람이 짠 것처럼 정밀하고 완벽한 품질의 UI 코드를 구현해 줍니다.

디자이너가 ‘AI 포모(FOMO)’를 해소하는 법

사실 작년부터 AI가 무서운 속도로 발전하기 시작하면서, 팀 내부에서 “우리 업무의 대부분이 곧 AI로 대체되어 도태되는 건 아닐까?”라는 막연한 불안감이 생긴 것도 사실입니다. 하지만 프로덕트디자인팀은 주저앉아서 미래를 두려워하기보다는 직접 부딪혀보기로 했어요. 매주 수요일 AI 스터디를 정기적으로 진행하며 AI에 대한 불안감을 해소하는 동시에 디자인 감각을 한 단계 더 끌어올렸죠.

“팀을 리드하는 입장에서 AI에 대한 지식 없이 팀원들에게 AI를 배우라고 지시하기만 해선 안 된다고 생각했어요. 그래서 제가 미리 AI 도구를 다뤄보고 어려운 점이나 해결책을 명확하게 파악한 다음에 가이드라인을 드리려고 노력해요. 시간이 지나면서 팀원분들 모두 AI 고수가 되어서, 이젠 굳이 제가 알려드리지 않아도 스스로 훌륭하게 해결하시는 경우가 훨씬 더 많습니다.”

- 원티드랩 UX 부문 부문장 김석희

AI 시대의 디자이너는 코딩과 기획의 장벽을 넘어, 비즈니스 아이디어를 실현하는 ‘프로덕트 메이커(Product Maker)’로 진화하고 있습니다. 도구의 두려움을 극복하고 작은 범위에서부터 AI를 놀이처럼 접해 보세요. 퇴근은 빨라지는 건 물론이고, 여러분이 만들 수 있는 프로덕트의 한계가 완전히 사라질 거예요.

함께 보면 좋아요