실전: 노무 상담 접수 폼

Phase 9의 마무리로, 실제 업무에 사용할 수 있는 온라인 노무 상담 접수 폼을 만들어 보겠습니다. 이건 진짜 쓸 수 있는 결과물입니다. [기존 방식] 의뢰인이 전화로 상담 신청 → 사무직원이 수기로 접수 → 상담유형·연락처를 메모장이나 엑셀에 기록. 퇴근 후나 주말에는 접수 자체가 불가능합니다. [AI 자동화] 온라인 접수 폼을 배포하면 24시간 상담 접수가 가능합니다. 의뢰인이 직접 상담유형을 선택하고 사건 개요를 입력하니, 전화 통화 시간도 절약됩니다. 어떤 정보를 받을지 설계해 보겠습니다. 상담유형은 부당해고, 임금체불, 직장내 괴롭힘, 산업재해, 기타 중에서 선택하게 합니다. 의뢰인 정보로는 이름, 연락처(전화번호), 이메일을 받습니다. 사건 개요는 자유롭게 작성할 수 있는 텍스트 영역을 제공합니다. 개인정보 수집·이용 동의 체크박스는 필수로 넣어야 합니다. 추가로 '긴급 여부' 체크박스와 '희망 상담 일시' 선택 기능을 넣으면 실무에 바로 활용할 수 있는 수준이 됩니다.

설계가 끝났으면 Claude Code에게 구체적으로 요청합니다. 요청이 구체적일수록 원하는 결과물에 가까운 코드가 나옵니다. 이전 레슨에서 만든 Next.js 프로젝트에 상담 접수 페이지를 추가하는 방식으로 진행합니다. 폼 제출 시 입력값 검증(이름·연락처 필수), 제출 완료 메시지 표시까지 포함하여 요청합니다.

// Claude Code에게 이렇게 요청합니다

"Next.js 프로젝트에 상담 접수 페이지를 만들어 줘.

폼 필드:
1. 상담유형 (드롭다운)
   - 부당해고
   - 임금체불
   - 직장내 괴롭힘
   - 산업재해
   - 기타
2. 성함 (필수)
3. 연락처 (필수, 전화번호 형식 검증)
4. 이메일
5. 사건 개요 (여러 줄 입력 가능)
6. 긴급 여부 (체크박스)
7. 개인정보 수집·이용 동의 (필수 체크박스)
   - 동의 내용: 상담 목적으로 성함, 연락처,
     이메일, 사건 내용을 수집·이용합니다.

제출하면 '접수가 완료되었습니다.
담당 노무사가 영업일 기준 1일 이내
연락드리겠습니다.' 메시지를 보여줘.
디자인은 깔끔하고 신뢰감 있게.
상단에 한동노무법인 로고 영역도 넣어 줘."

Claude Code가 코드를 작성하면 npm run dev로 내 컴퓨터에서 먼저 확인합니다. 폼이 제대로 동작하는지, 디자인이 마음에 드는지 점검하고, 수정이 필요하면 Claude Code에게 추가 요청합니다. '버튼 색상을 남색으로 바꿔 줘', '상담유형에 노란봉투법 관련 항목도 추가해 줘' 같은 수정은 말 한마디로 됩니다. 완성되면 이전 레슨에서 배운 대로 GitHub에 push하고 Vercel에서 배포합니다. 배포된 URL을 명함에 인쇄하거나, 블로그·SNS에 공유하면 의뢰인이 직접 상담을 신청할 수 있습니다. 외주 비용 없이 나만의 온라인 상담 접수 시스템을 갖게 되는 것입니다. 더 발전시키고 싶다면 Phase 8에서 배운 MCP 연동을 적용할 수도 있습니다. 폼이 제출되면 자동으로 이메일 알림이 오고, Notion 사건 DB에 등록되고, 캘린더에 상담 일정이 잡히는 완전 자동화도 가능합니다. 전화 한 통 없이도 의뢰인 접수부터 사건 등록까지 이어지는 시스템, 이것이 Phase 8과 Phase 9을 결합한 결과물입니다.