chatGPT와 인공지능AI

윈드서프 AI로 교회 홈페이지 만들기

Cray Fall 2025. 5. 11. 21:08

AI가 교회 홈페이지에 대해 어느정도 맥락을 파악하고 개발이 가능할까요?
오늘은 메뉴 분량이 많은 스타일의 홈페이지를 여러 페이지로 나누어 제작하는 부분을 진행해보았습니다.

본문의 중복을 피하기 위해 윈드서프 에디터 설치 및 테마설정은 지난 게시글을 참고해 주시고요.
이미 설치 및 세팅이 끝나신 분은 이 부분은 넘어가셔도 됩니다.

https://itadventure.tistory.com/729

윈드서프 AI로 홈페이지 만들기

윈드서프를 사용하며 느낀 점은 이제 홈페이지 제작이 정말 쉬워졌다는 것인데요.맹점들도 존재하지만 개발경험이 없는 일반인 입장에서 약간 따라하는 것만으로 가벼운 홈페이지를 구축할수

itadventure.tistory.com

오늘은 'PHP 서버'라는걸 작동해 볼겁니다.

왜냐하면 웹페이지를 여러개로 나눌 경우 기본적으로 헤더(Header=머리말) 영역과
푸터(Footer=꼬리말) 영역은 메뉴구성, 기관명, 주소 등등의 정보가 각 페이지마다 반복될텐데요.
뭔가 하나 수정할 때마다 일일히 모든 페이지를 수정한다는게 엄청 피곤한 일이거든요.

AI가 코딩이 빠르다고는 하나 역시 마찬가지입니다.
반복되는 부분은 공통으로 사용하도록 하는게 나중에 코드 이해도 훨씬 쉽습니다.

XAMPP 설치

이제 필요한 IT 지식을 하나 익힐 차례입니다.
PHP 를 사용하려면 유료 호스팅 서비스를 신청하는 방법아 있지만 용량제한도 있고 리눅스도 익혀야 하고 진입장벽이 높습니다.
그러니 PC에 PHP 서버를 설치해 나만의 웹서버에서 작동하는 홈페이지를 만들어 보겠습니다.
XAMPP 라는게 있는데 그다지 성능은 좋은 편은 아니지만 설치 방법에 간편합니다.
XAMPP 홈페이지에 접속해 주세요.

https://www.apachefriends.org/

첫 화면에서 아래로 좀 내려와 XAMPP for Windows 를 다운받아 설치하시면 됩니다.

설치 방법은 일반적인 한글이나 MS오피스와 비슷합니다.
다만 화면이 영어로 표시되니 Next, Next, .. Finish 눌러주시면 되구요,

설치 과정에 보안 경고 창이 뜨면 우리는 서비스용이 아닌 개인 연습용이므로 위쪽 선택상자는 체크하고 아래쪽 선택상자는 해제해주시면 됩니다.

아파치 서비스 시작

XAMPP 설치 후 아파치 서비스를 시작해야 합니다.
시작 버튼을 눌러 아래 모양의 아이콘을 선택해 주세요

그러면 XAMPP 제어판(Control Panel) 화면이 등장합니다.

Apache 서비스 줄에 있는 Start 버튼을 클릭하면 아파치 서비스가 시작됩니다.
내 PC가 일종의 홈페이지 서버가 된 셈입니다. 이제 이 창은 닫아주셔도 됩니다.

크롬 브라우저를 열어 http://localhost 주소를 입력하면, 아래와 같은 홈페이지가 등장하는데요.
이 홈페이지는 금방 XAMPP 를 설치하며 내 PC에 저장된 페이지를 띄워준 것입니다.

개발 세팅

이제 XAMPP 환경에서 PHP 로 홈페이지 개발을 시작하겠습니다.

기본 홈페이지는 아래 폴더에 들어 있는데요.
C:\xampp\htdocs

우리는 이 폴더 아래 church 폴더에 홈페이지를 만들 겁니다.
그러니 URL 주소는 http://localhost/church 가 되겠지요.

윈도우 탐색기에서 C:\xampp\htdocs 폴더에 들어간 다음, church 폴더를 만들어 주세요.

그리고 윈드 서프 에디터를 실행, File - Open Folder 메뉴에서 이 폴더를 선택하시면 됩니다.

그리고 church 우측의 새 파일 아이콘 선택 후, .windsurfrules 라는 파일명을 입력합니다.

이 파일은 윈드서프 AI에게 설명할 규칙파일인데요.
아래 내용을 복붙 후 Ctrl + S 로 저장하시면 됩니다.
오늘은 규칙이 좀 많은 것 같습니다.

- 모든 답변은 한글로 작성해줘.
- 이미지를 넣을 경우 picsum 에서 랜덤하게 가져와줘.
- 아이콘을 넣을 경우 Google 의 Material Icons 를 사용해줘.
- css 는 tailwind css 를 사용해줘.
- 웹페이지는 자동으로 띄우지 말아줘.
- 프로그램 언어는 PHP를 사용해줘.
- 각 메뉴별로 별도 페이지를 나눠서 작성해줘.
- 헤더 파일과 푸터 파일을 별도로 분리해 각 페이지에서 공통으로 사용하도록 해줘.
- 프로필 사진은 randomuser.me 에서 가져와줘.

홈페이지 기획

코딩하기 전에 먼저 AI에게 홈페이지 기획을 짜달라고 하죠.
아직 코딩 시작전이니, 이 정도는 무료 모델을 선택해도 무난합니다.
무료 모델은 크레딧이 소진되지 않습니다.
모델 선택 상자를 선택하고, Cascade Base 모델을 선택합니다.

그리고 아래 내용을 요청하면 자세하게 안을 짜줍니다.

교회 홈페이지를 개발하려고 해. 기획안과 메뉴 구성을 짜줘.

제가 받은 응답은 아래와 같은데요, 여러분이 받은 결과는 내용이 다를 겁니다.

교회 홈페이지 기획안

1. 사이트 컨셉

테마: 따뜻하고 친근한 분위기, 현대적이면서도 경건함을 유지하는 디자인
주요 색상: 파스텔 블루, 아이보리, 골드톤
반응형 웹: 모바일, 태블릿, 데스크톱에서 모두 최적화된 화면 제공

2. 메인 메뉴 구성

1) 교회 소개

담임목사 인사
교회 비전과 사명
교회 연혁
오시는 길 (구글 맵 연동)

2) 예배 안내

주일 예배
수요 예배
새벽 기도회
특별 예배 일정
생중계 방송 (유튜브 연동)

3) 교회학교

유치부
유초등부
중고등부
청년부
교사 모집

4) 교제 및 모임

소그룹 모임
성경 공부
기도 모임
찬양팀
봉사단체

5) 설교 영상

최근 설교
설교 아카이브
주보 보기

6) 교회 소식

공지사항
행사 갤러리
구인구직
주보 보기

7) 선교

해외 선교
국내 선교
선교지 소식
후원 안내

8) 연락처

교회 연락처
제직 소개
문의하기

3. 홈페이지 주요 기능

온라인 헌금: 안전한 온라인 결제 시스템
예배 신청: 코로나19 대비 사전 예약 시스템
교인 전용 게시판: 로그인 후 이용 가능한 커뮤니티
성경 검색: 성경 구절 검색 기능
교회 달력: 행사 일정 캘린더

4. 기술 스택

프론트엔드: HTML5, CSS3, JavaScript, Tailwind CSS
백엔드: PHP
데이터베이스: MySQL
호스팅: XAMPP 로컬 개발 환경

5. 향후 확장 계획

모바일 앱 연동
유튜브 생중계 연동
온라인 성경학교
전자성경공부 자료실

와우~ 대단하지 않나요?

이걸 모두 구현하기에는 기능이 너무 많습니다.
이번 목표 달성이 어려울 수 있어, 일부 기능은 덜어내고 진행해 보았는데요.

무료 모델 Cascade 로 코딩을 진행해 보았습니다만,
페이지를 모두 생성했다고 하나, 중도에 끊기는 문제가 있고 수정을 요청하자 원래 되던 링크도 끊어지는 등의 오류가 발생하는 문제가 있었습니다.

GPT-4.1 모델은 속도는 빠르나 church 폴더에 모든 파일을 일렬로 나열하는 형태로 구성하여 css 나 js와 같은 용도별 파일을 분리하지도 않는 문제가 있었습니다.

결국 소넷 모델로 최종 시도해보았는데요.
이 모델은 모든걸 다 알아서 잘 수행하거든요.
모델 목록중 1.25 크레딧을 소진하는 Claude 3.7 Sonnet (Thinking) 모델을 사용하였습니다.
비용이 제일 높은만큼 아무래도 성능이 더 좋은 것 같습니다.

요청 내용은 아래와 같습니다.
페이지가 많기 때문에 시간이 매우 오래 소요됩니다.

아래 기획안에 따라 홈페이지를 제작해줘.

1. 사이트 컨셉
테마: 따뜻하고 친근한 분위기, 현대적이면서도 경건함을 유지하는 디자인
주요 색상: 파스텔 블루, 아이보리, 골드톤
반응형 웹: 모바일, 태블릿, 데스크톱에서 모두 최적화된 화면 제공
2. 메인 메뉴 구성
1) 교회 소개
담임목사 인사
교회 비전과 사명
교회 연혁
오시는 길 (구글 맵 연동)
2) 예배 안내
주일 예배
수요 예배
새벽 기도회
특별 예배 일정
3) 교회학교
유치부
유초등부
중고등부
청년부
교사 모집
4) 교제 및 모임
소그룹 모임
성경 공부
기도 모임
찬양팀
봉사단체
5) 설교 영상
최근 설교
설교 아카이브
주보 보기
6) 교회 소식
공지사항
행사 갤러리
구인구직
주보 보기
7) 선교
해외 선교
국내 선교
선교지 소식
후원 안내
8) 연락처
교회 연락처
제직 소개
문의하기
3. 기술 스택
프론트엔드: HTML5, CSS3, JavaScript, Tailwind CSS
백엔드: PHP
호스팅: XAMPP 로컬 개발 환경

제작 도중 지난 게시글처럼 Accept 를 물어오면, Accept 버튼을 선택하시면 되는데요.
페이지 생성량이 많아서 그런지 아래 화면이 등장할 때도 있습니다.
이 때는 continue 버튼을 클릭하면 됩니다.

참고로 유료 사용자는 자동수락 기능을 선택할 수 있어 일일히 Accept 를 단계마다 클릭해주지 않아도 됩니다.
화면 하단 Windsurf Setting - Terminal Auto Executiion 선택상자 - Turbo 를 선택하면 되거든요.

페이지를 한참 생성하다 아래와 같은 문구가 나올때가 있습니다.
아마도 페이지가 너무 많아서 한번의 소넷 사용량을 넘쳐서 그런것으로 보이는데요

아래와같이 지시하면 됩니다.
물론 크레딧은 추가 소진됩니다.

계속

결과 페이지는 아래와 같습니다.
디자인도 괜찮은 편이네요.

아래는 모바일 버전.

폴더구성도 아주 깔끔하게 잘 잡아주었습니다.
이게 웹개발의 정석이거든요 :)

생각보다는 그렇게 코딩 속도가 빠르지는 않아 일부 메뉴는 제거하고 이런 저런처리를 하여 완성한 홈페이지입니다. 크레이의 개인 계정에 올렸으며 링크는 아래와 같습니다.

https://cray7.mycafe24.com/church/

기본적으로 의도한대로 헤더와 푸터 파일을 따로 만들었고

각 페이지마다 헤더 파일과 푸터 파일을 포함하도록 PHP 코드가 잘 구성되었습니다.
아래는 해당 PHP 코드인데 취미로 보신다면 내용을 이해하지 않으셔도 됩니다.

<?php
// 교회 소개 메인 페이지
$pageTitle = "교회 소개";
include '../includes/header.php';
?>

<main class="container mx-auto px-4 py-8">
    <!-- 교회 소개 메인 컨텐츠 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-3xl font-bold mb-6 text-center text-blue-800">교회 소개</h2>
        :
        :
        :
<?php
include '../includes/footer.php';
?>

필요하신 분께 도움이 되셨을지, 또는 흥미로운 주제였을지 모르겠네요 :)
오늘도 방문해주셔서 감사합니다~

저작자표시 비영리 변경금지 (새창열림)