이전 시간까지 우리는 AI를 활용해 반응형 홈페이지의 로그인 페이지를 만들어 보았습니다. 실습을 하면서 여러분들도 느끼셨을 겁니다.
AI의 종류가 이것 말고도 더 있을텐데. 어떤 AI가 어떤 상황에서 유용할까. 나는 어떤 AI와 성향이 맞는걸까. 라는 생각도 드셨을 것이며,
어떻게 프롬프트를 짜야할까 라는 고민도 많이 하시게 되었을 겁니다.
정상입니다. 저도 그랬었고 여전히 그렇게 생각하고 있답니다.
이제 우리는 조금 더 나아가서 로그인 이후의 대시보드 UI를 만드는 작업을 해볼 겁니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
1. “실제 서비스 화면”으로 진입
지금까지 우리는
- 로그인 페이지
- 반응형 구조
- 헤더/푸터/레이아웃
을 만들어보며 실무 웹의 기본 뼈대를 AI에게 시켜보았고 그 결과를 비교 분석해 보았습니다.
이제부터는 “진짜 서비스처럼 생긴 화면”, 즉 로그인 이후 사용자가 처음 보게 되는 대시보드(Dashboard)를 만들어 볼 겁니다.
대시보드는 어떤 서비스든 거의 동일한 구성을 갖기 때문에 이번 한번만 잘 보고 이해하면 앞으로도 자주 써먹을 수 있습니다.
- 상단 : Header
- 왼쪽 : Sidebar (선택)
- 오른쪽·가운데 : 카드 UI / 지표 / 알림 / 버튼
- 콘텐츠 배치는 대부분 Grid(그리드) 기반
이 정도만 이해해도 이제 실무 웹 화면 70% 이상을 읽고 수정할 수 있는 단계라고 보시면 됩니다.
이번 파트는 특히 입문자·부업러·비전공자가 어려워하는 “UI 구조 이해”를 정말 쉽게 풀어 설명했습니다. 제가 이해하고 실무에서 쓰게 된지 크게 오래된 것이 아니기 때문에 많은 도움이 되실 것이라 생각합니다.
그리고 언제나처럼 GPT, Cursor, AntiGravity에게 동일한 프롬프트를 적용하여 실제 결과물을 비교 분석 해보겠습니다.
AI 실습을 위한 외부 링크
- GPT: https://chat.openai.com
- Cursor: https://www.cursor.com
- AntiGravity: https://antigravity
2. 오늘 사용할 프롬프트
동일 프롬프트
“로그인 이후 보여줄 대시보드 UI를 HTML/CSS로 만들어줘.
조건:
1) Header는 유지
2) 4개의 카드 UI를 그리드 형태로 배치
3) 반응형: 모바일에서는 1열, 태블릿은 2열, PC에서는 4열
4) 카드 안에는 제목/간단한 설명 포함
5) CSS는 깔끔하고 초보자도 수정하기 쉽게 작성해줘”
마지막에는 생성한 HTML / CSS 코드를 이해하기 쉽게 설명해줘.
이해를 돕기 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
이해를 돕기 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
이해를 돕기 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
3. GPT vs Cursor vs AntiGravity | 코드 비교 분석
⭐ GPT 결과물
📌 특징 요약
- 초보자가 이해하기 쉬운 CSS 구조
- 불필요한 코드 없이 “가장 실무에 가까운 기본형”
- Grid 반응형이 정석 구조
- 클래스 이름도 직관적(Dashboard, card-grid, card)
📌 GPT가 생성한 HTML / CSS 소스코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>대시보드</title>
<!--
단일 파일 예제 (HTML + CSS). 초보자가 수정하기 쉽도록 변수와 주석을 넣었습니다.
-->
<style>
/* ========== 기본 변수 ========== */
:root{
--bg: #f6f7fb;
--card: #ffffff;
--accent: #2b6ef6; /* 변경하고 싶은 색으로 바꾸세요 */
--muted: #6b7280;
--radius: 12px;
--gap: 1rem;
--container-max: 1200px;
--card-padding: 1rem;
--shadow: 0 6px 18px rgba(20,24,40,0.06);
--transition: 200ms ease;
}
/* ========== 리셋 & 기본 스타일 ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
background:var(--bg);
color:#111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.4;
}
/* ========== 페이지 레이아웃 ========== */
.page{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:1.25rem;
}
.container{
width:100%;
max-width:var(--container-max);
}
/* ========== Header (유지) ========== */
header.app-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:0.75rem 1rem;
background:transparent;
}
.brand{
display:flex;
align-items:center;
gap:0.75rem;
}
.logo{
width:44px;
height:44px;
border-radius:10px;
background:linear-gradient(135deg,var(--accent),#7ea8ff);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
}
.title{
font-size:1.125rem;
font-weight:600;
}
.header-actions{
display:flex;
gap:0.5rem;
align-items:center;
}
.btn{
font-size:0.95rem;
padding:0.5rem 0.75rem;
border-radius:8px;
border:1px solid rgba(16,24,40,0.06);
background:var(--card);
box-shadow:var(--shadow);
cursor:pointer;
transition:transform var(--transition), box-shadow var(--transition);
}
.btn:active{transform:translateY(1px)}
/* ========== 대시보드 헤더/설명 ========== */
.dashboard-head{
margin-top:0.75rem;
margin-bottom:1rem;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:1rem;
}
.dashboard-head .h-left{
display:flex;
flex-direction:column;
gap:0.25rem;
}
.dashboard-head h2{margin:0;font-size:1.25rem}
.dashboard-head p{margin:0;color:var(--muted);font-size:0.95rem}
/* ========== 카드 그리드 ========== */
.grid{
display:grid;
grid-template-columns:repeat(1,1fr); /* 모바일 기본: 1열 */
gap:var(--gap);
}
/* 카드 스타일 */
.card{
background:var(--card);
border-radius:var(--radius);
padding:var(--card-padding);
box-shadow:var(--shadow);
transition:transform var(--transition), box-shadow var(--transition);
border:1px solid rgba(16,24,40,0.03);
display:flex;
flex-direction:column;
gap:0.5rem;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(20,24,40,0.08);
}
.card .card-title{
font-weight:700;
font-size:1rem;
}
.card .card-desc{
color:var(--muted);
font-size:0.95rem;
}
/* 숫자나 아이템을 오른쪽에 배치할 때 사용하는 작은 영역 */
.card .meta{
margin-top:auto; /* 설명 아래에 붙게 함 */
color:var(--muted);
font-size:0.9rem;
}
/* ========== 반응형 규칙 ========== */
/* 태블릿: 2열 (예: 640px 이상) */
@media (min-width:640px){
.grid{grid-template-columns:repeat(2,1fr)}
}
/* 데스크톱: 4열 (예: 1024px 이상) */
@media (min-width:1024px){
.grid{grid-template-columns:repeat(4,1fr)}
}
/* 작은 화면에서 헤더 레이아웃을 정리 */
@media (max-width:420px){
.dashboard-head{flex-direction:column;align-items:flex-start;gap:0.5rem}
.header-actions{gap:0.25rem}
.logo{width:40px;height:40px}
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<!-- Header (유지) -->
<header class="app-header">
<div class="brand">
<div class="logo">DB</div>
<div class="title">서비스 이름</div>
</div>
<div class="header-actions">
<button class="btn">알림</button>
<button class="btn">프로필</button>
</div>
</header>
<!-- 대시보드 상단 설명 -->
<section class="dashboard-head">
<div class="h-left">
<h2>대시보드</h2>
<p>여기는 로그인 이후 보여주는 요약 영역입니다. 카드로 핵심 정보를 확인하세요.</p>
</div>
<div class="h-right">
<!-- 필요하면 버튼/필터 추가 -->
</div>
</section>
<!-- 카드 그리드 -->
<main>
<div class="grid">
<article class="card">
<div class="card-title">총 사용자 수</div>
<div class="card-desc">최근 30일 동안의 활성 사용자 수 요약입니다.</div>
<div class="meta">1,234명</div>
</article>
<article class="card">
<div class="card-title">새로운 가입</div>
<div class="card-desc">오늘 등록된 신규 계정 수입니다.</div>
<div class="meta">24명</div>
</article>
<article class="card">
<div class="card-title">오류 발생률</div>
<div class="card-desc">최근 일주일간 서비스 에러 발생 비율.</div>
<div class="meta">0.8%</div>
</article>
<article class="card">
<div class="card-title">서버 응답시간</div>
<div class="card-desc">평균 응답시간 (ms).</div>
<div class="meta">120ms</div>
</article>
</div>
</main>
</div>
</div>
</body>
</html>
✔ GPT 가 생성한 HTML / CSS 소스코드 설명
- HTML 설명
<body> → .page → .container: 페이지 중앙 정렬과 너비 제한header.app-header: 항상 보이는 상단(유지).dashboard-head: 대시보드 상단 제목과 설명main .grid: 카드 그리드(반응형)- 각 카드:
article.card안에.card-title,.card-desc,.meta
- 각 카드:
- CSS 설명 : 색상 및 간격
:root안의 변수들을 바꾸면 전체 스타일에 반영됩니다.--accent: 포인트 색상 (로고, 강조 등)--bg/--card: 배경 및 카드 배경--gap: 카드 간격--radius: 카드 모서리 둥글기
- CSS 설명 : 반응형 브레이크 포인트 변경
- 태블릿 기준(2열):
@media (min-width:640px)— 640px 값을 원하는 값으로 바꿔 태블릿 기준을 조정하세요. - 데스크톱 기준(4열):
@media (min-width:1024px)— 1024px 값을 변경하면 데스크톱 전환 기준을 바꿀 수 있습니다.
- 태블릿 기준(2열):
- CSS 설명 : 카드 내용 편집
- 각 카드(
.card)는<article class="card">블록입니다.card-title,card-desc,meta세 요소만 채우면 됩니다. - 카드 추가/삭제는
.grid내부에 새로운<article class="card">...</article>를 추가/제거하세요. 그리드는 자동으로 열 수에 맞춰 배치합니다.
- 각 카드(
- CSS 내용 설명 : 헤더 유지
- 기존의 헤더 구조를 유지한 상태로
brand,header-actions가 있습니다. 로고나 버튼 텍스트만 바꾸면 됩니다.
- 기존의 헤더 구조를 유지한 상태로
- CSS 내용 설명 : 간단한 인터렉션
- 카드에 hover 시
transform과box-shadow효과가 있습니다. 원치 않으면.card:hover블록을 지우거나 주석 처리하세요.
- 카드에 hover 시
참고를 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
참고를 위해 이미지를 제공하며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ GPT 총평
“가장 안정적, 가장 실무적, 가장 깔끔.”
이번에는 GPT가 프롬프트를 해석하면서 HTML과 CSS를 따로 나누지 않았습니다.
소스 코드의 난이도는 입문자도 바로 수정 가능할 정도의 쉬운 구조였습니다.
실제로 유지보수 등을 중요시 여기는 공공기관·기업 프로젝트 구조와 가장 비슷합니다.
⭐ Cursor 결과물
📌 특징 요약
- 개발자용 에디터 기반이라 그런지 “컴포넌트화” 경향이 강함
- HTML/CSS가 분리되어 있고 변수명이 개발자 중심
- 초보자에게는 약간 복잡할 수 있음
- 대신 확장성과 유지보수력은 최고
📌 Cursor가 생성한 HTML/CSS 코드
<!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/dashboard.css">
</head>
<body>
<!-- Header 영역 -->
<header class="dashboard-header">
<div class="header-container">
<h1 class="header-title">대시보드</h1>
<div class="header-actions">
<span class="user-name">사용자님</span>
<button class="logout-button">로그아웃</button>
</div>
</div>
</header>
<!-- 메인 컨텐츠 영역 -->
<main class="dashboard-main">
<div class="dashboard-container">
<!-- 카드 그리드 -->
<div class="cards-grid">
<!-- 카드 1 -->
<div class="dashboard-card">
<h2 class="card-title">통계</h2>
<p class="card-description">
주요 통계 데이터를 한눈에 확인하세요. 실시간 업데이트되는 정보를 제공합니다.
</p>
</div>
<!-- 카드 2 -->
<div class="dashboard-card">
<h2 class="card-title">알림</h2>
<p class="card-description">
새로운 알림과 중요한 메시지를 확인하세요. 최신 업데이트를 놓치지 마세요.
</p>
</div>
<!-- 카드 3 -->
<div class="dashboard-card">
<h2 class="card-title">설정</h2>
<p class="card-description">
계정 설정과 환경 설정을 관리하세요. 개인화된 옵션을 변경할 수 있습니다.
</p>
</div>
<!-- 카드 4 -->
<div class="dashboard-card">
<h2 class="card-title">도움말</h2>
<p class="card-description">
사용 방법과 자주 묻는 질문을 확인하세요. 문제 해결 가이드를 제공합니다.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
📌 Cursor가 생성한 HTML 코드 설명
- Header: 상단 고정 헤더(제목, 사용자명, 로그아웃 버튼)
- Main: 메인 컨텐츠 영역
- Cards Grid: 4개의 카드를 담는 그리드 컨테이너
- Dashboard Card: 각 카드(제목과 설명 포함)
📌 Cursor가 생성한 CSS 코드
/*
전역 스타일 리셋 및 기본 설정
- 모든 요소의 기본 margin, padding 제거
- box-sizing을 border-box로 설정하여 크기 계산 단순화
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
body 스타일
- 전체 페이지의 배경색과 폰트 설정
- 최소 높이를 100vh로 설정하여 전체 화면 사용
*/
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 0;
}
/*
============================================
Header 영역 스타일
============================================
*/
/*
대시보드 헤더
- 상단 고정 헤더
- 배경색과 그림자 효과로 구분
- padding으로 내부 여백 확보
*/
.dashboard-header {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
}
/*
헤더 컨테이너
- 헤더 내용을 감싸는 래퍼
- max-width로 최대 너비 제한
- margin: 0 auto로 중앙 정렬
- padding으로 좌우 여백 확보
- display: flex로 내부 요소 배치
*/
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*
헤더 제목
- color로 텍스트 색상 설정
- font-size로 크기 설정
- font-weight로 굵기 설정
*/
.header-title {
color: #333;
font-size: 28px;
font-weight: 600;
}
/*
헤더 액션 영역
- 사용자 이름과 로그아웃 버튼을 감싸는 컨테이너
- display: flex로 가로 배치
- align-items: center로 수직 중앙 정렬
- gap으로 요소 간 간격 확보
*/
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
/*
사용자 이름
- color로 텍스트 색상 설정
- font-size로 크기 설정
*/
.user-name {
color: #666;
font-size: 16px;
}
/*
로그아웃 버튼
- padding으로 내부 여백 확보
- 배경색과 텍스트 색상 설정
- border와 border-radius로 둥근 모서리 적용
- cursor: pointer로 클릭 가능한 요소임을 표시
- transition으로 호버 시 부드러운 전환 효과
*/
.logout-button {
padding: 8px 16px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
/*
로그아웃 버튼 호버 상태
- background 색상 변경
- transform으로 살짝 위로 이동
*/
.logout-button:hover {
background: #764ba2;
transform: translateY(-2px);
}
/*
로그아웃 버튼 활성화 상태 (클릭 시)
- transform으로 원래 위치로 복귀
*/
.logout-button:active {
transform: translateY(0);
}
/*
============================================
메인 컨텐츠 영역 스타일
============================================
*/
/*
대시보드 메인 영역
- padding으로 상하좌우 여백 확보
- flex: 1로 남은 공간 차지
*/
.dashboard-main {
padding: 40px 20px;
flex: 1;
}
/*
대시보드 컨테이너
- max-width로 최대 너비 제한
- margin: 0 auto로 중앙 정렬
*/
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
}
/*
============================================
카드 그리드 스타일
============================================
*/
/*
카드 그리드
- display: grid로 그리드 레이아웃 사용
- gap으로 카드 간 간격 확보
- PC에서는 4열 (repeat(4, 1fr))
- 각 열은 동일한 너비 (1fr = 1 fraction)
*/
.cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/*
대시보드 카드
- background로 배경색 설정
- border-radius로 둥근 모서리 적용
- padding으로 내부 여백 확보
- box-shadow로 그림자 효과
- transition으로 호버 시 부드러운 전환 효과
*/
.dashboard-card {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/*
대시보드 카드 호버 상태
- transform으로 살짝 위로 이동
- box-shadow로 그림자 강화하여 입체감 증가
*/
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/*
카드 제목
- color로 텍스트 색상 설정
- font-size로 크기 설정
- font-weight로 굵기 설정
- margin-bottom으로 하단 여백 확보
*/
.card-title {
color: #333;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
/*
카드 설명
- color로 텍스트 색상 설정
- font-size로 크기 설정
- line-height로 줄 간격 설정하여 가독성 향상
*/
.card-description {
color: #666;
font-size: 15px;
line-height: 1.6;
}
/*
============================================
반응형 디자인 - 태블릿 (2열)
============================================
미디어 쿼리: 화면 너비가 992px 이하일 때 적용
- 태블릿 기기 대응
- 그리드를 2열로 변경
*/
@media (max-width: 992px) {
/*
카드 그리드를 2열로 변경
- repeat(2, 1fr)로 2개의 동일한 너비 열 생성
*/
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
/*
대시보드 메인 영역 패딩 조정
- 태블릿에서는 패딩을 약간 줄임
*/
.dashboard-main {
padding: 30px 20px;
}
}
/*
============================================
반응형 디자인 - 모바일 (1열)
============================================
미디어 쿼리: 화면 너비가 768px 이하일 때 적용
- 모바일 기기 대응
- 그리드를 1열로 변경
*/
@media (max-width: 768px) {
/*
헤더 컨테이너 패딩 조정
- 모바일에서는 패딩을 줄여 더 많은 공간 확보
*/
.header-container {
padding: 0 15px;
}
/*
헤더 제목 크기 조정
- 모바일에서는 폰트 크기를 줄여 가독성 유지
*/
.header-title {
font-size: 22px;
}
/*
헤더 액션 영역 간격 조정
- 모바일에서는 간격을 줄임
*/
.header-actions {
gap: 10px;
}
/*
사용자 이름 크기 조정
*/
.user-name {
font-size: 14px;
}
/*
로그아웃 버튼 크기 조정
- 모바일에서는 패딩과 폰트 크기를 줄임
*/
.logout-button {
padding: 6px 12px;
font-size: 13px;
}
/*
대시보드 메인 영역 패딩 조정
- 모바일에서는 패딩을 줄여 더 많은 공간 확보
*/
.dashboard-main {
padding: 20px 15px;
}
/*
카드 그리드를 1열로 변경
- 1fr로 단일 열 생성
- gap을 줄여 모바일에 최적화
*/
.cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
/*
대시보드 카드 패딩 조정
- 모바일에서는 패딩을 줄여 화면 공간 효율적 사용
*/
.dashboard-card {
padding: 25px;
}
/*
카드 제목 크기 조정
- 모바일에서는 폰트 크기를 줄임
*/
.card-title {
font-size: 20px;
margin-bottom: 12px;
}
/*
카드 설명 크기 조정
*/
.card-description {
font-size: 14px;
}
}
/*
미디어 쿼리: 화면 너비가 480px 이하일 때 적용
- 작은 모바일 기기 대응
*/
@media (max-width: 480px) {
/*
헤더 제목 크기 추가 조정
*/
.header-title {
font-size: 20px;
}
/*
사용자 이름 숨김 (공간 절약)
- display: none으로 숨김 처리
*/
.user-name {
display: none;
}
/*
대시보드 메인 영역 패딩 추가 조정
*/
.dashboard-main {
padding: 15px 10px;
}
/*
카드 그리드 간격 추가 조정
*/
.cards-grid {
gap: 15px;
}
/*
대시보드 카드 패딩 추가 조정
*/
.dashboard-card {
padding: 20px;
border-radius: 12px;
}
/*
카드 제목 크기 추가 조정
*/
.card-title {
font-size: 18px;
margin-bottom: 10px;
}
/*
카드 설명 크기 추가 조정
*/
.card-description {
font-size: 13px;
}
}
📌 Cursor가 생성한 CSS 코드 설명
- CSS Grid: display: grid와 grid-template-columns로 반응형 레이아웃
- 미디어 쿼리: 화면 크기별 스타일 적용
- 호버 효과: transition과 transform으로 상호작용
- 주석: 각 스타일의 목적과 사용법 설명
📌 Cursor가 생성한 대시보드
참고를 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
참고를 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ Cursor 총평
- 코드 구조가 “현업 개발자 스타일”. HTML과 CSS를 분리하여 작성함.
- 초보자에게는 어렵지만, 확장성은 가장 좋다
- 기업형 컴포넌트 구조를 원한다면 최고
⭐ AntiGravity 결과물
📌 특징 요약
- 비전공자에게 쉬운 코드 생성이 장점
- 디자인이 예쁘게 자동으로 잡힘 (색감·테두리·그라데이션 등)
- 하지만 HTML 구조가 가끔 “심플해도 과도하게 단순한” 형태가 있음
- 미디어쿼리 구성은 안정적
📌 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">
<!-- 자바스크립트 연결 (defer 속성을 사용하여 HTML 로딩 후 실행) -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 헤더 영역: 로고와 네비게이션 메뉴 포함 -->
<header class="main-header">
<div class="container header-container">
<!-- 로고 영역 -->
<div class="logo">
<a href="#">MyBusiness</a>
</div>
<!-- 데스크탑용 네비게이션 메뉴 -->
<nav class="main-nav">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
<!-- 모바일용 햄버거 버튼 (기본적으로는 숨겨져 있음) -->
<button class="hamburger-btn" aria-label="메뉴 열기">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- 모바일 메뉴 오버레이 (햄버거 버튼 클릭 시 나타남) -->
<div class="mobile-menu">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</div>
<!-- 메인 콘텐츠 영역 -->
<main class="main-content">
<div class="container">
<section class="hero-section">
<h1>비즈니스를 위한 최적의 솔루션</h1>
<p>반응형 웹 디자인으로 어디서든 완벽하게 보입니다.</p>
<button class="cta-btn">자세히 보기</button>
</section>
<section class="content-section">
<h2>대시보드 현황</h2>
<div class="card-grid">
<div class="card">
<h3>방문자 수</h3>
<p>1,234명</p>
<span style="color: #2563eb; font-size: 0.9rem;">▲ 12% 증가</span>
</div>
<div class="card">
<h3>신규 가입</h3>
<p>56명</p>
<span style="color: #2563eb; font-size: 0.9rem;">▲ 5% 증가</span>
</div>
<div class="card">
<h3>매출액</h3>
<p>₩ 1,200,000</p>
<span style="color: #dc2626; font-size: 0.9rem;">▼ 2% 감소</span>
</div>
<div class="card">
<h3>활성 세션</h3>
<p>320</p>
<span style="color: #2563eb; font-size: 0.9rem;">유지</span>
</div>
</div>
</section>
</div>
</main>
<!-- 푸터 영역 -->
<footer class="main-footer">
<div class="container">
<p>&copy; 2024 MyBusiness Corp. All rights reserved.</p>
</div>
</footer>
</body>
</html>
📌 AntiGravity가 생성한 HTML 코드 설명
가장 큰 상자 card-grid 를 만들고, 그 안에 4개의 작은 상자 card를 넣은 형태입니다.
<div class="card-grid"> <!-- 큰 상자 -->
<div class="card">...</div> <!-- 카드 1 -->
<div class="card">...</div> <!-- 카드 2 -->
<div class="card">...</div> <!-- 카드 3 -->
<div class="card">...</div> <!-- 카드 4 -->
</div>
📌 AntiGravity가 생성한 CSS 코드
/* =========================================
기본 설정 (Variables & Reset)
========================================= */
:root {
--primary-color: #2563eb; /* 주요 포인트 색상 (파란색 계열) */
--text-color: #333333; /* 기본 텍스트 색상 */
--bg-color: #ffffff; /* 배경 색상 */
--header-height: 70px; /* 헤더 높이 변수 */
--gray-light: #f3f4f6; /* 연한 회색 배경 */
}
/* 모든 요소의 여백과 패딩을 초기화하고, 박스 크기를 테두리 포함으로 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
color: var(--text-color);
line-height: 1.6;
}
/* 링크 기본 스타일 제거 */
a {
text-decoration: none;
color: inherit;
}
/* 리스트 스타일 제거 */
ul {
list-style: none;
}
/* 공통 컨테이너: 중앙 정렬 및 좌우 패딩 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* =========================================
헤더 (Header) 스타일
========================================= */
.main-header {
height: var(--header-height);
background-color: var(--bg-color);
border-bottom: 1px solid #e5e7eb; /* 하단 경계선 */
display: flex;
align-items: center; /* 수직 중앙 정렬 */
position: fixed; /* 상단 고정 */
top: 0;
width: 100%;
z-index: 1000; /* 다른 요소보다 위에 표시 */
}
.header-container {
display: flex;
justify-content: space-between; /* 로고와 메뉴를 양끝으로 배치 */
align-items: center;
width: 100%;
height: 100%;
}
.logo a {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
/* 데스크탑 네비게이션 메뉴 */
.main-nav ul {
display: flex;
gap: 30px; /* 메뉴 간 간격 */
}
.main-nav a {
font-weight: 500;
transition: color 0.3s;
}
.main-nav a:hover {
color: var(--primary-color);
}
/* 햄버거 버튼 (기본적으로 PC에서는 숨김) */
.hamburger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 20px;
position: relative;
}
/* 햄버거 버튼 내부의 3줄 선 스타일 */
.hamburger-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-color);
position: absolute;
transition: all 0.3s ease-in-out;
}
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-btn span:nth-child(3) { bottom: 0; }
/* 햄버거 버튼 활성화 시 (X 모양 만들기) */
.hamburger-btn.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0; /* 가운데 선 투명하게 */
}
.hamburger-btn.active span:nth-child(3) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* 모바일 메뉴 오버레이 (PC에서는 숨김) */
.mobile-menu {
display: block;
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
background-color: var(--bg-color);
padding: 20px 0;
border-bottom: 1px solid #e5e7eb;
transform: translateY(-150%); /* 위로 숨겨둠 */
transition: transform 0.3s ease-in-out;
z-index: 999;
}
/* 모바일 메뉴 활성화 시 화면에 표시 */
.mobile-menu.active {
transform: translateY(0);
}
.mobile-menu ul {
display: flex;
flex-direction: column;
text-align: center;
}
.mobile-menu li {
padding: 15px 0;
border-bottom: 1px solid #f3f4f6;
}
.mobile-menu li:last-child {
border-bottom: none;
}
/* =========================================
메인 콘텐츠 (Main) 스타일
========================================= */
.main-content {
padding-top: calc(var(--header-height) + 40px); /* 헤더 높이만큼 띄우기 */
padding-bottom: 60px;
min-height: 80vh; /* 푸터를 바닥으로 밀기 위해 최소 높이 설정 */
}
.hero-section {
text-align: center;
padding: 60px 0;
background-color: var(--gray-light);
border-radius: 10px;
margin-bottom: 40px;
}
.hero-section h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero-section p {
font-size: 1.1rem;
color: #666;
margin-bottom: 25px;
}
.cta-btn {
padding: 12px 30px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.cta-btn:hover {
background-color: #1d4ed8;
}
/* 카드 그리드 스타일 */
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* PC: 4열 */
gap: 20px;
}
.card {
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background-color: white;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px); /* 살짝 위로 뜨는 효과 */
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card h3 {
margin-bottom: 10px;
color: var(--primary-color);
}
/* =========================================
푸터 (Footer) 스타일
========================================= */
.main-footer {
background-color: #1f2937;
color: #9ca3af;
padding: 30px 0;
text-align: center;
font-size: 0.9rem;
}
/* =========================================
반응형 (Media Queries)
========================================= */
/* 태블릿 이하 사이즈 (768px 이하)일 때 적용되는 스타일 */
@media (max-width: 768px) {
/* 데스크탑 메뉴 숨김 */
.main-nav {
display: none;
}
/* 햄버거 버튼 보이기 */
.hamburger-btn {
display: block;
}
/* 카드 그리드를 1열로 변경 (모바일 최적화) */
.card-grid {
grid-template-columns: 1fr;
}
.hero-section h1 {
font-size: 1.8rem; /* 폰트 크기 줄임 */
}
}
/* 태블릿 사이즈 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.card-grid {
grid-template-columns: repeat(2, 1fr); /* 태블릿: 2열 */
}
}
/* PC 사이즈 (769px 이상)일 때의 예외 처리 */
@media (min-width: 769px) {
/* 화면이 넓어지면 모바일 메뉴는 강제로 숨김 (버그 방지) */
.mobile-menu {
display: none !important;
}
}
📌 AntiGravity가 생성한 CSS 코드 설명
gird 는 바둑판처럼 요소를 배치하는 기술입니다. 핵심은 grid – template – columns 속성입니다.
repeat(4, 1fr): “1fr(비율)” 크기의 기둥을 4개 똑같이 반복해서 만든다는 뜻입니다. (즉, 4열)
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* PC에서는 4개씩 나란히 */
gap: 20px; /* 카드 사이 간격 */
}
반응형은 @media를 사용하여 화면 너비에 따라 기둥의 개수를 바꿔줍니다.
/* 태블릿: 화면이 조금 좁아지면 2개씩 보여주기 */
@media (min-width: 769px) and (max-width: 1024px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 모바일: 화면이 좁으면 1개씩 보여주기 */
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
📌 AntiGravity가 생성한 대시보드
참고를 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
참고를 위해 제공하는 이미지이며 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ AntiGravity 평결
- “디자인 자동 보정”이 강점
- 실무보다 “시안용·포트폴리오용”에 가까움
- 단기간에 예쁜 화면을 뽑는 데 매우 강함
4. 세 AI 비교 — 입문자 관점 & 실무 관점
| 항목 | GPT | Cursor | AntiGravity |
|---|---|---|---|
| 난이도 | ⭐ 가장 쉬움 | 🔥 중상 | ⭐ 쉬움 |
| 코드 품질 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 디자인 완성도 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 실무 적합성 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| 비전공자 적합성 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |
5. 비전공자·입문자용 쉬운 설명
🧱 “카드 UI”란?
네이버·카카오·토스 같은 서비스에서 네모난 박스 안에
- 제목
- 내용
- 버튼
- 그래프
이 들어있는 형태를 의미합니다.
카드 UI만 잘 쓰면 어떤 웹 페이지든 거의 70%는 완성된다고 보시면 됩니다.
📐 “Grid 레이아웃”이란?
CSS에서 “격자 형태로 배치하는 방식”.
PC에선 4개 가로로
태블릿은 2개
모바일은 1개
이렇게 자동으로 바뀌도록 만드는 기술을 반응형 Grid라고 합니다. 생각보다 Grid는 널리 쓰입니다.
공공기관에서 웹개발을 할 경우 데이터 조회 화면을 띄우는 부분은 대부분 Grid로 동작합니다.
🧱 “이번 파트의 핵심 기술 2가지”
- Grid Layout
- Media Query
이 두 가지만 이해하면 실무 UI 대부분을 만들 수 있습니다.
6. 어떤 AI가 “대시보드 UI”에 가장 적합한가?
✔ 결론
- 빠른 작업 + 실무형 = GPT
- 개발자 확장성 + 유지보수 = Cursor
- 디자인 중심, 보이는 결과물 빠르게 = AntiGravity
입문자·부업러 기준이라면
👉 GPT → AntiGravity → Cursor 순서가 가장 무난하게 보여집니다.
실무자 기준이라면
👉 Cursor → GPT가 가장 효율적입니다. Cursor로 확장성과 유지보수성을 가져가고 GPT로 빠르게 정리하는 것이 효율이 좋습니다.
7. 마무리하며
이번 Part 6에서는
- 로그인 이후 화면인 대시보드 UI
- 카드 UI / 그리드 레이아웃
- 반응형 구조
- GPT/Cursor/AntiGravity 비교
까지 실제 서비스 수준으로 만들어보았습니다.
이번 실습으로 입문자 혹은 비개발자 분들도 “아 웹사이트 화면이 이렇게 구성되는구나!” 를 확실히 이해하게 되셨다고 보여집니다.
다음 편 예고
다음 편은 이번 편에 이어 조금 더 내용을 확장해볼 생각입니다.
👉 대시보드 심화: 그래프/차트 UI 추가하기
👉 AI 3종에게 Chart.js, ApexCharts, SVG 차트 만들기 시켜보기
👉 현업 데이터 시각화 방식 비교
등의 요소를 진행하겠습니다. 많은 기대 부탁드립니다.
다른 편이 궁금하다면?
- 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
[HTML/CSS 입문] AI로 반응형 UI 만들어보기 (GPT vs Cursor vs AntiGravity) – Part 5
[HTML/CSS 입문] AI로 만드는 헤더·푸터·레이아웃 비교(Gpt vs Cursor vs AntiGravity) | Part 6 - AI활용 가이드편 다시보기
[AI] 비전공자·초급 개발자를 위한 AI 활용 가이드
[AI] 입문자 및 비전공자를 위한 필수 AI(인공지능) 용어 소개 25선 - 그 외 관련 포스팅 다시보기
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점