[HTML/CSS 입문] AI로 대시보드 차트 UI 만들기(GPT vs Cursor vs AntiGravity) | Part 8 - 비전공자 개발자 제로의 성장 블로그

지난 시간 우리는 AI 3종(GPT, Cursor, AntiGravity)에게 대시보드를 만들도록 같은 프롬프트를 입력하고 서로 비교분석을 진행했습니다.
굉장히 흥미로운 결과를 볼 수 있었죠. 3종 비교 시리즈를 진행하면서 저 또한 많은 부분이 흥미로웠고 또 알게 되는 부분이 많았습니다.

약간 소름이 돋은 부분은 사람마다 성향이 다른 것 처럼 AI도 성향이 다르다는 것이었죠. 물론 AI도 사람이 개발을 했기 때문에 그렇다는 건 이해가 갑니다. 다만 어떤 사람들이 어떤 가치관을 갖고 해당 AI를 개발했는지. 그런 부분들이 보이니 흥미로우면서도 실제 실무에서 코드나 주석만 봐도 “00가 짠 코드구나” 를 하는 것과 같은 느낌을 받았습니다.

이제는 “아 이거 Cursor네” , “이건 GPT 같은데?” 하는 감이 들 때가 있습니다. 아마 여러분도 꾸준히 하시다 보면 느껴지실 겁니다.

단, 입문, 초보 일 때 AI를 어떻게 활용하느냐가 앞으로의 미래를 결정합니다. 무지성으로 AI에게 “해줘” 라는 말만 하고 “잘 되네” 라는 것만 생각하다면 절대 발전이 없습니다. AI가 답이 아니라 AI는 내가 생각하고 이해할 수 있는 시간을 효율적으로 사용하게 해주는 그런 “도구”일 뿐입니다.

이번 시간에는 지난 시간에 만든 대시보드에서 각종 차트와 그래프 UI를 만들어 보겠습니다.
그럼 시작합니다.

gpt_cursor_antigravity AI 비교 — GPT vs Cursor vs AntiGravity 를 AI를 활용하여 시각화 한 이미지 자료입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

Table of Contents

AI 실습을 위한 외부 링크

1. “서비스 같은 화면” 만들기

지난 Part 6에서 기본적인 대시보드의 “틀”을 만들었다면, 이번 Part 7에서는 드디어 대시보드의 핵심 요소인 차트(Chart)·그래프(Graph) 제작으로 들어갑니다.

사실, 많은 입문자·비전공자·부업러가 웹 개발을 어려워하는 이유 중 하나가 바로 이 차트와 그래프입니다.
저도 마찬가지였습니다.

“차트·그래프는 뭔가 복잡한 수학식이나 프로그래밍 기술이 필요할 것 같다.”

하지만 꼭 기억하셔야 할 부분은 실제 실무에서 차트를 수식으로 그리는 일은 거의 없습니다.
현대 웹 개발은 Chart.js·ApexCharts·ECharts 같은 라이브러리로 90% 이상 해결합니다.

그러다 보니 이번 파트는 특히. 웹개발을 갓 시작했거나 실무에 처음 뛰어든 입문자에게 가장 중요한 내용이 되겠습니다.

✔ 차트가 어떻게 구성되는지
✔ 코드가 왜 그렇게 작성되는지
✔ 실무에서 어떤 방식으로 사용되는지
✔ 3개의 AI(GPT·Cursor·AntiGravity)가 어떤 차이를 보이는지

이 모든 것을 “초보자도 이해할 수 있는 방식”으로 정리했습니다.
분명 도움이 될 것이라 믿습니다.

2. 오늘 AI에게 줄 동일 프롬프트

아래의 동일 프롬프트를 GPT·Cursor·AntiGravity 모두에게 입력했습니다.

“대시보드에 들어갈 ‘막대 그래프 + 선 그래프’를 HTML/CSS/JS로 만들어줘.

조건:
1) Chart.js 사용
2) 카드 형태 안에 그래프 배치
3) 반응형: 너비가 줄어들면 그래프 자동 리사이징
4) 코드는 초보자도 수정하기 쉽게 작성
5) 실제 대시보드처럼 심플하고 실무적인 UI

다 만든 다음에는 작성한 HTML / CSS / JS 코드를 이해하기 쉽고 간단하게 설명해줘."

GPT에 입력한 프롬프트(무료버전)
본 이미지는 이해를 돕기 위해 직접 캡쳐한 이미지로 저작권은 블로그 주인 제로에게 있습니다.

Cursor에 입력한 프롬프트(무료버전)
본 이미지는 이해를 돕기 위해 직접 캡쳐한 이미지로 저작권은 블로그 주인 제로에게 있습니다.

AntiGravity에 입력한 프롬프트(무료버전)
본 이미지는 이해를 돕기 위해 직접 캡쳐한 이미지로 저작권은 블로그 주인 제로에게 있습니다.

저처럼 똑같이 3가지 AI에 모두 입력해 보시면서 체험해 보셔도 되고. 아니면 여러분에게 가장 맞는 AI를 선택하셔서 진행하셔도 됩니다.
혹은 비교를 보면서 어떤 역할에서 어떤 AI를 쓸지 스스로 계획을 해보시는 것도 추천드립니다.

이제 3개 AI가 어떤 결과물을 만들어냈는지 하나씩 비교해보고 또 분석해 보도록 하겠습니다.

3. GPT vs Cursor vs AntiGravity – 차트 생성 비교

3-1. GPT 결과물 — “정석 그 자체”

GPT는 초보자 기준 가장 친절한 코드와 설명을 제공한다.
특히 코드 구조도 간단하고, 실무와 비전공자 모두에게 적합하다.

✔ GPT가 생성한 코드(HTML / CSS / JS 통합)

&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;!-- Chart.js CDN -->
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js">&lt;/script>

  &lt;style>
    /* 전체 레이아웃 */
    body {
      font-family: Arial, sans-serif;
      background: #f4f6f9;
      margin: 0;
      padding: 20px;
    }

    /* 카드 UI */
    .chart-card {
      background: #fff;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      max-width: 100%;
      margin: auto;
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    /* 그래프 캔버스가 부모 width에 맞게 반응형 */
    .chart-container {
      width: 100%;
      height: 350px;
      position: relative;
    }
  &lt;/style>
&lt;/head>

&lt;body>

  &lt;!-- ▼▼ 그래프 카드 ▼▼ -->
  &lt;div class="chart-card">
    &lt;div class="card-title">월별 매출 추이 (막대 + 선 그래프)&lt;/div>
    &lt;div class="chart-container">
      &lt;canvas id="mixedChart">&lt;/canvas>
    &lt;/div>
  &lt;/div>

  &lt;script>
    // 그래프 요소 가져오기
    const ctx = document.getElementById('mixedChart');

    // Chart.js 생성
    const mixedChart = new Chart(ctx, {
      type: 'bar', // 기본 그래프는 막대
      data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
        datasets: [
          {
            label: '매출액 (만원)',
            data: [12, 19, 13, 15, 22, 30],
            backgroundColor: 'rgba(54, 162, 235, 0.5)'
          },
          {
            label: '증가율 (%)',
            data: [5, 7, -3, 4, 12, 9],
            type: 'line',       // 이 데이터셋만 선 그래프
            borderWidth: 2
          }
        ]
      },
      options: {
        responsive: true,  // 반응형
        maintainAspectRatio: false, // 부모 박스 높이에 맞춰 자동 조절
        scales: {
          y: {
            beginAtZero: true  // Y축 0부터 시작
          }
        }
      }
    });
  &lt;/script>

&lt;/body>
&lt;/html>

const ctx = document.getElementById("salesChart");
new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["1월","2월","3월","4월"],
    datasets: [
      { label: "매출", data: [12,19,3,5], backgroundColor: "#4e73df" },
      { type: "line", label: "누적", data: [12,31,34,39],
        borderColor: "#ff6384", fill:false }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});

✔ GPT가 생성한 코드(HTML / CSS / JS 통합) 설명

HTML 구조
- <div class="chart-card">
  → 카드 UI 전체를 감싸는 박스
- <canvas id="mixedChart"></canvas>
  → Chart.js가 실제로 그래프를 그리는 공간
- <div class="chart-container">
  → 반응형을 위한 부모 박스

CSS 디자인
- chart-card
  → 흰색 배경, 그림자, 둥근 모서리의 실무형 카드 스타일
- chart-container
  → 높이를 지정해줘야 그래프가 안정적으로 보임 (350px)
- 모든 그래프는 부모의 너비를 따라 자동으로 크기 조정됨

JavaScript(Chart.js 설정)
- Type : 'bar'
  → 기본 그래프는 막대(bar)
- datasets = 2개
  → 첫번째 : 막대 그래프
  → 두번째 : 선 그래프(type : ‘line’)
  이렇게 하면 막대 + 선이 한 그래프 카드 안에 동시 표시 됨.
- responsive : ture
  - 창 크기를 줄이면 그래프도 자동으로 줄어드는 반응형 기능.
- maintainAspectRatio : false
  - 부모(chart-container) 높이에 맞춰 자연스럽게 늘어나거나 줄어듦.

✔ GPT가 생성한 대시보드 차트

✔ GPT 평가

설명 친절함
코드 가장 안정적
초보자 수정이 쉬움
실무에서 그대로 써도 문제 없음

👉 입문자 + 실무자 모두 적용 가능

3-2. Cursor 결과물 — “실무팀이 바로 사용 가능한 구조”

Cursor는 개발팀에서 사용하는 “프로젝트 구조” 그대로 코드를 만듭니다.

✔ Cursor 가 생성한 HTML/CSS/JS 코드

&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;!-- Chart.js CDN -->
    &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js">&lt;/script>
    
    &lt;style>
        /* 기본 스타일 초기화 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            padding: 20px;
        }

        /* 카드 컨테이너 */
        .dashboard-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 카드 스타일 */
        .chart-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 24px;
            margin-bottom: 20px;
        }

        /* 카드 헤더 */
        .card-header {
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 20px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .card-subtitle {
            font-size: 14px;
            color: #7f8c8d;
        }

        /* 차트 컨테이너 */
        .chart-container {
            position: relative;
            height: 400px;
            width: 100%;
        }

        /* 반응형 디자인 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .chart-card {
                padding: 16px;
            }

            .chart-container {
                height: 300px;
            }

            .card-title {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .chart-container {
                height: 250px;
            }
        }
    &lt;/style>
&lt;/head>
&lt;body>
    &lt;div class="dashboard-container">
        &lt;div class="chart-card">
            &lt;div class="card-header">
                &lt;h2 class="card-title">월별 매출 및 목표 달성률&lt;/h2>
                &lt;p class="card-subtitle">2024년 월별 매출액과 목표 달성률 비교&lt;/p>
            &lt;/div>
            &lt;div class="chart-container">
                &lt;canvas id="myChart">&lt;/canvas>
            &lt;/div>
        &lt;/div>
    &lt;/div>

    &lt;script>
        // 차트 데이터 설정
        const chartData = {
            // X축 레이블 (월)
            labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            
            // 데이터셋 배열
            datasets: [
                {
                    // 막대 그래프 데이터
                    label: '매출액 (만원)',
                    type: 'bar',  // 막대 그래프 타입
                    data: [3200, 3500, 3800, 4200, 4500, 4800, 5200, 5500, 5800, 6200, 6500, 7000],
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',  // 막대 색상 (파란색, 투명도 60%)
                    borderColor: 'rgba(54, 162, 235, 1)',  // 막대 테두리 색상
                    borderWidth: 1,
                    yAxisID: 'y',  // 왼쪽 Y축 사용
                },
                {
                    // 선 그래프 데이터
                    label: '목표 달성률 (%)',
                    type: 'line',  // 선 그래프 타입
                    data: [80, 85, 88, 92, 90, 95, 98, 96, 100, 105, 108, 110],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',  // 선 아래 영역 색상
                    borderColor: 'rgba(255, 99, 132, 1)',  // 선 색상 (빨간색)
                    borderWidth: 2,
                    fill: false,  // 선 아래 영역 채우기 안 함
                    tension: 0.4,  // 선의 곡선 정도 (0~1, 0.4는 부드러운 곡선)
                    yAxisID: 'y1',  // 오른쪽 Y축 사용
                }
            ]
        };

        // 차트 옵션 설정
        const chartOptions = {
            // 반응형 설정
            responsive: true,  // 화면 크기에 따라 자동 조절
            maintainAspectRatio: false,  // 비율 유지 안 함 (컨테이너 크기에 맞춤)
            
            // 상호작용 설정
            interaction: {
                mode: 'index',  // 마우스 오버 시 같은 인덱스의 모든 데이터 표시
                intersect: false,
            },
            
            // 플러그인 설정
            plugins: {
                // 범례 설정
                legend: {
                    display: true,  // 범례 표시
                    position: 'top',  // 범례 위치 (상단)
                    labels: {
                        usePointStyle: true,  // 점 스타일 사용
                        padding: 15,  // 범례 간격
                        font: {
                            size: 12
                        }
                    }
                },
                // 툴팁 설정
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14
                    },
                    bodyFont: {
                        size: 12
                    }
                }
            },
            
            // 스케일 설정 (Y축)
            scales: {
                // 왼쪽 Y축 (매출액)
                y: {
                    type: 'linear',
                    position: 'left',  // 왼쪽에 배치
                    beginAtZero: true,  // 0부터 시작
                    title: {
                        display: true,
                        text: '매출액 (만원)',
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'  // 격자 색상
                    }
                },
                // 오른쪽 Y축 (목표 달성률)
                y1: {
                    type: 'linear',
                    position: 'right',  // 오른쪽에 배치
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '목표 달성률 (%)',
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        drawOnChartArea: false,  // 격자선 표시 안 함 (중복 방지)
                    }
                },
                // X축 설정
                x: {
                    grid: {
                        display: false  // X축 격자선 표시 안 함
                    }
                }
            }
        };

        // 차트 생성
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',  // 기본 타입은 막대 그래프
            data: chartData,
            options: chartOptions
        });

        // 윈도우 리사이즈 이벤트 리스너 (반응형 대응)
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    &lt;/script>
&lt;/body>
&lt;/html>

✔ Cursor가 생성한 HTML/CSS/JS 코드 설명

HTML 구조
- Chart.js CDN을 <head>에 포함
- 카드 구조: .chart-card 안에 헤더와 차트 컨테이너 배치
- <canvas> 요소로 차트 렌더링

CSS 스타일링
- 카드 디자인
  - 흰 배경, 둥근 모서리(border-radius: 12px)
  - 그림자 효과(box-shadow)
- 반응형
  - @media로 화면 크기별 스타일 조정
  - 768px 이하: 패딩과 차트 높이 축소
  - 480px 이하: 차트 높이 추가 축소

3. JavaScript 차트 설정

데이터 구조 (chartData)

JavaScript 차트 설정
- 데이터 구조(chartData)
  - labels: X축 레이블 (월)
  - datasets: 두 개의 데이터셋
  - 첫 번째: 막대 그래프 (type: ‘bar’) – 매출액
  - 두 번째: 선 그래프 (type: ‘line’) – 목표 달성률
- Y축 이중 설정
  - 왼쪽 Y축 (yAxisID: ‘y’): 매출액
  - 오른쪽 Y축 (yAxisID: ‘y1’): 목표 달성률
  - 단위가 다른 두 데이터를 함께 표시
- 차트 옵션 (chartOptions)
  - responsive: true: 반응형 활성화
  - maintainAspectRatio: false: 컨테이너 크기에 맞춤
  - scales: Y축 두 개 설정 (왼쪽/오른쪽)
- 반응형 처리
  - window.addEventListener(‘resize’): 창 크기 변경 시 차트 자동 리사이즈

Cursor가 생성한 대시보드 페이지.
본 이미지는 이해를 돕기 위해 캡쳐한 이미지로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

Cursor 가 생성한 대시보드 페이지 모바일 버전.
본 이미지는 이해를 돕기 위해 캡쳐한 이미지로 저작권은 블로그 주인 제로에게 있습니다.

✔ Cursor 평가

구조화 최고
유지보수 쉬움
팀 개발환경에 최적화
초보자에게는 다소 난이도 있음

👉 실무 프로젝트 기준 1등

3-3. AntiGravity 결과물 — “디자인이 가장 예쁘다”

AntiGravity는 입력 의도보다 디자인 요소를 더 반영합니다. 그래서 포트폴리오용 UI가 빠르게 필요할 때 생각보다 요긴합니다.

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드

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

&lt;head>
    &lt;meta charset="UTF-8">
    &lt;!-- 모바일 기기에서도 비율이 깨지지 않도록 뷰포트 설정 -->
    &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;!-- Chart.js 라이브러리 추가 -->
    &lt;script src="https://cdn.jsdelivr.net/npm/chart.js">&lt;/script>
    &lt;!-- 자바스크립트 연결 (defer 속성을 사용하여 HTML 로딩 후 실행) -->
    &lt;script src="script.js" defer>&lt;/script>
&lt;/head>

&lt;body>

    &lt;!-- 헤더 영역: 로고와 네비게이션 메뉴 포함 -->
    &lt;header class="main-header">
        &lt;div class="container header-container">
            &lt;!-- 로고 영역 -->
            &lt;div class="logo">
                &lt;a href="#">MyBusiness&lt;/a>
            &lt;/div>

            &lt;!-- 데스크탑용 네비게이션 메뉴 -->
            &lt;nav class="main-nav">
                &lt;ul>
                    &lt;li>&lt;a href="#">홈&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#">서비스&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#">포트폴리오&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#">문의하기&lt;/a>&lt;/li>
                &lt;/ul>
            &lt;/nav>

            &lt;!-- 모바일용 햄버거 버튼 (기본적으로는 숨겨져 있음) -->
            &lt;button class="hamburger-btn" aria-label="메뉴 열기">
                &lt;span>&lt;/span>
                &lt;span>&lt;/span>
                &lt;span>&lt;/span>
            &lt;/button>
        &lt;/div>
    &lt;/header>

    &lt;!-- 모바일 메뉴 오버레이 (햄버거 버튼 클릭 시 나타남) -->
    &lt;div class="mobile-menu">
        &lt;ul>
            &lt;li>&lt;a href="#">홈&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#">서비스&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#">포트폴리오&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#">문의하기&lt;/a>&lt;/li>
        &lt;/ul>
    &lt;/div>

    &lt;!-- 메인 콘텐츠 영역 -->
    &lt;main class="main-content">
        &lt;div class="container">
            &lt;section class="hero-section">
                &lt;h1>비즈니스를 위한 최적의 솔루션&lt;/h1>
                &lt;p>반응형 웹 디자인으로 어디서든 완벽하게 보입니다.&lt;/p>
                &lt;button class="cta-btn">자세히 보기&lt;/button>
            &lt;/section>

            &lt;section class="content-section">
                &lt;h2>대시보드 현황&lt;/h2>
                &lt;div class="card-grid">
                    &lt;div class="card">
                        &lt;h3>방문자 수&lt;/h3>
                        &lt;p>1,234명&lt;/p>
                        &lt;span style="color: #2563eb; font-size: 0.9rem;">▲ 12% 증가&lt;/span>
                    &lt;/div>
                    &lt;div class="card">
                        &lt;h3>신규 가입&lt;/h3>
                        &lt;p>56명&lt;/p>
                        &lt;span style="color: #2563eb; font-size: 0.9rem;">▲ 5% 증가&lt;/span>
                    &lt;/div>
                    &lt;div class="card">
                        &lt;h3>매출액&lt;/h3>
                        &lt;p>₩ 1,200,000&lt;/p>
                        &lt;span style="color: #dc2626; font-size: 0.9rem;">▼ 2% 감소&lt;/span>
                    &lt;/div>
                    &lt;div class="card">
                        &lt;h3>활성 세션&lt;/h3>
                        &lt;p>320&lt;/p>
                        &lt;span style="color: #2563eb; font-size: 0.9rem;">유지&lt;/span>
                    &lt;/div>
                &lt;/div>

                &lt;!-- 차트 섹션 추가 -->
                &lt;div class="chart-container card" style="margin-top: 30px; padding: 20px;">
                    &lt;h3>월별 매출 및 목표 달성률&lt;/h3>
                    &lt;!-- 차트가 그려질 캔버스 영역 -->
                    &lt;div style="position: relative; height: 400px; width: 100%;">
                        &lt;canvas id="myMixedChart">&lt;/canvas>
                    &lt;/div>
                &lt;/div>
            &lt;/section>
        &lt;/div>
    &lt;/main>

    &lt;!-- 푸터 영역 -->
    &lt;footer class="main-footer">
        &lt;div class="container">
            &lt;p>&amp;copy; 2024 MyBusiness Corp. All rights reserved.&lt;/p>
        &lt;/div>
    &lt;/footer>

&lt;/body>
&lt;/html>

// 페이지가 완전히 로드된 후 실행되도록 합니다.
document.addEventListener('DOMContentLoaded', () => {
    // 햄버거 버튼 요소를 가져옵니다.
    const hamburgerBtn = document.querySelector('.hamburger-btn');
    // 모바일 메뉴 요소를 가져옵니다.
    const mobileMenu = document.querySelector('.mobile-menu');

    // 햄버거 버튼을 클릭했을 때 실행될 함수를 정의합니다.
    hamburgerBtn.addEventListener('click', () => {
        // 1. 햄버거 버튼에 'active' 클래스를 토글합니다. (X 모양으로 애니메이션 처리용)
        hamburgerBtn.classList.toggle('active');

        // 2. 모바일 메뉴에 'active' 클래스를 토글합니다. (메뉴 보이기/숨기기용)
        mobileMenu.classList.toggle('active');
    });

    // ==========================================
    // 대시보드 차트 구현 (Chart.js 사용)
    // ==========================================

    // 1. 차트를 그릴 캔버스 요소를 가져옵니다.
    const ctx = document.getElementById('myMixedChart').getContext('2d');

    // 2. 차트 데이터를 설정합니다.
    const chartData = {
        // X축 라벨 (예: 월별)
        labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        datasets: [
            {
                // 첫 번째 데이터셋: 막대 그래프 (Bar Chart) - 매출액
                type: 'bar',                // 그래프 형태 지정
                label: '월별 매출액 (만원)',  // 범례 이름
                data: [1200, 1900, 3000, 500, 200, 300, 4500, 3200, 2100, 1500, 1800, 2400], // 데이터 값
                backgroundColor: 'rgba(37, 99, 235, 0.5)', // 막대 색상 (파란색, 반투명)
                borderColor: 'rgba(37, 99, 235, 1)',       // 막대 테두리 색상
                borderWidth: 1                             // 테두리 두께
            },
            {
                // 두 번째 데이터셋: 선 그래프 (Line Chart) - 목표 달성률
                type: 'line',               // 그래프 형태 지정
                label: '목표 달성률 (%)',    // 범례 이름
                data: [80, 95, 120, 40, 30, 45, 150, 110, 90, 85, 92, 100], // 데이터 값
                backgroundColor: 'rgba(255, 99, 132, 0.2)', // 점 배경 색상
                borderColor: 'rgba(255, 99, 132, 1)',       // 선 색상 (붉은색)
                borderWidth: 2,                             // 선 두께
                yAxisID: 'y1',                              // 별도의 Y축(오른쪽) 사용 지정
                tension: 0.3                                // 선의 굴곡 (0: 직선, 높을수록 곡선)
            }
        ]
    };

    // 3. 차트 옵션을 설정합니다. (디자인 및 반응형 설정)
    const chartOptions = {
        responsive: true,           // 반응형 설정 (화면 크기에 따라 자동 리사이징)
        maintainAspectRatio: false, // 컨테이너 크기에 맞춰 높이 조절 가능하도록 설정
        plugins: {
            legend: {
                position: 'top',    // 범례 위치 (top, bottom, left, right)
            },
            title: {
                display: true,
                text: '2024년 사업 실적 현황' // 차트 상단 제목
            }
        },
        scales: {
            // 왼쪽 Y축 (매출액)
            y: {
                beginAtZero: true,  // 0부터 시작
                title: {
                    display: true,
                    text: '매출액 (만원)'
                }
            },
            // 오른쪽 Y축 (달성률)
            y1: {
                type: 'linear',     // 선형 스케일
                display: true,
                position: 'right',  // 오른쪽에 배치
                grid: {
                    drawOnChartArea: false, // 왼쪽 축의 그리드와 겹치지 않게 설정
                },
                title: {
                    display: true,
                    text: '달성률 (%)'
                }
            }
        }
    };

    // 4. 차트 생성 (Chart 객체 생성)
    new Chart(ctx, {
        type: 'bar', // 기본 타입을 bar로 설정 (하위 데이터셋에서 개별 지정 가능)
        data: chartData,
        options: chartOptions
    });
});

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드 설명

1. HTML (`index.html`)

HTML
- 라이브러리 추가: <head> 태그 안에 Chart.js를 사용하기 위한 CDN 주소(<script src="...">)를 추가했습니다.
- 차트 영역 생성: 카드 그리드 아래에 새로운 .card 영역을 만들고, 그 안에 그래프가 그려질 <canvas id="myMixedChart"> 태그를 배치했습니다.
- 크기 제어: 모바일에서도 잘 보이도록 div 감싸개에 높이(400px)를 주어 비율이 깨지지 않게 했습니다.
JS (script.js)
- 데이터 설정 (chartData):
  - datasets 배열 안에 두 개의 객체를 넣었습니다.
  - 하나는 type: 'bar' (매출액 막대 그래프), 다른 하나는 type: 'line' (달성률 선 그래프)입니다.
  - 이중 축 (Dual Axis): 매출액은 단위가 크고(만원), 달성률은 작으므로(%), yAxisID: 'y1'을 사용하여 오른쪽 축을 따로 만들었습니다.
- 옵션 설정 (chartOptions):
  - responsive: true: 화면 크기에 맞춰 그래프 크기가 자동 조절됩니다.
  - maintainAspectRatio: false: 그래프가 찌그러지지 않고 설정한 높이(400px)를 유지하며 너비만 변하도록 했습니다.

✔ AntiGravity 가 생성한 대시보드 페이지

AntiGravity가 생성한 차트 대시보드 페이지.
이해를 돕기 위해 제공한 이미지로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.

AntiGravity가 생성한 대시보드 차트 페이지 모바일 버전.
이해르 돕기 위해 제공된 이미지로 저작권은 블로그 주인 제로에게 있습니다.

✔ AntiGravity 평가

디자인 최적화
코드 매우 간단
설명은 상대적으로 부족

👉 UI 시안·포트폴리오용 1등

4. 초보자를 위한 “차트 기본 개념 1분 정리”

✔ 차트는 HTML로 그리지 않는다

HTML은 단지 “상자를 만들어주는 역할”을 합니다.

&lt;canvas id="salesChart">&lt;/canvas>

여기에 색·선·도형을 입히는 것은 JavaScript 입니다.

✔ Chart.js는 차트를 ‘자동으로’ 보정해준다

반응형 자동 적용
데이터만 넣으면 바로 그림 생성
Canvas 내부 수정도 자동 처리

그래서 입문자에게 가장 좋은 라이브러리입니다.

✔ 실무에서 차트는 파일로 따로 관리한다

Cursor가 이 점을 가장 잘 반영했습니다.

5. 세 AI의 차트 품질 비교표

항목	GPT	Cursor	AntiGravity
난이도	⭐ 쉬움	🔥 어려움	⭐ 아주 쉬움
실무 적합	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
디자인	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
초보자 친화	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
반응형	완벽	완벽	완벽

🔎 결론

입문자, 부업러 → GPT
실무자, 개발자 → Cursor
포트폴리오 빠른 제작 → AntiGravity

6. 마무리하며

이번 Part 7에서는 대시보드의 핵심인 차트·그래프 UI를 AI 3종으로 비교하며 풀어보았습니다.

✔ Chart.js 사용법
✔ 반응형 조정
✔ GPT·Cursor·AntiGravity 비교
✔ 입문자 친화 설명
✔ 실무자 기준 분석

이제 여러분들은 “회사 관리자 페이지에 있는 차트 UI를 직접 만들 수 있는 단계”로 접어들었습니다.

다음편 예고

다음 편에서는

👉 실시간 데이터 업데이트 UI
👉 필터·검색 기능
👉 테이블 + 페이징 + 정렬
👉 실무에서 가장 많이 쓰는 대시보드 컴포넌트 제작

를 진행하려 합니다. 다음 편도 많은 관심 부탁드리겠습니다.

[HTML/CSS 입문] AI로 대시보드 차트 UI 만들기(GPT vs Cursor vs AntiGravity) | Part 8

AI 실습을 위한 외부 링크

1. “서비스 같은 화면” 만들기

2. 오늘 AI에게 줄 동일 프롬프트

3. GPT vs Cursor vs AntiGravity – 차트 생성 비교

3-1. GPT 결과물 — “정석 그 자체”

✔ GPT가 생성한 코드(HTML / CSS / JS 통합)

✔ GPT가 생성한 코드(HTML / CSS / JS 통합) 설명

✔ GPT가 생성한 대시보드 차트

✔ GPT 평가

3-2. Cursor 결과물 — “실무팀이 바로 사용 가능한 구조”

✔ Cursor 가 생성한 HTML/CSS/JS 코드

✔ Cursor가 생성한 HTML/CSS/JS 코드 설명

3. JavaScript 차트 설정

데이터 구조 (chartData)

✔ Cursor 평가

3-3. AntiGravity 결과물 — “디자인이 가장 예쁘다”

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드 설명

1. HTML (`index.html`)

✔ AntiGravity 가 생성한 대시보드 페이지

✔ AntiGravity 평가

4. 초보자를 위한 “차트 기본 개념 1분 정리”

✔ 차트는 HTML로 그리지 않는다

✔ Chart.js는 차트를 ‘자동으로’ 보정해준다

✔ 실무에서 차트는 파일로 따로 관리한다

5. 세 AI의 차트 품질 비교표

🔎 결론

6. 마무리하며

다음편 예고

다른 편이 궁금하다면?

댓글 달기 댓글 취소

AI 실습을 위한 외부 링크

1. “서비스 같은 화면” 만들기

2. 오늘 AI에게 줄 동일 프롬프트

3. GPT vs Cursor vs AntiGravity – 차트 생성 비교

3-1. GPT 결과물 — “정석 그 자체”

✔ GPT가 생성한 코드(HTML / CSS / JS 통합)

✔ GPT가 생성한 코드(HTML / CSS / JS 통합) 설명

✔ GPT가 생성한 대시보드 차트

✔ GPT 평가

3-2. Cursor 결과물 — “실무팀이 바로 사용 가능한 구조”

✔ Cursor 가 생성한 HTML/CSS/JS 코드

✔ Cursor가 생성한 HTML/CSS/JS 코드 설명

3. JavaScript 차트 설정

데이터 구조 (chartData)

✔ Cursor 평가

3-3. AntiGravity 결과물 — “디자인이 가장 예쁘다”

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드

✔ AntiGravity 가 생성한 HTML/CSS/JS 코드 설명

1. HTML (index.html)

✔ AntiGravity 가 생성한 대시보드 페이지

✔ AntiGravity 평가

4. 초보자를 위한 “차트 기본 개념 1분 정리”

✔ 차트는 HTML로 그리지 않는다

✔ Chart.js는 차트를 ‘자동으로’ 보정해준다

✔ 실무에서 차트는 파일로 따로 관리한다

5. 세 AI의 차트 품질 비교표

🔎 결론

6. 마무리하며

다음편 예고

다른 편이 궁금하다면?

댓글 달기 댓글 취소

1. HTML (`index.html`)