분양상담사 디지털 명함

상담사·직원 한 명당 페이지 한 장. 링크를 받은 사람이 3초 안에 얼굴·이름·연락 수단을 보고 바로 전화나 카카오톡을 누를 수 있게 만든 것이다.

주소: https://bunyang-card.vercel.app/{슬러그}

직원 추가하는 법

관리자 페이지(admin.html) → 명함 관리 탭 → + 새 명함.

저장하면 끝이다. 커밋도 배포도 필요 없고 링크는 1분 안에 살아난다.

처음에는 한 사람당 HTML 파일 하나였다. 추가하려면 파일을 복사하고 고치고 커밋하고 배포해야 해서 1명당 10분이 걸렸고 개발자를 거쳐야 했다. 현장 9곳에 직원 여러 명을 만들려면 그 구조로는 안 된다.

구조

/{슬러그}  →  vercel.json 재작성  →  api/card.js
                                        ↓ get_agent_card(슬러그)
                                     Supabase agent_cards
                                        ↓
                                   api/_template.js 가 HTML 생성
                                        ↓
                            /card.css (모양) + /card.js (동작)

파일	역할
api/card.js	슬러그를 받아 카드 한 장을 읽고 내려준다
api/_template.js	그 카드로 HTML을 만든다. 사람마다 다른 og 태그가 여기서 박힌다
card.css	보이는 모양
card.js	눌러야 일어나는 일 (연락처 저장·상담 접수·토스트·열람 집계)
vercel.json	/ → /simjunhyung, /{슬러그} → api/card

스키마는 홈페이지/supabase/agent-cards.sql 에 있다.

왜 서버에서 그리는가

명함은 대부분 카카오톡으로 전달된다. 그런데 카톡 스크래퍼는 JS를 실행하지 않는다. 브라우저에서 내용을 채우면 모든 사람의 미리보기가 똑같이 나온다 — 이름도 사진도 안 뜬다. 명함 상품에서 이건 치명적이다.

그래서 완성된 HTML을 내려보낸다. 사람마다 다른 og:title·og:image가 박히고, 그러면서도 직원 추가에 배포가 필요 없다.

보안

• agent_cards 에는 익명 정책이 없다. anon 키는 모든 사이트 소스에 공개돼 있어서, SELECT를 열면 REST 한 번으로 전 직원 연락처를 긁어갈 수 있다.
• 공개 열람은 get_agent_card() 하나로만 나간다. SECURITY DEFINER 라 슬러그를 아는 사람에게 published = true 인 카드 한 장만 주고, 목록을 받아갈 방법이 없다.
• 서버리스 함수도 service_role 키를 쓰지 않는다. 그 키는 RLS를 전부 우회하므로 명함 하나 그리자고 환경변수에 둘 물건이 아니다.

사진

관리자 페이지에서 올리면 Supabase Storage 공개 버킷 agent-photos 로 간다. 읽기는 공개, 올리고 지우는 것은 관리자만. 사진 때문에 커밋할 일이 없다. 파일명에 시각을 붙여, 사진을 바꿔도 캐시된 옛 사진이 남지 않는다.

열람 집계

현장 사이트의 adguard.js 를 일부러 안 쓴다. 그 스크립트는 접속이 몰리면 document.body 를 비우고 차단 화면을 띄운다. 현장 랜딩에선 맞는 동작이지만 명함에선 사고다 — 단톡방에 뿌리면 같은 공용 IP로 여러 명이 들어오는데, 그때 진짜 고객이 빈 화면을 본다.

대신 check_site_visit 을 부르되 응답을 읽지 않는다. 기록만 남고, 관리자 "방문자 통계" 탭에 명함-{슬러그} 로 자동으로 나온다.

상담 접수

기존 consultations 테이블에 넣는다. source 는 명함-{슬러그}, assignee 는 그 직원 이름이라 관리자 표에서 누구 상담인지 바로 보인다.

캐시

CDN이 60초 물고 있는다. stale-while-revalidate 는 일부러 안 붙였다 — 붙이면 공개를 끈 명함이 몇 분 더 살아 있는데, 직원이 그만둬서 내리는 경우에 그게 곤란하다. 속도를 조금 잃더라도 1분 안에 확실히 내려간다.

비워두면 알아서 감춰지는 항목

가짜로 채우지 않는다. 비어 있으면 화면에서 사라지거나 버튼이 비활성으로 나온다.

항목	비었을 때
개인 휴대폰	대표번호로 전화·문자가 걸린다
카카오 오픈채팅 링크	카카오톡 버튼이 비활성
프로필 사진	이름 첫 글자가 대신 나오고, og:image 를 빼서 카톡에 깨진 이미지가 안 뜬다
경력·이력	"경력 · 이력" 섹션이 통째로 숨는다