시리즈: AI와 함께 만든 홈페이지 ccumgol.net · (8/8 · 마지막)
홈페이지의 첫인상은 결국 디자인입니다. ccumgol.net은 ‘Blowfish’라는 무료 테마를 바탕으로 시작했지만, 그대로 두지 않고 “AI가 만든 티가 나는 밋밋한 디자인”이 아니라 호감 가는 나만의 모습으로 다듬는 걸 목표로 했습니다. 핵심 원칙은 하나였습니다 — 테마 본체는 건드리지 않는다.
왜 테마를 직접 고치면 안 되나
테마는 나중에 업데이트됩니다. 만약 테마 파일을 직접 뜯어고쳤다면, 업데이트할 때마다 내 수정이 다 날아갑니다. 그래서 테마가 공식으로 열어 둔 확장 지점만 사용했습니다.
- 색상: 테마가 제공하는 색 변수만 바꿔 전체 톤을 교체
- 추가 스타일: 별도의 커스텀 CSS 파일에만 작성
- 특정 코너만의 스타일: 그 코너에서만 적용되는 페이지 단위 스타일로 얹기
이렇게 하면 테마가 업데이트돼도 내 디자인은 그대로 유지됩니다.
실제로 바꾼 것들
1) 로고와 메뉴
텍스트 대신 로고 이미지를 넣고, 흩어져 있던 메뉴들을 정리했습니다. 소개 관련 메뉴 4개를 2개로 합치고, 성경 관련 코너들(성경공부·새신자 성경공부·지도로 보는 예수님의 생애·일년일독성경)을 ‘성경배움터’라는 드롭다운 하나로 묶었습니다.
2) 목록을 읽고 싶게
성경공부 목록엔 제목 마커와 오른쪽 썸네일을, 일년일독성경엔 월별 카드 디자인을 — 코너 성격에 맞는 스타일을 각각 얹었습니다.
3) 군더더기 제거
푸터에 있던 “Hugo & Blowfish로 제공됨” 같은 워터마크를 제거해 깔끔하게 정리했습니다.
4) ‘사람 사진’으로 온기 더하기
첫 화면에 제 실제 사진을 넣어, 기계가 찍어낸 느낌이 아니라 사람이 운영하는 사역 공간임이 전해지도록 했습니다.
AI와 디자인한다는 것
디자인은 취향의 영역이라 AI가 어려울 것 같지만, 실제로는 “이 부분이 불균형해 보인다”, “여기 구분이 안 된다” 처럼 눈에 보이는 문제를 말로 설명하면 AI가 구체적인 CSS로 바꿔주는 방식이 잘 통했습니다. 브라우저에서 결과를 함께 확인하고, 마음에 들 때까지 조금씩 다듬었습니다.
시리즈를 마치며
코드를 거의 모르던 제가, AI와 대화하며 배포·콘텐츠 이관·데이터 자동화·인터랙티브 지도·다국어·디자인까지 갖춘 홈페이지를 완성했습니다. 핵심 교훈을 한 문장으로 남긴다면:
AI는 “코드를 대신 쳐주는 도구”가 아니라, 문제를 함께 풀어가는 파트너다.
무엇을 만들고 싶은지 분명히 설명할 수만 있다면, 구현의 벽은 생각보다 낮았습니다.
이 시리즈가, 자기 사역과 이야기를 웹에 담고 싶은 분들께 “나도 해볼 수 있겠다”는 작은 용기가 되면 좋겠습니다.
👉 직접 보기: ccumgol.net
