지난 포스트에 6천원짜리 도메인으로 AWS에 CodeGear.info를 구성해 놓았습니다.
https://codegear.tistory.com/137
그런데 아직 사이트를 만들지 못해서, 이번 기회에 바이브 코딩으로 사이트를 만들어 보려고 합니다.
마침 AI Assistant를 비교하면서 진행을 하면 재미있을것 같아,
Claude Code와 AI Studio로 사이트를 만들고 비교해보겠습니다.
각각의 툴에 대한 소개는 생략하고 바로 개발을 시작하겠습니다.
우선 요구사항을 명확히 하기 위해 마크다운 파일을 만들고, 다음과 같이 작성하였습니다.
requirement.md
### 1. **사이트 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 AI 특히 프로그램 개발과 관련된 AI 기술을 소개하는 CodeGear의 유튜브와 블로그를 소개 및 홍보하기 위한 것
- **대상 사용자:** AI에 관심이 있는 개발자가 주 고객층임
- _왜 필요한가?_ AI 관련된 정보는 많이 있지만, 개발자에게 꼭 필요한 정보는 찾기 힘든면이 있음. 이러한 대상 사용자의 니즈를 충족시키기 위해, 사이트는 **전문적이고 실용적인 정보**를 명확하고 효율적으로 전달하는 데 중점을 두어야 함.
### 2. **주요 기능 및 페이지 구성**
- **필수 페이지:**
- **홈 (Landing Page):** 방문자에게 첫인상을 주고 핵심 메시지를 전달하는 페이지. 아래 유튜브 인기 영상 3개를 중앙에 사이트 임베드 해서 보여줄것.
- Cursor AI 대체, 무료 오픈소스 Cline AI 쓸만할까?
- https://youtu.be/AWWNCGXFTfw?si=uTh_TlM9oO826l8w
- AI로 [유튜브 요약+노트 저장] 자동화하는 법 - MCP+Obsidian+Cline+Gemini
- https://youtu.be/XXurwjs307s?si=n4YYvbEYv4T49Xsj
- n8n(AI워크플로우자동화) AWS 셀프호스팅 방법
- https://youtu.be/rZnBHanWiZg?si=Q7XNIaNB7TJO7Aoc
- **소개/About:** 유튜브와 블로그에 대한 정보.
- 유튜브 채널 : https://www.youtube.com/@codegear-21
- 블로그 : https://codegear.tistory.com/
- **기능:**
- **반응형 디자인:** 모바일, 태블릿, 데스크톱 등 다양한 기기에서 잘 보이도록.
- **디자인**: Clean & Modern Minimalism과 Bold & Expressive Typography를 적절히 사용할것.
- **다크 모드**: 다크모드, 라이트모드, 시스템 모드를 선택할 수 있도록.
- **간단한 애니메이션/인터랙션:** 사용자 경험을 향상시킬 수 있는 요소 (스크롤 애니메이션, 호버 효과 등).
- **SEO 친화적:** 검색 엔진에 노출이 잘 되도록 기본적인 메타태그 설정 등.
### 3. **콘텐츠 요구사항**
- **텍스트 콘텐츠:** 각 페이지에 들어갈 주요 문구, 헤드라인, 설명 등 (AI가 초안을 생성할 수도 있지만, 방향성을 제시).
- **이미지 or 비디오:** 저작권에 위배되지 않도록 https://pixabay.com 에서 적절한것을 사용할 것.
- **아이콘:** Heroicons 아이콘 팩을 사용할것.
### 4. **성능 및 접근성**
- **로딩 속도:** 빠른 페이지 로딩 속도 (Core Web Vitals 고려).
- **접근성 (Accessibility):** 시각 장애인 등 다양한 사용자를 위한 웹 접근성 고려 (ARIA 속성, 키보드 내비게이션 등)
### 5. **구현계획**
- 한번에 사이트를 완성하지 말고, 단계별 계획을 세워서 만들것.
- plan.md에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.
### 6. **프레임워크**
- 프레임워크는 next.js 로 만들것.
- 컴포넌트 기능을 최대한 활용할 것.
### 7. **언어**
- 답변은 한국어로 할것Claude Code & Gemini 설치하기
** 두 프로그램 모두 node.js가 설치 되어 있어야 합니다.
Claude 설치
Claude Code 설정 - Anthropic
시스템 요구사항 운영 체제: macOS 10.15+, Ubuntu 20.04+/Debian 10+, 또는 WSL을 통한 Windows 하드웨어: 최소 4GB RAM 소프트웨어: Node.js 18+ git 2.23+ (선택사항) PR 워크플로우를 위한 GitHub 또는 GitLab CLI (선택사
docs.anthropic.com
- 설치 명령어
npm install -g @anthropic-ai/claude-code
claude- 인증
- Claude 라고 처음 입력하면 사용자 인증을 요청하고 브라우저가 열립니다.
- 사이트에 로그인을 하면 인증이 완료됩니다.
- Claude Code 종료하기
- "exit"라고 입력하면 claude가 종료됩니다.
Gemini 설치
GitHub - google-gemini/gemini-cli: An open-source AI agent that brings the power of Gemini directly into your terminal.
An open-source AI agent that brings the power of Gemini directly into your terminal. - google-gemini/gemini-cli
github.com
- 설치 명령어
npm install -g @google/gemini-cli
gemini
/auth- Gemini CLI - 구글 로그인 인증
- "Login with Google"을 선택하여 개인 Google 계정으로 로그인합니다.
- 구글 인증의 경우 Gemini 2.5 Flash 모델을 사용합니다.
- 분당 60회 하루 1,000회 요청을 무료로 사용할 수 있습니다.
- Gemini CLI - API 인증
- API Key를 사용할 경우 Gemini 2.5 Pro 모델을 하루 100회 요청까지 무료로 사용할 수 있습니다.
- Google AI Studio 사이트에서 API Key를 발급 받을 수 있습니다.
- 맥의 경우 로그인한 계정의 홈디렉토리에서 .env 파일을 생성하고 (~/.env) 다음 내용을 추가합니다.
- GEMINI_API_KEY=YOUR_API_KEY_HERE
- Gemini CLI 종료하기
- "Ctrl + C"를 누르면 Gemini가 종료되고 사용량 정보가 표시됩니다.
바이브 코딩으로 사이트 만들기
개발용 폴더 만들기
- 프로젝트를 위한 폴더를 만듭니다.
- codegear-claude
- codegear-gemini
- 각 폴더에 requirement.md를 복사합니다.
Claude Code
- codegear-claude 폴더로 이동하고 터미널을 엽니다.
- 터미널에서 claude를 입력합니다.
- 기본 설정 파일 만들기
- Claude는 기본 설정 파일로 "claude.md"를 사용합니다.
- Claude에게 요청해서 기본 설정 파일을 만듭니다.
- requirement.md로 사이트 개발을 요청합니다.
Gemini CLI
- codegear-gemini 폴더로 이동하고 터미널을 엽니다.
- 터미널에서 gemini를 입력합니다.
- 기본 설정 파일 만들기
- Gemini는 기본설정 파일로 "Gemini.md"을 사용합니다.
- Gemini에게 기본 설정 파일을 만들어달라고 요청하면 됩니다.
- requirement.md로 사이트 개발을 요청합니다.
개발 과정
Claude Code
- 요구사항에 근거하여 Plan.md에 계획을 완벽하게 작성함.
- Plan.md의 to do list를 체계적으로 처리하며 진행함.
- 작은 오류는 스스로 해결함.
- 큰 오류 없이 한번에 사이트 개발을 완료함.
- 전반적으로 전문가 처럼 개발을 한다고 느낌.
Gemini CLI
- 아직 출시 초기라 그런지 Claude Code 에 비해 한 단계 낮은 수준으로 보임.
- CSS 오류가 발생했을 때 고치가가 쉽지 않음.(화면 덤프를 드래그앤드롭으로 넣었으나 인식하지 못함)
- 조금더 버전이 올라가기를 기다려야 할 듯.
결과물 확인
결과가 어떻게 나왔을지 궁금하시죠?
Claude Code가 만든 사이트
Gemini CLI가 만든 사이트 (Gemini 2.5 flash)
Gemini CLI가 아직 초기버전이라 그런지 제대로 사이트를 만들지 못하네요.
Gemini 2.5 Flash 와 Gemini 2.5 Pro
이번 포스팅을 작성하면서 한가지 알게된 사실이 있습니다.
Gemini CLI를 사용할때 구글 로그인 인증을 사용하면 기본적으로 Gemini 2.5 Flash 모델을 사용하고 있었습니다.
AI Studio API Key를 사용하도록 설정하니 Gemini 2.5 Pro를 사용할 수 있었습니다.
Pro 모델로 동일하게 개발을 하도록 해 보았고 결과는 아래와 같았습니다.
확실히 Flash 모델 보다는 Pro 모델이 훨씬 개발을 더 잘했습니다.
하지만, Claude Code와 비교해보았을때 Claude Code 쪽이 훨씬더 코드를 잘 만든다고 느꼈습니다.
Gemini CLI가 아직 초기 버전이고, 이후에 분명 빠르게 발전할 것이라 생각되기도 합니다.
그렇지만 현재는 Claude Code를 사용하는게 더 현명한 판단이라는 생각이 듭니다.
따라서,
저의 선택은 Claude Code 입니다 ^^
'AI 개발' 카테고리의 다른 글
| Cursor AI 대체, 무료 오픈소스 Cline AI 쓸만할까? (2) | 2025.07.05 |
|---|---|
| 스케치로 개발하기 - v0.dev (0) | 2025.06.08 |
| AI로 [유튜브 요약+노트 저장] 자동화하는 법 - MCP+Obsidian+Cline+Gemini (0) | 2025.06.06 |
| AI로 코딩 없이 웹사이트 개발 가능할까요? - v0.dev 사용법 (2) | 2025.06.03 |
| NestJS에서 ChatGPT API 사용하기 (0) | 2023.04.29 |
| 개발자도 AI(인공지능)를 배워야 할까요? (0) | 2023.02.12 |
