[6월 TIL #14] 온보딩 작업기: 한 작업에서 PM·디자이너·개발자를 오갔다

어제 신규 검색 기능의 온보딩 모달을 만들면서 이런저런 고민이 들었다. 좋은 온보딩이 뭔지 기준을 잡고 싶어 케이스 스터디를 하나 공부하고 TIL도 올렸었다. 오늘은 어제 공부한 걸 바탕으로 모달을 완성한 작업기를 남겨보려고 한다.

🗂️결과물 미리보기

어제 만든 시안(왼쪽)과 최종(오른쪽). 기능 이름으로 시작하던 카피가 "내 연구 맥락에 가까운 논문부터"라는 가치로 바뀌었다.

---

Step ① 온보딩 설계

온보딩 설계는 결국 제품이 진짜로 유저의 어떤 문제를 어떤 기술로 해결하는지를 이해하고, 구조화하는 작업이었다. 어렴풋이 알던 서치 기능을 뜯어보며 실제 검색이 결과를 어떤 기준으로 정렬하는지(제목·초록 매칭, 인용 신호, 일부 경우 의미 기반 후보 등)까지 들여다봤다. 온보딩을 몇 장으로 짤지, 각 장이 무슨 역할을 할지, 검색의 차별점에서 시작해 점점 구체적인 쓸모로 좁혀가는 흐름으로 만들어갔다.

Step ② 카피 정리

구조를 잡고 나서는 UX writing을 다듬었다. 이때 어제 공부했던 ‘기능‘ 소개가 아닌 ’아하 모먼트‘를 전달하라는 메시지가 큰 도움이 됐다. 어제는 AI가 "지식 네트워크", "판단 근거" 같은 추상적이고 기술적인 말을 후보로 줬었다. 그런데 오늘은 확실히 어제 공부한 내용을 우리의 공유된 이해로 놓고 카피 시안들을 논했다. 그래서 "라이브러리 논문과 연결된 검색" 같은 기능명에서 시작해, "내 연구 맥락에 가까운 논문부터"까지 내려오며 유저의 실제 고민과 가까운 문장들로 다듬어갈 수 있었다.

Step ③ 이미지 생성과 SVG 편집

모달에 들어갈 일러스트도 AI와 함께 만들었다. 적당한 시안을 빠르게 뽑고 우리 브랜드 아이덴티티를 넣는 작업은 직접 진행했다. 그런데 그 작업에 있어 효율적이었던 부분은 편집에 용이한 SVG로 PNG를 전환해주는 작업을 GPT가 매우 만족스럽게 해줬다는 것이다. "SVG로, 포인트 수를 줄여서 편집하기 쉽게" 변환까지 맡겼다. 그렇게 받은 SVG는 레이어, 색상 등이 매우 잘 나눠져 있어서 Figma에서 다듬기 매우 용이했다.

GPT로 생성한 원본 이미지(위)를 SVG로 바꾼 뒤, Figma에서 다듬었다(아래).

예전 같으면 Figma를 켜고 처음부터 그렸을 그림이다. 그걸 생성하고, SVG로 바꾸고, 다듬는 흐름으로 만든 셈인데, 이 작업 방식은 속도와 퀄리티를 동시에 잡는 괜찮은 방법을 찾아낸 것 같아 보람을 느낀다.

Step ④ 구현과 PR

마지막으로 피그마에 최종 안을 만들고 Codex(로 하다가 토큰 다 써서 Claude code까지)에 연결해 그대로 구현해서 PR을 올렸다. AI로 개발하는 것 자체는 늘 하던 일이다. 그런데 이번엔 디자인이 끝나고 개발이 시작되는 이음새가 없었다. 카피를 고민하다 바로 SVG를 만지고, 바로 코드를 붙였다. 어디까지가 기획이고 디자인이고 개발인지 굳이 나눌 일이 없었는 걸 새삼 다시 생각하게 됐다.

네 자리를 오가며 만든 온보딩 모달이 실제 검색 화면에서 도는 모습.

---

마무리

하나의 태스크였는데, 끝나고 보니 PM이자 디자이너이자 개발자로 일한 것 같다. 디자이너가 개발까지 하는 게 밖에서 보면 특별해 보여도 우리 팀에선 새로울 게 없다. 그런데 기획하고, 카피 쓰고, 그리고, 구현하는 네 자리를 오가는 동안 그 사이에 이음새가 거의 느껴지지 않았다는 게 흥미로워서 오늘 작업기를 꼭 남기고 싶었다.

역할	한 일
PM / 기획	온보딩을 몇 장으로, 각 장이 무슨 역할을 할지 설계. 무엇을 빼고 미룰지 결정. 들어온 의견을 그대로 받지 않고 검토. 메시지 근거를 위해 실제 검색 동작까지 파고듦
UX 라이터	기술·추상어를 유저 가치로 끌어내림. 길이와 톤 조정
디자이너	일러스트 컨셉, 모달 레이아웃, 생성한 이미지를 SVG로 바꿔 Figma에서 다듬기
개발자	Figma를 코드로, 모달 구현, PR

특히 가장 오랜 시간이 걸렸던 부분이 디자인이나 구현이 아니고, 기획 단에 가까운 ‘어떻게 신규 기능의 가치를 유저에게 전달할지 고민하는 단계’였던 걸 보면 내가 키워야할 역량의 방향성이 보이는 것 같다. 특히 그 과정에서 어제 했던 공부가 큰 도움이 됐는데 앞으로도 어떤 새로운 작업을 마주해도 빠르게 정보를 습득하고 활용하며 업무를 해나가고 싶다. 또 SVG로 전환한 후 브랜딩을 입히는 방식으로 AI를 활용해 디자인 작업을 효율적으로 하는 새로운 방법을 찾은 것도 좋았다. 신규 기능에 대한 작업을 하다보니 할 게 너무 많아지긴 했지만 또 새로운 즐거움과 배움이 있어서 좋다! 굿!