ChatGPT 채팅만으로 반응형 홈페이지 만들어 보기 - design.md를 활용하여 홈페이지 세련되게 다듬기 (6)

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

지난 강좌에서는 온담 인테리어 홈페이지에 시공절차, 자주 묻는 질문, 상담안내를 추가하고 스크롤 애니메이션 효과까지 적용했습니다.

이번에는 design.md를 활용하여 ChatGPT가 만든 홈페이지를 좀 더 세련되게 다듬어 보겠습니다.

아무리 정교하게 프롬프트를 작성해도 ChatGPT가 만든 홈페이지는 어딘지 모르게 AI가 만든 듯한 느낌이 남는 경우가 다반사입니다.

1. design.md란?

design.md는 웹사이트의 디자인 스타일을 AI가 이해할 수 있도록 정리한 문서입니다.

폰트, 색상, 여백, 버튼, 테두리, 그림자 등 디자인에 필요한 기준이 들어 있습니다.

쉽게 말하면 AI가 홈페이지를 디자인할 때 참고하는 설명서라고 생각하시면 됩니다.

이 파일을 ChatGPT에 첨부하면 디자인 기준에 맞춰 기존 홈페이지를 수정하도록 요청할 수 있습니다.

2. design.md 다운로드 받기

이번에는 유명 웹사이트의 디자인 스타일을 참고할 수 있는 사이트를 이용하겠습니다. 아래 링크를 클릭하시면

getdesign.md 사이트로 이동하실 수 있습니다.

https://getdesign.md

[getdesign.md 사이트에 처음 접속한 화면]

사이트에 접속하면 여러 유명 기업의 디자인을 분석한 design.md 파일을 찾아볼 수 있습니다. 목록에서 마음에 드는 md파일을 클릭하면

다운로드 화면이 나옵니다

[getdesign.md 사이트의 다운로드 화면]

저는 Airbnb의 design.md 파일을 골랐습니다. 파일을 다운로드하려면 회원가입이 필요합니다. 저 같은 경우는 구글계정으로 로그인을

사용해서 다운로드 하였습니다.

3. ChatGPT에 design.md 적용하기

먼저 지난 강좌에서 완성한 온담 인테리어 HTML 파일과 다운로드한 Airbnb design.md 파일을 ChatGPT 채팅창에 첨부합니다.

그리고 다음과 같이 요청하겠습니다.

ChatGPT에 입력할 프롬프트

- 첨부한 온담 인테리어 HTML 파일에 Airbnb design.md를 적용해 줘.

- 기존 홈페이지의 구조와 섹션, 기능은 그대로 유지하고 폰트, 색상, 질감만 변경해 줘.

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

ChatGPT가 만들어 준 HTML 파일을 다운로드하여 브라우저에서 확인해 보겠습니다.

홈페이지 곳곳의 색상과 디자인이 변경된 것을 확인할 수 있습니다. 특히 디자인이 마음에 들지 않았던 시공절차와 상담안내가 훨씬 세련되게 변경되었습니다.

그런데 폰트는 기존 홈페이지와 거의 차이가 없습니다.

"Airbnb.md 를 적용했는데 폰트는 기존과 그대로네" ChatGPT에게 물어봤습니다.

Airbnb에서 사용하는 전용 폰트는 일반적으로 자유롭게 사용할 수 없기 때문에 ChatGPT가 대체 폰트를 사용했다고 말합니다.

대체 폰트도 기존 한글 폰트와 비슷해서 사람눈에는 변화가 없던 것으로 보인 것입니다.

한글 폰트를 확실하게 변경하려면 Google Fonts를 활용하는 것이 좋습니다. 이 부분은 다음 강좌에서 다뤄보겠습니다.

4. 홈페이지 로고 변경하기

홈페이지 디자인은 마음에 들게 변경되었지만 기존 로고가 새로운 디자인과 잘 어울리지 않습니다.

먼저 기존에 만들었던 "logo.svg" 파일을 ChatGPT에 첨부하고 다음과 같이 요청하겠습니다.

ChatGPT에 입력할 프롬프트

- 첨부한 온담 인테리어 로고를 Airbnb design.md를 적용한 홈페이지와 어울리도록 변경해 줘.

- Airbnb의 대표 색상인 Rausch를 사용하고, 여기에 어울리는 색상 두 가지를 추가하여 만들어 줘.

- 기존 로고의 형태와 글자는 그대로 유지해 줘.

- 배경은 투명하게 유지하고 SVG 파일로 만들어 줘.

- 완성된 파일은 logo_new.svg라는 이름으로 다운로드할 수 있게 해 줘.

ChatGPT가 만들어 준 로고를 다운로드하여 확인해 보겠습니다.

기존 로고의 형태는 유지하면서 새로운 홈페이지 디자인에 어울리도록 변경되었습니다.

5. 변경한 로고 적용하기

다운로드한 "logo_new.svg" 파일을 기존에 사용하던 homepage_v1에 있는 "images" 폴더에 넣습니다.

그리고 ChatGPT에 다음과 같이 요청하겠습니다.

ChatGPT에 입력할 프롬프트

- 현재 온담 인테리어 홈페이지의 로고를 새롭게 만든 logo_new.svg로 변경해 줘.

- 기존 홈페이지의 구조와 섹션, 기능은 그대로 유지해 줘.

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

수정된 HTML 파일을 다운로드하여 확인하면 새로운 로고가 적용된 것을 확인할 수 있습니다.

6. 완성된 홈페이지 확인하기

이번 강좌에서는 design.md를 활용하여 기존 온담 인테리어 홈페이지의 디자인을 변경하고 로고까지 수정해 보았습니다.

기존 홈페이지의 구조와 기능은 그대로 유지했지만 전체적인 분위기는 크게 달라졌습니다.

AI에게 단순히 홈페이지를 예쁘게 만들어 달라고 요청하는 것보다 디자인 기준을 제공하는 것이 더 좋은 결과를 얻는 방법이 될 수 있습니다.

이번에는 Airbnb의 design.md를 사용했지만 다른 디자인 파일을 적용하면 또 다른 분위기의 홈페이지를 만들 수 있습니다.

완성된 HTML 파일과 이미지가 포함된 전체 소스는 첨부파일에서 다운로드할 수 있으며 아래의 두개의 링크를 클릭하셔서 design.md가 미적용된 홈페이와 design.md를 적용한 홈페이지의 차이점을 확인 하실 수 있습니다.

[design.md가 미적용된 ChatGPT가 만든 홈페이지 확인]

[design.md를 적용한 ChatGPT가 만든 홈페이지 확인]

이처럼 ChatGPT를 이용하면 HTML이나 CSS를 직접 수정하지 않고도 기존 홈페이지의 디자인을 변경할 수 있습니다.

다음 강좌에서는 Google Fonts를 이용하여 홈페이지의 한글 폰트를 변경해 보겠습니다.