소개
지난주에 제작하던 mvp 사이트에 클로드 코드로 팝빌 팩스/SMS API연동 + 모바일 서명 시스템 구축을 진행했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Claude Code (Opus 4.6) — 전체 개발 파트너. 코드 작성, 디버깅, 배포까지 대화형으로 진행
팝빌(Popbill) API — 팩스 발송 + SMS 문자 발송
PortOne — 팩스 발송 결제 (카드결제 2,200원/회)
Next.js 14 + Vercel — 프론트엔드/백엔드/배포
pdf-lib — 위임장·동의서 PDF 서버사이드 생성
추가 하고 싶었던 기능
병원에서 서류발급을 위해 대리인이 작성하는 동의서 위임장을 웹에서 손쉽게 작성하게 한 다음
모바일SMS를 통해 환자 서명을 받은
다음 그걸 팩스 API로 병원에 송부를 원하는 경우
업로드한 신분증 사진 파일과 함께 결제 후 보내는 플로우를 구현하고자 했습니다.
팝빌을 사용한 계기
처음 PRD를 만들때 그록이 추천해준 업체인데 신청 바로 다음날 연락 주셔서 이것저것 상세하게 알려주셨고 codef와 달리 종량제 방식이라 크게 부담도 없었습니다.
사이트가 제공하는 서비스 구성
다음날 바로 회신 받은 이메일
사이트 히어로 섹션 구성 조금 변경 (제미나이 API 붙여서 마치 Gpts 느낌으로 좀 변경시켰습니다)
프롬프트 활용
1단계: 팝빌 테스트 환경 셋업
아래 작업을 순서대로 해줘:
1. npm install popbill jose 실행
2. .env.local에 POPBILL_LINK_ID, POPBILL_SECRET_KEY, POPBILL_CORP_NUM 키 추가
3. src/app/api/test-fax/route.ts 파일 생성 (팝빌 팩스 테스트 API)
4. src/app/api/test-sms/route.ts 파일 생성 (팝빌 SMS 링크 발송 테스트 API)
5. scripts/popbill-test.mjs 파일 생성 (직접 실행 테스트 스크립트)
6. package.json에 "test:popbill" 스크립트 추가2단계 :SMS 서명 요청 플로우
서명 패드위에 서명하기 버튼 혹은 위에 클릭하면
1. 팝업으로 (직접서명 / 환자본인요청)
2. 직접 서명은 기존 대로 진행
3. 환자본인요청은 → 전화번호입력 → 링크발송 버튼
4. 입력이 완료되면 서버에서 입력완료 확인 → 본인입력완료
5. 확인 버튼 누르면 PDF 생성과 팩스 보내기 팝업 뜸
이렇게 API 호출을 받고
문자 까지는 오는데... 클릭하면 서명란이 안뜨더라구요 ... 계속 실패(중...ㅠㅠ)
만약 환자가 모바일에 직접 서명을 하게 되는 경우는 다행히 다운로드와 팩스발송까지는 넘어가는데
어제 잘 가던 팩스가 오늘 결제 연동을 붙이니까 애를 먹이네요 (ing....)
어디서 부터 손을 대야할지 고민의 순간이 왔습니다 ㅎㅎ... 우선 결제 +팩스 먼저 다시 마무리 해보고 문자 서비스는 좀 다른 구현 방법이나 아이디어가 없는지 클로드 코드와 이야기 나눠봐야 할 것 같습니다.
결과와 배운 점
과정 중에 어떤 시행착오를 겪었나요?
팝빌에서 실은 SMS 전송을 위해서 통신사의 가입사실 확인서를 요구했는데 이걸 차근차근 보완하고 (웹으로 가능) 전체 틀을 짜고 진행해도 되는데 괜히 팩스랑 결제 이것저 것 계획없이 병렬로 작업하고 붙이다가 더 크게 돌아가는 느낌입니다.
앞으로 여러 API를 작업할일이 있으면 좀더 계획을 탄탄하게 세우고 진행해야겠습니다.
앞으로의 계획이 있다면 들려주세요.
팝빌 정식 API Key 발급 후 실서비스 전환
이메일 리드 수집 세팅
단체보험 연결 랜딩 붙이기
트래픽 추적
광고 붙이기
도메인 병원서류.KR로 재배포
