‘코딩 경험 0’인 디자이너의 자동화 시스템 구축기

사내 굿즈 신청과 재고를 엑셀로 관리하던 일을 자동화하고, 관람객의 시선에 반응하는 3D 미디어 아트를 구현하기까지. 디자이너가 하고 싶은 일과 실제로 구현할 수 있는 일 사이에는 늘 시간과 기술의 장벽이 있었습니다. 그런데 원티드랩 브랜드 디자이너들은 AI를 활용해 그 간격을 조금씩 좁히고 있어요.

코딩 경험 없이 사내 굿즈 관리 사이트를 만들고, 다른 팀에 뉴스레터 제작 도구를 건네기도 했죠. 기획한 인터랙션을 직접 구현해 보며 디자인을 다듬는 방식도 달라졌습니다. 원티드랩 디자이너 다섯 명은 어떤 문제에서 출발해 무엇을 만들었을까요?

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

1. 100% 자동화로 수기 업무를 없앤 사내 명함 신청 서비스

전 구성원의 명함을 신청받는 일은 브랜드 디자이너들의 반복 업무 중 하나였습니다. 신청 내용을 엑셀로 받아 수기로 기입하고 발주하다 보니, 복사해서 붙여넣는 과정에서도 오탈자와 같은 실수가 생길 수 있었죠. 브랜드 디자이너 강한빈 님은 이러한 리소스를 줄이고자 빠르게 사내 명함 신청 시스템의 AX(AI Transformation)를 추진했습니다.

3가지 정보만 입력하면 끝나는 자동화 프로세스

한빈 님이 구축한 명함 신청 페이지는 신청자가 이름, 핸드폰 번호, 이메일 단 3가지만 입력하도록 설계되었습니다. 신청 이유와 조직 직책을 선택하고 팀 명칭을 검색하면 영문 정보까지 자동으로 기입됩니다. 가상 미리보기 명함을 확인한 뒤 신청을 완료하면 명함 드라이브로 파일이 자동 업로드되어 디자이너의 별도 검수가 전혀 필요 없는 100% 자동화 시스템이 완성되었습니다.

명함 신청 서비스 화면

명함 신청 서비스 개발 워크플로우

Step 1. 아키텍처 정의 및 JSON 프롬프트 작성: ChatGPT를 활용해 어떤 서비스 방식과 API를 연결할지 구조를 정의한 뒤 JSON 프롬프트를 작성했습니다. 자연어보다 JSON 구조로 전달할 때 클로드(Claude)가 개발 환경과 맥락을 훨씬 명확하게 이해하기 때문입니다.

Step 2. 클로드 기반 개발 & 디자인: 생성된 JSON 파일을 바탕으로 클로드에서 본격적인 개발과 디자인을 진행해, 설계부터 완성까지 단 이틀 만에 서비스를 구현했습니다.

"만들고 싶은 게 있다면 일단 기획부터 구현까지 직접 경험해 보세요. 개발 지식이 없더라도 문제를 정의하고 해결해 나가는 경험 자체가 디자이너에게 강력한 무기가 됩니다."

- 원티드랩 브랜드경험팀 강한빈

2. 피그마와 클로드 코드로 완성한 3D 인터랙티브 모션

이벤트 페이지의 첫 화면에 놓인 지구본을 마우스로 돌려볼 수 있다면 어떨까요? 브랜드 웹디자이너 김혜인 님은 원티드의 글로벌 사업 확장과 네트워크 연결을 시각화하기 위해, 이벤트 페이지의 첫인상을 결정짓는 히어로(Hero) 영역에 마우스 움직임에 따라 회전하는 3D 지구본 모션을 적용했습니다.

이벤트 페이지 내 히어로 영역 모션

과거에는 디자이너가 섬세한 인터랙션을 기획하더라도 개발자와의 전달 및 검토 과정이 길어져 포기하는 경우가 많았는데요. 혜인 님은 바이브 코딩을 통해 개발자 협업 없이 직접 인터랙션을 구현하고 실시간으로 검증했습니다.

이벤트 페이지 내 히어로 영역 모션 개발 워크플로우

Step 1. 피그마 & 클로드 코드 연동: 피그마(Figma)로 기본 디자인을 잡은 후 MCP를 연동했습니다.

Step 2. 실시간 코딩 및 반영: 피그마 링크를 VS 코드(Visual Studio Code)의 클로드 코드(Claude Code)로 불러와 프롬프트를 입력하면, 클로드가 디자인을 코드로 변환하고 파일 생성 및 수정 사항까지 실시간으로 반영해 줍니다. VS 코드에서 구현된 화면을 미리 보며 수정할 부분도 바로 요청할 수 있죠.

VS 코드와 연결된 클로드

이렇게 작업하면서 혜인 님은 머릿속에 그린 움직임을 화면에서 확인하며 완성도를 높일 수 있었습니다. 디자인을 전달하는 데서 끝나지 않고 직접 구현해 보며 표현을 다듬게 된 거죠.

3. 질문에 음성으로 답하고 시선까지 맞추는 AI의 탄생

브랜드 디자이너 김석준 님은 원티드의 직장인 컨퍼런스 <하이파이브 2026> 현장에 인터랙티브 미디어 ‘에스크 엔노이아(Ask-Ennoia)’를 선보였습니다. 원티드의 자체 AI 에이전트 플랫폼 ‘엔노이아’를 대형 미디어 LED 화면 속 시각적 존재로 표현하고, 관람객이 QR코드로 질문을 보내면 AI의 음성 답변을 받을 수 있도록 했죠.

<하이파이브 2026>에 설치된 에스크 엔노이아

웹캠으로 관람객의 얼굴을 인식하면 화면 속 엔노이아가 관람객을 바라보는 듯 움직이며 반응합니다. 엔노이아 표면에는 웹캠 영상의 반사 효과를 더해 현장과 화면이 연결된 느낌을 구현했어요. 석준 님은 클로드를 활용해 이러한 3D·웹 기능을 구현하고, 엔노이아가 관람객의 질문에 답하도록 구성했습니다.

얼굴을 인식 및 트래킹하는 에스크 엔노이아

에스크 엔노이아의 시선 트래킹 & 3D 인터랙션 기능

1. 얼굴 인식 및 트래킹: 웹캠으로 관람객의 얼굴을 인식하고, 이를 바탕으로 3D 구체가 관람객을 바라보는 듯 반응합니다.
   
2. 웹캠 반사광 실시간 맵핑: 웹캠에 찍힌 관람객과 전시장 현장 모습을 3D 구체 표면에 반사광 형태로 실시간 맵핑해, 마치 현실 공간을 비추는 거울 구체처럼 입체적이고 인공지능적인 질감을 완성했습니다.

💡놓치면 아쉬운 꿀팁

“예외 상황 QA는 사람이 일일이 하지 말고, 다른 LLM에게 시나리오를 산출하게 하세요!”

전시나 행사 현장에서 발생할 수 있는 부적절한 질문이나 예외 상황에 대비해 QA를 진행했는데요, 이때 사람이 금지어를 하나씩 지정하지 않았습니다. 대신 다른 LLM을 활용해 예상 가능한 부적절한 질문과 예외 상황을 생성해 사전 점검에 활용했죠.

4. 코딩 경험 ‘0’으로 일주일 만에 완성한 사내 굿즈 관리 시스템

브랜드 디자이너 백나은 님은 사내 브랜드 굿즈 재고 관리 및 지급 신청을 위한 관리자 웹사이트 ‘원티드 스토어’를 구축했습니다. 기존에는 부서별 굿즈 신청을 엑셀로 수기 관리했지만, 구성원이 신청하면 슬랙 알림이 오고 관리자 승인 시 재고가 자동 차감되는 시스템으로 전환해 루틴 업무 효율을 극대화했어요. 

사내 굿즈 관리 사이트 ‘원티드 스토어’

‘원티드 스토어’내 사내 굿즈 신청 창

나은 님은 시작할 때 코딩 경험이 전혀 없었다고 합니다. 대신 기존 엑셀 화면을 캡처해 클로드에 보여주며 “이 작업을 자동화하는 사이트를 만들어 줘”라고 요청했어요. 참고하고 싶은 굿즈 사이트의 이미지도 함께 전달해 원하는 모습과 기능을 구체화했습니다.

클로드를 이용한 바이브 코딩

‘원티드 스토어’의 레퍼런스인 ‘Open AI 10주년 공식 굿즈샵’

사이트의 기본 틀을 만드는 데는 하루, 오류를 고치고 완성도를 높이는 데까지는 총 일주일이 걸렸습니다. 익숙한 업무 화면과 해결하고 싶은 불편을 보여주는 것만으로도 첫 시도를 시작할 수 있었던 거죠.

스크린샷과 레퍼런스로 완성한 클로드 개발 워크플로우

Step 1. 이미지 기반 요청: 기존에 사용하던 수기 엑셀 화면을 스크린샷으로 찍어 클로드에게 전달하며 “이 작업을 자동화하는 사이트를 만들어줘”라고 요청했습니다.

Step 2. 레퍼런스 활용: 참고하고 싶은 레퍼런스 사이트(OpenAI 굿즈 페이지) 이미지를 함께 제시하며 UI 및 기능을 다듬어 나갔습니다.

코딩 경험이 없다면 지금 쓰는 엑셀 화면을 캡쳐하고, 참고할 사이트 이미지와 함께 원하는 동작을 설명해 보세요. 처음 만든 화면을 실행해 본 다음 오류와 불편한 점을 하나씩 고치는 방식이 나은 님의 출발점이었습니다.

5. 디자이너 한 명이 만든 모듈형 ‘뉴스레터 빌더 사이트’

브랜드 웹디자이너 박초희 님은 요즘 개발자에게 디자인 파일을 전달하는 대신, 직접 개발과 퍼블리싱을 하고 있습니다. 대표적인 사례가 바로 누구나 브랜드 가이드라인과 디자인 일관성을 유지한 채 원하는 형태의 뉴스레터를 제작할 수 있는 모듈형 ‘뉴스레터 빌더 사이트’입니다. 구성원 누구나 원하는 모듈을 조합한 뒤 ‘HTML 복사’ 버튼을 눌러 메일 발송 툴에 붙여넣기만 하면 됩니다.

모듈형 뉴스레터 빌더 사이트

모듈형 뉴스레터 빌더 사이트 워크플로우

Step 1. 피그마를 활용한 디자인 작업: 피그마를 활용해 뉴스레터에 들어갈 다양한 레이아웃을 바탕으로 한 초안 디자인 시스템을 구성했습니다.

Step 2. 클로드 코드 & VS 코드를 활용한 라이브 개발: 피그마 디자인 초안 링크를 VS 코드의 클로드 코드에 전달했습니다. 클로드 코드가 피그마 에셋과 디자인 맥락을 읽어와 실시간으로 코드를 생성하는 과정을 라이브 모니터링하면서 UI 모듈과 빌더 화면을 구축했습니다.

뉴스레터는 받는 사람이 어떤 메일 프로그램으로 여느냐에 따라 화면이 다르게 보일 수 있습니다. 초희 님은 이를 고려해 클로드 코드에 이메일용 테이블 기반 HTML로 만들어 달라고 요청했어요. 완성한 뉴스레터를 실제로 발송해 테스트했고, 코드 오류는 발견되지 않았다고 합니다.

구독자가 받아보는 뉴스레터 메일

AX를 위해 지금 바로 시작할 수 있는 것

처음부터 거창한 서비스를 만들 필요는 없습니다. 매번 엑셀에 일일이 옮겨 적는 정보나, 구현이 어려워 접어뒀던 작은 움직임 하나도 좋은 시작점이 될 수 있어요. 

원티드랩 디자이너들처럼 지금 업무에서 바꾸고 싶은 장면을 찾아 AI에 설명해 보세요. 생각보다 빠르게, 직접 움직이는 결과물을 만나게 될지도 모릅니다.