11강: 프론트엔드 기초

레고 블록처럼 화면을 조립해요

오늘 끝나면 이런 걸 갖게 돼요. Next.js(넥스트 제이에스, 웹 화면을 만드는 도구)로 만든 메인 화면과, 따로 꺼내 다시 쓸 수 있는 카드 블록이 생겨요.

10강에서 배운 대로 한 조각씩 만들고 확인해요. 직접 입력할 명령어나 코드는 없어요.

1단계: 프로젝트를 준비해요

먼저 새 프로젝트를 만들어 달라고 하세요. TypeScript(타입스크립트, 코드 실수를 줄이는 도구)와 Tailwind CSS(테일윈드 CSS, 화면을 꾸미는 도구) 설치 질문도 클로드에게 맡겨요.

내 홈 폴더에 my-service라는 Next.js 프로젝트를 만들어줘.
TypeScript, ESLint(이에스린트, 코드 실수를 찾는 도구), Tailwind CSS,
App Router(앱 라우터, 폴더로 페이지 주소를 정하는 방식)를 포함한 추천 기본값으로 알아서 설정해줘.
설치 중 선택 질문이 나오면 추천값을 사용하고, 내가 직접 골라야 할 때만 쉬운 한국어로 알려줘.

설치가 끝나면 개발 화면을 실행하고 브라우저에서 열어줘.
아직 기본 페이지는 수정하지 마.
실행한 작업과 프로젝트 위치를 마지막에 알려줘.

설치나 컴퓨터 권한 승인 창이 나오면 직접 승인하세요. 이것만 직접 하시면 나머지는 클로드가 해요.

브라우저에 Next.js 기본 화면이 보이면 준비가 끝났어요. 화면이 안 열리면 다음 단계로 가지 말고 이렇게 말하세요.

브라우저에 기본 화면이 보이지 않아.
지금 상태와 오류를 확인하고 원인을 쉬운 말로 설명해줘.
파일을 바꾸기 전에 해결 순서를 먼저 보여줘.

2단계: 메인 화면을 만들어요

이제 히어로 영역(화면 맨 위 소개 부분)과 카드 3개만 만들어요. 10강의 수직 슬라이싱처럼, 다른 기능은 섞지 않아요.

my-service의 메인 페이지를 수정해줘.

페이지 구성:
1. 사이트 이름은 "내 서비스"
2. 한 줄 소개는 "바이브 코딩으로 만든 첫 서비스"
3. 아래 카드 3개를 보여줘.
   - "빠른 시작" / "한 단계씩 시작해요"
   - "쉬운 사용" / "클릭 한 번이면 끝"
   - "무료 제공" / "비용 걱정 없이 시작"

Tailwind CSS로 다크 배경, 밝은 글씨, 청록색 포인트 #06b6d4를 사용해줘.
모바일에서는 카드가 세로로, 넓은 컴퓨터 화면에서는 가로로 보이게 해줘.

이번에는 메인 페이지에 필요한 파일만 수정해줘.
외부 라이브러리와 이미지는 추가하지 마.
먼저 바꿀 파일과 내용을 짧게 보여준 뒤 작업해줘.

브라우저에서 아래 세 가지만 확인하세요.

1. 내 서비스와 한 줄 소개가 보인다.
2. 카드가 3개 보인다.
3. 배경은 어둡고 포인트는 청록색이다.

셋 다 맞으면 첫 화면이 완성됐어요. 다르면 보이는 문제만 한 문장으로 말해 고쳐 달라고 하세요.

3단계: 휴대폰 화면을 확인해요

반응형 디자인(화면 크기에 맞춰 배치가 바뀌는 방식) 확인도 클로드에게 맡겨요. 좁은 화면과 넓은 화면을 나눠 살펴보세요.

방금 만든 메인 페이지의 반응형 화면을 확인해줘.
휴대폰 크기에서는 카드 3개가 세로 한 줄로 보이고,
넓은 컴퓨터 화면에서는 가로로 나란히 보이는지 검사해줘.

글자가 잘리거나 카드가 화면 밖으로 나가면 그 부분만 고쳐줘.
다른 디자인과 문구는 바꾸지 마.
확인 결과를 휴대폰과 컴퓨터 화면으로 나눠 알려줘.

휴대폰 화면에서 카드가 위아래로 보이고, 넓은 컴퓨터 화면에서 나란히 보이면 성공이에요. Tailwind CSS는 이 줄맞춤과 색을 맡아요.

4단계: 카드를 레고 블록으로 나눠요

지금 카드 3개는 한 페이지 안에 들어 있어요. 같은 모양을 다시 쓰기 쉽도록 카드만 별도 컴포넌트(화면의 독립적인 조각)로 꺼내요.

메인 페이지의 카드만 별도 컴포넌트로 분리해줘.

components/Card.tsx 파일을 만들고,
카드 제목과 설명을 전달받아 표시하도록 해줘.
메인 페이지에서는 이 Card 컴포넌트를 가져와 카드 3개를 보여줘.

화면의 문구와 디자인은 그대로 유지해줘.
히어로 영역은 건드리지 말고 새 라이브러리도 추가하지 마.
작업 뒤 브라우저에서 이전 화면과 같은지 확인해줘.

카드 3개가 전과 같은 모습으로 보이면 제대로 나뉘었어요. 겉모습은 같지만, 이제 카드 디자인을 한 파일에서 함께 바꿀 수 있어요.

컴포넌트는 레고 블록이에요

레고 집은 창문 블록, 문 블록, 지붕 블록을 조립해 만들어요. 화면도 헤더, 카드, 버튼 같은 작은 블록을 조립하면 관리하기 쉬워요.

이번에는 카드 블록 하나를 세 번 사용했어요. 카드 모서리나 그림자를 바꿀 때 Card.tsx 하나만 고치면 세 카드에 같은 변화가 적용돼요.

Tailwind CSS는 블록에 붙이는 색칠 스티커와 비슷해요. “둥근 모서리”, “밝은 글씨”, “모바일에서는 세로”처럼 말하면 클로드가 알맞은 꾸미기 조각을 붙여 줘요.

폴더는 세 곳만 알아두세요

파일이 많아 보여도 오늘 확인할 곳은 세 군데예요.

Next.js에서는 app 안의 폴더 이름이 페이지 주소가 돼요. 나중에 소개 페이지가 필요하면 클로드에게 about 페이지를 만들어 달라고 하세요.

5단계: 확인하고 저장해요

마지막으로 화면과 변경 파일을 함께 확인해요. 문제가 없으면 현재 상태를 저장하고 깃허브에 올려 달라고 하세요.

지금 만든 화면을 마지막으로 확인해줘.

확인할 것:
1. 사이트 이름과 소개 문구가 보이는지
2. 카드 3개의 제목과 설명이 맞는지
3. 휴대폰에서는 세로, 넓은 컴퓨터 화면에서는 가로로 보이는지
4. 카드가 별도 컴포넌트로 분리됐는지

문제가 있으면 다른 기능을 추가하지 말고 해당 부분만 고쳐줘.
모두 맞으면 지금 상태를 저장하고 깃허브에 올려 줘.
실행 전에 바뀐 파일과 무엇을 할지 먼저 보여 줘.
비밀번호나 인증 정보가 포함되지 않았는지도 확인해줘.

GitHub(깃허브, 파일과 기록을 온라인에 보관하는 곳) 로그인이나 권한 승인 화면은 직접 진행하세요. 이것만 직접 하시면 나머지는 클로드가 해요. 승인 뒤 저장 기록과 깃허브 주소가 보이면 이번 실습이 끝났어요.

이번 강에서 기억할 것

Next.js는 화면 블록을 조립하는 레고 세트와 비슷해요. 컴포넌트를 따로 만들면 같은 모양을 여러 곳에서 다시 쓸 수 있어요.

Tailwind CSS는 색과 간격, 화면 크기별 배치를 맡아요. 이름을 외우지 말고 원하는 모습을 말한 뒤, 휴대폰과 컴퓨터 화면을 직접 확인하세요.

이런 분께 추천해요

HTML(웹페이지의 내용)과 CSS(화면 꾸미기)로 한 페이지를 만든 뒤, 여러 화면으로 넓히고 싶은 분께 알맞아요. 같은 카드나 버튼을 반복해서 만들지 않고 관리하고 싶은 분도 이 구조부터 익혀 보세요.

참고 링크

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

다음 강

12강: 백엔드 기초에서는 새로고침해도 사라지지 않도록 Supabase(수파베이스, 데이터를 저장하는 서비스)에 데이터를 저장해요.

12강으로 넘어가기