급변하는 사회와 다양한 AI(GPT, Corsur, AntiGravity) 활용의 중요성
여러분은 요즘 사회를 어떻게 느끼고 계신가요?
저는 아직 2년차 초급 개발자이긴 하지만 급격하게 발전하는 AI로 인해 편리하고 좋으면서도 무섭기까지 할 정도입니다.
이전에는 개발자를 뽑으려고 하면 어떤 자리는 모집도 되지 않았고 지원자조차 없었습니다. 한 명의 개발자가 굉장히 소중한 자원이었죠.
하지만 코로나 시기가 지나고 AI가 발전하기 시작하면서 취업난은 심화되고, 일부 2030 세대는 직장의 안정성조차 보장 받기 어려운 상황이 많아졌습니다. 혹은 정직원이더라도 연봉이 적은 부분도 있지만 연봉 인상률 보다 훨씬 무서운 물가 상승률. 떨어지지 않는 부동산. 근로 소득으로는 내 집 마련이 어려운 현실까지.
그렇다고 하여도 또 다른 측면으로 바라본다면 AI 기술의 급속한 발전은 인간의 일자리를 위협하는 치명적인 수단. 혹은 지시만 하면 알아서 해주는 단순한 도구가 아니라, 어떻게 활용하느냐에 따라 개인의 경쟁력과 수익 창출 수단이 될 수도 있는 사회입니다.
최근 들어 비개발자. 즉 아예 코딩조차 모르는 일반인이라도 AI를 활용해서 코딩, 랜딩 페이지, 상세 페이지 등을 만들어서 수익화를 한다거나 AI를 활용한 디자인으로 수익화를 하기도 하는 사람들이 있습니다.
다만 더 효율적으로 활용하기 위해서는 HTML과 CSS 기초를 알아두는 것이 핵심입니다.
개발자처럼 배우라는 말이 아닙니다. 상식, 교양 수준의 지식만 있으면 더 고효율을 뽑을 수 있다는 것이죠.
비개발자만 그럴까요? 저는 그렇게 생각하지 않습니다. 2년차 초급 개발자가 알면 얼마나 알겠냐고 하실 수 있지만. 이제는 여러가지 AI를 어떻게 활용하느냐에 따라 개발자도 역량이 달라질 것이라 생각합니다. 이번 시리즈에서는 입문 및 초급 개발자, 비개발자, 부업러 관점에서 GPT, Cursor, Antigravity 를 활용한 실습과 분석을 진행하고, AI의 성능을 비교해 볼까 합니다.
1. 실습 목표와 환경
이번 실습에서는 HTML과 CSS를 활용한 로그인 페이지를 AI를 활용해서 만들어 보려 합니다.
- 구현 기능
- 사용자 이름 입력창
- 비밀번호 입력창
- 로그인 버튼
- 간단한 반응형 웹 디자인 적용
- 개발 환경
- VS Code + 브라우저
- 사용 및 비교 AI : GPT, Cursor, Google Antigravity
반응형 웹이란?
화면 크기에 따라 자동으로 레이아웃이 조정되는 웹페이지를 말합니다. PC, 태블릿, 모바일 등 다양한 기기에서도 깨지지 않고 보기 좋게 디자인이 조정됩니다. 초급자와 부업러도 AI 코드 생성으로 쉽게 구현 가능합니다.
2. 동일 프롬프트 입력
가장 보편적으로 사용되는 Chat GPT 와 개발자들의 AI라고 불리는 Cursor 마지막으로 가장 최근에 출시되어 반향을 일으키고 있는 Google Antigravity를 사용하여 비교 분석을 해보려 합니다.
AI 외부 링크 :
세 AI에 동일한 프롬프트를 입력해봅니다.
HTML과 CSS로 로그인 페이지를 만들어 줘.
로그인 페이지에는 사용자 이름, 비밀번호 입력 창, 로그인 버튼이 있어야 해.
그리고 간단한 반응형 웹 디자인을 적용해 줘.
이렇게 구성한 프롬프트로 세가지 AI에게 동일 조건을 주겠습니다.
AI가 생성하는 코드의 완결성, 직관성, 반응형 처리 정도를 비교할 수 있습니다.
3. AI별 코드 생성 및 분석
GPT
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<style>
/* 기본 스타일 초기화 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f2f5;
}
.login-container {
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.login-container input {
width: 100%;
padding: 12px 15px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.login-container button {
width: 100%;
padding: 12px;
margin-top: 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.login-container button:hover {
background-color: #45a049;
}
/* 반응형 디자인 */
@media (max-width: 500px) {
.login-container {
padding: 20px;
}
.login-container input,
.login-container button {
font-size: 14px;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="login-container">
<h2>로그인</h2>
<form>
<input type="text" placeholder="사용자 이름" required>
<input type="password" placeholder="비밀번호" required>
<button type="submit">로그인</button>
</form>
</div>
</body>
</html>
<input type="text">→ 텍스트 입력 창 생성, 사용자 이름 입력placeholder="사용자 이름"→ 회색 안내 문구 표시<input type="password">→ 비밀번호 입력 시 글자 숨김 처리<button>→ 클릭 가능한 로그인 버튼
장점:
- 직관적, 초급자 친화적, 수정 용이
단점:
- 반응형 구현이 제한적
- CSS가 단순하고 디자인 확장성 낮음
Cursor
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>로그인 페이지</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* 기본 리셋 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
background: linear-gradient(135deg, #4f46e5, #06b6d4);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #111827;
}
.container {
width: 100%;
max-width: 420px;
padding: 16px;
}
.card {
background: #ffffff;
border-radius: 16px;
padding: 32px 28px;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}
.title {
font-size: 24px;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
color: #111827;
}
.subtitle {
font-size: 14px;
text-align: center;
color: #6b7280;
margin-bottom: 24px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
color: #374151;
}
.input {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #d1d5db;
font-size: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease,
background-color 0.15s ease;
background-color: #f9fafb;
}
.input:focus {
outline: none;
border-color: #4f46e5;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
.btn {
width: 100%;
border: none;
border-radius: 9999px;
padding: 11px 16px;
margin-top: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
color: #ffffff;
background: linear-gradient(135deg, #4f46e5, #6366f1);
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.5);
transition: transform 0.1s ease, box-shadow 0.1s ease,
filter 0.1s ease;
}
.btn:hover {
filter: brightness(1.05);
box-shadow: 0 14px 30px rgba(79, 70, 229, 0.6);
transform: translateY(-1px);
}
.btn:active {
transform: translateY(1px);
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
}
.extra {
margin-top: 16px;
font-size: 13px;
text-align: center;
color: #6b7280;
}
.extra a {
color: #4f46e5;
text-decoration: none;
font-weight: 600;
}
.extra a:hover {
text-decoration: underline;
}
/* 반응형: 화면이 아주 좁아질 때 여백/폰트 조정 */
@media (max-width: 480px) {
.card {
padding: 24px 20px;
border-radius: 12px;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1 class="title">로그인</h1>
<p class="subtitle">서비스 이용을 위해 로그인해 주세요.</p>
<form>
<div class="form-group">
<label for="username">사용자 이름</label>
<input
type="text"
id="username"
class="input"
placeholder="아이디 또는 이메일"
required
/>
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input
type="password"
id="password"
class="input"
placeholder="비밀번호를 입력하세요"
required
/>
</div>
<button type="submit" class="btn">로그인</button>
</form>
<div class="extra">
비밀번호를 잊으셨나요?
<a href="#">비밀번호 찾기</a>
</div>
</div>
</div>
</body>
</html>
- 특징 : 코드 완결성이 뛰어나고 VS Code 내 편집에 최적화
- 장점 : HTML/CSS 구조가 잘 정리됨 → 바로 실행 가능
- 단점 : 세부 CSS 조정 필요
초급자와 부업러는 Cursor가 제공하는 파일 구조와 코드 정리 기능으로 쉽게 코드 수정 및 재사용 가능
Google Antigravity
<!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">
<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-card">
<div class="login-header">
<h1>환영합니다</h1>
<p>계정에 로그인하세요</p>
</div>
<form class="login-form">
<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>
<div class="form-actions">
<div class="remember-me">
<input type="checkbox" id="remember">
<label for="remember">로그인 유지</label>
</div>
<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>
</div>
</body>
</html>
:root {
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--bg-color: #f3f4f6;
--card-bg: #ffffff;
--text-main: #111827;
--text-secondary: #6b7280;
--border-color: #d1d5db;
--input-bg: #f9fafb;
--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: 0.5rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
line-height: 1.5;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.login-container {
width: 100%;
max-width: 400px;
}
.login-card {
background-color: var(--card-bg);
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
width: 100%;
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header h1 {
font-size: 1.875rem;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.5rem;
}
.login-header p {
color: var(--text-secondary);
font-size: 0.875rem;
}
.input-group {
margin-bottom: 1.25rem;
}
.input-group label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-main);
margin-bottom: 0.5rem;
}
.input-group input {
width: 100%;
padding: 0.75rem 1rem;
background-color: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 0.875rem;
transition: all 0.2s;
}
.input-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.remember-me {
display: flex;
align-items: center;
gap: 0.5rem;
}
.remember-me input[type="checkbox"] {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
border: 1px solid var(--border-color);
cursor: pointer;
}
.forgot-password {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.forgot-password:hover {
text-decoration: underline;
}
.login-btn {
width: 100%;
padding: 0.75rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.login-btn:hover {
background-color: var(--primary-hover);
}
.login-footer {
margin-top: 1.5rem;
text-align: center;
font-size: 0.875rem;
color: var(--text-secondary);
}
.login-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.login-footer a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.login-card {
padding: 1.5rem;
}
}
- 특징: AI Agent 기반, 멀티스텝 워크플로우 가능
- 장점: 화면 구성, 반응형, 코드 테스트까지 자동화 가능
- 단점: 안정성 부족, 학습 필요
- 적합 대상: 실무 개발자, 프로젝트 단위 AI 활용
Antigravity는 자동 테스트와 반응형 적용까지 수행 가능해, 반복 작업과 유지보수 효율이 높습니다.
(.html 파일과 .css 파일을 분리하여 코딩 하였습니다.)
4. 코드 실행 및 화면 확인
- VS Code에서 HTML 파일을 실행 후 브라우저 확인
- 로그인창, 버튼, 반응형 동작 여부 체크
5. 비개발자 / 부업러 시각으로의 분석
- HTML/CSS 초급자도 AI 코드 일부 수정만으로 쉽게 적용이 가능합니다.
- 반복되는 폼, 버튼, 레이아웃 작업은 AI가 자동 생성해 줍니다. → 효율 ↑
- 부업용 랜딩페이지, 회원가입 페이지, 템플릿 등 제작 가능
- Tip) AI가 만든 코드 중 필요한 부분만 수정 → 학습과 생산성 모두 향상
6. 현직 개발자(입문, 초급)으로의 분석
- 반복적인 로그인 UI/UX, 스타일링, 폼 검증 등은 AI를 활용하는 것이 효율성이 좋습니다.
- 비즈니스 로직, 보안, 유지보수는 사람이 직접 설계할 필요가 있습니다.
- Antigravity는 멀티스텝 처리 가능 → 화면 구성, 반응형, 코드 테스트 일부 자동화
- Tip) 실무에서는 AI + 사람 협업으로 효율 극대화
7. [Chat GPT] vs [Cursor AI] vs [ Google AntiGravity ] 비교 분석
| AI | 적합 대상 | 장점 | 단점 |
|---|---|---|---|
| GPT | 초급자 / 부업러 | 직관적, 이해 쉬움 | 반응형 제한, CSS 단순 |
| Cursor | 초급자 / 부업러 | 코드 완결성, 편집 용이 | 세부 CSS 조정 필요 |
| Antigravity | 실무 개발자 | 멀티스텝, 자동화 가능 | 안정성 부족, 학습 필요 |
8. 실습 후 느낀 점
- GPT와 Cursor는 초급자/부업러에게 최적
- Antigravity는 실무 개발자에게 강력하지만 출시된지 얼마 되지 않아 아직은 학습이 필요함.
- AI 코드 생성 + 직접 수작업 병행이 효율적
9. 결론 및 전략
- 초급자 / 부업러 : GPT 또는 Cursor → 반복 작업 AI 활용, 코드 일부 수정
- 실무 개발자 : Antigravity → 프로젝트 단위 멀티스텝 작업
10. 다음 포스팅 예고
이번 편에서 대표적인 3가지 AI를 비교해보면서 HTML/CSS를 활용한 로그인 페이지를 만들어 보았습니다. 다음 시간에는 AI를 활용한 HTML/CSS 회원가입 페이지를 만들어 보면서 비교 분석을 해볼까 합니다. 많은 기대 부탁드립니다.
11. 더 궁금하다면?
[AI] 비전공자·초급 개발자를 위한 AI 활용 가이드
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[입문] HTML/CSS 사용 (프론트엔드 2편) – 첫 웹페이지 만들기