2025. 12. 20. 14:42ㆍ작업/바이브 코딩
미디엄에는 이미 작성을 한 내용이기도 하다.
이미 미디엄에서 봤다면 이번 포스팅은 넘어가도 좋다. 동일한 내용이다.
Vibe Coding으로 필요한 것을 직접 만들었다.
제품(UX/UI) 디자이너로서 저는 다양한 작업을 하고 있습니다. 그래서 AI 시대가 도래하면서 업무 효율성을 높이기 위해 활용하고 싶었다.
하지만 방대한 정보량과 튜토리얼, 그리고 끊임없이 등장하는 새로운 AI 서비스들로 어디서부터 시작해야 할지 막막했다.
고민 끝에, 저는 제가 필요한 것을 직접 만드는 것으로 시작하기로 했다.
컬러 시스템을 만들 때 항상 직접 색을 조절하는데 항상 많은 시간을 소비했던 기억이 떠올랐다.
색상을 추천해주는 서비스는 많았지만, 추천에 기반한 색상을 사용하고 싶지 않았다. 제가 직접 색상을 선택하고, 그 색상들로 시스템이 자동 생성됐으면 했다.
추천 색상에는 종종 시스템이 포함되어 있었지만, 직접 선택한 색상들의 시스템은 직접 만들어야 했다.
이 작업은 항상 많은 시간을 소모했고 상당한 피로했다.
각 색조를 하나하나 조정해야 했기 때문이다. 단순히 직접 색을 선택했다는 이유 때문에. (물론, 그런 제품이 이미 존재할 수도 있고, 아직 찾지 못해서일 수도 있다.)
그래서 만들기로 했다.
해외에는 이미 무수히 비슷한 제품 형태이지만 그래도 만들었다.
Color Hex 코드만 입력하면 결과 기반 색상 시스템이 자동 생성된다.
별도의 규칙을 설정해 AI에게 로직을 제공했고 덕분에 내가 넣은 컬러 기준의 디자인 시스템이 한번에 만들어졌다.
게이지 바를 조정하면 색상 변화가 실시간으로 확인도 가능하다. 디테일하게 개별 조절이 가능하다.
조정된 색조가 예시 화면에서도 확인되면 도움이 될 거라 생각했다.
나의 경험에서 컬러만 봤을 때는 괜찮아 보였지만 막상 컴포넌트에 적용되거나 다른 요소들과 함께 디자인될 때 어색해 보일 때가 더러 있었다. 이를 위해 모바일 화면 예시를 추가했다.
예시 화면으로 미리 컬러 대비와 예시를 확인하고 시행착오를 줄일 수 있게 했다.
색상 구성 차트를 통해 어떤 색상이 가장 큰 영역을 차지하는지 파악할 수 있으며, 어떤 색상을 제어하고 있는지 식별할 수도 있다.
컬러 시스템이 확정되면 Figma에서 그대로 붙여넣고 수정이 가능하다.
개발자 및 기타 관계자들과 공유하여 어떤 색상이 사용되었는지, 어떻게 구조화되었는지 명확히 알려줘야 하는데, 기존에는 일일이 작성해야 하는 수고로움이 있었다.
그래서 복사-붙여넣기를 하면 코드명과 함께 테이블 형식으로 보여지도록 설계했다.
개별 코드 복사도 가능하고, 전체 디자인 시스템과 CSS 코드까지 복사해서 활용할 수 있다.
최하단에는 CSS 코드를 배치하고 아코디언 기능으로 접었다 펴서 볼 수 있도록 설계했다.
필수 정보이지만 디자이너 입장에서는 가장 중요한 내용은 아니기 때문이다.
이 제품은 디자이너를 위한 것이기에, 그 부분을 최우선으로 생각하고 설계했다.
처음에는 단순한 자동 생성 시스템이었지만, 개발을 진행하면서 점차 더 많은 기능 아이디어를 추가했다.
이미 수많은 색상 조정 도구가 존재하기 때문에 획기적인 제품은 아니다. 하지만 처음부터 끝까지 완성했다는 점은 나에게는 큰 의미가 있고 실제로 업무에 매우 유용하게 활용하고 있다.
가장 기쁜 점은 의도한 대로 정확히 작동한다는 것이다.
Threads와 LinkedIn 같은 다양한 소셜 미디어 플랫폼에 이미 공유를 했다.
가장 많은 팔로워를 보유한 Threads에서 반응이 꽤 긍정적이어서 나름 기쁨과 보람을 느낄 수 있었다.
개발에 대해 전혀 모르는 완전 초보자인 나 같은 사람에게는 '필요한 것'부터 만드는 방식은 엄청난 도움이 된다고 생각한다.
이유는 간단하다. 필요했기 때문에 끝까지 할 수 있었다.
모든 디자이너가 Vibe Coding을 시도해봐야 한다고 생각한다. 한 번만 경험해도 많은 것을 배울 수 있다.
이번 버전에서 세부 사항을 다듬고 아직 구현하지 않은 기능들을 추가할 계획이다.
아래 링크에서 현재 버전이 작동하는 모습을 영상으로 확인하실 수 있다. 참고한 뒤 편하게 제품을 사용해 주시라!
- 제품 사용법 : https://youtu.be/i9NnKNKIZI0?si=Z-VMfAkYCrG4y1Kz
+ 지금은 피드백을 기반으로 보완을 진행하고 있다. 이것 역시 다음에 포스팅 하도록 하겠다.
피드백을 반영해서 예시 무드가 추가된 메인 페이지