지난 시간까지 우리는 AI 3종(GPT / Cursor / AntiGravity)을 이용해서 바이브 코딩. 즉 직접 코딩하지 않고 AI를 활용해서 코딩하고 반응형 웹페이지를 만들어 보았습니다. 비개발자 입장에서는 이렇게 쉽게 웹 페이지를 만들 수 있다는 사실이 정말 최고였죠.
그와 동시에 개발자 입장에서는 효율과 두려움이 동시에 공존하는 상황을 보여줬습니다. 사실 개발에서 가장 기본이고 처음 입문하는 사람들이 가장 많이 하는 부분이 바로 HTML/CSS로 웹페이지를 만드는 부분이니까요. 실제로 처음 신입으로 들어가면 HTML과 CSS를 활용해 웹페이지를 편집하는 프론트엔드 부분이 가장 많이 주어지는 일 중 하나였습니다.
그렇지만 이제는 입문 / 초급 개발자를 고용해서 키우기 보다는 AI를 구독해서 사용하는 부분이 이제는 회사 입장에서는 이득인 상황이 되었죠.
But! 어찌되었든 AI가 생성한 모든 부분이 다 완벽하냐. 절대 그렇지 않습니다.
결국 AI를 활용하는 것도 사람이고 오류를 고쳐나가거나 방향을 잡아 발전 및 확장 시키는 것도 결국 사람입니다.
여기에 추가해 각종 보안성 검토와 내용에 대한 검증은 결국 사람의 능력에 달려 있습니다.
왜 이제는 개발자가 AI를 활용하는 능력이 더 중요해졌는지. 알 수 있는 대목입니다.
그래서 오늘은 반응형 웹 사이트에서 핵심이라고 할 수 있는 반응형 UI를 생성하고 이것을 3종 AI는 어떻게 생성하고 표현하며 사용자에게 결과물을 가져다 주는지. 그 차이를 비교 분석해볼까 합니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
AI 3종 외부 링크
오늘도 우리와 함께 할 AI 3종에 대한 외부 링크입니다. 저와 함께 이 시리즈로 진행해온지 벌써 5편째 입니다.
여러분들도 자신의 스타일에 맞는 AI를 선택해서 같이 실습해보면 좋겠습니다. (개인적으로 저는 Cursor 와 AntiGravity를 조합하는 편입니다)
- ✔️ GPT https://chatgpt.com
- ✔️ Cursor https://cursor.com
- ✔️ Google AntiGravity https://antigravity.dev
1. 왜 ‘반응형 UI’가 중요한가?
요즘 2030 세대는 IT·AI 기술 변화 속도 때문에 불안감을 자주 느낍니다. 취업난은 심해지고, 정규직도 언제든지 구조조정의 대상이 될 수 있습니다. 이런 흐름 속에서 많은 사람들이 “부업이라도 하나 해야 하는 것 아닌가?” 라는 고민을 하게 되죠.
특히 AI 기반 제작 툴이 급격히 발전하면서 이제는 개발 비전공자도 HTML/CSS로 충분히 웹페이지를 만들 수 있는 시대가 되었습니다. 그러나 단순히 페이지를 “보이게” 만드는 것만으로는 부족합니다.
방문자의 절반 이상이 PC·태블릿·모바일 등으로 접속하기 때문에 화면 크기에 따라 자동으로 형태가 바뀌는 페이지, 즉 반응형 UI와 반응형 로그인 페이지는 현대 웹에서 기본이자 필수 역량입니다.
하지만. 여기서 문제가 발생합니다.
- 비전공자,
- 개발을 갓 시작한 초급 개발자,
- 부업으로 웹페이지를 만드는 사람들
즉 전공자나 경력이 조금 있지 않는 개발자가 아닌 이상 이 “반응형” 이라는 단어 자체가 막막하게 느껴진다는 것입니다.
✔️ “반응형”은 도대체 무엇인가?
전문 용어 없이 그림으로 상상해보면 이렇게 됩니다.
📱 모바일(세로)
- 한 줄에 하나씩
- 화면 꽉 채우는 입력창
- 버튼도 전체 너비
🖥️ PC(가로)
- 여유 공간이 넓음
- 내용이 가운데 정렬
- 컴팩트한 레이아웃
즉, 하나의 HTML 파일이 기기의 너비만 보고 자동으로 형태를 바꾸는 것
→ 이것을 만들어주는 것이 바로 @media 라는 CSS 기능입니다.
@media(max-width: 480px) {
/* 화면이 480px 이하(스마트폰)일 때 실행되는 CSS */
}
이 개념만 이해하면 반응형 절반은 이해한 것입니다.
그래서 이번 Part 5에서는 AI 3개(GPT vs Cursor vs AntiGravity)에게 모두 똑같은 프롬프트를 입력하여 반응형 UI를 만들어보고,
누가 가장 실전에서 쓸 만한 코드를 주는지, 누가 초보자 친화적인지, 누가 최종 결과물이 가장 좋았는지 비교해보겠습니다.
2. 이번 편에서 만들고자 하는 목표 UI
PC 화면에서는
- 중앙 정렬된 깔끔한 로그인 박스
- 넉넉한 여백
- 기본적인 입력창 스타일
모바일 화면에서는
- 폭이 거의 전체 화면을 채움
- 입력창 간 간격이 좁아짐
- 버튼이 더 넓고 크게 변경
- 좀 더 읽기 쉬운 폰트 크기
즉, 단순히 ‘줄어드는 레이아웃’이 아니라 모바일 사용자가 더 편하게 입력할 수 있는 UI 구조를 만듭니다.
3. 오늘 사용할 공통 프롬프트
세 AI 모두에게 아래 동일한 프롬프트를 입력했습니다.
“HTML/CSS로 반응형 로그인 페이지를 만들어줘.
모바일 기준으로 UI가 자연스럽게 변하도록 media query를 포함해줘.
코드 설명도 함께 작성해줘.”
Tip) Media Query는 화면 크기(PC·태블릿·휴대폰)에 따라 웹페이지 디자인을 자동으로 바꿔주는 ‘조건문’을 말합니다.
우리는 다양한 화면으로 웹 페이지를 보기 때문에 화면 크기가 다 다릅니다. 그런 상황에서 똑같은 디자인을 보여주면 글자가 너무 작아지거나 이미지가 잘리는 등 많은 문제가 생깁니다.
그래서 화면에 맞게 레이아웃을 자동으로 조절해주는 기능이 필요하고 그것을 media query라고 부릅니다.
본 이미지에 대한 저작권은 블로그 주인 제로에게 있습니다.
본 이미지에 대한 저작권은 블로그 주인 제로에게 있습니다.
본 이미지에 대한 저작권은 블로그 주인 제로에게 있습니다.
4. AI별 결과 비교
① GPT가 만든 반응형 로그인 페이지
GPT는 구조적으로 가장 안정적이고 실무에서도 바로 사용할 수 있는 형태의 코드를 생성했습니다.
media query 구성도 깔끔하며 초보자도 쉽게 이해할 수 있게 설명을 잘 덧붙여줍니다.
✔️ GPT가 생성한 HTML 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>반응형 로그인</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- 전체 레이아웃을 감싸는 컨테이너 -->
<main class="page">
<!-- 카드형 로그인 박스 -->
<section class="login-card" aria-labelledby="login-title">
<h1 id="login-title" class="logo">서비스명</h1>
<!-- 간단한 설명 (선택) -->
<p class="subtitle">계정으로 로그인하세요</p>
<!-- 실제 로그인 폼: accessibility를 위해 label 사용 -->
<form class="login-form" action="#" method="post" novalidate>
<label for="username" class="sr-only">아이디</label>
<input id="username" name="username" type="text" placeholder="아이디 또는 이메일" required autocomplete="username" />
<label for="password" class="sr-only">비밀번호</label>
<input id="password" name="password" type="password" placeholder="비밀번호" required autocomplete="current-password" />
<div class="row">
<label class="checkbox">
<input type="checkbox" name="remember" />
<span>로그인 유지</span>
</label>
<a class="forgot" href="#" aria-label="비밀번호 찾기">비밀번호 찾기</a>
</div>
<button type="submit" class="btn">로그인</button>
</form>
<!-- 소셜 로그인 or 회원가입 링크 (선택) -->
<div class="foot">
<p>계정이 없으신가요? <a href="#">회원가입</a></p>
</div>
</section>
</main>
<!-- 화면 화면 리사이즈 시 키보드/포커스 관련 단순 스크립트 (선택) -->
<script>
// 모바일에서 포커스시 뷰포트 문제 완화 (선택)
(function() {
// iOS 주소창 등으로 인한 높이 문제 대응 (optional)
function setVH() {
document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');
}
setVH();
window.addEventListener('resize', setVH);
})();
</script>
</body>
</html>
✔️ GPT가 생성한 HTML 코드 설명
<main class="page">: 화면 전체 중앙 정렬을 담당합니다..login-card: 흰색 카드 박스(로그인 폼 영역). max-width를 설정해 모바일에서는 화면 너비에 맞게, 데스크탑에서는 중앙에 깔끔하게 보입니다.<form>내부는label(접근성),input(아이디/비밀번호), 체크박스, 비밀번호 찾기, 그리고button(로그인)으로 구성되어 있습니다. 화면 리더를 고려해sr-only클래스를 사용한 숨김 레이블을 적용했습니다.
✔️ GPT가 생성한 CSS 코드
/* 모바일 우선(모바일 먼저 스타일) */
/* CSS 변수로 색상/간격을 쉽게 변경 */
:root{
--bg: #f6f8fb;
--card: #ffffff;
--accent: #2563eb; /* 버튼 색상 */
--muted: #6b7280;
--radius: 12px;
--gap: 14px;
--max-width: 420px; /* 카드 최대 너비 */
}
/* 화면 전체를 사용 */
* { box-sizing: border-box; }
html,body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
background: linear-gradient(180deg, var(--bg), #eef2f7);
color: #111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* --vh 변수를 사용하면 모바일 환경에서 높이 문제 완화 */
.page {
min-height: calc(var(--vh, 1vh) * 100);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
/* 로그인 카드 */
.login-card {
width: 100%;
max-width: var(--max-width);
background: var(--card);
border-radius: var(--radius);
padding: 22px;
box-shadow: 0 6px 20px rgba(16,24,40,0.08);
display: flex;
flex-direction: column;
gap: 12px;
}
/* 브랜드 / 로고 텍스트 */
.logo {
margin: 0;
font-size: 1.25rem;
text-align: center;
letter-spacing: 0.2px;
}
/* 보조 텍스트 */
.subtitle {
margin: 0;
color: var(--muted);
text-align: center;
font-size: 0.95rem;
}
/* 폼 요소 */
.login-form {
display: flex;
flex-direction: column;
gap: var(--gap);
margin-top: 4px;
}
/* 입력창 공통 스타일 */
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 12px 14px;
border: 1px solid #e6e9ef;
border-radius: 10px;
font-size: 1rem;
outline: none;
transition: box-shadow .15s, border-color .15s;
background: #fff;
}
/* 포커스 시 강조 */
.login-form input:focus {
border-color: rgba(37,99,235,0.9);
box-shadow: 0 0 0 4px rgba(37,99,235,0.06);
}
/* 체크박스와 비밀번호찾기 한 줄 */
.row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
/* 체크박스 라벨 스타일 */
.checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--muted);
}
.checkbox input { transform: translateY(1px); }
/* 비밀번호 찾기 링크 */
.forgot {
color: var(--muted);
text-decoration: none;
}
.forgot:hover { text-decoration: underline; }
/* 버튼 */
.btn {
width: 100%;
padding: 12px 14px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: transform .08s ease, box-shadow .08s;
}
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: 0 0 0 4px rgba(37,99,235,0.12); outline: none; }
/* 아래 텍스트 (회원가입 링크) */
.foot {
text-align: center;
margin-top: 6px;
color: var(--muted);
font-size: 0.95rem;
}
.foot a { color: var(--accent); text-decoration: none; font-weight:600; }
.foot a:hover { text-decoration: underline; }
/* 스크린리더용 숨김 텍스트 (aria 레이블 등) */
.sr-only {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
white-space: nowrap;
}
/* ---------------------------
데스크탑(큰 화면) 스타일
breakpoint: 768px 이상
--------------------------- */
@media (min-width: 768px) {
.login-card {
padding: 32px;
gap: 18px;
}
.logo { font-size: 1.5rem; }
.subtitle { font-size: 1rem; }
.login-form input { padding: 14px 16px; font-size: 1.05rem; }
.btn { padding: 14px 16px; font-size: 1.05rem; }
}
/* 가로가 넓고 화면이 클 경우(일부 데스크탑) */
@media (min-width: 1100px) {
.page { padding: 40px; }
.login-card {
display: grid;
grid-template-columns: 1fr 320px;
align-items: center;
gap: 28px;
max-width: 900px;
}
/* 왼쪽에 이미지나 설명을 넣을 공간처럼 보이게 */
.login-card::before {
content: " ";
display:block;
height: 220px;
background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(99,102,241,0.06));
border-radius: 10px;
}
.logo { text-align: left; }
.subtitle { text-align: left; }
.login-form { margin-top: 0; }
}
✔️ GPT 가 생성한 CSS 코드 설명
- 모바일 우선 : 기본 스타일은 모바일에 맞춰 작성했습니다.
@media (min-width: 768px)등에서 데스크탑 보정이 들어갑니다. - 변수(:root) : 색상, 반경, 최대 너비 등 공통값을 변수로 선언해 수정하기 쉽습니다.
- 입력 포커스 : 접근성과 시각적 피드백을 위해
:focus상태에서 테두리와 그림자를 줍니다. - 반응형 포인트 :
768px이상: 패딩과 폰트 크기 증가 (태블릿/작은 데스크탑).1100px이상: 카드 레이아웃을 2열로 바꿔 왼쪽에 설명/이미지 공간을 만드는 등 넓은 화면에 맞춘 레이아웃을 적용했습니다.
✔️ GPT가 생성한 반응형 페이지 결과
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔️ GPT 평가
- 장점: 구조 완성도 높음, 반응형 전환 부드러움
- 단점: 창의적인 디자인은 다소 평범
- 초보자 친화도: ⭐⭐⭐⭐⭐
- 실무 활용도: ⭐⭐⭐⭐
② Cursor가 만든 로그인 페이지
Cursor는 디자인 감각이 가장 뛰어나고, 개발자 친화적인 구조를 제공합니다.
Tailwind나 styled-components 같은 실무 스타일도 자연스럽게 적용합니다.
✔️ Cursor가 생성한 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="styles/login.css">
</head>
<body>
<!--
메인 컨테이너
- 전체 페이지를 감싸는 래퍼
- flexbox를 사용하여 중앙 정렬
-->
<div class="container">
<!--
로그인 카드
- 실제 로그인 폼이 들어가는 카드 형태의 컨테이너
- 그림자 효과로 입체감 제공
-->
<div class="login-card">
<!--
로고/제목 영역
- 로그인 페이지의 상단 제목
-->
<div class="login-header">
<h1>로그인</h1>
<p>계정에 로그인하세요</p>
</div>
<!--
로그인 폼
- 사용자 입력을 받는 폼 요소
-->
<form class="login-form" action="#" method="POST">
<!--
이메일 입력 필드
- type="email": 이메일 형식 검증
- placeholder: 입력 힌트 제공
- required: 필수 입력 필드
-->
<div class="form-group">
<label for="email">이메일</label>
<input
type="email"
id="email"
name="email"
placeholder="이메일을 입력하세요"
required
autocomplete="email"
>
</div>
<!--
비밀번호 입력 필드
- type="password": 입력값을 마스킹
- autocomplete="current-password": 브라우저 자동완성 지원
-->
<div class="form-group">
<label for="password">비밀번호</label>
<input
type="password"
id="password"
name="password"
placeholder="비밀번호를 입력하세요"
required
autocomplete="current-password"
>
</div>
<!--
추가 옵션 영역
- 아이디 저장 체크박스
- 비밀번호 찾기 링크
-->
<div class="form-options">
<label class="checkbox-label">
<input type="checkbox" name="remember">
<span>아이디 저장</span>
</label>
<a href="#" class="forgot-password">비밀번호 찾기</a>
</div>
<!--
로그인 버튼
- type="submit": 폼 제출
- 주요 액션 버튼으로 강조된 스타일
-->
<button type="submit" class="login-button">로그인</button>
</form>
<!--
회원가입 링크
- 로그인 페이지 하단에 회원가입 링크 제공
-->
<div class="signup-link">
<p>계정이 없으신가요? <a href="#">회원가입</a></p>
</div>
</div>
</div>
</body>
</html>
✔️ Cursor 가 생성한 HTML 코드 설명
- 헤더: 문서 정보, CSS 연결, 반응형 뷰포트 설정
- 컨테이너: 전체를 감싸는 래퍼
- 로그인 카드: 폼이 들어가는 카드
- 로그인 헤더: “로그인” 제목과 설명
- 로그인 폼:
- 이메일 입력 필드 (type=”email”, required)
- 비밀번호 입력 필드 (type=”password”, required)
- 아이디 저장 체크박스 + 비밀번호 찾기 링크
- 로그인 버튼 (type=”submit”)
- 회원가입 링크: 하단 링크
✔️ Cursor 가 생성한 CSS코드
/*
전역 스타일 리셋 및 기본 설정
- 모든 요소의 기본 margin, padding 제거
- box-sizing을 border-box로 설정하여 크기 계산 단순화
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
body 스타일
- 전체 페이지의 배경색과 폰트 설정
- flexbox를 사용하여 중앙 정렬
- 최소 높이를 100vh로 설정하여 전체 화면 사용
*/
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/*
메인 컨테이너
- 전체 페이지를 감싸는 래퍼
- width: 100%로 설정하여 반응형 대응
*/
.container {
width: 100%;
max-width: 450px;
}
/*
로그인 카드
- 실제 로그인 폼이 들어가는 카드
- 배경색, 둥근 모서리, 그림자 효과로 입체감 제공
- padding으로 내부 여백 확보
*/
.login-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
padding: 40px;
width: 100%;
}
/*
로그인 헤더 (제목 영역)
- 로그인 페이지의 상단 제목과 설명
- text-align: center로 중앙 정렬
- margin-bottom으로 하단 여백 확보
*/
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
color: #333;
font-size: 32px;
margin-bottom: 10px;
font-weight: 600;
}
.login-header p {
color: #666;
font-size: 14px;
}
/*
폼 그룹
- 각 입력 필드를 감싸는 컨테이너
- margin-bottom으로 필드 간 간격 확보
*/
.form-group {
margin-bottom: 20px;
}
/*
라벨 스타일
- 입력 필드 위에 표시되는 텍스트
- display: block으로 한 줄 차지
- margin-bottom으로 입력 필드와 간격 확보
*/
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-size: 14px;
font-weight: 500;
}
/*
입력 필드 스타일
- width: 100%로 부모 요소의 전체 너비 사용
- padding으로 내부 여백 확보
- border와 border-radius로 둥근 모서리 적용
- transition으로 포커스 시 부드러운 전환 효과
*/
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
outline: none;
}
/*
입력 필드 포커스 상태
- 포커스 시 border 색상 변경
- box-shadow로 강조 효과
*/
.form-group input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/*
폼 옵션 영역
- 아이디 저장 체크박스와 비밀번호 찾기 링크
- display: flex로 양쪽 끝 정렬
- justify-content: space-between으로 좌우 배치
*/
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
/*
체크박스 라벨
- display: flex로 체크박스와 텍스트를 가로로 배치
- align-items: center로 수직 중앙 정렬
- cursor: pointer로 클릭 가능한 요소임을 표시
*/
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
color: #666;
}
.checkbox-label input {
margin-right: 8px;
width: auto;
cursor: pointer;
}
/*
비밀번호 찾기 링크
- color로 링크 색상 설정
- text-decoration: none으로 밑줄 제거
- transition으로 호버 시 부드러운 전환
*/
.forgot-password {
color: #667eea;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #764ba2;
text-decoration: underline;
}
/*
로그인 버튼
- width: 100%로 전체 너비 사용
- padding으로 내부 여백 확보
- 배경 그라데이션과 둥근 모서리 적용
- color: white로 텍스트 색상 설정
- transition으로 호버 시 부드러운 전환
- cursor: pointer로 클릭 가능한 요소임을 표시
*/
.login-button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/*
로그인 버튼 호버 상태
- transform: translateY(-2px)로 살짝 위로 이동
- box-shadow로 그림자 강화하여 입체감 증가
*/
.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
/*
로그인 버튼 활성화 상태 (클릭 시)
- transform: translateY(0)로 원래 위치로 복귀
*/
.login-button:active {
transform: translateY(0);
}
/*
회원가입 링크 영역
- text-align: center로 중앙 정렬
- margin-top으로 상단 여백 확보
- color로 텍스트 색상 설정
*/
.signup-link {
text-align: center;
margin-top: 25px;
color: #666;
font-size: 14px;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #764ba2;
text-decoration: underline;
}
/*
============================================
반응형 디자인 - 모바일 최적화
============================================
미디어 쿼리: 화면 너비가 768px 이하일 때 적용
- 태블릿 및 모바일 기기 대응
*/
@media (max-width: 768px) {
/*
body 패딩 조정
- 모바일에서는 패딩을 줄여 더 많은 공간 확보
*/
body {
padding: 10px;
}
/*
로그인 카드 패딩 조정
- 모바일에서는 패딩을 줄여 화면 공간 효율적 사용
- border-radius도 약간 줄여 모바일에 맞게 조정
*/
.login-card {
padding: 30px 25px;
border-radius: 15px;
}
/*
로그인 헤더 제목 크기 조정
- 모바일에서는 폰트 크기를 줄여 가독성 유지
*/
.login-header h1 {
font-size: 28px;
}
/*
로그인 헤더 설명 텍스트 크기 조정
*/
.login-header p {
font-size: 13px;
}
/*
폼 그룹 간격 조정
- 모바일에서는 간격을 줄여 스크롤 최소화
*/
.form-group {
margin-bottom: 18px;
}
/*
입력 필드 패딩 조정
- 모바일 터치 친화적인 크기 유지
- font-size를 약간 줄여 모바일에 최적화
*/
.form-group input {
padding: 14px 16px;
font-size: 16px; /* iOS 줌 방지를 위해 16px 유지 */
}
/*
폼 옵션 영역 조정
- 모바일에서는 flex-direction을 column으로 변경하여 세로 배치
- 또는 더 작은 폰트 크기 사용
*/
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
/*
비밀번호 찾기 링크를 오른쪽 정렬
*/
.forgot-password {
align-self: flex-end;
}
}
/*
미디어 쿼리: 화면 너비가 480px 이하일 때 적용
- 작은 모바일 기기 대응
*/
@media (max-width: 480px) {
/*
로그인 카드 패딩 추가 조정
- 작은 화면에서는 패딩을 더 줄임
*/
.login-card {
padding: 25px 20px;
border-radius: 12px;
}
/*
로그인 헤더 제목 크기 추가 조정
*/
.login-header h1 {
font-size: 24px;
margin-bottom: 8px;
}
/*
로그인 헤더 설명 텍스트 크기 추가 조정
*/
.login-header p {
font-size: 12px;
}
/*
로그인 헤더 하단 여백 조정
*/
.login-header {
margin-bottom: 25px;
}
/*
폼 그룹 간격 추가 조정
*/
.form-group {
margin-bottom: 16px;
}
/*
입력 필드 패딩 추가 조정
*/
.form-group input {
padding: 12px 14px;
}
/*
로그인 버튼 패딩 조정
*/
.login-button {
padding: 12px;
font-size: 15px;
}
/*
회원가입 링크 상단 여백 조정
*/
.signup-link {
margin-top: 20px;
font-size: 13px;
}
}
/*
미디어 쿼리: 화면 너비가 360px 이하일 때 적용
- 매우 작은 모바일 기기 대응
*/
@media (max-width: 360px) {
/*
로그인 카드 패딩 최소화
*/
.login-card {
padding: 20px 15px;
}
/*
로그인 헤더 제목 크기 최소화
*/
.login-header h1 {
font-size: 22px;
}
/*
입력 필드 패딩 최소화
*/
.form-group input {
padding: 10px 12px;
}
}
✔️ Cursor 가 생성한 CSS코드 설명
- 기본 스타일
- 전역 리셋: 모든 요소 margin/padding 제거, box-sizing 설정
- Body: 그라데이션 배경, Flexbox 중앙 정렬
- 로그인 카드: 흰 배경, 둥근 모서리, 그림자 효과
- 입력 필드: 포커스 시 테두리 색상 변경 + 그림자 효과
- 버튼: 그라데이션 배경, 호버 시 살짝 위로 이동
- 반응형 미디어 쿼리
- 768px 이하: 패딩/폰트 크기 축소, 폼 옵션 세로 배치
- 480px 이하: 패딩/간격 추가 축소
- 360px 이하: 최소 패딩으로 공간 활용
- 주요 효과
- transition: 부드러운 애니메이션
- :hover, :focus: 인터랙션 피드백
- transform: 버튼 호버 효과
✔️ Cursor 가 생성한 반응형 페이지
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔️ Cursor 평가
- 장점: 실제 서비스 UI처럼 깔끔함
- 단점: 초보자에게는 다소 복잡함
- 초보자 친화도: ⭐⭐⭐
- 실무 활용도: ⭐⭐⭐⭐⭐
③ AntiGravity가 만든 로그인 페이지
AntiGravity는 빠르게 코드를 생성하지만 기본 구조가 단순합니다.
스타일이 단조롭고 media query의 완성도가 GPT·Cursor 대비 부족했습니다.
✔️ AntiGravity 가 생성한 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 - AntiGravity</title>
<link rel="stylesheet" href="style.css">
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="login-container">
<div class="login-header">
<h1>환영합니다</h1>
<p>계정에 로그인하여 계속하세요.</p>
</div>
<form class="login-form" action="#" method="POST">
<div class="input-group">
<label for="email">이메일</label>
<input type="email" id="email" name="email" placeholder="name@example.com" required>
</div>
<div class="input-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요" required>
</div>
<div class="form-actions">
<label class="checkbox-container">
<input type="checkbox" name="remember">
<span class="checkmark"></span>
로그인 유지
</label>
<a href="#" class="forgot-password">비밀번호 찾기</a>
</div>
<button type="submit" class="login-btn">로그인</button>
</form>
<div class="login-footer">
<p>계정이 없으신가요? <a href="#">회원가입</a></p>
</div>
</div>
</body>
</html>
✔️ AntiGravity 가 생성한 HTML 코드 설명
- 시맨틱 태그: 웹 접근성을 고려하여
<form>,<label>,<input>태그를 사용하여 구조를 잡았습니다. - 메타 태그:
<meta name="viewport" ...>는 모바일 기기에서 화면 배율이 깨지지 않고 반응형으로 동작하게 하는 핵심 태그입니다. - Google Fonts: ‘Inter’ 폰트를 사용하여 깔끔하고 현대적인 타이포그래피를 적용했습니다.
✔️ AntiGravity 가 생성한 CSS 코드
/* Reset & Base Styles */
:root {
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--text-color: #1f2937;
--text-light: #6b7280;
--bg-color: #f3f4f6;
--card-bg: #ffffff;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--radius: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--text-color);
}
/* Login Container */
.login-container {
background-color: var(--card-bg);
width: 100%;
max-width: 420px;
padding: 40px;
border-radius: var(--radius);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease;
}
/* Header */
.login-header {
text-align: center;
margin-bottom: 32px;
}
.login-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
color: #111827;
}
.login-header p {
color: var(--text-light);
font-size: 15px;
}
/* Form */
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: #374151;
}
.input-group input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 15px;
transition: all 0.2s ease;
outline: none;
}
.input-group input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
/* Actions */
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 14px;
}
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer;
color: var(--text-light);
}
.checkbox-container input {
margin-right: 8px;
width: 16px;
height: 16px;
accent-color: var(--primary-color);
}
.forgot-password {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.forgot-password:hover {
color: var(--primary-hover);
text-decoration: underline;
}
/* Button */
.login-btn {
width: 100%;
padding: 14px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.login-btn:hover {
background-color: var(--primary-hover);
}
.login-btn:active {
transform: scale(0.98);
}
/* Footer */
.login-footer {
margin-top: 24px;
text-align: center;
font-size: 14px;
color: var(--text-light);
}
.login-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.login-footer a:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 480px) {
body {
padding: 16px;
align-items: flex-start;
/* 모바일에서 키보드 올라올 때 가려짐 방지 */
padding-top: 40px;
}
.login-container {
padding: 24px;
box-shadow: none;
/* 모바일에서는 그림자 제거하여 더 깔끔하게 */
background-color: rgba(255, 255, 255, 0.95);
/* 약간의 투명도 */
}
.login-header h1 {
font-size: 24px;
}
.login-btn {
padding: 16px;
/* 터치 영역 확보 */
}
}
✔️ AntiGravity 가 생성한 CSS 코드 설명
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
- Flexbox 중앙 정렬 :
body에 Flexbox를 적용하여 로그인 카드가 화면 정중앙에 오도록 했습니다.min-height: 100vh는 화면 높이를 꽉 채우게 합니다. - 변수 사용 (
:root): 색상이나 테두리 반경 등을 변수로 관리하여 유지보수가 쉽도록 했습니다. - 인터랙션: 입력창(
input:focus)과 버튼(button:hover)에 상태 변화 효과를 주어 사용자 경험을 높였습니다.
3. 반응형 디자인 (Media Query)
@media (max-width: 480px) {
body {
padding: 16px;
align-items: flex-start;
padding-top: 40px;
}
.login-container {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.95);
}
}
- 모바일 최적화: 화면 폭이 480px 이하일 때 적용됩니다.
- 그림자 제거: 작은 화면에서는 복잡한 그림자보다 깔끔한 평면 디자인이 더 낫기 때문에
box-shadow: none을 적용했습니다. - 배경 투명도: 모바일 느낌을 살리기 위해 배경에 약간의 투명도를 주었습니다.
- 정렬 변경: 모바일 키보드가 올라올 때 화면이 가려지는 것을 방지하기 위해
align-items: flex-start로 변경하고 상단 여백을 주었습니다.
✔️ AntiGravity 가 생성한 반응형 페이지
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔️ AntiGravity 평가
- 장점: 커서와 거의 비슷한 코드 생성
- 단점: 초보자가 사용하기에 조금 어려울 수 있음.
- 초보자 친화도: ⭐⭐⭐
- 실무 활용도: ⭐⭐⭐⭐
5. AI 3종 비교 총평
| 비교 항목 | GPT | Cursor | AntiGravity |
|---|---|---|---|
| 반응형 품질 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 디자인 완성도 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 초보자 이해도 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 실무 적합성 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
✔️ 결론: 반응형 품질 + 교육용 관점에서 GPT가 가장 안정적
✔️ 실무 UI 관점 및 개발자 관점에서는 Cursor가 가장 만족도 높음
✔️ AntiGravity는 기본 구조 연습용 및 여러 디자인 변경 적용 등 테스트용으로 적합
6. 반응형 페이지 테스트 & 캡처 방법
로컬 및 AI가 띄워주는 웹 페이지를 휴대폰으로 보기에는 사실 제한되는 부분이 많습니다.
이에 반응형 페이지 테스트는 개발자 도구를 사용해서 테스트 할 수 있습니다.
테스트 방법
- 웹페이지 우클릭 → 검사(Inspect) / 혹은 F12 버튼
- 개발자도구 상단에 있는 모바일·태블릿 아이콘 클릭(Device Toolbar)
- iPhone / Galaxy / iPad 등 기기 선택
- 너비값을 직접 조절해 변화 확인
- 그대로 스크린샷 캡처 가능
📸 TIP:
Chrome 개발자도구는 “캡처 > 전체 페이지 스크린샷” 기능도 지원합니다.
7. 마무리하며
이번 Part 4에서는 AI 3종의 반응형 코드 품질을 직접 비교해 보았습니다.
제가 실제로 느낀 점은 다음과 같습니다.
- 입문자·부업러에게는 GPT가 가장 헷갈리지 않는 코드. 하지만 결과를 높이기 위해서는 Cursor를 활용하는 것이 더 좋아 보임.
- 개발자로 성장 중인 분에게는 Cursor의 UI가 더 유용합니다. 또한 각 코드의 해석과 역량 강화는 Cursor 가 압도적입니다.
- AntiGravity도 거의 Cursor와 비슷할 정도로 유용하고 또 개발 플랜과 워크스루를 작성해 준다는 점에서 가장 흥미로웠습니다. 문서작업도 병행해야 한다면 추천합니다.
AI를 잘 활용하면 초보자라도 단기간에 “실무에 가까운 결과물”을 만들 수 있습니다.
AI 시대에 개발자로서 경쟁력을 유지하고 싶다면, 이런 비교 경험들이 큰 자산이 됩니다.
8. 아직 보지 못했거나 더 궁금한 부분이 있다면?
- ✔️ AI 코딩 시리즈 다시보기
[HTML/CSS 입문] AI로 로그인 페이지 만들어보기 (GPT vs Cursor vs AntiGravity) | Part 1
[HTML/CSS 입문] AI로 반응형 로그인 페이지 개선하기 (GPT vs Cursor vs AntiGravity) | Part 2
[HTML/CSS 입문] AI로 반응형 로그인 페이지 확장하기 (GPT vs Cursor vs AntiGravity) | Part 3
[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4 - ✔️ AI활용 가이드편 다시보기
[AI] 비전공자·초급 개발자를 위한 AI 활용 가이드
[AI] 입문자 및 비전공자를 위한 필수 AI(인공지능) 용어 소개 25선 - ✔️ 그 외 관련 포스팅 다시보기
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점