본문 바로가기

직딩/AI

AI로 코딩하기 전 반드시 알아야할 웹 기본 개념 – HTML, CSS, JavaScript, React, Next.js 이해하기

반응형

무식한게 용감하다고, 저는 CSS가 뭔지도 모르고 AI랑 대화하면서 미니게임을 만들었습니다. AI가 써주는 코드를 보고 문법들을 이해했는데, 굉장히 비효율적이었습니다. 그래서 오늘은 AI와 함께 개발하기 전에 알고 있어야 하는 기초 문법들의 개념을 정리하겠습니다. 이 개념을 알고 시작하는 것과 모르는 상태에서 AI와 코딩을 하는 것은 천지차이입니다.

이 글이 도움이 될만한 사람

AI로 코드를 짜서 사이트를 만들어보고 싶은 비개발자

HTML? CSS? JS? React? Next.js? 차이가 뭔지 모르는 과거의 나같은 사람

 

※ 이 글은 웹 프론트엔드에만 초점을 맞췄고, 백엔드 기초 개념은 별도의 글에서 다룰 예정입니다.


1. HTML, CSS, JavaScript 이해하기

HTML은 웹페이지의 뼈대입니다. 하지만 실제 웹사이트에는 색깔도 입혀줘야하고, 버튼을 누르면 다음 화면으로 넘어가야합니다. 실제 코드와 함께 예시를 들어볼게요.

 

codepen.io/pen 링크에서 직접 코드를 넣어보면 이해가 빠릅니다. 로그인도 필요없으니 복붙만 해보세요!

(1) HTML만 있는 경우

<button>구매하기</button>

 

→ 회색 배경의 버튼만 덩그러니 나오고, 클릭해도 아무 동작을 안함

(2) CSS를 더하면

button {
  background: green;
  color: white;
  border-radius: 5px;
}

→ 초록색 배경에 흰색 글씨의 버튼으로 바뀜

(3) JavaScript를 더하면

document.querySelector("button").addEventListener("click", () => {
  alert("구매가 완료되었습니다!");
});

→ 버튼을 클릭하면 알림이 뜸 (이벤트 동작)

 

저는 AI와 처음 개발할때 GPT와 codepen의 조합으로 공부했습니다. HTML, CSS, JS 코드를 따로 입력하다보니 이해가 쉽고, 배포 과정이 필요없어서 맛보기로 추천드립니다. 다만 실제로 배포까지하려면 Codepen으로는 부족합니다.


2. React 와 Next.js 은 또 뭐냐!

HTML/CSS/JS로 간단한 페이지를 만들 수는 있지만, 다음과 같은 복잡한 상황에서는 한계가 있습니다:

  • 상품 카드를 100개 반복해서 보여주고 싶어요
  • 버튼을 눌렀을 때 화면 일부만 바꾸고 싶어요
  • 여러 화면을 왔다갔다하고 싶어요
  • 사용자 정보에 따라 다른 화면을 보여주고 싶어요
  • 화면에 무언가 계속 바뀌게 하고 싶어요

이런 걸 도와주는 도구가 바로 React입니다.


✅ 2.1 React란?

 

React는 ‘UI를 효율적으로 만들게 도와주는 도구(라이브러리)’입니다.

 

HTML처럼 <div>나 <button>을 쓰지만, 화면을 작은 단위로 나눠서 조립할 수 있게 도와줘요. 이렇게 쪼개진 작은 화면 단위를 컴포넌트라고 부릅니다.

참고로 컴포넌트(Component)는 화면을 이루는 하나의 조각을 말합니다. 예를 들어 Header(메뉴) / ProductCard(상품 1개) / Buybotton(구매버튼) -> 총 3개의 컴포넌트로 화면이 구성되는겁니다.

 

그러면 같은 화면을 HTML/CSS/JS 방식으로 만들었을 때와, React 방식으로 만들었을 때의 코드를 비교해보겠습니다.

📦 HTML/CSS/JS 로 상품 카드 3개를 나열하는 UI

<!-- index.html -->
<!-- 상품 목록이 들어갈 빈 div -->
<div id="product-list"></div>

<script>
  // 상품 데이터를 배열로 정의
  const products = [
    { title: "골프장갑", image: "glove.jpg" },
    { title: "골프모자", image: "hat.jpg" },
    { title: "골프공", image: "ball.jpg" },
  ];

  // 상품 목록을 보여줄 컨테이너 div 선택
  const container = document.getElementById("product-list");

  // 각 상품 데이터를 기반으로 DOM 요소를 생성해서 추가
  products.forEach((p) => {
    const card = document.createElement("div");
    card.className = "product"; // 클래스 이름 지정

    // HTML 문자열로 이미지, 텍스트, 버튼 구성
    card.innerHTML = `
      <img src="${p.image}" />
      <p>${p.title}</p>
      <button>구매하기</button>
    `;

    // 완성된 카드를 화면에 추가
    container.appendChild(card);
  });
</script>

문제점

  • HTML, 스타일, 동작이 섞여 있어 구조 파악이 어려움
  • 컴포넌트 개념이 없어 반복되는 요소를 재사용하기 어려움
  • UI 수정 시 복잡도가 빠르게 증가

⚛️ React 로 상품 카드 3개를 나열하는 UI

// ProductCard.tsx
// 상품 하나를 보여주는 재사용 가능한 컴포넌트 정의
export default function ProductCard({ title, image }: { title: string; image: string }) {
  return (
    <div className="product">
      <img src={image} />       {/* 상품 이미지 */}
      <p>{title}</p>            {/* 상품 이름 */}
      <button>구매하기</button> {/* 구매 버튼 */}
    </div>
  );
}
// ProductList.tsx
// 상품 목록을 가져와 여러 개의 ProductCard를 보여주는 컴포넌트

import ProductCard from "./ProductCard"; // 상품 카드 컴포넌트 불러오기

// 상품 데이터 정의
const products = [
  { title: "골프장갑", image: "glove.jpg" },
  { title: "골프모자", image: "hat.jpg" },
  { title: "골프공", image: "ball.jpg" },
];

export default function ProductList() {
  return (
    <div>
      {/* 각 상품을 ProductCard로 변환하여 렌더링 */}
      {products.map((p, index) => (
        <ProductCard key={index} title={p.title} image={p.image} />
      ))}
    </div>
  );
}

장점

  • ProductCard는 재사용 가능한 컴포넌트로 분리됨
  • 데이터만 바꾸면 수십 개의 상품을 효율적으로 렌더링 가능
  • 유지보수성과 가독성이 뛰어남

✅ 2.2 Next.js 란?

React만으로는 ‘페이지 전환’, ‘검색엔진 노출’(SEO), ‘배포’ 같은 기능들을 직접 다 설정해야 됨. 이걸 쉽게 만들어주는 게 Next.js입니다.

상황 React만 쓰면 Next.js를 쓰면
주소에 따라 다른 화면 보여주기 직접 라우팅 설정해야 함 폴더만 만들면 자동 연결됨
검색엔진에 잘 보이게 하기 복잡한 설정 필요 자동으로 SSR 지원
서버에서 데이터를 받아오기 코드 많이 작성해야 함 내장 함수로 간단하게 처리
배포하기 직접 설정하거나 빌드 후 FTP 업로드 Vercel에 연결하면 끝

 

특히, AI로 코딩하고 Vercel을 이용해 간단하게 배포하고 싶다면 Next.js을 쓰는게 좋습니다.


🎁 2.3 HTML 부터 Next.js 까지 총 정리하자면

 

(1) HTML은 뼈대, CSS는 꾸미기, JavaScript는 동작을 담당하고,

(2) React는 화면을 잘게 나눠서 효율적으로 만들게 도와주며,

(3) Next.js는 그런 React를 더 쉽고, 빠르게, 자동으로 웹에 올릴 수 있게 도와주는 도구입니다.


3. AI가 만든 코드를 어디다 붙여야 할까?

AI는 코드 덩어리를 주면서 이걸 쓰라고 하는데, 정확하게 어디에 붙여넣어야할지 모를 때가 생깁니다. 괜찮습니다! 잘 모르겠으면 AI에게 어디에가 붙여야하며 왜 그 곳에 들어가야하는지 물어보면서 공부하면 금방 습득할 수 있어요. 예를 들어 AI에게 "구매하기 버튼 만들어줘"라고 하면 아래처럼 JSX 문법으로 된 코드를 받을 수 있습니다.

function BuyButton() {
  return <button>구매하기</button>;
}

이 코드는 HTML처럼 보이지만 사실은 JSX라는 문법으로 작성된 React 컴포넌트입니다. 즉, 일반 HTML 파일에 붙여넣으면 동작하지 않고, Next.js 프로젝트 안의 .tsx 파일에 넣어야 제대로 작동합니다. 매번 AI에게 물어봐가며 코드를 수정해도 되지만, 내가 직접 판단할 수 있으면 효율성이 몇배는 높아집니다.


4. 마지막 총 정리

개념 요약

HTML 구조를 만든다 (뼈대)
CSS 스타일을 입힌다 (인테리어)
JavaScript 동작을 만든다 (클릭, 로직, 인터랙션)
React UI를 효율적으로 만드는 개발 도구
Next.js React + SEO + 페이지 관리 + 배포까지 다 되는 프레임워크
배포 모두가 접근 가능한 사이트로 만들기 (Cursor + Vercel 조합으로 매우 간단하게 가능)

마무리

AI는 코딩을 도와주는 똑똑한 비서라고 생각해야합니다. 가끔 급발진을 하기 때문에 버튼 하나 만들어달라고 했는데 전체 코드가 망가지는 경우가 비일비재합니다. 따라서 비서에게 일을 잘 시키려면 내가 HTML, CSS, JavaScript가 뭔지 알고 있어야 합니다. 

이번 글에서 알려드린 개념들을 다 이해하셨으면 이제부터는 AI를 원하는 대로 써먹을 수 있고, 수정하는 과정도 몇 배는 빨라질겁니다. 이제 정말 뭐든 만들 수 있는 세상입니다. 다같이 화이팅!


이 글은 GPT 4.5 - 리서치 프리뷰 모델의 도움을 받아 작성하였습니다.

반응형