한 줄의 코드로 웹사이트 만들기 (랜딩 뿐만 아니라 전체 다)

이 가이드는 Claude Code, 21st.dev, Framer Motion, 그리고 UI/UX 스킬을 결합해서 프롬프트 한 줄로 전문적인 랜딩 페이지, 포트폴리오, 마케팅 사이트를 만드는 방법을 설명합니다.

🛠 각 도구(MCP/설치)가 무엇을 가능하게 하는지

1. Node.js + npm

• 무엇인가: 자바스크립트 런타임 환경과 패키지 매니저.
• 왜 필요한가: Next.js, React, 그리고 모든 웹 개발 도구의 기반입니다. 이게 없으면 아무것도 설치할 수 없습니다.
• 사용자가 할 수 있는 것: 터미널에서 npm install 명령어로 수천 개의 오픈소스 라이브러리를 자유롭게 설치하고 실행할 수 있습니다.

2. Claude Code (@anthropic-ai/claude-code)

• 무엇인가: Anthropic의 공식 터미널 기반 AI 코딩 에이전트.
• 왜 필요한가: 자연어 프롬프트만으로 파일을 읽고, 쓰고, 수정하고, 전체 프로젝트를 구성해줍니다.
• 사용자가 할 수 있는 것: "와이너리 랜딩 페이지 만들어줘"라고만 말하면 Claude가 파일 구조를 설계하고, 코드를 작성하고, 스타일을 입히고, 오류까지 고쳐줍니다. 코딩 지식 없이도 전체 사이트를 구축할 수 있습니다.

3. Next.js (create-next-app)

• 무엇인가: React 기반의 풀스택 웹 프레임워크.
• 왜 필요한가: 라우팅, 이미지 최적화, SEO, 서버사이드 렌더링이 기본으로 들어있는 프로덕션급 프레임워크입니다.

4. Tailwind CSS

• 무엇인가: 유틸리티-퍼스트 CSS 프레임워크.
  • 사용자가 할 수 있는 것: 홈, 스토리, 와인, 이벤트 등 여러 페이지로 구성된 사이트를 한 프로젝트에서 만들고, Vercel에 무료로 배포할 수 있습니다.
• 왜 필요한가: 클래스 이름만으로 스타일링이 가능해서 디자인 속도가 10배 빨라집니다.
• 사용자가 할 수 있는 것: className="text-xl font-bold text-red-900" 같은 짧은 표현으로 바로 스타일을 입힐 수 있고, Claude가 쉽게 수정할 수 있습니다.

5. Framer Motion (framer-motion)