[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4

글쓴이 /

웹사이트를 만들다 보면 항상 부딪히는 벽이 있습니다.
바로 레이아웃(Layout) 과 UI 인터랙션(UI Interaction) 입니다.

  • “메뉴를 누르면 아래 내용이 바뀌게 하고 싶은데 어떻게 하지?”
  • “로그인 페이지는 만들었는데 다른 화면은 어떻게 전환하지?”
  • “탭 메뉴가 필요하긴 한데 HTML/CSS만으로 가능한가?”

이런 질문들은 입문자, 부업러, 개발 전향자 모두가 공통으로 겪는 어려움입니다.

그래서 이번 Part 3에서는 실제 웹사이트에서 가장 자주 쓰이는 ‘탭 메뉴 UI’를 AI 3종(GPT · Cursor · AntiGravity)으로 만들어보고 비교합니다. 저와 함께 또 한걸음 나아가 보시죠!

Table of Contents

참고 외부 링크

서비스링크
ChatGPThttps://chat.openai.com
Cursorhttps://www.cursor.com
Google AntiGravityhttps://labs.google
gpt_cursor_antigravity AI 의 HTML/CSS/JS 생성 비교
GPT vs Cursor vs AntiGravity 를 AI를 활용하여 시각화 한 이미지 자료입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

1. 탭 메뉴란 무엇인가? (입문자용 설명)

탭 메뉴(Tab Menu)는 카카오톡의 “채팅 / 친구 / 쇼핑”처럼 클릭하면 화면이 바뀌는 UI를 말합니다.

HTML/CSS/JS 구조는 매우 간단합니다.

  • HTML : 버튼과 콘텐츠 영역 배치
  • CSS : 보이기/숨기기 스타일
  • JavaScript : 클릭 시 해당 영역만 출력

그래서 입문자가 배우기 좋고, AI에게 맡겨도 퀄리티가 매우 잘 나옵니다.

2. 이번 실습 목표

✔ 탭 메뉴 버튼 3개
✔ 버튼 클릭 시 해당 내용만 표시
✔ HTML, CSS, JS 모두 포함
✔ GPT · Cursor · AntiGravity 동일한 요청으로 비교
✔ 어떤 AI가 입문자에게 더 유리한가 분석

이 글을 보시는 독자분이 비개발자 및 AI를 활용해 부업을 하시는 분이라면 굉장히 신박하다고 느끼실 것 같습니다.
또한 입문 및 저와 같이 초급 개발자 레벨에서 프론트의 개념을 짚고 가신다거나 프론트 부분을 AI를 활용해 효율을 뽑으려 하신다면 오늘 내용이 주로 쓰이는 기본이 될 것이라 생각합니다.

3. AI 3종에게 보낸 동일 프롬프트

코딩을 위한 AI 삼총사 Chat GPT, Cursor AI, Google AntiGravity의 성능 비교 및 분석을 위해 아래의 프롬프트를 모두에게 동일하게 입력했습니다.

“HTML/CSS/JavaScript로 작동하는 탭 메뉴 UI 코드를 작성해줘.”

  • 탭은 3개
  • 반응형
  • 입문자가 이해할 수 있도록 주석 포함
  • 그리고 HTML / CSS / JS 파일의 소스 코드를 설명해줘
챗 GPT에 입력한 프롬프트 캡쳐입니다(무료버전) 이해를 돕기 위해 제공한 자체 캡쳐 이미지 입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
챗 GPT에 입력한 프롬프트 캡쳐입니다(무료버전)
커서에 입력한 프롬프트 캡쳐입니다(무료버전) 이해를 돕기 위해 제공한 자체 캡쳐 이미지 입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Cursor에 입력한 프롬프트 캡쳐입니다(무료버전)
antigravity에 입력한 프롬프트 캡쳐입니다(무료버전) 이해를 돕기 위해 제공한 자체 캡쳐 이미지 입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Google AntiGravity에 입력한 프롬프트 캡쳐입니다(무료버전)

Tip) HTML 과 CSS 그리고 이번 시간에 처음 등장하는 JS(JavaScript)에 대해서 AI는 어떻게 설명을 해주는지도 비교 대상입니다.
Tip) 비개발자 분들은 그러려니 하셔도 되지만 우리 입문, 초급 개발자 분들은 코드를 이해하셔야 공부에 도움이 되니까요!

4. 생성한 결과 비교 분석

GPT가 생성한 결과

GPT는 가장 무난하고 안정적이며 설명이 풍부합니다.
입문자가 읽기 좋다는 점이 특징입니다.

🔧 GPT 가 생성한 HTML 코드

<!-- index.html -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Responsive Tabs</title>
<!-- 외부 CSS 연결 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="tabs-container">
<!-- 탭 리스트: 접근성을 위해 role과 aria 속성 사용 -->
<div class="tab-list" role="tablist" aria-label="예제 탭 메뉴">
<button class="tab" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">탭 1</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">탭 2</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">탭 3</button>
</div>


<!-- 탭 패널: 각 탭과 연결되는 콘텐츠 영역 -->
<section class="tab-panels">
<div class="tab-panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
<h2>탭 1 내용</h2>
<p>이곳은 탭 1의 콘텐츠입니다. 간단한 설명이나 이미지, 리스트 등을 넣을 수 있습니다.</p>
</div>


<div class="tab-panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
<h2>탭 2 내용</h2>
<p>이곳은 탭 2의 콘텐츠입니다. 반응형 레이아웃에서 잘 동작하도록 설계되었습니다.</p>
</div>


<div class="tab-panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
<h2>탭 3 내용</h2>
<p>이곳은 탭 3의 콘텐츠입니다. 입문자가 이해하기 쉽도록 주석을 넣었습니다.</p>
</div>
</section>
</main>


<!-- 외부 JS 연결 -->
<script src="script.js"></script>
</body>
</html>

🔧 GPT 가 생성한 HTML 코드 설명

  • 탭 버튼(button[role=tab])과 탭 패널(role=tabpanel)을 HTML로 구성합니다.
  • aria-controls, aria-labelledby, aria-selected 같은 속성은 접근성(스크린리더 사용자를 위한 정보 전달)을 돕습니다.
  • hidden 속성으로 보이지 않게 하고, JavaScript가 이를 토글합니다.

🔧 GPT 가 생성한 CSS 코드

/* styles.css - 기본 스타일과 반응형 규칙 포함 */
--muted: #6b7280; /* 보조 텍스트 */
--bg: #ffffff;
--surface: #f8fafc;
}


*{box-sizing: border-box}
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
margin: 0;
background: var(--surface);
color: #111827;
line-height: 1.4;
}


.tabs-container{
max-width: 900px;
margin: 32px auto;
background: var(--bg);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(2,6,23,0.08);
overflow: hidden;
}


/* 탭 리스트: 가로 정렬, 스크롤 발생시 자연스럽게 보이도록 처리 */
.tab-list{
display: flex;
gap: 2px;
padding: 8px;
background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
border-bottom: 1px solid #eef2f7;
overflow-x: auto;
}


.tab{
appearance: none;
border: none;
background: transparent;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
white-space: nowrap; /* 긴 텍스트가 한 줄로 유지되도록 함 */
}


/* 선택된 탭 스타일 */
.tab[aria-selected="true"]{
background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(37,99,235,0.06));
color: var(--accent);
box-shadow: 0 2px 6px rgba(37,99,235,0.08);
}


.tab:focus{
outline: 3px solid rgba(37,99,235,0.15);
outline-offset: 2px;
}


.tab-panels{
padding: 20px;
}


.tab-panel h2{margin-top:0}


/* 반응형: 작은 화면에서는 탭이 더 크게 보이도록 패딩을 조정 */
@media (max-width: 600px){
.tabs-container{margin:16px}
.tab{padding:12px 20px; font-size:16px}
.tab-panels{padding:16px}
}


/* 추가: 탭 리스트에 그림자 대신 스크롤바가 있을 때의 여백 보정 */
.tab-list::-webkit-scrollbar{height:8px}
.tab-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08); border-radius:8px}

🔧 GPT 가 생성한 CSS 코드 설명

  • 탭을 가로 정렬하고, 선택된 탭은 색상/배경으로 강조합니다.
  • @media 쿼리를 사용해 모바일(작은 화면)에서 패딩과 폰트 크기를 조정합니다.
  • overflow-x: auto로 작은 화면에서 탭이 화면 밖으로 나가면 가로 스크롤로 대체됩니다.

🔧 GPT 가 생성한 Js 코드

// script.js - 탭 동작 구현 (입문자용으로 최대한 간단하게)


// 1) 문서에서 필요한 요소들을 선택
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.tab-panel');


// 2) 탭을 클릭했을 때 실행되는 함수
function activateTab(clickedTab) {
// 모든 탭과 패널을 초기화 (비활성화)
tabs.forEach(tab => {
tab.setAttribute('aria-selected', 'false');
});
panels.forEach(panel => {
// hidden 속성을 사용하면 스크린리더에서 패널을 숨기므로 접근성에 유리
panel.hidden = true;
});


// 클릭된 탭을 활성화하고 관련 패널을 보여줌
clickedTab.setAttribute('aria-selected', 'true');
const panelId = clickedTab.getAttribute('aria-controls');
const panel = document.getElementById(panelId);
if (panel) panel.hidden = false;
}


// 3) 모든 탭에 클릭 이벤트 연결
tabs.forEach(tab => {
tab.addEventListener('click', () => activateTab(tab));
});


// 4) 키보드로 탭 전환 (왼쪽/오른쪽 화살표) - 접근성 향상
let currentTabIndex = 0; // 시작은 첫 번째 탭


function focusTab(index){
const tab = tabs[index];
tab.focus();
}


tabs.forEach((tab, index) => {
tab.addEventListener('keydown', (e) => {
const key = e.key;
if (key === 'ArrowRight'){
// 오른쪽: 다음 탭 (끝이면 처음으로)
e.preventDefault();
currentTabIndex = (index + 1) % tabs.length;
activateTab(tabs[currentTabIndex]);
focusTab(currentTabIndex);
} else if (key === 'ArrowLeft'){
// 왼쪽: 이전 탭 (처음이면 끝으로)
e.preventDefault();
currentTabIndex = (index - 1 + tabs.length) % tabs.length;
activateTab(tabs[currentTabIndex]);
focusTab(currentTabIndex);
}
});
});


// 5) 초기화: 첫 번째 탭 보여주기 (JS 없으면 첫 탭이 이미 보이므로 선택사항)
activateTab(tabs[0]);

🔧 GPT 가 생성한 Js 코드 설명

  • 클릭 이벤트로 탭을 전환합니다.
  • 키보드(왼쪽/오른쪽 화살표)로도 탭을 전환할 수 있게 해 접근성을 개선합니다.
  • aria-selected와 hidden을 조작해 스크린리더에 올바른 상태를 전달합니다.

🔧 GPT 가 생성한 페이지 결과

GPT가 생성한 페이지를 캡쳐한 이미지입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
GPT가 생성한 페이지 결과입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

🟢 GPT 평가

항목평가
가독성★★★★★
입문자 친화성★★★★★
완성도★★★★☆
주석/설명★★★★★
실무 확장성★★★★☆

한줄 평 : 입문자에게 가장 좋은 결과물.

Cursor가 생성한 결과

Cursor는 “코드를 더 간결하게 만드는” 성향이 있어 불필요한 부분을 최대한 줄이고 실무형으로 작성합니다.

🔧 Cursor 가 생성한 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>탭 메뉴 UI</title>
    <!-- CSS 파일 연결 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 탭 메뉴 컨테이너 -->
    <div class="tab-container">
        <!-- 탭 버튼 영역 -->
        <div class="tab-buttons">
            <!-- 첫 번째 탭 버튼 (기본 활성화) -->
            <button class="tab-button active" data-tab="tab1">탭 1</button>
            <!-- 두 번째 탭 버튼 -->
            <button class="tab-button" data-tab="tab2">탭 2</button>
            <!-- 세 번째 탭 버튼 -->
            <button class="tab-button" data-tab="tab3">탭 3</button>
        </div>

        <!-- 탭 콘텐츠 영역 -->
        <div class="tab-contents">
            <!-- 첫 번째 탭 콘텐츠 (기본 표시) -->
            <div class="tab-content active" id="tab1">
                <h2>첫 번째 탭 내용</h2>
                <p>이것은 첫 번째 탭의 내용입니다. 여기에 원하는 정보를 입력할 수 있습니다.</p>
                <p>탭을 클릭하면 다른 내용으로 전환됩니다.</p>
            </div>

            <!-- 두 번째 탭 콘텐츠 (기본 숨김) -->
            <div class="tab-content" id="tab2">
                <h2>두 번째 탭 내용</h2>
                <p>이것은 두 번째 탭의 내용입니다. 각 탭마다 다른 정보를 표시할 수 있습니다.</p>
                <p>반응형 디자인으로 모바일에서도 잘 작동합니다.</p>
            </div>

            <!-- 세 번째 탭 콘텐츠 (기본 숨김) -->
            <div class="tab-content" id="tab3">
                <h2>세 번째 탭 내용</h2>
                <p>이것은 세 번째 탭의 내용입니다. 탭 메뉴를 통해 여러 정보를 효율적으로 정리할 수 있습니다.</p>
                <p>JavaScript를 사용하여 부드러운 전환 효과를 제공합니다.</p>
            </div>
        </div>
    </div>

    <!-- JavaScript 파일 연결 -->
    <script src="script.js"></script>
</body>
</html>

🔧 Cursor 가 생성한 HTML 코드 설명

  • <head> 섹션
  • viewport 메타 태그로 반응형 설정
  • CSS 파일 연결
  • 탭 버튼 영역 (tab-buttons)
  • 3개의 버튼: data-tab 속성으로 연결된 콘텐츠 식별
  • 첫 번째 버튼에 active 클래스로 초기 활성화
  • 탭 콘텐츠 영역 (tab-contents)
  • 3개의 콘텐츠 영역: 각각 고유 id (tab1, tab2, tab3)
  • 첫 번째 콘텐츠에 active 클래스로 초기 표시

🔧 Cursor 가 생성한 CSS 코드

/* 전체 페이지 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩과 보더를 요소의 전체 크기에 포함 */
}

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; /* 모바일에서 여백 추가 */
}

/* 탭 컨테이너 스타일 */
.tab-container {
    background: white;
    border-radius: 10px; /* 둥근 모서리 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
    width: 100%;
    max-width: 800px; /* 최대 너비 제한 */
    overflow: hidden; /* 내용이 넘치면 숨김 */
}

/* 탭 버튼 영역 스타일 */
.tab-buttons {
    display: flex; /* 버튼들을 가로로 배치 */
    background-color: #f5f5f5;
    border-bottom: 2px solid #e0e0e0;
}

/* 개별 탭 버튼 스타일 */
.tab-button {
    flex: 1; /* 동일한 너비로 분배 */
    padding: 15px 20px; /* 상하 15px, 좌우 20px 여백 */
    border: none; /* 테두리 제거 */
    background-color: transparent; /* 투명 배경 */
    cursor: pointer; /* 마우스 포인터 변경 */
    font-size: 16px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
    position: relative; /* 하단 선 위치 지정을 위해 */
}

/* 탭 버튼에 마우스를 올렸을 때 */
.tab-button:hover {
    background-color: #e8e8e8;
    color: #333;
}

/* 활성화된 탭 버튼 스타일 */
.tab-button.active {
    color: #667eea; /* 활성 탭 텍스트 색상 */
    background-color: white;
    font-weight: 600; /* 굵은 글씨 */
}

/* 활성화된 탭 버튼 하단 선 */
.tab-button.active::after {
    content: ''; /* 가상 요소 생성 */
    position: absolute;
    bottom: -2px; /* 버튼 하단에 위치 */
    left: 0;
    right: 0;
    height: 3px; /* 선의 두께 */
    background-color: #667eea; /* 선의 색상 */
}

/* 탭 콘텐츠 영역 스타일 */
.tab-contents {
    padding: 30px; /* 내부 여백 */
    min-height: 300px; /* 최소 높이 설정 */
}

/* 개별 탭 콘텐츠 스타일 */
.tab-content {
    display: none; /* 기본적으로 숨김 */
    animation: fadeIn 0.3s ease; /* 나타날 때 페이드인 효과 */
}

/* 활성화된 탭 콘텐츠만 표시 */
.tab-content.active {
    display: block; /* 표시 */
}

/* 탭 콘텐츠 제목 스타일 */
.tab-content h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 24px;
}

/* 탭 콘텐츠 문단 스타일 */
.tab-content p {
    color: #666;
    line-height: 1.6; /* 줄 간격 */
    margin-bottom: 10px;
    font-size: 16px;
}

/* 페이드인 애니메이션 정의 */
@keyframes fadeIn {
    from {
        opacity: 0; /* 시작: 투명 */
        transform: translateY(10px); /* 시작: 아래로 10px 이동 */
    }
    to {
        opacity: 1; /* 끝: 불투명 */
        transform: translateY(0); /* 끝: 원래 위치 */
    }
}

/* 반응형 디자인 - 태블릿 크기 (768px 이하) */
@media (max-width: 768px) {
    .tab-button {
        padding: 12px 15px; /* 패딩 축소 */
        font-size: 14px; /* 폰트 크기 축소 */
    }

    .tab-contents {
        padding: 20px; /* 패딩 축소 */
        min-height: 250px; /* 최소 높이 축소 */
    }

    .tab-content h2 {
        font-size: 20px; /* 제목 크기 축소 */
    }

    .tab-content p {
        font-size: 14px; /* 본문 크기 축소 */
    }
}

/* 반응형 디자인 - 모바일 크기 (480px 이하) */
@media (max-width: 480px) {
    body {
        padding: 10px; /* 여백 더 축소 */
    }

    .tab-container {
        border-radius: 5px; /* 모서리 둥글기 축소 */
    }

    .tab-buttons {
        flex-direction: column; /* 세로로 배치 */
        border-bottom: none; /* 하단 테두리 제거 */
    }

    .tab-button {
        width: 100%; /* 전체 너비 */
        border-bottom: 1px solid #e0e0e0; /* 하단 테두리 추가 */
        text-align: left; /* 텍스트 왼쪽 정렬 */
        padding: 15px; /* 패딩 */
    }

    /* 모바일에서 활성 탭 하단 선 제거 */
    .tab-button.active::after {
        display: none;
    }

    /* 모바일에서 활성 탭 배경색 변경 */
    .tab-button.active {
        background-color: #667eea;
        color: white;
    }

    .tab-contents {
        padding: 15px; /* 패딩 더 축소 */
        min-height: 200px; /* 최소 높이 더 축소 */
    }
}

🔧 Cursor 가 생성한 CSS 코드 설명

  • 전역 스타일
    • box-sizing: border-box로 크기 계산 일관화
    • 그라데이션 배경과 중앙 정렬
  • 탭 버튼 스타일
    • display: flex로 가로 배치
    • :hover로 호버 효과
    • .active로 활성 탭 강조
    • ::after 가상 요소로 활성 탭 하단 선
  • 탭 콘텐츠 스타일
    • 기본 display: none, .active일 때 display: block
    • @keyframes fadeIn으로 페이드인 애니메이션
  • 반응형 디자인
    • @media (max-width: 768px): 태블릿
    • @media (max-width: 480px): 모바일(버튼 세로 배치)

🔧 Cursor 가 생성한 Js 코드

// 페이지가 완전히 로드된 후 실행
document.addEventListener('DOMContentLoaded', function() {
    // 모든 탭 버튼 요소를 선택
    const tabButtons = document.querySelectorAll('.tab-button');
    
    // 모든 탭 콘텐츠 요소를 선택
    const tabContents = document.querySelectorAll('.tab-content');

    // 각 탭 버튼에 클릭 이벤트 리스너 추가
    tabButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // 클릭된 버튼의 data-tab 속성 값 가져오기 (예: 'tab1', 'tab2', 'tab3')
            const targetTab = this.getAttribute('data-tab');

            // 모든 탭 버튼에서 'active' 클래스 제거 (비활성화)
            tabButtons.forEach(function(btn) {
                btn.classList.remove('active');
            });

            // 모든 탭 콘텐츠에서 'active' 클래스 제거 (숨김)
            tabContents.forEach(function(content) {
                content.classList.remove('active');
            });

            // 클릭된 버튼에 'active' 클래스 추가 (활성화)
            this.classList.add('active');

            // 클릭된 버튼에 해당하는 콘텐츠에 'active' 클래스 추가 (표시)
            const targetContent = document.getElementById(targetTab);
            if (targetContent) {
                targetContent.classList.add('active');
            }
        });
    });
});

🔧 Cursor 가 생성한 Js 코드 설명

  • DOM 로드 대기   document.addEventListener(‘DOMContentLoaded’, …)
    • 페이지 로드 완료 후 실행
  • 요소 선택
    • querySelectorAll로 모든 탭 버튼과 콘텐츠 선택
  • 이벤트 리스너 추가
    • 각 버튼에 클릭 이벤트 연결
  • 탭 전환 로직
    • 클릭된 버튼의 data-tab 속성 읽기
    • 모든 버튼/콘텐츠에서 active 제거
    • 클릭된 버튼과 해당 콘텐츠에 active 추가

🔧 Cursor 가 생성한 페이지

cursor 가 생성한 페이지를 캡쳐한 이미지입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Cursor 로 생성한 페이지입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

🟢 Cursor 평가

항목평가
가독성★★★★☆
입문자 난이도★★★☆☆
실무에 적합★★★★★
코드 최적화★★★★★
부업러/입문자 추천★★★☆☆

한줄 평 : 코드는 깔끔하지만 주석이 없어 입문자에겐 다소 어려움. 반대로 개발자에게는 가장 효율적인 코드.

AntiGravity(구글 Anti-gravity AI)가 생성한 결과

AntiGravity는 실험적이고 아직 완성도가 부족하지만,
생각보다 HTML/CSS/JS 생성 능력은 높은 편입니다.

🔧 AntiGravity 가 생성한 HTML 코드

&lt;!DOCTYPE html>
&lt;html lang="ko">

&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>반응형 탭 메뉴 예제&lt;/title>
    &lt;!-- 스타일 시트 연결 -->
    &lt;link rel="stylesheet" href="style.css">
&lt;/head>

&lt;body>

    &lt;div class="container">
        &lt;h1>간단한 탭 메뉴&lt;/h1>

        &lt;!-- 탭 버튼 영역 -->
        &lt;div class="tab-buttons">
            &lt;!-- 
                data-tab 속성은 버튼이 클릭되었을 때 어떤 콘텐츠를 보여줄지 연결하는 역할을 합니다.
                class="active"는 처음에 활성화될 탭을 지정합니다.
            -->
            &lt;button class="tab-btn active" data-tab="tab1">탭 1&lt;/button>
            &lt;button class="tab-btn" data-tab="tab2">탭 2&lt;/button>
            &lt;button class="tab-btn" data-tab="tab3">탭 3&lt;/button>
        &lt;/div>

        &lt;!-- 탭 콘텐츠 영역 -->
        &lt;div class="tab-content">
            &lt;!-- 
                id 속성은 버튼의 data-tab 값과 일치해야 합니다.
                class="active"가 있는 콘텐츠만 처음에 보입니다.
            -->
            &lt;div id="tab1" class="content active">
                &lt;h2>첫 번째 탭 내용&lt;/h2>
                &lt;p>여기는 첫 번째 탭의 내용이 들어가는 곳입니다. HTML, CSS, JS를 사용하여 탭 메뉴를 만드는 방법을 배웁니다.&lt;/p>
            &lt;/div>

            &lt;div id="tab2" class="content">
                &lt;h2>두 번째 탭 내용&lt;/h2>
                &lt;p>여기는 두 번째 탭의 내용입니다. 반응형 디자인을 적용하여 모바일에서도 잘 보이도록 만들었습니다.&lt;/p>
            &lt;/div>

            &lt;div id="tab3" class="content">
                &lt;h2>세 번째 탭 내용&lt;/h2>
                &lt;p>여기는 세 번째 탭의 내용입니다. 자바스크립트를 이용해 탭 전환 기능을 구현했습니다.&lt;/p>
            &lt;/div>
        &lt;/div>
    &lt;/div>

    &lt;!-- 자바스크립트 연결 -->
    &lt;script src="script.js">&lt;/script>
&lt;/body>

&lt;/html>

🔧 AntiGravity 가 생성한 HTML 코드 설명

HTML은 웹 페이지의 구조를 담당합니다. 탭 메뉴는 크게 버튼 영역과 내용 영역으로 나뉩니다.

  • 탭 버튼 영역
    • data-tab="tab1": 이 속성은 ‘사용자 정의 속성’입니다. 버튼을 클릭했을 때 “어떤 내용을 보여줄지” 연결고리 역할을 합니다. tab1이라는 이름표를 붙여둔 것입니다.
    • class="active": 처음에 화면에 보일 탭을 지정합니다. 이 클래스가 붙은 버튼만 색상이 다르게 표시됩니다.
  • 탭 콘텐츠 영역
    • id="tab1": 위 버튼의 data-tab 값과 똑같은 이름을 사용해야 합니다. 그래야 자바스크립트가 “아, 탭 1 버튼을 누르면 이 박스를 보여줘야 하는구나”라고 알 수 있습니다.
    • class="active": 마찬가지로 처음에 보여줄 내용에만 이 클래스를 붙입니다.

🔧 AntiGravity 가 생성한 CSS 코드

/* 기본 스타일 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 요소의 크기를 테두리 포함으로 계산 */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 화면 전체 높이 사용 */
}

/* 컨테이너 스타일 */
.container {
    width: 90%;
    max-width: 600px;
    /* 최대 너비 제한 */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 부드러운 그림자 효과 */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* 탭 버튼 영역 스타일 */
.tab-buttons {
    display: flex;
    /* 버튼들을 가로로 배치 */
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

/* 각 탭 버튼 스타일 */
.tab-btn {
    flex: 1;
    /* 버튼들이 남은 공간을 균등하게 차지 */
    padding: 15px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    transition: all 0.3s ease;
    /* 부드러운 전환 효과 */
}

/* 마우스를 올렸을 때 스타일 */
.tab-btn:hover {
    background-color: #f9f9f9;
    color: #007bff;
}

/* 활성화된 탭 버튼 스타일 */
.tab-btn.active {
    color: #007bff;
    border-bottom: 3px solid #007bff;
    /* 아래쪽에 파란색 선 표시 */
    margin-bottom: -2px;
    /* 선이 겹치도록 위치 조정 */
}

/* 탭 콘텐츠 영역 스타일 */
.content {
    display: none;
    /* 기본적으로 숨김 */
    padding: 20px 0;
    animation: fadeIn 0.5s ease;
    /* 나타날 때 애니메이션 적용 */
}

/* 활성화된 콘텐츠만 보이게 함 */
.content.active {
    display: block;
}

h2 {
    margin-bottom: 10px;
    color: #007bff;
}

p {
    line-height: 1.6;
    color: #666;
}

/* 페이드 인 애니메이션 정의 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 반응형 스타일 (화면 너비가 600px 이하일 때) */
@media (max-width: 600px) {
    .tab-buttons {
        flex-direction: column;
        /* 버튼을 세로로 배치 */
        border-bottom: none;
    }

    .tab-btn {
        width: 100%;
        border-bottom: 1px solid #eee;
        text-align: left;
        padding-left: 20px;
    }

    .tab-btn.active {
        border-bottom: 1px solid #eee;
        border-left: 4px solid #007bff;
        /* 세로 배치 시 왼쪽 선으로 강조 */
        background-color: #f0f8ff;
        margin-bottom: 0;
    }
}

🔧 AntiGravity 가 생성한 CSS 코드 설명

CSS는 디자인과 배치를 담당합니다.

  • 레이아웃 (Flexbox)
    • display: flex: 버튼들을 가로로 나란히 배치합니다.
    • flex: 1: 버튼들이 남은 공간을 똑같이 나눠 갖습니다. 탭이 3개면 1/3씩, 4개면 1/4씩 자동으로 크기가 조절되어 깔끔합니다.
  • 보이기/숨기기 원리
    • 핵심 원리: 모든 콘텐츠 박스를 일단 display: none으로 숨겨둡니다. 그리고 자바스크립트를 통해 선택된 탭에만 active 클래스를 붙여서 display: block으로 보이게 만드는 것입니다.
  • 반응형 디자인 (모바일)
    • 반응형: 화면 너비가 600px 이하(모바일)가 되면 flex-direction: column을 적용하여 가로로 있던 버튼들을 세로로 쌓이게 만듭니다. 좁은 화면에서도 버튼이 찌그러지지 않게 하기 위함입니다.

🔧 AntiGravity 가 생성한 Js 코드

// DOM 요소들이 모두 로드된 후 실행

document.addEventListener(‘DOMContentLoaded’, () => {

    // 필요한 요소들을 선택합니다.

    const tabButtons = document.querySelectorAll(‘.tab-btn’); // 모든 탭 버튼 선택

    const contents = document.querySelectorAll(‘.content’);   // 모든 탭 내용 선택

    // 각 탭 버튼에 클릭 이벤트를 추가합니다.

    tabButtons.forEach(button => {

        button.addEventListener(‘click’, () => {

            // 1. 모든 버튼에서 ‘active’ 클래스를 제거합니다. (비활성화)

            tabButtons.forEach(btn => btn.classList.remove(‘active’));

            // 2. 모든 콘텐츠에서 ‘active’ 클래스를 제거합니다. (숨김)

            contents.forEach(content => content.classList.remove(‘active’));

            // 3. 클릭된 버튼에 ‘active’ 클래스를 추가합니다. (활성화 스타일 적용)

            button.classList.add(‘active’);

            // 4. 클릭된 버튼의 data-tab 값을 가져옵니다. (예: “tab1”, “tab2”)

            const tabId = button.getAttribute(‘data-tab’);

            // 5. 해당 아이디를 가진 콘텐츠를 찾아 ‘active’ 클래스를 추가합니다. (보이기)

            const activeContent = document.getElementById(tabId);

            activeContent.classList.add(‘active’);

        });

    });

});

🔧 AntiGravity 가 생성한 Js 코드 설명

자바스크립트는 클릭했을 때의 동작을 담당합니다.

  • 요소 선택하기
    • querySelectorAll: HTML에서 해당 클래스를 가진 모든 요소를 찾아옵니다. (모든 버튼들, 모든 내용 박스들)
  • 클릭 이벤트 연결하기
    • forEach: 찾아온 버튼이 3개라면, 3개 모두에게 “클릭하면 이 기능을 실행해”라고 명령을 붙여주는 반복문입니다. 하나하나 따로 코드를 짤 필요 없이 한 번에 처리합니다.
  • 클릭 시 일어나는 일 (순서대로)
    • 내용 연결 (Link)const tabId = button.getAttribute(‘data-tab’);const activeContent = document.getElementById(tabId);activeContent.classList.add(‘active’);
      • 클릭한 버튼의 data-tab 값(예: “tab1”)을 읽어옵니다.
      • 그 이름(tab1)을 아이디로 가진 콘텐츠 박스를 찾습니다(getElementById).
      • 찾은 박스에 active 클래스를 붙여서 화면에 보이게 합니다.
    • 활성화 (Activate)button.classList.add(‘active’);
      • 방금 클릭한 그 버튼(button)에만 다시 active 클래스를 붙여서 파란색으로 만듭니다.
    • 초기화 (Reset)tabButtons.forEach(btn => btn.classList.remove(‘active’));contents.forEach(content => content.classList.remove(‘active’));
      • 먼저 모든 버튼과 모든 내용에서 active 클래스를 싹 지웁니다. (모두 비활성화/숨김 상태로 만듦)
      • 이렇게 해야 이전에 켜져 있던 탭이 꺼집니다.

🔧 AntiGravity 가 생성한 페이지

Antigravity 가 생성한 페이지를 캡쳐한 이미지입니다. 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
AntiGravity 가 생성한 페이지 입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

🟢 AntiGravity 평가

항목평가
완성도★★★★☆
입문자 난이도★★★☆☆
안정성★★★☆☆
주석★☆☆☆☆
성격다소 실험적

한줄 평 : UI 배치 능력은 꽤 좋지만 설명이 부족하고 출력이 일정하지 않음.

5. 세 AI 비교 총평 (입문자/부업러 기준)

🥇 GPT — 입문자·부업러에게 최적

  • 설명 풍부
  • 오류 거의 없음
  • 주석이 좋아서 학습 효율 최고

🥈 Cursor — 개발 입문자·실무자에게 최적

  • 최적화된 코드
  • 수정 및 확장 용이
  • 개발자로 성장하고 싶다면 가장 추천

🥉 AntiGravity — 서브로 활용 가능

  • 결과는 나쁘지 않지만 예측 불가
  • 장기적으로 지켜볼 가치 있음

6. 이번 실습에서 배운 핵심 포인트

✔ 탭 메뉴는 “보이는 UI”라 입문자가 흥미를 느끼기 좋은 단계

✔ GPT는 학습용으로 가장 적합

✔ Cursor는 실무 확장에 강함

✔ AntiGravity는 실험적이며 안정성은 부족

✔ AI 3개를 함께 쓰면 시너지가 커짐

7. 마무리하며

AI가 단순히 코드를 대신 써주는 시대는 지나가고 있습니다.
이제는 “어떤 AI가 어떤 작업을 잘하는지 선택하는 능력”이 경쟁력이 됩니다.

특히 부업러나 입문자는 “배우기 쉬운 UI 제작”부터 시작하면 AI 활용 효율이 눈에 띄게 높아집니다.

8. 다음 편 예고

이번 편에서 JavaScript 까지 AI로 코딩하며 함께 탭 메뉴 UI를 만들어 보았습니다. AI를 활용하지 않고 일일이 만들때에는 사실 조금 노가다 성이 짙은 부분이었습니다.

하지만 이제는 AI가 대신하고 나름 감각적인 디자인까지 뽑아주다 보니 사람은 백엔드 부분 혹은 수익을 내기 위한 여러 아이디어에 매진할 수 있게 되었습니다. 이런 부분이 바로 효율성이고 AI를 잘 활용하는 방법입니다.

다음 Part 4에서는 AI로 반응형 페이지(모바일 전환 UI) 만들기를 해보려 합니다. 많은 기대 부탁드립니다.

이전 편을 보지 못했다면?
[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

다른 부분이 궁금하다면?
[AI] 비전공자·초급 개발자를 위한 AI 활용 가이드
[AI] 입문자 및 비전공자를 위한 필수 AI(인공지능) 용어 소개 25선
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤