안티그래비티 사용법 : AI로 웹페이지 꾸미기

안티그래비티 사용법 : AI로 웹페이지 꾸미기

지난 시간에는 안티그래비티(Antigravity)를 이용해 나만의 첫 웹사이트를 만드는 방법을 알아봤습니다.

하지만 웹사이트가 실행된다고 해서 모든 작업이 끝난 것은 아닙니다.

제목이 작거나 색상이 어울리지 않는다면 방문자는 페이지를 읽기 불편할 수 있습니다.

이번 글에서는 AI 코딩 도구인 안티그래비티를 활용해 웹페이지 디자인을 개선하는 방법을 알아보겠습니다.

이번 글에서 배울 내용

• 웹페이지 제목과 글꼴 크기 조정
• 배경색과 글자색 변경
• 사진을 웹페이지에 추가하기
• 여백을 조정해 깔끔하게 만들기
• 모바일 화면 확인하기

1. 웹페이지 꾸미기 전 준비하기

웹페이지를 수정하기 전에 현재 화면을 먼저 캡처해 두세요.

수정 전과 수정 후를 비교하면 디자인이 얼마나 달라졌는지 쉽게 확인할 수 있습니다.

윈도우 화면 캡처 방법

1. 크롬에서 내 웹페이지를 엽니다.
2. 윈도우 키와 Shift 키, S 키를 누릅니다.
3. 캡처할 영역을 마우스로 선택합니다.
4. 캡처 이미지를 저장합니다.

이제 디자인을 수정할 준비가 끝났습니다.

2. 웹페이지 제목 꾸미기

웹페이지에서 가장 먼저 눈에 들어오는 것은 바로 제목입니다.

제목이 본문과 비슷한 크기라면 방문자는 중요한 내용을 구분하기 어렵습니다.

제목은 크게, 본문은 읽기 편한 크기로 설정하는 것이 좋습니다.

AI에게 이렇게 요청하세요.

안티그래비티 입력 프롬프트

맨 위 제목을 더 크고 굵게 만들어줘. 제목과 소개 문장은 가운데 정렬해줘. 전체적으로 깔끔하고 보기 좋게 수정해줘.

프롬프트를 입력하면 안티그래비티가 관련 코드를 수정합니다.

수정 결과를 확인한 후 마음에 들면 Accept all을 눌러 적용하세요.

제목이 너무 크다면 다음과 같이 추가 요청하면 됩니다.

제목이 너무 커. 한 줄에 자연스럽게 들어가도록 글자 크기를 조금 줄여줘.

3. 웹페이지 색상 변경하기

웹페이지에 너무 많은 색상을 사용하면 화면이 복잡해 보일 수 있습니다.

초보자라면 세 가지 색상을 중심으로 디자인하는 것을 추천합니다.

① 배경색

페이지 전체에 적용하는 색상입니다. 연한 하늘색이나 회색처럼 눈에 부담이 적은 색상이 좋습니다.

② 글자색

본문을 읽기 쉽게 만드는 색상입니다. 짙은 회색이나 남색을 추천합니다.

③ 포인트색

제목이나 중요한 부분에 사용하는 색상입니다. 청록색이나 주황색처럼 눈에 잘 띄는 색상을 선택할 수 있습니다.

AI에게 색상 변경 요청하기

안티그래비티 입력 프롬프트

페이지 배경색은 아주 연한 하늘색으로 바꿔줘. 글자색은 짙은 남색으로 설정해줘. 제목과 중요한 부분에는 청록색을 사용해줘. 전체적으로 차분하고 깔끔한 디자인으로 만들어줘.

색상은 많이 사용하는 것보다 일관성 있게 사용하는 것이 중요합니다.

4. 내 사진을 웹페이지에 추가하기

웹페이지에 사진을 추가하면 사이트가 더욱 개성 있게 바뀝니다.

프로필 사진이나 풍경 사진 등 원하는 이미지를 사용할 수 있습니다.

① 사진 파일 이름 변경하기

먼저 사용할 사진을 준비합니다.

파일 이름은 영어 소문자로 간단하게 정리하는 것이 좋습니다.

예를 들어 다음과 같이 변경합니다.

추천 파일 이름

my-photo.jpg

파일 확장명도 확인하세요. JPG 파일은 .jpg, PNG 파일은 .png로 끝나야 합니다.

확장명이 두 번 붙지 않도록 주의하는 것이 좋습니다.

② public 폴더에 사진 넣기

1. 안티그래비티에서 프로젝트를 엽니다.
2. 왼쪽 파일 목록에서 public 폴더를 찾습니다.
3. 준비한 사진을 폴더 안에 넣습니다.
4. 사진 파일이 정상적으로 들어갔는지 확인합니다.

public 폴더가 없다면 AI에게 폴더를 만들어 달라고 요청할 수 있습니다.

③ 사진을 웹페이지에 표시하기

안티그래비티 입력 프롬프트

public 폴더에 있는 my-photo.jpg 사진을 페이지 제목 아래에 넣어줘. 사진은 너무 크지 않게 해줘. 동그란 모양으로 표시하고 전체 디자인과 자연스럽게 어울리게 만들어줘.

파일 이름은 실제 사진 이름과 정확하게 일치해야 합니다.

5. 여백을 조정해 깔끔하게 만들기

웹페이지 디자인에서 생각보다 중요한 요소가 바로 여백입니다.

글자와 사진이 화면 가장자리에 붙어 있으면 답답한 느낌을 줄 수 있습니다.

반대로 적절한 여백을 주면 같은 내용도 훨씬 편하게 읽을 수 있습니다.

특히 제목과 사진, 소개 문장 사이의 간격을 적절하게 조정하는 것이 좋습니다.

AI에게 여백 조정 요청하기

안티그래비티 입력 프롬프트

내용이 화면 가장자리에 너무 붙어 있어. 위아래와 좌우에 여백을 넉넉하게 줘. 제목과 사진, 소개 문장 사이의 간격도 보기 좋게 조정해줘. 전체적으로 여유 있고 깔끔하게 만들어줘.

6. 모바일 화면 확인하기

웹사이트는 컴퓨터뿐 아니라 스마트폰에서도 잘 보여야 합니다.

컴퓨터에서는 괜찮아 보이던 페이지가 스마트폰에서는 깨져 보일 수 있습니다.

글자가 잘리거나 사진이 화면 밖으로 나갈 수도 있습니다.

따라서 웹사이트를 완성하기 전에 모바일 화면을 반드시 확인해야 합니다.

크롬에서 모바일 화면 확인하기

1. 크롬에서 내 웹페이지를 엽니다.
2. 키보드에서 F12를 누릅니다.
3. 개발자 도구가 열리면 휴대폰 모양 아이콘을 누릅니다.
4. 또는 Ctrl + Shift + M을 누릅니다.
5. 원하는 휴대폰 화면 크기를 선택합니다.

이제 스마트폰과 비슷한 크기로 웹페이지를 확인할 수 있습니다.

모바일 화면 수정 프롬프트

휴대폰처럼 좁은 화면에서도 글자와 사진이 잘리지 않도록 수정해줘. 화면 크기에 맞춰 요소의 크기와 배치를 조정해줘. 모바일에서도 읽기 편한 반응형 웹디자인으로 만들어줘.

수정이 끝났다면 실제 스마트폰에서도 접속해 확인하는 것이 좋습니다.

7. 수정한 화면이 바뀌지 않을 때

디자인 변경을 요청했는데 크롬 화면이 그대로라면 다음 내용을 확인해 보세요.

화면이 바뀌지 않는 경우

수정 사항이 적용되었는지 확인하세요. 필요하다면 크롬에서 F5를 눌러 새로고침합니다.

사진이 보이지 않는 경우

사진이 public 폴더에 있는지 확인하세요. 파일 이름과 확장명도 다시 확인합니다.

글자가 잘 보이지 않는 경우

배경색과 글자색의 대비를 높여 달라고 AI에게 요청하면 됩니다.

사이트가 열리지 않는 경우

개발 서버가 실행 중인지 확인하세요. 서버가 종료되었다면 다시 실행해야 합니다.

디자인을 되돌리고 싶은 경우

방금 수정한 디자인이 마음에 들지 않아. 수정 전 상태로 되돌려줘. 다른 방식으로 다시 만들어줘.

중요한 파일을 수정하기 전에는 별도로 백업해 두는 것이 안전합니다.

8. 안티그래비티 웹페이지 꾸미기 정리

이번 시간에는 안티그래비티를 활용해 웹페이지 디자인을 개선하는 방법을 알아봤습니다.

• 제목: 크고 굵게 설정하기
• 색상: 세 가지 색상을 중심으로 사용하기
• 사진: public 폴더에 넣어 표시하기
• 여백: 요소 사이에 적절한 공간 주기
• 모바일: 스마트폰 화면에서 확인하기

안티그래비티를 활용하면 복잡한 코드를 직접 작성하지 않아도 됩니다.

원하는 디자인을 한국어로 설명하면 AI가 코드를 수정하도록 요청할 수 있습니다.

처음부터 모든 것을 바꾸려고 하지 마세요. 제목부터 시작해서 색상과 사진, 여백 순서로 하나씩 수정하면 됩니다.

다음 단계: GitHub에 작업 저장하기

이제 나만의 웹페이지에 제목과 색상, 사진까지 추가했습니다.

하지만 지금까지 만든 웹사이트는 아직 내 컴퓨터의 프로젝트 폴더에 저장되어 있습니다.

다음 단계에서는 Git과 GitHub를 이용해 작업 내용을 안전하게 저장하는 방법을 알아보겠습니다.

GitHub를 활용하면 작업 이력을 기록하고 필요할 때 이전 상태를 확인하거나 복구하는 데 도움이 됩니다.

이 글은 안티그래비티 초보자를 위한 바이브코딩 학습 내용을 바탕으로 재구성했습니다. 실제 메뉴와 화면은 프로그램 버전에 따라 다르게 보일 수 있습니다.