# 비개발자가 아버지 법률사무소 웹앱을 하루 만에 만들었다
## 한줄요약
비개발자인 아들이 AI 코딩 도구(Claude Code)를 활용해, 아버지 법률사무소의 사건 접수·AI 분석 웹앱을 기획부터 배포까지 단 하루 만에 완성한 실제 사례입니다.
---
## 바쁘시면 이것만
- 코딩 경험 없는 비개발자가 법률 웹앱을 하루 만에 기획 → 개발 → 배포 완료
- AI에게 "나는 비개발자라 잘 몰라"라고 솔직하게 말하면, 단계별 안내를 받을 수 있다
- 핵심 팁: 한 번에 다 시키지 말고, 작은 단위로 요청하고 매번 확인하라
- 41개 파일, 5개 데이터베이스 테이블, 관리자 대시보드까지 포함된 실서비스 수준
---
## 이런 분들께 도움이 됩니다
- 법률사무소에 AI 도입을 검토하고 있는 변호사 및 사무장
- IT 업체에 외주를 맡기자니 비용이 부담되는 소규모 법무법인
- "AI로 뭘 할 수 있는지" 실제 사례가 궁금한 법률 실무자
- 개발자 없이도 웹 서비스를 만들 수 있는지 궁금한 모든 비개발자
---
## 🔍 문제 상황 (Before)
아버지는 법무법인(유한)정률의 구성원 변호사이시다. 감사원 국장, 법무부 감찰관을 역임한 30년 경력의 베테란이지만, 사건 접수 과정에서 늘 같은 고민을 안고 계셨다.
"전화로 사건 내용을 듣는데, 의뢰인이 본인 상황을 정리하지 못하고 오는 경우가 많아."
의뢰인은 법률 용어를 모른다. 자신에게 어떤 일이 일어났는지는 알지만, 그걸 법적으 로 어떤 유형의 사건인지, 어떤 서류가 필요한지는 모른다. 그래서 첫 상담에서 기본 정보를 파악하는 데만 상당한 시간이 소요된다.
나는 개발자가 아니다. 하지만 AI 코딩 도구를 활용하면 아버지의 이 문제를 해결할 수 있겠다고 생각했다. 사건을 온라인으로 접수받고, AI가 자동으로 내용을 분석·요약해주는 웹앱을 만들면 어떨까?
> [권장 이미지 1] 기존 사건 접수 방식의 불편함을 보여주는 일러스트 또는 Before 화면 캡처 (이 섹션 하단 배치)
---
## 🛠️ 사용한 도구
| 도구 | 용도 |
|------|------|
| Claude Code (AI 코딩 도구) | 기획서를 코드로 변환, 전체 개발 작업 수행 |
| Next.js + React | 웹앱 프레임워크 (AI가 자동 선택·설정) |
| Supabase | 데이터베이스 (무료 플랜으로 시작) |
| Vercel | 배포 플랫폼 (GitHub 연동 자동 배포) |
| OpenAI API | AI 사건 분석 엔진 |
개발 도구를 직접 선택한 것이 아니다. 기획서를 주고 "이걸 만들어달라"고 했더니 AI가 최적의 기술 스택을 알아서 구성했다.
---
## 📋 작업 과정 — 하루 동안 일어난 일
### 작업 1. 기획서 한 장으로 41개 파일 생성
처음 한 것은 상세 기획서를 작성하는 것이었다. "어떤 웹앱이 필요한지"를 구체적으로 적었다.
```
안장근 변호사의 법률 사건 접수 ~ 위임 전환까지의 고객 관리 웹 애플리케이션을 만들어줘.
고객이 사건을 접수하면 AI가 내용을 자동 요약·분류하고, 단계별(사건분석 → 상담 → 위임)로 서비스를 제공하는 웹앱.
```
이 한 번의 요청으로 AI는 41개 파일을 생성했다. 사건 접수 페이지, 결과 확 인 페이지, 관리자 대시보드, AI 분석 엔진, 인증 시스템, 데이터베이스 설계까지 전부 포함되어 있었다.
솔직히 놀랐다. 외주 개발이었다면 기획 회의만 2~3주는 걸렸을 것이다. 그런데 기획서를 주고 몇 분 만에 전체 구조가 잡혔다.
> [권장 이미지 2] 생성된 프로젝트 파일 구조 또는 초기 화면 캡처 (이 섹션 하단 배치)
### 작업 2. "토스 말고 무통장으로, Claude 말고 ChatGPT로"
AI가 처음 만든 버전에는 토스페이먼츠 결제와 Claude API가 적용되어 있었다. 하지만 토스 연동은 사업자 심사가 필요하고, AI 엔진은 ChatGPT가 더 적합하다고 판단했다. 수정 요청은 간단했다.
```
결제 중 토스페이먼츠는 나중에 연결하게 지금은 무통장 입금으로 바꿔줘
```
```
claude api 가 아닌 chatgpt api 로 수정해
```
두 줄의 요청으로 결제 시스템과 AI 엔진이 모두 교체되었다. 여기서 얻은 교훈이 있다. 한 번에 모든 걸 완벽하게 시키려 하지 말고, 작은 단위로 요청하고 결과를 확인한 뒤 다음 단계로 넘어가는 것이 훨씬 효과적이다.
### 작업 3. 데이터베이스 없이 먼저 테스트
웹앱이 만들어졌지만, 데이터베이스(Supabase)를 아직 연결하지 않은 상태였다. 데이터베이스 설정은 비개발자에게 부담스러운 작업이다. 그래서 먼저 로컬에서 테스트할 수 있도록 요청했다.
```
supabase 는 나중에 연결할게. 현재는 로컬에 저장할수 있도록해
```
AI는 JSON 파일 기반의 임시 데이터베이스를 만들어주었다. 덕분에 복잡한 데이터베이스 설정 없이도 웹앱의 모든 기능을 로컬에서 먼저 테스트할 수 있었다. 어려운 부분은 나중으로 미루고, 할 수 있는 것부터 확인하는 전략이었다.
### 작업 4. "나는 비개발자라 잘 몰라" — 배포와 DB 연결
로컬 테스트까지 마쳤다. 이제 진짜 인터넷에 올려야 한다. 하지만 배포와 데이터베이스 연결은 어떻게 하는 건지 전혀 감이 없었다. 그래서 솔직하게 말했다.
```
배포와 db 연결은 어떻게해? 나는 비개발자라 잘몰라
```
이 한마디가 결정적이었다. AI는 내가 비개발자라는 것을 인지하고, "1단계: Supabase 홈페이지에 접속합니다 → 2단계: 새 프로젝트를 생성합니다 → 3단계: 이 키 값을 복사합니다" 식으로 단계별 안내를 시작했다.
Supabase에서 키 값을 복사해서 전달하자, AI가 알아서 데이터베이스 테이블 5개를 설정하고, GitHub 저장소를 만들고, Vercel에 배포까지 완료했다. 최종 주소는 songmu-ai.vercel.app.
모르면 모른다고 말하는 것이 가장 빠른 해결책이었다.
> [권장 이미지 3] 완성된 웹앱의 메인 화면 또는 배포 완료 화면 캡처 (이 섹션 하단 배치)
---
## ✅ 결과 (After)
| 항목 | Before | After |
|------|--------|-------|
| 사건 접수 방식 | 전화·방문 (구두 설명) | 웹 폼으로 24시간 온라인 접수 |
| 사건 내용 파악 | 첫 상담에서 수동 정리 | AI가 자동 요약·분류·쟁점 분석 |
| 필요 서류 안내 | 변호사가 직접 안내 | AI가 사건유형별 자동 안내 |
| 개발 비용 | 외주 시 수백만 원~수천만 원 | AI 도구 구독료 + API 사용료 |
| 개발 기간 | 외주 시 수주~수개월 | 1일 (기획~배포) |
| 개발에 필요한 코딩 지식 | 풀스택 개발 역량 | 없음 (비개발자 완성) |
아버지의 반응? 만족하셨다. 아직 실제 의뢰인에게 공개하기 전 단계이지만, 접수 폼을 직접 테스트해보시고 "이런 게 가능하구나"라고 말씀하셨다.
---
## 💡 비개발자를 위한 재사용 프롬프트
이 프로젝트에서 효과적이었던 프롬프트 패턴을 공유합니다. 비슷한 프로젝트를 시작할 때 참고하세요.
> 프로젝트 시작 프롬프트:
> "[업종]의 [업무 프로세스] 웹 애플리케이션을 만들어줘. [고객 행동]을 하면 AI가 [자동화할 작업]을 수행하고, 단계별로 [서비스 흐름]을 제공하는 웹앱."
> 기능 변경 프롬프트:
> "[현재 기능]은 나중에 연결할게. 지금은 [대안 방식]으로 바꿔줘."
> 비개발자 도움 요청 프롬프트:
> "[해야 할 작업]은 어떻게 해? 나는 비개발자라 잘 몰라."
> 단계별 진행 프롬프트:
> "[복잡한 기능]은 나중에 연결할게. 현재는 [간단한 대안]으로 해."
---
## 📌 다음 편 예고
2편: "법률 문외한도 쉽게 사건을 접수할 수 있게 — UX 설계 이야기"
비법률가가 사건을 접수할 때 가장 어려운 것은 "뭘 적어야 하는지 모르는 것"이다. 사건유형별 가이드 질문, 4단계 위자드 폼, 파일 업로드 문제를 여러 번 수정한 과정을 다룹니다. AI에게 "의뢰인 입장에서 생각해봐"라고 요청했을 때 나온 결과가 인상적이었습니다.
---
이 글은 실제 프로젝트 개발 과정을 기록한 시리즈의 1편입니다.
사용된 AI 도구: Claude Code (Anthropic) | 프로젝트: 안장근 송무AI
