📊

14:30-15:10 (40분)

설문조사 앱 만들기

다양한 입력 폼과 실시간 결과 집계

📋 세션 개요

부서 내 의견 수렴, 행사 선호도 조사, 직원 만족도 조사 등 다양한 용도로 활용할 수 있는설문조사 시스템을 만들어봅니다. 객관식, 주관식, 체크박스 등 다양한 입력 타입과 실시간 결과 집계 기능을 구현합니다.

🎯 학습 목표

•

다양한 입력 타입 구현: 라디오, 체크박스, 텍스트, 별점 등 다양한 폼 요소를 사용합니다

•

폼 디자인: 사용자 친화적인 설문 폼 레이아웃을 만듭니다

•

데이터 집계: 응답 데이터를 실시간으로 집계하고 시각화합니다

•

유효성 검사: 필수 항목 체크 및 입력 형식 검증을 구현합니다

🛠️ 사용 기술

HTML Forms

다양한 input 타입과 폼 요소

JavaScript

폼 처리 및 데이터 집계

Chart.js

결과 시각화 (차트/그래프)

📝 설문 예시

직원 만족도 조사

🔐데이터베이스 계정 정보

실습 서버에 MariaDB가 이미 설치되어 있으며, 신청하신 계정별로 데이터베이스 접속 정보가 제공됩니다.

제공되는 정보:

• 데이터베이스 호스트 (Host)
• 데이터베이스명 (Database)
• 사용자명 (Username)
• 비밀번호 (Password)
• 포트 (Port)

👨‍💻 실습: 단계별 진행

1설문 폼 구조 만들기 (10분)

📝 Cursor에게 요청:

설문조사 웹 앱을 만들어주세요.

질문 구성:
1. "현재 업무 환경에 만족하십니까?" (라디오 버튼: 매우 만족/만족/보통/불만족)
2. "개선이 필요한 부분은?" (체크박스: 업무 프로세스/소통 체계/시설 환경/복지 제도)
3. "부서명을 입력해주세요" (텍스트 입력)
4. "추가 의견" (텍스트영역)

기능:
- 제출 버튼 클릭 시 응답 저장
- 결과 보기 버튼으로 집계 결과 표시
- 깔끔한 카드 레이아웃

HTML + vanilla JS로 만들어주세요.

2서버 연동 (10분)

📝 Cursor에게 요청:

Node.js + Express 백엔드를 추가해주세요.

API:
- POST /api/survey - 응답 저장
- GET /api/survey/results - 집계 결과 조회

응답 데이터를 MariaDB에 저장하고,
결과는 각 선택지별 응답 수를 반환해주세요.

MariaDB 연결 정보:
- Host: [제공받은 호스트]
- Database: [제공받은 DB명]
- User: [제공받은 사용자명]
- Password: [제공받은 비밀번호]
- Port: [제공받은 포트]

테이블 생성:
CREATE TABLE IF NOT EXISTS survey_responses (
  id INT AUTO_INCREMENT PRIMARY KEY,
  satisfaction VARCHAR(50),
  improvements TEXT,
  department VARCHAR(100),
  comment TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

프로젝트 구조:
/survey-app
  /public
    index.html
    results.html
  server.js
  package.json

💡 데이터 구조 예시:

{
  "satisfaction": "만족",
  "improvements": ["업무 프로세스", "소통 체계"],
  "department": "기획처",
  "comment": "전반적으로 만족합니다",
  "timestamp": "2025-10-24T10:30:00Z"
}

3결과 시각화 (15분)

📝 Cursor에게 요청:

results.html 페이지를 만들어주세요.

기능:
1. 만족도 결과를 파이 차트로 표시 (Chart.js 사용)
2. 개선 필요 부분을 막대 그래프로 표시
3. 총 응답 수 표시
4. 최근 의견 목록 (최대 10개)

깔끔하고 보기 좋은 레이아웃으로 만들어주세요.
Chart.js CDN을 사용해주세요.

💡 차트 예시:

만족도 분포 (파이 차트)

■ 매우 만족: 35%■ 만족: 45%■ 보통: 15%■ 불만족: 5%

4유효성 검사 추가 (5분)

📝 Cursor에게 요청:

유효성 검사를 추가해주세요:

1. 필수 항목 체크 (만족도, 부서명)
2. 체크박스 최소 1개 선택
3. 빈 값 제출 방지
4. 제출 완료 메시지 표시

오류 메시지는 빨간색으로 표시해주세요.

✅ 완성 체크리스트

모든 질문이 정상적으로 표시되나요?응답 제출이 잘 작동하나요?결과 페이지에서 차트가 보이나요?여러 번 제출해도 집계가 정확한가요?필수 항목 검증이 동작하나요?

💡 핵심 포인트

📋폼 디자인: 질문은 명확하게, 선택지는 적절한 수로, 레이아웃은 깔끔하게

✅유효성 검사: 사용자 실수를 방지하고 데이터 품질을 보장합니다

📊시각화: 숫자보다 그래프가 한눈에 이해하기 쉽습니다

⚡실시간 집계: 응답이 제출되면 즉시 결과에 반영됩니다

💼 업무 활용

📋 직원 만족도 조사

분기별 직원 만족도 및 개선 의견 수렴

🎉 행사 선호도 조사

직원 행사 일정/장소/프로그램 선호도 파악

📚 교육 수요 조사

직원 교육 프로그램 수요 및 선호 시간 파악

💡 아이디어 수집

부서 운영 개선 아이디어 및 건의사항 수집

❗ 자주 발생하는 문제와 해결법

🔸 체크박스 값이 제대로 저장되지 않습니다

해결: "체크된 체크박스들을 배열로 수집하는 코드를 추가해줘"

🔸 차트가 표시되지 않습니다

해결: "Chart.js CDN이 올바르게 로드되는지 확인하고, 캔버스 요소 ID를 체크해줘"

🔸 집계가 정확하지 않습니다

해결: "데이터베이스에 중복 응답이 저장되는지 확인하고, 집계 로직을 검토해줘"

🚀 도전 과제

⭐ Level 1: 별점(1~5점) 평가 항목 추가하기

⭐⭐ Level 2: 응답 데이터를 CSV 파일로 내보내기

⭐⭐⭐ Level 3: 설문 마감 기능 및 카운트다운 타이머 추가

⭐⭐⭐⭐ Level 4: 관리자 페이지에서 질문을 동적으로 추가/수정

📢 다음 실습 예고

Session 8: 이벤트 신청 앱 만들기

행사 참가 신청, 참가자 관리, 자동 확인 메시지 발송까지 실무에서 바로 사용할 수 있는 이벤트 관리 시스템을 만들어봅니다.

💡 미리 생각해보기: 우리 부서에서 관리하는 행사나 모임이 있나요?

👨‍🏫 강사 노트

⏰ 시간 배분: 폼 구조 10분, 서버 연동 10분, 시각화 15분, 유효성 검사 5분

🎯 핵심 개념: HTML 폼 요소, 데이터 집계, Chart.js 시각화

💬 참여 유도: "우리 부서에서 어떤 설문이 필요할까요?" 질문

⚠️ 주의사항: Chart.js CDN 로딩 확인, 체크박스 배열 처리 설명

🎨 선택적 개선: 시간이 남으면 별점 평가, 진행률 바 추가