Flask-WTF는 Flask 애플리케이션에서 웹 폼을 빠르게 구성할 수 있는 확장으로, 폼 요소들을 그릴 때 스타일을 설정하는 방법을 제공합니다. 기본적으로 Flask-WTF는 Bootstrap 스타일을 사용하며, 이를 커스터마이징하는 방법을 알아보겠습니다.

우선, Flask-WTF의 폼 클래스에서 필요한 필드를 정의합니다. 예를 들어, 회원 가입 폼에서 이름과 이메일을 입력받는다고 가정해봅시다. 이를 나타내는 Flask-WTF 폼 클래스는 다음과 같을 수 있습니다:

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Email

class SignupForm(FlaskForm):
    name = StringField('이름', validators=[DataRequired()])
    email = StringField('이메일', validators=[DataRequired(), Email()])
    submit = SubmitField('가입')

이 폼 클래스에서 StringField를 사용하여 문자열 입력 필드를 생성하고, SubmitField를 사용하여 제출 버튼을 생성했습니다. validators 매개변수를 통해 필드 유효성을 검사할 수 있습니다.

이제, 폼을 렌더링하기 위해 Flask 템플릿을 생성합니다. 예를 들어 signup.html 파일을 생성하고, 다음과 같이 폼을 렌더링할 수 있습니다:

<form method="POST" action="{{ url_for('signup') }}">
    {{ form.csrf_token }}
    <div class="form-group">
        <label for="{{ form.name.id }}">{{ form.name.label }}</label>
        {{ form.name(class="form-control") }}
        {% for error in form.name.errors %}
            <span class="text-danger">{{ error }}</span>
        {% endfor %}
    </div>

    <div class="form-group">
        <label for="{{ form.email.id }}">{{ form.email.label }}</label>
        {{ form.email(class="form-control") }}
        {% for error in form.email.errors %}
            <span class="text-danger">{{ error }}</span>
        {% endfor %}
    </div>

    {{ form.submit(class="btn btn-primary") }}
</form>

이 템플릿에서는 Bootstrap의 form-control 클래스를 사용하여 폼 요소의 스타일을 설정하고 있습니다. form.name(class="form-control")의 형태로 클래스를 지정할 수 있으며, class 매개변수를 통해 다른 스타일 클래스를 적용할 수도 있습니다.

위와 같이 설정하면, Flask-WTF는 지정한 스타일로 폼 요소를 렌더링합니다. 이를 적용하려면 Flask 애플리케이션에서 render_template 함수를 사용하여 템플릿을 렌더링하면 됩니다.

추가적인 스타일 변경이 필요할 경우, Bootstrap의 클래스 및 CSS 속성을 사용하여 원하는 스타일을 지정할 수 있습니다. 자세한 내용은 Bootstrap 문서를 참조하시기 바랍니다.

참고 자료:

• Flask-WTF 공식 문서: https://flask-wtf.readthedocs.io/en/0.14.x/
• WTForms 공식 문서: https://wtforms.readthedocs.io/en/2.3.x/
• Bootstrap 문서: https://getbootstrap.com/