2025.09 – 2024.11 · 팀 프로젝트 (팀명: 세얼간이 · 권태형 · 하경완 · 함지원)
설문 생성부터 응답 수집, 통계 분석까지 한 번에 처리할 수 있는 웹 기반 설문 플랫폼입니다.
Cloudflare Pages + Pages Functions + D1 조합으로 프론트엔드·백엔드·데이터베이스를 단일 환경에서 운영하도록 설계했습니다.
기술 스택
HTML
CSS
Vanilla JavaScript
Chart.js
- 순수 HTML/CSS/JS 기반으로 설문 생성 · 응답 · 대시보드 · 통계 화면 구현
- 공통 컴포넌트(카드, 버튼, 모달)를 재사용해 일관된 UI 제공
- Drag & Drop, 통계 차트 등 인터랙션을 모두 Vanilla JS와 Chart.js로 직접 구현
GitHub · github.com/kwonkth/survey-project
레포지토리
Backend (Cloudflare Pages Functions)
Cloudflare Pages Functions
JavaScript (ES Modules)
REST API
- Cloudflare Pages Functions(Workers 런타임) 위에서 JavaScript ES Modules로 백엔드 구현
onRequest*패턴으로 설문, 응답, 폴더, AI 설문 생성 등 REST API 엔드포인트 설계- 프론트엔드와
fetch기반으로 통신해 설문 CRUD, 응답 수집, 통계 데이터를 주고받음
Database (Cloudflare D1)
wrangler.toml에서 D1 바인딩 이름을surveyforge로 지정env.surveyforge.prepare(...).run()/all()/bind()형태로 SQL 직접 실행- surveys: 설문 메타데이터(제목, 설명, JSON 구조, status, folder_id, created_at, updated_at)
- results: 설문 응답 데이터 및 통계 계산용 원본 저장
- folders: 설문 폴더링/분류 기능용 테이블
- 대부분의 핸들러에서
CREATE TABLE IF NOT EXISTS로 테이블 자동 생성 로직 포함
AI / 외부 API
- 파일:
functions/api/generate-survey.js - 모델:
anthropic/claude-haiku-4.5(OpenRouter Chat Completions) OPENROUTER_API_KEY환경 변수를 사용해 서버 측에서fetch로 직접 호출- 응답 JSON을 설문 문항 구조에 맞게 정규화하여 프론트엔드에서 바로 사용할 수 있는 형태로 반환
/styles/*.json에 설문 스타일 템플릿을 정의하고, AI 프롬프트에서 불러와 테마/스타일이 적용된 설문 초안 생성
문제 해결 요약
문제 · 설문을 재미있게 만드는 과정이 주관적이라 자동 생성 기능을 도입했지만, JSON 템플릿 기반 구조와 맞지 않아 Gemini 모델이 불완전한 JSON을 반환하는 문제가 반복되었습니다.
접근 · 여러 모델을 테스트하여 JSON 호환성을 검증했고, Claude Haiku 4.5가 스타일 템플릿과 긴 문항 구조를 안정적으로 처리함을 확인해 모델을 교체했습니다. 또한 "JSON만 출력"하도록 프롬프트를 개선하고 서버 측 파싱 검증 로직을 추가했습니다.
결과 · AI 설문 생성 기능이 안정적으로 동작하며 설문 품질과 일관성이 크게 향상되었고, 사용자는 설문 유형만 선택하면 즉시 사용 가능한 설문 초안을 자동으로 생성할 수 있게 되었습니다.