얼마 전 고객의 사업 정보를 비즈니스 프로필로 정리했습니다.

처음에는 워드 문서를 생각했습니다. 내용을 나누고 표를 넣은 뒤 색상과 여백을 다듬으면 될 것 같았습니다. 그런데 실제로 필요한 것은 글 한 편이 아니었습니다. 고객이 브라우저에서 바로 열어보고, 화면이 작아져도 편하게 읽고, 필요하면 인쇄할 수 있어야 했습니다.

그래서 HTML로 만들었습니다.

사업의 핵심을 나누고 제목, 요약표, 목차를 배치했습니다. 웹핏에서 사용하던 견적서와 어울리도록 상단선과 색상도 맞췄습니다. 문서를 다 만든 뒤 PC 화면과 모바일 화면, 인쇄 버튼까지 확인했습니다.

이 작업을 하며 바이브 코딩을 처음 접했을 때의 생각이 떠올랐습니다. 당시에는 홈페이지나 SaaS를 만드는 개발 기술이라고 여겼습니다. 직접 써보니 달랐습니다. 제가 자주 만든 것은 거창한 서비스보다 당장 제 일에 필요한 문서와 작은 도구였습니다.

처음에는 홈페이지와 SaaS를 만드는 줄 알았습니다

바이브 코딩을 소개하는 영상에는 완성된 서비스가 자주 등장합니다. 원하는 화면을 말하면 홈페이지가 생기고, 로그인과 데이터베이스를 연결하면 앱이 작동합니다.

저도 그 장면부터 봤습니다. 5년 동안 워드프레스로 홈페이지를 만들어왔기 때문에 바이브 코딩도 제작 방식이 하나 더 생긴 것으로 받아들였습니다.

그렇게 보면 시작부터 막힙니다. 판매할 서비스가 없는데 무엇을 만들지부터 고민하게 됩니다. 창업 아이디어나 새로운 SaaS가 떠오르지 않으면 아직 배울 필요가 없는 기술처럼 느껴집니다.

실제 업무에서 나온 질문은 훨씬 작았습니다.

• “이 자료를 매번 다시 정리해야 하나?”
• “찾아둔 홈페이지 사례를 작업할 때 바로 꺼내볼 수 없을까?”
• “고객에게 보낼 문서를 내 양식에 맞춰 만들 수 없을까?”

바이브 코딩을 쓰기 시작한 자리는 새로운 사업 아이디어가 아니었습니다.

매일 일하면서 한 번씩 손이 멈추던 곳이었습니다.

실제로는 내 고객에게 보낼 문서를 만들고 있었습니다

웹핏에서 만드는 비즈니스 프로필에는 고객의 사업 정보가 들어갑니다. 제공하는 서비스와 주요 고객, 사업을 시작한 이유처럼 흩어져 있던 내용을 한 문서에서 읽을 수 있게 정리합니다.

내용만 채운다고 끝나지 않았습니다. 읽는 사람이 처음에 무엇을 봐야 하는지 정해야 했습니다. 긴 설명보다 먼저 사업의 핵심을 보여주고, 세부 내용으로 넘어갈 수 있도록 목차도 필요했습니다. 기존 견적서와 함께 보내도 전혀 다른 회사의 문서처럼 보이지 않아야 했습니다.

워드로도 만들 수 있는 문서입니다. 다만 이번에는 브라우저에서 바로 열어보는 방식이 더 잘 맞았습니다. 그래서 AI와 대화하며 HTML 구조를 잡고, 실제 자료를 넣고, 화면을 확인하면서 고쳤습니다.

여기에는 두 종류의 일이 섞여 있었습니다.

AI가 사업 자료를 읽고 내용을 정리하는 일

코드가 그 내용을 화면과 문서로 보여주는 일

앞의 일만 했다면 잘 정리된 문장을 얻는 데서 끝났을 겁니다. 코드를 더하니 고객에게 전달할 수 있는 형태가 됐습니다. 문장의 순서, 표의 위치, 화면 너비와 인쇄 방식도 함께 다룰 수 있었습니다.

바이브 코딩은 이처럼 작은 일에도 쓰였습니다. 고객에게 보내야 할 문서가 있고 기존 도구의 형식이 맞지 않을 때, 필요한 결과물을 직접 만들어볼 수 있었습니다.

참고자료를 모으다 내 업무용 도감까지 만들었습니다

홈페이지를 만들다 보면 참고자료가 쌓입니다. 첫 화면이 좋은 사이트를 저장하고, 서비스 설명이 쉬운 섹션을 캡처하고, 문의 버튼까지 자연스럽게 이어지는 페이지를 기록합니다. 저장할 때는 나중에 기억할 것 같지만 막상 작업이 시작되면 어디에 뒀는지 찾기 어렵습니다.

폴더에는 이미지가 쌓이고 노션에는 링크가 길어졌습니다. 자료는 많은데 “이번 홈페이지의 신뢰 영역에 참고할 만한 구성”을 골라보려면 다시 하나씩 열어야 했습니다.

그래서 홈페이지 패턴 도감을 만들었습니다.

사이트별로 모으지 않고 화면의 역할에 따라 나눴습니다. 필요한 패턴을 검색하고, 비슷한 사례를 비교하고, 원본 자료도 다시 열 수 있게 구성했습니다. 웹핏에서 홈페이지를 기획할 때 쓰려고 만든 내부 도구였습니다.

시중의 자료 관리 도구가 부족해서 만든 것은 아닙니다. 제 작업 순서와 맞지 않는 부분이 있었기 때문입니다.

노션은 자료를 쌓기에 좋았습니다. 폴더는 파일을 보관하기 편했습니다. 하지만 저는 홈페이지를 만들면서 섹션의 역할에 따라 사례를 빠르게 비교해야 했습니다. 범용 도구에 없는 그 한 가지 흐름을 작은 도구로 만들었습니다.

이 정도면 충분했습니다. 회원가입도, 결제도, 다른 사람에게 판매할 기능도 필요하지 않았습니다. 제가 실제로 반복하는 일을 편하게 처리하면 됐습니다.

돌아보니 엑셀·워드·PPT를 쓰던 이유와 같았습니다

엑셀을 열 때마다 새로운 서비스를 만들지는 않습니다.

견적을 계산하고 고객 명단을 정리하며 반복되는 숫자를 확인합니다. 워드에서는 안내문과 보고서를 만듭니다. 파워포인트는 설명할 내용을 순서대로 보여줄 때 사용합니다.

모두 내 일을 처리하기 위해 여는 도구입니다.

바이브 코딩이 엑셀과 워드, 파워포인트를 없애지는 않을 겁니다. 계산표 한 장이면 엑셀이 빠르고, 여러 사람이 함께 문장을 고칠 때는 구글 문서가 편합니다. 발표 자료를 넘기며 설명할 때는 파워포인트가 익숙합니다.

달라진 점은 하나입니다.

예전에는 프로그램이 제공하는 메뉴 안에서 방법을 찾았습니다. 이제는 내게 필요한 메뉴와 작업 순서를 직접 만들 수 있습니다. 개발자가 아니어도 자기 업무에 맞는 작은 도구를 가질 수 있게 된 것입니다.

달라진 것은 필요한 작업 방식을 직접 만들 수 있다는 점입니다

AI에게 메일 초안을 부탁하는 일과 바이브 코딩은 구분할 필요가 있습니다.

메일 초안은 답변을 받아 복사하면 일이 끝납니다. 일정 조회도 필요한 정보를 확인하면 끝납니다. 바이브 코딩으로 만든 결과물은 다시 열어 사용합니다. 입력을 바꾸고, 기능을 고치고, 다음 업무에서도 반복해서 씁니다.

작은 도구를 만들기 전에는 기능 이름부터 적지 않습니다. 제가 하는 일을 먼저 살펴봅니다.

• 어느 순간에 손이 자주 멈추는가?
• 어떤 자료를 매번 다시 찾거나 옮기는가?
• 결과물은 누가 어디에서 사용하는가?
• 매번 달라지는 부분과 늘 같은 부분은 무엇인가?
• 제대로 만들어졌는지 어떻게 확인할 것인가?

비즈니스 프로필은 고객이 읽을 문서였기 때문에 화면 크기와 인쇄까지 확인했습니다. 홈페이지 패턴 도감은 제가 작업 중에 사용할 도구였기 때문에 분류와 검색이 중요했습니다. 같은 바이브 코딩이어도 사용 장면이 다르면 먼저 만들어야 할 기능도 달라집니다.

기능이 작동한다고 일이 끝나는 것도 아닙니다. 고객 정보가 들어간다면 어디에 저장되는지 살펴야 합니다. 다른 사람과 함께 쓴다면 누가 볼 수 있는지 확인해야 합니다. 버튼을 눌렀을 때 화면이 열리는 것과 실제 업무에 안전하게 쓰는 것은 다른 문제입니다.

만들 서비스가 없어도, 바꾸고 싶은 내 일은 있습니다

바이브 코딩을 배우겠다고 거창한 아이디어부터 찾을 필요는 없습니다.

오늘 했던 일을 떠올려보면 됩니다. 같은 내용을 여러 문서에 옮겨 적었는지, 필요한 자료를 찾느라 폴더를 계속 열었는지, 기존 프로그램에 맞추느라 내 작업 순서를 바꿨는지 살펴보는 겁니다.

저는 고객에게 보낼 비즈니스 프로필을 HTML 문서로 만들었습니다. 홈페이지 참고자료는 제 작업 방식에 맞는 도감으로 묶었습니다. 둘 다 판매할 서비스는 아니었지만 실제 업무에서 필요한 결과물이었습니다.

엑셀을 배울 때 회사를 만들 아이디어부터 찾지 않습니다. 정리해야 할 숫자가 있어서 엑셀을 엽니다. 워드는 보낼 문서가 있어서 열고, 파워포인트는 설명할 내용이 있어서 엽니다. 바이브 코딩도 그렇게 시작하면 됩니다. 오늘 내 일을 하다가 손이 멈춘 곳. 그 한 곳을 바꿀 작은 도구부터 만들면 됩니다.