바이브코딩 4편｜AI로 만든 홈페이지 디자인 수정하기, 초보자 실전 가이드

1. 바이브코딩에서 디자인 수정은 어떻게 할까?

기존 웹사이트 제작에서는 디자인을 변경하려면 CSS를 직접 수정하거나 웹디자이너에게 작업을 요청하는 경우가 많았습니다.

하지만 바이브코딩에서는 AI에게 원하는 변경 사항을 자연어로 설명할 수 있습니다.

AI 코딩 도구는 이러한 요청을 해석해 HTML, CSS 또는 관련 컴포넌트 코드를 수정합니다.

물론 AI가 항상 정확하게 수정하는 것은 아닙니다. 따라서 수정 요청 → 결과 확인 → 추가 수정 과정을 반복하는 것이 중요합니다.

2. 디자인 수정 전에 반드시 해야 할 일

본격적으로 디자인을 수정하기 전에 먼저 기존 홈페이지를 보존하는 것이 좋습니다.

AI가 예상과 다르게 코드를 변경하거나 기존 기능에 영향을 줄 수도 있기 때문입니다.

• 현재 홈페이지의 정상 작동 상태를 확인합니다.
• 프로젝트를 복제하거나 Git 등으로 변경 이력을 저장합니다.
• 현재 화면을 캡처해 비교 자료로 남깁니다.
• 한 번에 너무 많은 영역을 변경하지 않습니다.
• 수정 후 PC와 모바일 화면을 확인합니다.

일부 AI 웹사이트 제작 도구는 이전 버전으로 되돌리는 기능을 제공합니다. 사용하는 도구에서 버전 관리 기능을 지원하는지 확인해 두면 좋습니다.

3. 홈페이지 색상을 AI로 변경하는 방법

홈페이지의 분위기를 결정하는 중요한 요소 중 하나가 색상입니다.

같은 홈페이지라도 어떤 색상을 사용하는지에 따라 전문적인 기업 홈페이지처럼 보이기도 하고, 밝고 친근한 서비스처럼 보이기도 합니다.

지난 3편에서 제작한 ABC TECH 홈페이지를 예로 들어보겠습니다.

여기서 중요한 것은 변경할 내용과 변경하지 말아야 할 내용을 함께 설명하는 것입니다.

특정 색상 코드를 모르더라도 “차분한 네이비”, “따뜻한 베이지”, “고급스러운 블랙과 골드”처럼 표현할 수 있습니다.

4. 글꼴과 글자 크기를 수정하는 방법

홈페이지에서 글꼴은 단순한 장식이 아닙니다. 방문자가 내용을 얼마나 편안하게 읽을 수 있는지 결정하는 요소입니다.

특히 회사 홈페이지에서는 화려한 글꼴보다 가독성이 좋은 글꼴을 사용하는 것이 일반적으로 유리합니다.

위의 숫자는 예시입니다. 실제 화면에서는 제목 길이와 디자인에 맞게 조정해야 합니다.

특히 스마트폰에서는 PC용 큰 제목이 여러 줄로 나뉘거나 화면 밖으로 나가지 않는지 확인해야 합니다.

5. 첫 화면의 디자인을 수정하는 방법

홈페이지에 접속했을 때 가장 먼저 보이는 영역을 흔히 히어로 섹션(Hero Section)이라고 부릅니다.

이 영역에는 일반적으로 메인 이미지, 핵심 문구, 설명, 행동 유도 버튼 등이 배치됩니다.

ABC TECH의 첫 화면을 조금 더 세련되게 수정해보겠습니다.

이렇게 요청하면 홈페이지 전체를 다시 만들지 않고 첫 화면만 집중적으로 개선할 수 있습니다.

6. 이미지 크기와 배치를 수정하는 방법

이미지는 홈페이지의 인상을 결정하는 중요한 요소입니다.

특히 제품 소개 홈페이지에서는 제품 사진이 작거나 비율이 잘못되면 방문자가 제품을 제대로 확인하기 어렵습니다.

제품 이미지처럼 정확한 형태가 중요한 경우에는 원본 이미지의 비율과 내용을 유지하도록 명확하게 요청해야 합니다.

AI가 임의로 제품 이미지를 바꾸거나 새로운 제품 사진을 생성하지 않도록 지시하는 것도 중요합니다.

7. 메뉴와 버튼 디자인 수정하기

홈페이지 메뉴와 버튼은 방문자가 원하는 페이지로 이동하도록 돕는 핵심 요소입니다.

따라서 단순히 보기 좋은 디자인뿐 아니라 사용하기 편한 구조도 중요합니다.

디자인을 수정한 후에는 반드시 각 메뉴와 버튼이 정상적으로 작동하는지도 확인해야 합니다.

8. 여백만 조정해도 홈페이지가 달라진다

홈페이지 디자인이 답답하게 느껴지는 이유 중 하나는 여백이 부족하기 때문입니다.

제목과 본문, 이미지와 이미지, 섹션과 섹션 사이에 적절한 공간을 주면 훨씬 정돈된 느낌을 만들 수 있습니다.

여백은 많다고 무조건 좋은 것이 아닙니다. 콘텐츠의 양과 화면 크기를 고려해 균형을 잡는 것이 중요합니다.

9. 마음에 드는 홈페이지를 참고해 디자인 수정하기

어떤 디자인을 원하는지 말로 설명하기 어려울 때는 참고할 만한 홈페이지를 AI에게 보여주는 방법도 있습니다.

예를 들어 마음에 드는 사이트의 스크린샷을 제공하고 어떤 부분이 좋은지 설명하는 것입니다.

참고 사이트의 레이아웃과 분위기를 분석하는 것은 도움이 되지만 다른 사이트의 로고, 이미지, 디자인 자산을 허락 없이 그대로 복제하지 않도록 주의해야 합니다.

10. 디자인 수정에 사용할 수 있는 프롬프트 모음

지금까지 살펴본 내용을 실제 작업에서 활용할 수 있도록 정리했습니다.

11. 가장 효과적인 디자인 수정 요청 방법

AI에게 디자인 수정을 요청할 때는 다음 네 가지를 기억하면 좋습니다.

1. 어디를: 수정할 페이지와 영역을 지정합니다.
2. 무엇을: 변경할 디자인 요소를 설명합니다.
3. 어떻게: 원하는 색상, 크기, 배치 등을 구체적으로 알려줍니다.
4. 무엇을 유지할지: 변경하면 안 되는 콘텐츠와 기능을 지정합니다.

예를 들어 “홈페이지를 고급스럽게 바꿔줘”라는 요청보다 다음과 같이 설명하는 것이 좋습니다.

이 프롬프트는 ChatGPT, Claude Code, Cursor, Lovable, Bolt 등 다양한 AI 코딩 환경에서 상황에 맞게 수정해 활용할 수 있습니다.

12. 디자인 수정 후 반드시 확인해야 할 사항

AI가 디자인을 수정했다고 해서 바로 작업이 끝나는 것은 아닙니다.

다음 사항을 직접 확인해보세요.

• 메뉴가 정상적으로 작동하는가?
• 버튼을 클릭하면 올바른 위치로 이동하는가?
• 이미지가 깨지거나 잘리지 않는가?
• 텍스트가 배경과 충분히 구분되는가?
• PC와 모바일에서 레이아웃이 자연스러운가?
• 수정하지 말라고 한 콘텐츠가 그대로 유지되었는가?
• 페이지 로딩 속도가 지나치게 느려지지 않았는가?

특히 AI가 생성한 코드는 수정 과정에서 다른 부분에 영향을 줄 수 있으므로 주요 기능을 실제로 테스트하는 것이 좋습니다.

13. 정리: 바이브코딩 디자인 수정의 핵심

이번 4편에서는 AI로 만든 홈페이지의 디자인을 수정하는 방법을 살펴봤습니다.

핵심은 복잡한 디자인 프로그램이나 CSS 문법을 모두 외우는 것이 아닙니다.

원하는 변경 사항을 구체적으로 설명하고, AI가 만든 결과를 확인하면서 단계적으로 개선하는 것입니다.

처음에는 색상 하나를 바꾸는 것부터 시작해보세요. 그다음 글꼴, 이미지, 버튼, 여백을 수정하면서 자신이 원하는 홈페이지 디자인을 만들어갈 수 있습니다.

다음 5편에서는 PC와 스마트폰에서 모두 보기 좋은 반응형 홈페이지를 만드는 방법을 자세히 알아보겠습니다.

바이브코딩 FAQ