jayeon@portfolio — jsh — 92×34
jayeon@portfolio~/projects%cat projects/ongdalsam-speech.md
⏺ AI 협업(바이브코딩) — 기획부터 배포·도메인 연결까지 단독 수행
문제: 소상공인(1인 스피치 교습소) 클라이언트 프로젝트로, 약 1주 내 기획→퍼블리싱→배포까지 전 과정을 빠르게 완료해야 함.
설계: AI(바이브코딩) 협업으로 기획·퍼블리싱·배포·도메인/DNS 연결·클라이언트 커뮤니케이션 전 과정을 단독 진행. 22건 커밋으로 반복 개선하며 완성도 제고.
효과: 별도 팀 구성 없이도 기획부터 운영까지 전 주기를 혼자 완결. 배포 이후에도 클라이언트 피드백을 반영해 유지보수 지속.
⏺ 오버엔지니어링 지양 — 백엔드 서버 없이 FormSubmit으로 문의 폼 처리
문제: 정적 랜딩 페이지 + 문의 폼 접수라는 단순한 요구사항 대비, 자체 백엔드 서버·DB·SMTP 인프라 구축은 요구사항 대비 과잉. 소상공인 고객에게 지속적인 서버 운영·유지보수 비용 부담을 지우지 않는 것이 우선.
설계: 백엔드 서버 없이 FormSubmit(서드파티 이메일 릴레이)으로 문의 폼을 fetch AJAX 처리(_template: table, 허니팟 필드로 스팸 방지). 정적 SPA + Vercel 배포만으로 폼 제출→이메일 수신 구현.
효과: 인프라 비용·유지보수 부담 없이 문의 폼 기능 확보. 요구사항 규모에 맞는 최소 구조로 오버엔지니어링 회피.
```mermaid
graph LR
  A[사용자 브라우저] -->|정적 SPA 요청| B[Vercel 호스팅]
  C[GitHub 저장소] -->|main 브랜치 push| B
  D[Cloudflare DNS] -->|A/CNAME 레코드| B
  A -->|문의 폼 제출 AJAX POST| E[FormSubmit.co]
  E -->|이메일 릴레이| F[강사 수신 이메일함]
```
정적 SPA + FormSubmit 릴레이 + Vercel/Cloudflare 배포 아키텍처
```mermaid
sequenceDiagram
  participant 사용자
  participant 문의폼모달
  participant FormSubmit
  participant 수신이메일

  사용자->>문의폼모달: 이름/연락처/문의내용 입력 + 개인정보 동의
  문의폼모달->>문의폼모달: 허니팟(_honey) 필드 검사
  alt 허니팟 값 존재 (봇 의심)
    문의폼모달-->>사용자: 제출 무시 (스팸 차단)
  else 정상 제출
    문의폼모달->>FormSubmit: fetch POST FormSubmit AJAX 엔드포인트 (JSON, _captcha:false)
    FormSubmit-->>문의폼모달: 응답 반환 (페이지 새로고침 없음)
    문의폼모달-->>사용자: 제출 완료 안내
    FormSubmit->>수신이메일: 표 형식(_template:table) 이메일 발송
  end
```
문의 폼 제출 시퀀스 — 허니팟 스팸 방지 + FormSubmit AJAX
# 관련 링크
site https://www.ongdalsam-speech.com
2026.07 — 2026.08 · (개인)

옹달샘 스피치

스피치 강사(1인 교습소)의 상담 문의 전환을 위한 원페이지 랜딩 사이트. 기획·퍼블리싱·배포·도메인/DNS 연결·클라이언트 커뮤니케이션까지 AI 협업(바이브코딩)으로 전 과정 단독 수행.

React 19Vite 8Tailwind CSS v4FormSubmitVercelCloudflare

AI 협업(바이브코딩) — 기획부터 배포·도메인 연결까지 단독 수행

문제
소상공인(1인 스피치 교습소) 클라이언트 프로젝트로, 약 1주 내 기획→퍼블리싱→배포까지 전 과정을 빠르게 완료해야 함.
설계
AI(바이브코딩) 협업으로 기획·퍼블리싱·배포·도메인/DNS 연결·클라이언트 커뮤니케이션 전 과정을 단독 진행. 22건 커밋으로 반복 개선하며 완성도 제고.
효과
별도 팀 구성 없이도 기획부터 운영까지 전 주기를 혼자 완결. 배포 이후에도 클라이언트 피드백을 반영해 유지보수 지속.

오버엔지니어링 지양 — 백엔드 서버 없이 FormSubmit으로 문의 폼 처리

문제
정적 랜딩 페이지 + 문의 폼 접수라는 단순한 요구사항 대비, 자체 백엔드 서버·DB·SMTP 인프라 구축은 요구사항 대비 과잉. 소상공인 고객에게 지속적인 서버 운영·유지보수 비용 부담을 지우지 않는 것이 우선.
설계
백엔드 서버 없이 FormSubmit(서드파티 이메일 릴레이)으로 문의 폼을 fetch AJAX 처리(_template: table, 허니팟 필드로 스팸 방지). 정적 SPA + Vercel 배포만으로 폼 제출→이메일 수신 구현.
효과
인프라 비용·유지보수 부담 없이 문의 폼 기능 확보. 요구사항 규모에 맞는 최소 구조로 오버엔지니어링 회피.
정적 SPA + FormSubmit 릴레이 + Vercel/Cloudflare 배포 아키텍처
문의 폼 제출 시퀀스 — 허니팟 스팸 방지 + FormSubmit AJAX
관련 링크
라이브 사이트