프로덕트 디자이너의 AI 도전기-기획, 제작 편
Gemini, NotebookLm, Claude code, Stitch
바야흐로 AI 딸칵시대, 딸칵으로 업무의 효율이 증대되었다는 사례가 많다.
유난히 개발 직군에서 그런 드라마틱한 사례가 많은 것 같다.
프론트엔드 개발자인 내 남편만 해도 이제 본인이 직접 한 땀 한 땀 코드를 짜는 일이 예전만큼 많지 않다고 말한다. 주변 개발자들도 마찬가지다. AI를 파트너 삼아 서너 명의 몫을 병렬로 처리해 낸다.
그렇다고 다른 직무들이 손 놓고 있다는 소리는 아니다.
주위 PO, 디자이너, 비즈니스팀 다들 AI를 도구로 적극 활용하면서도,
한편으로는 이 빠른 변화의 속도에 어떻게 발맞춰야 할지 진지하게 고민하는 중이다.
단순히 기술이 신기해서가 아니라,
'AI라는 파트너를 얼마나 내 것으로 만드느냐'가 앞으로의 전문성을 결정짓는 중요한 열쇠가
될 거라는 걸 본능적으로 느끼고 있기 때문이다.
나 또한 새로운 기술에 대한 선망과 기대를 느끼는 동시에 생존을 위협하는 공포를 느끼고 있다.
(같이 회사에서 일하고 있는) 남편이 AI를 활용해 기존에는 며칠 걸렸을 일을 하루 만에 줄 때
공포감과 소외감을 느꼈다. 나만 이 로켓에 올라타지 못한 느낌,
더 멀어지면 로켓을 따라가는 기차도 못 타지 않을까? 하는 아찔함이 들었다.
프로덕트 디자이너가
AI를 어디에 활용할 수 있을까?
그렇다고 지금 당장 프로덕트 디자이너가
AI를 활용하는 방법이 뭐가 있을까?라고 생각한다면 명확한 답이 떠오르지 않는다.
AI로 할 수 있는 일은 이미 무궁무진하고, 선택지는 매일같이 쏟아지기 때문이다.
선택을 잘하는 방법은 무엇을 할지 결정하기 전에, 무엇이 중요한 지부터 설계해야 한다는 것이다.
단순히 유행하는 툴을 써보는 것이 아니라, 내 업무의 핵심 가치가 어디에 있는지 정의하는 과정이 먼저다.
그래서 나는 AI를 활용하는 목적을 딱 두 가지로 정의했다.
내 '시간'을 아껴주거나, 내가 만드는 결과물의 '퀄리티'를 높여주거나.
물론 퀄리티를 높이는 것과 시간을 아끼는 것을 무 자르듯 나눌 수는 없다.
높은 퀄리티는 불필요한 수정을 줄여 결국 전체 프로젝트의 시간을 아껴주기 때문이다.
단순한 '시간 아끼기'인지, 퀄리티를 높이기 위함인지 구분을 해보도록 했다.
그리고 새로운 걸 위해서 활용한다기보다는,
지금 내가 늘 하고 있는 프로세스를 위해 활용하기로 했다.
프로덕트 디자이너가 일하는 프로세스는 다음과 같다.
기획-제작-핸드오프-검증
이 각 단계에서 어떻게 AI를 활용하고 내 업무의 효율을 증대시킬 수 있을까?
우선 지금까지 한 것들만 나열해 본다.
생성형 이미지는 무조건 깔고 가는 전제로 생각해 주시면 좋겠다.
기획 - 퀄리티 살리기
퍼소나 Gems 만들어서 임시 사용자 만들어 기획하기 링크
최근 프로젝트에서 비즈니스 팀이 진행한 크리에이터 인터뷰 로우 데이터(Raw Data)를 종합해,
'하린'이라는 이름의 가상 크리에이터 페르소나를 만들었다.
단순히 상상으로 지어낸 인물이 아니라, 실제 인터뷰이들의 목소리를 학습시킨 데이터 기반의 페르소나다.
페르소나를 통해 문제 정의, 해결 방법, 상황 해석 등등을 물어보고 답을 얻는데 도움을 받는다.
종종 하린이에게 물어본다.
이러한 문제점을 갖고 있는데, 왜 그렇게 생각하는지
새로 구축할 기능에 대한 아이디어를 줄 수 있는지
디자인 화면을 보여주며 야기될 리스크는 없는지
물론 해당 인터뷰가 전문적으로 진행된 것은 아니어서
답변에 편향이 있거나 불균형이 있을 수 있다. 100% 신뢰할 수 없음은 당연하다.
하지만 그럼에도 나는 하린이의 의견을 꽤나 참고하고 있다.
왜냐하면 하린이는 데이터를 기반으로 구축된 커스텀 챗봇(Gems)이기 때문에,
사람보다 훨씬 더 일관된 자기주장을 유지한다.
주관이 개입되어 방향을 잃기 쉬운 순간에도,
하린이는 철저히 입력된 데이터의 맥락 안에서 반응하며 기획의 중심을 잡아준다.
꽤 당돌하다.Notebook LM으로 더 디벨롭해서 사용해 볼 예정이다.
아직 Notebook LM을 써보지 않은 분들은 강추한다.
난 이걸로 클로드 코드 스킬도 만들고 피그마 버즈 QnA도 만들고 별 걸 다 하며 요긴하게 쓰고 있기 때문이다.
제작 - 시간 아끼기
Claude Code로 주주주주주니어 디자이너 일감주기
최근에 클로드를 결제하게 되어 도전해 본 과제다.
남편이 자주 쓰는 iTerm을 깔고 클로드 코드와 이어서 슬랙, 노션등 커넥트를 완료했다.
그리고 피그마 플러그인인 Claude Talk to Figma를 연결했다.
(어떻게 했는지는 묻지 마시라.. 그냥 클로드가 시키는 대로 했다.)
여하튼 해당 플러그인을 깔게 되면,
클로드가 피그마 노드 (디자이너가 선택하는 모든 텍스트, 프레임, 섹션 등)를 불러와서 읽어낼 수 있고,
수정 및 새로 제작할 수 있다.
클로드와 피그마를 연결하고 나서, 나도 남편처럼 AI에게 일을 시켜두고
병렬로 업무를 처리할 수 있을 거라 기대했다.
현재 남편과 함께 작업 중인 '모바일 청첩장 에디터' 프로젝트에 바로 투입해 보기로 했다.
아래는 하면서 느낀 점을 나열해 본 것이다.
첫째, 토큰 관리는 중요하다.
욕심이 앞서 큰 섹션을 한꺼번에 맡겼더니 순식간에 토큰이 바닥났다.
토큰이 리로드 되는 다음 세션까지 꼬박 5시간을 기다려야 했다. 피그마는 코드와 다르다.
프레임 안의 모든 레이어를 방대한 JSON 데이터로 불러오기 때문에 데이터 덩어리가 크다.
레이어 수가 많다면 토큰 소모가 극심하므로, 최대한 작은 단위로 쪼개서 시키는 것이 효율적이다.
눈 끈 레이어는 과감히 삭제하기
하나의 화면 프레임을 맡기기보다는 화면을 쪼개서 컴포넌트 단위로 일을 맡길 것
화면 분석을 맡길 때 화면을 스크린샷해서 분석하라고 하기 (그래야 모든 레이어를 보지 않는다.)
둘째, 명확한 제약 조건을 설정해야 한다.
'알아서' 해주는 법은 없다. 특히 오토 레이아웃(Auto Layout) 은 무조건 명시적으로 주문해야 적용된다.(;;) 또한 좌표 인식을 잘 못하는지 결과물을 엉뚱한 곳에 만들 때가 많다.
특히 섹션 안에 있는 노드를 선택하면 위치 값을 제대로 읽지 못하므로,
작업할 노드는 밖으로 꺼내놓고 "선택한 노드 옆에 생성해 달라"라고 지시하는 것이 정확하다.
셋째, 레이아웃 베리에이션과 엣지 케이스로 활용하자.
가장 유용했던 건 반복적인 레이아웃 변형이었다.
기존 슬라이드형 갤러리 컴포넌트를 그리드형이나 풀 위드(Full-width) 형으로 바꿔달라는 요청을 아주 빠르게 수행했다.
원본/그리드형/풀 슬라이드 형특히 엣지 케이스 대응에서 큰 도움을 받았다.
작업을 하다 보면 예외적인 상황(Edge Case)을 놓칠 때가 많다. 해피 패스 위주로 그리다 보면 나중에 개발자가 "이럴 땐 화면 어떻게 나와요?"라고 물어보고, 그제야 부랴부랴 추가 화면을 만드는 일이 왕왕 있다.
이걸 방지하기 위해 클로드에게 화면 분석을 맡긴다. 스크린샷을 올리고 "이 화면에서 발생할 수 있는 엣지 케이스를 고려해서 필요한 화면 리스트를 뽑아줘"라고 시키면 된다.
그러면 클로드는 내가 생각지 못한 예외 상황들을 짚어주고, 어떤 화면이 더 필요한지 알려준다.
그리고 간단한 것은 엣지 케이스 디자인을 맡겨도 된다.
그래서 클로드가 신랑 신부 인사말이 아주 길거나 짧을 때 대응을 해줬다.
원본/긴 버전/짧은 버전부모님이 고인이거나 성함 표시를 하지 않는 특수한 상황 등..
직접 그리기엔 번거롭지만 반드시 확인해야 할 화면들을 클로드가 대신 그려줬다.
(물론 정확한 주문이 전제되어야 한다.)
원본/고인/미표시물론 위와 같은 작업은 내가 하는 게 더 빠를 수 있다. 굳이 저거 시키는 데 토큰을 쓴다고? 할 수도 있다.
나도 그렇게 생각한다. 하지만 좋은 점은 나는 일을 시켜두고, 다른 일을 하는데 내 시간을 쓸 수 있다는 것에 있다. 실제로 저렇게 일을 시켜두고 나는 다른 작업을 했다.
넷째, 맥락 있는 가짜 데이터(Dummy Data)를 잘 만들어준다.
피그마 내장 AI의 텍스트 재작성 기능보다 훨씬 맥락에 맞는 '그럴싸한' 데이터를 채워준다.
덕분에 디자인의 리얼리티를 높이는 작업이 수월해졌다.
솔직히 '그럴싸한' 이름이나 인사말 생각하는 게 너무 힘들지 않은가..?
제작 - 시간 아끼기
Stitch를 활용한 UI 소스와 아이콘 수급
디자인을 하다 보면 특정 컴포넌트나 아이콘 세트가 당장 필요할 때가 있다.
최근 컬러 피커(Color Picker)랑 이미지 Crop 디자인이 필요했는데,
레퍼런스를 찾고 직접 그리는 대신 Stitch에 요청했다.
AI가 즉석에서 뽑아준 디자인을 바로 가져다 쓰니 리서치 시간이 비약적으로 단축됐다.
(Copy to Figma가 안되면 피그마 플러그인 중 Code Figma를 활용하는 방법으로 피그마에 붙여서 사용하시라)
아이콘 세트 역시 마찬가지다.
프로젝트의 전체적인 무드에 맞는 아이콘들을 Stitch가 일관성 있게 생성해 주어,
별도의 아이콘 팩을 뒤지지 않고도 흐름이 끊기지 않게 작업을 이어갈 수 있었다.
결국, '무엇을 그릴까' 고민하며 툴과 씨름하는 시간보다
'어떤 디자인이 적합한가'를 결정하는 데 더 많은 시간을 쓸 수 있게 된 셈이다.
(물론 만들어준 거를 좀 수정을 해야 하긴 하다.)
피커랑 크롭 모달
아이콘 세트제작 - 퀄리티 올리기
Claude Code로 UX Writer
제작 단계에서 퀄리티를 높이기 위해 클로드 코드(Claude Code)에 별도의 '스킬'을 세팅했다.
(어떻게 스킬을 만드느냐 묻지 마시라 클로드가 해줬다...)
이 스킬은 내가 NotebookLM을 통해 정리한 UX 라이팅 원칙들을 학습시킨 결과물이다.
덕분에 화면에 들어갈 문구를 고민할 때, 내가 일일이 원칙을 되새기며 머리를 쥐어짜지 않아도 된다.
클로드가 내가 이식해 둔 라이팅 가이드를 바탕으로, 최적의 카피를 제안해 주기 때문이다.
클로드에게 '유엑스 라이팅 스킬 사용해서 요기 노드에 있는 문장 만들어줘. ~~ 한 느낌야~~'
이러면 뚝딱 해준다. 물론 수정이 필요할 순 있다.
피그마 AI가 만들어준 거 / 클로드 코드 스킬 적용한 것 / 내가 적은 것핸드오프 - 퀄리티 올리기
지라와 슬랙을 활용한 투웨이(Two-way) 핸드오프
디자인을 다 그린 뒤 개발자에게 전달할 때도 클로드 코드를 활용한다.
단순히 피그마 링크만 던지는 게 아니라 지라(Jira)와 슬랙(Slack)을 연동해 투웨이로 작업한다.
클로드를 통해 지라 티켓을 생성하면서 담당 개발자를 지정하고, 동시에 슬랙에도 피그마 링크와 해당 지라 티켓을 함께 공유하도록 세팅했다.
가끔 "그때 전달해 주신 피그마 링크 어디 있죠?"라고 묻는 상황이 생기는데,
이렇게 지라 티켓을 동시에 만들어 관리하면 정보가 파편화되지 않아 서로 편한 것 같다.
(물론 어떤 티켓에 하위항목으로 남겨야 하는지, 어떤 채널에 누구를 태그 할지는 명확하게 써줘야 한다...
아니라면 클로드가 샅샅이 찾을 때 토큰을 어마어마하게 사용한다.)
지금까지 AI를 통해 기획과 제작 프로세스를 효율화해 온 여정을 정리해 보았다.
이 과정을 통해 느낀 점은 명확하다.
앞으로 UI를 예쁘게 그리는 기술의 가치는 희석될 것이다.
'딸칵' 한 번에 수십 개의 시안이 쏟아지는 시대에,
픽셀을 깎는 정교함만으로는 디자이너의 경쟁력을 증명할 수 없다.
(서글프다...)
사실 이 여정은 거창한 미래를 준비하기보다,
조만간 마주할 'Zero UI(인터페이스의 소멸)'라는 변화에 적응하기 위함이다.
인터페이스가 사라지고 맥락만 남는 시대가 온다면, 화면 구성에 쏟았던 수많은 시간은 더 이상 큰 의미가 없다. 그래서 우리는 인터페이스를 만드는 데 더 많은 시간을 쓸 수 없고, 써서도 안 된다.
Zero UI 시대에 가장 중요한 것은 도메인에 대한 통찰과 사용자에 대한 본질적인 이해다.
그러니 인터페이스를 AI가 만들어주는 걸 연습하고 있는 거다.
그래야 남은 시간에 다음 스텝을 준비할 수 있을 것 같다.
혹시 더 좋은 활용법이 있거나 성장을 위해 들려주실 조언이 있다면 언제든 말씀해 주시길 바란다.
그리고 주니어들의 질문 또한 환영한다!