# 고객이 "뭘 적어야 하지?" 고민하지 않는 사건 접수 폼 만들기
## 📝 한줄 요약
파일 업로드 하나 고치는 데 3번 실패하고, 그 경험에서 AI와 협업하는 핵심 원칙을 깨달았습니다 — "작게 요청하고, 안 되면 방법을 바꿔라."
바쁘시면 이것만 읽어도 돼요:
- 서비스명 변경, 관리자 인증, 파일 업로드, UI 개편, 가이드 질문 폼, 보안 검토, 테스트까지 하루 만에 9개 작업 완료
- 파일 업로드 기능이 3번 연속 실패 — "클릭이 안 되면 드래그로 바꿔줘"라고 하니 해결됨
- 비법률가용 4단계 가이드 질문 폼이 이 프로젝트의 핵심 혁신 — "뭘 적어야 하지?"를 없애는 구조
- AI에게 요청할 때는 한 번에 크게 시키지 말고, 작은 단위로 나눠서 결과를 확인하며 진행하는 것이 핵심
## 🎯 이런 분들께 도움돼요
- 법률 사건 접수 과정에서 고객이 "뭘 적어야 할지 모르겠다"는 말을 자주 듣는 변호사
- AI 도구로 사무소 업무를 자동화하고 싶지만, 시행착오가 두려운 분
- 웹 서비스에 파일 업로드, 관리자 화면, 보안 같은 "진짜 기능"을 넣고 싶은 비개발자
- 1편을 읽고 "그래서 세부 기능은 어떻게 만들었는데?"가 궁금했던 분
---
## 🔧 작업 과정
### 이름을 바꾸는 것부터 시작했다
1편에서 만든 웹앱의 이름은 "송무AI"였다. 그런데 아버지께서 보시더니, 이름에 본인 이름이 들어가야 한다고 하셨다. 변호사 서비스니까 누구의 서비스인지 명확해야 한다는 것이다. 맞는 말이다.
```
서비스명을 "송무AI"에서 "안장근 송무AI"로 변경해줘
```
이 한 줄로 웹사이트 전체에서 서비스명이 바뀌었다. 헤더, 푸터, 페이지 타이틀까지 전부. 사소해 보이지만, 이런 "전체에 걸친 일괄 수정"이 AI 코딩 도구의 강점이다. 사람이 하면 하나씩 찾아서 바꿔야 하는데, AI는 관련된 모든 파일을 알아서 찾아서 수정한다.
---
### 관리자 화면 — "나만 볼 수 있는 페이지"
고객이 접수한 사건을 관리하려면 관리자 전용 화면이 필요하다. 아이디와 비밀번호로 로그인해서, 접수된 사건 목록을 보고, 상태를 변경하고, 첨부파일을 다운로드하거나 삭제할 수 있어야 한다.
```
오른쪽 위 사건접수 버튼 옆에 관리자대시보드 버튼을 추가해.
관리자 아이디/비밀번호로 등록할 수 있게 해줘.
```
```
관리자 대시보드에서 첨부파일 다운로드할 수 있게 수정해.
그리고 삭제할 수 있게 삭제버튼도 추가해.
```
이렇게 두 번에 나눠서 요청했다. 처음에 로그인과 기본 대시보드를 만들고, 다음에 파일 관리 기능을 추가한 것이다. 한 번에 "로그인도 만들고 파일 관리도 되고 상태 변경도 되는 대시보드 만들어줘"라고 할 수도 있지만, 경험상 나눠서 요청하는 게 결과가 훨씬 좋다. 각 단계에서 제대로 동작하는지 확인한 다음 넘어갈 수 있으니까.
---
### 파일 업로드 — 3번의 실패에서 배운 것
솔직히 이 부분이 가장 답답했다. 그리고 가장 많이 배운 부분이기도 하다.
사건 접수 폼에 파일 첨부 기능이 있었다. "클릭하여 파일을 첨부하세요"라는 영역이 있는데, 클릭해도 아무 반응이 없었다.
```
이 페이지에서 클릭하여 파일을 첨부하라는 창이 클릭해도 창이 뜨지 않아
```
Claude Code가 수정해줬다. 그런데 또 안 됐다. 다시 말했다.
```
관련 자료 첨부 칸에 클릭하여 파일 첨부가 안돼.
```
또 수정해줬다. 또 안 됐다. 이때 깨달았다. 같은 방식으로 계속 고쳐달라고 하면 같은 문제가 반복된다. 그래서 아예 방법을 바꿨다.
```
클릭하는 기능을 없애. 파일을 드래그 해서 넣으면 업로드 되게 수정해.
```
이번에는 한 번에 됐다. 파일을 마우스로 끌어다 놓으면 바로 업로드되는 깔끔한 방식으로 바뀌었다. 나중에는 지원하는 파일 형식도 PDF, Word, 이미지, TXT까지 확장했다.
이 경험에서 얻은 교훈이 두 가지다.
첫째, AI도 같은 접근법으로는 같은 문제를 반복할 수 있다. "이거 고쳐줘"를 세 번 반복하는 것보다, "다른 방법으로 해줘"라고 방향을 바꾸는 게 효과적이다.
둘째, 작은 단위로 요청하고 매번 확인하는 습관이 중요하다. 만약 파일 업로드를 다른 10가지 기능과 함께 한꺼번에 요청했다면, 어디서 문제가 생겼는지 찾기가 훨씬 어려웠을 것이다.
> [권장 이미지 1] 파일 드래그&드롭 업로드 영역 스크린샷 — 파일을 끌어다 놓는 UI가 보이는 화면
---
### UI/UX 개편 — "예쁘게"가 아니라 "수임이 늘게"
웹사이트가 동작은 하는데, 디자인이 투박했다. 단순히 예쁘게 만드는 게 목적이 아니라, 고객이 사건을 접수하고 싶은 마음이 들도록 신뢰감 있는 디자인이 필요했다.
```
ui-ux-designer 에이전트를 사용해서 전체적으로 ui ux 개선해.
안장근 변호사의 수임을 높이기 위한 전략을 세워.
```
이 요청 하나로 랜딩 페이지, 접수 폼, 결과 페이지가 전면 개편됐다. "지금 무료 분석받기" 같 은 행동 유도 버튼이 눈에 띄게 배치되고, 변호사 경력과 실적 같은 신뢰 요소가 추가됐다. 디자인을 모르는 사람이 "수임을 높이고 싶다"는 목적만 말했을 뿐인데, AI가 전환율 최적화 관점에서 알아서 설계해준 것이다.
> [권장 이미지 2] UI/UX 개편 전후 비교 — 개편 전 투박한 화면 vs 개편 후 신뢰감 있는 화면 (Before/After 나란히)
---
### 이 프로젝트의 핵심 — 비법률가를 위한 가이드 질문
웹앱이 거의 완성됐을 때, 한 가지 본질적인 걱정이 생겼다. 법률을 모르는 일반인이 사건 내용을 어떻게 자세히 적을 수 있을까?
"사건 내용을 상세히 기술해 주세요"라는 빈 텍스트 상자를 보면, 대부분의 고객은 멈칫한다. 뭘 적어야 하는지 모르니까. 결국 "이웃과 싸웠어요" 같은 한 줄만 적고 제출하거나, 아예 포기한다.
```
비법률가가 사건을 접수하는 것이기 때문에
사건 내용을 자세히 적어주기 어려움이 있을것 같애.
어떤 내용을 넣으면 편하게 하지만 정확하게 내용을 접수할 수 있을까?
```
이 고민을 그대로 전달했더니, Claude Code가 4단계 위자드 형식의 접수 폼을 설계하고 구현했다.
1단계: 기본정보 — 이름, 전화번호, 이메일
2단계: 사건유형 선택 — 민사, 형사, 가사, 행정, 채권추심, 부동산, 노동, 기타 중 선택 (아이콘으로 직관적 표시)
3단계: 유형별 가이드 질문 — 선택한 사건유형에 맞는 맞춤 질문이 자동으로 나옴
4단계: 추가 설명 + 파일 업로드 — 보충할 내용이 있으면 자유롭게 작성
핵심은 3단계다. 예를 들어 "민사"를 선택하면 "상대방과의 관계는?", "분쟁 금액은?", "관련 계약서가 있나요?" 같은 질문이 나온다. "형사"를 선택하면 "피해 일시와 장소는?", "경찰 신고 여부는?", "증거자료가 있나요?" 같은 다른 질문이 나온다. 7개 사건유형별로 3~6개씩 변호사가 실제로 물어볼 질문들이 미리 세팅돼 있다.
고객은 빈 종이 앞에서 막막해할 필요 없이, 그냥 질문에 하나씩 답하면 된다. 답변이 모이면 자동으로 사건 내용이 구조화되어 정리된다. 변호사 입장에서도 필요한 정보가 빠짐없이 들어온다.
이것이 이 프로젝트에서 가장 중요한 혁신이라고 생각한다. 기술적으로 대단한 건 아닐 수 있다. 하지만 "고객이 뭘 적어야 할지 모르는 문제"를 해결하는 구조는 법률 서비스의 접근성을 근본적으로 바꾼다. 변호사에게 전화해서 30분 동안 질문을 받는 과정을, 고객이 집에서 5분 만에 스스로 해결할 수 있게 된 것이다.
> [권장 이미지 3] 4단계 위자드 접수 폼 스크린샷 — 사건유형 선택 화면과 가이드 질문 화면을 나란히 보여주는 구성
---
### 보안 검토와 테스트 — "되는 것" 너머의 "안전한 것"
웹사이트가 잘 돌아간다고 끝이 아니다. 고객의 개인정보와 사건 내용을 다루는 서비스니까 보안이 중요하다.
```
보안 검토해줘
```
이 한 마디로 Claude Code가 보안 취약점을 전수 검사했다. 로그인 인증 방식을 더 안전한 라이브러리로 교체하고, 외부 공격 방어 설정을 추가하고, 데이터 접근 권한을 강화했다. 내가 존재조차 몰랐던 보안 항목들 — CSRF 방어, CSP 헤더, HSTS 설정 같은 것들을 알아서 잡아줬다.
마지막으로 자동화 테스트도 만들었다. 웹사이트의 주요 기능이 제대로 동작하는 지 기계가 자동으로 확인해주는 프로그램이다. 랜딩 페이지가 뜨는지, 접수 폼이 작동하는지, 페이지 이동이 되는지를 자동으로 검증한다. 나중에 기능을 수정했을 때 다른 곳이 깨지지 않았는지 바로 확인할 수 있다.
---
## ✅ 결과
### 하루 동안 완성한 것들
| 작업 | 내용 |
|------|------|
| 서비스명 변경 | "송무AI" → "안장근 송무AI" 전체 반영 |
| 관리자 시스템 | 로그인(JWT 인증) + 대시보드 + 파일 관리 |
| 파일 업로드 | 3번 시행착오 끝에 드래그&드롭으로 완성 |
| UI/UX 개편 | 수임률 향상 전략 기반 전면 디자인 개선 |
| 가이드 질문 폼 | 4단계 위자드, 7유형별 맞춤 질문 |
| 보안 검토 | JWT, CSRF, CSP, HSTS 등 종합 수정 |
| 자동화 테스트 | 주요 기능 3개 검증 자동화 |
### 핵심 교훈
1. 작게 요청하고 매번 확인하라 — 한 번에 10가지를 시키면 어디서 문제가 생겼는지 모른다
2. 안 되면 방법을 바꿔라 — 같은 방식으로 3번 고쳐달라는 것보다, "다른 방법으로 해줘"가 빠르다
3. 고민을 그대로 말하라 — "비법률가가 접수하기 어려울 것 같다"는 고민이 4단계 위자드라는 해결책을 낳았다
---
## 📋 재사용 가능한 프롬프트
### 프롬프트 1: 고객 맞춤 가이드 질문 설계
> [업종]의 [고객 유형]이 [신청/접수 내용]을 쉽게 작성할 수 있도록 가이드 질문을 설계해줘.
> [유형 분류] 별로 핵심 질문 3~6개씩 만들고, 단계별 위자드 형식으로 구현해줘.
### 프롬프트 2: 관리자 대시보드 구현
> 관리자만 로그인해서 접근할 수 있는 대시보드를 만들어줘.
> [관리 대상] 목록을 보 고, 상태를 변경하고, 첨부파일을 다운로드/삭제할 수 있게 해줘.
### 프롬프트 3: 기능이 반복 실패할 때
> [기능명]이 같은 방식으로 계속 안 돼.
> 현재 방식 대신 [대안 방식]으로 완전히 바꿔서 구현해줘.
### 프롬프트 4: 보안 검토 요청
> 보안 검토해줘. 고객 개인정보를 다루는 서비스니까 취약점을 전수 검사하고,
> 위험도별로 분류해서 자동으로 수정해줘.
---
## 🔮 다음 편 예고
3편: 서비스 개편 — 고객 피드백으로 서비스 구조를 뜯어고치다
웹앱이 완성되고 아버지께 보여드렸더니, 수정 요청이 쏟아졌다. 서비스 이름부터 가격 체계, 이용 절차, 변호사 소개까지 — "이건 이렇게 바꿔야 해"라는 실무자 피드백을 반영하며 서비스를 전면 개편한 이야기. 전환율 최적화(CRO) 도구로 마케팅 관점까지 점검한 과정도 함께 다룹니다.
