|

교회 홈페이지 무료 제작 매뉴얼 Chapter 1. 왜, 무엇으로 만들까?

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

Chapter 1. 왜, 무엇으로 만들까? — 개념 이해와 도구 선택

이 매뉴얼은 HTML, CSS, JavaScript를 전혀 모르는 분도 읽을 수 있도록 작성되었습니다.
모르는 단어가 나오면 각 섹션 끝에 있는 [용어 해설] 을 먼저 확인하세요.

목차

1-1. 정적 사이트 생성기란 무엇인가?

웹사이트를 만드는 두 가지 방식

웹사이트를 만드는 방법은 크게 두 가지입니다.

방식 A — 동적 사이트 (Dynamic Site)

WordPress, 네이버 블로그, 티스토리 같은 방식입니다.

서버가 항상 켜져 있어야 하고, 데이터베이스가 필요하며, 비용이 발생합니다.

방식 B — 정적 사이트 (Static Site)

마치 인쇄된 책과 같습니다.

누가 열어봐도 같은 내용을 보여주며, 서버가 복잡한 계산을 할 필요가 없습니다.

정적 사이트 생성기(SSG)의 역할

정적 사이트 생성기(Static Site Generator, SSG) 는 이 변환 작업을 자동으로 해주는 도구입니다.

여러분이 할 일은 설교 내용이나 교회 소식을 메모장 수준의 간단한 형식(Markdown) 으로 작성하는 것뿐입니다. 나머지는 SSG가 처리합니다.

비유로 이해하기

교회 주보를 만드는 것과 비슷합니다.

  • 템플릿(디자인) = 매주 쓰는 주보 양식 (로고, 레이아웃이 고정된 틀)
  • Markdown 파일 = 주보 안에 들어갈 내용 (이번 주 설교 제목, 광고 등)
  • SSG 빌드 = 인쇄 버튼 누르기
  • 완성된 웹사이트 = 인쇄된 주보

매주 여러분이 할 일은 내용만 바꾸는 것입니다. 디자인(틀)은 그대로 유지됩니다.

1-2. 왜 이 방식이 교회 홈페이지에 적합한가?

✅ 장점 비교표

항목 정적 사이트 (이 방법) WordPress 등 동적 사이트
월 운영비 $0 (완전 무료) $5–30/월 (호스팅 필요)
속도 매우 빠름 (파일만 전달) 느릴 수 있음 (서버 계산 필요)
보안 강함 (해킹 대상이 적음) 플러그인 취약점 위험
유지보수 거의 불필요 정기적 업데이트 필요
백업 Git이 자동 관리 별도 백업 설정 필요
콘텐츠 업데이트 Markdown 파일 작성 후 push 관리자 페이지에서 입력
접속자 급증 시 문제 없음 서버 다운 가능성

❌ 이 방식이 어울리지 않는 경우

  • 회원 로그인, 온라인 헌금 결제가 필수인 경우
  • 방문자가 직접 댓글·게시글을 올려야 하는 경우
  • 데이터베이스가 반드시 필요한 복잡한 기능이 필요한 경우

💡 교회 홈페이지의 핵심 기능인 소식 전달, 설교 게시, 예배 안내는 정적 사이트로 충분히 구현됩니다.

1-3. 추천 Spec — 무엇을 사용할 것인가

이 매뉴얼에서 사용하는 도구 목록입니다.

구성 요소 선택한 도구 비용
AI 코딩 에이전트 Google Antigravity 2.0 / Antigravity CLI 무료 플랜 있음
정적 사이트 생성기 Hugo (Extended Edition) 무료, 오픈소스
디자인 테마 Hugo 공개 테마 (PaperMod 등) 무료
콘텐츠 작성 형식 Markdown (.md 파일) —
버전 관리 및 저장소 GitHub 무료
웹 호스팅 GitHub Pages 무료
도메인 주소 github.io 기본 제공 주소 무료
월 운영비 합계 $0

💡 커스텀 도메인(www.우리교회.org 같은 주소)을 원하면 연간 약 $10–15의 도메인 비용만 추가됩니다. 호스팅 비용은 여전히 $0입니다.

1-4. 각 도구를 선택한 이유

🔵 Hugo — 정적 사이트 생성기

Hugo는 전 세계에서 가장 많이 쓰이는 정적 사이트 생성기 중 하나입니다.

선택 이유:

  • 속도: 대부분의 사이트를 1초 이내에 빌드합니다. 설교 파일을 올리고 몇 초 만에 사이트가 업데이트됩니다.
  • 한국어 지원: 한글 콘텐츠 처리에 문제가 없습니다.
  • 풍부한 테마: 수백 개의 무료 테마가 있어, 코딩 없이 원하는 디자인을 적용할 수 있습니다.
  • 파일 하나로 설치: 복잡한 설치 과정이 없습니다.
  • 안정성: 수년간 수백만 개의 사이트에서 검증된 도구입니다.

🟠 Antigravity 2.0 / Antigravity CLI — AI 코딩 에이전트

Google이 Google I/O 2026에서 발표한 에이전트 우선 개발 플랫폼입니다. 기존 Gemini CLI의 후속작입니다.

선택 이유:

  • 자연어로 지시: “설교 페이지에 날짜별 목록을 추가해줘”처럼 한국어로 명령하면 코드를 자동으로 작성해 줍니다.
  • HTML/CSS 지식 불필요: 디자인 수정이나 새 기능 추가를 AI에게 맡길 수 있습니다.
  • 멀티 파일 편집: 여러 파일을 동시에 수정해야 하는 복잡한 작업도 한 번의 명령으로 처리합니다.
  • 터미널 기반: 별도 IDE 없이 명령줄에서 바로 사용 가능합니다.
  • 무료 플랜: Google 계정만 있으면 기본 사용이 가능합니다.

🟢 GitHub + GitHub Pages — 저장소 및 호스팅

선택 이유:

  • 완전 무료: 공개 저장소 기준으로 저장 및 호스팅 모두 무료입니다.
  • 자동 배포: 파일을 업로드(push)하면 자동으로 사이트가 업데이트됩니다.
  • 자동 버전 관리: 모든 변경 이력이 남아 잘못 올려도 이전 상태로 복구할 수 있습니다.
  • 신뢰성: 마이크로소프트가 운영하는 세계 최대 코드 저장소 플랫폼입니다.

📝 Markdown — 콘텐츠 작성 형식

선택 이유:

  • 배우기 쉬움: # 제목, *굵게** 같은 간단한 기호 몇 가지만 알면 됩니다.
  • 이식성: 어떤 텍스트 편집기로도 열고 수정할 수 있습니다.
  • 범용성: Hugo가 Markdown을 자동으로 아름다운 웹페이지로 변환합니다.

📖 용어 해설

이 매뉴얼에서 자주 등장하는 용어를 쉽게 설명합니다.

기본 개념

정적 사이트 (Static Site)

미리 만들어진 HTML 파일을 방문자에게 그대로 전달하는 방식의 웹사이트. 서버가 별도 계산을 하지 않아 빠르고 저렴합니다. “정적”은 “움직이지 않는다”는 뜻이 아니라 “사전에 완성된”이라는 의미입니다.

SSG (Static Site Generator, 정적 사이트 생성기)

Markdown 파일과 디자인 템플릿을 합쳐 완성된 HTML 웹사이트를 자동으로 만들어주는 프로그램. 이 매뉴얼에서는 Hugo를 사용합니다.

Hugo

Go 언어로 만들어진 정적 사이트 생성기. “세계에서 가장 빠른 웹사이트 빌드 도구”를 표방합니다. 무료 오픈소스입니다.

Markdown (마크다운)

간단한 기호를 사용해 서식이 있는 글을 작성하는 방법. 예를 들어 # 제목은 큰 제목이 되고, **굵게**는 굵은 글씨가 됩니다. 파일 확장자는 .md입니다.

테마 (Theme)

웹사이트의 전체적인 디자인(색상, 글꼴, 레이아웃)을 담고 있는 파일 묶음. Hugo 테마는 무료로 수백 가지가 제공됩니다.

빌드 (Build)

SSG가 Markdown 파일과 테마를 합쳐 최종 웹사이트 파일(HTML)을 생성하는 과정. “빌드한다” = “사이트를 완성시킨다”

저장소 및 배포 관련

Git

파일의 변경 이력을 추적하고 관리하는 도구. “저장”할 때마다 스냅샷이 찍혀 언제든 이전 상태로 돌아갈 수 있습니다. 실수로 파일을 삭제해도 복구 가능합니다.

GitHub

Git으로 관리하는 파일을 인터넷에 올려두는 서비스. 마치 웹사이트 파일을 위한 “구글 드라이브”라고 생각하면 됩니다. Microsoft가 운영합니다.

저장소 (Repository, 리포지토리)

GitHub에서 하나의 프로젝트를 담는 폴더. 줄여서 “레포(repo)”라고도 합니다.

커밋 (Commit)

변경된 파일들을 Git에 “저장”하는 행위. 커밋할 때마다 “어떤 내용을 바꿨는지” 메모를 남깁니다.

Push

내 컴퓨터의 Git 저장소에 저장된 내용을 GitHub(인터넷)에 올리는 행위. “업로드”와 비슷한 개념입니다.

GitHub Pages

GitHub 저장소의 파일을 웹사이트로 공개해주는 무료 호스팅 서비스. 내아이디.github.io 형식의 주소가 자동으로 부여됩니다.

배포 (Deploy)

완성된 웹사이트 파일을 서버(GitHub Pages)에 올려 전 세계 누구나 접근할 수 있게 하는 과정.

GitHub Actions

GitHub에서 제공하는 자동화 도구. “파일이 push되면 → Hugo 빌드 실행 → GitHub Pages에 배포”를 자동으로 처리합니다. 한 번만 설정해두면 이후에는 신경 쓸 필요 없습니다.

AI 도구 관련

Antigravity 2.0

Google이 2026년 Google I/O에서 발표한 AI 코딩 에이전트 플랫폼. 에이전트(AI)가 자율적으로 코드를 작성·수정합니다.

Antigravity CLI

Antigravity 2.0의 터미널(명령줄) 버전. agy라는 명령어로 실행합니다. 데스크톱 앱 없이 터미널에서 바로 AI에게 코딩 작업을 지시할 수 있습니다.

CLI (Command Line Interface)

마우스 클릭 대신 텍스트 명령어를 입력해서 컴퓨터를 조작하는 방식. Windows의 “명령 프롬프트(cmd)”나 Mac의 “터미널”이 여기에 해당합니다.

에이전트 (Agent)

목표를 주면 스스로 여러 단계의 작업을 계획하고 실행하는 AI. 단순히 질문에 답하는 것을 넘어, 파일을 직접 생성·수정하고 명령을 실행합니다.

기타 도구

터미널 / 명령 프롬프트

텍스트로 컴퓨터에 명령을 내리는 프로그램.

  • Windows: cmd 또는 PowerShell 또는 Windows Terminal
  • Mac: 터미널 (Terminal)

환경변수 PATH

운영체제가 프로그램을 찾을 때 뒤지는 폴더 목록. Hugo나 Git 설치 후 PATH에 등록해야 어느 폴더에서나 명령어를 사용할 수 있습니다.

서브모듈 (Submodule)

Git 저장소 안에 다른 Git 저장소를 포함시키는 기능. Hugo 테마는 대부분 이 방식으로 프로젝트에 추가합니다.

YAML / TOML

설정 파일을 작성하는 형식. hugo.toml이나 Markdown 파일 맨 위의 --- 사이 내용이 이 형식입니다. 복잡하게 생각할 필요 없이, 키: 값 형태로 정보를 적는 방법이라고 이해하면 됩니다.

💡 초보자 Tips

Tip 1. 터미널이 두렵다면?

터미널(명령 프롬프트)은 생소해 보이지만, 이 매뉴얼에서 쓰는 명령어는 10가지를 넘지 않습니다. 복사해서 붙여넣기만 해도 됩니다.

💡 명령어를 잘못 입력하면? 대부분은 그냥 에러 메시지만 뜨고 아무 일도 일어나지 않습니다. 서버가 망가지거나 사이트가 삭제되지 않으니 걱정하지 마세요.

Tip 2. Markdown은 5분이면 배울 수 있습니다

교회 소식이나 설교를 올릴 때 쓰는 Markdown 기호는 다음이 전부입니다.

원하는 결과 입력하는 내용
큰 제목 # 제목
중간 제목 ## 소제목
작은 제목 ### 소항목
굵은 글씨 **굵게**
기울임 *기울임*
줄 바꿈 빈 줄 한 줄 추가
목록 - 항목 1
번호 목록 1. 항목 1
링크 [링크 이름](URL)

실제 설교 파일 예시:

위 내용에서 --- 사이의 부분은 글의 정보(제목, 날짜 등)를 담는 공간입니다. 그 아래부터가 본문입니다.

Tip 3. AI(Antigravity CLI)를 최대한 활용하세요

코드를 모를 때는 자연어로 설명하면 됩니다.

유용한 지시 예시:

💡 명령이 마음에 들지 않으면 “방금 바꾼 것 되돌려줘”라고 하면 됩니다.

Tip 4. 매주 업데이트가 어렵다면? — VS Code 활용

VS Code(무료 코드 편집기)를 설치하면 더 편하게 파일을 관리할 수 있습니다.

  • 폴더 트리에서 파일 클릭으로 열기·수정 가능
  • Markdown 미리보기 내장 (Ctrl+Shift+V)
  • Git 기능 내장 (push를 버튼 클릭으로 가능)
  • 한국어 언어팩 지원

code.visualstudio.com에서 무료 다운로드

Tip 5. 사이트가 깨졌을 때 당황하지 마세요

Git을 사용하면 어떤 실수도 되돌릴 수 있습니다.

또는 Antigravity CLI에게 지시:

Tip 6. 사이트 미리보기는 로컬에서 먼저

GitHub에 올리기 전에 항상 내 컴퓨터에서 미리 확인하세요.

실행 후 브라우저에서 http://localhost:1313 접속하면 실시간으로 변경 사항을 확인할 수 있습니다. -D는 아직 발행 전(draft) 상태인 글도 포함해서 미리보기를 하라는 옵션입니다.

❓ FAQ

Q1. HTML, CSS, JavaScript를 전혀 몰라도 정말 만들 수 있나요?

A. 네, 가능합니다. 이 매뉴얼은 그것을 전제로 작성되었습니다. 디자인 수정은 Antigravity CLI에게 한국어로 지시하면 되고, 콘텐츠는 Markdown으로 작성합니다. 코드를 직접 작성할 일은 거의 없습니다. 단, 터미널에서 명령어를 복사해 붙여넣는 작업은 필요합니다.

Q2. GitHub Pages는 영구 무료인가요?

A. 공개(Public) 저장소를 사용하는 한 무료입니다. GitHub의 정책 변경 가능성은 있지만, 2008년부터 현재까지 무료 정책을 유지해 왔습니다. 혹시 정책이 바뀌더라도 Netlify, Cloudflare Pages 등 동일하게 무료인 대안 서비스로 쉽게 이전할 수 있습니다.

Q3. 사이트 주소가 교회이름.github.io인데, 더 예쁜 주소를 쓸 수 없나요?

A. 쓸 수 있습니다. www.우리교회.org 같은 커스텀 도메인을 구입(연간 약 $10–15)하면 GitHub Pages에 연결할 수 있습니다. 호스팅 비용은 그래도 $0입니다. 도메인 연결 방법은 이후 챕터에서 다룹니다.

Q4. 방문자가 댓글을 달거나 회원가입을 할 수 있나요?

A. 정적 사이트의 특성상 기본적으로는 불가능합니다. 하지만 외부 댓글 서비스(Utterances, Giscus 등)를 무료로 연동하면 댓글 기능을 추가할 수 있습니다. 회원가입이나 온라인 헌금 결제 같은 기능이 반드시 필요하다면 외부 서비스(예: 구글 폼, 토스 정기기부 등)를 링크로 연결하는 방법을 권장합니다.

Q5. 사진이나 영상도 올릴 수 있나요?

A. 사진은 static/images/ 폴더에 넣고 Markdown에서 참조하면 됩니다. 영상은 파일을 직접 올리는 것보다 유튜브에 올린 뒤 링크를 삽입하는 방법을 권장합니다. 영상 파일은 용량이 크기 때문에 GitHub에 직접 저장하는 것은 적합하지 않습니다.

Q6. 교회 직원 여러 명이 함께 관리할 수 있나요?

A. 네, 가능합니다. GitHub의 Collaborator(협업자) 기능으로 여러 명에게 편집 권한을 줄 수 있습니다. 각자 GitHub 계정이 있으면 됩니다. 충돌이 발생했을 때 처리하는 방법은 이후 챕터에서 다룹니다.

Q7. 기존에 WordPress로 운영하던 사이트를 옮길 수 있나요?

A. 가능하지만 완전히 자동으로 되지는 않습니다. WordPress의 내용을 Markdown으로 변환해주는 도구(wp2hugo 등)가 있지만, 이미지나 특수 레이아웃은 수동 작업이 필요할 수 있습니다. 완전히 새로 시작하는 것이 오히려 더 수월한 경우가 많습니다.

Q8. Antigravity CLI의 무료 플랜 한도가 있나요?

A. 네, Google AI Pro 플랜($20/월)과 무료 플랜이 있습니다. 무료 플랜은 하루 사용량 한도가 있지만, 교회 홈페이지를 처음 셋업하거나 가끔 수정하는 수준에서는 무료 플랜으로 충분합니다. 무료 한도 초과 시 다음 날 리셋됩니다.

Q9. 인터넷이 느린 환경에서도 작업할 수 있나요?

A. Hugo 빌드와 편집은 내 컴퓨터에서 오프라인으로도 할 수 있습니다. 인터넷 연결은 GitHub에 push할 때와 Antigravity CLI를 사용할 때만 필요합니다.

Q10. 이 방식으로 만든 사이트의 실제 예시를 볼 수 있나요?

A. Hugo 공식 사이트(gohugo.io)의 Showcase 페이지에서 Hugo로 만든 다양한 사이트를 볼 수 있습니다. 실제 기업, 비영리단체, 교육기관 사이트들이 같은 방식으로 운영되고 있습니다.

다음 챕터 예고

Chapter 2. 환경 설정 — 컴퓨터에 도구 설치하기

  • GitHub 계정 만들기
  • Hugo 설치 (Windows / Mac)
  • Git 설치 및 초기 설정
  • Antigravity CLI 설치 및 로그인
  • 설치 확인 및 문제 해결

이 매뉴얼은 2026년 5월 기준으로 작성되었습니다.

도구 버전 업데이트에 따라 일부 내용이 달라질 수 있습니다.

Similar Posts