개발 까막눈 디자이너, 바이브 코딩과 사랑에 빠지다

채널톡의 브랜드 디자이너 엠버.

코드 한 줄 모르는 그녀가 Claude, Midjourney, Cursor 같은 AI 도구들을 하나씩 섭렵하며

키비주얼 그래픽부터 업무 성향 테스트 사이트까지 뚝딱 만들어낸 비결, 궁금하시죠?

사내 캠페인을 계기로 시작된 바이브 코딩 모험담이 지금 시작됩니다.

Q. ‘채널 엔지니어 핵심 가치 1.0’은 어떤 프로젝트였나요?

채널팀 엔지니어링 리더십에서 정립한 핵심 가치를 처음 선포하는 캠페인이었어요. 팀 문화를 만들어가는 작업인만큼 구성원들이 최대한 과몰입하게 하고 싶었어요. 그래서 이 4가지 가치를 각인시키기 위해 팀 멤버용 굿즈와 오프라인 이벤트, 그리고 이 글에서 소개할 Channel Engineer 업무 성향 테스트를 제작했답니다.

Q. 핵심 가치를 어떤 콘셉트로 시각화하셨는지 궁금해요.

"Don't Be a Prey, Be a Predator" - 사냥감이 되지 말고 사냥꾼이 되자는 뜻이에요. 각박하고 혹독한 IT 업계에서 우리가 살아남기 위해 자연계 최상위 포식자들의 행동 양식을 본받자. 그래서 우리가 이 업계에서 최상위 포식자가 되자는 의미를 담았습니다.

Q. 전반적인 작업 과정을 간략히 설명해주시겠어요?

먼저 일러스트레이터로 기본 그래픽을 다듬고, Midejourney를 사용해서 돌 질감을 입히고 움직임을 만들었어요. 중세 시대 깃발처럼 고딕한 무드를 스포티한 컬러와 함께 표현하고 싶었거든요. 레퍼런스 이미지와 함께 Claude로 작성한 프롬프트를 넣어서 제가 원했던 느낌을 아주 쉽게 구현했어요. 처음엔 AI가 상상력을 더해서 이상한 걸 만들었는데, 여러 번 시도한 끝에 raw image 태그를 쓰니까 의도한 이미지에서 크게 벗어나지 않더라고요.

원하는 이미지가 정해져 있다면 최대한 비슷한 소스를 넣어주는 게 좋아요. 프롬프트를 만들라고 요청할 때도 어떤 결과물을 원하고, 어떤 툴을 쓸거고, 무슨 자료를 넣을 건지 자세하게 써야 해요. 최대한 AI가 수동적인 툴로서의 역할만 하도록 컨트롤하려면요. 그리고 Midjourney는 프롬프트가 길어지고 복잡해질수록 딴길로 새는 경향이 있어서 확실한 키워드만 프롬프트에 남기고 필요없는 건 덜어내는게 중요해요.

Q. AI 도구를 쓰지 않고 작업했다면 어땠을 것 같아요?

그래도 작업은 잘 했을 것 같은데, 조금 아쉬웠겠죠? 제가 상상한 이미지를 AI 없이 다른 도구들로 구현하려면 시간이 거의 3배는 걸렸을 것 같아요. 현실적으로 그정도 투자하기가 어려운 상황이라면 아예 못 했겠죠. 제한된 이펙트로 얼마나 리얼하게 나올지도 미지수이고. 이렇게 돌 조각상 움직이는 애니메이션 만들려면 클레이 애니메이션으로 하거나 Maya로 작업해야할 것 같은데… 생각하니 조금 아득하네요.

Q. 업무 성향 테스트 만들기는 어떻게 시작됐나요?

사실 예전부터 유형 테스트를 바이럴 요소로 써보고 싶었거든요. 게다가 이미 시중에 있는 유형 테스트가 너무 많으니까 AI한테 시키면 너무 쉽게 잘 할 것 같았어요. 그래서 이번 기회에 만들어봐야겠다 싶었죠. 그때까지는 아직 Cursor를 많이 써보지 않았어서 실험해볼겸 간단한 MBTI 테스트 제작을 시켜봤는데 생각보다 잘 만들어주더라구요. 그래서 이건 되겠다 싶었죠.

Cursor가 짜준 코드를 살펴보니까 응답 항목을 점수화해서 유형 결과를 계산하는 로직이 있었어요. 그래서 그걸 보면서 어떻게 작업할지 좀 더 감을 잡을 수 있었어요. ‘원래 MBTI는 16가지 결과가 있는데 나는 4가지만 원하고, 응답 항목들은 4가지 코어 컬쳐에 맞게 쓸 거고, 합산 점수가 제일 큰 코어 컬쳐를 결과로 보여줘’라고 요청하니까 알아서 잘 만들어줬어요.

응답 항목은 채널톡 DevRel인 수(Soo)랑 같이 인간 아이데이션으로 초안을 잡았어요. "고객이 강한 클레임을 걸었을 때", "개발하다가 동료와 의견 충돌이 있을 때", "번뜩이는 아이디어가 떠올랐을 때" 같은 상황들을 먼저 정했어요. 그 다음 Claude한테 코어 밸류 4가지와 각각의 설명을 넣어주고, 우리가 정해둔 몇 가지 상황에서 이런 성향을 가진 사람이라면 어떻게 행동할지 선택지를 만들어달라고 했죠.

사실 처음에 나온 웹페이지에서는 AI 냄새가 많이 났거든요. 반응형이랑 인터랙션도 다 잘 만들어주긴 했는데 그, 좀 과한 느낌 아시죠? 모든 걸 다 카드로 묶고, 막 이모지 붙이고, 둥둥 떠 있고… 그런 스타일을 제거하고 다듬기를 반복했어요. 사실 코드를 직접 수정할 수 있으면 더 빨리 만들 수도 있을 것 같은데 저는 코드를 몰라서 계속 대화로 수정을 요청했어요.

Q. 어떻게도 해결할 수 없었던 부분도 있었나요?

리더보드를 만들 때 완전 막혔어요. 최근에 테스트한 동료의 정보를 알려주려면 데이터베이스가 필요한데 Firebase 연동이 안 되는 거예요. Cursor가 가이드를 줘도 Firebase 안에서 세팅해야 하는 게 있었거든요. 결국 환경 세팅은 수가 도와주셨어요. 그리고 웹사이트 게시할 때도 어떻게 해야할지 모르겠다고 했더니 프로덕트 디자이너인 라이언이 GitHub으로 하는 방법을 알려주셨어요.

Q. 여러 멤버들의 도움을 받으셨군요.

맞아요. 사실 채널팀이 AI 도구들과 친해지기 좋은 환경이에요. Cursor같은 코드 베이스 AI들은 저같은 머글들에게는 진입 장벽이 높잖아요. 근데 여기는 모르는 걸 물어볼 사람이 주변에 엄청 많아요. 다들 AI 툴을 쓰고 계시고 하나 물어보면 막 세네개 더 알려주시고 그런 분위기라 도움을 많이 받았어요. 예전에 디자인팀에서 Cursor 스터디도 했는데 아직 사용량이 저조해서 괜히 더 잘 써보고 싶었어요.

또 소소한 작업인데 잘 써먹었던게 webp 변환이에요. 모션 시퀀스를 뽑아서 웹에 업로드할 수 있는 포맷으로 렌더링을 해야 하는데, 그걸 하려면 터미널에서 뭘 깔아서 해야 된다는 거에요. (이것도 챗GPT가 알려줬어요) 그래서 이거 어떡하지, 하다가 Cursor로 돌려봤더니 해주더라구요. 그래서 그 방법도 알차게 썼어요. 까막눈에게 아주 좋은 툴입니다.

Q. 업무 성향 테스트를 공개했을 때 반응은 어땠나요?

디자이너가 직접 바이브 코딩으로 만들었다고 하니까 다들 신기해하셨어요. 개발자분들이 공지하자마자 코드를 생선 가시 바르듯이 뜯어보시더라고요. 그렇게 관심가져주시는 모습을 보니 코드에도 뭔가 이스터에그를 숨겨둘 것 그랬다는 생각이 들더라구요. 엔지니어들이 타겟이니 탐구하면서 쫓아갈 만한 재미 요소를 넣어뒀으면 좋겠다 싶어서 아쉬웠어요.

Q. 앞으로도 여전히 사람이 해야 하는 일은 무엇일까요?

전반적으로 사람이 직접 관여를 하기는 해야 해요. 사실 초기 콘셉트 아이데이션도 챗GPT랑 좀 하긴 했거든요. 근데 그걸 다른 사람들이 공감할 수 있을 만한 콘셉트, 언어, 표현으로 바꾸기 위해서는 확실히 휴먼 터치가 필요해요. 세부적인 설정이나 뉘앙스 조정도 마찬가지고요. AI를 활용해서 사용자가 직접 인터랙션할 수 있는 아트웍을 전면적으로 사용한 웹사이트도 만들어보고 싶어요. 최근에 멋진 레퍼런스를 봤거든요. 이게 오만일 수도 있는데, 뭔가 될 것 같은 느낌이 들어서 한 번 시도해보고 싶어요.