[후속 작업] 구조를 잡았더니, 그 위에 쌓는 건 훨씬 빨랐다 — 웨비나 운영 대시보드를 웹으로 만든 이야기

📝 한줄 요약

지난번에 신청·피드백·집계 구조를 다시 잡은 덕분에, 이번엔 "어디서든 현황을 볼 수 있는 웹 대시보드"를 반나절 만에 추가할 수 있었습니다.

ALT

한국어가 적힌 컴퓨터의 스크린샷

바쁘시면 이것만 읽어도 돼요:

• SMS 서비스(뿌리오 → Solapi) 교체, 발송 문구 직접 입력 방식으로 전환 등 기존 불편함을 먼저 해소했습니다.

• 그 다음 EXE(PC 전용)로만 확인하던 운영 현황을 Vercel 웹 대시보드로 옮겼습니다.

• 앞으로는 입금 확인 안내, 피드백 발송까지 웹 대시보드에서 한 흐름으로 처리하는 게 목표입니다.

🎯 이런 분들께 도움돼요

• 지난번 사례글처럼 운영 구조를 정리했지만, 현황 확인은 여전히 PC에서만 하고 있는 분

• EXE나 특정 앱 없이도 어디서든 신청 현황을 보고 싶은 분

😫 문제 상황 (Before)

지난번 작업으로 신청 페이지, 피드백 페이지, Airtable 집계 구조까지 흐름을 잡았습니다. 그런데 막상 운영해보니 아직 남은 불편함이 있었습니다.

첫 번째는 SMS 발송이 아예 안 된다는 점이었습니다. 기존 뿌리오 서비스가 제 상황에 맞지 않아서 Solapi로 바꿔야 했는데, 코드 안에 서비스 의존성이 깊이 박혀 있었습니다.

두 번째는 발송 문구를 바꾸려면 코드 파일을 열어야 한다는 점이었습니다. 매달 같은 형식으로 안내 메시지를 보내는 건데, 그때마다 코드를 수정하는 건 비효율적이고 실수도 생기기 쉬웠습니다.

세 번째가 가장 컸습니다. 신청 현황을 확인하려면 반드시 내 PC에서 EXE를 실행해야 했습니다. 이동 중이거나, 다른 기기를 쓸 때는 Airtable을 직접 열어봐야 했고, 원하는 형태로 정리된 뷰도 없었습니다.

구조는 잘 잡혔는데 아직 "운영하기 편한 상태"는 아니라는 걸 느끼면서, 이번 작업을 시작하게 됐습니다.

🛠️ 사용한 도구

• 도구명: Claude Code

• 운영 도구: Airtable, Vercel

• 결과물 성격: SMS 서비스 교체, 발송 기능 개선, Vercel 웹 운영 대시보드 구축

🔧 작업 과정

먼저 쌓인 불편함부터 — SMS 서비스 교체와 발송 문구 자유화

처음에는 "대시보드 만들기"가 목표였지만, 막상 열어보니 SMS 발송 자체가 안 되는 상태였습니다. 뿌리오를 쓰던 코드가 남아 있었고, 저는 이미 Solapi로 바꾸기로 했기 때문에 먼저 이걸 정리해야 했습니다.

뿌리오 대신 solapi를 사용할 거야. 뿌리오와 관련된 것은 제거해줘

AI가 SMS 발송 관련 파일들을 찾아서 뿌리오 의존 코드를 제거하고, Solapi API 형식에 맞게 재작성했습니다. 코드 안에 서비스가 얼마나 깊이 박혀 있는지 제가 직접 파악하려면 훨씬 시간이 걸렸을 텐데, AI가 의존 관계를 먼저 찾아주고 순서대로 바꿔줬습니다.

그다음은 발송 문구 문제였습니다. 저는 개발자가 아니라서, 문구 하나 바꾸려고 코드 파일을 열고 수정하는 게 매달 반복되는 부담이었습니다.

발송 내용은 내가 작성해서 줄께, 붙여 넣기 할 수 있게 해줘.
그리고 테스트 발송 버튼을 만들어줘.

테스트 발송 부분은 나에게 발송해 보는 거야.
내 이메일은 [email protected], 전화번호는 010-2005-0000

이후 발송 문구를 EXE 화면에서 직접 붙여넣기 할 수 있게 바뀌었고, 테스트 발송 버튼도 생겼습니다. 제 이메일과 번호로 먼저 보내보고 확인하는 흐름이 생기니까 실수가 훨씬 줄었습니다.

가상 데이터로 먼저 검증하기

대시보드를 만들기 전에, 실제처럼 데이터가 채워진 상태에서 테스트해보고 싶었습니다.

가상의 데이터 108명만 넣어줘. 그들의 인적사항이나 이런 내용을 만들어줘.

AI가 실제 웨비나 신청자처럼 보이는 108명의 데이터를 직접 설계해줬습니다. 이름, 활동명, 이메일, 전화번호, 수준, 입금 여부까지 포함해서 — 입금완료 20명, 미입금 6명으로 현실적인 비율도 맞췄습니다. 테스트용으로 만든 데이터인데도 꽤 그럴듯하게 구성되어서, 대시보드가 어떻게 보일지 바로 가늠할 수 있었습니다.

"어디서든 볼 수 있어야 한다" — 웹 대시보드로 전환

다음 단계가 이번 작업에서 가장 핵심이었습니다. 현황 확인을 PC EXE에 묶어두지 않고 웹으로 옮기기로 했습니다.

현재 작업 결과 중 Vercel로 옮겨서 하면 유리한 것은 뭐야?
dashboard는 그렇게 할 필요가 없을까?

AI는 EXE 앱 전체를 Vercel로 옮기는 건 비효율적이고, 운영 현황을 "보는" 부분만 웹으로 분리하면 된다고 정리해줬습니다. 발송이나 설정은 EXE에서 계속 하고, 대시보드만 웹으로 꺼내는 방식이었습니다.

이 판단이 좋았던 건, 전체를 다 바꾸지 않아도 됐기 때문입니다. 기존 구조는 그대로 두고, 필요한 부분만 추가하는 방식이 훨씬 빠르고 안정적이었습니다.

대시보드는 이런 기능들로 구성됐습니다:

• 총 접수 / 입금완료 / 미입금 / 발송완료를 한눈에 보는 요약 카드 4개

• 입금 상태별 필터 (전체 / 입금완료 / 미입금 / 확인발송 대기)

• 이름이나 활동명으로 바로 검색

• 30초마다 자동 새로고침

• 발송 단계별 뱃지 (미발송 / 확인발송완료 / 링크발송완료 / 피드백발송완료 / 완료)

  

  ALT

  중국사이트 스크린샷

배포보다 더 오래 걸린 Airtable 인증 오류

대시보드 UI를 만들고 Vercel에 배포하는 것 자체는 생각보다 빠르게 됐습니다. vercel --prod 한 줄로 프로덕션 주소가 생겼습니다.

문제는 그다음이었습니다. 대시보드를 열었더니 데이터가 뜨지 않고 인증 오류가 계속 났습니다.

⚠ Airtable API 오류 (401): Authentication required

계속 같은 오류가 발생해. 전체 점검해줘

"전체 점검해줘"라고 요청한 게 결정적이었습니다. AI가 환경변수 설정, API 키 형식, 서버리스 함수 내 인증 처리 순서를 하나씩 점검하면서 문제의 원인을 찾아줬습니다.

원인은 Vercel에 환경변수를 등록했지만, 대시보드 UI에서 직접 PAT(개인 액세스 토큰)를 입력하는 설정 흐름이 빠져 있었던 것이었습니다. 이걸 해결하기 위해 대시보드 오른쪽 상단에 설정 버튼을 추가하고, 입력한 PAT와 Base ID를 브라우저 로컬 저장소에 보관하는 방식으로 자동화했습니다. 새로고침해도 설정이 유지되고, 한 번 입력하면 다시 쓰지 않아도 됩니다.

대시보드 설정이 안되어 있어. airtable api 문제 때문이네.
이것을 해결할 방법은 없어??? 자동화 해줘

이 순간이 인상적이었습니다. "자동화해줘"라는 짧은 요청에 AI가 설정 모달, localStorage 저장, 초기 자동 로딩까지 한 번에 구성해줬기 때문입니다. 제가 어떻게 구현하면 좋을지 몰라도, 원하는 결과를 말하면 방법은 AI가 찾아줬습니다.

✅ 결과 (After)

Before vs After

결과물

• Vercel 배포 웹 운영 대시보드 (/dashboard)

• Airtable 데이터 안전 조회용 서버리스 API (/api/records)

• 108명 가상 데이터 자동 삽입 스크립트

• Solapi 기반 SMS 발송 구조 + 운영자 붙여넣기 입력 UI

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. "전체 점검해줘"처럼 범위를 열어두는 요청이 오류 해결에 훨씬 빠릅니다. 특정 부분만 콕 집어서 고쳐달라고 했을 때는 연관된 원인을 놓치기 쉬웠는데, 전체를 다시 보게 하면 AI가 흐름을 따라가면서 찾아줍니다.

2. "자동화해줘"처럼 결과만 말하면, 어떻게 구현할지는 AI가 제안해줍니다. 구현 방법을 몰라도 원하는 상태를 설명하는 것만으로 충분했습니다.

3. 새 기능을 만들기 전에 가짜 데이터로 먼저 검증하는 흐름이 좋았습니다. 실제 신청자가 없어도 108명 데이터를 만들어서 전체 흐름을 한 번 돌려볼 수 있었습니다.

이렇게 하면 안 돼요

1. 오류가 계속 반복될 때 같은 방식으로 계속 시도하면 안 됩니다. 그럴 때는 한 발 물러서서 "전체 점검"을 요청하는 게 더 빠른 해결로 이어졌습니다.

2. 배포 완료 = 작업 완료가 아닙니다. 배포 후에 실제로 작동하는지 데이터 흐름까지 확인해야 진짜 완료입니다. 이번에도 배포는 빨랐지만 인증 오류를 잡는 데 더 많은 시간이 걸렸습니다.

🌍 다른 업무에 적용한다면?

이 경험에서 가장 옮겨가기 쉬운 패턴은 "EXE나 특정 앱에 묶여 있는 현황 확인을 웹으로 꺼내는 것"입니다. 회원 관리, 주문 접수, 이벤트 신청처럼 Airtable이나 Notion에 데이터가 있고, 그걸 특정 장치 없이 어디서든 보고 싶다면 같은 방식을 쓸 수 있습니다. Vercel 서버리스 함수가 민감한 API 키를 안전하게 숨겨주고, 대시보드 UI는 설정 한 번으로 바로 불러오는 구조입니다.

🚀 앞으로의 계획

지금 대시보드는 "보는" 기능에 집중되어 있습니다. 다음 단계는 대시보드에서 직접 입금 확인 안내를 발송하거나, 피드백 요청 메시지를 보내는 "하는" 기능을 붙이는 것입니다. 신청자 목록에서 체크하고 발송까지 한 화면에서 끝낼 수 있으면, EXE를 따로 열 필요가 없어집니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 반복 오류를 빠르게 잡을 때

계속 같은 오류가 발생하고 있어. 특정 부분만 보지 말고 전체 흐름을 다시 점검해줘. 어느 단계에서 막히는 건지 원인부터 찾아줘.

프롬프트 2: 설정이나 입력을 자동화할 때

지금은 [수동으로 하는 작업]을 반복하고 있어. 한 번 설정하면 다음부터는 자동으로 처리될 수 있도록 자동화해줘. 설정값은 [어디에] 저장되면 좋겠어.

프롬프트 3: 기능을 추가하기 전에 검증 환경 만들기

실제 데이터가 아직 없어서 테스트가 어려워. 현실적인 가상 데이터 [N]개를 만들어서 [어디]에 넣어줘. 입금 완료/미완료 비율도 현실적으로 구성해줘.