바이브코딩 5편｜AI로 반응형 홈페이지 만들기, PC·모바일 최적화 방법

1. 반응형 홈페이지란 무엇일까?

반응형 홈페이지는 사용자가 접속하는 기기의 화면 크기에 맞춰 레이아웃과 콘텐츠 배치가 자동으로 조정되는 웹사이트를 의미합니다.

예를 들어 PC에서는 제품 3개가 한 줄에 표시되지만, 스마트폰에서는 제품이 한 개씩 세로로 표시되도록 만들 수 있습니다.

중요한 것은 PC 화면을 단순히 작게 축소하는 것이 아니라, 기기에 맞게 화면 구성을 다시 배치하는 것입니다.

2. 바이브코딩에서 반응형 홈페이지는 어떻게 만들까?

기존 웹 개발에서는 CSS 미디어 쿼리(Media Query)를 사용해 화면 크기에 따른 디자인을 직접 설정했습니다.

바이브코딩에서는 이러한 작업을 AI에게 자연어로 요청할 수 있습니다.

이처럼 AI에게 수정 범위와 유지할 요소를 함께 설명하면 불필요한 변경을 줄일 수 있습니다.

3. PC와 모바일 화면은 무엇이 다를까?

반응형 홈페이지를 만들기 위해서는 화면 크기에 따라 어떤 요소를 변경해야 하는지 이해하는 것이 좋습니다.

위 구성은 일반적인 예시입니다. 실제 디자인은 홈페이지의 목적과 콘텐츠에 따라 달라질 수 있습니다.

4. 모바일 메뉴를 햄버거 메뉴로 변경하기

PC 홈페이지에서는 여러 메뉴를 가로로 배치할 수 있지만 스마트폰에서는 공간이 부족합니다.

이럴 때 많이 사용하는 것이 햄버거 메뉴입니다.

햄버거 메뉴는 보통 세 개의 가로줄 아이콘을 누르면 메뉴가 펼쳐지는 방식입니다.

여기서 768px은 예시 기준입니다. 실제로는 콘텐츠가 깨지기 시작하는 화면 너비를 기준으로 조정하는 것이 좋습니다.

5. 메인 이미지와 제목을 모바일에 맞게 수정하기

홈페이지 첫 화면에는 큰 이미지와 제목이 들어가는 경우가 많습니다.

하지만 PC용 가로 이미지를 스마트폰에 그대로 적용하면 중요한 피사체가 잘리거나 제목과 겹칠 수 있습니다.

특히 이미지에 제품이나 인물이 포함되어 있다면 모바일 화면에서 중요한 부분이 잘리지 않는지 직접 확인해야 합니다.

6. 제품 목록을 반응형 카드로 만들기

지난 3편에서 제작한 가상의 산업용 기계 제조기업 ABC TECH 홈페이지를 다시 예로 들어보겠습니다.

PC에서는 제품 3개가 한 줄에 보이도록 만들었지만 스마트폰에서는 제품 이미지가 너무 작아질 수 있습니다.

이럴 때는 화면 크기에 따라 제품 목록의 열 수를 변경하면 됩니다.

이렇게 하면 화면 크기가 바뀌더라도 제품 정보를 읽기 쉬운 형태로 유지할 수 있습니다.

7. 스마트폰에서 글씨가 너무 작다면?

모바일 홈페이지에서는 글씨가 너무 작아 읽기 어렵거나 제목이 너무 커서 여러 줄로 어색하게 나뉘는 문제가 발생할 수 있습니다.

따라서 글꼴 크기와 줄 간격을 화면 크기에 맞춰 조정해야 합니다.

글씨 크기는 정해진 하나의 값이 정답은 아닙니다. 실제 스마트폰에서 읽기 편한지 확인하면서 조정하는 것이 중요합니다.

8. 모바일 버튼은 손가락으로 누르기 편해야 한다

PC에서는 마우스로 작은 버튼을 클릭할 수 있지만 스마트폰에서는 손가락으로 버튼을 터치합니다.

따라서 버튼이 너무 작거나 버튼 사이 간격이 좁으면 잘못 누르기 쉽습니다.

이렇게 작은 부분까지 신경 쓰면 모바일 홈페이지의 사용성이 크게 개선될 수 있습니다.

9. AI에게 반응형 CSS 코드를 직접 요청할 수도 있다

AI 코딩 도구를 사용한다면 실제 CSS 코드를 생성하거나 수정하도록 요청할 수도 있습니다.

예를 들어 다음과 같은 CSS는 화면 너비에 따라 제품 카드의 열 수를 변경하는 간단한 예제입니다.

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

이 코드의 의미는 간단합니다.

• 기본 화면에서는 제품을 3열로 표시합니다.
• 화면 너비가 1024px 이하이면 2열로 표시합니다.
• 화면 너비가 768px 이하이면 1열로 표시합니다.

물론 이 CSS가 작동하려면 제품 목록을 감싸는 HTML 요소에 product-grid 클래스가 적용되어 있어야 합니다.

코드를 직접 이해하기 어렵다면 AI에게 해당 코드의 역할을 설명해달라고 요청하면 됩니다.

10. PC와 모바일 화면을 확인하는 방법

반응형 홈페이지를 만들었다면 실제로 화면 크기를 변경하면서 확인해야 합니다.

가장 간단한 방법 중 하나는 크롬 브라우저의 개발자 도구를 사용하는 것입니다.

크롬의 모바일 미리보기는 화면 크기를 확인하는 데 유용하지만 실제 스마트폰의 모든 동작을 완벽하게 재현하는 것은 아닙니다.

따라서 최종적으로는 실제 스마트폰에서도 홈페이지를 열어 확인하는 것이 좋습니다.

11. 반응형 홈페이지에서 자주 발생하는 오류

AI가 반응형 홈페이지를 만들더라도 몇 가지 문제가 발생할 수 있습니다.

특히 가로 스크롤이 발생할 때는 단순히 화면 밖으로 나간 내용을 숨기기보다 원인이 되는 요소를 찾아 수정하는 것이 좋습니다.

12. 반응형 홈페이지를 한 번에 수정하는 통합 프롬프트

지금까지 설명한 내용을 하나의 프롬프트로 정리해보겠습니다.

아래 프롬프트는 기존 홈페이지를 반응형으로 수정할 때 기본 양식으로 활용할 수 있습니다.

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

13. 반응형 홈페이지 완성 전 체크리스트

마지막으로 다음 사항을 확인해보세요.

이러한 항목을 하나씩 확인하면서 AI에게 수정 요청을 반복하면 반응형 홈페이지의 완성도를 높일 수 있습니다.

14. 정리: 반응형 홈페이지도 AI와 대화하며 만든다

이번 5편에서는 바이브코딩을 활용해 PC와 모바일에 맞는 반응형 홈페이지를 만드는 방법을 알아봤습니다.

핵심은 단순히 화면 크기를 줄이는 것이 아닙니다.

사용자가 어떤 기기로 접속하더라도 필요한 정보를 편리하게 확인하고 원하는 기능을 사용할 수 있도록 화면을 구성하는 것이 중요합니다.

AI를 이용하면 메뉴, 글꼴, 이미지, 버튼, 콘텐츠 배치를 자연어로 요청하면서 반응형 홈페이지를 만들 수 있습니다.

다만 AI가 만든 결과를 그대로 믿기보다 다양한 화면 크기와 실제 기기에서 확인하는 과정이 필요합니다.

다음 6편에서는 홈페이지에 문의폼, 지도, 검색, 게시판 등 실제로 필요한 기능을 추가하는 방법을 알아보겠습니다.

바이브코딩 FAQ