사용자에게 보여지는 화면, 템플릿(Templates) 구현하기

사용자에게 보여지는 화면, 템플릿(Templates) 구현하기

플라스크 튜토리얼의 네 번째 단계인 Templates에서는 지난 단계에서 만든 인증 로직(View)을 사용자가 실제로 보고 조작할 수 있도록 HTML 화면을 구성하는 방법을 다룹니다. 플라스크는 Jinja2라는 강력한 템플릿 엔진을 사용하여 정적인 HTML에 동적인 데이터를 결합합니다.

---

1. 기본 레이아웃 (Base Layout) 정의

모든 페이지에서 공통적으로 사용하는 구조(헤더, 네비게이션, 푸터 등)를 base.html에 작성합니다. 이렇게 하면 각 페이지를 만들 때마다 중복된 코드를 적을 필요가 없습니다.

• flaskr/templates/base.html: 전체 웹사이트의 뼈대입니다.
• {% block ... %}: 자식 템플릿(회원가입, 로그인 페이지 등)이 각자의 내용을 채워 넣을 수 있는 '구멍' 역할을 합니다.
• g.user: 이전에 작성한 load_logged_in_user 덕분에, 로그인이 되어 있다면 페이지 상단에 사용자 이름과 로그아웃 버튼을 보여줄 수 있습니다.

---

2. 회원가입 및 로그인 화면 만들기

실제 사용자가 정보를 입력할 폼(Form)을 작성합니다. 블루프린트 구조에 맞춰 폴더를 나누어 관리하는 것이 관례입니다.

• flaskr/templates/auth/register.html: 사용자 이름과 비밀번호를 입력받는 폼입니다.
• flaskr/templates/auth/login.html: 로그인 폼입니다.
• url_for: HTML 내에서도 url_for('auth.register')와 같이 사용하여 링크 주소를 동적으로 생성합니다.

---

3. 진자(Jinja) 템플릿의 주요 문법

HTML 안에서 파이썬과 유사한 로직을 사용할 수 있게 해주는 문법들입니다.

문법	이름	설명
{{ ... }}	표현식 (Expression)	변수의 값을 출력할 때 사용 (예: {{ g.user['username'] }})
{% ... %}	제어문 (Statement)	if문, for문 등 로직을 실행할 때 사용
{# ... #}	주석 (Comment)	브라우저에는 보이지 않는 템플릿 전용 주석
get_flashed_messages()	메시지 출력	뷰 함수에서 flash()로 보낸 에러 메시지 등을 화면에 띄웁니다.

---

4. 스타일링 (CSS 적용)

단순한 HTML은 보기 투박하므로, static 폴더에 CSS 파일을 넣어 디자인을 입힙니다. 플라스크는 flaskr/static/style.css 경로의 파일을 자동으로 인식하도록 설정할 수 있습니다.

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

---

5. 실전 팁: 템플릿 상속의 장점

템플릿 상속({% extends "base.html" %})을 사용하면 다음과 같은 이점이 있습니다.

• 유지보수 용이: 메뉴 바의 이름을 바꾸고 싶을 때 base.html 한 곳만 수정하면 모든 페이지에 반영됩니다.
• 코드 가독성: 개별 페이지(register, login)는 오직 자신만의 고유한 내용에만 집중할 수 있어 코드가 깔끔해집니다.

---

Official Flask Tutorial: Templates
진자 템플릿의 상속 개념은 플라스크뿐만 아니라 장고(Django) 등 다른 프레임워크에서도 널리 쓰이는 중요한 개념입니다. {% block content %}을 어떻게 활용하는지 중점적으로 살펴보세요.