교회 홈페이지 무료 제작 매뉴얼 Chapter 4. 테마 선택과 적용

교회 홈페이지 무료 제작 매뉴얼

Chapter 4. 테마 선택과 적용 — 사이트에 디자인 입히기

이 챕터는 약 40–50분이 소요됩니다.
이 챕터를 마치면 디자인이 입혀진 실제 사이트 모습을 처음으로 볼 수 있습니다.

목차

이 챕터에서 할 일

단계 작업 소요 시간
STEP 1 Hugo 테마 개념 이해 5분
STEP 2 교회에 어울리는 테마 선택 5분
STEP 3 선택한 테마 다운로드 5분
STEP 4 hugo.toml에 테마 등록 및 기본 설정 15분
STEP 5 테마 확인용 첫 번째 콘텐츠 작성 5분
STEP 6 로컬 미리보기로 결과 확인 5분
STEP 7 변경사항 커밋 3분

🏁 이 챕터의 체크포인트

브라우저에서 http://localhost:1313 에 접속했을 때 테마 디자인이 적용된 사이트가 보인다.

STEP 1. Hugo 테마란 무엇인가

🎯 무엇을 위한 작업인가?

테마를 설치하기 전에 테마가 무엇인지 이해합니다. 개념을 알고 설치하면 나중에 문제가 생겼을 때 어디를 봐야 할지 알 수 있습니다.

1-1. 테마의 역할

Hugo에서 테마(Theme) 는 사이트의 겉모습 전체를 담당하는 디자인 패키지입니다.

여러분이 작성하는 설교 파일이나 교회 소식 파일은 “내용”입니다. 테마는 그 내용을 어떻게 보여줄 것인가를 결정합니다.

💡 비유로 이해하기: 테마는 교회 주보의 “양식”과 같습니다. 매주 내용(설교 제목, 광고)은 바뀌지만 주보의 레이아웃, 글꼴, 색상은 그대로 유지됩니다. 테마도 마찬가지입니다. 글은 매주 바뀌지만 디자인은 유지됩니다.

1-2. Hugo 테마 생태계

Hugo 공식 테마 갤러리에는 현재 400개 이상의 무료 테마가 등록되어 있습니다.

이 사이트에서 다양한 테마의 미리보기를 볼 수 있습니다. 단, 교회 홈페이지에 바로 쓸 수 있는 것과 그렇지 않은 것을 구분하는 안목이 필요합니다. STEP 2에서 교회 홈페이지에 어울리는 테마를 추려드립니다.

1-3. 테마 설치 방식

이 매뉴얼에서는 Git 서브모듈(Submodule) 방식으로 테마를 설치합니다. 이 방식의 장점은 다음과 같습니다.

  • 테마 제작자가 버그를 수정하거나 새 기능을 추가하면 명령어 한 줄로 업데이트 가능
  • 내 저장소에 테마 파일이 직접 들어가지 않아 용량 절감
  • GitHub에서도 테마 출처가 명확히 표시됨

STEP 2. 테마 선택하기

🎯 무엇을 위한 작업인가?

수백 개의 테마 중에서 교회 홈페이지에 어울리는 테마를 고릅니다. 이 매뉴얼에서는 초보자가 설정하기 쉽고, 한국어 콘텐츠와 잘 맞으며, 유지보수가 활발한 테마를 추려 소개합니다.

2-1. 추천 테마 비교표

테마 난이도 특징 교회 적합성 GitHub 별 수
PaperMod ★ 추천 쉬움 깔끔·빠름·글 중심 ⭐⭐⭐⭐⭐ 10,000+
Congo 보통 모던·고급스러움·기능 풍부 ⭐⭐⭐⭐ 1,500+
Anatole 보통 좌우 분할·사진 강조·감성적 ⭐⭐⭐ 600+
Ananke 쉬움 Hugo 공식 기본 테마·단순 ⭐⭐⭐ 900+

2-2. 각 테마 상세 소개

🥇 PaperMod — 이 매뉴얼의 기본 추천

미리보기: https://adityatelange.github.io/hugo-PaperMod/

🥈 Congo — 고급스러운 느낌을 원할 때

미리보기: https://jpanther.github.io/congo/

🥉 Anatole — 감성적인 사진 중심 사이트를 원할 때

미리보기: https://themes.gohugo.io/themes/anatole/

2-3. 이 매뉴얼의 선택

이 매뉴얼에서는 PaperMod 를 기준으로 설명합니다.

다른 테마를 선택해도 STEP 3 이후의 흐름(설치 → 등록 → 설정)은 동일합니다. 다만 hugo.toml 설정 항목 이름이 테마마다 다를 수 있으므로, 다른 테마를 선택했다면 해당 테마의 공식 문서를 함께 참고하세요.

STEP 3. 테마 다운로드하기

🎯 무엇을 위한 작업인가?

선택한 테마 파일을 내 프로젝트의 themes/ 폴더 안으로 가져옵니다. Git 서브모듈 방식을 사용하므로, 테마 파일이 직접 복사되는 것이 아니라 원본 저장소와 연결 고리가 만들어집니다.

3-1. 작업 폴더로 이동 확인

VS Code 내장 터미널을 열고 (Ctrl+`), 현재 위치가 church-website 폴더인지 확인합니다.

올바른 출력:

다른 위치라면 이동합니다.

3-2. PaperMod 테마 다운로드

아래 명령어를 VS Code 내장 터미널에 복사·붙여넣기 후 엔터:

💡 명령어 설명:

  • git submodule add : 외부 Git 저장소를 내 프로젝트에 연결해라
  • -depth=1 : 최신 버전만 가져와라 (전체 이력을 받지 않아 빠름)
  • https://github.com/... : PaperMod 테마의 GitHub 주소
  • themes/PaperMod : 내 프로젝트의 이 폴더에 저장해라

진행 중 화면:

완료 후 VS Code 탐색기에서 themes/PaperMod 폴더가 생겼는지 확인합니다.

3-3. 서브모듈 초기화 확인

성공 시 출력:

또는 아무 메시지 없이 프롬프트가 돌아오면 정상입니다.

⚠️ 인터넷 연결이 필요합니다. 테마 파일을 GitHub에서 내려받기 때문에 이 단계에서는 인터넷이 연결되어 있어야 합니다.

STEP 4. 테마 등록 및 기본 설정

🎯 무엇을 위한 작업인가?

다운로드한 테마를 Hugo에게 “이 테마를 사용하겠다”고 알리고, 사이트의 메뉴와 기본 정보를 설정합니다. 이 단계가 가장 중요하고 내용이 많지만, 한 번 설정해두면 이후에는 거의 바꿀 일이 없습니다.

4-1. hugo.toml 전체 교체

VS Code 탐색기에서 hugo.toml 파일을 클릭해 열고, 기존 내용 전체를 삭제한 뒤 아래 내용을 붙여넣습니다.

꺽쇠(< >) 안의 내용만 본인 정보로 바꾸세요.

4-2. 반드시 수정할 항목

항목 위치 수정 내용
baseURL 줄 Chapter 2에서 만든 GitHub 아이디
<교회이름> title 줄 실제 교회 이름 (예: 은혜교회)
<교회이름> homeInfoParams.Content 줄 홈 화면 인사말에 들어갈 교회 이름

수정 예시:

4-3. 파일 저장

수정 완료 후 저장합니다.

  • Windows: Ctrl+S
  • Mac: Cmd+S

STEP 5. 첫 번째 콘텐츠 만들기

🎯 무엇을 위한 작업인가?

테마를 설치하고 설정을 마쳤어도, 보여줄 글이 하나도 없으면 홈 화면이 비어 보입니다. 테마가 제대로 작동하는지 확인하기 위해 간단한 테스트 글을 만들어 봅니다. 이 글은 나중에 실제 내용으로 교체하거나 삭제할 수 있습니다.

5-1. 첫 번째 글 파일 생성

VS Code 내장 터미널에서:

💡 명령어 설명:

  • hugo new content : Hugo 양식에 맞는 새 글 파일을 만들어라
  • sermons/첫번째설교.md : content/sermons/ 폴더 안에 첫번째설교.md 이름으로 만들어라

성공 시 출력:

5-2. 글 파일 내용 작성

VS Code 탐색기에서 content → sermons → 첫번째설교.md 파일 클릭 후 아래 내용으로 수정합니다.

생성된 파일을 열면 위쪽에 ---로 둘러싸인 기본 정보(Front Matter)가 보입니다. 이것을 아래와 같이 수정하고 본문을 추가하세요.

⚠️ draft: false 로 설정해야 발행된 글로 인식됩니다.
draft: true 상태에서는 hugo server -D 실행 시에만 보이고, 실제 배포 시에는 나타나지 않습니다.

파일 저장: Ctrl+S (Windows) / Cmd+S (Mac)

STEP 6. 로컬 미리보기로 결과 확인

🎯 무엇을 위한 작업인가?

지금까지의 작업 결과를 브라우저에서 직접 눈으로 확인합니다. 테마 디자인이 적용된 사이트가 처음 보이는 순간입니다.

6-1. Hugo 서버 실행

VS Code 내장 터미널에서:

성공 시 출력:

💡 Pages 숫자가 1 이상이고 오류 메시지 없이 Built in 줄이 보이면 성공입니다.

6-2. 브라우저에서 확인

브라우저 주소창에 입력:

확인해야 할 항목:

6-3. 각 메뉴 클릭 확인

상단 메뉴의 각 항목을 클릭해보세요. 아직 해당 페이지의 콘텐츠 파일이 없기 때문에 “404 Page Not Found” 또는 빈 목록이 나타납니다. 이것은 정상입니다. 콘텐츠는 Chapter 6–8에서 채워갑니다.

6-4. 실시간 수정 체험 (선택)

테마의 실시간 반영 기능을 체험해봅니다.

  1. VS Code에서 content/sermons/첫번째설교.md 열기
  2. 제목(title)을 임시로 다른 이름으로 변경 후 저장
  3. 브라우저 확인 → 저장 즉시 자동 반영됨

이처럼 파일을 저장할 때마다 수정 결과를 즉시 확인할 수 있습니다.

확인 후 원래 내용으로 돌려놓고 저장하세요.

6-5. 서버 종료

다음 단계를 위해 서버를 종료합니다.

터미널에서 Ctrl+C

STEP 7. 변경사항 커밋하기

🎯 무엇을 위한 작업인가?

테마 설치와 설정 작업을 Git에 저장합니다. 커밋해두면 이 상태로 언제든 돌아올 수 있습니다.

7-1. 현재 변경 상태 확인

예상 출력:

7-2. 전체 파일 스테이징 및 커밋

성공 시 출력:

💡 themes/PaperMod 옆에 일반 파일과 다른 160000 이라는 숫자가 보입니다. 이것은 서브모듈임을 나타내는 Git의 특수 파일 모드입니다. 정상입니다.

최종 확인 및 체크리스트

최종 폴더 구조 확인

이 챕터를 마쳤을 때 church-website 폴더의 주요 구조:

✅ 최종 체크리스트

모든 항목이 체크되었다면 Chapter 5(GitHub 연결과 첫 배포) 로 이동할 준비 완료입니다! 🎉

📖 용어 해설

테마 (Theme)

Hugo 사이트의 겉모습(디자인)을 담당하는 파일 묶음입니다. 글꼴, 색상, 레이아웃, 메뉴 위치 등 시각적인 요소를 모두 포함합니다. 내용(content/)과 디자인(themes/)을 분리해두는 것이 Hugo의 핵심 개념입니다.

Git 서브모듈 (Submodule)

내 Git 저장소 안에 다른 Git 저장소를 연결하는 기능입니다. 테마를 서브모듈로 추가하면 테마 파일 전체가 내 저장소에 복사되지 않고, “어느 저장소의 어느 버전을 쓴다”는 링크 정보만 저장됩니다. 나중에 git submodule update --remote 명령어로 테마를 최신 버전으로 업데이트할 수 있습니다.

.gitmodules

서브모듈 정보를 기록하는 파일입니다. git submodule add 명령어 실행 시 자동으로 생성됩니다. 직접 편집할 일은 없습니다.

Front Matter

Markdown 파일 맨 위에 ---로 둘러싸인 영역입니다. 글의 제목, 작성일, 발행 여부 등 글의 메타데이터를 담습니다. Hugo는 이 정보를 읽어서 글 목록 정렬, 날짜 표시 등에 활용합니다.

draft: true / false

글의 발행 여부를 결정하는 설정입니다. true이면 임시저장 상태로 hugo server -D 에서만 보이고 실제 배포 시에는 숨겨집니다. false이면 발행 상태로 누구나 볼 수 있습니다.

[[menu.main]]

hugo.toml에서 상단 메뉴를 추가하는 설정 블록입니다. [[...]](이중 대괄호)은 TOML에서 배열 안의 항목을 뜻합니다. 메뉴를 추가하려면 이 블록을 하나 더 복사해서 붙여넣으면 됩니다.

weight

메뉴나 글의 순서를 지정하는 숫자입니다. 숫자가 작을수록 앞에 나타납니다. weight = 1이 가장 앞, weight = 10이 뒤쪽입니다.

[params]

hugo.toml에서 테마별 추가 설정을 넣는 섹션입니다. 어떤 항목을 쓸 수 있는지는 각 테마의 공식 문서에서 확인할 수 있습니다.

[outputs]

Hugo가 생성할 출력 형식을 지정합니다. HTML은 일반 웹 페이지, RSS는 구독 피드, JSON은 검색 기능에 필요한 데이터 파일입니다.

PaperMod

Aditya Telange가 만든 Hugo 테마입니다. 깔끔한 디자인, 빠른 속도, 풍부한 문서화로 Hugo 테마 중 가장 많이 사용됩니다. 공식 GitHub: github.com/adityatelange/hugo-PaperMod

💡 초보자 Tips

Tip 1. 테마 설치 후 화면이 여전히 비어 있다면

hugo.toml에서 theme = "PaperMod" 줄이 정확히 입력되었는지, 따옴표까지 맞는지 확인하세요. 테마 이름은 대소문자를 구분합니다. papermod나 paperMod가 아닌 정확히 PaperMod여야 합니다.

Tip 2. 메뉴 이름을 바꾸고 싶을 때

hugo.toml의 [[menu.main]] 블록에서 name만 바꾸면 됩니다. url은 실제 폴더 경로와 연결되므로 바꾸지 않는 것이 좋습니다.

Tip 3. 메뉴를 추가하고 싶을 때

[[menu.main]] 블록을 통째로 복사해서 아래에 붙여넣고 name, url, weight만 바꾸면 됩니다.

Tip 4. 홈 화면 인사말 줄바꿈 방법

homeInfoParams.Content 에서 줄을 바꾸고 싶으면 \n을 사용합니다.

또는 큰따옴표 세 개(""")로 감싸면 여러 줄을 자연스럽게 쓸 수 있습니다.

Tip 5. 테마 공식 문서는 항상 열어두세요

PaperMod의 모든 설정 항목 목록은 아래 주소에서 확인할 수 있습니다.

“이런 기능도 있을까?”라는 궁금증이 생기면 이 문서를 먼저 찾아보세요. Antigravity CLI에게 설정을 요청할 때도 이 문서에서 항목 이름을 확인하면 더 정확한 지시를 내릴 수 있습니다.

Tip 6. 다크 모드 기본값 설정

방문자가 처음 사이트에 접속할 때 다크 모드로 보이게 하고 싶다면 hugo.toml [params] 섹션에 추가:

🎓 전문가의 제언

제언 1. 테마를 중간에 바꾸는 것은 상당한 작업입니다

Hugo 테마는 각자 고유한 설정 구조를 가지고 있습니다. 처음 선택한 테마로 사이트를 어느 정도 완성한 뒤 다른 테마로 바꾸려면, hugo.toml의 [params] 설정을 새 테마 방식에 맞게 처음부터 다시 작성해야 합니다. 또한 일부 콘텐츠 파일의 Front Matter도 수정해야 할 수 있습니다. 처음 선택을 신중하게 하는 것이 나중의 수고를 줄입니다.

제언 2. themes/ 폴더 안 파일을 직접 수정하지 마세요

테마 파일을 직접 수정하면 나중에 git submodule update --remote로 테마를 업데이트할 때 충돌이 발생합니다. 테마를 커스터마이징하고 싶다면 루트의 layouts/ 폴더에 같은 이름의 파일을 만들어 “덮어쓰기(Override)” 방식을 사용해야 합니다. 이 방식은 테마를 업데이트해도 수정 내용이 유지됩니다. 자세한 방법은 Chapter 9(Antigravity CLI로 디자인 커스터마이징)에서 다룹니다.

제언 3. --depth=1의 의미와 한계

git submodule add --depth=1은 테마의 전체 커밋 이력 대신 최신 버전만 내려받습니다. 다운로드 속도가 빠르고 용량이 작은 장점이 있습니다. 단, 테마의 특정 과거 버전으로 되돌아가야 할 일이 생기면 제약이 있습니다. 교회 홈페이지 수준에서는 이 제약이 문제가 될 일이 거의 없으므로 --depth=1을 사용하는 것이 권장됩니다.

제언 4. 테마 업데이트는 주기적으로

Hugo와 PaperMod는 계속 업데이트됩니다. 분기에 한 번 정도 아래 명령어로 테마를 최신 버전으로 업데이트하는 것을 권장합니다.

업데이트 후 hugo server -D를 실행해서 깨진 부분이 없는지 확인하고, 문제가 없으면 커밋합니다.

제언 5. 한국어 폰트 최적화 (나중에 적용)

PaperMod의 기본 폰트는 영문 최적화 폰트입니다. 교회 홈페이지에 한국어 콘텐츠가 많다면 Noto Sans KR, Pretendard 같은 한국어 전용 웹 폰트를 적용하면 가독성이 크게 향상됩니다. 방법은 Chapter 9에서 Antigravity CLI를 활용한 커스터마이징 예시로 다룹니다.

❓ FAQ

Q1. 테마를 다운로드할 때 인터넷 오류가 났어요

네트워크 일시 오류일 수 있습니다. 잠시 후 다시 시도하세요. 반복 오류가 나면 GitHub에서 직접 ZIP 파일로 내려받는 방법도 있습니다. 단, 이 경우 서브모듈이 아닌 수동 복사 방식이 되어 나중에 업데이트가 불편해집니다.

Q2. hugo server 실행 시 “theme not found” 오류가 나요

hugo.toml의 theme 값과 themes/ 폴더 안의 폴더 이름이 정확히 일치하는지 확인하세요. 대소문자를 구분합니다.

두 이름이 다르면 오류가 납니다.

Q3. 메뉴가 너무 많아서 모바일에서 잘려요

PaperMod는 메뉴가 너무 많으면 모바일에서 햄버거 메뉴(≡)로 자동 전환됩니다. 메뉴가 6개 이하면 대부분 정상 표시됩니다. 그래도 문제가 있다면 메뉴 항목을 줄이거나 Antigravity CLI에게 “모바일 메뉴를 가로 스크롤 방식으로 바꿔줘”라고 요청하세요.

Q4. 홈 화면 인사말이 보이지 않아요

hugo.toml에서 homeInfoParams.Title과 homeInfoParams.Content 설정이 [params] 섹션 안에 있는지 확인하세요. [params] 바깥에 있으면 인식되지 않습니다.

Q5. git commit 실행 시 .gitmodules 파일도 포함되어야 하나요?

네, 포함되어야 합니다. .gitmodules 파일은 서브모듈 정보를 담고 있어서 나중에 다른 컴퓨터에서 저장소를 내려받을 때 테마를 자동으로 복원하는 데 필요합니다. git add .으로 전체를 추가하면 자동으로 포함됩니다.

Q6. 다른 테마를 사용하면 hugo.toml 설정이 많이 달라지나요?

테마마다 [params] 안의 항목 이름이 다릅니다. 하지만 baseURL, title, theme, [[menu.main]] 같은 Hugo 기본 설정은 모든 테마에서 동일하게 사용합니다. 다른 테마를 선택했다면 해당 테마 공식 문서의 “Configuration(설정)” 항목을 찾아서 [params] 부분만 교체하면 됩니다.

Q7. 서브모듈 방식 대신 테마를 직접 복사하면 안 되나요?

기술적으로는 가능합니다. 하지만 두 가지 단점이 있습니다. 첫째, 나중에 테마를 업데이트하려면 전체 파일을 다시 내려받아 복사해야 합니다. 둘째, GitHub 저장소 용량이 불필요하게 커집니다. 서브모듈 방식을 권장합니다.

다음 챕터 예고

Chapter 5. GitHub 연결과 첫 배포 — 인터넷에 사이트 올리기

  • GitHub에 사용자이름.github.io 저장소 만들기
  • 로컬 프로젝트와 GitHub 저장소 연결하기
  • GitHub Actions 자동 배포 워크플로우 설정
  • 첫 push 후 배포 진행 상황 확인하기
  • 실제 인터넷 주소로 내 사이트 접속하기

이 매뉴얼은 2026년 5월 기준으로 작성되었습니다.Hugo 및 PaperMod 버전 업데이트에 따라 일부 설정 항목이나 출력 메시지가 달라질 수 있습니다.

Similar Posts