평택 관외 진로체험 홈페이지
완료운영비 0 제약 안에서 학부모용 사이트와 운영자 백오피스를 짓고, 개발자 없이 굴러가게 만들어 넘긴 프로젝트
- 기간
- 2026.05 — 2026.08
- 인원
- 1명
- 역할
- 단독 — 기획·개발·인프라·운영 문서
화면 둘러보기
전체 프로그램 — 학년군별 회차 일정과 직업군
기술 스택
- Next.js
- TypeScript
- Supabase
- Vercel
- sharp
- zod
주요 업무
- 충돌하는 요건 정리 — 학부모의 회차별 명단 조회(DB 필요) · 비개발자 운영자의 셀프 등록 · 운영비 0 · 배포 데드라인
- 개인정보 최소 수집 — 시스템에는 마스킹된 성명·연락처 뒷 4자리·학교 3개 컬럼만 올라가도록 입력 규격을 고정
- 키를 1종으로 축소 — 서버 전용 키만 사용하고 빌드 시점에 클라이언트 번들 포함을 차단, 조회 경로도 전부 서버에서 처리
- 인증을 만들지 않음 — 운영자 1~2명 환경에 관리자 테이블은 과잉이라 판단하고 서명 쿠키 기반 최소 구성으로 대체
- 이미지 사전 생성 — 상세 첫 진입의 이미지 최적화 cold MISS를 피하려 png/webp/thumb 3종을 빌드 시 직접 생성
- 무료 플랜의 무활동 정지 대응 — 새 테이블·새 키·외부 시스템 추가 없이 기존 경로로 주기 헬스체크 1회
- 운영 문서 6편 1,343줄 — 명단 등록 가이드(엑셀 마스킹 수식 포함), 배포 소유권, 인수인계, 컴플라이언스 근거 문서
주요 성과
- 데드라인 하루 전 초기 배포, 이후 3개월 운영 — 운영비 ₩0 (호스팅·DB 모두 무료 플랜 내)
- 상세 페이지 첫 진입 이미지 체감 1초+ → CDN 히트로 사실상 즉시
- 의존성 6개 · 운영 키 1종 · 외부 시스템 0 — 인수인계 시 운영자와 후임이 알아야 할 표면을 최소화
- 코드 3,664줄 대비 운영 문서 1,343줄(37%) — 산출물의 3분의 1을 '개발자 없이 돌아가게 하는 것'에 배분
- 감사·질의가 오기 전에 근거 문서를 먼저 작성 — 사용량 실측, 키 관리 내역, 개인정보보호법 근거, 기존 도구와의 동등 비교
- 공개 전환 전 재식별 경로를 먼저 차단 — 문서·코드에 예시로 쓴 명단이 실제 참가자 데이터임을 운영 DB와 대조해 확인. 공개되면 서비스 페이지의 마스킹을 역으로 풀 수 있어 전부 가상 데이터로 교체하고, 히스토리 시크릿 스캔까지 마친 뒤 열었습니다
- 제약이 사라진 뒤 우회 구조를 스스로 제거 — 레포 공개 전환으로 초기 배포 우회 파이프라인(266줄)을 걷어내고 개인 계정에 묶인 자산 0으로 정리 후 인수인계
성장 경험
작년까지 Wix로 운영하던 페이지를 자체 제작으로 옮기는 일이었는데, 조건이 '서버를 새로 띄우지도, 운영비를 늘리지도 말 것'이었습니다. 그런데 Vercel 무료 플랜은 조직 private 레포를 받지 못했습니다. 그래서 main에 push하면 개인 계정 미러 레포로 단방향 동기화되도록 GitHub Actions를 두고, Vercel은 그 미러를 바라보게 했습니다 — 개발자는 원래 레포에 push만 하면 되도록. Supabase 무료 플랜도 7일간 활동이 없으면 프로젝트가 멈춰서, 비수기에 학부모가 들어왔다가 에러를 보는 일이 없도록 매일 자정 read 한 번 도는 크론을 붙였습니다. 계측은 일부러 넣지 않았습니다. 검색으로 유입되는 페이지가 아니라 신청자와 참가자만 보는 페이지고, 회차당 선정자 40명에 대기자 몇 명이면 접근 규모가 다 설명된다고 봤습니다 — 다만 그래서 지금 몇 명이 왔냐고 물으면 실측이 아니라 추정으로 답하게 됩니다. 레포를 private으로 둔 건 원래 개인정보 때문이었습니다 — DB 없이 선정자·대기자 명단을 직접 올리는 구조였다면 참가자 정보가 레포에 남았을 테니까요. 명단이 전부 DB로 빠져 레포에 개인정보가 남지 않게 되고, 담당자가 바뀌어도 개인 계정에 묶인 자산은 없어야 해서, 공개로 전환하면서 미러 우회를 통째로 걷어냈습니다. 제약을 피해 가는 것과 제약 자체를 없애는 건 다른 일이라는 걸 이때 배웠습니다.