Code Gear - AI 개발 유튜브 강의

https://youtu.be/RH_W9ModQro

AI 코딩 도구 - 작동 방식에 따른 구분

AI 코딩 도구는 작동 방식 따라 세가지로 구분할 수 있습니다.

• 터미널 기반
  • 맥에서는 터미널을 윈도우에서는 WSL(Windows Subsystem for Linux)을 사용합니다.
  • 클로드 코드, 제미나이 CLI 등
• IDE(통합개발환경) 플러그인 형태
  • 대부분 Visual Studio Code를 플러그인 형태로 제공되어 IDE에 설치 후 사용합니다.
  • Cursor, Windsurf, Cline AI, RooCode AI, Github Copilot 등
• Web Service
  • 웹사이트에 로그인 해서 사용합니다.
  • 구글 AI Studio, v0.dev, Replit 등 

개인적으로 Web Service는 잘 사용을 하지 않습니다.
회사에서 개발할때는 Code Base에서 수정을 하거나, 기능을 추가하는 경우가 많다보니 적합하지 않아서 입니다.

AI로 개발을 잘 하는 방법

AI로 개발을 할때 중요한 것은 AI에게 어떻게 지시를 하는가 입니다.

지시하는 사람이 얼마나 구체적이고, 명확하게 지시를 하는가에 따라 결과물이 달라집니다.

AI가 연속성을 가지고 개발을 잘 진행하게 하려면 다음과 같은 방법을 사용하세요.

• 요구사항을 명확하게 알려줄것.
• 처음부터 끝까지 모든것을 한번에 요청하지 말것
• 개발을 단계별로 나누어서 진행할 수 있도록 AI가 직접 계획을 수립하게 지시할 것.
• 계획에 따라 순차적으로 진행을 하되 반드시 소스 검토와 테스트를 할 것.
• 처음 소스가 만들어지만 그 이후에는 작은 기능을 하나씩 붙여 나갈것.

프론트엔드 개발하기

프론트엔드 개발을 하기 위해서 다음과 같은 요구사항 문서를 작성합니다.

저는 주로 마크다운 문법을 사용하는 옵시디언을 이용해 문서를 만듭니다.

다음은 codegear.info 프론트엔드 개발을 위한 requirement-frontend.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. **콘텐츠 요구사항**
- **이미지 or 비디오:** 저작권에 위배되지 않도록 https://pixabay.com 에서 적절한것을 사용할 것.
- **아이콘:** Heroicons 아이콘 팩을 사용할것.

### 4. **성능 및 접근성**
- **로딩 속도:** 빠른 페이지 로딩 속도 (Core Web Vitals 고려).
- **접근성 (Accessibility):** 시각 장애인 등 다양한 사용자를 위한 웹 접근성 고려 (ARIA 속성, 키보드 내비게이션 등)

### 5. **구현계획**
- 한번에 사이트를 완성하지 말고, 단계별 계획을 세워서 만들것.
- plan.md에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.

### 6. **프레임워크**
- 프레임워크는 next.js 로 만들것.
- 컴포넌트 기능을 최대한 활용할 것.

### 7. **언어**
- 답변은 한국어로 할것

• ###, ** 등의 기호가 들어가 있는데, 마크다운 에디터를 사용하면 아래와 같이 보이게 됩니다.

AI 코드 어시스턴트에게 개발 요청하기

지난 개요에서 설명한 폴더 구조는 다음과 같습니다.

이제 requirement.md를 이용해서 개발을 요청해 보겠습니다.

• 프론트엔드 폴더에 requirement.md를 복사합니다.
• 프론트엔드 폴더에서 에디터를 열고 AI에게 개발 요청을 합니다.
• IDE 기반의 어시스턴트는 Roo Code AI를 사용했습니다.
• RooCode AI의 경우 Architect 모드로 시작 하였고, 계획이 수립되면 Code 모드로 변경하였습니다.

• 터미널 기반은 클로드 코드를 사용하였습니다.
• VSCode에 클로드코드 플러그인을 설치하면 좀 더 편하게 하실 수 있습니다.
• 두 케이스 모두 아래와 같이 입력하면 프로젝트를 생성합니다.

requirement.md를 분석해서 구현 plan을 수립해줘

• 중간에 진행 여부를 묻는 과정이 있는데, 지금과 같이 프로젝트를 생성하고 특별한 로직이 들어가지 않을 경우는 Auto 모드로 진행을 해도 괜찮습니다.

어시스턴트별 결과  확인

물론 어시스턴트에 어떤 AI모델을 붙였는지에 따라 결과가 달라질 수 있습니다.

요구사항 마크다운을 수정해도 결과가 달라집니다.

다음은 제가 수행한 결과들이니 참조용으로만 봐주세요.

클로드 코드

제미나이 CLI

루코드+제미나이

이렇게 해서 완성된 소스를 준비된 서버에 배포하시면 됩니다.

도메인 구매와 서버 구축 방법은 아래 링크된 글에서 확인하실 수 있습니다.

https://codegear.tistory.com/137

배포 방법은 아래 링크된 글에서 보실 수 있습니다.

https://codegear.tistory.com/145

https://www.youtube.com/watch?v=Q2GeV8YQGKY

AI로 풀스택을 개발하는 과정

요즘 굉장히 핫한 주제는 AI 입니다. 

그중에서도 개발자들의 최대 관심사는 코드 어시스턴트입니다.

유튜브를 보면 AI 코드 어시스턴트를 활용하는 사례들을 보여주는 영상이 많이 있습니다.

하지만 실전에서 개발하는 것처럼 프론트엔드, 백엔드를 나누어서 보여주는 사례는 많지 않은것 같습니다.

AI로 풀스택 개발하기 과정은 AI 코드어시스턴트(클로드 코드, 커서, 제미나이등)를 사용하여 풀스택을 개발하는 과정을 설명하려고 합니다.

여기에는 다음과 같은 내용들이 포함될 예정입니다.

• 서버 설정하기 (도메인, nginx 셋팅등)(업로드 완료)
• 서버에 배포하는 방법(업로드 완료)
• AI 코드 어시스턴트 사용법
  • 클로드 코드 사용법(업로드 완료)
  • 제미나이 사용법
  • Cline 사용법 등
• AI로 CodeGear.Info 사이트 개발하기
  • AI로 프론트 엔드 개발하기
  • AI로 백엔드 개발하기
  • AI로 프론트와 백엔드 동시에 개발하기(구글 로그인)
  • 그외 다양한 기능들을 붙여 나가는 걸 진행하려고 합니다.

아키텍처 구조

아키텍처 구조는 다음과 같습니다.

• 프론트엔드 - Next.js
• 백엔드 - Nest.js
• 데이터베이스 - MySQL

세부적인 내용들은 강의를 진행하면서 설명드리도록 하겠습니다.

프로젝트 구성

프로젝트 구성은 다음과 같습니다.

• root 폴더명은 codegear입니다.
• 하위 폴더로 frontend, backend를 만듭니다.

각각의 폴더에는 최초 개발을 위한 파일들을 만듭니다.

• 프론트엔드 - requirement.md (요구사항정의)
• 백엔드 - requirement.md (요구사항정의)
• root 폴더 - README.md (프로젝트 폴더 구성에 대한 간단한 설명

시리즈 영상을 시작하며...

영상을 제작하는 과정이 쉽지는 않습니다.

지식을 배우는 과정이 필요하고, 배운걸 테스트 해보는 과정도 필요합니다.

영상을 만들기 위해 블로그를 정리하고, 영상을 만들고, 편집을 하다보면 주말이 훌쩍 지나가 있곤 합니다.

그래도 누군가에게 도움이 되는 일이라 생각하며 열심히 하고 있습니다.

주중에는 회사일로 거의 시간이 없기 때문에 영상을 자주 못 올리는 부분도 양해 부탁드립니다.

계획대로 잘 되었으면 좋겠습니다.

https://youtu.be/7MEsgHKQGLg

순서

• 클로드 코드란?
  • 가격정책
• 설치 방법
  • 인증 방법
  • Visual Studio Code 용 플러그인 설치방법
• 사용법
  • Terminal에서 사용법
  • Visual Studio Code에서 사용법
• 활용팁

클로드 코드(Claude Code)란?

• 클로드 코드는 AI 코딩 Assistant입니다.
• Anthropic 에서 구축한 LLM 모델을 사용합니다.
• Terminal 기반으로 작동하고, 코드작성, 기능개발, 버그수정등을 AI Agent를 통해 수행합니다.
• IDE를 사용하지 않는다고 하면 많이 불편할 것이라고 생각하지만, 생각보다 꽤 편하게 사용할 수 있습니다.
• 그래도 IDE가 더 편하신 분을 위해 VSCode의 Plug-in으로도 제공됩니다(이 부분도 뒤에 자세히 설명합니다)

가격

클로드 코드는 아래와 같이 3가지 가격 정책이 있습니다.(무료는 사용 불가)

• Pro 플랜: 월 $20
  • 평균 사용자는 5시간마다 Claude로 약 45개의 메시지를 보내거나, Claude Code로 약 10-40개의 프롬프트를 보낼 수 있습니다.
  • Pro 플랜 구독자는 Sonnet 4에 액세스할 수 있지만, Claude Code에서 Opus 4를 사용할 수는 없습니다.
  • 소규모 저장소(일반적으로 1,000줄 미만의 코드)에서의 가벼운 작업
• Max 플랜은 두 가지 사용량 등급을 제공합니다 (Claude Sonnet 4, Opus 4 모델 사용가능)
  • 대규모 코드베이스를 사용한 일상적인 사용 또는 파워 유저

  • Pro 사용량의 5배 (월 $100)

    - 평균 사용자는 5시간마다 Claude로 약 225개의 메시지를 보내거나, Claude Code로 약 50-200개의 프롬프트를 보낼 수 있습니다.

  • Pro 사용량의 20배 (월 $200)

    - 평균 사용자는 5시간마다 Claude로 약 900개의 메시지를 보내거나, Claude Code로 약 200-800개의 프롬프트를 보낼 수 있습니다.

설치 방법

• 자세한 사용법은 아래 사이트에서 공식 문서를 확인할 수 있습니다.
• https://support.anthropic.com/ko/

• Claude Code는 Node.js v18 이상이 설치되어 있어야 합니다.
• 설치는 아주 쉽습니다. 

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-awesome-project

# Start coding with Claude
claude

인증 방법

• 설치 후 claude를 입력하면 다음과 같은 화면이 나옵니다.

• 1번을 선택하면 브라우저에서 로그인 인증을 진행합니다.

Visual Studio Code 용 플러그인 설치방법

• VSCode에서도 Claude Code를 사용할 수 있습니다.
• VSCode에서 좌측 메뉴 중 Extention 을 클릭합니다.
• 검색창에 `Claude Code`를 입력하면 아래와 같은 화면이 나옵면 install 버튼을 클릭하여 설치합니다.

• 실행 방법은 우측 상단의 클로드 코드 아이콘을 클릭하면 됩니다.

사용법

• 실행 방법 - 터미널을 열고 `claude`를 입력하면 claude code가 시작됩니다.

사용 모델 변경

/model

• `Default (recommended)` 를 선택하면 Opus 4 모델을 사용하게 되고, 사용량이 20% 남았을때 Sonnet 4 모델로 전환됩니다.

IDE 연동

/ide

• 사용 가능한 ide 목록이 나오고 선택을 할 수 있습니다.
• VSCode plug-in을 사용하면 자동으로 ide와 연결이 됩니다.

프로젝트 기본 설정

/init

• 프로젝트에 claude 설정을 초기화하는 명령입니다.
• CLAUDE.md 파일을 자동으로 생성합니다.
• README.md 파일이 있으면 읽고 분석을 한 후 CLAUDE.md 파일을 작성합니다.
• 이미 만들어진 프로젝트의 경우 애플리케이션과 아키텍처를 분석하여 CLAUDE.md 파일에 작성합니다.

파일 참조

• prompt에서 @을 입력후 파일명 입력합니다.

이미지 & 스크린샷 참조

• 이미지 복사(Ctrl+C) 후 prompt에서 Ctrl+V를 합니다.
• 오류가 발생했을 때 스크린을 캡처해서 넣어주는것도 좋은 방법입니다.

줄바꿈

• Shift + Enter로 새 줄이 생기지 않습니다.  이 경우 `/terminal-setup` 하면 해결됩니다.
• 이것보다는 Ctrl + J 를 사용하는게 편리합니다.

작업 중단하기

• 현재 수행 중인 작업을 중단하려면 Esc 키를 누르면 된다.

Claude Code 종료하기

• Ctrl + C 키를 두번 누르면 종료된다.

이전 채팅 내용 보기

• 위 화살표를 누르면 이전 내용들이 차례로 나온다.

모드 변경

• 모드는 `Shift + Tab`으로 변경할 수 있다.
• 일반 / Plan / Auto-accept edits on 을 순환해서 변경된다.

VS Code 에서 Claude Code plug-in 사용법

소스 코드 참조

• 열려 있는 소스 코드는 자동으로 참조합니다.
• Select 된 범위를 자동으로 인식합니다

파일 참조

• VSCode에서 드래그앤드롭 (or shift + 드래그앤드롭) 합니다.

이미지 & 스크린샷 참조

• 이미지 파일을 드래그앤 드롭합니다.

활용 Tip

터미널 사운드 설정

• 작업이 완료되면 terminal에서 알람을 울려줍니다.
• claude에게 작업을 시키고 편하게 다른 일을 하시면 됩니다.

claude config set --global preferredNotifChannel terminal_bell

Git 활용하기

• Claude Code가 아무리 좋더라도, 작은 단위의 작업을 지속적으로 commit 하시는게 좋습니다.
• 오랜 시간 작업한 결과물을 한번에 날릴 수도 있기 때문입니다.

프로젝트 요약해보기

이 프로젝트를 요약해줘

Compact

/compact

• claude code로 계속 작업을 하다보면 이전 prompt 내용이 많아지게 됩니다.
• 너무 많은 양을 계속 파악하게 하는것은 비효율적이고, 명확성이 떨어지게 됩니다.
• 이때 compact를 사용하면 이전 내용들을 간략하게 줄여주는 역할을 하게 됩니다.

Clear

/clear

• 이전 작업들과 상관없는 새로운 task를 실행할때는 clear를 사용해서 memory를 비워주는 것이 좋습니다.

모드 변경하며 사용해보기

• prompt 창에서 shift+tab을 누르면 모드가 변경됩니다.
• 모드는 일반 / Plan / Auto-accept edits on 을 순환해서 변경됩니다.
• Opus를 사용하여 plan 모드로 계획을 수립하고, Sonnet을 사용하여 일반모드로 작업을 시키는 방법을 쓰시면 효과적입니다.

Prompt 큐 사용하기

• claude code가 실행 중일때도 prompt를 계속 입력할 수 있습니다.
• 이것은 Queue에 쌓이고, 이부분도 claude code가 잘 알아서 처리합니다.

프로젝트별로 환경 설정하기

• .claude 폴더에 settings.json에 프로젝트 별로 환경설정이 가능합니다.

MCP 설치하여 사용하기

• claude code에 mcp를 추가하면 mcp의 각종 도구들을 활용하여 좋은 결과물을 얻을 수 있습니다.
• context7 같은 mcp를 추가하여 사용해보시기 바랍니다. 

• context7에는 참조할 수 있는 엄청난 최신 정보를 보유하고 있습니다.
• https://github.com/upstash/context7 에 가시면 자세한 내용을 볼 수 있습니다.
• 설치 방법은 다음과 같습니다.

claude mcp add context7 -- npx -y @upstash/context7-mcp

마치며...

Claude Code는 AI 시대에 개발자들에게 큰 힘을 실어줄 수 있는 유용한 도구입니다.

잘 활용하신다면 현재보다 훨씬더 좋은 성과를 만들어낼 수 있을 것입니다.

지난번에 codegear.info 도메인에 nginx 설정만 해놓은 상태라.

이번에 클로드코드로 개발한 사이트를 서버에 올리는 과정을 정리해보겠습니다.

서버 용량이 넉넉할때는 Github Action 같은 자동 배포를 사용하시는게 편리합니다.

하지만 자동 배포를 사용하려면 서버의 메모리 용량이 최소 2G는 되어야 문제 없이 돌아갑니다.

AWS의 가장 저렴한 micro 서비스(월7~8천원) 같은 경우 메모리가 1G만 제공되므로,

초기에는 작은 용량으로 시작하시고 서비스가 활성화 되면 고용량으로 바꾸시는 걸 추천합니다.

codegear.info 사이트는 nginx 셋팅만 되어 있는 상태라 아래와 같이 페이지가 표시되고 있었습니다.

이 사이트에 바이브코딩으로 개발한 사이트를 올리려고 합니다.

저는 Git을 이용해서 배포를 진행할 것이기 때문에, 다음과 같은 것들이 필요합니다.

• github에 repository 만들기
• github에 소스 올리기
• 서버에 git 설치하기
• git으로 소스 내려받기
• 서버에 pm2 설정하기
• nginx 설정하기
• nginx restart 하기

배포에 대한 컨셉은 아래와 같습니다.

Github에 Repository 만들기

• github.com에 로그인 한 후 repository를 생성합니다.
• 개인적으로 사용할 프로젝트는 private으로 셋팅을 해주세요.

로컬 소스를 github에 올리기

• 제일 먼저 해야할 일이 local에 있는 소스를 github에 올리는 일입니다.
• 그래야만 서버에서 소스를 내려 받을 수 있기 때문입니다.
• 우선 로컬 소스 루트 폴더에서 git 초기화 명령을 입력 합니다.

git init

• .ssh/config에 다음과 같이 설정합니다. 
  • Host 다음에 오는 github-codegear 는 alias 명입니다. 사용하고 싶으신 걸로 설정하세요.
  • HostName 다음에 오는 github.com과 User 다음에 오는 git은 github을 사용할 경우 고정값입니다.
  • IdentityFile 다음에 오는 id_rsa 는 본인의 ssh key 파일이 위치한 path에 맞게 설정해주세요. 일반적으로 홈디렉토리의 .ssh 폴더 아래에 위치하게 합니다.

Host github-codegear
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa

• github에 최초로 소스를 올리는 방법은 다음과 같습니다.
  • git@ 다음에는 위의 ssh 설정에서 사용한 alias명:github에서 사용한 your_username/your_repo.git를 적어주세요.
  • your_username/your_repo.git은 github의 repository에 들어가서 "<>Code" 버튼을 누르면 확인할 수 있습니다.

git remote add origin git@github-codegear:your_username/your_repo.git

• commit을 할 소스를 선택합니다. (전체 파일 선택)

git add .

• push

git push origin main

• 이렇게 하면 소스가 github repository에 올라갑니다. 
• github.com에 들어가면 소스를 확인할 수 있습니다.

서버에 Git 셋팅하기

• git 설치 (Amazon Linux 2023 기준으로 설명합니다)

sudo yum install git

• 로컬과 동일하게 ssh 셋팅을 추가합니다.
  • .ssh/config에 다음 내용을 추가합니다.

Host github-codegear
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa

• id_rsa 파일을 서버에 만들고 내용을 추가한 후 저장합니다.
  • ./ssh 폴더에 id_rsa 파일을 만들고 로컬이나 github에 있는 ssh key 파일의 내용을 복사하여 붙여넣기 한후 저장 합니다.
• 저장한 id_rsa 파일의 읽기/쓰기 권한을 아래와 같이 변경합니다.

chmod 600 ~/.ssh/id_rsa

• 소스를 git clone으로 다운 받습니다.

git clone git@github-codegear:your_username/your_repo.git

서버에 Nodejs 설치

• nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

• nvm 로드하기

source ~/.bashrc

• 설치할 nvm 목록 확인

nvm list

• nvm 설치

nvm install (alias명) # 예: nvm install 18.17.0 또는 nvm install node

• 설치된 node 확인

nvm list

Yarn 설치

npm install yarn -g

PM2 설치

• PM2는 nodejs 용 프로세스 관리 도구입니다.
• 예를 들어 nextjs를 run 시키면 3000번 포트로 프로세스가 실행됩니다.
• 이 프로세스가 down 될 경우 PM2가 자동으로 실행을 해주는 역할을 합니다.
• pm2 설치는 아래 명령어를 사용합니다.

npm install -g pm2

• pm2 실행 명령은 다음과 같습니다.

pm2 start / stop / restart / status / list / logs

소스 빌드

• git으로 내려 받은 소스 폴더에서 빌드전에 우선 패키지 설치를 진행합니다.

yarn install

• 패키지 설치가 완료되면 build를 수행합니다.

yarn build

PM2에 프로세스 등록하기

• 아래 명령어를 사용하면 서버 프로세스가 pm2에 등록됩니다.

pm2 start npm --name "next-app" -- run start

• 등록이 정상적으로 되면 아래와 같이 표시됩니다.

nginx 셋팅

• 이미 nginx는 설치가 되어 있을 경우입니다. (신규 설치시는 https://codegear.tistory.com/137를 참고하세요)
• /etc/nginx/nginx.conf 파일에 다음 내용을 추가한다.

server {
	listen       80;
        listen       [::]:80;
        server_name  codegear.info www.codegear.info;  
        
        # Frontend(Nextjs)
        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

• nginx 수정 후 문법 체크를 해주세요.

sudo nginx -t

• nginx 를 재기동 합니다.

sudo systemctl restart nginx

이렇게 하면 모든 셋팅이 완료되었습니다.

브라우저에서 codegear.info 를 입력하면 다음 화면이 나오는걸 볼 수 있습니다.

서버에 새로운 것을 적용할때는 다음 순서대로 진행하시면 됩니다.

cd codegear-info
git pull
yarn install (패키지 추가했을 경우만)
yarn build
pm2 restart next-app

https://youtu.be/eUGZSHsV8Aw

지난 포스트에 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 설치

• https://docs.anthropic.com/ko/docs/claude-code/setup

• 설치 명령어

npm install -g @anthropic-ai/claude-code
claude

• 인증
  • Claude 라고 처음 입력하면 사용자 인증을 요청하고 브라우저가 열립니다.
  • 사이트에 로그인을 하면 인증이 완료됩니다.
• Claude Code 종료하기
  • "exit"라고 입력하면 claude가 종료됩니다.

Gemini 설치

• https://github.com/google-gemini/gemini-cli

• 설치 명령어

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 입니다 ^^

Visual Studio Code(VSCode)에서 여러가지 플러그인을 설치해서 사용하다 보면 오류가 발생할 때가 있습니다.

이때는 VSCode의 설정을 초기화하면 처음 설치했을때와 동일한 환경으로 돌아갈 수 있습니다.

(저는 유튜브 녹화를 위해 ClineAI를 설치하고 삭제하기를 반복하다 보니 MCP 설치가 안되는 현상이 발생했습니다)

맥북에서 Visual Studio Code(VS Code)를 설정 파일까지 완전히 삭제하는 방법은 크게 두 가지 단계로 나뉩니다

• 애플리케이션 제거
• 사용자 데이터 및 설정 파일 제거

아래 단계를 따라하시면 됩니다.

1단계: Visual Studio Code 애플리케이션 제거

1. Finder 열기: Dock 또는 Spotlight 검색(Command + Space)을 통해 Finder를 엽니다.
2. 응용 프로그램 폴더로 이동: Finder 사이드바에서 "응용 프로그램" (Applications) 폴더를 클릭합니다.
3. VS Code 아이콘 이동: "Visual Studio Code" 애플리케이션 아이콘을 찾아 휴지통으로 드래그하거나, 아이콘을 선택한 후 Command + Delete 키를 누릅니다.
4. 휴지통 비우기: Dock에 있는 휴지통 아이콘을 클릭한 다음, "비우기" 버튼을 클릭하거나, Finder 메뉴에서 "Finder" > "휴지통 비우기"를 선택합니다.

2단계: 사용자 데이터 및 설정 파일 제거

VS Code는 애플리케이션 자체 외에도 사용자 설정, 확장 프로그램, 캐시 등을 저장하는 숨겨진 파일과 폴더들을 생성합니다. 이들을 제거해야 완전히 삭제됩니다.

1. Finder 열기: (이미 열려 있다면 다시 열 필요 없음)
2. '폴더로 이동' 열기: Finder 상단 메뉴 바에서 "이동"을 클릭한 후, "폴더로 이동..." (Go to Folder...)을 선택합니다. 또는 단축키 Shift + Command + G를 눌러도 됩니다.
3. 각 경로 입력 및 삭제: 아래 경로들을 하나씩 입력하여 해당 폴더나 파일을 찾아 휴지통으로 이동합니다.
   • 주요 설정 및 확장 프로그램 데이터:
     • ~/Library/Application Support/Code
     • 이 경로를 입력하고 이동하면 Code라는 폴더가 보일 것입니다. 이 폴더 전체를 휴지통으로 드래그합니다.
   • 캐시 파일:
     • ~/Library/Caches/com.microsoft.VSCode
     • ~/Library/Caches/com.microsoft.VSCode.ShipIt
     • 각각의 경로를 입력하여 해당 폴더나 파일을 찾아 휴지통으로 드래그합니다.
   • 환경 설정 파일 (plist):
     • ~/Library/Preferences/com.microsoft.VSCode.plist
     • 이 파일을 찾아 휴지통으로 드래그합니다.
   • 저장된 애플리케이션 상태:
     • ~/Library/Saved Application State/com.microsoft.VSCode.savedState
     • 이 폴더를 찾아 휴지통으로 드래그합니다.
   • 사용자별 설정 (숨김 폴더):
     • ~/.vscode
     • 이 폴더는 숨겨져 있을 수 있습니다. '폴더로 이동'에서 입력하거나, Finder에서 Command + Shift + . (마침표)를 눌러 숨김 파일을 보이게 한 후 홈 디렉토리(~)에서 찾아 삭제할 수 있습니다.
4. 휴지통 비우기: 2단계에서 삭제한 파일들이 휴지통에 있으므로, 다시 한번 Dock에 있는 휴지통을 비워 완전히 삭제합니다.

3단계: Dock에서 아이콘 제거 (선택 사항)

만약 Visual Studio Code 애플리케이션을 Dock에 고정해 두었다면, 애플리케이션을 삭제하더라도 아이콘이 남아있을 수 있습니다.

1. Dock에서 Visual Studio Code 아이콘에 마우스 오른쪽 버튼을 클릭합니다.
2. "옵션" (Options) > "Dock에서 제거" (Remove from Dock)를 선택합니다.

위 단계를 모두 완료하면 맥북에서 Visual Studio Code 및 관련 설정 파일들이 완전히 제거됩니다.

어린시절 자전거를 배웠던 기억이 있으신가요?
누군가 뒤에서 자전거를 잡아주면, 우리는 좌우로 흔들리면서도 조금씩 앞으로 나아갈 수 있었습니다. 시간이 지나면서 흔들림은 줄어들고 속도가 붙었죠. 그러다 어느 순간, 뒤에서 잡고 있던 손은 놓아졌고, 우리는 홀로 자전거를 타게 되었습니다. 그 이후로는 누군가의 도움 없이도 능숙하게 자전거를 탈 수 있게 되었습니다.

모든 학습은 자전거 타기와 비슷한 점이 많습니다. 한 번 제대로 배운 기술은 평생 기억되고, 우리 삶에서 아주 유용하게 활용될 수 있죠.

AI 시대는 개발자에게 새로운 도전이자 기회를 동시에 제공하고 있습니다. 과거에도 개발자는 끊임없이 변화하는 기술 트렌드에 발맞춰 학습해야 하는 직업이었지만, AI의 등장은 그 학습의 중요성을 한층 더 부각시키고 있습니다. 이제는 단순히 새로운 프레임워크나 언어를 익히는 수준을 넘어, AI 기술의 본질을 이해하고 이를 효과적으로 활용하는 능력이 개발자의 핵심 역량으로 부상하고 있습니다.

바이브 코딩 (VIBE Coding)의 부상: 깊은 이해가 경쟁력

최근 화두가 되고 있는 바이브 코딩(VIBE Coding)은 이러한 변화를 극명하게 보여줍니다. 

AI가 코드를 생성하고 분석하는 데 있어 탁월한 성능을 발휘하면서, 개발자는 이제 모든 코드를 직접 손으로 작성하는 것보다는 AI가 제안하는 코드를 정확하게 이해하고, 검증하며, 필요에 따라 수정하고 개선하는 역할에 더 집중하게 되었습니다. 이때 중요한 건 AI가 생성한 코드를 단순히 복사해서 붙여넣는 게 아니라, 그 코드의 내부 로직, 성능상의 특징, 그리고 잠재적인 문제점까지 꿰뚫어 보는 깊은 이해입니다.

이러한 이해는 결국 기존 개발 지식을 탄탄하게 갖춘 개발자에게 훨씬 유리하게 작용합니다.

AI가 아무리 훌륭한 코드를 생성하더라도, 그 코드가 실제 시스템에 어떻게 통합되어야 하는지, 어떤 데이터 흐름을 가지는지, 그리고 잠재적인 보안 취약점은 없는지 등을 판단하려면 컴퓨터 과학의 기본적인 원리, 자료구조, 알고리즘, 네트워크, 운영체제 등 개발 전반에 대한 깊이 있는 지식이 필수적입니다. 
탄탄한 기본기를 갖춘 개발자는 AI가 제시하는 다양한 코드 옵션 중 가장 적합한 것을 선별하고, 문제가 발생했을 때 빠르게 원인을 파악하며, 효율적인 해결책을 제시할 수 있습니다. 즉, AI는 개발 생산성을 극대화하는 강력한 도구이지만, 이 도구를 제대로 활용할 줄 아는 '진정한 장인'은 여전히 인간 개발자라는 의미입니다.

더 나아가 바이브 코딩에서는 AI에게 어떤 기능을 어떻게 구현하라고 명확하게 지시할 수 있는 능력이 핵심이 됩니다.

AI는 우리의 질문과 지시에 따라 코드를 생성하는데, 우리가 원하는 바를 정확하고 구체적으로 전달할수록 AI는 더 정교하고 적합한 결과물을 내놓을 수 있습니다. 이는 마치 건축가가 설계도를 그리듯이, 개발자가 AI에게 코드의 큰 그림과 세부적인 요구사항을 제시하면, AI는 그 지시에 따라 필요한 부분을 채워나가는 과정과 같습니다.즉, AI는 우리의 의도를 얼마나 잘 이해하고 실행하는지에 따라 그 활용 가치가 달라지며, 이는 결국 개발자의 문제 정의 능력과 명확한 지시 능력에 달려 있습니다.

지속적인 학습의 중요성: 변화에 대한 능동적 태도

따라서 AI 시대의 개발자는 과거 어느 때보다 지속적인 학습을 자신의 숙명으로 받아들여야 합니다.

단순히 AI 관련 기술 스택을 추가적으로 익히는 것을 넘어, 자신이 다루는 도메인 지식을 확장하고, 문제 해결 능력을 강화하며, AI와 협업하는 새로운 방식에 능동적으로 적응해야 합니다. 이는 마치 AI라는 강력한 조력자를 얻었지만, 그 조력자를 제대로 지휘하고 방향을 제시하는 역할은 오롯이 개발자의 몫이 된 것과 같습니다.

결론

AI 시대의 개발자는 AI를 단순히 코드를 대신 작성해 주는 도구로 여기는 것을 넘어, 자신의 역량을 증폭시키는 강력한 파트너로 인식해야 합니다. 그리고 그 파트너와 최고의 시너지를 내기 위해서는 변함없는 학습에 대한 의지와 기존 지식에 대한 깊은 이해, 그리고 AI에게 명확하게 지시하고 이끌어갈 수 있는 능력이 필수적입니다. 이것이 바로 AI 시대를 선도하는 개발자가 갖춰야 할 핵심 태도이자, 앞으로의 개발자 커리어를 성공적으로 이끌어 나갈 나침반이 될 것입니다.

베스트 세일 상품 추천!
EWEADN 로우 프로파일 기계식 게임용 키보드, 무선 블루투스 트라이 모드, 휴대용, 스타일리시 디자인, 게임 및 사무실, MK84
현재 가격： KRW 39,300 (원래 가격: KRW 78558,  50% 할인)
🔗 클릭 앤 구매:https://s.click.aliexpress.com/e/_oCXoUbE

여러 사이트에 ssh 접속을 할때 접속 정보를 모두 기억하기가 어렵습니다.

예를 들어 AWS에 EC2가 여러개 있다면 아래와 같은 정보들을 모두 입력해야 하는 불편함이 있습니다.

ssh -i /path/key-pair-name.pem instance-user-name@instance-public-dns-name

이럴때를 위해 맥북에서는 ssh를 미리 저장해 놓고 alias 만으로 접속하는 기능이 있습니다.

맥북의 .ssh/config 파일을 사용하면 여러 서버에 대한 SSH 접속 설정을 간결하게 관리하고, 짧은 별칭(alias)으로 쉽게 접속할 수 있습니다. 이는 특히 여러 원격 서버나 여러 GitHub 계정을 관리할 때 매우 유용합니다.

.ssh/config 파일 생성 또는 열기

맥(macOS)의 경우 .ssh/config 파일이 자동으로 생성되어 있지 않을 수 있습니다. 이 경우 직접 파일을 생성해야 합니다.

touch ~/.ssh/config
open ~/.ssh/config

.ssh/config 파일 내용 작성

파일을 열고 아래와 같은 형식으로 각 서버의 접속 정보를 입력합니다.

Host [별칭]
    HostName [원격 서버의 IP 주소 또는 도메인 이름]
    User [접속할 사용자 계정]
    IdentityFile [SSH 키 파일 경로]
    Port [SSH 포트 번호 (기본값 22, 변경된 경우)]

• Host: 이 별칭은 SSH 접속 시 사용할 짧은 이름(alias)이 됩니다.
• HostName: 접속할 원격 서버의 IP 주소 또는 도메인 이름을 입력합니다.
• User: 원격 서버에 접속할 사용자 계정 이름을 입력합니다.
• IdentityFile: 해당 서버에 접속할 때 사용할 SSH 키 파일의 경로를 지정합니다. 예를 들어, ~/.ssh/your_key.pem과 같이 입력할 수 있습니다 . AWS EC2와 같은 경우 pem 키 파일을 다운로드하여 권한을 변경한 후 사용합니다.
• 권한은 다음 명령을 사용하여 변경합니다.

chmod 600 your_key_file.pem

• 권한을 변경하지 않으면 다음과 같은 메시지가 나옵니다.

Permissions 0644 for '/Users/admin/.ssh/id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/Users/admin/.ssh/id_rsa.pub": bad permissions
git@github.com: Permission denied (publickey).

• Port: SSH 접속에 사용되는 포트 번호입니다. 기본값은 22이며, 변경된 경우에만 작성합니다.
• Github의 경우 HostName과 User명은 아래와 같이 동일한 값을 사용합니다.

HostName github.com
User git

예시:

# 개인 GitHub 계정
Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_personal

# 회사 GitHub 계정
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work

# 개발 서버
Host dev_server
    HostName 192.168.0.1
    User ubuntu
    IdentityFile ~/.ssh/dev_server_key.pem
    Port 2222

# Amazon Linux 2003 EC2     
Host aws-ec2
    HostName ec2-1-100-200-333.ap-northeast-2.compute.amazonaws.com
    User ec2-user
    IdentityFile ~/myec2.pem

연결 테스트 하기

ssh -T git@github.com-personal
ssh -T ec2-user@aws-ec2

Git 연결 설정을 config에 설정된 alias로 변경하기

기존 git 연결을 config에 설정한 alias명으로 변경할 수 있습니다.

git remote set-url origin git@github.com-personal:username/repo.git

SSH 접속하기

.ssh/config 파일에 설정한 별칭을 사용하여 터미널에서 간결하게 접속할 수 있습니다.

ssh [별칭]
ssh github.com-personal
ssh dev_server

이렇게 설정하면 복잡한 IP 주소, 사용자 이름, 키 파일 경로를 매번 입력할 필요 없이 간편하게 SSH 접속을 할 수 있습니다.

https://youtu.be/AWWNCGXFTfw

AI 코딩 에이전트

요즘  AI 코딩 에이전트 시장이 뜨겁습니다.

AI 코딩 에이전트는 사용 환경에 따라 CLI 기반과 IDE 통합형으로 나눌 수 있습니다.

CLI 기반

• CLI는 Command Line Interface의 약자로 터미널 환경에서 명령어를 입력하는 형태입니다.
• Anthropic Claude Code, Google Gemini CLI, OpenAI Codex CLI 등이 있습니다.

IDE 통합형

• IDE 통합형은 Visual Studio Code, Jet Brain등의 개발 IDE에서 작동하는 형태입니다.
• 여러가지가 있지만 CursorAI 가 대표적입니다.

AI 코딩 에이전트의 비용 문제

요즘 AI 시장에서 돈을 벌고 있는 서비스는 몇가지가 있습니다.

• LLM에서 API를 제공하는 서비스 (GPT, Gemini등)
• 이미지, 동영상등을 제작하는 서비스
• 코딩 에이전트 유료 구독 서비스

이런 서비스들은 꽤 많은 비용을 지불해야만 사용 가능합니다.

Cursor AI의 경우 구독 요금은 다음과 같습니다.

출처 : https://cursor.com/pricing

Pro인 경우 월 $20이지만 아래와 같이 사용 한도가 정해져 있습니다.

프로에서는 Claude의 쏘넷4는 225개까지, Google Gemini는 550개까지, OpenAI의 GPT4.1은 650개 까지만 요청이 가능합니다.

따라서 많은 요청을 해야하는 경우에는 더 큰 비용의 구독 서비스를 이용하여야 합니다.

이를 위한 대안으로 오픈소스 AI Agent인 Cline을 사용해 보았습니다.

Cline AI란?

Cline은 Microsoft Visual Studio Code에 플러그인으로 설치하는 오픈 소스 AI 개발 어시스턴트입니다.

개발 IDE인 VSCode에서 LLM(대규모 언어 모델) 연동 기능을 제공하고, LLM이 직접 코드를 작성/수정할 수 있습니다.

또한 MCP를 사용하여 LLM의 기능을 확장하여 사용할 수 있다는 장점을 가지고 있습니다.

LLM(대규모 언어 모델)과 대화하고, 코드를 생성하거나 리팩토링하는 등 개발 워크플로우에 AI를 직접 통합할 수 있도록 돕는 강력한 도구입니다.

주요 기능 및 특징:

• 코드 개발 지원: 컨텍스트를 인식하는 코드 제안, 자동 완성 및 지능적인 권장 사항을 제공하여 개발 시간을 단축하고 코딩 오류를 최소화합니다.
• 다양한 작업 수행: 파일 읽기/쓰기, 명령 실행, 웹 브라우저 사용 등 다양한 시스템 수준 작업을 수행할 수 있습니다.
• 모델 유연성: 특정 공급업체에 고정된 도구와 달리, Cline은 다양한 AI 모델의 강점을 활용하는 정교한 워크플로우를 가능하게 합니다.
• 프롬프트 피로 감소: 프롬프트 피로를 줄이고 상호 작용을 더욱 자연스럽게 만듭니다.
• 확장성 (Model Context Protocol - MCP): Model Context Protocol을 통해 사용자 정의 도구 및 워크플로우와 통합할 수 있어 특정 요구 사항에 맞게 조정할 수 있습니다.
• 복잡한 시스템에 적합: 제어, 유연성 및 시스템 수준 통합이 중요한 복잡한 시스템을 구축하는 팀에 특히 적합합니다.

Cline은 단순한 코드 생성기를 넘어 개발 워크플로우를 간소화하는 파트너 역할을 합니다.

Cline AI 설치 방법

VSCode에 Cline 설치하기

• VS Code를 열고 확장(Extensions) 아이콘을 클릭합니다.
• 검색창에 'Cline'을 입력하여 찾아 설치합니다 https://cline.bot/
• 설치 후, Cline 아이콘을 클릭하거나 `CMD/CTRL + Shift + P` 단축키를 사용해 Cline을 실행합니다.
• LLM의 API 키를 추가합니다.
• 프로젝트에 공통된 설정을 넣으려면 Root 폴더에 .clinerules 파일을 만들고 아래와 같은 내용을 입력합니다.

# Cline Global Rules

## 역할 및 목표 정의 (Role and Goal Definition)
당신은 사용자의 질문에 답변하는 친절하고 유능한 AI 어시스턴트입니다.
사용자가 요청하는 정보에 대해 명확하고 간결하게 설명해 주세요.
불필요한 서론이나 결론 없이 핵심 내용을 전달하는 데 집중하세요.

## 언어 설정 (Language Setting)
**모든 답변은 한국어로 제공해야 합니다.**
어떤 질문이든, 어떤 주제이든 관계없이 항상 한국어로 응답해 주세요.
필요한 경우 전문 용어는 영어 원문을 병기할 수 있으나, 주된 설명은 한국어여야 합니다.

## 답변 형식 (Response Format)
코드 예제가 필요한 경우 적절한 언어 하이라이팅과 함께 제공해 주세요.
설명은 이해하기 쉽게, 필요한 경우 불릿 포인트나 목록을 활용하여 구조화해 주세요.
너무 길거나 장황한 답변은 지양하고, 요청된 내용에 집중하여 답변해 주세요.

## 일반적인 지침 (General Guidelines)
모든 답변은 사용자의 질문 의도를 정확히 파악하여 제공해야 합니다.
모호하거나 불확실한 정보는 제공하지 마세요.
사용자의 질문이 불분명할 경우 추가 질문을 통해 명확히 할 수 있습니다.

MCP란?

MCP (Model Context Protocol)는 Anthropic에서 발표한 AI용 표준 프로토콜 입니다.

LLM이 학습된 데이터 외에 최신 정보나 특정 도구의 기능을 활용하여 더 정확하고 풍부한 응답을 생성할 수 있도록 돕는 역할을 합니다.

즉, AI 모델이 다양한 데이터 소스에 연결되어 실시간으로 정보를 주고받을 수 있게 합니다.

Cline에서는 MCP를 추가하여 사용할 수 있습니다.

Cline에 MCP 설치하기

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 상단에 MCP 아이콘을 클릭합니다.
• 많이 사용하는 MCP는 아래와 같은 것들이 있습니다.
  • Browser-use
    • Browser-use는 AI 모델이 웹 페이지를 탐색하고, 정보를 추출하며, 웹 기반 작업을 수행할 수 있도록 하는 기능입니다.
    • 이는 AI 에이전트가 최신 정보를 얻거나, 특정 웹사이트에서 데이터를 수집하는 등의 작업을 가능하게 하여, AI의 활용 범위를 크게 넓힙니다.
  • Tavily
    • Tavily는 AI 에이전트에 특화된 검색 엔진입니다.
    • Tavily MCP Server는 Tavily의 검색 API를 사용하여 AI 모델에 실시간 웹 검색 기능을 제공하는 Model Context Protocol 서버입니다

Cline 사용법

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 아래 채팅 창에서 LLM에 요청할 내용을 입력합니다.
• Plan 모드와 Act 모드를 변경해 줍니다.
  • Plan Mode: 요청한 내용을 설명은 하지만 코드를 수정하지는 않습니다.
  • Act Mode: 요청한 내용을 즉시 코드로 작성합니다.

샘플 프로젝트

Cline 채팅 창에 아래 프롬프트를 입력합니다.

서울의 시간과 뉴욕의 시간을 동시에 시계로 표시하는 사이트를 만들어줘. 
tailwind 기반으로 하고, 
dark 테마와 light 테마를 쓸 수 있게 해줘.

실행하면 다음과 같이 서울과 뉴욕의 시간이 표시됩니다.

여기에 아날로그 시계도 추가해 보겠습니다.

다음과 같이 프롬프트를 입력합니다.

디지털 시계 아래에 아날로그 시계도 추가해줘

실행하면 다음과 같이 아날로그 시계가 추가된걸 볼 수 있습니다.

결론: VS Code용 Cline + Gemini Pro 2.5, Cursor를 대체할 강력한 AI 개발 파트너

지난 한 달간 실제 프로젝트에 VS Code의 Cline 플러그인과 Gemini Pro 2.5를 결합하여 사용해본 결과, 이 조합이 AI 기반 코드 에디터인 Cursor를 충분히 대체할 수 있음을 확인했습니다.

Cline과 Gemini Pro 2.5의 연동은 단순히 코드를 생성하는 것을 넘어, 개발 맥락을 이해하고 반응하는 강력한 AI 협업 환경을 제공했습니다. 이 기간 동안 코드 작성에 있어 상당한 도움을 받았으며, 개발 워크플로우를 크게 강화할 수 있었습니다.

Cline은 VS Code 환경에서 AI 기반 코딩을 위한 매력적인 대안이자 효율적인 도구라고 생각됩니다. 

Lofree Flow Lite 키보드 라이터 및 소음기 POM 스위치 2.4G Bluetooth 및 유선 가스켓 마운트 볼륨 롤러 키 구성 키캡
현재 가격： KRW 120,400 (원래 가격: KRW 120,448,  0% 할인)
🔗 클릭 앤 구매:https://s.click.aliexpress.com/e/_okJPKo4

n8n을 AWS의 무료 인스턴스를 사용해서 설치하는 방법에 대해 알아봅니다.
 
https://youtu.be/rZnBHanWiZg

순서

• Docker 설치
• n8n 컨테이너 설치
• AWS에 도메인 추가 (agent.codegear.info)
• Nginx 설치 및 도메인 연결

 
n8n은 n8n 사이트에 가입해서 서비스를 사용할 수도 있고, 직접 셀프 호스팅으로 설치해서 사용할 수도 있습니다. 
가격은 Starter가 월24유로(약38,000원), Pro가 월60유로(약96,000원)으로 꽤 비용이 나가는 편입니다.
https://n8n.io/pricing/

 
이전 포스팅에서 AWS에 EC2 인스턴스를 띄우고, Nginx를 설치하고, 도메인 연결하는 것까지 설명을 해놓았으니 참조하시기 바랍니다.
https://codegear.tistory.com/137

이번 글에서는 앞에서 설정한 EC2 인스턴스에 Docker를 설치하고, n8n을 설치하는 방법을 주로 다룹니다.

Docker 설치

n8n을 쉽게 설치하기 위해서 우선 docker를 설치합니다.
Amazon Linux 2023에 Docker를 설치하는 방법은 AWS 문서에 잘 나와있습니다.
https://docs.aws.amazon.com/ko_kr/AmazonECS/latest/developerguide/create-container-image.html

터미널을 열어 EC2 인스턴스에 접속합니다.

ssh -i /path/to/your-key.pem ec2-user@YOUR_EC2_PUBLIC_IP

EC2 인스턴스에서 아래 명령을 수행합니다.

sudo yum update -y
sudo yum install docker
sudo service docker start
sudo usermod -a -G docker ec2-user

터미널 종료 후 다시 접속하면 ec2-user가 docker 권한을 갖게 됩니다.
다음 명령어로 docker의 정상 설치 여부를 확인할 수 있습니다.

docker info

Docker Compose 설치

sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Docker Compose 권한 추가

sudo chmod +x /usr/local/bin/docker-compose

n8n 설치

디렉토리 생성

mkdir n8n_data 
cd n8n_data

docker-compose.yml 생성

docker에 이미지를 받고 컨테이너를 생성하기 위한 설정 파일을 생성합니다.

vi docker-compose.yml

아래 내용을 입력합니다. (vi에서 내용을 추가하기 위해서는 i 키를 누르셔야 합니다)

services:
  n8n:
    image: docker.n8n.io/n8nio/n8n # n8n Docker 이미지 사용
    restart: always # 컨테이너 종료 시 항상 재시작
    ports:
      - "5678:5678" # 호스트의 5678 포트를 컨테이너의 5678 포트에 연결 (n8n 기본 포트)
    environment:
      # n8n 라이선스 키 (선택 사항, 없으면 기본 기능으로 실행)
      # - N8N_LICENSE_KEY=YOUR_LICENSE_KEY
      
      # 데이터베이스 설정 (PostgreSQL 사용 권장)
      - DB_TYPE=postgresdb
      - DB_POSTGRESDB_HOST=n8n_db
      - DB_POSTGRESDB_PORT=5432
      - DB_POSTGRESDB_DATABASE=n8n_database
      - DB_POSTGRESDB_USER=n8n_user
      - DB_POSTGRESDB_PASSWORD=your_n8n_db_password # 안전한 비밀번호로 변경!

      # 웹훅 URL 설정 (선택 사항이지만 외부 접근 시 중요)
      - N8N_HOST=your.domain.com # n8n에 접속할 도메인 주소
      - N8N_PROTOCOL=https # HTTPS 사용 시
      - WEBHOOK_URL=https://your.domain.com/ # 웹훅 URL

    volumes:
      - ~/.n8n:/home/node/.n8n # n8n 데이터를 호스트에 영구 저장 (볼륨 마운트)

  n8n_db: # PostgreSQL 데이터베이스 서비스
    image: postgres:13 # PostgreSQL 13 버전 이미지 사용
    restart: always
    environment:
      - POSTGRES_DB=n8n_database
      - POSTGRES_USER=n8n_user
      - POSTGRES_PASSWORD=your_n8n_db_password # n8n 서비스의 DB_POSTGRESDB_PASSWORD와 동일하게 설정
    volumes:
      - pg_data:/var/lib/postgresql/data # PostgreSQL 데이터를 호스트에 영구 저장 (볼륨 마운트)

volumes:
  pg_data: # PostgreSQL 데이터 볼륨 정의

입력이 완료되면 vi editor에서 esc를 누른 후 다음 명령을 입력하여 저장합니다.

:wq

n8n 컨테이너 실행

docker-compose.yml 파일이 있는 디렉토리에서 다음 명령어를 실행합니다

docker-compose up -d

컨테이너가 잘 실행되었는지는 아래 명령어를 사용합니다.

docker-compose ps

 
컨테이너 로그도 확인해 줍니다.

docker-compose logs

도메인 설정하기

n8n에서 사용할 도메인은 agent.codegear.info입니다.
이를 위해 AWS Route53에 A 레코드 생성해야 합니다.
생성방법은 다음과 같습니다.
 

• codegear.info 호스팅 영역 클릭:
  • "호스팅 영역" 목록에서 codegear.info를 클릭하여 상세 페이지로 들어갑니다.
• 레코드 생성:
  • "레코드 생성(Create record)" 버튼을 클릭합니다.
• 레코드 설정:
  • 레코드 이름(Record name):
    • agent를 입력합니다. 이렇게 하면 agent.codegear.info가 됩니다. (루트 도메인 codegear.info에 연결하려면 비워둡니다.)
  • 레코드 유형(Record type):
    • A - IPV4 주소로 트래픽 라우팅을 선택합니다. (도메인을 IP 주소에 연결하는 가장 일반적인 유형입니다.)
  • 값(Value):
    • Nginx 및 N8N이 설치된 AWS EC2 인스턴스의 퍼블릭 IP 주소를 입력합니다. (가급적 탄력적 IP 주소를 사용하는 것을 권장합니다. 탄력적 IP는 인스턴스 재부팅 시 IP가 변경되지 않습니다.)
    • 예: 52.78.XXX.XXX
  • TTL(Time to Live):
    • 기본값 (300초)을 유지하거나 원하는 값으로 설정합니다. TTL이 짧을수록 DNS 변경 사항이 더 빨리 전파되지만, DNS 서버에 더 많은 부하를 줍니다.
  • 라우팅 정책(Routing policy):
    • 단순 라우팅(Simple routing)을 유지합니다.
• 레코드 생성:
  • "레코드 생성" 버튼을 클릭하여 설정을 저장합니다.

DNS 전파 확인

터미널을 열어 다음 명령으로 DNS 전파를 확인할 수 있습니다.

nslookup agent.codegear.info

Nginx 설정

Nginx 설정 파일 구조 이해

Amazon Linux 2023의 Nginx는 일반적으로 /etc/nginx/nginx.conf가 메인 설정 파일이고, 이 파일 안에서 include /etc/nginx/conf.d/*.conf; 지시어를 통해 /etc/nginx/conf.d/ 디렉토리 안의 .conf 파일들을 불러옵니다.
따라서 우리는 주로 /etc/nginx/conf.d/agent.codegear.info.conf와 같은 별도의 파일을 생성하여 도메인별 설정을 관리하는 것이 좋습니다.

1. 새로운 Nginx 설정 파일 생성: SSH로 EC2 인스턴스에 접속한 후, 다음 명령어를 사용하여 /etc/nginx/conf.d/ 디렉토리에 agent.codegear.info.conf 파일을 생성하고 편집합니다.

   sudo nano /etc/nginx/conf.d/agent.codegear.info.conf
   

2. 파일 내용 붙여넣기: vi 에디터에 다음 내용을 붙여넣으세요. 이 설정은 agent.codegear.info에 대한 HTTP/HTTPS 처리 및 N8N으로의 리버스 프록시를 담당합니다.내용을 붙여넣은 후 ecs를 누르고 :wq! 엔터를 입력하여 저장하고 종료합니다.

   server {
       listen 80;
       listen [::]:80;
       server_name agent.codegear.info;
   
       # Certbot will use this location to verify domain ownership
       location /.well-known/acme-challenge {
           allow all;
           root /usr/share/nginx/html; # Ensure this directory exists and is readable by Nginx
       }
   }

3. Certbot 실행 (필수): 위 Nginx 설정 파일은 agent.codegear.info에 대한 SSL 인증서가 /etc/letsencrypt/live/agent.codegear.info/ 경로에 있다고 가정합니다. 이 인증서는 Certbot을 실행해야 발급됩니다.
   • Certbot이 agent.codegear.info 도메인을 인식하고, 해당 도메인에 대한 SSL 인증서를 발급받은 후, agent.codegear.info.conf 파일 내의 ssl_certificate와 ssl_certificate_key 경로를 자동으로 채우거나 확인해 줍니다.
   • HTTP 트래픽을 HTTPS로 리디렉션할지 물으면 2: Redirect를 선택하는 것이 좋습니다.

     sudo certbot --nginx -d agent.codegear.info
     

4. Nginx 설정 테스트 및 재시작: 이제 새로운 설정 파일이 올바른지 확인하고 Nginx를 다시 시작하여 변경 사항을 적용합니다.sudo nginx -t 명령어가 syntax is ok와 test is successful을 반환해야 합니다.

   sudo nginx -t          # Nginx 설정 파일 문법 검사
   sudo systemctl restart nginx # Nginx 서비스 재시작
   

    

    

5. Certbot이 설정 파일에 SSL 관련된 셋팅을 자동으로 추가했으므로 이부분에 n8n이 사용하는 5678 포트로 redirect 처리가 필요합니다. 아래 내용을 ssl 아래에 추가하면 됩니다.

	# --- Proxy headers for N8N ---
    # Ensures N8N gets correct client IP, protocol, and host information.
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;

    # --- WebSocket support for N8N UI ---
    # Crucial for N8N's real-time updates and interactive UI.
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    # --- Reverse proxy to N8N  ---
    location / {
        proxy_pass http://localhost:5678/; # <-- Updated N8N internal port
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_read_timeout 300s;  # Increased timeout for long-running workflows
        proxy_send_timeout 300s;
    }

• 전체 설정 파일은 다음과 같습니다.

# --- HTTP Block: Handles HTTP requests and redirects to HTTPS ---
server {
    listen 80;
    listen [::]:80; # IPv6 listening
    server_name agent.codegear.info;

    # Certbot's domain validation challenge location.
    # This must be present in the HTTP block to allow Certbot to renew certificates.
    location ~ /.well-known/acme-challenge {
        allow all;
        root /usr/share/nginx/html; # Ensure this path is correct and accessible
    }

    # All other HTTP requests are permanently redirected to HTTPS.
    # Certbot usually inserts/modifies this.
    return 301 https://$host$request_uri;
}

# --- HTTPS Block: Handles secure (HTTPS) requests and proxies to N8N ---
server {
    listen 443 ssl;
    listen [::]:443 ssl; # IPv6 listening
    http2 on; # Correct way to enable HTTP/2

    server_name agent.codegear.info;

    # --- Let's Encrypt (Certbot) managed SSL certificate paths ---
    # These paths are filled in by Certbot after successful certificate issuance.
    ssl_certificate /etc/letsencrypt/live/agent.codegear.info/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/agent.codegear.info/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf; # Certbot's recommended SSL options
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # Diffie-Hellman parameters for stronger security

    # --- Proxy headers for N8N ---
    # Ensures N8N gets correct client IP, protocol, and host information.
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;

    # --- WebSocket support for N8N UI ---
    # Crucial for N8N's real-time updates and interactive UI.
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    # --- Reverse proxy to N8N  ---
    location / {
        proxy_pass http://localhost:5678/; # <-- Updated N8N internal port
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_read_timeout 300s;  # Increased timeout for long-running workflows
        proxy_send_timeout 300s;
    }

    # Optional: Error pages
    # error_page 404 /404.html;
    # location = /404.html { }
    # error_page 500 502 503 504 /50x.html;
    # location = /50x.html { }
}

최종 확인:

• 웹 브라우저를 열고 https://agent.codegear.info로 접속하여 N8N 웹 UI가 정상적으로 로드되는지 확인합니다.
• http://agent.codegear.info로 접속했을 때 자동으로 https://로 리디렉션되는지도 확인합니다.

이렇게 하면 기존 codegear.info 설정에 영향을 주지 않으면서 agent.codegear.info 서브도메인을 통해 n8n에 안전하게 접근할 수 있습니다.