AI로 인터넷공간에 홈페이지 바로 만들기

지난 게시글에 RaiDrive 로 인터넷 공간을 Z:드라이브로 연결하였었지요?

https://itadventure.tistory.com/755

RaiDrive, AI에 날개를! 웹호스팅 공간을 드라이브처럼

그렇다면 이제 전세계 누구나 방문할 홈페이지를 만들 준비가 되신 겁니다.

Windsurf 를 실행, 폴더 열기 메뉴로 Z:\www 폴더를 열어줍니다.
(만약 여러 홈페이지를 해보시려면 Z:\www 하위에 폴더를 만들고 해당 폴더를 여셔도 됩니다. )

그리고 윈드서프에 홈페이지를 만들어 달라고 하면 되지요.
'행복서점 홈페이지' 컨셉으로 가도록 하겠습니다.
모델은 Claude Sonnet 3.7(Think), 이 녀석이 일을 잘해 마음에 듭니다.

그리고 오늘은 윈드서프 규칙 파일(.windsurfrules)을 안 쓸 겁니다.
좀 느려지는 감이 있어서요. 대신 프롬프트를 약간 길게 사용하겠습니다.

행복서점 홈페이지를 만들거야. php로 구성하고 헤더파일과 푸터파일을 분리해줘.
tailwind css 를 사용하고 이미지는 픽썸에서 적당한걸로 가져와. 
아이콘은 awesome을 사용해.

cafe24 php 웹호스팅을 신청했으니 php는 당연하고,
tailwind css, 픽썸, awesome 모두 예쁜 홈페이지를 만드는데 적절한 '매직키워드'입니다.
10분 정도 지나 아래와 같은 홈페이지가 완성되었네요.

2번째 메뉴인 서점 소개 페이지도 함께 만들었습니다.
디자인이 너무 깔끔한데요 ㅎㅎ 클로드가 감각이 좋습니다.
하지만 도서목록, 베스트셀러 등의 페이지는 아직 만들지 못해 클릭하면 오류가 납니다.

이 홈페이지는 실제 인터넷 공간에 직접 작업이 된 것이기 때문에 Deploy(디플로이)가 필요 없습니다.
그냥 바로 https://내아이디.mycafe24.com 에 접속하시면 홈페이지가 바로 보입니다.

게다가 이어서 계속 작업할 수도 있는 장점도 있지요.

나머지 메뉴를 마저 만들어 달라고 해보겠습니다.

도서목록, 베스트셀러, 신간도서, 이벤트, 고객센터 페이지도 계속 만들어줘

참고로 한가지 팁을 드리자면 홈페이지처럼 페이지가 여럿인 경우
헤더(머리말)과 푸터(꼬리말)을 나누는게 좋습니다.
이 헤더와 푸터는 각 페이지에서 중복되기 때문에 한번만 만들고 재활용하는게 좋기 때문에
'헤더 파일과 푸터 파일은 분리해줘'라고 하면 생성 시간이 그만큼 줄어듭니다.

만들다 보면 아래와 같은 오류가 나고 계속해서 못 만들 때가 있는데요.

그냥 '계속'이라고 해도 되지만 오류 원인을 물어보는 것도 하나의 좋은 방법입니다. 

금방 에러난 이유가 뭐야?

이런 답변을 줍니다.

파일에 작성하려고 한 내용이 너무 길어서 시스템의 제한 시간을 초과했기 때문입니다...
    :
이를 해결하기 위해 파일을 조금 더 작게 나누어 생성해보겠습니다. 각 페이지의 내용을 줄이거나, 
여러 단계로 나눠 파일을 생성하겠습니다. 계속 진행해볼까요?
    :

이럴 경우 제가 테스트한 바로는 이런 지시 내용이 좋습니다.
사실 앞에서 물어보지 않고 바로 이렇게 진행해도 대부분 작동합니다.

빈 파일을 먼저 생성하고 2~3k 단위로 점진적으로 내용을 추가해줘

이제부터는 좀처럼 멈추지 않을 겁니다.
생성되는 페이지를 보도록 할까요?

도서 목록 페이지

베스트 셀러 페이지

신간도서 페이지

이벤트 페이지

드디어 주메뉴의 마지막, 고객센터 페이지입니다.

여기까지 1시간 40분 걸렸는데요.
중간에 잠깐 자리비운 걸 빼면 1시간 30분 정도 소요된 것 같습니다.

이제 AI가 여러 메뉴로 구성된 홈페이지를 만들어 주었는데요.
사실 여기 있는 내용들은 모두 AI가 가상으로 꾸민 것이기 때문에
실제 활용하시려면 여러분의 내용으로 꾸며주어야 합니다.

차후에 그 부분을 다루는 것을 기약해보도록 하겠습니다.
지금 만든 홈페이지는 아래 URL에서 확인해보실 수 있습니다.

https://cray7.mycafe24.com/HappyBooks/

행복서점 - 당신의 지식을 풍요롭게

'바이브 코딩'의 실효성에 대해 말이 많습니다.
솔직히 말씀드려 '만년 초보'인 채로는 제대로 된 컨텐츠를 완성하기 어렵습니다.
또 완성한다 해도 관리할 수 없는데 홈페이지는 제작보다 '유지보수'가 더 중요하기 때문입니다.

특히 로그인, 책 목록을 등록하는 등의 기능을 앞으로 추가할 텐데요.
이런걸 '동적 웹페이지'라고 합니다. 해당 부분은 관련IT 지식을 익혀야 하는데요.

저는 '바이브코딩'을 '프로그래밍 감각'이라고 새롭게 정의하려고 합니다.

처음에는 '왕초보'로 시작했지만 무언가 성공을 하면 재미가 붙게 되지요.
그러다 보면 더 높은 수준의 기술을 알고 싶어하게 되고
필요한 IT지식을 쌓아가며 '프로그래밍 감각'이 생겨나는 거라구요.

아무쪼록 바이브코딩에 발을 들여놓으신 분에게 도움되시기를 바라며
이제 드림월드(꿈나라)로 발걸음을 옮기겠습니다 ㅎㅎ

오늘도 방문 감사합니다~!