ChatGPT 채팅만으로 반응형 홈페이지 만들어 보기 - SVG 로고 제작 (4)

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

지난 강좌에서는 온담 인테리어 로고를 투명 PNG 이미지로 만들고, 홈페이지에 직접 적용해 보았습니다.

이번에는 동일한 프롬프트를 사용하되, 마지막 조건을 SVG 벡터 로고를 만들어 달라는 내용으로 바꿔 보겠습니다. 이렇게 만든 SVG 파일이 지난번 PNG 파일과 어떻게 다른지도 알아보겠습니다.

1. PNG와 SVG는 무엇이 다를까요?

PNG는 작은 점인 픽셀로 이루어진 이미지입니다. 크게 확대하면 글자나 선의 가장자리가 깨져 보일 수 있습니다.

SVG는 선과 도형으로 표현할 수 있는 이미지 형식입니다. 이번처럼 로고와 글자를 모두 벡터로 만들면 크기를 키워도 가장자리가 선명하게 유지됩니다. 그래서 단순한 심볼이나 로고에 잘 어울립니다.

어도비 일러스트레이터에서 사용하는 "ai" 파일도 벡터 그래픽을 저장하는 파일 형식입니다. 여기서 AI는 Adobe Illustrator의 약자로, 인공지능이 만든 이미지라는 뜻이 아닙니다.

저도 디자이너가 보내준 파일의 확장자가 AI인 것을 보고 순간 착각할 때가 있습니다.

“음, 생성형 AI로 만들었군.”

2. 마지막 조건 바꾸기

지난 강좌의 프롬프트에서 투명 PNG로 만들어 달라는 마지막 조건을 SVG로 변경하고, 글자도 벡터 윤곽선으로 만들어 달라는 내용을 추가합니다.

ChatGPT에 입력할 프롬프트

- 회사명: 온담 인테리어

- 회사정보: 온담 인테리어는 따뜻하고 편안한 공간을 만드는 인테리어 회사

- 핵심 키워드: 전문성, 편안함, 공간 디자인, 인테리어

- 선호 색상: 브라운 계열로 해줘

- 로고 특징: 색상은 3가지 이내로 사용하고, 복잡한 장식 없이 단순한 선과 도형으로 표현. 그라데이션, 그림자, 입체 효과는 사용하지 않음.

- 로고 비율: 홈페이지 상단에 사용할 가로형 로고로, 여백을 최소화하고 1200 × 400px 크기로 제작해 줘.

- 로고 배치: 심볼은 왼쪽, 회사명은 오른쪽에 배치해 줘.

- 필수 조건: 배경은 투명하게 하고, 이미지를 삽입하지 말고 선과 도형으로 구성된 SVG 벡터 파일로 제작해 줘. 다운로드할 수 있게 해 줘.

- 회사 이름도 폰트 설치 여부에 영향을 받지 않도록 글자를 벡터 윤곽선으로 변환해 줘.

글자를 벡터 윤곽선으로 바꾸면 해당 폰트가 설치되지 않은 컴퓨터에서도 같은 모양으로 표시됩니다.

지난번에는 생성된 PNG 이미지의 크기가 요청한 크기와 달라 파이썬으로 다시 맞췄습니다.

SVG는 파일 안에서 가로와 세로 크기를 처음부터 1200 × 400으로 지정할 수 있습니다. 따라서 파이썬으로 이미지 크기를 다시 조정할 필요가 없습니다.

3. 완성된 SVG 확인하기

[처음 만든 SVG 로고]

처음 만든 SVG 로고가 조금 밋밋해서, 지난 강좌에서 만든 PNG 로고를 첨부하고 다시 만들어 달라고 요청했습니다.

ChatGPT에 입력할 프롬프트

- 첨부한 PNG 로고를 참고해서 만들어 줘.

[PNG 로고를 참고해서 만든 SVG 로고]

다운로드한 SVG 파일은 브라우저에서 열어볼 수 있습니다. 화면을 확대하면서 선과 글자가 선명하게 유지되는지 확인해 보세요.

로고가 마음에 들면 지난 강좌에서 만든 "images" 폴더에 "logo.svg"라는 이름으로 저장합니다.

홈페이지에 적용하는 방법은 지난 강좌와 같습니다. 기존 HTML 파일인 index.html을 첨부하고 다음과 같이 요청하면 됩니다.

ChatGPT에 입력할 프롬프트

- logo.png 대신에 logo.svg로 교체해봐. 경로는 같아 images/logo.svg야

기존 파일과 비교할 수 있도록 수정된 HTML 파일은 다른 이름으로 저장한 뒤 브라우저에서 열어보세요. 저는 index_01.html로 저장했습니다.

이번에는 기존 프롬프트의 조건을 바꿔 SVG 로고를 만드는 방법을 알아보았습니다. PNG와 SVG로 만든 로고를 직접 확대해 보면서 차이를 확인해 보세요.

[SVG로고가 적용된 홈페이지]