AI로 프로덕트 디자이너의 업무효율 4배 높이기

AI시대에 변화하는 프로덕트 디자이너의 역량

by 숨숨

안녕하세요! 저는 주유소 정보 제공앱 오일나우에서 일하고 있는 2년 차 주니어 프로덕트 디자이너입니다.

짧은 경력이지만 그간 얻은 인사이트를 브런치로 기록하려고 해요.

오늘은 바이브 코딩으로 업무 생산성을 4배 개선한 경험을 알려드릴게요.




디자이너가 코딩을 시작한 이유


오일나우는 주유/세차를 QR로 결제할 수 있는 서비스 ‘오일페이’를 운영하고 있어요.

오일페이 사용 가맹점 하나를 준비할 때마다 주유기별로 QR 스티커를 만드는 작업이 필요한데요.

문제는 한 번 작업할 때마다 1시간이 소요되는 비효율이 있었어요.

Frame 48097336ㅠㅠ.png 딥링크를 하나씩 생성하고 QR코드도 하나씩 만드는 가내수공업



똑같이 생긴 스티커 몇 장 만드는데 1시간이나 작업해야 하나요?


디자이너는 QR 스티커를 제작하기 위해 총 6단계를 거쳐야 했는데요.

대다수의 단계에서 사람이 값을 직접 입력하기 때문에 오류가 생길 가능성이 높았고,

QR이 제대로 생성되었는지 검증하는 과정에서 비효율이 발생했어요.


Frame 6.png


QR 리더기에 이미지를 읽히고, URL와 스티커에 삽입된 주유기 번호가 일치하는지 확인하느라 불필요한 시간을 보내야 했던 거죠. 이런 노력에도 불구하고 20번의 발주 중 3번의 오발주가 발생하며 담당자가 느끼는 스트레스는 점점 높아질 수밖에 없었어요.




해결 : 사람이 하는 일을 프로그램이 하도록 만들자


근본적인 문제를 해결하기 위해서는 사람의 개입을 0으로 만들어야 했어요.

프로그램으로 프로세스를 대체할 방법을 찾다가 바이브코딩을 알게 되었고, 간단한 자연어 프롬프트만으로도 개발자 리소스 없이 기능을 구현할 수 있다니 당장 테스트해야겠다고 생각했어요.

Frame 48097334.png



1) AI로 QR 생성 플러그인 만들기


실제로 원하는 기능을 AI로 구현할 수 있는지 빠르게 확인하기 위해 v0을 활용해 웹사이트를 만들었어요.

Frame 7.png 기능 구현을 위해 가능한 명확히 프롬프트를 입력하려고 했어요


웹을 구축하면서 AI에게 한 번에 많은 요구사항을 입력하면 요구사항을 준수하지 못하는 오류가 있었어요.

프롬프트를 입력할 때는 서비스의 개요와 뼈대 기능만 작성하여 기초적인 웹을 먼저 구축하고

추가로 경량화된 프롬프트로 디테일한 기능을 요구했어요.


Frame 8.png

30분 만에 약 10번의 프롬프트 입력으로 오일페이 결제 QR을 생성해 주는 웹사이트가 만들어졌어요.

이제 발주 담당자는 10초 만에 QR코드를 생성할 수 있게 되었어요.


웹사이트를 통해 기존 가맹점 정보를 입력하면서 불편함을 발견했어요. QR스티커 발주 담당자가 웹사이트(QR생성)→피그마(발주파일 제작)→웹사이트(발주처)로 환경을 계속 바꿔야 하는 문제였어요.


이 문제를 해결하려면 피그마와 웹사이트 둘 중 한 곳에서만 QR생성과 발주파일 제작이 가능해야 했는데요, 만약 피그마 플러그인으로 만들게 된다면 Buzz 기능을 활용해 발주파일을 빠르게 제작할 수 있기 때문에 피그마에서 QR생성이 가능하도록 피그마 플러그인을 제작했어요.


Frame 48097336nn.png 10초 만에 QR파일을 생성해 주는 플러그인


2) Figma Buzz로 발주파일 자동생성하기


QR을 생성했다면, 이제 QR을 가지고 발주파일까지 자동으로 생성할 수 있어야 해요.

이 문제는 피그마의 Buzz기능으로 별도의 개발 없이 빠르게 해결했어요. xlsx을 이용해 콘텐츠를 벌크로 생성할 수 있어 발주파일을 만드는데 적합했거든요.


Frame 48097159.png
image 15.png
xlsx파일을 불러와 인풋값을 매칭하면, 벌크 콘텐츠를 일괄생성할 수 있어요




1시간짜리 작업을 15분으로 단축!


Frame 48097336ㅇㅇ.png

업무 프로세스는 6단계에서 4단계로 줄어들었고, QR 스티커를 발주하는 시간은 4배가 줄어들었어요.

프로세스 개편 이후 30개가 넘는 가맹점을 오픈했는데요,

오류 발생률 0%로 담당자의 스트레스 또한 대폭 줄어들었어요.


만약 프로세스를 개편하지 않고 기존의 방식을 고수했더라면

가맹점 30곳을 오픈하는데 약 4일이 걸렸겠지만..

AI로 만든 인터널 프로덕트를 활용해 단 1일 만에 끝낼 수 있었어요!





AI 세상에서 살아남으려면

이번 프로젝트를 통해 급변하는 AI시대에서 살아남으려면 어떻게 해야할지 생각하는 시간을 가졌는데요. 엄청난 개발적 지식도, 심도 깊은 프롬프트 엔지니어링도 아닌 '문제해결력'이 중요하다고 생각해요. AI가 코딩과 디자인하는 능력은 뛰어날지라도, 사용자를 직접 만나서 문제를 발견하지는 못하니까요. AI는 문제 해결을 위해 솔루션을 구현하는 도구로 여겨야 해요.


저 역시 QR스티커를 발주하는 반복업무를 '당연히 감수해야 하는 불편함'이라 여기며 매번 같은 스트레스를 받았어요. 하지만, 문제를 인지하고 명확한 해결방법을 세우고 나니 하루도 채 지나지 않아 문제를 해결할 수 있었죠.


앞으로의 시대를 위해 문제해결력을 더 날카롭게 다듬는 디자이너가 되고자 다짐했습니다! =)