ChatGPT 채팅만으로 반응형 홈페이지 만들어 보기 (1)

AI 에이전트 없이 채팅만으로 홈페이지 만들기 - 첫 번째

지난 강좌에서는 클로드(Claude)를 이용해서 SVG와 투명 PNG 이미지를 만드는 방법을 알아보았습니다.

이번에는 생성형 AI 중 하나인 ChatGPT를 이용해서 채팅만으로 홈페이지를 만들어 보겠습니다.

홈페이지를 제작하려면 HTML, CSS, JavaScript 같은 웹 개발 기술을 알아야 합니다. 듣기만 해도 골아픕니다. 하지만 생성형 AI를 이용하면 이러한 웹 개발 기술을 직접 사용하지 않고도 홈페이지를 만들 수 있습니다.

그렇다면 홈페이지 제작 경험이 전혀 없는 사람도 ChatGPT와 대화하는 것만으로 홈페이지를 만들 수 있을까요? 당연히 가능합니다.

백문이 불여일견입니다. 직접 실험해 보겠습니다.

1. 어떤 홈페이지를 만들어 볼까요?

홈페이지에는 여러 가지 형태가 있습니다.

상단 메뉴를 누르면 다른 페이지로 이동하는 홈페이지도 있고, 하나의 긴 화면에 모든 내용을 배치하는 홈페이지도 있습니다.

이번에는 홈페이지 제작 경험이 없는 사람도 쉽게 만들 수 있도록 두 번째 방식으로 만들어 보겠습니다.

이러한 형태를 원페이지(One Page) 홈페이지라고 합니다. 요즘 이런 형태의 홈페이지가 많이 보이는 것도 이유가 있는 것 같습니다.

회사소개, 사업소개, 주요실적, 오시는 길 등의 내용을 하나의 페이지에 배치하고, 상단 메뉴를 누르면 해당 내용이 있는 위치로 이동하는 방식입니다.

또한 컴퓨터와 스마트폰에서 화면 크기에 맞춰 디자인이 변경되는 반응형 홈페이지로 만들어 보겠습니다.

2. ChatGPT에 홈페이지를 만들어 달라고 요청하기

먼저 ChatGPT에서 새로운 채팅을 시작했습니다.

홈페이지 제작에 필요한 전문 용어를 최대한 사용하지 않고, 평소 다른 사람에게 설명하듯 다음과 같이 요청했습니다.

실제로 입력한 프롬프트

1. 단일 페이지로 되어 있는 반응형 홈페이지를 만들어줘

2. 첫 페이지는 메뉴 아래 사진이 나오고 그 사진이 여러장 움직이게 해줘

3. 메뉴를 눌렀을때 이동은 단일 페이지에서 이동할거야. 그럴려면 메뉴 내용은 아래로 붙게 되겠지.

4. 메뉴는 반응형 홈페이지 중에서 가장 무난한걸로 붙여줘

5. 메뉴 내용은 내가 수정할거니까 적당하게 채워줘

6. 이 정도면 홈페이지 만들 수 있겠니?

위 문장은 실제로 ChatGPT에 입력한 내용입니다.

HTML이나 CSS를 어떻게 작성해야 하는지 설명하지 않았고, 메뉴의 크기나 색상도 지정하지 않았습니다.

그저 어떤 형태의 홈페이지를 원하는지 간단하게 설명했습니다.

ChatGPT는 이 정도 설명으로도 홈페이지를 만들 수 있다고 답변했습니다.

그래서 이어서 다음과 같이 요청했습니다.

"만들어봐. 결과물 보자"

3. ChatGPT가 만든 홈페이지 확인하기

ChatGPT는 잠시 후 "onepage_responsive_demo.html" 이라는 HTML 파일을 만들어 주었습니다.

HTML 파일은 웹브라우저에서 홈페이지를 표시하기 위해 사용하는 파일입니다.

파일을 다운로드한 다음 크롬이나 엣지 같은 웹브라우저에서 열면 제작된 홈페이지를 확인할 수 있습니다.

이번에 만들어진 홈페이지에는 가상의 회사 이름인 "온담 스튜디오"가 사용되었습니다.

상단에는 회사소개, 사업소개, 주요실적, 오시는 길 등의 메뉴가 배치되었고, 그 아래에는 여러 장의 사진이 자동으로 바뀌는 영역이 만들어졌습니다.

메뉴를 클릭하면 다른 페이지로 이동하지 않고 같은 페이지의 해당 내용으로 화면이 이동했습니다.

처음 요청했던 단일 페이지 홈페이지가 만들어진 것입니다.

또한 스마트폰처럼 화면이 좁아지면 메뉴가 작은 버튼 형태로 바뀌도록 구성되었습니다.

이처럼 컴퓨터와 스마트폰의 화면 크기에 따라 배치가 달라지는 방식을 반응형 웹 디자인(Responsive Web Design)이라고 합니다.

실제로 만들어진 결과물은 처음 요청했던 조건을 상당 부분 충족했습니다.

물론 회사 이름과 소개 문구는 임시로 작성된 것이고, 사진도 실제 회사에서 사용할 이미지가 아니었습니다.

하지만 간단한 프롬프트만으로 홈페이지의 기본 디자인과 메뉴 기능을 갖춘 결과물을 얻을 수 있다는 점은 확인할 수 있었습니다.

4. 홈페이지를 만드는 데 정말 이것만으로 충분할까요?

이번 실험에서는 홈페이지를 만드는 데 필요한 코드를 직접 작성하지 않았습니다.

메뉴를 클릭했을 때 이동하는 기능이나 사진이 자동으로 바뀌는 기능도 ChatGPT가 작성했습니다.

그렇다고 이 홈페이지를 바로 운영할 수 있는 것은 아닙니다.

실제 회사 홈페이지로 사용하려면 회사 이름과 소개 내용을 변경하고, 사진과 연락처도 실제 정보로 교체해야 합니다.

또한 메뉴가 정상적으로 작동하는지 확인하고, 컴퓨터와 스마트폰에서 화면이 제대로 표시되는지도 점검해야 합니다.

여기서 한 가지 문제가 발견되었습니다.

이번에 ChatGPT가 제작한 홈페이지에는 무료 이미지 사이트인 Unsplash의 사진들이 사용되었습니다.

Unsplash는 일반적으로 사진의 무료 상업적 이용을 허용하고 있지만, 사진에 포함된 인물의 초상권이나 상표권 등 모든 권리까지 보장하는 것은 아닙니다.

따라서 이번에 사용된 사진들이 실제 회사 홈페이지에서 아무런 문제 없이 사용될 수 있다고 단정할 수 없습니다.

이번 강좌에서는 AI가 처음 제작한 홈페이지의 모습을 그대로 보여드리되, 해당 외부 이미지들은 실제 운영에 사용할 최종 예제에서 제외하기로 했습니다.

다음 2강에서는 ChatGPT를 이용해서 홈페이지에 필요한 이미지를 직접 만들고, 기존에 사용된 외부 이미지를 새로 제작한 이미지로 교체해 보겠습니다.

물론 AI가 만든 이미지 역시 기존 저작물과 지나치게 유사하거나 타인의 권리를 침해하지 않는지 확인할 필요가 있습니다.

홈페이지 제작에서 또 하나 중요한 것은 유지보수입니다.

이번처럼 하나의 페이지로 구성된 홈페이지는 비교적 간단하지만, 여러 페이지로 확장하거나 게시판과 회원가입 기능 등을 추가하려면 더 많은 작업이 필요합니다.

AI가 홈페이지를 만들어 준다고 해서 홈페이지 제작에 필요한 모든 과정이 자동으로 해결되는 것은 아닙니다.

5. 홈페이지 디자인이 마음에 들지 않는다면?

ChatGPT가 처음 만든 홈페이지가 마음에 들지 않을 수도 있습니다.

그럴 때는 처음부터 다시 만들 필요 없이 원하는 부분을 설명하고 수정을 요청하면 됩니다.

예를 들어 다음과 같이 말할 수 있습니다.

"상단 메뉴의 배경색을 짙은 파란색으로 바꾸고 글씨를 흰색으로 만들어줘."

또는 다음과 같이 요청할 수도 있습니다.

"메뉴 아래에 나오는 사진 영역을 세로로 좀 더 크게 만들어줘."

이렇게 실제 화면을 확인하면서 수정하는 방식이 처음부터 디자인을 상세하게 설명하는 것보다 쉬울 수 있습니다.

다만 AI가 코드를 수정하면서 기존에 정상적으로 작동하던 기능까지 변경할 수 있으므로, 마음에 드는 결과물이 나왔다면 파일을 따로 저장해 두는 것이 좋습니다.

6. 이번 실습을 마치며

이번에는 ChatGPT에 간단한 프롬프트를 입력해서 단일 페이지 반응형 홈페이지를 만들어 보았습니다.

홈페이지 제작에 필요한 전문적인 명령어를 사용하지 않았지만, 상단 메뉴와 자동으로 바뀌는 사진, 회사소개 등의 내용을 갖춘 홈페이지가 만들어졌습니다.

물론 실제 운영하기 위해서는 아직 해야 할 일이 남아 있습니다.

그렇지만 홈페이지 제작 경험이 없는 사람도 자신이 원하는 형태를 말로 설명하고, AI가 만든 결과물을 보면서 수정할 수 있다는 점은 충분히 활용할 만합니다.

이번 강좌에서는 홈페이지의 기본 형태를 만드는 것까지 진행했습니다.

다음 강좌에서는 ChatGPT로 홈페이지에 사용할 이미지를 직접 제작하고, 기존 외부 이미지를 교체하는 방법을 알아보겠습니다.