나만의 생산성 향상에만 집중한 AI 활용은 업무 프로세스 개선으로 이어지지 않으면 의미가 없다. 나의 만족도만 높아지고 실제 변화는 없었던 실패 사례에서 배운 교훈이다.
첫 번째 실패에서 무엇을 배웠을까?
지금부터는 실패에서 배운 사례다
**첫 번째 시도 **
'기획 산출물을 어떻게 하면 빨리 만들어 낼 것인가'에 초점을 두었다.
어떻게 하면 결과물을 피그마에빠르게정리할 것인가?
돌이켜 생각해보면 일의 전체 워크플로우를 무시하고, 내가 수행하는 속도와 결과물에만 초점을 맞춘 짧은 생각이었다. 이 실패를 딛고 나서 바이브 코딩 (PRD)라는 새로운 접근을 시도하게 된다.
내가 생각한 첫번째 프로세스는 다음과 같았는데, 지금 생각하면 너무 바보 같은 접근이었다.
아래 파란글씨 영역을 나름의 자동화를 하겠다는 목표였다.
업무/프로세스 정의 (w/ AI 툴) > 화면 기획 (바이브코딩) > 피그마 > 피그마에 설명 추가
아래 자료를 보고 나도 해봐야지 하고 따라해봤다.
아웃풋은 없었지만 막연하게 알고 있던 **"디자인 시스템"**에 대한 개념을 이해한 것으로 만족했다.
요약
ChatGPT를 활용해서 이미지에서 디자인 시스템에 대한 토큰 정보를 추출
UX Pilot 에서 바이브코딩으로 디자인 시스템 구성 후 피그마 export
피그마에서 컴포넌트 네이밍 등 추가 보강
UX Pilot 에서 다시 피그마에서 작성한 디자인 시스템을 Import (디자인 코드 확보 목적)
디자인 코드를 별도의 바이브코딩 도구에서 활용
배운점
다양한 툴을 활용하여 기획 내용을 피그마로 연결시키는 자연스러운 흐름
일관된 결과물 생성을 위한 디자인 시스템 생성
접근 방법은 나쁘지 않았지만,
회사에서 사용하지 않는 툴이라는 점(정보보안)
결과적으로 보면 바이브코딩 도구에 입력하기 위한 사전작업
결국은 바이브코딩 도구에 정확한 정보를 주면 위의 과정을 하지 않아도 된다.
바이브코딩 툴도 써야 하고, UX PILOT 도 써야 하고 이중으로 비용이 나간다.
두 번째 시도는 어떻게 달라졌을까?
결국은 바이브코딩 툴에서 해결을 봐야 한다! 라는 결론에 다다른다. 그래서 회사에서도 지원되던 툴이기도 하고 아주 핫한 툴인 Cursor를 사용해보기로 한다.
우연히 아래 영상이 알고리즘에 떠서 봤는데...무지성으로 따라했었던 것 같다. 앞에서 배웠던 디자인 시스템이라는 것이 일관된 결과물을 생성하는데 중요한 키 포인트라는 것을 알았으니, 이 때는 고민없이 열심히 토큰을 낭비하면서 무식하게 이상한 디자인 시스템을 혼자 만들었었던 것 같다.
이런 저런 시도 끝에 결국 디자인 시스템, 스토리북 이런 개념을 어설프게 이해하고 나만의 시스템을 만들었다. 그런데 여전히 코드를 디자이너와 개발자에게 보여줄 수 없으니, 다음 툴을 발견했다.
html.to.design은 바이브코딩으로 나온 결과물을 피그마로 그대로~ import 할 수 있는 툴이다.
오~ 개수 한정이 있긴 하지만, 훨씬 저렴해서 괜찮은데? 하면서 혼자 열심히 피그마에서 작업을 했었다.
html.to.design
성공인 것 같았지만...Cursor를 활용해서 나오는 결과물의 일관성이 부족했다.
그리고 가장 큰 문제가 있었으니...바뀐게 하나도 없었다.
배운점
나의 만족도만 높아졌지, 업무 프로세스가 변경된 것도 없고 개선된 것이 없었다.
이런 것은 개선이 아니다.
포커싱이 너무 나에게 맞춰져 있었다. 원점에서 다시 고민이 되어야 했다. 이후 프로젝트 공유를 통해 비로소 팀 관점에서의 개선을 시작할 수 있었다.
불러오는 중...