간단한 설문조사 페이지

Cursor AI를 활용해 다양한 유형의 질문을 포함한 인터랙티브한 설문조사 페이지를 만들어봅시다.

프로젝트 개요

완성 모습

고객 만족도 설문조사
━━━━━━━━━━━━━━━━━━━━━
진행률: ████░░░░░░ 40%

Q1. 서비스에 얼마나 만족하셨나요?
( ) 매우 불만족
( ) 불만족
(•) 보통
( ) 만족
( ) 매우 만족

[이전] [다음]

1단계: 프로젝트 시작

Cursor에서 새 폴더 생성

File > Open Folder → 새 폴더 “survey-page” 생성

Cursor AI에게 첫 요청:

설문조사 페이지 만들어줘.

필요한 파일:
- index.html
- style.css
- script.js
- survey.json (설문 데이터)
- results.html (결과 페이지)

기본 구조만 만들어줘.

2단계: JSON 데이터 구조 만들기

Cursor에게 요청:

survey.json 만들어줘.

설문 정보:
- 제목
- 설명
- 예상 소요 시간
- 질문 배열

각 질문 정보:
- id
- 타입 (객관식, 주관식, 체크박스, 드롭다운, 평점, 슬라이더)
- 질문 텍스트
- 필수 여부
- 옵션 (객관식, 체크박스의 경우)
- 최소/최대값 (슬라이더의 경우)

다양한 질문 타입으로 10개 질문 만들어줘.
예시:
1. 객관식: 서비스 만족도
2. 체크박스: 사용한 기능들 (복수선택)
3. 주관식: 개선사항
4. 드롭다운: 연령대
5. 평점: 별점 5점
6. 슬라이더: 추천 의향 (0-10)

3단계: HTML 구조 만들기

Cursor에게 요청:

index.html 만들어줘.

구조:
1. 헤더
   - 설문 제목
   - 설명
   - 예상 소요 시간

2. 진행률 표시
   - 진행 바
   - "3/10 완료" 텍스트
   - 퍼센트 표시

3. 질문 컨테이너
   - 한 번에 한 질문씩 표시
   - 질문 번호
   - 질문 텍스트
   - 필수 표시 (*)
   - 답변 입력 영역 (타입별로 다름)

4. 네비게이션
   - "이전" 버튼
   - "다음" 버튼
   - 마지막 질문: "제출" 버튼
   - 버튼 활성화/비활성화 상태

5. 사이드 네비게이션 (선택사항)
   - 모든 질문 번호 표시
   - 완료된 질문 체크 표시
   - 클릭하면 해당 질문으로 이동

6. 완료 화면
   - 감사 메시지
   - 응답 요약
   - "결과 보기" 버튼

디자인:
- 깔끔하고 심플
- 한 페이지에 하나의 질문만
- 큰 폰트
- 선택하기 쉬운 버튼
- 모바일 친화적

4단계: CSS 스타일링

Cursor에게 요청:

style.css 만들어줘.

디자인 요구사항:
- 메인 색상: #5C6AC4 (보라)
- 배경: 그라데이션 또는 단색
- 텍스트: #2C3E50
- 카드 배경: 흰색

진행률 바:
- 높이 8px
- 둥근 모서리
- 그라데이션 또는 애니메이션
- 부드러운 전환

질문 카드:
- 중앙 배치
- 최대 너비 700px
- 넓은 패딩
- 그림자
- 둥근 모서리

입력 요소:
- 객관식: 큰 라디오 버튼 또는 버튼 형태
- 체크박스: 커스텀 디자인
- 텍스트: 넓은 입력창
- 드롭다운: 스타일링된 select
- 별점: 큰 별 아이콘
- 슬라이더: 커스텀 range input

버튼:
- 크고 명확한 버튼
- 호버 효과
- 비활성화 상태 스타일
- 로딩 상태

애니메이션:
- 질문 전환 시 슬라이드/페이드
- 진행률 바 애니메이션
- 버튼 호버 효과
- 완료 시 축하 애니메이션

반응형:
- 모바일: 전체 화면, 패딩 줄이기
- 태블릿: 적절한 카드 크기
- PC: 중앙 배치, 최대 너비 제한

5단계: JavaScript 기능 구현

Cursor에게 요청:

script.js 만들어줘.

기능 목록:

1. 데이터 로딩
   - survey.json 읽기
   - 첫 번째 질문 표시
   - 에러 처리

2. 질문 표시
   - 현재 질문 렌더링
   - 질문 타입에 따라 다른 HTML 생성
   - 이전 답변 있으면 표시

3. 답변 저장
   - 각 질문의 답변 저장
   - 로컬 스토리지에 임시 저장
   - 페이지 새로고침해도 유지

4. 네비게이션
   - "다음" 버튼: 다음 질문으로
   - "이전" 버튼: 이전 질문으로
   - 첫 질문에서 "이전" 비활성화
   - 마지막 질문에서 "제출" 표시

5. 입력 검증
   - 필수 질문 답변 확인
   - 답변 없으면 "다음" 비활성화
   - 에러 메시지 표시
   - 이메일 형식 검증 (해당되는 경우)

6. 진행률 추적
   - 답변한 질문 개수 계산
   - 진행률 바 업데이트
   - 퍼센트 표시
   - 부드러운 애니메이션

7. 질문 전환 애니메이션
   - 슬라이드 또는 페이드 효과
   - 방향에 따라 다른 애니메이션
   - 부드러운 전환

8. 제출 처리
   - 모든 필수 질문 답변 확인
   - 최종 확인 메시지
   - 결과 데이터 생성
   - 로컬 스토리지에 저장
   - 완료 화면 표시 또는 결과 페이지로 이동

9. 결과 요약
   - 답변 요약 표시
   - 통계 생성 (가능한 경우)
   - JSON 다운로드 옵션

코드 구조:
- 클래스 기반 (SurveyManager)
- 각 질문 타입별 렌더러 함수
- 함수 분리
- 주석 추가

6단계: 질문 타입별 구현

6-1. 객관식 (라디오)

Cursor에게 요청:

객관식 질문 렌더링 개선해줘.

디자인:
- 전통적인 라디오 버튼 대신 카드 형태
- 각 옵션이 큰 클릭 가능한 영역
- 선택 시 배경색 변경
- 체크 아이콘 표시
- 호버 효과

6-2. 별점

Cursor에게 요청:

별점 질문 만들어줘.

기능:
- 5개 별 표시
- 클릭으로 평점 선택
- 호버 시 해당 별까지 색상 변경
- 선택된 별 개수 표시 (예: "3/5")
- 별 크기 크게 (모바일 친화적)

6-3. 슬라이더

Cursor에게 요청:

슬라이더 질문 개선해줘.

기능:
- 커스텀 스타일 range input
- 현재 값 표시 (실시간 업데이트)
- 최소/최대값 라벨
- 중간값 표시 (선택사항)
- 움직일 때 값 애니메이션

7단계: 결과 페이지 만들기

Cursor에게 요청:

results.html 만들어줘.

기능:
- 로컬 스토리지에서 설문 결과 읽기
- 모든 답변 표시
- 질문별로 구분
- 카테고리별 점수 (가능하면)

구조:
1. 헤더
   - "설문조사 결과"
   - 완료 시간

2. 답변 요약
   - 각 질문과 답변
   - 깔끔한 레이아웃
   - 카드 형태

3. 통계 (선택사항)
   - 평균 만족도
   - 차트로 시각화
   - 주요 키워드 (주관식에서 추출)

4. 액션
   - "다시 하기" 버튼
   - "결과 다운로드" 버튼 (JSON)
   - "공유하기" 버튼

디자인:
- 깔끔한 리포트 형태
- 인쇄 친화적
- 시각적으로 보기 좋게

8단계: 고급 기능 추가

8-1. 조건부 질문

Cursor에게 요청:

조건부 질문 로직 추가해줘.

기능:
- survey.json에 condition 필드 추가
- 이전 답변에 따라 질문 표시/숨김
- 예: Q2에서 "불만족" 선택 시 Q3 "불만족 이유" 표시
- 진행률 바는 표시되는 질문 기준으로 계산

8-2. 자동 저장

Cursor에게 요청:

자동 저장 기능 추가해줘.

기능:
- 답변 변경할 때마다 자동 저장
- "진행 중인 설문이 있습니다" 알림
- "이어서 하기" 버튼
- "새로 시작하기" 버튼
- 로컬 스토리지 관리

8-3. 타이머

Cursor에게 요청:

설문 소요 시간 측정 추가해줘.

기능:
- 시작 시간 기록
- 각 질문별 소요 시간
- 전체 소요 시간
- 결과 페이지에 표시
- "예상 시간: 5분" 표시

9단계: 접근성 및 UX 개선

Cursor에게 요청:

접근성과 사용자 경험 개선해줘.

접근성:
- ARIA 라벨
- 키보드 네비게이션
  - Enter로 다음
  - 화살표로 옵션 선택
- 포커스 관리
- 스크린 리더 지원

UX 개선:
- 로딩 상태 표시
- 에러 메시지 친절하게
- 툴팁 도움말
- 필수 항목 명확히 표시
- 진행 저장 확인 메시지

10단계: 데이터 내보내기

Cursor에게 요청:

설문 결과 내보내기 기능 추가해줘.

기능:
1. JSON 다운로드
   - 전체 답변 데이터
   - 파일명: survey-result-YYYYMMDD.json

2. CSV 다운로드
   - 스프레드시트 호환
   - 각 질문이 컬럼

3. PDF 출력
   - window.print() 사용
   - 인쇄 최적화된 스타일

4. 이메일 전송 (선택사항)
   - mailto 링크
   - 결과 텍스트로 변환

완성 확인

테스트 항목

• 모든 질문 타입이 제대로 표시되는가?
• 네비게이션이 잘 작동하는가?
• 진행률이 정확한가?
• 답변이 저장되는가?
• 필수 검증이 작동하는가?
• 제출이 잘 되는가?
• 결과 페이지가 제대로 표시되는가?
• 자동 저장이 작동하는가?
• 모바일에서 사용하기 편한가?
• 키보드로 조작 가능한가?

GitHub & Cloudflare Pages 배포

1. Git 초기화

git init
git add .
git commit -m "설문조사 페이지 초기 버전"

2. GitHub 저장소 생성 및 푸시

git branch -M main
git remote add origin https://github.com/사용자명/survey-page.git
git push -u origin main

3. Cloudflare Pages 연결

• Cloudflare Pages 대시보드 접속
• “Connect to Git” 클릭
• 저장소 선택
• “Save and Deploy” 클릭
• 배포 완료 후 URL 확인

설문 수정하기

새 설문을 만들려면 survey.json만 수정:

Cursor에게 요청:

survey.json에 새 질문 추가해줘.

타입: 체크박스
질문: 관심 있는 주제를 모두 선택하세요
옵션: 기술, 디자인, 마케팅, 비즈니스, 기타
필수: 아니오

수정 후 Git 푸시하면 자동 배포!

추가 개선 아이디어

Cursor에게 요청할 수 있는 것들:

1. 분기 로직

복잡한 분기 로직 추가해줘.
- 답변에 따라 다른 질문 세트
- 점수 계산 로직
- 최종 결과 타입 분류

2. 다중 페이지

설문을 섹션별로 나누고 싶어.
- 섹션 1: 기본 정보
- 섹션 2: 만족도
- 섹션 3: 개선사항
- 각 섹션마다 진행률 바

3. 이미지 선택

이미지 객관식 질문 추가해줘.
- 이미지 옵션 (예: 제품 이미지)
- 클릭으로 선택
- 선택된 이미지 테두리 강조

4. 매트릭스 질문

표 형태 질문 만들어줘.
- 여러 항목을 같은 척도로 평가
- 행: 항목들
- 열: 평점 (1-5)

5. 실시간 분석

간단한 실시간 통계 페이지 만들어줘.
- 모든 응답자 데이터 (로컬 스토리지)
- 각 질문별 응답 분포
- 차트로 시각화

6. 테마 선택

설문 테마 커스터마이징 추가해줘.
- 색상 변경
- 로고 추가
- survey.json에 theme 설정

7. 진행 저장 알림

페이지 이탈 시 경고 추가해줘.
- beforeunload 이벤트
- "저장되지 않은 답변이 있습니다" 알림
- 확인/취소 옵션

문제 해결

답변이 저장 안 돼요

Cursor에게:

로컬 스토리지 저장 로직 확인해줘.
- 각 답변 변경 시 저장되는지
- JSON.stringify 확인
- 콘솔에 저장된 데이터 출력

진행률이 이상해요

Cursor에게:

진행률 계산 로직 수정해줘.
- 전체 질문 개수 확인
- 답변한 질문 카운트 확인
- 조건부 질문 제외 처리

모바일에서 입력이 어려워요

Cursor에게:

모바일 입력 개선해줘.
- 라디오/체크박스 크기 키우기
- 터치 영역 넓히기
- 폰트 크기 키우기
- 간격 조정

제출이 안 돼요

Cursor에게:

제출 로직 디버깅해줘.
- 모든 필수 질문 답변 확인
- 검증 로직 콘솔 출력
- 에러 메시지 표시

다음 단계

설문조사 페이지를 완성했습니다. 이제 포트폴리오 페이지를 만들어봅시다!