친구가 고민을 털어놨다.
회사의 사정상 시스템이 변경 되면서, SVG 파일을 일러로 열어서 옵션 값을 바꾸는 단순 노가다 작업을 해야한다고 했다.
나는 주저하지 않고, 내가 만들어보겠다고 하면서 50분도 안걸려서 바이브 코딩으로 기획, 개발, 검수까지 다 끝냈다.
디자이너라면 누구나 한 번쯤은 단순 반복 작업의 늪에 빠져 허우적거린 경험이 있을 것이다.
수십 개, 때로는 수백 개의 SVG 파일을 일일이 열어서 버전을 확인하고, 프로필 설정을 변경한 뒤 다시 저장하는 작업은 그야말로 ‘디지털 노가다’의 전형이다.
마치 컨베이어 벨트 위에서 똑같은 동작을 무한히 반복하는 공장 노동자가 된 듯한 자괴감이 드는 순간이기도 하다. 이러한 비효율은 단순히 개인의 피로도를 높이는 것을 넘어, 프로젝트 전체의 속도를 늦추고 창의적인 에너지를 고갈시키는 주범이다.
‘바이브코딩(Vibe Coding)’이라는 강력한 무기가 있다.
인공지능과 대화하며 아이디어를 실체화하는 이 방식은 코딩의 문턱을 낮추고, 누구나 자신의 업무를 자동화할 수 있는 시대를 열었다. 이 글에서는 실제로 3일이 소요될 것으로 예상되었던 SVG Tiny 1.2 변환 작업을 단 10분 만에 자동화한 실전 프로젝트 사례를 통해, 바이브코딩이 어떻게 업무 환경을 혁신하는지 그 과정을 상세히 기록한다.
1. 바이브코딩이란 무엇인가? 현대적 개발 패러다임의 변화
바이브코딩은 단순히 코드를 작성하는 기술을 의미하지 않는다.
이는 AI와의 긴밀한 대화를 통해 자연어로 아이디어를 설명하고, AI가 생성한 코드 베이스를 바탕으로 빠르게 작동하는 소프트웨어를 구축하는 일련의 철학적 접근이다. 과거의 개발이 문법(Syntax)을 익히는 데 수개월을 투자해야 했다면, 바이브코딩은 ‘어떤 문제를 해결할 것인가’라는 본질적인 질문과 그 흐름(Vibe)을 이해하는 데 집중한다.
숙련된 시니어 개발자와 짝 프로그래밍(Pair Programming)을 하는 것과 유사하다.
사용자는 문제의 핵심을 짚어주고, AI는 그에 적합한 로직을 제안한다. 여기서 핵심은 AI에게 모든 것을 맡기는 방관자가 되는 것이 아니라, 명확한 요구사항을 정의하고 결과물의 품질을 검증하는 ‘감독관’의 역할을 수행해야 한다는 점이다. 바이브코딩은 인간의 직관과 AI의 계산 능력이 결합했을 때 발생하는 폭발적인 생산성을 상징한다.
2. 디자이너의 반복 작업, 왜 자동화해야 하는가?
디자이너의 가치는 화려한 툴 사용 능력이 아니라, 브랜드의 가치를 시각적으로 전달하고 사용자 경험을 설계하는 ‘창의성’에서 나온다.
그러나 현실의 디자이너들은 이미지 리사이징, 파일 포맷 변환, 레이어 이름 정리와 같은 부수적인 작업에 하루의 절반 이상을 소모하곤 한다. 이는 거장이 붓을 들기 전에 물감을 짜는 데만 3시간을 허비하는 것과 다를 바 없다.
자동화는 단순히 시간을 아끼는 도구가 아니다.
첫째로, 인간이기에 발생할 수밖에 없는 ‘휴먼 에러’를 완벽히 차단한다. 수많은 파일을 처리하다 보면 오타가 발생하거나 설정 하나를 빠뜨리기 마련이지만, 잘 설계된 자동화 스크립트는 첫 번째 파일부터 만 번째 파일까지 동일한 품질을 유지한다.
둘째로, 한 번 구축된 시스템은 조직의 디지털 자산이 된다. 유사한 프로젝트가 발생했을 때 다시 처음부터 시작할 필요 없이 버튼 하나로 해결할 수 있다. 마지막으로, 가장 중요한 점은 디자이너의 ‘정신적 에너지’ 보존이다. 지루한 반복 작업에서 해방된 뇌는 더 나은 디자인을 고민할 여유를 얻게 된다.
3. 실전 프로젝트: SVG Tiny 1.2 자동 변환 도구 만들기
어도비 일러스트레이터(Adobe Illustrator)에서 내보낸 표준 SVG 파일을 모바일 및 임베디드 환경에 최적화된 ‘SVG Tiny 1.2’ 포맷으로 일괄 변환해야 하는 상황에서 시작되었다. 일러스트레이터의 기본 내보내기 기능으로는 수백 개의 파일을 하나하나 설정해야 했기에, 이를 자동화하는 맞춤형 도구가 절실했다.
ㄱ. 프로젝트 배경과 문제 정의의 중요성
모든 자동화의 시작은 ‘문제의 언어화’이다. 처음에는 “SVG 파일을 변환하고 싶다”는 단순한 생각이었으나, 실제 업무 환경에 적용하기 위해서는 훨씬 세밀한 조건들이 필요했음.
- 배치 처리: 한 번에 수십 개의 파일을 업로드하고 처리할 수 있어야 함.
- 파일명 보존: 변환된 파일은 원본 이름을 유지하되, 버전 구분을 위해 접미사(예: _1.2)가 붙어야 함.
- 인코딩 호환성: 한글로 된 파일명이 깨지지 않고 정상적으로 처리되어야 함.
- 접근성: 터미널 사용이 익숙하지 않은 디자이너를 위해 웹 브라우저에서 동작하는 인터페이스가 필요함.
문제를 이처럼 구체적으로 정의하는 과정은 마치 건축가가 설계도를 그리기 전 대지의 상태를 파악하는 것과 같다. 요구사항이 명확할수록 AI는 더 정확한 코드를 생성하며, 시행착오를 획기적으로 줄일 수 있음.
ㄴ. 기술 스택 선정: 왜 Node.js와 Inkscape인가?
바이브코딩에서는 복잡한 기술보다는 ‘검증되고 다루기 쉬운’ 도구를 선택하는 것이 유리하다. 본 프로젝트에서는 다음과 같은 조합을 선택했음.
- Node.js & Express: 비동기 파일 처리에 강점이 있으며, JavaScript 기반이라 추후 유지보수가 용이함.
- Inkscape CLI: 어도비 일러스트레이터의 유료 라이선스 문제를 해결하면서도, 강력한 SVG 변환 엔진을 무료로 제공함.
- Multer & Adm-zip: 파일 업로드와 결과물 압축 다운로드를 위한 표준적인 라이브러리임.
특히 Inkscape를 활용한 이유는 오픈소스의 강력함 때문임. GUI가 아닌 명령줄 인터페이스(CLI)를 통해 서버 내부에서 이미지를 조작할 수 있다는 점은 자동화 도구의 핵심적인 엔진 역할을 수행하기에 충분했음.
4. 단계별 구현 과정과 아날로그적 디테일
ㄱ. 1단계: 핵심 변환 엔진 및 CLI 로직 설계
터미널 환경에서 하나의 SVG 파일을 정확하게 Tiny 1.2 규격으로 바꾸는 스크립트를 짜는 것이었음. Node.js의 child_process 모듈을 사용하여 시스템에 설치된 Inkscape를 호출하는 방식을 채택했음.
단순히 파일 확장자만 바꾸는 것이 아니라, 내부 XML 구조를 분석하여 DOCTYPE 선언을 수정하고 baseProfile 속성을 tiny로, version을 1.2로 강제 지정하는 로직을 추가했음. 이 과정에서 정규표현식(Regex)을 활용하여 텍스트 기반의 치환 작업을 수행했는데, 이는 마치 낡은 책의 오타를 찾아내어 올바른 단어로 교체하는 정밀한 교정 작업과도 같았음.
ㄴ. 2단계: 사용자 경험을 위한 웹 UI 구축
CLI 도구는 개발자에게는 편하지만, 일반 사용자나 디자이너에게는 진입장벽이 높음. 이를 해결하기 위해 간단한 웹 페이지를 제작했음.
드래그 앤 드롭 구역을 만들어 파일을 쉽게 던져 넣을 수 있게 했고, 업로드 진행 상황을 시각적으로 표시하여 사용자가 불안해하지 않도록 배려했음.
여기서 바이브코딩의 진가가 발휘됨. “드래그 앤 드롭 기능이 있는 예쁜 파일 업로드 폼을 Tailwind CSS 스타일로 만들어줘”라는 한 마디에 AI는 즉시 구조를 잡아주었음. 개발자는 이 뼈대 위에 비즈니스 로직을 얹기만 하면 되었음.
ㄷ. 3단계: 배치 처리 최적화 및 압축 기능
사용자가 50개의 파일을 올렸을 때, 50번의 다운로드 창이 뜨는 것은 재앙임. 이를 방지하기 위해 서버 측에서 모든 변환 작업을 마친 뒤 adm-zip 라이브러리를 사용하여 하나의 압축 파일로 묶어 제공하는 기능을 구현했음.
또한, 파일 이름 중복 문제를 해결하기 위해 타임스탬프를 활용한 임시 디렉토리 생성 로직을 도입했음. 작업이 끝난 뒤에는 서버의 용량을 차지하지 않도록 임시 파일을 자동으로 삭제하는 ‘가비지 컬렉션’ 기능까지 추가하여 완성도를 높였음. 이는 마치 손님이 떠난 뒤 테이블을 깨끗이 치우는 정갈한 식당의 서비스와 같음.
5. 바이브코딩 성공을 위한 5가지 절대 원칙
단순히 AI에게 질문한다고 해서 좋은 결과물이 나오지는 않는다. 이 프로젝트를 성공으로 이끈 핵심 원칙들을 공유함.
1. 명확한 문제 정의로 시작하라
“편리하게 해줘”라는 말은 컴퓨터에게 아무런 의미가 없음. “A 폴더에 있는 파일을 B 규격으로 바꿔서 C 폴더에 저장해줘”와 같이 입력, 처리, 출력의 단계를 명확히 수치화해야 함. 정의되지 않은 문제는 해결될 수 없음을 명심해야 함.
2. 최소 기능 제품(MVP)부터 구현하라
처음부터 모든 기능을 갖춘 완벽한 프로그램을 만들려고 하면 반드시 벽에 부딪힘. 먼저 파일 한 개가 제대로 변환되는지 확인하는 것부터 시작해야 함. 그 다음 멀티 업로드, 그 다음 UI 개선 순으로 벽돌을 쌓듯이 나아가야 함. 작은 성공의 경험이 큰 프로젝트를 완주하게 함
3. 검증된 오픈소스 도구를 활용하라
모든 로직을 직접 코딩하려 하지 마라. 이미 세상에는 수십 년간 검증된 라이브러리들이 존재함. 이미지 처리는 ImageMagick이나 Inkscape, 영상은 FFmpeg 같은 거인의 어깨 위에 올라타야 함. 바이브코딩은 이러한 도구들을 엮어주는 ‘접착제’ 역할을 하는 것임.
4. 철저한 엣지 케이스 테스트
파일명에 공백이 있는 경우, 특수문자가 섞인 경우, 파일 용량이 비정상적으로 큰 경우 등 발생할 수 있는 모든 변수를 테스트했음. 특히 실제 사용자인 디자이너에게 직접 사용해 보게 하여 “이런 경우는 어떻게 되나요?”라는 질문을 유도하는 과정이 필수적임. 현장의 피드백이 가장 날카로운 검수관임.
5. 사용자 중심의 인터페이스 설계
아무리 강력한 기능을 가졌어도 사용법이 어려우면 버려짐. 버튼의 배치, 에러 메시지의 친절함, 처리 완료 알림 등 사소한 디테일이 툴의 생명력을 결정함. 기술적인 완성도와 사용자 경험(UX)은 수레의 두 바퀴와 같음.
6. 디자이너를 위한 바이브코딩 확장 사례
이번에 제작한 SVG 변환 도구 외에도 바이브코딩은 디자인 업무의 다양한 영역에서 활용될 수 있음.
- 피그마(Figma) 플러그인 개발: 특정 명명 규칙을 가진 레이어를 일괄 수정하거나, 디자인 시스템의 색상 값을 한꺼번에 변경하는 스크립트를 제작할 수 있음.
- 이미지 에셋 일괄 최적화: 웹 사이트 로딩 속도를 위해 수백 장의 PNG를 WebP로 변환하고 용량을 압축하는 작업을 자동화함.
- 데이터 시각화 자동 생성: 엑셀 시트의 수치를 읽어와서 수천 개의 차트 이미지를 자동으로 생성하는 도구를 만들 수 있음.
이러한 도구들은 한 번 만들어두면 평생의 자산이 되며, 본인의 포트폴리오에서도 ‘기술적 문제 해결 역량’을 증명하는 훌륭한 사례가 됨.
7. 노가다에서 벗어나 창의적인 본질에 집중하라
바이브코딩은 우리에게 ‘시간’이라는 가장 소중한 자원을 선물한다. 3일 밤낮을 꼬박 새워야 했던 지루한 클릭질이 단 10분 만에 끝나는 경험은 단순한 생산성 향상을 넘어, 업무에 대한 태도 자체를 바꾼다. 기계적인 작업은 기계에게 맡기고, 인간은 오직 인간만이 할 수 있는 고민—전략을 짜고, 감동을 주고, 문제를 발견하는 일—에 집중해야 한다.
지금 이 순간에도 당신을 괴롭히는 반복 작업이 있다면, 주저하지 말고 AI 창을 열어보라. “이거 자동화할 수 있을까?”라는 질문이 당신의 커리어에 새로운 전기를 마련해 줄 것이다. 작은 자동화 스크립트 하나가 당신의 업무 세상을 바꾸는 시작점이 될 것임을 확신함.