클로드 코드로 공간 대관 관리 자동화 대시보드를 만든 순서

해운대 해리단길에서 작은 공유오피스를 운영하고 있어요. 격주로 클로드 코드 원데이클래스를 여는 공간이라 나머지 시간은 비어 있습니다. 그 빈 시간에 공간 대관을 받아 보려고 관리용 대시보드를 하나 만들었습니다.

이번 글에는 제가 실제로 밟은 순서를 그대로 적었습니다. 두 가지 방법 중에 왜 그걸 골랐는지, 어디서 한 번 막혔는지까지요.

만드는 과정을 영상으로도 올려 뒀습니다.

준비물은 네 가지입니다!

1. 클로드 코드 구독
2. 디자인 소스(로고 등)
3. 만들 대시보드 주제
4. 클로드 코드 데스크탑 앱

구독은 프로 요금제면 부족하실 수 있어요. 제대로 써보실 생각이면 최소 맥스 100달러 요금제를 권합니다.

디자인 소스는 회사 로고입니다. 홈페이지가 회사 서비스를 잘 보여주고 있다면 홈페이지 주소도 좋고요. 우리 회사의 컬러와 스타일이 담겨 있으면 되니까 문서여도 상관없습니다.

앱은 윈도우와 맥 둘 다 있습니다. 터미널이나 VS Code, ORCA 등 터미널 환경에서 하시는 분들이 많은데요, 저는 이번에 앱에서만 진행했어요. 웬만한 구현은 앱 안에서 다 됩니다.

앱을 열고 왼쪽 상단에서 코드를 고른 다음 로컬을 선택하면 만들어지는 코드가 제 컴퓨터에 저장됩니다. 이때 작업 폴더를 지정해야 하는데요, 저는 litup-board라는 폴더를 새로 만들었어요. 경로를 신뢰하겠냐는 팝업이 뜨면 신뢰를 누르고, 클로드 코드가 처음이면 Git을 설치하라는 안내가 나오니 그대로 따라 하시면 됩니다.

대시보드 제작을 위한 6단계

1. 영업 흐름을 먼저 정리
2. 기획서(PRD) 제작
3. 디자인을 정하기
4. 나온 시안을 확인하고 수정
5. 클로드 코드로 제작
6. 문의 폼과 데이터를 연결

우선 문의가 들어와서 이용이 끝날 때까지 어떤 순서로 흘러가는지를 종이 한 장에 적어 보길 추천드립니다. 저는 문의 접수, 확인, 견적이나 명세서 요청 대응, 세금계산서, 완료로 잡았습니다.

여기에 우리 업종만의 상황이나 제약이 하나씩 붙습니다. 저는 공간을 운영하니까 자체 문의 말고도 네이버 예약이나 스페이스클라우드 같은 외부 플랫폼으로 신청이 들어옵니다. 이런 건 처음부터 같이 적어 둬야 나중에 큰 수정을 피할 수 있습니다.

막연할 때는 클로드에게 인터뷰를 요청하세요!

기획서부터 바로 쓰려고 하면 저도 힘듭니다. 뭘 만들지가 머릿속에서 아직 추상적이고, 실제로 뭘 고려해야 하는지는 만들기 전에는 잘 모르거든요.

이때 자주 쓰는 방법이 인터뷰 요청입니다. 제가 요구사항을 적는 게 아니라, 클로드가 저에게 질문을 하나씩 던지게 만듭니다. 맥락을 먼저 쭉 전달하고, 이 기준으로 PRD를 만들기 위한 인터뷰를 시작하자고 합니다. 저는 해운대에서 공유오피스를 운영하고 대관 신청을 받을 것이며 주 사용자는 나 하나이고 배포 계획은 없다는 정도를 적어 줬어요.

이 단계에서는 모델을 오퍼스나 페이블로 올리시는 걸 권합니다. 노력(effort) 설정도 평소에는 보통이나 높음을 쓰는데, 기획 단계에서는 엑스트라까지 올릴 때가 있어요.

클로드가 던진 질문은 이런 것들이었습니다. 신청을 어디로 받는지, 대관 단위가 시간인지 일인지, 데이터 원본을 어디에 둘 것인지, 요금 차등 기준이 뭔지, 대시보드를 열자마자 확인하고 싶은 게 뭔지, 취소와 노쇼는 관리할 것인지, 서류를 PDF로 뽑아야 하는지 발행 여부만 체크하면 되는지.

답을 하다 보니 제가 고려하지 않았던 게 세 개 나왔습니다. 노쇼 관리, 확정 안 된 건을 며칠까지 잡아 두는 규칙, 그리고 자동 수집 주기요. 이건 저 혼자 기획서를 썼으면 그냥 빠진 채로 만들어졌을 항목입니다.

반대로 답하다가 제가 즉석에서 추가한 것도 있어요. 새 문의 날짜에 이미 잡힌 건이 있으면 경고를 띄우고, 고객에게 안내할 대체 날짜 멘트까지 자동으로 만들어 달라고 했습니다. 안내 문구를 그대로 복사해서 카톡으로 보내면 되니까요.

클로드가 먼저 알려준 제약도 있었습니다. 네이버 예약이나 스페이스클라우드는 공개 API가 없고 사업자 로그인 세션이 필요해서, 로그인 방식이나 화면이 바뀌면 자동 수집이 깨진다고요. 여기에 맞춰 마지막 수집 시각을 화면에 항상 띄우기로 했습니다. 수집이 멈춘 걸 모르고 오래된 데이터를 보는 게 제일 위험하겠죠!

1차와 2차를 나눠 두면 검수가 편합니다

인터뷰가 끝나면 지금 만들 것과 나중에 만들 것을 자연스럽게 구분할 수 있습니다. 저는 세금계산서와 현금영수증 발행, 문자 자동 발송을 2차로 미뤘어요.

처음부터 다 붙이면 사람이 확인해 줘야 하는 게 너무 많아집니다. 체크할 게 많으면 놓치는 것도 분명히 생기더라고요. 1차로 핵심만 만들고 2차, 3차로 나눠서 얹는 편입니다.

문의 폼을 먼저 만들어야 데이터 구조가 정해집니다

디자인보다 폼이 먼저였습니다. 대시보드가 읽을 데이터의 컬럼 구조가 폼에서 나오기 때문이에요.

저는 탈리(Tally)를 씁니다. 만들기 쉽고, 구글시트나 노션 같은 데이터 도구와 연동이 정말 간단하고, 새 응답이 왔을 때 슬랙이나 메일 알림도 쉽게 붙일 수 있어서요.

New Form에서 Create with AI를 고르면 탈리 안에 있는 AI가 설문지를 바로 만들어 줍니다. 처음 나온 질문지는 항목이 너무 많았어요. 이 정도면 고객이 부담스러워하고, 저는 문의만 받고 싶었거든요. 더 간단한 형태로 다시 구성해 달라고, 지금은 문의 단계임을 고려해 달라고 요청했습니다.

Publish를 누르면 고객이 바로 신청할 수 있고, Integrations에서 구글시트를 선택하면 시트가 자동으로 생성됩니다. 저는 여기에 테스트 문의를 한 건 직접 넣었어요. 9월 1일 오후 1시부터 6시, 6명, 커뮤니티 모임으로요. 시트에 값이 들어온 걸 확인하고 그 컬럼 구조를 클로드에게 넘겼습니다.

개발 전 디자인 시안 잡기

바로 개발로 넘어가도 화면은 나옵니다. 대신 매일 볼 화면이니까 우리 회사 컬러와 스타일이 들어가 있는 편이 낫습니다.

레퍼런스는 핀터레스트에서 골랐어요. 영어로 dashboard design을 검색하면 웹 디자인부터 포스터, 인테리어까지 나옵니다. 로고가 블루 계열이라 블루와 어울리면서 지표와 현황을 빠르게 볼 수 있는 형태로 좁혔습니다.

클로드 디자인에는 세 가지를 같이 넣었습니다. 릿업오피스 로고, 방금 만든 PRD 문서, 그리고 벤치마킹할 이미지요. 프롬프트는 길게 쓸 필요가 없었어요. 대관 운영을 위한 대시보드 디자인을 할 것이고 첨부한 게 각각 무엇인지 말한 다음, 이걸 토대로 홈 화면을 만들어 달라고 했습니다. 디테일한 맥락은 이미 PRD에 다 들어 있으니까요.

PRD를 쓰는 게 기획자 역할이었다면, 그걸 정리해서 클로드 디자인에 넘기는 건 디자이너에게 토스하는 일입니다. 시니어 디자이너의 결과물과 퀄리티 차이는 당연히 있지만, 작은 조직에서 내부용으로 쓰는 정도면 이 정도로 충분합니다.

나온 홈 화면에는 오늘 확인할 것, 확정 건, 확정 매출, 조치 필요가 들어가 있었어요. 답변이 지연됐다, 새 문의가 왔다, 입금이 아직 안 됐다 같은 항목이 딱 제가 필요했던 것들이었습니다.

여기서 페이지를 하나 더 요청했습니다. 신청 목록 페이지 시안을 만들고, 확인 필요에 들어갈 내용을 모두 보고 수정할 수 있게 해 달라고요.

한 번은 저도 답이 없어서 그냥 물어봤습니다. 예약 채널이 어디서 왔는지가 잘 안 보이는데 채널별로 구분이 더 잘 가도록 개선해 달라고요. 어떻게 고칠지 아이디어가 없어도 됩니다. 디자인 시스템 안에서 전체와 일관성을 유지하는 방향으로 개선안이 나와요. 결과는 유입 채널 필터를 따로 뽑아 주는 것이었습니다.

모델은 오퍼스를 주로 씁니다. 디자인을 중요하게 보는 편이라 소넷보다 오퍼스를 고르고, 페이블은 토큰을 많이 써서 디자인을 먼저 뽑은 다음 클로드 코드로 넘기는 방식을 선호해요.

클로드 코드에게 시안을 넘길 때 주의사항

클로드 디자인에는 Send에서 copy prompt를 눌러 클로드 코드로 바로 넘기는 경로가 있습니다. 터미널 클로드 코드에서는 되는데, 제가 쓰던 데스크탑 앱 버전에서는 에러가 났어요.

데스크탑 버전에서는 Share를 눌러 전체 파일을 zip으로 다운로드받고, 그 파일을 클로드 코드에 그대로 전달하게요. 클로드 디자인에서 만든 HTML 코드가 담긴 파일이니 압축을 풀어서 대시보드 화면과 신청 목록 페이지, 나머지 필요한 구성까지 구현해 달라고요.

구글시트와 붙이는 방법은 두 가지입니다

시트를 데이터 원본으로 쓰기로 했으면 대시보드가 그 시트를 읽고 쓸 통로가 필요합니다. 앱스 스크립트로 웹앱을 배포하거나, 서비스 계정을 만들어 연결하면 됩니다.

서비스 계정이 정석입니다. 다만 콘솔에서 뭔가를 계속 만들어야 해서 처음 하시면 여기서 시간이 많이 갑니다. 저는 이번에 빠르게 보여드리려고 앱스 스크립트로 갔어요.

순서는 다음과 같습니다. 구글시트에서 확장 프로그램, 앱스 스크립트를 열고, 클로드 코드에게 이 시트를 읽고 쓰는 코드를 요청합니다. 나온 코드를 기존 내용 전부 지우고 붙여 넣은 다음 저장하고 실행하면 권한 검토 창이 뜨는데요, 필요한 권한을 승인하시면 됩니다. 그다음 배포에서 새 배포, 웹앱을 고르고 액세스 권한을 모든 사용자로 설정한 뒤 나온 웹앱 URL을 복사해서 클로드 코드에 전달합니다.

여기서 코드를 짜는 건 클로드가 다 합니다. 제가 한 건 붙여 넣고 배포 버튼을 누르고 주소를 옮긴 것뿐이에요.

자주 마주치는 시행착오: 설정한 이름이 다를 때!

연결했는데 데이터가 반영이 되지 않습니다. 자주 있는 경우인데요, 클로드 코드가 코드에 적어 둔 시트 이름과 실제 연결된 구글시트의 시트 이름이 서로 달랐어요.

이건 클로드가 직접 확인해서 코드를 고쳤습니다. 다만 앱스 스크립트 쪽은 제가 손을 대야 했어요. 앞서 붙여 넣은 코드를 지우고 새로 받은 코드로 바꾼 다음, 배포 관리에서 새 버전으로 다시 배포해야 반영됩니다. 코드가 바뀌면 재배포가 필요합니다.

연동이 끝나니 시트도 늘어나 있었습니다. 원래는 탈리 응답 시트 하나였는데 예약 시트, 요금 설정, 수집 로그가 생겼어요.

확인은 대시보드에서 상태를 확인 중으로 바꿔 봤습니다. 구글시트 예약 시트에도 바로 반영이 되는 걸 확인할 수 있습니다. 대시보드가 읽기만 되는 게 아니라 양방향으로 수정도 가능하다는 뜻입니다.

핵심 기능 구현 후에 기능을 하나씩 추가하세요!

화면이 돌아가기 시작하면 그때부터 필요한 게 보입니다. 저는 견적서와 거래명세서부터 붙였어요.

요청은 평소 말하듯 했습니다. 고객에 따라 견적서를, 완료 후에 거래명세서를 요청하는 경우가 있으니, 고객이 이용한 내용을 바탕으로 자동 생성하되 내용은 내가 직접 수정할 수 있게 해 달라고요.

클로드가 부가세는 어떻게 반영할 지 알아서 물어봐줬고 부가세 포함으로 하겠다고 답했어요.

결과는 홈 화면에 문서 탭이 새로 생기고, 항목을 고르면 견적서가 바로 나오는 형태였습니다. 사업자 정보가 비어 있어서 채워 달라고 나왔고, 양식을 따로 주지 않아서 일반적인 견적서 형태로 뽑혔어요. 솔직히 어색한 부분이 있고 필요 없는 빈칸도 남아 있습니다. 첫 초안치고는 나쁘지 않은 정도이고, 여기서부터는 양식을 다시 주면서 다듬는 일이 남습니다.

캘린더도 아직 부족한 부분이 보였습니다. 날짜별로 예약을 보는 건 되는데 다음 달로 넘기거나 미리 보는 기능이 없더라고요. 이런 건 목록으로 적어 두고 다음에 요청합니다.

권한 설정도 이때 한 번 정리하시면 좋습니다. 저는 시연이라 자동 모드로 계속 갔는데요, 수동으로 두면 중요한 파일을 읽거나 고칠 때마다 승인을 받고, 편집 자동 수락은 편집만 자동으로 통과시킵니다. 실행 전에 계획부터 다 세우고 싶으실 때는 계획 모드를 쓰시면 됩니다.

배포와 저장 방식

바이브 코딩을 할 때 제일 많이 받는 질문이 배포입니다. 기준은 누가 접속하느냐예요.

저 혼자 제 컴퓨터에서 보면 외부에 배포할 필요가 없습니다. 팀원이나 같이 일하는 프리랜서분들과 공유해야 하면 그때 배포하고, 로그인을 붙일지 이메일 계정을 부여할지 단순하게 비밀번호로 갈지를 정하게 됩니다. 보안 고민은 공유를 결정한 다음에 시작해도 늦지 않아요.

데이터 저장 위치도 마찬가지입니다. 이번에는 구글시트를 원본으로 썼고, 제 네버슬립 대시보드는 노션 데이터베이스와 연동해 뒀습니다. 그냥 폴더 안에 마크다운 문서로 쌓아도 되고, Supabase처럼 실시간 연동이 쉬운 도구를 쓰셔도 됩니다.

우리가 관리하기 편하고 보안에서 걸리는 게 없는 쪽이면 됩니다. 가볍게 나만 쓸 것인지, 팀이 회사 일로 계속 쓸 것인지에 따라 답이 달라집니다.

네버슬립 대시보드 사례

제 네버슬립 대시보드도 같은 방식으로 만들었습니다. 문의함으로 들어오면 제안서, 메일, 견적서, 거래명세서, 세금계산서까지 그 안에서 처리하고, 세금계산서는 볼타 API를 붙여서 발행합니다.

만드는 순서는 이번과 같았습니다. 영업 흐름을 적고, 인터뷰로 기획서를 만들고, 디자인을 정하고, 폼과 데이터를 연결하고, 기능을 하나씩 얹었어요. 제가 실제로 쓰고 있는 대시보드는 아래 영상에서 확인하실 수 있어요!

체감으로는 일하는 효율이 5배쯤 달라졌습니다.

처음 시작하신다면 전부 만들려고 하지 마세요. 제일 자주 반복되고 제일 귀찮은 서류 하나부터 고르시면 됩니다.