[Claude Code] 비개발자가 Supabase 붙여보고 진짜 원하는 자동화 결과를 알게 됨

📝 한줄 요약

코드를 모르는 상태로 Claude Code에게 대시보드를 리디자인시키고 실제 데이터베이스(Supabase)까지 연결하고, LLM WIKI로 정리까지 해봤다. 결과물보다 더 값진 건, 이 과정에서 "다음 버전은 이렇게 만들어야겠다"는 방향이 뚜렷해졌다는 것.

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

• Claude Code로 신청관리 대시보드를 리디자인하고, 실제 Supabase DB까지 연결(읽기 전용)

• 시도해보는 과정에서 여러가지를 고민하다보니 당장 Supabase를 사용하기 보다 GWS+슬랙 조합이 우리 팀에 더 맞겠다는 걸 알게 됨

• 스터디장님이 만들어 주신 프롬프트 템플릿을 그대로 붙였다가 프로젝트 히스토리가 꼬였는데, git remote 확인 한 번으로 바로 정체를 찾아낸 게 제일 인상적이었음

• 배운 것: 방향만 명확하면 AI와 거의 모든 걸 시도해볼 수 있다는 것

🎯 이런 분들께 도움돼요

• 엑셀 다운로드 + 피벗 돌리기 같은 반복 업무를 매번 하고 있는 비개발자 실무자

• "AI 코딩 도구로 진짜 뭘 만들 수 있나?" 궁금한, 개발 경험 전혀 없는 사람

• 데이터베이스 연동을 한 번도 안 해봤지만 시도해보고 싶은 사람

😫 문제 상황 (Before)

전문코치 프로그램 신청관리는 홈페이지에서 이루어지는데, 홈페이지 관리자 페이지 개발이 잘못되어서 담당자들이 데이터를 추출하고 관리하는데 매우 불편한 상황이었다. 엑셀 추출 → GWS 통합 스프레드시트에 붙여넣기 → 거기서 피벗 또는 숫자 입력으로 진행하는 프로세스였다.

내년 초 다시 개발하기로 최종 결정되었지만, 그전까지는 지금의 불편한 페이지를 계속 써야 하는 상황. 사실 스터디 1주차에도 대시보드를 한 번 만들어봤는데, 그때는 충분히 생각을 못하고 임의로 진행했었다. 이 문제를 제대로 해결해보고 싶어서, 내가 원하는 형태로 대시보드를 다시 그려보기로 했다.

🛠️ 사용한 도구

• 도구: Claude Code

• 모델: Claude Sonnet 5

• 연동: Supabase (데이터베이스), GitHub + Vercel (배포)

🔧 작업 과정

화면부터 다시 그려보기

기존에 만들어뒀던 더미 매출 대시보드가 있었는데, 실제 업무랑 안 맞았다. 그래서 실제 신청관리 흐름에 맞춰서 요구사항을 쭉 풀어서 던졌다.

어제 작업하던 비즈니스 대시보드를 좀더 수정하고 싶어. 구조를 한번 점검하고 나서 대시보드를 수정할거야. 회사 홈페이지를 보면 전문코치 프로그램을 교육생이 신청함. 신청 데이터는 지금처럼 주문번호, 결제 날짜, 과정명, 교육날짜. 금액, 상태(신규, 대기, 재참가, 보강), 결제(접수, 입금, 취소)가 보이게 해줘. 기간을 설정하면, 과정별로 입과자 수가 보이게. ... 제일 상단에는 1년 목표대비 얼마를 하고 있는지, 이번달 목표대비 얼마를 하고 있는지 보이도록.

바로 코드부터 짜지 않고 "기획설계를 먼저 정리해달라"고 요청했다. 기획안을 먼저 받아보고, 결제 시스템 실연동이나 문자발송 같은 어려운 부분은 나중으로 미루고 "우선 화면 디자인부터"로 범위를 좁혔다.

시간이 좀 지나서 다시 작업을 이어가려는데, 뭔가 꼬였다. 스터디장님이 비개발자를 위해 꼼꼼하게 프롬프트를 주셔서 이번에도 Supabase 연동 프롬프트 템플릿을 그대로 복사해서 붙였는데, 그 안에 "이 폴더는 지난주에 만든 my-dashboard 프로젝트다"라고 적혀 있었던 데서 꼬였던 거였다. 다시 수정하기 위해서 이름을 바꿨기 때문(dummy-sales-dashboard)이었다.

클로드가 먼저 확인을 했고, git remote -v 한 줄로 바로 답을 찾아줬다. 폴더 이름은 다르지만, 이 로컬 폴더의 Git 저장소가 실제로는 그 my-dashboard GitHub 저장소를 그대로 가리키고 있었던 것. 즉 둘은 다른 프로젝트가 아니라 애초에 같은 프로젝트였는데, 폴더 경로만 중간에 한 번 바뀌었던 거였다. 이 부분이 개인적으로 가장 인상 깊었다 — 나는 뭐가 뭔지 전혀 몰랐는데, 명령어 한 줄로 순식간에 정리가 됐다.

실제 데이터베이스를 붙여보자

여기까지 화면은 다 더미 데이터였다. 이번엔 실제로 Supabase라는 데이터베이스를 연결해보기로 했다. Supabase도 프로젝트를 열긴 했는데, 다시 하다보니 이게 맞는지 확인이 필요했다. 그랬더니 curl로 그 주소에 직접 요청을 보내서 401 응답(인증 필요)을 확인해줬다. "401이 떴다는 건 이 프로젝트가 실제로 살아있다는 뜻"이라고 설명을 해주었다. 이후 anon key(요즘은 "publishable key"라고 부른다는 것도 이때 처음 알았다)를 붙여넣었고, 강의/수강 데이터를 읽기 전용으로 Supabase 테이블에 옮기는 작업, 그리고 방명록처럼 직접 글을 남길 수 있는 기능까지 하나씩 만들어갔다.

SQL을 실행해야 하는데, 이것도 기존에 해놓았던 것과 스터디장님이 주신 내용이 살짝 달라서 에러가 났지만, 클로드로 확인하고 만들어준 파일을 붙여서 간단히 풀렸다.

솔직히 말하면 아직도 Git, Vercel, Supabase 이 세 화면을 오가는 게 헷갈린다. 어디서 뭘 확인해야 하는지 완전히 손에 익지는 않았다. 그래도 막힐 때마다 화면에 뜬 에러 메시지를 그대로 보여주면, 원인을 찾아서 고쳐주고 "무엇 때문이었는지"를 쉬운 말로 설명해줬다.

✅ 결과 (After)

Before vs After

결과물

과정별 KPI 헤더, 기간 필터, 신청 데이터 원장까지 갖춘 대시보드가 실제 데이터베이스와 연결된 상태로 완성됐다. 부가로 방명록 기능도 붙여서, "글을 쓰면 저장되고 목록에 뜬다"는 읽기+쓰기 흐름까지 한 번에 경험해볼 수 있었다.

이번 작업으로 완성한 것보다 더 중요한 수확은 따로 있다. 실제로 팀에 적용할 때는 Supabase 같은 별도 데이터베이스까지 갈 필요 없이, 이미 쓰고 있는 GWS와 슬랙을 연동해서 내부에서만 보이는 형태로 가는 게 더 맞겠다는 걸 이번 시도를 통해 알게 됐다. 실패한 게 아니라, 다음 모델을 구체화한 것이다.

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

효과적이었던 것

1. 확신이 안 서는 것도 그대로 확인하기 — "이거 맞는지 모르겠다"고 하면 AI가 직접 확인(예: curl로 주소가 살아있는지 검증)해준다

2. 막히면 에러 메시지를 그대로 보여주기 — 해석하려 애쓰지 않아도 원인을 찾아준다

3. 방향만 명확하면 AI와 거의 모든 것을 시도해볼 수 있다 — 코드를 몰라도 "이런 화면, 이런 데이터 흐름을 원한다"는 게 분명하면 그 다음은 AI가 채워준다

이렇게 하면 안 돼요

1. 다른 사람에게 받은 프롬프트 템플릿을 검토 없이 그대로 붙이지 말 것 — 지금 내 상황과 안 맞으면 프로젝트가 꼬일 수 있다 (내가 겪은 것처럼)

2. Git/배포 플랫폼/데이터베이스처럼 여러 화면을 오가는 작업은 처음부터 완전히 이해하려 하지 않아도 된다 — 헷갈리는 채로 진행해도 AI가 확인해가며 짚어준다

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

엑셀을 다운로드받아서 다른 툴로 옮기고, 거기서 다시 가공(피벗, 집계)하는 반복 업무가 있다면 비슷한 방식으로 시도해볼 수 있다. 꼭 데이터베이스까지 연결하지 않아도, "지금 하는 수작업을 그대로 설명"하는 것부터 시작하면 AI가 그에 맞는 구조를 먼저 제안해준다.

🚀 앞으로의 계획

회사 규모상 내부 데이터이기도 하고, 개발자가 없는 구조이다보니 당장 Supabase 같은 별도 데이터베이스 없이, 이미 팀에서 쓰고 있는 GWS와 슬랙을 연동해서 내부 인원만 볼 수 있는 형태로 다시 만들어볼 계획이다.

📋 재사용 가능한 프롬프트

프롬프트 : 반복 업무를 대시보드 요구사항으로 풀어서 전달하기

[지금 어떤 화면/시스템]에서 [무슨 데이터]를 신청·관리하고 있어. 데이터는 [항목1, 항목2, ...]가 보이면 좋겠고, [기간/조건]을 설정하면 [보고 싶은 집계]가 보이게 해줘. 제일 상단에는 [가장 먼저 확인하고 싶은 핵심 지표]가 보이도록. 여기까지가 1차, [나중에 하고 싶은 것]은 2차로 나중에 진행하고 싶어. [대괄호] 부분은 본인 상황에 맞게 바꿔서 쓰세요.