4편 — 템플릿 = HTML에 데이터 끼우기

Question

📚 연재 시리즈 AI가 짜준 Django, 이제 알고 씁니다 5 / 5

🎬 지난 이야기

3편에서는 URL 안내판이 가리키는 담당자(View) 를 뜯어봤습니다. View 함수가 DB에서 질문 목록을 꺼내 render()로 넘겨주는 것까지 확인했죠. 그런데 그 데이터, 정확히 어디에 어떻게 꽂히는 걸까요? 오늘은 바로 그 목적지, 템플릿을 뜯어봅니다.

혹시 이런 경험 있으신가요? AI가 만들어준 HTML 파일을 열어봤더니 {{ question.subject }}나 {% for question in question_list %}같은 이상한 문자들이 잔뜩 섞여 있어서 "이게 HTML이야, 뭐야?" 싶었던 순간.

또는 분명히 View에서 데이터를 넘겨줬는데 브라우저에는 아무것도 안 뜨거나, 반대로 {{ question.subject }}라는 텍스트가 그대로 화면에 출력되어서 당황했던 경험. 왜 어떤 건 값으로 바뀌고 어떤 건 그냥 문자로 남는 걸까요? 오늘 그 원리를 통역해드립니다.

🤖 AI가 짜준 코드

프롬프트: "질문 목록을 반복 출력하는 Django 템플릿 만들어줘"

<!-- pybo/templates/pybo/question_list.html -->
<!DOCTYPE html>
<html>
<body>
  <ul>
    {% for question in question_list %}
      <li>{{ question.subject }}</li>
    {% endfor %}
  </ul>
</body>
</html>

3편에서 본 View 코드도 함께 봐야 연결이 됩니다.

# pybo/views.py
def index(request):
    question_list = Question.objects.order_by('-create_date')
    context = {'question_list': question_list}
    return render(request, 'pybo/question_list.html', context)

🔍 한 줄씩 통역

템플릿이란 무엇인가요?

붕어빵 틀을 생각해보세요. 틀의 모양(HTML 구조)은 항상 똑같지만, 안에 들어가는 재료(데이터)는 매번 다를 수 있죠. Django 템플릿은 바로 그 붕어빵 틀입니다. 고정된 HTML 뼈대 안에 구멍을 뚫어두고, Django가 거기에 실제 데이터를 끼워 넣는 방식입니다.

`{{ question.subject }}` — 이중 중괄호

{{ question.subject }}

이중 중괄호 {{ }}는 "여기 구멍에 값을 출력해줘" 라는 표시입니다. question은 3편의 View에서 넘겨준 데이터 객체이고, .subject는 그 객체의 제목 속성을 가져오는 것입니다. 편지 봉투에 이름 칸을 비워두고 나중에 이름을 채워 넣는 것과 같아요.

⚠️ 중괄호가 하나면({ }) Django가 인식하지 못합니다. 반드시 두 개씩 써야 합니다.

`{% for %} ~ {% endfor %}` — 퍼센트 중괄호

{% for question in question_list %}
  <li>{{ question.subject }}</li>
{% endfor %}

{% %}는 "여기서부터 어떤 동작을 수행해줘" 라는 명령 표시입니다. {{ }}가 값을 보여주는 창이라면, {% %}는 반복·조건 같은 로직을 실행하는 엔진이에요.

for question in question_list는 "question_list 안의 항목을 하나씩 꺼내 question이라고 부를게"라는 뜻입니다. 그리고 {% endfor %}는 반복의 끝을 알려주는 닫는 태그입니다. HTML 태그가 <ul>~</ul>로 열고 닫듯이, Django 태그도 반드시 {% endfor %}로 닫아줘야 합니다.

View → 템플릿 데이터 연결 고리

View의 context = {'question_list': question_list} 에서 따옴표 안의 키 이름('question_list')이 템플릿의 question_list와 정확히 일치해야 합니다. 이 연결 고리가 끊어지면 데이터가 아무것도 안 보입니다.

⚠️ 자주 깨지는 지점

① 이중 중괄호를 쓰지 않아 값이 그대로 출력될 때

브라우저에 {{ question.subject }}라는 텍스트가 그대로 보인다면, 파일이 템플릿으로 인식되지 않은 것입니다. settings.py의 TEMPLATES 설정에서 DIRS 또는 APP_DIRS가 올바르게 잡혀 있는지 확인하세요.

② context 키 이름이 달라서 아무것도 안 뜰 때

TemplateSyntaxError: 또는 그냥 빈 화면

View에서 context = {'questions': question_list}로 보냈는데 템플릿에서 question_list로 받으려 하면 데이터가 없는 것처럼 동작합니다. 에러도 안 나고 그냥 빈 화면이 나오기 때문에 찾기 까다롭습니다. View의 context 키와 템플릿의 변수 이름이 정확히 같은지 항상 먼저 확인하세요.

🎮 직접 해보기

현재 만들어진 질문 리스트 페이지에서 질문 개수도 함께 출력해보세요. 템플릿에 아래 한 줄을 <ul> 위에 추가해보는 것입니다.

<p>총 {{ question_list|length }}개의 질문이 있습니다.</p>

|length는 목록의 길이를 반환하는 Django 템플릿 필터입니다. 숫자가 정상적으로 출력되면 View → 템플릿 연결이 제대로 된 것입니다!

잘 안 된다면 어떤 화면이 나왔는지 캡처해서 테크창 Q&A 게시판에 질문해주세요. 함께 찾아드립니다. 🙌

⏭️ 다음 편 예고

질문 목록은 출력했으니, 이제 목록에서 특정 질문 하나를 클릭하면 상세 페이지로 이동하는 링크가 필요한데요 — URL에 숫자가 들어가는 /pybo/2/ 같은 주소는 어떻게 만드는 걸까요? 5편 「동적 URL = 주소에 데이터를 끼운다」에서 확인하세요.

📚 시리즈: AI가 짜준 Django, 이제 알고 씁니다 · 4편 (총 9편 중)
테크창 연구팀 | 인천대학교 창의인재개발학과 전공심화연구모임
본 칼럼은 AI 보조로 작성되었으며, 코드·예시는 학습용입니다.

T

techchang연구팀

2026년 09월 07일 10:00

시리즈 목차 전체 보기