처음부터 바이브 코딩으로 개발하면 포기합니다.
그러나 만들어진 사이트를 수정하는 바이브 코딩은 쉽게 시작할 수 있습니다.
그린나래디자인 홈페이지 + 업무 사이트
사이트를 처음부터 바이브 코딩으로 만들려고 하면 대부분 중간에 막혀 포기합니다. 화면 설계, 데이터 구조, 로그인, 보안, 배포처럼 한꺼번에 정해야 할 것이 너무 많기 때문입니다.
그래서 이 프로젝트는 순서를 바꿨습니다. 뼈대는 개발자가 단단하게 만들어 납품하고, 대표님은 완성된 사이트를 고치는 일부터 바이브 코딩을 시작합니다. 문구 하나, 사진 한 장을 chat GPT에게 말로 부탁해 바꾸는 것은 첫날부터 할 수 있습니다.
이미지 안내: 이 글의 화면 캡처는 모두 샘플 데이터로 촬영했습니다. 화면에 나오는 고객·업체·금액·일정은 예시이며 실제 고객 정보가 아닙니다. 대표 두 사람의 이름은 '김대표', '최대표'로 바꿔 표시했고, 사업자번호·주소·연락처·계좌는 가렸습니다.
0. 어떤 프로젝트인가
대전의 간판 디자인·시공 회사 그린나래디자인에 납품한 프로젝트입니다. 회사는 대표 두 사람이 일을 나눠 맡습니다. 한 사람은 디자인·견적·고객 응대·행정을, 다른 한 사람은 현장 실측·시공·납품을 맡습니다.
풀고 싶었던 문제
| # | 핵심 문제 | 그동안은 | 이렇게 풀었습니다 |
|---|---|---|---|
| 1 | 고객 문의가 흩어진다 | 전화·카톡·홈페이지로 따로 들어오고, 누가 언제 답했는지 남지 않았습니다. | 모든 문의를 '고객 문의·답변' 한곳에 모으고, 버튼 하나로 고객 등록 + 의뢰 시작 |
| 2 | 두 사람의 인계가 말로만 오간다 | 디자인·견적 담당과 실측·시공 담당이 따로 움직여 "실측 끝났어요, 견적 써 주세요"를 말로 주고받았습니다. | 인계 버튼으로 업무·담당이 자동으로 넘어가고, 같은 대시보드·달력·활동 기록을 함께 봄 |
| 3 | 견적서와 돈 관리가 손으로 이뤄진다 | 견적서는 엑셀 양식에 손으로 채우고, 계약금·잔금 입금은 통장과 메모를 오가며 확인했습니다. | 품목만 넣으면 견적서 PDF 발행, 계약하면 입금 예정 자동 생성, 미수금·손익 자동 계산 |
| 4 | 업무판이 따로 논다 | 매일 할 일을 종이로 뽑아 보던 업무판이 다른 기록과 연결되지 않았습니다. | 업무를 등록하면 의뢰·달력과 연결되고, 업무일지는 A4 한 장으로 출력 |
| 5 | 카톡에 정보가 쌓이기만 한다 | 고객과 나눈 대화, 업무 대화방에 올라온 현장 사진이 카톡 안에만 남아 있어 다시 옮겨 적고 내려받아야 했습니다. | 카톡 대화를 자동 정리해 고객 등록·업무 추가로 잇는 일, 업무 대화방 사진을 폴더에 자동 저장하고 업무 사이트에 등록하는 일은 AI 활용 수업에서 대표님과 함께 자동화하기로 함 |
| 6 | 홍보가 늘 뒤로 밀린다 | 시공 사례를 블로그에 쓰고 SNS마다 다시 올리는 일을 할 시간이 없었습니다. | 블로그 글 작성 도구 + sns-relay로 SNS 채널에 한 번에 발행 |
| 7 | 조금만 고치려 해도 개발자를 찾아야 한다 | 문구 하나, 사진 한 장을 바꾸는 데도 외주에 맡겨야 했습니다. | 대표님 PC에 바이브 코딩 환경을 세팅하고, 고친 내용을 올리면 자동으로 검사·배포 |
납품한 것
| 구분 | 내용 |
|---|---|
| ① 홈페이지 | 회사·서비스 소개, 포트폴리오, 소식·공지, 견적·문의, 회원가입 |
| ② 업무 사이트(관리자) | 대시보드, 업무·일정, 고객리스트, 견적·계약(견적서 PDF 발행), 제작업체·발주, 매입·매출, 계약금·잔금, 자료·인쇄(업무일지), 고객 문의·답변, 홈페이지 콘텐츠, 달력·알림, 사용자·권한, 방문 통계 |
| ③ 서버·자동 배포 | Firebase(호스팅·DB·파일·로그인·서버 함수·휴대폰 알림·봇 차단), GitHub Actions 자동 검사·배포 |
| ④ 바이브 코딩 수정 환경 | 대표님 PC에 개발 환경 설치, chat GPT에게 말로 부탁해 홈페이지를 고치고 올리면 자동으로 검사·배포 |
| ⑤ 블로그·SNS 도구 | 블로그 글 작성 도구 + sns-relay(블로그 글 하나를 Threads·인스타그램·페이스북·네이버용으로 바꿔 한 번에 발행) |
| ⑥ AI 활용 교육 | 주 1회 1시간, 총 4회 |
| ⑦ 문서 | 사용자 여정 가이드(PDF 15쪽), 고객 확인 체크리스트, 운영·배포 안내서 |
1. 홈페이지
손그림 일러스트와 "그·린·나·래" 글자가 하나씩 켜지는 간판 애니메이션으로 첫 화면을 꾸몄습니다.
홈페이지 디자인은 초안(시안)으로 납품했습니다. 완성본을 정해 두고 끝내는 대신, 대표님이 회사 사진·문구·소개를 넣어 가며 직접 시안을 다듬을 수 있도록 바이브 코딩 교육으로 수정하는 방법을 알려 드립니다.
- 포트폴리오: 업무 사이트에서 시공 후 사진을 "시공사례로 등록"하면 바로 홈페이지에 올라갑니다.
- 견적·문의: 홈페이지 문의는 업무 사이트의 "고객 문의·답변"으로 바로 들어오고, 새 문의가 오면 두 대표의 휴대폰으로 알림이 갑니다.
- 카카오톡 상담·지도: 카톡 오픈채팅 연결, 카카오맵 약도, 네이버 지도 길찾기.
- 회원가입: Google 또는 이메일. 탈퇴하면 즉시 정지되고 30일 뒤 자동 삭제됩니다.
- 모바일 대응: 375 · 768 · 1280px 세 폭에서 가로 스크롤 없이 보이도록 점검했습니다.
2. 업무 사이트 — 두 사람이 하나의 판을 같이 본다
모든 기록은 의뢰 카드 한 장에 모입니다. 문의·고객·업무·견적·입금·발주·사진·활동 기록이 의뢰 카드에 연결되고, 카드는 다섯 단계를 차례로 지나갑니다.
상담·실측 → 견적 → 디자인 → 시공·납품 → 정산·완료
2-1. 아침, 대시보드에서 하루를 엽니다
로그인하면 오늘 할 일·지연·긴급·미답변 문의·미수금·오늘 방문자 수가 숫자 카드로 나옵니다. 그 아래에는 대표별 오늘 할 일이 나란히 보입니다. 서로 무엇을 하는지 묻지 않아도 됩니다.
2-2. 업무·일정 등록 — 파트와 담당이 정해져 있습니다
업무는 기존에 쓰던 업무판과 같은 여섯 파트로 나눴습니다: 디자인 · 실측미팅 · 시공 및 납품 · 견적 · 대기 · 기타 행정. 업무를 등록하면 파트에 맞는 담당자가 미리 골라지고, 일정일·마감일·우선순위·연결 의뢰를 넣으면 끝입니다.
2-3. 협업의 핵심 — 버튼 하나로 다음 사람에게 넘깁니다
두 사람의 일은 정해진 지점에서 서로 넘어갑니다. 이 인계를 말이 아니라 버튼으로 하게 만들었습니다.
| 이럴 때 | 자동으로 되는 일 |
|---|---|
| 실측 담당이 [미팅 완료·견적으로 보내기] | 업무가 견적 파트로, 담당이 디자인·견적 대표로 바뀌고 '실측미팅 완료' 시각이 찍힘 |
| 디자인 업무를 완료 체크 | 업무가 시공 및 납품 파트로, 담당이 시공 대표로 바뀜 |
| 의뢰 카드를 다음 단계로 옮김 | 담당자가 그 단계의 기본 담당으로 바뀜. 단계를 건너뛰면 한 번 더 묻고 기록 |
| 누가 무엇을 바꾸든 | 활동 기록에 "누가·언제·무엇"이 남음 |
| 두 사람이 같은 카드를 동시에 고침 | 충돌을 알려 주고 최신 내용으로 다시 채움(덮어쓰기 방지) |
의뢰 진행 보드에서는 모든 의뢰가 어느 단계에 있는지 한눈에 보입니다. 카드를 끌어다 놓으면 단계가 바뀌고, 마감이 지나면 빨간 "N일 지연" 표시가 붙습니다.
의뢰 카드를 열면 단계별 기록(실측 크기·현장 사진, 시안 버전과 고객 확정, 시공 전·후 사진)과 연결 업무, 활동 기록이 한 화면에 있습니다.
2-4. 같은 달력, 휴대폰 알림
업무·실측·시공·입금 예정이 한 달력에 모입니다. 대표별·종류별로 걸러 볼 수 있습니다. 휴대폰 알림(웹 푸시)으로 새 문의 도착과 매일 아침 9시 30분 오늘 일정 요약을 받습니다.
2-5. 견적서 발행 — 품목만 넣으면 PDF가 나옵니다
견적·계약 화면에서 품명·규격·수량·단가를 넣으면 공급가액·세액·합계가 바로 계산됩니다. [견적서 발행]을 누르면 회사가 쓰던 견적서 양식 그대로 PDF가 만들어집니다.
- 견적 번호 자동 부여(다시 발행해도 번호 유지), 합계 금액 한글 표기(예: 이백사십사만이천 원정)
- 공급자 정보·하단 문구(AS 기간·계좌)·직인은 설정에서 한 번만 등록
- 발행 뒤 품목이 바뀌면 "다시 발행이 필요해요" 안내
- 목록에서 바로 미리보기·다운로드
견적이 계약완료가 되면 잔금(계약 금액 − 계약금)이 계산되고 계약금·잔금 입금 예정 2건이 자동으로 생깁니다. 입금을 확인하면 매출 등록 창이 이어서 열리고 부가세 10%가 자동으로 나뉩니다. 예정일이 지나도 들어오지 않은 돈은 미수금으로 대시보드에 올라갑니다.
2-6. 매입·매출과 의뢰별 손익
입금 확인과 발주 수령 때 등록한 내역이 그대로 모여, 기간별 매출·매입·이익과 의뢰별 손익이 따로 계산하지 않아도 나옵니다.
2-7. 업무일지 출력 — A4 한 장
자료·인쇄에서 업무 목록을 A4 세로 한 장에 맞춰 인쇄합니다. 전체 / 필터(기간·파트·담당자) / 직접 선택 세 가지로 범위를 고르고, 파트별 색으로 구분해 출력합니다. 매일 아침 종이로 나눠 보던 업무판 습관을 그대로 살렸습니다. 고객·견적·입금·매입매출 자료는 엑셀(CSV)로 내려받을 수 있습니다.
2-8. 그 밖의 메뉴
- 고객 문의·답변: 홈페이지·전화·카톡 문의를 한곳에. 담당 지정, 답변 기록, [고객 등록 + 의뢰 시작] 한 번으로 의뢰 카드 생성(같은 연락처면 기존 고객에 연결)
- 고객리스트: 고객별 의뢰·견적·입금·문의 이력과 미수금
- 제작업체·발주: 의뢰 → 제작중 → 출고 → 수령완료. 납기 지연 표시, 수령하면 매입 자동 제안
- 홈페이지 콘텐츠: 포트폴리오·소식을 직접 올리고 고침
- 방문 통계: 오늘·주간·전체, 페이지별·유입 경로·기기(관리자 방문 제외)
- 사용자·권한: 백업·복원, 완료 의뢰 보관함
2-9. 휴대폰에서도
현장에 나가 있는 시공 대표도 휴대폰으로 같은 화면을 봅니다. 768px보다 좁으면 표가 카드 목록으로 바뀌고, 아래쪽 탭 메뉴가 나옵니다.
| 대시보드 (샘플 데이터) | 업무 (샘플 데이터) | 달력 (샘플 데이터) |
|---|---|---|
 |  |  |
3. 안전하게 — 고객 정보와 비용
| 항목 | 한 일 |
|---|---|
| 관리자 로그인 | Google 계정만, 허용 목록에 있는 두 대표만 접속 |
| 연락처 | 고객 전화·이메일을 서버에서 암호화(AES-256-GCM)해 저장. 화면에는 가린 번호, 원문을 열면 열람 기록 남김 |
| 개인정보 | 개인정보처리방침 확정, 문의는 1년 뒤 자동 삭제 |
| 봇 차단 | App Check(보이지 않는 reCAPTCHA) + 보안 규칙 검증 |
| 비용 | 월 예산 알림, 서버 함수 지출 상한 설정 |
| 품질 | 자동 테스트 1,200개 이상(단위 774 + 보안 규칙·서버 에뮬레이터 482), 배포 전 코드 검토 |
| 데이터 이관 | 기존 업무판 데이터를 옮기는 스크립트와 절차 |
4. 만들어진 사이트를 고치는 바이브 코딩 — 대표님이 직접 수정하는 환경
납품으로 끝나지 않고, 대표님이 필요할 때 직접 홈페이지를 고칠 수 있게 세팅했습니다.
- 대표님 PC에 Git·Node.js·GitHub CLI·Firebase CLI를 설치하고 Claude 데스크톱 앱과 연결했습니다.
- 프로젝트 안에 Claude용 안내서(CLAUDE.md)를 넣었습니다. 지켜야 할 규칙(반응형, 날짜·금액 표기, 용어, 보안)이 적혀 있어 Claude가 이 규칙대로 고칩니다. 대표님은 chat GPT를 사용하기 때문에 chat GPT 환경에서 이어서 진행할 수 있게 셋팅했습니다.
- 대표님은 chat GPT에게 "소개 페이지 문구 바꿔 줘"처럼 말로 부탁하고, 바뀐 화면을 확인한 뒤 "올려 줘"라고 하면 됩니다.
- GitHub에 올라가면 자동으로 검사 → 빌드 → 배포됩니다. 검사에 실패하면 배포되지 않아 운영 사이트가 깨지지 않습니다.
- 보안 규칙·서버 함수처럼 민감한 변경은 미리보기 주소에서 먼저 확인한 뒤 반영하도록 나눴습니다.
- 문제가 생기면 Firebase 콘솔에서 이전 버전으로 바로 되돌리거나, chat GPT에게 "마지막 수정 되돌려 줘"라고 하면 됩니다.
인증은 키 파일이 없는 방식(WIF)을 써서 PC나 저장소에 비밀 키를 두지 않았습니다.
5. 블로그 글 작성 + sns-relay
시공 사례를 알리는 일까지 줄이기 위해 두 도구를 함께 설치했습니다.
- 블로그 글 작성: 시공 사진과 메모를 주면 chat GPT가 블로그 글 초안을 씁니다.
- sns-relay: 발행한 블로그 글 주소 하나로 Threads·인스타그램·페이스북 페이지·네이버 블로그용 초안을 만들고, 대표님이 승인한 것만 공식 API로 한 번에 발행합니다. 네이버는 붙여 넣기용 원고를 만들어 줍니다.
업무 사이트에서 시공 후 사진을 포트폴리오로 등록 → 블로그 글 작성 → sns-relay로 SNS 동시 발행까지 한 흐름으로 이어집니다.
6. AI 활용 교육 — 주 1회 1시간, 4회
도구를 설치만 하고 끝내지 않도록 대표님과 직접 써 보는 교육을 진행합니다.
| 회차 | 내용 |
|---|---|
| 1회 | 업무 사이트 한 바퀴: 문의 → 의뢰 → 견적서 발행 → 인계 → 정산 (사용자 여정 가이드로 실습) |
| 2회 | 바이브 코딩으로 시안 다듬기: 초안으로 납품한 홈페이지를 chat GPT에게 말로 부탁해 문구·사진·구성 고치고 올리기, 되돌리는 법 |
| 3회 | 블로그 글 작성과 sns-relay로 SNS 한 번에 발행하기 |
| 4회 | 카톡 자동화: 고객과 나눈 카톡 대화를 AI로 정리해 고객 등록·업무 추가로 잇고, 업무 대화방 사진을 폴더에 자동 저장한 뒤 업무 사이트에 등록하는 흐름을 함께 만들어 보기 |
7. 기술 구성
| 영역 | 사용 기술 |
|---|---|
| 화면 | Next.js(정적 내보내기), React, TypeScript, Tailwind CSS, shadcn/ui |
| 서버 | Firebase — Hosting, Firestore, Storage, Authentication, Cloud Functions(Node 22, 서울 리전), Cloud Messaging(웹 푸시), App Check |
| 브라우저에서 견적서 PDF 생성(한글 글꼴·직인 포함) | |
| 배포 | GitHub Actions(main → 운영, PR → 미리보기), 키 없는 인증(WIF) |
| 테스트 | Vitest, Firebase 에뮬레이터 보안 규칙 테스트 |