Next.js 웹사이트

Next.js는 웹사이트를 만드는 도구(프레임워크)입니다. 'Next.js 프로젝트?' 어려운 말 같지만, Claude Code에게 '웹사이트 만들어 줘'라고 하면 다 해줍니다. 이전 레슨에서 배운 HTML/CSS/JS만으로도 웹페이지를 만들 수 있지만, 여러 페이지로 된 제대로 된 웹사이트를 만들려면 많은 추가 작업이 필요합니다. Next.js는 이런 추가 작업을 대신 해줍니다. 노무사 업무에 비유하면, Next.js는 노무법인 사무실의 인테리어 업체와 같습니다. 여러분이 '상담실, 대기실, 서류보관실이 필요해요'라고 말하면 설계부터 시공까지 다 해주는 것처럼, Next.js는 메인 페이지, 상담 페이지, 소개 페이지 같은 웹사이트의 뼈대를 잡아줍니다. 현재 많은 기업과 기관에서 Next.js를 사용하고 있으며, Vercel이라는 서비스와 연동하면 만든 웹사이트를 인터넷에 바로 공개할 수 있습니다.

Next.js 프로젝트를 만드는 것은 터미널에서 명령어 하나면 충분합니다. 사실 이것조차 Claude Code에게 '한동노무법인 웹사이트를 Next.js로 만들어 줘'라고 요청하면 알아서 프로젝트를 생성하고 기본 구조를 잡아줍니다. 프로젝트가 만들어지면 여러 폴더와 파일이 생기는데, 겁먹으실 필요 없습니다. 핵심만 알면 됩니다. app 폴더 안에 있는 파일들이 실제 웹페이지가 되고, components 폴더에는 재사용 가능한 부품(컴포넌트)이 들어갑니다. 노무법인 사무실에 비유하면, app 폴더는 각 상담실(페이지)이고, components 폴더는 모든 상담실에서 공통으로 쓰는 가구(로고, 메뉴바, 푸터 등)를 보관하는 창고입니다.

# 터미널에서 프로젝트 생성
npx create-next-app@latest handong-website

# 프로젝트 폴더로 이동
cd handong-website

# 개발 서버 실행 (내 컴퓨터에서 미리보기)
npm run dev
# → 브라우저에서 localhost:3000 으로 확인

프로젝트가 생성된 후에는 Claude Code에게 원하는 페이지를 추가해 달라고 요청하면 됩니다. 페이지마다 별도의 파일이 만들어지고, Next.js가 자동으로 URL을 연결해 줍니다. 실제 요청 예시를 보겠습니다. '다음 페이지들을 만들어 줘. 첫째, 메인 페이지에 법인 소개와 주요 서비스를 보여줘. 둘째, 업무 분야 페이지에 부당해고·임금체불·산업안전·중대재해 각각의 설명을 넣어 줘. 셋째, 상담 신청 페이지에 이름, 연락처, 상담유형, 사건 개요를 입력하는 폼을 만들어 줘.' Claude Code가 각 페이지의 코드를 작성하면, npm run dev 명령으로 내 컴퓨터에서 바로 결과를 확인할 수 있습니다.