1. 설문조사 시스템의 이해와 기획하기 🎯

일단 뭐든 만들기 전에 "이게 뭔데?" 하는 이해가 필요하겠죠? 설문조사 시스템이 어떤 기능을 해야 하는지 확실히 알고 시작해봅시다!

1.1 설문조사 시스템의 핵심 기능

설문조사 시스템은 크게 세 파트로 나눌 수 있어요:

1. 설문 제작 파트: 질문 만들고, 옵션 설정하고, 설문지 디자인하는 부분
2. 응답 수집 파트: 사용자들이 설문에 답변하는 인터페이스
3. 결과 분석 파트: 수집된 데이터를 분석하고 시각화하는 부분

우리가 만들 시스템은 이 세 가지를 다 포함할 거예요. 진짜 구글 폼스 뺨치는 기능을 구현해볼 거니까 기대하셔도 좋아요! ㅋㅋㅋ

1.2 시스템 기획하기

개발 시작 전에 간단한 기획을 해볼게요. 우리 시스템은 이런 기능들을 가질 거예요:

1. 다양한 질문 유형 지원 (객관식, 주관식, 체크박스 등)
2. 설문 결과 실시간 대시보드
3. 모바일 친화적 디자인
4. 사용자 인증 시스템
5. 설문 공유 기능

위 다이어그램을 보면 우리가 만들 시스템의 전체 구조가 한눈에 들어오죠? 이제 이걸 실제로 구현해볼 차례예요! 🤓

1.3 기술 스택 선택하기

우리는 이런 기술들을 사용할 거예요:

1. 백엔드: Python + Flask (가볍고 배우기 쉬워서 굿!)
2. 데이터베이스: SQLite (개발용) / PostgreSQL (실제 배포용)
3. 프론트엔드: HTML, CSS, JavaScript + Chart.js (시각화용)
4. 배포: Heroku 또는 PythonAnywhere (초보자 친화적)

이 기술 스택은 초보자도 쉽게 따라할 수 있으면서도, 실제 서비스로 확장 가능한 구성이에요. 물론 더 복잡한 기능을 원한다면 Django나 React 같은 것도 고려해볼 수 있지만, 일단 기본부터 시작해봐요!

2. 개발 환경 설정하기 🛠️

자, 이제 진짜 코딩을 시작해볼까요? 먼저 개발 환경부터 세팅해봅시다!

2.1 Python 설치하기

당연히 Python이 필요하겠죠? 최신 버전(3.8 이상)을 설치하는 걸 추천해요.

Python 공식 사이트(https://www.python.org/downloads/)에서 다운로드 받으실 수 있어요. 설치할 때 'Add Python to PATH' 옵션 꼭 체크하세요! 안 그러면 나중에 머리 아파요... ㅋㅋㅋ

2.2 가상환경 만들기

프로젝트마다 별도의 환경을 만드는 건 진짜 꿀팁이에요! 나중에 다른 프로젝트랑 패키지 충돌 없이 깔끔하게 관리할 수 있거든요.

터미널(맥/리눅스) 또는 명령 프롬프트(윈도우)를 열고 다음 명령어를 실행해봅시다:

# 프로젝트 폴더 만들기
mkdir survey_app
cd survey_app

# 가상환경 만들기
python -m venv venv

# 가상환경 활성화 (윈도우)
venv\Scripts\activate

# 가상환경 활성화 (맥/리눅스)
source venv/bin/activate
    

가상환경이 활성화되면 터미널 앞에 (venv)라고 표시될 거예요. 이제 이 환경 안에서만 패키지를 설치하면 됩니다! 👍

2.3 필요한 패키지 설치하기

우리 프로젝트에 필요한 패키지들을 설치해볼게요:

# 기본 웹 프레임워크 및 데이터베이스 관련
pip install flask flask-sqlalchemy flask-migrate flask-login

# 폼 처리 및 보안
pip install flask-wtf email_validator

# 시각화 관련
pip install matplotlib pandas
    

이 패키지들이 뭐하는 건지 간단히 설명드릴게요:

1. Flask: 파이썬 웹 프레임워크의 끝판왕! 가볍고 확장성 좋음
2. Flask-SQLAlchemy: 데이터베이스 쉽게 다루는 ORM
3. Flask-Migrate: DB 스키마 변경 관리 도구
4. Flask-Login: 사용자 로그인/인증 관리
5. Flask-WTF: 폼 처리 및 CSRF 보안
6. Matplotlib & Pandas: 데이터 분석 및 시각화

이 정도면 기본적인 설문조사 시스템을 만들기에 충분해요! 😎

2.4 프로젝트 구조 만들기

이제 프로젝트 폴더 구조를 만들어볼게요. 깔끔한 구조는 나중에 코드 관리할 때 진짜 중요해요!

survey_app/
  ├── venv/                 # 가상환경 (이미 만들었죠?)
  ├── app/                  # 애플리케이션 코드
  │   ├── __init__.py       # 앱 초기화
  │   ├── models.py         # 데이터베이스 모델
  │   ├── routes.py         # 라우트 (URL 처리)
  │   ├── forms.py          # 폼 클래스
  │   ├── static/           # CSS, JS, 이미지 등
  │   └── templates/        # HTML 템플릿
  ├── migrations/           # 데이터베이스 마이그레이션
  ├── config.py             # 설정 파일
  ├── run.py                # 앱 실행 스크립트
  └── requirements.txt      # 패키지 목록
    

이 구조를 따라 폴더와 파일들을 만들어주세요. 터미널에서 다음 명령어로 만들 수 있어요:

# app 폴더와 기본 파일 생성
mkdir -p app/static app/templates
touch app/__init__.py app/models.py app/routes.py app/forms.py
touch config.py run.py requirements.txt
    

자, 이제 기본 구조가 완성됐어요! 다음으로 Flask 앱의 뼈대를 만들어볼게요.

3. Flask로 웹 애플리케이션 뼈대 만들기 🏗️

이제 진짜 코딩 시작이에요! Flask로 웹 앱의 기본 뼈대를 만들어봅시다.

3.1 Flask 앱 초기화하기

먼저 app/__init__.py 파일에 Flask 앱을 초기화하는 코드를 작성해볼게요:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_login import LoginManager
from config import Config

# 데이터베이스 객체 생성
db = SQLAlchemy()
migrate = Migrate()
login = LoginManager()
login.login_view = 'auth.login'

def create_app(config_class=Config):
    app = Flask(__name__)
    app.config.from_object(config_class)
    
    # 확장 기능 초기화
    db.init_app(app)
    migrate.init_app(app, db)
    login.init_app(app)
    
    # 블루프린트 등록
    from app.main import bp as main_bp
    app.register_blueprint(main_bp)
    
    from app.auth import bp as auth_bp
    app.register_blueprint(auth_bp, url_prefix='/auth')
    
    from app.survey import bp as survey_bp
    app.register_blueprint(survey_bp, url_prefix='/survey')
    
    return app

from app import models  # 모델 임포트
    

우와, 뭔가 복잡해 보이죠? ㅋㅋㅋ 하지만 걱정 마세요! 하나씩 설명해드릴게요:

1. 필요한 패키지들을 임포트했어요
2. 데이터베이스, 마이그레이션, 로그인 관리자 객체를 생성했어요
3. create_app 함수로 앱을 만들고 설정을 적용했어요
4. 블루프린트라는 걸 등록했는데, 이건 앱을 기능별로 나누는 방법이에요

이렇게 앱을 함수로 만드는 패턴을 '애플리케이션 팩토리'라고 해요. 테스트하기 좋고 확장성도 좋아서 실무에서 많이 쓰는 방식이에요!

3.2 설정 파일 만들기

이제 config.py 파일에 앱 설정을 추가해볼게요:

import os
from dotenv import load_dotenv

basedir = os.path.abspath(os.path.dirname(__file__))
load_dotenv(os.path.join(basedir, '.env'))

class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or '절대-들키면-안되는-비밀키'
    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or \
        'sqlite:///' + os.path.join(basedir, 'app.db')
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    

이 설정 파일은 두 가지 중요한 설정을 담고 있어요:

1. SECRET_KEY: 세션 데이터 암호화에 사용되는 비밀 키
2. SQLALCHEMY_DATABASE_URI: 데이터베이스 연결 정보

실제 배포할 때는 환경 변수로 이런 민감한 정보를 관리하는 게 좋아요. 지금은 개발용으로 기본값을 설정해뒀어요.

3.3 블루프린트 구조 만들기

위에서 블루프린트를 등록했는데, 이제 그 구조를 만들어볼게요. 블루프린트는 앱을 기능별로 모듈화하는 방법이에요.

# 폴더 구조 만들기
mkdir -p app/main app/auth app/survey
touch app/main/__init__.py app/main/routes.py
touch app/auth/__init__.py app/auth/routes.py app/auth/forms.py
touch app/survey/__init__.py app/survey/routes.py app/survey/forms.py
    

각 블루프린트의 __init__.py 파일에 다음 코드를 추가해주세요:

# app/main/__init__.py
from flask import Blueprint

bp = Blueprint('main', __name__)

from app.main import routes
    

다른 블루프린트도 비슷하게 설정하되, 이름만 'auth'나 'survey'로 바꿔주세요.

3.4 실행 스크립트 만들기

run.py 파일에 앱을 실행하는 코드를 추가해볼게요:

from app import create_app, db
from app.models import User, Survey, Question, Option, Response

app = create_app()

@app.shell_context_processor
def make_shell_context():
    return {
        'db': db, 
        'User': User,
        'Survey': Survey,
        'Question': Question,
        'Option': Option,
        'Response': Response
    }

if __name__ == '__main__':
    app.run(debug=True)
    

이 스크립트는 두 가지 역할을 해요:

1. 앱을 생성하고 실행해요
2. Flask 쉘에서 사용할 수 있는 컨텍스트를 제공해요 (디버깅할 때 유용해요)

이제 기본 구조가 완성됐어요! 다음으로 데이터베이스 모델을 설계해볼게요.

4. 데이터베이스 설계 및 연동하기 💾

설문조사 시스템의 심장은 바로 데이터베이스예요! 어떤 데이터를 어떻게 저장할지 잘 설계해야 나중에 고생 안 해요~

4.1 데이터베이스 모델 설계하기

우리 설문조사 시스템에 필요한 데이터 모델을 생각해볼까요?

1. User: 사용자 정보 (이메일, 비밀번호 등)
2. Survey: 설문지 정보 (제목, 설명, 생성자 등)
3. Question: 질문 정보 (질문 내용, 유형 등)
4. Option: 객관식 질문의 선택지
5. Response: 사용자 응답 데이터

이 모델들 간의 관계를 다이어그램으로 표현해볼게요:

이제 이 모델들을 코드로 구현해볼게요! app/models.py 파일에 다음 코드를 작성해주세요:

from datetime import datetime
from werkzeug.security import generate_password_hash, check_password_hash
from flask_login import UserMixin
from app import db, login

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(64), index=True, unique=True)
    email = db.Column(db.String(120), index=True, unique=True)
    password_hash = db.Column(db.String(128))
    surveys = db.relationship('Survey', backref='author', lazy='dynamic')
    
    def set_password(self, password):
        self.password_hash = generate_password_hash(password)
        
    def check_password(self, password):
        return check_password_hash(self.password_hash, password)
    
    def __repr__(self):
        return f'<User {self.username}>'

@login.user_loader
def load_user(id):
    return User.query.get(int(id))

class Survey(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
    is_active = db.Column(db.Boolean, default=True)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    questions = db.relationship('Question', backref='survey', lazy='dynamic', 
                               cascade='all, delete-orphan')
    
    def __repr__(self):
        return f'<Survey {self.title}>'

class Question(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.Text, nullable=False)
    type = db.Column(db.String(20), nullable=False)  # 'text', 'radio', 'checkbox', 'dropdown'
    required = db.Column(db.Boolean, default=False)
    order = db.Column(db.Integer, default=0)
    survey_id = db.Column(db.Integer, db.ForeignKey('survey.id'))
    options = db.relationship('Option', backref='question', lazy='dynamic', 
                             cascade='all, delete-orphan')
    responses = db.relationship('Response', backref='question', lazy='dynamic', 
                               cascade='all, delete-orphan')
    
    def __repr__(self):
        return f'<Question {self.id}: {self.content[:20]}...>'

class Option(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    text = db.Column(db.String(200), nullable=False)
    order = db.Column(db.Integer, default=0)
    question_id = db.Column(db.Integer, db.ForeignKey('question.id'))
    
    def __repr__(self):
        return f'<Option {self.id}: {self.text}>'

class Response(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    answer = db.Column(db.Text)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
    question_id = db.Column(db.Integer, db.ForeignKey('question.id'))
    respondent_id = db.Column(db.String(36))  # UUID for anonymous respondents
    
    def __repr__(self):
        return f'<Response {self.id} to question {self.question_id}>'
    

우와, 코드가 좀 길죠? ㅋㅋㅋ 하지만 각 모델이 하는 일은 간단해요:

1. User: 사용자 정보와 비밀번호 해싱 기능
2. Survey: 설문지 기본 정보
3. Question: 질문 내용과 유형
4. Option: 객관식 질문의 선택지
5. Response: 응답자들의 답변

SQLAlchemy의 relationship 기능을 사용해서 모델 간의 관계를 설정했어요. 이렇게 하면 나중에 'survey.questions'처럼 쉽게 관련 데이터에 접근할 수 있어요!

4.2 데이터베이스 초기화하기

이제 모델을 만들었으니 실제 데이터베이스를 초기화해볼게요. 터미널에서 다음 명령어를 실행해주세요:

# Flask 앱 환경변수 설정 (윈도우)
set FLASK_APP=run.py

# Flask 앱 환경변수 설정 (맥/리눅스)
export FLASK_APP=run.py

# 데이터베이스 초기화
flask db init
flask db migrate -m "Initial migration"
flask db upgrade
    

이 명령어들이 하는 일은:

1. flask db init: 마이그레이션 시스템 초기화
2. flask db migrate: 모델 변경사항 감지해서 마이그레이션 스크립트 생성
3. flask db upgrade: 실제 데이터베이스에 변경사항 적용

이제 app.db 파일이 생성되었을 거예요. 이게 바로 우리의 SQLite 데이터베이스예요! 🎉

4.3 데이터베이스 쿼리 테스트하기

데이터베이스가 제대로 설정됐는지 테스트해볼까요? Flask 쉘을 사용하면 편해요:

# Flask 쉘 실행
flask shell

# 쉘에서 다음 명령어 실행
>>> user = User(username='test_user', email='test@example.com')
>>> user.set_password('password123')
>>> db.session.add(user)
>>> db.session.commit()
>>> User.query.all()
[<User test_user>]
>>> exit()
    

오 잘 되네요! 이제 데이터베이스 설정이 완료됐어요. 다음으로 설문 생성 기능을 구현해볼게요!

5. 설문 생성 기능 구현하기 📝

이제 진짜 핵심 기능인 설문 생성 기능을 만들어볼게요! 사용자가 다양한 유형의 질문을 추가하고 설문지를 만들 수 있게 해봅시다.

5.1 인증 시스템 구현하기

설문을 만들려면 먼저 로그인이 필요하겠죠? app/auth/forms.py 파일에 로그인/회원가입 폼을 만들어볼게요:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo, ValidationError
from app.models import User

class LoginForm(FlaskForm):
    email = StringField('이메일', validators=[DataRequired(), Email()])
    password = PasswordField('비밀번호', validators=[DataRequired()])
    remember_me = BooleanField('로그인 상태 유지')
    submit = SubmitField('로그인')

class RegistrationForm(FlaskForm):
    username = StringField('사용자 이름', validators=[DataRequired()])
    email = StringField('이메일', validators=[DataRequired(), Email()])
    password = PasswordField('비밀번호', validators=[DataRequired()])
    password2 = PasswordField(
        '비밀번호 확인', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('회원가입')
    
    def validate_username(self, username):
        user = User.query.filter_by(username=username.data).first()
        if user is not None:
            raise ValidationError('이미 사용 중인 사용자 이름입니다.')
            
    def validate_email(self, email):
        user = User.query.filter_by(email=email.data).first()
        if user is not None:
            raise ValidationError('이미 사용 중인 이메일입니다.')
    

이제 app/auth/routes.py 파일에 로그인/회원가입 라우트를 추가해볼게요:

from flask import render_template, redirect, url_for, flash, request
from flask_login import login_user, logout_user, current_user
from werkzeug.urls import url_parse
from app import db
from app.auth import bp
from app.auth.forms import LoginForm, RegistrationForm
from app.models import User

@bp.route('/login', methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user is None or not user.check_password(form.password.data):
            flash('이메일 또는 비밀번호가 올바르지 않습니다')
            return redirect(url_for('auth.login'))
        login_user(user, remember=form.remember_me.data)
        next_page = request.args.get('next')
        if not next_page or url_parse(next_page).netloc != '':
            next_page = url_for('main.index')
        return redirect(next_page)
    return render_template('auth/login.html', title='로그인', form=form)

@bp.route('/logout')
def logout():
    logout_user()
    return redirect(url_for('main.index'))

@bp.route('/register', methods=['GET', 'POST'])
def register():
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data)
        user.set_password(form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('축하합니다! 회원가입이 완료되었습니다.')
        return redirect(url_for('auth.login'))
    return render_template('auth/register.html', title='회원가입', form=form)
    

이제 app/templates/auth 폴더를 만들고 로그인/회원가입 템플릿을 추가해야 해요. 먼저 기본 레이아웃부터 만들어볼게요.

app/templates/base.html:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if title %}{{ title }} - {% endif %}설문조사 시스템</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">설문조사 시스템</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.index') }}">홈</a>
                    </li>
                    {% if current_user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('survey.create') }}">설문 만들기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('survey.my_surveys') }}">내 설문</a>
                    </li>
                    {% endif %}
                </ul>
                <ul class="navbar-nav">
                    {% if current_user.is_authenticated %}
                    <li class="nav-item">
                        <span class="nav-link">{{ current_user.username }}</span>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.logout') }}">로그아웃</a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.login') }}">로그인</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.register') }}">회원가입</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container mt-4">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div class="row">
            <div class="col-md-12">
                {% for message in messages %}
                <div class="alert alert-info">{{ message }}</div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
        
        {% block content %}{% endblock %}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
    

이제 로그인 템플릿을 만들어볼게요. app/templates/auth/login.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">로그인</h3>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.email.label(class="form-label") }}
                        {{ form.email(class="form-control") }}
                        {% for error in form.email.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.password.label(class="form-label") }}
                        {{ form.password(class="form-control") }}
                        {% for error in form.password.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3 form-check">
                        {{ form.remember_me(class="form-check-input") }}
                        {{ form.remember_me.label(class="form-check-label") }}
                    </div>
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
                <p>계정이 없으신가요? <a href="{{ url_for('auth.register') }}">회원가입</a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

회원가입 템플릿도 비슷하게 만들어주세요. 이제 메인 페이지를 만들어볼게요. app/main/routes.py:

from flask import render_template, redirect, url_for
from app.main import bp

@bp.route('/')
@bp.route('/index')
def index():
    return render_template('index.html', title='홈')
    

app/templates/index.html:

{% extends "base.html" %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">나만의 설문조사를 만들어보세요!</h1>
    <p class="lead">간단하고 강력한 설문조사 시스템으로 데이터를 수집하고 분석해보세요.</p>
    <hr class="my-4">
    <p>지금 바로 시작하세요!</p>
    {% if current_user.is_authenticated %}
    <a class="btn btn-primary btn-lg" href="{{ url_for('survey.create') }}">설문 만들기</a>
    {% else %}
    <a class="btn btn-primary btn-lg" href="{{ url_for('auth.register') }}">회원가입</a>
    <a class="btn btn-outline-primary btn-lg" href="{{ url_for('auth.login') }}">로그인</a>
    {% endif %}
</div>

<div class="row mt-5">
    <div class="col-md-4">
        <h2>쉽고 빠른 설문 제작</h2>
        <p>다양한 질문 유형과 직관적인 인터페이스로 몇 분 안에 전문적인 설문을 만들 수 있습니다.</p>
    </div>
    <div class="col-md-4">
        <h2>실시간 응답 확인</h2>
        <p>응답이 들어오는 즉시 결과를 확인하고 시각적 대시보드로 데이터를 분석할 수 있습니다.</p>
    </div>
    <div class="col-md-4">
        <h2>어디서나 접근 가능</h2>
        <p>모바일 친화적인 디자인으로 어떤 기기에서든 설문에 응답할 수 있습니다.</p>
    </div>
</div>
{% endblock %}
    

5.2 설문 생성 폼 만들기

이제 설문을 만드는 폼을 구현해볼게요. app/survey/forms.py:

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SelectField, BooleanField, SubmitField
from wtforms.validators import DataRequired, Length

class SurveyForm(FlaskForm):
    title = StringField('설문 제목', validators=[DataRequired(), Length(max=100)])
    description = TextAreaField('설문 설명')
    is_active = BooleanField('활성화', default=True)
    submit = SubmitField('저장')

class QuestionForm(FlaskForm):
    content = TextAreaField('질문 내용', validators=[DataRequired()])
    type = SelectField('질문 유형', choices=[
        ('text', '주관식 (텍스트)'),
        ('radio', '객관식 (단일 선택)'),
        ('checkbox', '객관식 (다중 선택)'),
        ('dropdown', '드롭다운')
    ], validators=[DataRequired()])
    required = BooleanField('필수 응답', default=False)
    submit = SubmitField('질문 추가')

class OptionForm(FlaskForm):
    text = StringField('선택지 텍스트', validators=[DataRequired()])
    submit = SubmitField('선택지 추가')
    

이제 app/survey/routes.py 파일에 설문 생성 관련 라우트를 추가해볼게요:

from flask import render_template, redirect, url_for, flash, request, jsonify
from flask_login import login_required, current_user
from app import db
from app.survey import bp
from app.survey.forms import SurveyForm, QuestionForm, OptionForm
from app.models import Survey, Question, Option

@bp.route('/create', methods=['GET', 'POST'])
@login_required
def create():
    form = SurveyForm()
    if form.validate_on_submit():
        survey = Survey(
            title=form.title.data,
            description=form.description.data,
            is_active=form.is_active.data,
            author=current_user
        )
        db.session.add(survey)
        db.session.commit()
        flash('설문이 생성되었습니다! 이제 질문을 추가해주세요.')
        return redirect(url_for('survey.edit', id=survey.id))
    return render_template('survey/create.html', title='설문 만들기', form=form)

@bp.route('/edit/<int:id>', methods=['GET', 'POST'])
@login_required
def edit(id):
    survey = Survey.query.get_or_404(id)
    if survey.author != current_user:
        flash('이 설문을 편집할 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    # 설문 기본 정보 수정 폼
    survey_form = SurveyForm(obj=survey)
    if survey_form.validate_on_submit():
        survey_form.populate_obj(survey)
        db.session.commit()
        flash('설문이 업데이트되었습니다.')
        return redirect(url_for('survey.edit', id=survey.id))
    
    # 질문 추가 폼
    question_form = QuestionForm()
    
    # 질문 목록 가져오기
    questions = survey.questions.order_by(Question.order).all()
    
    return render_template('survey/edit.html', 
                          title='설문 편집',
                          survey=survey,
                          survey_form=survey_form,
                          question_form=question_form,
                          questions=questions)

@bp.route('/add_question/<int:survey_id>', methods=['POST'])
@login_required
def add_question(survey_id):
    survey = Survey.query.get_or_404(survey_id)
    if survey.author != current_user:
        flash('이 설문에 질문을 추가할 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    form = QuestionForm()
    if form.validate_on_submit():
        # 현재 질문 개수 확인해서 순서 정하기
        order = survey.questions.count()
        
        question = Question(
            content=form.content.data,
            type=form.type.data,
            required=form.required.data,
            order=order,
            survey=survey
        )
        db.session.add(question)
        db.session.commit()
        
        flash('질문이 추가되었습니다.')
        
        # 객관식 질문이면 선택지 추가 페이지로 이동
        if question.type in ['radio', 'checkbox', 'dropdown']:
            return redirect(url_for('survey.add_options', question_id=question.id))
    
    return redirect(url_for('survey.edit', id=survey_id))

@bp.route('/add_options/<int:question_id>', methods=['GET', 'POST'])
@login_required
def add_options(question_id):
    question = Question.query.get_or_404(question_id)
    survey = question.survey
    
    if survey.author != current_user:
        flash('이 질문에 선택지를 추가할 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    form = OptionForm()
    if form.validate_on_submit():
        # 현재 선택지 개수 확인해서 순서 정하기
        order = question.options.count()
        
        option = Option(
            text=form.text.data,
            order=order,
            question=question
        )
        db.session.add(option)
        db.session.commit()
        
        flash('선택지가 추가되었습니다.')
        return redirect(url_for('survey.add_options', question_id=question.id))
    
    options = question.options.order_by(Option.order).all()
    
    return render_template('survey/add_options.html',
                          title='선택지 추가',
                          question=question,
                          survey=survey,
                          form=form,
                          options=options)

@bp.route('/my_surveys')
@login_required
def my_surveys():
    surveys = current_user.surveys.order_by(Survey.created_at.desc()).all()
    return render_template('survey/my_surveys.html', title='내 설문', surveys=surveys)
    

이제 설문 생성 템플릿을 만들어볼게요. app/templates/survey/create.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">새 설문 만들기</h3>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.title.label(class="form-label") }}
                        {{ form.title(class="form-control") }}
                        {% for error in form.title.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.description.label(class="form-label") }}
                        {{ form.description(class="form-control", rows=4) }}
                        {% for error in form.description.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3 form-check">
                        {{ form.is_active(class="form-check-input") }}
                        {{ form.is_active.label(class="form-check-label") }}
                    </div>
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-primary") }}
                        <a href="{{ url_for('main.index') }}" class="btn btn-secondary">취소</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

설문 편집 페이지도 만들어볼게요. app/templates/survey/edit.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2>{{ survey.title }} <small class="text-muted">편집</small></h2>
        <p>{{ survey.description }}</p>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('survey.my_surveys') }}" class="btn btn-outline-secondary">내 설문 목록</a>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title">설문 정보 수정</h4>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ survey_form.hidden_tag() }}
                    <div class="mb-3">
                        {{ survey_form.title.label(class="form-label") }}
                        {{ survey_form.title(class="form-control") }}
                        {% for error in survey_form.title.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ survey_form.description.label(class="form-label") }}
                        {{ survey_form.description(class="form-control", rows=4) }}
                        {% for error in survey_form.description.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3 form-check">
                        {{ survey_form.is_active(class="form-check-input") }}
                        {{ survey_form.is_active.label(class="form-check-label") }}
                    </div>
                    <div class="mb-3">
                        {{ survey_form.submit(class="btn btn-primary") }}
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">질문 추가</h4>
            </div>
            <div class="card-body">
                <form action="{{ url_for('survey.add_question', survey_id=survey.id) }}" method="post" novalidate>
                    {{ question_form.hidden_tag() }}
                    <div class="mb-3">
                        {{ question_form.content.label(class="form-label") }}
                        {{ question_form.content(class="form-control", rows=3) }}
                        {% for error in question_form.content.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ question_form.type.label(class="form-label") }}
                        {{ question_form.type(class="form-select") }}
                        {% for error in question_form.type.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3 form-check">
                        {{ question_form.required(class="form-check-input") }}
                        {{ question_form.required.label(class="form-check-label") }}
                    </div>
                    <div class="mb-3">
                        {{ question_form.submit(class="btn btn-success") }}
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">질문 목록</h4>
                <span class="badge bg-primary">{{ questions|length }}개 질문</span>
            </div>
            <div class="card-body">
                {% if questions %}
                <div class="list-group">
                    {% for question in questions %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-1">{{ question.content }}</h5>
                            <span class="badge {% if question.type == 'text' %}bg-info{% elif question.type == 'radio' %}bg-success{% elif question.type == 'checkbox' %}bg-warning{% else %}bg-secondary{% endif %}">
                                {{ question.type }}
                            </span>
                        </div>
                        <p class="mb-1 text-muted">
                            {% if question.required %}필수 응답{% else %}선택 응답{% endif %}
                        </p>
                        
                        {% if question.type in ['radio', 'checkbox', 'dropdown'] %}
                        <div class="mt-2">
                            <strong>선택지:</strong>
                            {% if question.options.count() > 0 %}
                            <ul class="mb-0">
                                {% for option in question.options %}
                                <li>{{ option.text }}</li>
                                {% endfor %}
                            </ul>
                            {% else %}
                            <p class="text-muted">선택지가 없습니다.</p>
                            {% endif %}
                            <a href="{{ url_for('survey.add_options', question_id=question.id) }}" class="btn btn-sm btn-outline-primary mt-2">선택지 관리</a>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    아직 질문이 없습니다. 왼쪽 폼에서 질문을 추가해주세요.
                </div>
                {% endif %}
                
                {% if questions %}
                <div class="mt-4">
                    <a href="{{ url_for('survey.preview', id=survey.id) }}" class="btn btn-primary">설문 미리보기</a>
                    <a href="{{ url_for('survey.share', id=survey.id) }}" class="btn btn-success">설문 공유</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

선택지 추가 페이지도 만들어볼게요. app/templates/survey/add_options.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2>선택지 관리 <small class="text-muted">{{ question.content }}</small></h2>
        <p>
            <a href="{{ url_for('survey.edit', id=survey.id) }}">← 설문 편집으로 돌아가기</a>
        </p>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">선택지 추가</h4>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.text.label(class="form-label") }}
                        {{ form.text(class="form-control") }}
                        {% for error in form.text.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-success") }}
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">선택지 목록</h4>
                <span class="badge bg-primary">{{ options|length }}개 선택지</span>
            </div>
            <div class="card-body">
                {% if options %}
                <div class="list-group">
                    {% for option in options %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <span>{{ option.text }}</span>
                        <a href="{{ url_for('survey.delete_option', id=option.id) }}" class="btn btn-sm btn-outline-danger" onclick="return confirm('정말 삭제하시겠습니까?')">삭제</a>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    아직 선택지가 없습니다. 왼쪽 폼에서 선택지를 추가해주세요.
                </div>
                {% endif %}
                
                {% if options|length >= 2 %}
                <div class="mt-4">
                    <a href="{{ url_for('survey.edit', id=survey.id) }}" class="btn btn-primary">완료</a>
                </div>
                {% else %}
                <div class="alert alert-warning mt-4">
                    최소 2개 이상의 선택지를 추가해주세요.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

내 설문 목록 페이지도 만들어볼게요. app/templates/survey/my_surveys.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2>내 설문 목록</h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('survey.create') }}" class="btn btn-primary">새 설문 만들기</a>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        {% if surveys %}
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>제목</th>
                                <th>생성일</th>
                                <th>질문 수</th>
                                <th>상태</th>
                                <th>응답 수</th>
                                <th>작업</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for survey in surveys %}
                            <tr>
                                <td>{{ survey.title }}</td>
                                <td>{{ survey.created_at.strftime('%Y-%m-%d') }}</td>
                                <td>{{ survey.questions.count() }}</td>
                                <td>
                                    {% if survey.is_active %}
                                    <span class="badge bg-success">활성</span>
                                    {% else %}
                                    <span class="badge bg-secondary">비활성</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% set response_count = namespace(value=0) %}
                                    {% for question in survey.questions %}
                                        {% set response_count.value = response_count.value + question.responses.count() %}
                                    {% endfor %}
                                    {{ response_count.value }}
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ url_for('survey.edit', id=survey.id) }}" class="btn btn-sm btn-outline-primary">편집</a>
                                        <a href="{{ url_for('survey.share', id=survey.id) }}" class="btn btn-sm btn-outline-success">공유</a>
                                        <a href="{{ url_for('survey.results', id=survey.id) }}" class="btn btn-sm btn-outline-info">결과</a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <div class="alert alert-info">
            아직 만든 설문이 없습니다. 위의 '새 설문 만들기' 버튼을 클릭해 첫 설문을 만들어보세요!
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
    

이제 기본적인 설문 생성 기능이 완성됐어요! 다음으로 응답 수집 페이지를 만들어볼게요.

6. 응답 수집 페이지 만들기 📊

이제 만든 설문에 응답을 받을 수 있는 페이지를 만들어볼게요! 이 부분이 진짜 중요한 부분이죠~ 사용자 경험을 최대한 좋게 만들어봅시다!

6.1 설문 공유 기능 구현하기

먼저 설문을 공유할 수 있는 기능부터 만들어볼게요. app/survey/routes.py에 다음 라우트를 추가해주세요:

import uuid
from datetime import datetime

@bp.route('/share/<int:id>')
@login_required
def share(id):
    survey = Survey.query.get_or_404(id)
    if survey.author != current_user:
        flash('이 설문을 공유할 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    # 설문 응답 URL 생성
    response_url = url_for('survey.respond', id=survey.id, _external=True)
    
    return render_template('survey/share.html', 
                          title='설문 공유',
                          survey=survey,
                          response_url=response_url)
    

이제 공유 페이지 템플릿을 만들어볼게요. app/templates/survey/share.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2>설문 공유 <small class="text-muted">{{ survey.title }}</small></h2>
        <p>
            <a href="{{ url_for('survey.edit', id=survey.id) }}">← 설문 편집으로 돌아가기</a>
        </p>
    </div>
</div>

<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">설문 응답 링크</h4>
            </div>
            <div class="card-body">
                <p>아래 링크를 복사하여 응답자들에게 공유하세요:</p>
                
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="response-url" value="{{ response_url }}" readonly>
                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard()">복사</button>
                </div>
                
                <div class="alert alert-success mt-4">
                    <h5>QR 코드로 공유하기</h5>
                    <p>스마트폰으로 쉽게 접근할 수 있도록 QR 코드를 제공합니다:</p>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ response_url|urlencode }}" alt="QR Code" class="img-thumbnail">
                </div>
                
                <div class="alert alert-info mt-4">
                    <h5>소셜 미디어로 공유하기</h5>
                    <div class="d-flex gap-2 mt-3">
                        <a href="https://twitter.com/intent/tweet?url={{ response_url|urlencode }}&text={{ survey.title|urlencode }}" target="_blank" class="btn btn-outline-primary">Twitter</a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ response_url|urlencode }}" target="_blank" class="btn btn-outline-primary">Facebook</a>
                        <a href="mailto:?subject={{ survey.title|urlencode }}&body={{ survey.description|urlencode }}%0A%0A{{ response_url|urlencode }}" class="btn btn-outline-primary">Email</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function copyToClipboard() {
    var copyText = document.getElementById("response-url");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
    
    alert("링크가 클립보드에 복사되었습니다!");
}
</script>
{% endblock %}
    

6.2 설문 응답 페이지 구현하기

이제 실제로 응답을 받는 페이지를 만들어볼게요. app/survey/routes.py에 다음 라우트를 추가해주세요:

@bp.route('/respond/<int:id>', methods=['GET', 'POST'])
def respond(id):
    survey = Survey.query.get_or_404(id)
    
    # 비활성화된 설문인지 확인
    if not survey.is_active:
        flash('이 설문은 현재 비활성화 상태입니다.')
        return redirect(url_for('main.index'))
    
    # 질문 목록 가져오기
    questions = survey.questions.order_by(Question.order).all()
    
    if not questions:
        flash('이 설문에는 질문이 없습니다.')
        return redirect(url_for('main.index'))
    
    if request.method == 'POST':
        # 응답자 ID 생성 (익명 응답을 위한 UUID)
        respondent_id = request.form.get('respondent_id')
        if not respondent_id:
            respondent_id = str(uuid.uuid4())
        
        # 각 질문에 대한 응답 처리
        for question in questions:
            answer = None
            
            if question.type == 'text':
                # 주관식 응답
                answer = request.form.get(f'question_{question.id}')
            elif question.type == 'radio':
                # 단일 선택 응답
                answer = request.form.get(f'question_{question.id}')
            elif question.type == 'checkbox':
                # 다중 선택 응답
                checkbox_answers = request.form.getlist(f'question_{question.id}')
                if checkbox_answers:
                    answer = ','.join(checkbox_answers)
            elif question.type == 'dropdown':
                # 드롭다운 응답
                answer = request.form.get(f'question_{question.id}')
            
            # 필수 질문인데 응답이 없는 경우
            if question.required and not answer:
                flash(f'"{question.content}" 질문은 필수 응답입니다.')
                return redirect(url_for('survey.respond', id=survey.id))
            
            # 응답 저장
            if answer:
                response = Response(
                    answer=answer,
                    question_id=question.id,
                    respondent_id=respondent_id
                )
                db.session.add(response)
        
        db.session.commit()
        return redirect(url_for('survey.thank_you', id=survey.id))
    
    # GET 요청 처리 (설문 폼 표시)
    respondent_id = str(uuid.uuid4())  # 새 응답자 ID 생성
    return render_template('survey/respond.html',
                          title=survey.title,
                          survey=survey,
                          questions=questions,
                          respondent_id=respondent_id)

@bp.route('/thank_you/<int:id>')
def thank_you(id):
    survey = Survey.query.get_or_404(id)
    return render_template('survey/thank_you.html', title='응답 완료', survey=survey)
    

이제 응답 페이지 템플릿을 만들어볼게요. app/templates/survey/respond.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">{{ survey.title }}</h2>
            </div>
            <div class="card-body">
                <p class="lead">{{ survey.description }}</p>
                <hr>
                
                <form action="" method="post" novalidate>
                    <input type="hidden" name="respondent_id" value="{{ respondent_id }}">
                    
                    {% for question in questions %}
                    <div class="mb-4 p-3 border rounded {% if question.required %}border-danger{% endif %}">
                        <h5>
                            {{ question.content }}
                            {% if question.required %}
                            <span class="text-danger">*</span>
                            {% endif %}
                        </h5>
                        
                        {% if question.type == 'text' %}
                        <!-- 주관식 질문 -->
                        <div class="mb-3">
                            <textarea class="form-control" name="question_{{ question.id }}" rows="3" {% if question.required %}required{% endif %}></textarea>
                        </div>
                        
                        {% elif question.type == 'radio' %}
                        <!-- 객관식 단일 선택 질문 -->
                        <div class="mb-3">
                            {% for option in question.options %}
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="question_{{ question.id }}" id="option_{{ option.id }}" value="{{ option.text }}" {% if question.required %}required{% endif %}>
                                <label class="form-check-label" for="option_{{ option.id }}">
                                    {{ option.text }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                        
                        {% elif question.type == 'checkbox' %}
                        <!-- 객관식 다중 선택 질문 -->
                        <div class="mb-3">
                            {% for option in question.options %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="question_{{ question.id }}" id="option_{{ option.id }}" value="{{ option.text }}">
                                <label class="form-check-label" for="option_{{ option.id }}">
                                    {{ option.text }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                        
                        {% elif question.type == 'dropdown' %}
                        <!-- 드롭다운 질문 -->
                        <div class="mb-3">
                            <select class="form-select" name="question_{{ question.id }}" {% if question.required %}required{% endif %}>
                                <option value="">-- 선택하세요 --</option>
                                {% for option in question.options %}
                                <option value="{{ option.text }}">{{ option.text }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">응답 제출하기</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

감사 페이지도 만들어볼게요. app/templates/survey/thank_you.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2 text-center">
        <div class="card">
            <div class="card-body">
                <h1 class="display-4 text-success">감사합니다!</h1>
                <p class="lead">{{ survey.title }} 설문에 응답해주셔서 감사합니다.</p>
                <hr>
                <p>소중한 의견이 성공적으로 제출되었습니다.</p>
                <div class="mt-4">
                    <a href="{{ url_for('main.index') }}" class="btn btn-primary">홈으로 돌아가기</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

이제 설문 응답 기능이 완성됐어요! 다음으로 결과를 분석하고 시각화하는 기능을 구현해볼게요.

7. 결과 분석 및 시각화 구현하기 📈

이제 수집된 설문 결과를 분석하고 시각화하는 기능을 만들어볼게요! 이 부분이 진짜 꿀잼 파트예요~ 데이터를 예쁘게 보여주면 사용자들이 환호할 거예요! ㅋㅋㅋ

7.1 결과 페이지 구현하기

app/survey/routes.py에 결과 페이지 라우트를 추가해볼게요:

from collections import Counter
import json

@bp.route('/results/<int:id>')
@login_required
def results(id):
    survey = Survey.query.get_or_404(id)
    if survey.author != current_user:
        flash('이 설문의 결과를 볼 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    # 질문 목록 가져오기
    questions = survey.questions.order_by(Question.order).all()
    
    # 각 질문별 응답 데이터 분석
    results_data = []
    
    for question in questions:
        question_data = {
            'id': question.id,
            'content': question.content,
            'type': question.type,
            'total_responses': question.responses.count()
        }
        
        if question.type == 'text':
            # 주관식 응답은 텍스트 목록으로 표시
            question_data['responses'] = [r.answer for r in question.responses]
            
        elif question.type in ['radio', 'dropdown']:
            # 단일 선택 응답은 각 옵션별 개수 계산
            answers = [r.answer for r in question.responses]
            counts = Counter(answers)
            
            # 차트 데이터 준비
            labels = list(counts.keys())
            values = list(counts.values())
            
            question_data['chart_data'] = {
                'labels': labels,
                'values': values
            }
            
        elif question.type == 'checkbox':
            # 다중 선택 응답은 콤마로 분리하여 각 옵션별 개수 계산
            all_selections = []
            for response in question.responses:
                if response.answer:
                    selections = response.answer.split(',')
                    all_selections.extend(selections)
            
            counts = Counter(all_selections)
            
            # 차트 데이터 준비
            labels = list(counts.keys())
            values = list(counts.values())
            
            question_data['chart_data'] = {
                'labels': labels,
                'values': values
            }
        
        results_data.append(question_data)
    
    # 총 응답자 수 계산 (중복 제거)
    respondent_ids = set()
    for question in questions:
        for response in question.responses:
            respondent_ids.add(response.respondent_id)
    
    total_respondents = len(respondent_ids)
    
    return render_template('survey/results.html',
                          title=f'{survey.title} - 결과',
                          survey=survey,
                          results_data=results_data,
                          total_respondents=total_respondents)
    

이제 결과 페이지 템플릿을 만들어볼게요. app/templates/survey/results.html:

{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2>설문 결과 <small class="text-muted">{{ survey.title }}</small></h2>
        <p>
            <a href="{{ url_for('survey.my_surveys') }}">← 내 설문 목록으로 돌아가기</a>
        </p>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('survey.export_results', id=survey.id) }}" class="btn btn-success">결과 내보내기 (CSV)</a>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <h3 class="display-4">{{ total_respondents }}</h3>
                        <p class="text-muted">총 응답자 수</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="display-4">{{ survey.questions.count() }}</h3>
                        <p class="text-muted">총 질문 수</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="display-4">{{ survey.created_at.strftime('%Y-%m-%d') }}</h3>
                        <p class="text-muted">설문 생성일</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% for data in results_data %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ data.content }}</h4>
                <div class="text-muted">
                    {{ data.type }} 유형 | {{ data.total_responses }}개 응답
                </div>
            </div>
            <div class="card-body">
                {% if data.type == 'text' %}
                <!-- 주관식 응답 표시 -->
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>응답 내용</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for response in data.responses %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ response }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% elif data.type in ['radio', 'dropdown', 'checkbox'] %}
                <!-- 객관식 응답 차트 표시 -->
                <div class="row">
                    <div class="col-md-8">
                        <canvas id="chart_{{ data.id }}" width="400" height="200"></canvas>
                    </div>
                    <div class="col-md-4">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>옵션</th>
                                    <th>응답 수</th>
                                    <th>비율</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in range(data.chart_data.labels|length) %}
                                <tr>
                                    <td>{{ data.chart_data.labels[i] }}</td>
                                    <td>{{ data.chart_data.values[i] }}</td>
                                    <td>
                                        {% if data.total_responses > 0 %}
                                        {{ (data.chart_data.values[i] / data.total_responses * 100)|round(1) }}%
                                        {% else %}
                                        0%
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    {% for data in results_data %}
    {% if data.type in ['radio', 'dropdown', 'checkbox'] and data.chart_data %}
    // 차트 생성
    var ctx = document.getElementById('chart_{{ data.id }}').getContext('2d');
    var chart = new Chart(ctx, {
        type: '{{ 'pie' if data.type in ['radio', 'dropdown'] else 'bar' }}',
        data: {
            labels: {{ data.chart_data.labels|tojson }},
            datasets: [{
                label: '응답 수',
                data: {{ data.chart_data.values|tojson }},
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                    'rgba(255, 159, 64, 0.7)',
                    'rgba(199, 199, 199, 0.7)',
                    'rgba(83, 102, 255, 0.7)',
                    'rgba(40, 159, 64, 0.7)',
                    'rgba(210, 199, 199, 0.7)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(199, 199, 199, 1)',
                    'rgba(83, 102, 255, 1)',
                    'rgba(40, 159, 64, 1)',
                    'rgba(210, 199, 199, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            {% if data.type == 'checkbox' %}
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            {% endif %}
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: '{{ data.content }}'
                }
            }
        }
    });
    {% endif %}
    {% endfor %}
});
</script>
{% endblock %}
    

7.2 결과 내보내기 기능 구현하기

CSV 형식으로 결과를 내보내는 기능도 추가해볼게요. app/survey/routes.py에 다음 라우트를 추가해주세요:

import csv
from io import StringIO
from flask import make_response

@bp.route('/export_results/<int:id>')
@login_required
def export_results(id):
    survey = Survey.query.get_or_404(id)
    if survey.author != current_user:
        flash('이 설문의 결과를 내보낼 권한이 없습니다.')
        return redirect(url_for('main.index'))
    
    # CSV 파일 생성
    output = StringIO()
    writer = csv.writer(output)
    
    # 헤더 행 작성
    questions = survey.questions.order_by(Question.order).all()
    header = ['응답자 ID', '응답 시간']
    for question in questions:
        header.append(f'Q{question.id}: {question.content}')
    
    writer.writerow(header)
    
    # 응답자 ID 목록 가져오기
    respondent_ids = set()
    for question in questions:
        for response in question.responses:
            respondent_ids.add(response.respondent_id)
    
    # 각 응답자별 데이터 작성
    for respondent_id in respondent_ids:
        row = [respondent_id]
        
        # 응답 시간 (해당 응답자의 첫 번째 응답 시간)
        first_response = Response.query.filter_by(respondent_id=respondent_id).order_by(Response.created_at).first()
        row.append(first_response.created_at.strftime('%Y-%m-%d %H:%M:%S') if first_response else '')
        
        # 각 질문에 대한 응답
        for question in questions:
            response = Response.query.filter_by(question_id=question.id, respondent_id=respondent_id).first()
            row.append(response.answer if response else '')
        
        writer.writerow(row)
    
    # CSV 파일 응답 생성
    output.seek(0)
    response = make_response(output.getvalue())
    response.headers['Content-Disposition'] = f'attachment; filename=survey_{survey.id}_results.csv'
    response.headers['Content-type'] = 'text/csv'
    
    return response
    

이제 설문 결과를 분석하고 시각화하는 기능이 완성됐어요! 다음으로 사용자 인증 시스템을 더 개선해볼게요.

8. 사용자 인증 시스템 추가하기 🔐

지금까지 기본적인 인증 시스템을 구현했지만, 좀 더 고급 기능을 추가해볼게요! 비밀번호 재설정, 프로필 관리 등 실제 서비스에서 필요한 기능들을 구현해봅시다.

8.1 사용자 프로필 관리 기능 구현하기

사용자가 자신의 프로필을 관리할 수 있는 기능을 추가해볼게요. app/auth/forms.py에 프로필 수정 폼을 추가해주세요:

class ProfileForm(FlaskForm):
    username = StringField('사용자 이름', validators=[DataRequired()])
    email = StringField('이메일', validators=[DataRequired(), Email()])
    current_password = PasswordField('현재 비밀번호')
    new_password = PasswordField('새 비밀번호')
    new_password2 = PasswordField(
        '새 비밀번호 확인', validators=[EqualTo('new_password')])
    submit = SubmitField('프로필 업데이트')
    
    def __init__(self, original_username, original_email, *args, **kwargs):
        super(ProfileForm, self).__init__(*args, **kwargs)
        self.original_username = original_username
        self.original_email = original_email
    
    def validate_username(self, username):
        if username.data != self.original_username:
            user = User.query.filter_by(username=username.data).first()
            if user is not None:
                raise ValidationError('이미 사용 중인 사용자 이름입니다.')
    
    def validate_email(self, email):
        if email.data != self.original_email:
            user = User.query.filter_by(email=email.data).first()
            if user is not None:
                raise ValidationError('이미 사용 중인 이메일입니다.')
    

이제 app/auth/routes.py에 프로필 관리 라우트를 추가해주세요:

@bp.route('/profile', methods=['GET', 'POST'])
@login_required
def profile():
    form = ProfileForm(current_user.username, current_user.email)
    if form.validate_on_submit():
        # 비밀번호 변경을 원하는 경우
        if form.current_password.data:
            if not current_user.check_password(form.current_password.data):
                flash('현재 비밀번호가 올바르지 않습니다.')
                return redirect(url_for('auth.profile'))
            
            if form.new_password.data:
                current_user.set_password(form.new_password.data)
                flash('비밀번호가 변경되었습니다.')
        
        # 사용자 정보 업데이트
        current_user.username = form.username.data
        current_user.email = form.email.data
        db.session.commit()
        flash('프로필이 업데이트되었습니다.')
        return redirect(url_for('auth.profile'))
    elif request.method == 'GET':
        form.username.data = current_user.username
        form.email.data = current_user.email
    
    return render_template('auth/profile.html', title='프로필 관리', form=form)
    

이제 프로필 관리 템플릿을 만들어볼게요. app/templates/auth/profile.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">프로필 관리</h3>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.username.label(class="form-label") }}
                        {{ form.username(class="form-control") }}
                        {% for error in form.username.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.email.label(class="form-label") }}
                        {{ form.email(class="form-control") }}
                        {% for error in form.email.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <hr>
                    <h4>비밀번호 변경</h4>
                    <p class="text-muted">비밀번호를 변경하려면 아래 항목을 입력하세요. 변경하지 않으려면 비워두세요.</p>
                    
                    <div class="mb-3">
                        {{ form.current_password.label(class="form-label") }}
                        {{ form.current_password(class="form-control") }}
                        {% for error in form.current_password.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.new_password.label(class="form-label") }}
                        {{ form.new_password(class="form-control") }}
                        {% for error in form.new_password.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.new_password2.label(class="form-label") }}
                        {{ form.new_password2(class="form-control") }}
                        {% for error in form.new_password2.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

8.2 비밀번호 재설정 기능 구현하기

비밀번호를 잊어버린 사용자를 위한 재설정 기능도 추가해볼게요. 먼저 app/auth/forms.py에 폼을 추가해주세요:

class ResetPasswordRequestForm(FlaskForm):
    email = StringField('이메일', validators=[DataRequired(), Email()])
    submit = SubmitField('비밀번호 재설정 요청')

class ResetPasswordForm(FlaskForm):
    password = PasswordField('새 비밀번호', validators=[DataRequired()])
    password2 = PasswordField(
        '비밀번호 확인', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('비밀번호 재설정')
    

이메일 전송 기능을 위해 app/email.py 파일을 만들고 다음 코드를 추가해주세요:

from flask import render_template, current_app
from flask_mail import Message
from app import mail
from threading import Thread

def send_async_email(app, msg):
    with app.app_context():
        mail.send(msg)

def send_email(subject, sender, recipients, text_body, html_body):
    msg = Message(subject, sender=sender, recipients=recipients)
    msg.body = text_body
    msg.html = html_body
    
    # 비동기로 이메일 전송 (백그라운드 작업)
    Thread(target=send_async_email,
          args=(current_app._get_current_object(), msg)).start()

def send_password_reset_email(user):
    token = user.get_reset_password_token()
    send_email(
        '[설문조사 시스템] 비밀번호 재설정',
        sender=current_app.config['MAIL_DEFAULT_SENDER'],
        recipients=[user.email],
        text_body=render_template('email/reset_password.txt',
                                 user=user, token=token),
        html_body=render_template('email/reset_password.html',
                                 user=user, token=token)
    )
    

app/models.py에 비밀번호 재설정 토큰 관련 메서드를 추가해주세요:

from time import time
import jwt
from flask import current_app

class User(UserMixin, db.Model):
    # 기존 코드는 그대로 두고 아래 메서드만 추가
    
    def get_reset_password_token(self, expires_in=600):
        return jwt.encode(
            {'reset_password': self.id, 'exp': time() + expires_in},
            current_app.config['SECRET_KEY'],
            algorithm='HS256'
        )
    
    @staticmethod
    def verify_reset_password_token(token):
        try:
            id = jwt.decode(
                token,
                current_app.config['SECRET_KEY'],
                algorithms=['HS256']
            )['reset_password']
        except:
            return None
        return User.query.get(id)
    

이제 app/auth/routes.py에 비밀번호 재설정 라우트를 추가해주세요:

from app.email import send_password_reset_email

@bp.route('/reset_password_request', methods=['GET', 'POST'])
def reset_password_request():
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))
    form = ResetPasswordRequestForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user:
            send_password_reset_email(user)
        flash('비밀번호 재설정 안내 이메일을 발송했습니다.')
        return redirect(url_for('auth.login'))
    return render_template('auth/reset_password_request.html',
                          title='비밀번호 재설정', form=form)

@bp.route('/reset_password/<token>', methods=['GET', 'POST'])
def reset_password(token):
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))
    user = User.verify_reset_password_token(token)
    if not user:
        flash('유효하지 않거나 만료된 토큰입니다.')
        return redirect(url_for('main.index'))
    form = ResetPasswordForm()
    if form.validate_on_submit():
        user.set_password(form.password.data)
        db.session.commit()
        flash('비밀번호가 재설정되었습니다.')
        return redirect(url_for('auth.login'))
    return render_template('auth/reset_password.html', form=form)
    

이제 템플릿을 만들어볼게요. app/templates/auth/reset_password_request.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">비밀번호 재설정 요청</h3>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.email.label(class="form-label") }}
                        {{ form.email(class="form-control") }}
                        {% for error in form.email.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

app/templates/auth/reset_password.html:

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">비밀번호 재설정</h3>
            </div>
            <div class="card-body">
                <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.password.label(class="form-label") }}
                        {{ form.password(class="form-control") }}
                        {% for error in form.password.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.password2.label(class="form-label") }}
                        {{ form.password2(class="form-control") }}
                        {% for error in form.password2.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="mb-3">
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
    

이메일 템플릿도 만들어야 해요. app/templates/email/reset_password.html:

<p>안녕하세요 {{ user.username }}님,</p>
<p>
    비밀번호 재설정을 요청하셨습니다. 아래 링크를 클릭하여 비밀번호를 재설정하세요:
</p>
<p>
    <a href="{{ url_for('auth.reset_password', token=token, _external=True) }}">
        비밀번호 재설정하기
    </a>
</p>
<p>
    위 링크는 10분 동안만 유효합니다.
</p>
<p>
    비밀번호 재설정을 요청하지 않으셨다면 이 이메일을 무시하셔도 됩니다.
</p>
<p>설문조사 시스템 팀</p>
    

이제 로그인 페이지에 비밀번호 재설정 링크를 추가해주세요. app/templates/auth/login.html의 마지막 부분을 수정해주세요:

<p>계정이 없으신가요? <a href="{{ url_for('auth.register') }}">회원가입</a></p>
<p>비밀번호를 잊으셨나요? <a href="{{ url_for('auth.reset_password_request') }}">비밀번호 재설정</a></p>
    

이제 사용자 인증 시스템이 더 완벽해졌어요! 다음으로 배포 방법을 알아볼게요.

9. 배포 및 운영하기 🚀

이제 우리가 만든 멋진 설문조사 시스템을 실제로 배포해볼 차례예요! 개발 환경에서만 돌리는 건 재미없잖아요? ㅋㅋㅋ 실제 서버에 올려서 친구들에게 자랑해봅시다!

9.1 배포 준비하기

배포하기 전에 몇 가지 준비가 필요해요:

1. 환경 변수 설정하기
2. 의존성 목록 만들기
3. 프로덕션 데이터베이스 설정하기
4. WSGI 서버 설정하기

먼저 requirements.txt 파일을 업데이트해볼게요:

# 가상환경에서 다음 명령어 실행
pip freeze > requirements.txt
    

이제 .env 파일을 만들어 환경 변수를 설정해볼게요:

SECRET_KEY=your-super-secret-key-here
DATABASE_URL=sqlite:///app.db
MAIL_SERVER=smtp.gmail.com
MAIL_PORT=587
MAIL_USE_TLS=1
MAIL_USERNAME=your-email@gmail.com
MAIL_PASSWORD=your-email-password
MAIL_DEFAULT_SENDER=your-email@gmail.com
    

실제 배포 시에는 SQLite 대신 PostgreSQL 같은 프로덕션용 데이터베이스를 사용하는 것이 좋아요.

9.2 Heroku에 배포하기

Heroku는 초보자도 쉽게 배포할 수 있는 클라우드 플랫폼이에요. 다음 단계를 따라 배포해볼게요:

1. Heroku 계정 만들기 (https://signup.heroku.com/)
2. Heroku CLI 설치하기 (https://devcenter.heroku.com/articles/heroku-cli)
3. 프로젝트 루트에 Procfile 만들기

Procfile 내용:

web: gunicorn run:app
    

이제 requirements.txt에 gunicorn을 추가해주세요:

pip install gunicorn
pip freeze > requirements.txt
    

이제 Heroku에 배포해볼게요:

# Heroku 로그인
heroku login

# 앱 생성
heroku create your-survey-app-name

# Git 저장소 초기화 (아직 안 했다면)
git init
git add .
git commit -m "Initial commit"

# Heroku에 푸시
git push heroku master

# 데이터베이스 마이그레이션
heroku run flask db upgrade

# 앱 열기
heroku open
    

환경 변수도 설정해주세요:

heroku config:set SECRET_KEY=your-super-secret-key-here
heroku config:set MAIL_SERVER=smtp.gmail.com
heroku config:set MAIL_PORT=587
heroku config:set MAIL_USE_TLS=1
heroku config:set MAIL_USERNAME=your-email@gmail.com
heroku config:set MAIL_PASSWORD=your-email-password
heroku config:set MAIL_DEFAULT_SENDER=your-email@gmail.com
    

이제 여러분의 설문조사 시스템이 인터넷에 공개되었어요! 🎉

9.3 PythonAnywhere에 배포하기

Heroku 외에도 PythonAnywhere라는 플랫폼도 있어요. 이 플랫폼은 Python 앱 배포에 특화되어 있고, 무료 티어도 제공해요.

1. PythonAnywhere 계정 만들기 (https://www.pythonanywhere.com/)
2. Bash 콘솔 열기
3. 가상환경 설정 및 코드 가져오기

PythonAnywhere Bash 콘솔에서 다음 명령어를 실행해주세요:

# 코드 클론 (GitHub에 올려놨다면)
git clone https://github.com/yourusername/your-survey-app.git

# 또는 ZIP 파일로 업로드 후 압축 해제
unzip your-survey-app.zip

# 디렉토리 이동
cd your-survey-app

# 가상환경 생성 및 활성화
python -m venv venv
source venv/bin/activate

# 패키지 설치
pip install -r requirements.txt
    

이제 PythonAnywhere 웹 인터페이스에서 'Web' 탭으로 이동해 새 웹 앱을 설정해주세요:

1. 'Add a new web app' 클릭
2. 'Manual configuration' 선택
3. Python 버전 선택 (3.8 이상)
4. 가상환경 경로 입력: /home/yourusername/your-survey-app/venv
5. WSGI 파일 수정 (제공된 링크 클릭)

WSGI 파일을 다음과 같이 수정해주세요:

import sys
import os

path = '/home/yourusername/your-survey-app'
if path not in sys.path:
    sys.path.append(path)

from dotenv import load_dotenv
load_dotenv(os.path.join(path, '.env'))

from run import app as application
    

환경 변수는 .env 파일을 만들어 설정하거나, PythonAnywhere의 'Web' 탭에서 'Environment variables' 섹션에 추가할 수 있어요.

마지막으로 'Reload' 버튼을 클릭해 앱을 시작하세요!

9.4 도메인 연결 및 HTTPS 설정

실제 서비스로 운영하려면 커스텀 도메인과 HTTPS를 설정하는 것이 좋아요:

1. 도메인 구매 (Namecheap, GoDaddy 등)
2. DNS 설정 (호스팅 업체 지침 참조)
3. SSL 인증서 설정 (Let's Encrypt 추천)

Heroku에서는 다음과 같이 커스텀 도메인을 연결할 수 있어요:

heroku domains:add www.yourdomain.com
    

그런 다음 도메인 제공업체의 DNS 설정에서 CNAME 레코드를 추가해주세요:

www.yourdomain.com -> your-app-name.herokuapp.com
    

Heroku의 유료 플랜을 사용하면 자동으로 SSL 인증서를 관리해줘요:

heroku certs:auto:enable
    

이제 여러분의 설문조사 시스템이 전문적인 도메인과 보안 연결로 운영되고 있어요! 👏

10. 확장 및 커스터마이징 아이디어 💡

기본 설문조사 시스템을 완성했지만, 여기서 더 발전시킬 수 있는 아이디어가 많아요! 여러분만의 독특한 기능을 추가해보세요.

10.1 추가 기능 아이디어

다음은 여러분의 설문조사 시스템을 더 멋지게 만들 수 있는 아이디어들이에요:

1. 테마 커스터마이징: 사용자가 설문의 색상, 폰트 등을 변경할 수 있게 해보세요
2. 분기 로직: 이전 질문의 응답에 따라 다른 질문을 보여주는 기능
3. 파일 업로드: 응답자가 이미지나 문서를 업로드할 수 있는 질문 유형 추가
4. 소셜 로그인: Google, Facebook 등으로 로그인할 수 있는 기능
5. 응답 제한: IP 주소나 이메일로 중복 응답 방지
6. 설문 템플릿: 자주 사용되는 설문 유형의 템플릿 제공
7. 고급 분석: 응답 데이터의 상관관계 분석, 세그먼트별 필터링 등
8. 알림 시스템: 새 응답이 들어오면 이메일이나 푸시 알림 전송
9. 협업 기능: 여러 사용자가 함께 설문을 편집할 수 있는 기능
10. API 제공: 외부 서비스와 연동할 수 있는 API 개발

이런 기능들을 추가하면 여러분의 설문조사 시스템이 상용 서비스와 견줄 만한 수준이 될 거예요! 그리고 이런 개발 경험은 재능넷 같은 플랫폼에서 Python 웹 개발 관련 재능을 판매할 때 좋은 포트폴리오가 될 수 있어요.

10.2 코드 최적화 및 리팩토링

실제 서비스로 운영하려면 코드 최적화도 중요해요:

1. 캐싱 도입: Redis나 Memcached를 사용해 자주 접근하는 데이터 캐싱
2. 비동기 작업: Celery 같은 도구로 이메일 전송 등의 작업을 비동기로 처리
3. 데이터베이스 인덱싱: 자주 조회하는 필드에 인덱스 추가
4. 페이지네이션: 대량의 데이터를 페이지 단위로 나눠 로딩
5. 테스트 코드 작성: 단위 테스트와 통합 테스트로 안정성 확보

이런 최적화는 사용자가 많아질수록 더 중요해져요!

10.3 수익화 방안

여러분의 설문조사 시스템으로 수익을 창출하는 방법도 있어요:

1. 프리미엄 플랜: 기본 기능은 무료, 고급 기능은 유료로 제공
2. 응답 수 제한: 무료 플랜은 월 100개 응답까지, 그 이상은 유료
3. 화이트 라벨: 기업이 자사 브랜드로 서비스를 이용할 수 있게 제공
4. 설문 템플릿 마켓플레이스: 전문가가 만든 템플릿 판매
5. API 사용료: 외부 서비스 연동을 위한 API 사용료 부과

이런 비즈니스 모델을 적용하면 취미 프로젝트를 실제 수익원으로 발전시킬 수 있어요!

10.4 마무리

이제 여러분은 Python과 Flask를 사용해 완전한 설문조사 시스템을 만드는 방법을 배웠어요! 🎉

이 프로젝트를 통해 다음과 같은 기술을 익혔어요:

1. Flask 웹 프레임워크 사용법
2. SQLAlchemy를 이용한 데이터베이스 모델링
3. 사용자 인증 시스템 구현
4. 동적 폼 처리
5. 데이터 시각화
6. 웹 애플리케이션 배포

이 모든 기술은 다양한 웹 애플리케이션 개발에 활용할 수 있는 귀중한 자산이에요! 이제 여러분만의 아이디어를 추가해 더 멋진 서비스로 발전시켜보세요.

Python 웹 개발은 정말 재미있고 무궁무진한 가능성이 있는 분야예요. 이 튜토리얼이 여러분의 개발 여정에 도움이 되었길 바랍니다! 😊

혹시 이런 개발 스킬을 더 발전시키고 싶다면, 재능넷 같은 플랫폼에서 다양한 Python 웹 개발 관련 재능을 찾아보는 것도 좋은 방법이에요. 다른 개발자들의 노하우를 배우고, 나중에는 여러분도 자신만의 재능을 공유할 수 있을 거예요!