elimgweb

🎬 웹사이트 수정 비디오 가이드 스크립트

📹 튜토리얼 1: GitHub에서 직접 수정하기 (5분)

시나리오: 전화번호 변경하기

1단계: GitHub 접속 (30초)

화면: 브라우저 열기
동작: https://github.com/JinJun-han/elimgweb 입력
클릭: 저장소 열기

내레이션:

“안녕하세요! 가장 쉬운 방법부터 시작하겠습니다. GitHub에서 직접 파일을 수정할 수 있습니다.”

2단계: 파일 찾기 (1분)

화면: 저장소 메인 페이지
클릭: "public" 폴더
클릭: "index.html" 파일

내레이션:

“public 폴더로 들어가서 index.html 파일을 찾습니다. 이 파일이 웹사이트의 메인 페이지입니다.”

3단계: 편집 모드 (30초)

화면: index.html 파일 내용
클릭: 우측 상단 연필 아이콘 (✏️ Edit this file)

내레이션:

“우측 상단의 연필 아이콘을 클릭하면 편집 모드로 전환됩니다.”

4단계: 검색하기 (1분)

화면: 편집 화면
키보드: Ctrl+F (Mac: Cmd+F)
입력: "010-2083-3106"
엔터: 검색 결과로 이동

내레이션:

“Ctrl+F를 눌러 검색창을 열고, 변경할 전화번호를 입력합니다. 여러 곳에 있을 수 있으니 모두 확인하세요.”

5단계: 수정하기 (1분)

화면: 검색된 전화번호 위치
동작: 마우스로 선택
입력: "010-1234-5678" (새 번호)

내레이션:

“기존 번호를 선택하고 새 전화번호를 입력합니다. 여러 곳에 있다면 모두 같은 번호로 변경해주세요.”

6단계: 커밋 (1분)

화면: 페이지 하단 스크롤
입력: Commit message: "전화번호 변경"
클릭: "Commit changes" 버튼 (초록색)

내레이션:

“페이지 아래로 내려가서 변경 내용을 설명하고 Commit changes 버튼을 누르면 저장됩니다.”

7단계: 확인 (30초)

화면: 저장소 메인으로 돌아옴
동작: 새로고침
확인: "2 minutes ago" 같은 최근 시간 표시

내레이션:

“저장이 완료되었습니다! Railway나 Vercel에 연결했다면 1-2분 후 자동으로 웹사이트에 반영됩니다.”

📹 튜토리얼 2: VS Code로 수정하기 (10분)

시나리오: 메인 제목과 색상 한번에 바꾸기

1단계: VS Code 설치 (2분)

화면: 브라우저
이동: https://code.visualstudio.com/
클릭: "Download" 버튼
설치: 다운로드된 파일 실행

내레이션:

“VS Code는 무료 코드 에디터입니다. 다운로드하고 설치만 하면 바로 사용할 수 있습니다.”

2단계: 프로젝트 열기 (2분)

화면: VS Code 실행
클릭: "Open Folder"
선택: elimgweb 폴더 (미리 git clone 되어 있음)

내레이션:

“elimgweb 폴더를 선택하여 엽니다. 왼쪽에 모든 파일이 트리 형태로 보입니다.”

3단계: 파일 열기 (1분)

화면: 왼쪽 파일 트리
클릭: public 폴더 확장
클릭: index.html

내레이션:

“public 폴더를 펼치고 index.html을 더블클릭합니다.”

4단계: 검색 및 수정 1 - 제목 (2분)

화면: index.html 열림
키보드: Ctrl+F
입력: "세상을 향한 하나님의 사랑"
엔터: 찾기
선택: 해당 텍스트
입력: "글로컬 선교로 세계를 품다"

내레이션:

“Ctrl+F로 검색하여 메인 제목을 찾고 원하는 텍스트로 변경합니다. 매우 간단하죠?”

5단계: 검색 및 수정 2 - 색상 (2분)

키보드: Ctrl+F
입력: "--primary-color"
엔터: 찾기
확인: --primary-color: #4A90E2;
수정: --primary-color: #27AE60; (초록색)

내레이션:

“이번엔 메인 색상을 변경해봅시다. primary-color를 검색하고 색상 코드를 바꿉니다.”

6단계: 저장 (30초)

키보드: Ctrl+S
화면: 파일 탭의 점(●) 표시가 사라짐

내레이션:

“Ctrl+S를 누르면 저장됩니다. 파일 이름 옆의 점이 사라지면 저장된 것입니다.”

7단계: 로컬 테스트 (1분)

화면: VS Code 하단 터미널 클릭
입력: npm run dev
엔터: 서버 시작
브라우저: http://localhost:3000 접속

내레이션:

“터미널에서 npm run dev를 실행하여 로컬에서 바로 확인할 수 있습니다.”

8단계: Git 업로드 (2분)

화면: VS Code 왼쪽 Source Control 아이콘 (브랜치 모양)
클릭: Source Control
입력: 커밋 메시지 "메인 제목과 색상 변경"
클릭: ✓ Commit 버튼
클릭: ⋯ 메뉴 → Push

내레이션:

“왼쪽의 Source Control을 클릭하고 커밋 메시지를 입력한 후 Push합니다.”

📹 튜토리얼 3: 뉴스 추가하기 (15분)

시나리오: 새로운 소식 카드 추가

1단계: 이미지 준비 (5분)

화면: 브라우저
이동: https://unsplash.com/
검색: "community" 또는 "church"
클릭: 마음에 드는 이미지
클릭: "Copy Image Address"

내레이션:

“먼저 Unsplash에서 무료 이미지를 찾습니다. 마음에 드는 이미지를 선택하고 주소를 복사합니다.”

2단계: 코드 복사 (3분)

화면: VS Code, index.html
검색: "news-card"
선택: 전체 news-card div 블록 복사
  (약 15줄 정도)

내레이션:

“기존 뉴스 카드 하나를 통째로 복사합니다. 이렇게 하면 스타일이 똑같이 적용됩니다.”

3단계: 붙여넣고 수정 (5분)

동작: 마지막 news-card 다음에 붙여넣기
수정:
이미지 URL → Unsplash 주소
제목 → "3월 특별 집회 안내"
내용 → "베트남 이주민을 위한..."
날짜 → "2026-03-15"
작성자 → "한진준 목사"
카테고리 → "행사"

내레이션:

“붙여넣은 코드에서 필요한 부분을 수정합니다. 이미지, 제목, 내용, 날짜, 카테고리 등을 바꿉니다.”

4단계: 저장 및 확인 (2분)

키보드: Ctrl+S
브라우저: localhost:3000 새로고침
확인: 새 뉴스 카드 표시됨

내레이션:

“저장하고 브라우저를 새로고침하면 새로운 뉴스 카드가 나타납니다!”

📹 튜토리얼 4: 모바일 반응형 테스트 (5분)

시나리오: 모바일에서 잘 보이는지 확인

1단계: 개발자 도구 열기 (1분)

브라우저: Chrome
키보드: F12 (또는 Ctrl+Shift+I)
화면: 개발자 도구 패널 열림

내레이션:

“크롬 브라우저에서 F12를 누르면 개발자 도구가 열립니다.”

2단계: 모바일 모드 (1분)

클릭: 툴바의 📱 아이콘 (Toggle device toolbar)
선택: "iPhone 12 Pro" 또는 "Galaxy S20"

내레이션:

“스마트폰 아이콘을 클릭하면 모바일 화면으로 전환됩니다.”

3단계: 다양한 기기 테스트 (2분)

드롭다운: "Responsive" 선택
드래그: 화면 너비 조절
확인: 레이아웃 변화 관찰

내레이션:

“Responsive 모드에서 화면을 직접 조절하며 다양한 크기에서 잘 보이는지 확인합니다.”

4단계: 문제 발견 시 (1분)

예시: 텍스트가 너무 큼
화면: VS Code로 전환
찾기: @media (max-width: 768px)
수정: font-size 값 조절

내레이션:

“모바일에서 문제가 발견되면 미디어 쿼리 부분을 수정합니다.”

📹 튜토리얼 5: 배포하기 (Railway) (10분)

시나리오: Railway로 실제 사이트 배포

1단계: Railway 회원가입 (2분)

브라우저: https://railway.app
클릭: "Start a New Project"
클릭: "Login with GitHub"
인증: GitHub 계정으로 로그인

내레이션:

“Railway 사이트에서 GitHub으로 간편하게 가입합니다.”

2단계: 프로젝트 생성 (2분)

클릭: "Deploy from GitHub repo"
선택: "elimgweb" 저장소
클릭: "Deploy Now"
화면: 자동 배포 시작 (로그 표시)

내레이션:

“GitHub 저장소를 선택하면 자동으로 배포가 시작됩니다.”

3단계: 환경 변수 설정 (3분)

클릭: 프로젝트 이름
탭: "Variables"
추가:
  NODE_ENV = production
  PORT = 3000
  JWT_SECRET = [랜덤 문자열]
  ADMIN_PASSWORD = [강력한 비밀번호]

내레이션:

“Variables 탭에서 필요한 환경 변수를 추가합니다. 비밀번호는 꼭 변경해주세요!”

4단계: 도메인 연결 (2분)

탭: "Settings"
섹션: "Domains"
클릭: "Generate Domain"
확인: xxx.up.railway.app 생성됨

내레이션:

“Settings의 Domains에서 자동 도메인을 생성하거나 커스텀 도메인을 연결할 수 있습니다.”

5단계: 배포 완료 (1분)

확인: 배포 상태 "Success" 표시
클릭: 생성된 도메인 링크
브라우저: 새 탭에서 웹사이트 열림

내레이션:

“배포가 완료되면 Success 표시가 나타납니다. 도메인을 클릭하면 라이브 사이트로 이동합니다!”

📹 튜토리얼 6: 가비아 DNS 연결 (10분)

시나리오: elimg.com 도메인 연결

1단계: Railway에서 CNAME 확인 (2분)

화면: Railway 대시보드
탭: Settings → Domains
클릭: "Add Custom Domain"
입력: "elimg.com"
확인: CNAME 값 복사 (예: abc123.up.railway.app)

내레이션:

“Railway에서 커스텀 도메인을 추가하고 CNAME 값을 복사해둡니다.”

2단계: 가비아 로그인 (2분)

브라우저: https://www.gabia.com
클릭: "로그인"
입력: ID/비밀번호
이동: "My가비아"

내레이션:

“가비아에 로그인하여 My가비아로 이동합니다.”

3단계: DNS 관리 (3분)

클릭: "서비스 관리" → "도메인"
찾기: "elimg.com"
클릭: "DNS 정보" → "DNS 관리"
클릭: "레코드 수정"

내레이션:

“elimg.com 도메인을 찾아 DNS 관리로 들어갑니다.”

4단계: CNAME 레코드 추가 (2분)

클릭: "+ 레코드 추가"
입력:
  타입: CNAME
  호스트: www
  값: abc123.up.railway.app (Railway에서 복사한 값)
  TTL: 3600
클릭: "확인"

내레이션:

“CNAME 레코드를 추가합니다. 값은 Railway에서 복사한 주소를 붙여넣습니다.”

5단계: 완료 및 대기 (1분)

클릭: "적용"
확인: "DNS 설정이 변경되었습니다" 메시지

내레이션:

“설정을 적용하면 1-24시간 내에 elimg.com으로 접속할 수 있게 됩니다.”

🎯 각 튜토리얼별 학습 목표

튜토리얼 1: GitHub 직접 수정

✅ GitHub 웹 인터페이스 사용법
✅ 파일 검색 및 수정
✅ 커밋 메시지 작성

튜토리얼 2: VS Code 사용

✅ 로컬 개발 환경 구축
✅ 여러 파일 동시 수정
✅ Git 버전 관리

튜토리얼 3: 뉴스 추가

✅ HTML 구조 이해
✅ 이미지 리소스 활용
✅ 실제 콘텐츠 추가

튜토리얼 4: 반응형 테스트

✅ 모바일 최적화 확인
✅ 개발자 도구 활용
✅ 크로스 디바이스 테스트

튜토리얼 5: Railway 배포

✅ 클라우드 배포 경험
✅ 환경 변수 설정
✅ 자동 배포 파이프라인

튜토리얼 6: DNS 연결

✅ 도메인 관리
✅ DNS 레코드 이해
✅ 실제 도메인 연결

📝 각 튜토리얼 체크리스트

시청 전

필요한 도구 설치 (VS Code, Git 등)
GitHub 계정 준비
가비아 로그인 정보 확인

시청 중

영상 일시정지하며 따라하기
각 단계 스크린샷 캡처
막히는 부분 메모

시청 후

실습한 내용 복습
다른 수정 시도해보기
배운 내용 정리

🎬 실전 팁

영상 제작 시

화면 녹화: OBS Studio (무료)
편집: DaVinci Resolve (무료)
자막: YouTube 자동 자막 활용

학습자를 위한 팁

속도 조절: YouTube 0.75x 속도로 천천히
반복 시청: 어려운 부분 반복
실습 필수: 영상만 보지 말고 직접 해보기

이 스크립트를 따라 하시면 누구나 웹사이트를 수정할 수 있습니다! 🎉

궁금한 점이 있으면 언제든 문의하세요!