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

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

지난 강좌에서는 ChatGPT와 간단한 대화만으로 가상의 공간 디자인 회사인 "온담 스튜디오" 홈페이지를 만들어 보았습니다.

HTML, CSS, JavaScript 코드를 직접 작성하지 않았지만 상단 메뉴와 자동으로 바뀌는 사진, 회사소개, 사업소개, 주요실적 등의 내용을 갖춘 반응형 홈페이지가 완성되었습니다.

실제로 홈페이지를 제작한다면 자신의 회사 이름과 업종, 사업 내용에 맞게 수정해야겠죠.

그런데 홈페이지를 만들다 보면 회사 분위기에 어울리는 사진이나 이미지가 필요할 때가 있습니다.

사진을 직접 촬영하거나 무료 이미지 사이트에서 찾아볼 수도 있지만, 이번에는 ChatGPT의 이미지 생성 기능을 이용해 보겠습니다.

지난 강좌에서 만든 온담 스튜디오 홈페이지에는 무료 이미지 사이트인 Unsplash의 사진 10장이 사용되었습니다.

무료 이미지라고 해서 저작권이나 초상권 등의 문제에서 완전히 자유로운 것은 아닙니다. 물론 AI가 생성한 이미지 역시 모든 법적 문제에서 자유로운 것은 아닙니다.

이번에는 이미지 생성 방법을 익히기 위해 메인 화면에서 자동으로 바뀌는 사진 3장을 직접 만들어 보겠습니다.

이미지 생성에는 일반적인 채팅 답변보다 시간이 오래 걸리는 편이므로, 이번 강좌에서는 메인 이미지 3장을 만들고 기존 홈페이지에 적용하

는 것까지 진행하겠습니다.

물론 이번에도 AI 에이전트나 별도의 이미지 편집 프로그램 없이 ChatGPT 채팅만으로 작업하겠습니다.

1. 홈페이지에 사용할 이미지 크기 알아보기

먼저 메인 화면에 사용할 이미지의 크기를 알아보겠습니다.

일반적으로 홈페이지에 표시된 사진 위에서 마우스 오른쪽 버튼을 누르면 크롬에서는 "이미지 주소 복사", 엣지에서는 "이미지 링크 복사" 메뉴가 나타납니다.

이미지 주소를 복사한 다음 브라우저의 새 탭에서 열면 이미지의 가로·세로 크기를 확인할 수 있습니다.

자, 직접 해보겠습니다.

지난 강좌에서 만든 홈페이지의 메인 사진 위에서 마우스 오른쪽 버튼을 눌렀습니다.

그런데 이미지 주소를 복사하는 메뉴가 보이지 않습니다.

앗! ChatGPT가 자동으로 바뀌는 사진을 일반적인 이미지 태그가 아니라 백그라운드 이미지로 넣은 모양입니다.

이런 경우에는 마우스 오른쪽 버튼으로 이미지 주소를 복사하기 어렵습니다.

물론 HTML 코드를 열어서 직접 확인할 수도 있습니다.

하지만 성능 좋은 ChatGPT를 놔두고 우리가 직접 코드를 뒤지는 것은 AI에게 실례입니다.

그냥 ChatGPT에 물어보겠습니다.

ChatGPT에 입력할 프롬프트

지난번에 만든 홈페이지에서 자동으로 바뀌는 메인 이미지 3장의 크기를 어디까지 알 수 있어? 정확하게 확인할 수 있는 크기만 알려줘.

ChatGPT는 홈페이지 코드를 확인한 뒤 이미지 주소에 가로 크기를 1800px로 요청하는 설정이 있지만, 세로 크기는 코드만으로 정확히 알 수 없다고 답변했습니다.

그렇다면 세로 크기는 ChatGPT에 맡겨 보겠습니다.

2. ChatGPT로 메인 이미지 3장 만들기

이제 본격적으로 이미지를 만들어 보겠습니다.

지난 강좌에서 홈페이지를 제작했던 ChatGPT 채팅을 그대로 이용하겠습니다.

어려운 이미지 제작 용어를 사용할 필요는 없습니다. 평소 다른 사람에게 사진을 부탁하듯 원하는 장면을 설명하면 됩니다.

이번에는 필요한 이미지 3장의 내용을 한 번에 설명하고, 한 장씩 만들어 보겠습니다.

ChatGPT에 입력할 프롬프트

- 지난번에 만든 온담 스튜디오 홈페이지의 메인 화면에 자동으로 바뀌는 이미지 3장을 만들 거야.

- 온담 스튜디오는 공간 디자인 회사인 걸로 보여.

- 첫 번째는 자연광이 들어오는 세련된 실내 공간, 두 번째는 넓은 창문이 있는 현대적인 사무실, 세 번째는 현대적인 건축물과 아름다운 실내 공 간이 연결되는 장면으로 만들어줘.

- 모두 실제 사진처럼 자연스럽고 따뜻하면서 고급스러운 분위기로 만들어줘.

- 홈페이지 제목과 설명이 왼쪽에 표시되니까 중요한 물건은 오른쪽에 배치하고, 이미지에 글자는 넣지 마.

- 세 장의 분위기와 색감도 비슷하게 맞춰줘.

- 이미지 생성이 끝나면 파이썬을 이용해서 가로 1800px, 세로는 홈페이지에 적합한 동일한 크기로 맞춰줘. 사진이 찌그러지지 않도록 비율을 유지해 줘.

-우선 첫 번째 이미지부터 만들어 보자..

ChatGPT가 첫 번째 이미지를 만들어 주었습니다.

[첫 번째 이미지 생성 결과 ]

이미지 생성에 총39초가 걸렸습니다. 위 캡처 화면에서 크게 표시된 사진은 ChatGPT가 이미지 생성 기능으로 만든 원본 이미지입니다.

그 아래에 있는 "main01.png" 파일은 원본 사진을 파이썬으로 가로 1800px, 세로 900px에 맞게 크기를 조정한 최종 이미지입니다.

ChatGPT의 이미지 생성 기능은 지원하는 이미지 크기가 정해져 있어 요청한 크기와 다르게 만들어질 수 있습니다.

그래서 이번에는 이미지 생성이 끝난 뒤 파이썬으로 크기를 조정하도록 요청했습니다.

여기서 파이썬은 사진을 새로 그리는 것이 아니라 이미 만들어진 사진의 크기를 조정하는 역할을 합니다.

따라서 홈페이지에 사용할 때는 채팅에 크게 표시된 원본 사진이 아니라 크기를 조정한 "main01.png" 파일을 다운로드해야 합니다.

첫 번째 이미지가 마음에 들었으니 두 번째 이미지도 만들어 보겠습니다.

ChatGPT에 입력할 프롬프트

- 좋아. 같은 조건으로 두 번째 이미지를 만들어줘.

두 번째 이미지도 만들어졌습니다. 그런데 이번에는 문제가 생겼습니다.

ChatGPT가 사진은 만들어 주었지만 파이썬으로 크기를 조정하는 작업을 빠뜨렸습니다.

분명 처음에 크기를 맞춰 달라고 요청했는데 말이죠.

이럴 때는 처음부터 사진을 다시 만들 필요가 없습니다. 빠뜨린 작업만 요청하면 됩니다.

ChatGPT에 입력할 프롬프트

- 두 번째 이미지의 크기가 첫 번째 이미지와 달라. 방금 생성한 이미지를 파이썬으로 가로 1800px, 세로 900px 크기로 맞춰줘. 사진이 찌그러지 지 않도록 비율을 유지해 줘.

이렇게 요청하니 ChatGPT가 두 번째 이미지도 크기를 조정한 파일로 제공했습니다.

AI가 요청한 작업을 한 번에 모두 처리하지 못하는 경우도 있습니다. 그럴 때는 잘못된 부분을 알려주고 다시 요청하면 됩니다.

이제 세 번째 이미지도 같은 방법으로 만들어 보겠습니다.

ChatGPT에 입력할 프롬프트

- 이번에는 같은 조건으로 세 번째 이미지를 만들어줘. 이미지 생성이 끝나면 파이썬으로 크기를 조정해서 앞서 만든 두 이미지와 동일한 1800 × 900px로 저장해 줘.

이렇게 하면 매번 이미지의 분위기와 구도, 크기 등을 길게 설명할 필요가 없습니다.

이미지가 마음에 들지 않는다면 원하는 부분만 이야기하면 됩니다.

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

- 전체적으로 너무 어두워. 햇빛이 조금 더 들어오고 밝은 분위기로 다시 만들어줘.

이미지 생성에는 시간이 걸리고 사용량 제한도 있을 수 있으므로 마음에 드는 이미지가 만들어졌다면 저장해 두는 것이 좋습니다.

3. 만들어진 이미지 저장하기

이제 홈페이지에 사용할 이미지 3장을 컴퓨터에 저장하겠습니다.

이번에는 ChatGPT가 생성한 원본 사진이 아니라 파이썬으로 크기를 조정한 최종 파일을 다운로드합니다.

파일 이름은 다음과 같이 정하겠습니다.

- "main01.png" : 첫 번째 메인 이미지

- "main02.png" : 두 번째 메인 이미지

- "main03.png" : 세 번째 메인 이미지

파일 이름은 반드시 이렇게 지정해야 하는 것은 아닙니다. 다만 알아보기 쉽게 정리하면 홈페이지에 적용할 때 편리합니다.

세 이미지가 모두 1800 × 900px로 만들어졌는지도 확인해 보겠습니다.

이미지가 준비되었다면 지난 강좌에서 다운로드한 홈페이지 HTML 파일도 준비하겠습니다.

4. ChatGPT에 메인 이미지 교체 요청하기

이제 새로 만든 이미지 3장을 홈페이지에 적용해 보겠습니다.

HTML 코드를 직접 수정할 필요는 없습니다.

지난 강좌에서 다운로드한 "onepage_responsive_demo.html" 파일과 방금 저장한 이미지 3장을 ChatGPT 채팅에 첨부하겠습니다.

그리고 다음과 같이 요청합니다.

ChatGPT에 입력할 프롬프트

- 첨부한 HTML 파일은 지난번에 만든 온담 스튜디오 홈페이지야

- 메인 화면에서 자동으로 바뀌는 기존 이미지 3장을 첨부한 main01.png, main02.png, main03.png로 교체해 줘봐. 다른 기능은 건드리면 안돼.

- 이미지 파일은 HTML 파일과 같은 위치에 images라는 폴더를 만들어 넣을 거야.

- 수정된 HTML 파일을 다운로드할 수 있게 해줘.

ChatGPT가 HTML 파일에서 기존 이미지 주소를 찾아 새로운 이미지 파일의 경로로 변경하도록 요청한 것입니다.

수정된 HTML 파일을 다운로드했다면 파일 이름을 "index.html"로 저장하겠습니다.

그리고 "index.html" 파일이 있는 위치에 "images" 폴더를 만들고, 새로 만든 이미지 3장을 넣습니다.

폴더 구조는 다음과 같습니다.

homepage/

index.html

images/

main01.png

main02.png

main03.png

여기서 "homepage"는 홈페이지 파일들을 보관하기 위해 만든 폴더 이름입니다.

이제 "index.html" 파일을 더블클릭해서 웹브라우저로 열어 보겠습니다.

메인 화면에 새로 만든 이미지가 나타나고 사진 3장이 자동으로 바뀐다면 성공입니다.

만약 사진이 나타나지 않는다면 이미지 파일 이름이나 폴더 위치가 잘못되었을 수 있습니다.

이럴 때도 HTML 코드를 직접 수정할 필요는 없습니다. ChatGPT에 폴더 구조를 알려주고 확인해 달라고 요청하면 됩니다.

이번 강좌에서는 ChatGPT로 홈페이지 메인 화면에 사용할 이미지 3장을 만들고, 기존 홈페이지에 적용하는 방법을 알아보았습니다.

이미지를 만들고 크기를 조정하는 작업부터 HTML 파일의 이미지 주소를 변경하는 작업까지 ChatGPT에 요청했습니다.

특히 이번 실습에서는 ChatGPT가 이미지 크기 조정 작업을 빠뜨리는 상황도 있었습니다.

AI가 항상 모든 작업을 완벽하게 처리하는 것은 아닙니다. 하지만 문제가 생겼을 때 무엇이 잘못되었는지 알려주면 다시 수정하도록 요청할 수 있습니다.

한 가지 주의할 점도 있습니다.

AI가 직접 생성한 이미지라고 해서 저작권이나 초상권 등의 문제에서 완전히 자유로운 것은 아닙니다. 실제 회사 홈페이지에 사용한다면 다른 사람의 권리를 침해하지 않는지 확인해야 합니다.

다음 3강에서는 온담 스튜디오 홈페이지의 회사 이름과 업종, 사업 내용을 변경해서 자신이 원하는 회사 홈페이지로 수정해 보겠습니다.

이번에 배운 이미지 생성 방법도 활용하면 업종에 맞는 사진을 직접 만들어 사용할 수 있습니다.