시리즈: AI와 함께 만든 홈페이지 ccumgol.net · (2/8)
본 내용의 결과물은 https://ccumgol.net/bible-study/ (성경공부)와 https://ccumgol.net/new-believer/ (새신자 성경공부)에서 보실 수 있습니다.
홈페이지라는 그릇은 만들었으니, 이제 담을 내용이 필요했습니다. 마침 노션(Notion)에 ‘꿈골성경공부’ 데이터베이스로 오랫동안 정리해 둔 자료가 있었습니다. 문제는 이걸 하나하나 손으로 옮기려면 며칠이 걸린다는 것이었죠.
AI에게 “이관”을 부탁하다
AI에게 노션 자료를 홈페이지의 성경공부 메뉴로 옮겨달라고 했습니다. 단순 복사가 아니라, 옮기는 과정에서 여러 가공이 함께 이뤄졌습니다.
1) 이미지 → webp 썸네일
각 글의 대표 이미지를 자동으로 내려받아, 용량이 작고 빠른 webp 형식으로 변환해 목록 썸네일로 붙였습니다.
일반적으로 사용하는 jpg 형식보다 화질이 좋고, png 형식보다 파일 용량을 줄일 수 있는 최근의 그림파일 포맷입니다.
2) 성경 본문 정리 — 개역개정 + ESV 병합
공부 자료 속 성경 인용을 한글(개역개정)과 영어(ESV)를 한 곳에 나란히 정리했습니다. 이때 제 컴퓨터에 있던 성경 데이터베이스에서 정확한 본문을 가져와 넣었습니다. (사람이 손으로 타이핑하면 반드시 오타가 납니다 — AI는 DB에서 정확히 끌어옵니다.)
3) 질문·해설 서식 통일
“1️⃣ 같은 번호로 시작하는 질문은 굵게, 그 아래 해설(■)은 한 단계 들여쓰기” 같은 규칙을 정하니, 수십 개 문서에 일관된 서식이 한 번에 적용됐습니다.
목록도 ‘읽고 싶게’
옮기고 보니 글 목록이 밋밋했습니다. 그래서 AI와 함께:
- 각 글 제목 앞에 눈에 띄는 마커(🁢) 를 넣어 구분
- 썸네일이 있는 글과 없는 글이 들쭉날쭉하지 않도록 썸네일을 오른쪽에 고정
- 글 사이에 옅은 구분선을 넣어 정돈
이 모든 스타일은 테마 본체를 건드리지 않고, 해당 코너에서만 적용되는 CSS로 얹었습니다(뒤에 8편에서 자세히).
배운 점
콘텐츠 이관에서 AI의 진짜 힘은 “옮기기”가 아니라 “옮기면서 동시에 정리·변환·검증하기” 였습니다. 이미지 변환, 본문 대조, 서식 통일을 사람이 각각 하면 며칠이지만, 규칙만 정해주면 한 번에 처리됩니다.
한 가지 실전 팁도 얻었습니다: 노션이 주는 이미지 링크는 5분이면 만료됩니다. 그래서 “한 페이지 가져오면 즉시 이미지 저장” 방식으로 하나씩 처리해야 했습니다.
👉 결과 보기: ccumgol.net/bible-study
다음 글은 제가 가장 재미있어한 코너, 동전 137개로 배우는 미국 이야기입니다.
