앞서 Part 1에서 GPT, Cursor, AntiGravity에게 “로그인 페이지를 만들어” 라고 요청했을 때
어떤 HTML/CSS가 나오는지 단순 비교했습니다.
하지만 실제 웹페이지를 만들 때 가장 중요한 요소는 “반응형(Responsive)”입니다.
반응형이란 PC 화면 / 태블릿 / 모바일 화면 크기에 따라 레이아웃이 자동으로 최적화되는 웹페이지를 말합니다.
비전공자, 부업러 분들이 가장 어려워하는 부분도 바로 이것입니다:
“PC에서는 예쁜데, 모바일에서 구겨져 보이는 이유…”
“폰트가 넘치고 레이아웃이 깨지는 이유…”
“어떤 기기에서도 자연스럽게 보이는 레이아웃이 필요한 이유…”
그래서 이번 Part 2에서는 AI에게 동일한 반응형 요구를 던졌을 때 GPT / Cursor / AntiGravity가 실제로 어떤 코드를 제안하는지 비교합니다.
[외부 링크] — AI 3종 바로가기
아래는 이번 실습에 사용된 AI 툴들의 공식 페이지 링크입니다.
각 도구는 특성이 다르므로 한 번씩 직접 체험해 보시면 차이를 더 명확히 느끼실 수 있습니다.
🔗 1. ChatGPT (GPT-4.1 / GPT-5.1)
🔗 2. Cursor AI (AI 기반 개발 IDE)
🔗 3. Google AntiGravity / Gemini 3.0
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
1. Part 2에서 사용한 실제 프롬프트
제 블로그를 방문하시는 분들은 모두 아시겠지만 “프롬프트까지 공개하여 투명하게 비교”하는 게 제 스타일입니다.
그렇기 때문에 이번에도 세 AI에게 동일하게 사용한 프롬프트를 공개합니다.
2. [GPT / Cursor / AntiGravity] – 공통 프롬프트
HTML/CSS로 반응형 로그인 페이지를 만들어줘.
요구사항 :
1. PC, 태블릿, 모바일에서 자연스럽게 보이도록 media query 포함
2. 가운데 정렬된 로그인 폼
3. ID / PW 입력창
4. 로그인 버튼
5. 전체 CSS는 깔끔하고 단순한 형태
6. flexbox로 정렬
코드는 HTML, CSS를 분리해서 설명해줘.
Tip) 저도 개발자다 보니 Cursor는 유료 Agent 버전을 사용하는데요. 오늘은 그래도 명확한 비교를 위해서 로그아웃 후 다른 계정으로 접속한 무료 버전을 가져왔습니다.
3. 결과 비교 (GPT vs Cursor vs AntiGravity)
본격적으로 비교하기 전에, “AI는 어떤 차이가 나는가?”를 먼저 설명해드리겠습니다.
| 항목 | GPT | Cursor | AntiGravity |
|---|---|---|---|
| 코드 품질 | 안정적, 구조화 잘됨 | 실무 스타일에 가장 가까움 | 실험적이지만 UI가 감각적 |
| 반응형 처리 | 기본적, 비교적 단순 | 가장 정확하고 실무스러운 media query | 감각적이나 break-point 다양 |
| 초보자 난이도 | 가장 쉬움 | 다소 어려울 수 있음 | 쉬우나 CSS가 길어질 때 있음 |
| 부업러 적합성 | 쉬운 페이지 제작용 최적화 | 개발자에게 최적화 | 이미지/랜딩 위주 부업에 적합 |
| 장점 | 설명력 최고 | 코드 품질, 생산성 매우 높음 | 트렌디한 UI/UX에 강함 |
4. GPT가 만든 반응형 로그인 페이지
✔ GPT 작성 HTML 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<form class="login-form">
<h2>로그인</h2>
<input type="text" placeholder="아이디" name="username" required>
<input type="password" placeholder="비밀번호" name="password" required>
<button type="submit">로그인</button>
</form>
</div>
</body>
</html>
HTML 소스코드 설명(비교를 위해 GPT 출력 그대로 가져왔습니다)
login-container→ 화면 전체를 차지하며 로그인 폼을 중앙 정렬합니다.login-form→ 실제 입력 폼으로, 내부에 제목, 입력창, 버튼 포함.<meta name="viewport" ...>→ 모바일 환경에서 화면 확대/축소를 방지하고 반응형 적용.
✔ CSS 소스코드
/* --- 전체 초기화 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
/* --- 로그인 컨테이너 --- */
.login-container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
}
/* --- 로그인 폼 --- */
.login-form {
width: 100%;
display: flex;
flex-direction: column;
}
.login-form h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.login-form input {
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.login-form button {
padding: 12px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-form button:hover {
background-color: #45a049;
}
/* --- 반응형 --- */
@media (max-width: 768px) {
.login-container {
max-width: 90%;
padding: 15px;
}
.login-form input,
.login-form button {
font-size: 14px;
padding: 10px;
}
}
@media (max-width: 480px) {
.login-form h2 {
font-size: 20px;
margin-bottom: 15px;
}
.login-form input,
.login-form button {
font-size: 14px;
padding: 10px;
}
}
CSS 설명(비교를 위해 GPT 출력 그대로 가져왔습니다)
- flexbox 사용 →
body와.login-container로 중앙 정렬. - 반응형 media query
- 태블릿(~768px): 로그인 박스 최대 너비 줄임, 폰트/패딩 조정
- 모바일(~480px): 글자 크기와 입력창/버튼 크기 최적화
- 버튼 hover 효과로 간단한 UI 향상.
- 전체적으로 깔끔하고 단순한 스타일 유지.
✔ GPT는 누가 봐도 이해하기 쉬운 구조 를 선호합니다.
✔ media query는 최소한으로, 단순함 유지
→ 입문자 · 부업러에게 가장 적합
→ 기초 토대를 잡는데 최고
5. Cursor가 만든 반응형 로그인 페이지
✔ HTML 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="login-card">
<h1 class="login-title">로그인</h1>
<form class="login-form">
<div class="form-group">
<label for="userId">아이디</label>
<input
type="text"
id="userId"
name="userId"
placeholder="아이디를 입력하세요"
required
/>
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input
type="password"
id="password"
name="password"
placeholder="비밀번호를 입력하세요"
required
/>
</div>
<button type="submit" class="login-button">로그인</button>
</form>
</div>
</div>
</body>
</html>
HTML 설명(비교를 위해 Cursor 출력 그대로 가져왔습니다)
- container로 전체 화면을 감싸고, login-card 안에 form-group으로 ID/PW 입력창과 login-button을 배치했습니다.
✔ CSS 소스코드
/* 기본 설정 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f3f4f6;
color: #111827;
}
/* 화면 전체 가운데 정렬 컨테이너 */
.container {
min-height: 100vh;
display: flex;
justify-content: center; /* 가로 중앙 */
align-items: center; /* 세로 중앙 */
padding: 16px;
}
/* 로그인 카드 */
.login-card {
width: 100%;
max-width: 400px;
background: #ffffff;
border-radius: 12px;
padding: 32px 28px;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 24px;
}
/* 제목 */
.login-title {
font-size: 24px;
font-weight: 700;
text-align: center;
}
/* 폼 */
.login-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 14px;
color: #4b5563;
}
.form-group input {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #d1d5db;
font-size: 14px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
background-color: #f9fafb;
}
.form-group input:focus {
border-color: #2563eb;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
/* 로그인 버튼 */
.login-button {
margin-top: 8px;
padding: 11px 12px;
border-radius: 8px;
border: none;
background: #2563eb;
color: #ffffff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
.login-button:hover {
background: #1d4ed8;
}
.login-button:active {
transform: translateY(1px);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
/* 모바일(기본)은 조금 더 꽉 차게 */
@media (max-width: 600px) {
.login-card {
padding: 24px 20px;
border-radius: 10px;
box-shadow:
0 6px 10px -4px rgba(0, 0, 0, 0.15),
0 2px 4px -2px rgba(0, 0, 0, 0.08);
}
.login-title {
font-size: 22px;
}
}
/* 태블릿: 살짝 넓게, 폰트도 약간 키움 */
@media (min-width: 601px) and (max-width: 1024px) {
.login-card {
max-width: 460px;
padding: 36px 32px;
}
.login-title {
font-size: 26px;
}
.form-group input {
font-size: 15px;
}
.login-button {
font-size: 16px;
}
}
/* 넓은 PC 화면: 폼 주변 여백을 조금 더 줌 */
@media (min-width: 1280px) {
.container {
padding: 32px;
}
.login-card {
max-width: 420px;
}
}
CSS 설명(비교를 위해 Cursor 출력 그대로 가져왔습니다)
- flexbox로 .container를 화면 정중앙 정렬 (justify-content, align-items).
- @media를 활용해 모바일(≤600px), 태블릿(601–1024px), PC(≥1280px)에서 카드 크기·패딩·폰트 크기만 살짝씩 바꿔 자연스럽게 반응형으로 만들었습니다.
✔ Cursor는 “실무 스타일”의 반응형 코드를 뽑습니다.
✔ padding, 폼 크기, breakpoint 정확
→ 개발자나 웹퍼블리셔에게 가장 익숙한 스타일
6. AntiGravity가 만든 반응형 로그인 페이지
✔ HTML 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<form class="login-form">
<h2>로그인</h2>
<div class="input-group">
<label for="username">아이디</label>
<input type="text" id="username" name="username" placeholder="아이디를 입력하세요" required>
</div>
<div class="input-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요" required>
</div>
<button type="submit" class="login-btn">로그인</button>
</form>
</div>
</body>
</html>
HTML 설명(비교를 위해 AntiGravity 출력 그대로 가져왔습니다)
HTML은 페이지의 뼈대를 담당하며, 로그인 폼의 논리적인 구조를 정의합니다.
meta name="viewport": 모바일 기기에서 화면 배율이 자동으로 조정되도록 설정하는 필수 태그입니다. 이것이 있어야 반응형 웹이 제대로 작동합니다..login-container: 화면 전체 중앙에 로그인 폼을 배치하기 위한 바깥쪽 컨테이너입니다..login-form: 실제 로그인 입력창과 버튼을 감싸는 카드 형태의 영역입니다..input-group: 라벨(label)과 입력창(input)을 세트로 묶어주어, 스타일링과 정렬을 용이하게 합니다.- 접근성 고려:
label의for속성과input의id를 연결하여, 라벨을 클릭해도 입력창에 포커스가 가도록 했습니다.
✔ CSS 소스코드
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-container {
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
}
.login-form {
background-color: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 20px;
}
.login-form h2 {
text-align: center;
color: #333;
margin-bottom: 10px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.input-group input {
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
}
.input-group input:focus {
border-color: #007bff;
outline: none;
}
.login-btn {
background-color: #007bff;
color: white;
padding: 14px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #0056b3;
}
/* Media Queries */
/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
.login-form {
padding: 30px;
max-width: 350px;
}
}
/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
.login-container {
padding: 15px;
}
.login-form {
padding: 20px;
box-shadow: none;
background-color: transparent;
}
.input-group input {
padding: 14px;
/* Larger touch target */
}
}
CSS 설명(비교를 위해 AntiGravity 출력 그대로 가져왔습니다)
CSS는 시각적인 디자인과 반응형 동작을 담당합니다.
- 기본 초기화 (
* { box-sizing: border-box; }): 모든 요소의 크기 계산에 테두리와 패딩을 포함시켜 레이아웃이 깨지는 것을 방지합니다. - 중앙 정렬 (Flexbox):
body에display: flex,justify-content: center,align-items: center를 적용하여 로그인 폼이 화면의 정중앙에 오도록 했습니다.min-height: 100vh로 화면 높이를 꽉 채워 수직 중앙 정렬이 가능하게 했습니다.
- 깔끔한 디자인:
.login-form에 흰색 배경과 그림자(box-shadow)를 주어 깔끔한 카드 UI를 만들었습니다.- 입력창과 버튼에 적절한 패딩과 둥근 모서리(
border-radius)를 적용하여 부드러운 느낌을 주었습니다.
- 반응형 (Media Queries):
- 태블릿 (
max-width: 768px): 폼의 패딩을 줄여 공간을 효율적으로 사용합니다. - 모바일 (
max-width: 480px):- 그림자와 배경색을 제거하거나 투명하게 하여 모바일 화면에 자연스럽게 녹아들게 했습니다.
- 입력창의 패딩을 늘려 터치하기 쉽게 만들었습니다.
- 화면 너비를 꽉 채우도록 하여 작은 화면에서도 답답하지 않게 했습니다.
- 태블릿 (
✔ 감각적인 UI 스타일
✔ box-shadow / radius / spacing이 세련됨
→ 랜딩페이지, 상세페이지, SNS 판매 페이지 만들 때 강점
7. 3개 AI 코드의 차이 분석 (입문자·부업러 기준 쉽게)
① 반응형에서 가장 중요한 부분: media query
media query는 “화면 크기에 따라 다른 스타일을 적용하는 문법”입니다.
예시:
@media (max-width: 768px) {
.container {
width: 90%;
}
}
이 한 줄이 반응형의 핵심인데,
- GPT: 가장 단순한 버전 사용
- Cursor: break-point 여러 개 지정
- AntiGravity: 태블릿/모바일 크기 비율까지 세밀 조정
이라는 차이가 있습니다.
② flexbox 정렬 차이
모든 AI가 flexbox를 사용했지만 디테일이 다릅니다.
- GPT: “딱 필요한 만큼” 코드
- Cursor: 수평/수직 정렬 구조가 명확
- AntiGravity: 여백과 정렬이 UI적으로 매우 예쁨
③ CSS 구조화 차이
- GPT → “초보자가 이해하기 쉬운 구조”
- Cursor → “실무에서 그대로 쓰는 구조”
- AntiGravity → “디자인 감성 + 코드 손보기 편함”
이 차이가 있기 때문에 부업러는 기초 토대는 GPT, 디자인은 AntiGravity 쪽이 더 익숙할 수 있고, 입문 개발자 혹은 프론트엔드 개발자는 Cursor와 AntiGravity가 더 쉬운 편입니다. 조금 더 익숙하거나 초급 정도 실력을 가진 백엔드 개발자는 Cursor 가 더 편할 수 있습니다.
8. 어떤 AI를 선택해야 하는가? (입문자의 현실기준)
✔ “처음 HTML/CSS를 시작한다면 → GPT”
- 용어 설명도 잘함
- 구조도 단순
- 실수 교정 잘함
✔ “웹 개발자, 백엔드 개발자로 성장하고 싶다면 → Cursor”
- 실무에서 그대로 쓰는 CSS가 나옴
- 고급 레이아웃에 강함
- 컴포넌트 단위 설계가 편함
✔ “디자인·부업·랜딩페이지 → AntiGravity”
- 시각적으로 가장 화려한 코드를 자동 생성
- SNS 판매 페이지, 배너, 랜딩 등 최적화
- Figma 감성 UI에 강함
9. 실무 개발자로서 한 가지 중요한 관점
현재 웹개발 트렌드는 “프론트엔드 코드를 직접 다 작성하는 시대” 에서 트렌디한 감각과 단순한 작업을 “AI에게 맡기고 고치는 시대” 로 넘어가고 있습니다. 또 다른 시각으로 보자면 이제 입문, 초급 개발자와 협업하기 보다는 초급 상 – 중급 이상의 개발자가 AI를 활용해서 효율적으로 일하는 시대라는 거죠.
즉, 이 말은
- 초급 개발자
- 프리랜서 부업러
- 비전공 입문자
모두에게 AI를 다루는 능력이 핵심 역량이라는 의미입니다.
특히 프론트엔드인 웹 디자인, 페이지 개발자의 경우AI가 HTML/CSS를 워낙 잘 만들고 빠르며 실수도 적기에
“코드를 작성하는 사람”보다 “코드의 오류를 찾고, 필요한 수정 방향을 제시하는 사람”이 더 중요해지고 있습니다.
10. 마무리 하며
이번 글에서는 GPT, Cursor, 그리고 구글의 AntiGravity를 활용해
“반응형 로그인 페이지” 라는 가장 기초적인 웹 요소와 더불어 어떤 스타일로 코딩하고 결과를 내는지를 비교 분석해 보았습니다.
단순히 HTML/CSS 코드를 생성하는 데서 끝나는 것이 아니라, 초보자 기준으로 어떤 AI가 더 친절하고, 어떤 AI가 더 실용적인지, 그리고 실제로 개발을 배우려는 입문자에게는 어떤 도구가 가장 도움이 될지를 직접 비교해본 시간입니다.
요즘처럼 기술이 하루가 멀다 하고 바뀌는 시대에, 이미 많은 직군에서 AI 활용 능력이 곧 경쟁력이 되어가고 있습니다.
특히 2030 세대가 겪는 취업난과 불안정성, 빠르게 바뀌는 산업 생태계를 고려하면 “AI를 활용한 자기계발”은 더 이상 선택이 아닌 필수입니다.
그런 의미에서, HTML/CSS처럼 가장 기초적인 기술도 AI를 적절히 활용하면 훨씬 빠르고 쉽게 이해하고 배울 수 있다는 것을 이번 실습을 통해 확인하셨을 것입니다. 앞으로 이어질 Part 3에서는 이 로그인 페이지를 더 발전시켜 실제 반응형 구조, 간단한 애니메이션, 그리고 작은 웹앱처럼 보이게 개선해보는 과정을 다룰 예정입니다.
웹 개발을 처음 시작하시든, 혹은 개발 지식이 전혀 없는 비전공자이시든, AI 시대에 스스로 무기를 갖추는 첫걸음으로 충분히 좋은 경험이 되실 것입니다.
11. 다음 편 예고
Part 3에서는 실제 모바일 UI 기준으로 각 AI의 반응형이 어떻게 다르게 보이는지 스크린샷과 함께 분석합니다.
또한
- 어떤 코드가 유지보수하기 쉬운지
- 어떤 코드가 실제 서비스에 적합한지
- 부업러 / 입문자 / 개발자별 추천 선택지
이 내용을 이어서 다루겠습니다. 많은 기대 부탁드립니다!
Part 1이 궁금하다면?
[HTML/CSS 입문] AI로 로그인 페이지 만들어보기 (GPT vs Cursor vs AntiGravity) | Part 1
HTML/CSS 가 궁금하다면?
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[입문] HTML/CSS 사용 (프론트엔드 2편) – 첫 웹페이지 만들기