11강: 프론트엔드 기초

v1

작성 2026-04-13읽는 시간 10분

화면 만들기

이제 진짜 화면을 만들 차례예요

10강에서 수직 슬라이싱을 배웠어요. 피자를 한 조각씩 먹는 것처럼, 기능 하나를 완성하고 커밋하고 다음으로 넘어가는 리듬을 익혔죠.

10강 마지막에 이렇게 말씀드렸어요. "Next.js라는 프레임워크로 한 단계 더 올라가 볼 거예요. 레고 블록으로 화면을 조립하는 방법을 배워요."

바로 오늘이에요.

8강에서 HTML + CSS로 개인 웹페이지를 만들었어요. 파일 2개로 뚝딱 만들어서 GitHub Pages에 올렸죠. 그런데 진짜 서비스를 만들려면 한계가 있어요. 페이지가 10개, 20개로 늘어나면 어떻게 될까요? HTML 파일을 20개 만들고, 같은 헤더와 푸터(페이지 맨 아래 영역)를 20번 복사해야 해요. 헤더를 수정하면? 20개 파일을 전부 고쳐야 해요.

그래서 프레임워크(Framework, 자주 쓰는 기능을 미리 묶어둔 도구 세트)가 필요해요. 오늘 배울 Next.js가 바로 그 프레임워크예요.

---

이건 뭐예요?

Next.js = 레고 조립 세트

레고를 떠올려 보세요.

레고 블록 하나하나는 작고 단순해요. 빨간 2x4 블록, 파란 1x2 블록, 투명 창문 블록. 이 블록들을 조합하면 집이 되고, 자동차가 되고, 우주선이 돼요. 그리고 레고 조립 세트에는 설명서가 있어요. "이 블록을 여기에 끼우고, 저 블록은 저기에 끼워라." 설명서를 따라가면 누구나 멋진 결과물을 완성할 수 있어요.

Next.js(넥스트 제이에스)가 바로 이 레고 조립 세트예요. 화면을 만들기 위한 블록(컴포넌트)과, 그 블록을 조립하는 설명서를 제공해요. 주소별로 어떤 페이지를 보여줄지 정하는 라우팅(Routing)과, 공통 틀을 잡아주는 레이아웃(Layout) 시스템이 다 들어있어요.

• 블록 하나 = 컴포넌트(Component, 화면의 독립적인 조각). 헤더 블록, 카드 블록, 버튼 블록 같은 것들이에요
• 블록을 끼우는 판 = 페이지(Page). 블록을 원하는 위치에 배치하면 화면이 완성돼요
• 설명서 = Next.js 프레임워크. 폴더 구조대로 파일을 만들면 페이지가 자동으로 생겨요

왜 Next.js인가요?

프레임워크는 여러 가지가 있어요. React(리액트), Vue(뷰), Angular(앵귤러), Svelte(스벨트)... 바이브 코더에게 "어떤 걸 써야 해요?"라는 질문에 답은 간단해요.

가장 많은 사람이 쓰는 것 = AI가 가장 잘 아는 것.

Next.js는 React(페이스북이 만든 화면 제작 도구)를 기반으로 한 프레임워크예요. 전 세계에서 가장 많이 쓰이는 프론트엔드(사용자가 보는 화면) 도구 중 하나예요. 많은 사람이 쓴다는 건, 인터넷에 예제가 넘친다는 뜻이고, AI가 학습한 코드도 가장 많다는 뜻이에요. Claude에게 "Next.js로 로그인 페이지 만들어줘" 하면, 수만 개의 예제를 참고해서 아주 잘 만들어줘요.

8강에서 기술 선택의 3가지 기준을 배웠죠? Next.js를 그 기준으로 보면 이래요.

기준	Next.js
배포가 쉬워?	Vercel(넥스트를 만든 회사의 배포 서비스)에 자동 배포
AI가 잘 아나?	React + Next.js = AI가 가장 잘 아는 조합 1위
나중에 키울 수 있어?	로그인, DB 연결, API 호출 전부 가능

---

컴포넌트 = 레고 블록

이 개념이 오늘 가장 중요한 거예요.

8강에서 HTML로 히어로 섹션, 자기소개 섹션, 카드 섹션을 만들었죠? 그때는 하나의 index.html 파일에 전부 때려넣었어요. 페이지가 1개니까 괜찮았지만, 페이지가 많아지면 문제가 생겨요.

컴포넌트(Component)는 화면의 독립적인 조각이에요. 레고 블록처럼 따로 만들어두고, 필요한 곳에 끼워넣는 거예요.

예를 들어, 헤더를 컴포넌트로 만들면 이런 느낌이에요.

// Header.js — 헤더 블록
function Header() {
  return (
    <header>
      <h1>내 사이트</h1>
      <nav>홈 | 소개 | 연락처</nav>
    </header>
  );
}

카드도 컴포넌트로 만들어요.

// Card.js — 카드 블록
function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

그리고 페이지에서 이 블록들을 조립해요.

// page.js — 블록을 끼우는 판
function HomePage() {
  return (
    <div>
      <Header />
      <Card title="프로젝트 1" description="첫 번째 작업" />
      <Card title="프로젝트 2" description="두 번째 작업" />
      <Card title="프로젝트 3" description="세 번째 작업" />
    </div>
  );
}

<Header />와 <Card />가 보이시죠? HTML 태그처럼 생겼지만, 우리가 직접 만든 커스텀 블록이에요. <Card />를 3번 쓰면 카드가 3개 나와요. 나중에 카드 디자인을 바꾸고 싶으면? Card.js 파일 하나만 고치면 돼요. 카드가 100개여도 파일 1개만 수정하면 전부 바뀌어요.

코드를 직접 이해할 필요는 없어요. 중요한 건 이 구조예요. "블록을 따로 만들어두고, 조립한다." 이 개념만 기억하시면 돼요. 실제 코드는 Claude가 전부 만들어줘요.

---

Tailwind CSS = 색칠 스티커

8강에서 style.css 파일에 디자인을 넣었죠? "배경색은 이거, 글씨 크기는 저거"를 하나하나 적었어요. Tailwind CSS(테일윈드)는 이 과정을 훨씬 빠르게 만들어주는 도구예요.

비유하자면, 스티커 북이에요. 미리 만들어진 스티커가 수천 개 있어요. "빨간색 스티커", "둥근 모서리 스티커", "그림자 스티커", "큰 글씨 스티커". 이 스티커를 블록에 붙이기만 하면 디자인이 완성돼요.

CSS 파일에 직접 적는 방식과 비교하면 이래요.

기존 방식 (CSS 파일):

/* style.css에 이렇게 적어야 했어요 */
.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Tailwind 방식 (클래스 이름만):

<!-- 스티커를 붙이듯, 클래스 이름을 나열하면 끝 -->
<div class="bg-white rounded-lg p-4 shadow-sm">
  카드 내용
</div>

bg-white는 "배경색 흰색 스티커", rounded-lg는 "모서리 둥글게 스티커", p-4는 "안쪽 여백 스티커", shadow-sm은 "살짝 그림자 스티커"예요. CSS 파일을 따로 만들 필요 없이, 스티커 이름만 나열하면 돼요.

이 스티커 이름을 외울 필요는 전혀 없어요. Claude에게 "카드에 둥근 모서리랑 그림자 넣어줘"라고 말하면, Claude가 알아서 rounded-lg shadow-sm을 붙여줘요. 여러분은 결과만 확인하면 돼요.

---

반응형 디자인 = 자동 줄맞춤

요즘은 휴대폰으로 웹사이트를 보는 사람이 더 많아요. 그래서 반응형 디자인(Responsive Design, 화면 크기에 맞춰 레이아웃이 자동으로 바뀌는 것)이 필수예요.

Tailwind CSS에서는 이게 정말 쉬워요. 스티커 앞에 화면 크기 조건을 붙이면 돼요.

<!-- 모바일에서는 1줄, 태블릿에서는 2줄, PC에서는 3줄 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
</div>

• grid-cols-1 — 기본(모바일): 한 줄에 1개씩
• md:grid-cols-2 — 중간 화면(태블릿): 한 줄에 2개씩
• lg:grid-cols-3 — 큰 화면(PC): 한 줄에 3개씩

md:와 lg:가 화면 크기 조건 스티커예요. "이 크기 이상일 때만 이 스티커를 적용해줘"라는 뜻이에요. Tailwind는 모바일 먼저(Mobile First) 방식이에요. 기본값이 모바일이고, 화면이 커질수록 조건을 추가하는 거예요.

역시, 이 코드를 외울 필요 없어요. Claude에게 "카드 3개를 모바일에서는 세로로, PC에서는 가로로 보여줘"라고 말하면 다 해줘요.

---

우리는 이렇게 쓰고 있어요

지금 여러분이 읽고 있는 이 AI//STUDY 사이트도 컴포넌트 기반이에요.

이 사이트는 Docusaurus라는 프레임워크로 만들어져 있는데, Docusaurus도 React 기반이에요. Next.js와 같은 뿌리를 가지고 있어요. 화면을 만드는 원리가 똑같아요.

예를 들어, AI//STUDY의 홈 화면을 보면 카드가 3개 보이죠? "LECTURES", "REPOSITORIES", "VIBE SKILLS". 이 카드들은 각각 독립적인 컴포넌트예요. src/pages/index.js 파일에서 블록처럼 조립되어 있어요.

// AI//STUDY 홈 페이지의 구조 (간략 버전)
<Layout>
  <HeroSection />     {/* 맨 위 타이틀 영역 */}
  <CardGrid>           {/* 카드 3개 묶음 */}
    <Card title="LECTURES" />
    <Card title="REPOSITORIES" />
    <Card title="VIBE SKILLS" />
  </CardGrid>
</Layout>

레고 블록으로 화면을 조립한다는 개념, 이제 눈에 보이시죠? 11강에서 배울 Next.js도 이것과 완전히 같은 원리예요. 블록을 만들고, 조립하고, 스티커(Tailwind)를 붙여서 꾸미는 거예요.

---

한번 써볼까요?

Next.js 프로젝트를 만드는 건 명령어 한 줄이면 돼요. create-next-app이라는 설치 도구가 모든 걸 자동으로 세팅해줘요. Tailwind CSS도 설치 과정에서 같이 포함할 수 있어요.

# Next.js 새 프로젝트 만들기
npx create-next-app@latest my-service

이 명령어를 실행하면 몇 가지 질문이 나와요. 아래처럼 답하면 돼요.

Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes        ← 꼭 Yes!
Would you like your code inside a `src/` directory? → Yes
Would you like to use App Router? → Yes
Would you like to use Turbopack? → Yes
Would you like to customize the import alias? → No

모르는 용어가 많죠? 괜찮아요. 간단히 설명하면 이래요.

• TypeScript(타입스크립트) — JavaScript에 안전장치를 더한 버전이에요. AI가 더 정확한 코드를 만들어줘요
• ESLint(이에스린트) — 코드에서 실수를 자동으로 찾아주는 맞춤법 검사기예요
• App Router(앱 라우터) — 폴더 이름만으로 페이지 주소를 만들어주는 Next.js의 최신 방식이에요
• Turbopack(터보팩) — 개발할 때 화면을 빠르게 새로고침해주는 엔진이에요

하나만 기억하세요. Tailwind CSS를 쓸 거냐는 질문에 반드시 Yes. 나머지는 기본값(Yes/No)대로 따라가면 돼요.

설치가 끝나면 프로젝트 폴더로 이동해서 개발 서버를 실행하세요.

# 프로젝트 폴더로 이동
cd my-service

# 개발 서버 실행
npm run dev

브라우저에서 http://localhost:3000을 열면 Next.js 기본 페이지가 보여요. 이 주소가 내 컴퓨터에서만 보이는 개발용 주소예요. 이 상태에서 파일을 수정하면 브라우저가 자동으로 새로고침돼요.

---

실습: 메인 페이지 + 카드 3개 만들기

자, 이제 진짜로 만들어볼 거예요. 10강에서 배운 수직 슬라이싱을 적용해서, 한 조각씩 만들어 갈게요.

1조각: 프로젝트 생성

일반 터미널에서 시작하세요.

# 홈 폴더로 이동
cd ~

# Next.js 프로젝트 만들기 (질문이 나오면 위의 답변 참고)
npx create-next-app@latest my-service

# 프로젝트 폴더로 이동
cd my-service

# Git 첫 커밋 (create-next-app이 자동으로 git init을 해줘요)
git add .
git commit -m "프로젝트 초기 세팅"

2조각: 메인 페이지 레이아웃

이제 Claude Code를 시작하고, 메인 페이지를 만들어 달라고 해요.

# Claude Code 시작
claude

Claude Code 대화창에 이렇게 입력하세요.

너는 10년차 프론트엔드 개발자야.
나는 코딩 1줄도 모르는 바이브 코더야.

src/app/page.tsx 파일을 수정해서 메인 페이지를 만들어줘.

페이지 구조:
1. 히어로 섹션 — 사이트 이름 "내 서비스", 한 줄 소개 "바이브 코딩으로 만든 첫 서비스"
2. 카드 3개를 가로로 나열 — 제목과 설명이 있는 카드
   - 카드 1: "빠른 시작" / "5분이면 충분해요"
   - 카드 2: "쉬운 사용" / "클릭 한 번이면 끝"
   - 카드 3: "무료 제공" / "비용 걱정 없이 시작"

디자인:
- Tailwind CSS 사용
- 다크 배경, 밝은 글씨, 시안 포인트(#06b6d4)
- 모바일 반응형 (모바일에서 카드는 세로로, PC에서는 가로로)

안 할 것:
- 다른 파일은 건드리지 마 (page.tsx만 수정)
- 외부 라이브러리 추가하지 마
- 이미지 사용하지 마

코드에 한글 주석 달아줘.

3조각: 카드를 컴포넌트로 분리

메인 페이지가 잘 보이면, 카드를 독립 블록(컴포넌트)으로 분리해볼게요.

방금 만든 카드를 별도 컴포넌트로 분리해줘.

- src/components/Card.tsx 파일을 새로 만들어줘
- Card 컴포넌트는 title과 description을 props(속성값, 블록에 전달하는 정보)로 받아
- page.tsx에서는 Card 컴포넌트를 import(가져오기)해서 사용해
- 디자인은 그대로 유지해

안 할 것:
- 히어로 섹션은 건드리지 마
- 새 라이브러리 추가하지 마

10강에서 배운 수직 슬라이싱이에요. 한 조각씩 만들고, 확인하고, 다음으로 넘어가는 리듬이에요.

---

클로드 코드 터미널에서는 이렇게

전체 흐름을 처음부터 끝까지 정리해 드릴게요.

# ── 1. 프로젝트 만들기 (일반 터미널에서) ──
cd ~
npx create-next-app@latest my-service
cd my-service
git add .
git commit -m "프로젝트 초기 세팅"

# ── 2. Claude Code 시작 ──
claude

Claude Code가 열리면, 메인 페이지를 만들어 달라고 해요 (위의 "2조각" 프롬프트 사용).

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# ── 3. 개발 서버 실행 ──
! npm run dev

브라우저에서 http://localhost:3000을 열어 확인하세요.

# ── 4. 잘 되면 커밋 ──
! git add .
! git commit -m "메인 페이지 레이아웃 완성"

카드 컴포넌트 분리를 시켜요 (위의 "3조각" 프롬프트 사용).

# ── 5. 컴포넌트 분리 후 확인하고 커밋 ──
! git add .
! git commit -m "카드를 독립 컴포넌트로 분리"

커밋 이력을 보면 이렇게 돼요.

! git log --oneline

a1b2c3d 카드를 독립 컴포넌트로 분리
e4f5g6h 메인 페이지 레이아웃 완성
i7j8k9l 프로젝트 초기 세팅

기능마다 세이브 포인트가 있으니까, 컴포넌트 분리에서 문제가 생기면 "메인 페이지 레이아웃 완성" 상태로 바로 돌아갈 수 있어요.

---

Next.js 폴더 구조 — 이것만 알면 돼요

Next.js 프로젝트 폴더를 열면 파일이 많아서 당황할 수 있어요. 하지만 바이브 코더가 알아야 할 폴더는 딱 3개예요.

my-service/
├── src/
│   ├── app/              ← 페이지가 들어가는 곳
│   │   ├── layout.tsx     ← 모든 페이지의 공통 틀 (헤더, 푸터)
│   │   ├── page.tsx       ← 메인 페이지 (localhost:3000)
│   │   └── globals.css    ← 전체 스타일 설정
│   └── components/        ← 레고 블록(컴포넌트) 보관함
│       └── Card.tsx       ← 우리가 만든 카드 블록
├── public/                ← 이미지, 아이콘 등 정적 파일
├── package.json           ← 프로젝트 설명서
└── (나머지는 신경 쓰지 않아도 돼요)

• src/app/page.tsx — 메인 페이지. 이 파일을 수정하면 localhost:3000에 보이는 화면이 바뀌어요
• src/components/ — 레고 블록 보관함. 카드, 버튼, 헤더 같은 블록을 여기에 모아둬요
• public/ — 이미지나 아이콘을 넣는 곳

새 페이지를 추가하고 싶으면? src/app/about/page.tsx 파일을 만들면 localhost:3000/about 주소가 자동으로 생겨요. 폴더 이름이 곧 URL이에요. 이게 Next.js의 마법이에요.

---

이번 강에서 기억할 것

핵심만 정리해 볼게요.

1. Next.js는 레고 조립 세트예요. 블록(컴포넌트)을 따로 만들어두고, 페이지에서 조립해요. 한 블록을 수정하면 그 블록을 쓰는 모든 곳이 한꺼번에 바뀌어요.

2. 컴포넌트는 레고 블록이에요. 헤더 블록, 카드 블록, 버튼 블록을 따로 만들어두면 어디서든 재사용할 수 있어요. 8강에서 하나의 HTML에 다 넣었던 것과 비교하면 큰 발전이에요.

3. Tailwind CSS는 색칠 스티커예요. CSS 파일을 따로 만들 필요 없이, 클래스 이름(스티커)을 붙이면 디자인이 완성돼요. 스티커 이름은 외울 필요 없어요. Claude가 다 알아요.

4. 반응형은 모바일 먼저예요. 기본이 모바일 화면이고, md:, lg: 같은 조건을 붙여서 큰 화면에서의 모습을 추가해요.

5. 폴더 이름이 곧 URL이에요. src/app/about/page.tsx를 만들면 /about 주소가 자동으로 생겨요. 페이지를 추가하는 게 이렇게 쉬워요.

다음 강에서는 12강: 백엔드 기초를 다뤄요. 지금까지는 "보이는 것"을 만들었어요. 그런데 로그인 정보, 글 목록, 사용자 데이터를 새로고침해도 안 사라지게 하려면 어떻게 해야 할까요? 데이터베이스(Database, 데이터를 안전하게 저장하는 창고)가 필요해요. Supabase라는 도구로 데이터 저장을 배워볼 거예요.

---

이런 분께 추천해요

프론트엔드 기초는 "HTML+CSS로 한 페이지는 만들어봤는데, 진짜 서비스를 만들고 싶은 분"을 위한 다음 단계예요.

• 8강에서 첫 웹페이지를 만들었는데, 페이지를 더 추가하고 싶은 분 -- 컴포넌트 기반으로 만들면 페이지가 아무리 늘어나도 관리가 쉬워요.
• "디자인을 매번 CSS로 적는 게 너무 귀찮은 분" -- Tailwind CSS의 클래스 이름 방식을 쓰면, Claude에게 "둥근 모서리에 그림자 넣어줘" 한 마디로 끝나요.
• 모바일에서도 잘 보이는 사이트를 만들고 싶은 분 -- Tailwind의 반응형 시스템을 쓰면, 모바일과 PC 화면을 동시에 대응할 수 있어요.

---

참고 링크

• Next.js 공식 문서 -- 시작하기
• Tailwind CSS 공식 문서 -- 반응형 디자인
• React 공식 문서 -- 컴포넌트
• Claude Code 공식 문서

▸개정 이력1건

• v12026-04-13초판