Overview
부서 내 의견 수렴, 행사 선호도 조사, 직원 만족도 조사 등 다양한 용도로 활용할 수 있는 설문조사 시스템을 만들어봅니다. 실시간 결과 집계 기능을 구현합니다.
학습 목표
다양한 입력 타입 구현 (라디오, 체크박스 등)
사용자 친화적인 폼 디자인
데이터 집계 및 시각화 (Chart.js)
유효성 검사 구현
사용 기술
HTML Forms
다양한 입력 양식 구현
(Radio, Checkbox)
Chart.js
데이터 시각화 라이브러리
(파이/막대 차트)
Backend Logic
데이터 집계 및 통계 처리
Step-by-Step 가이드
STEP 1
📁 폼 UI 구성
설문조사 화면 만들기
AI Prompt
직원 만족도 조사 폼을 만들어줘. 이름(텍스트), 부서(셀렉트), 만족도(1-5 라디오), 건의사항(텍스트에어리어)을 포함해줘.
STEP 2
🤖 서버 연동
응답 저장 API
AI Prompt
설문 응답을 받아서 저장하는 POST /api/survey 엔드포인트와, 현재 결과를 집계해서 보여주는 GET /api/stats 엔드포인트를 만들어줘.
STEP 3
📊 시각화
Chart.js 연동
AI Prompt
Chart.js CDN을 사용해서, 만족도 분포를 파이 차트로 보여주는 대시보드 페이지를 만들어줘.
준비물
- Session 7 완료
- Chart.js 라이브러리 (CDN) 확인
강사 노트 (Tip)
💡 팁
Chart.js 공식 문서를 함께 보며 옵션을 변경해보는 실습을 하면 흥미를 높일 수 있습니다.
Next Session
이벤트 신청 앱 만들기
바로가기