Code Gear - AI 개발 유튜브 강의

n8n이란?

n8n은 AI 워크플로우 자동화 오픈 소스 솔루션입니다.

Make, Zapier 등과 같이 업무를 자동화 하는데 최적화된  도구입니다.

심지어 n8n 셀프호스팅을 하게되면 무료로 사용이 가능합니다.

하지만 이런 노코드 자동화 도구들을 이용해서 자동화를 구축하는 것이 마냥 쉽지는 않습니다.

이를 해결해 주는것이 n8n MCP입니다.

n8n에 대한 내용은 제가 이전에 작성한 글을 참고하시기 바랍니다.

https://codegear.tistory.com/138

n8n 셀프 호스팅 구축 방법도 이전에 작성한 글을 참고하시면 됩니다.

https://codegear.tistory.com/139

n8n MCP란?

n8n MCP를 사용하면 각종 Code Assistant에서 n8n에 자동화를 쉽게 구축할 수 있습니다.

클로드 데스크탑에서도 채팅만으로 쉽게 구축이 가능합니다.

n8n MCP를 사용하면 n8n에서 제공되는 대부분의 기능을 구현할 수 있습니다.

n8n에서 API Key를 생성한 후 n8n mcp 설정에 추가만 하면 n8n 서버를 management 할 수 있습니다.

클로드 코드에서 n8n MCP 사용하기

클로드 코드에 n8n MCP를 설치하는 방법을 알아보겠습니다.

n8n mcp에 대한 자세한 내용은 github에 있는 내용을 참조하였습니다.

https://github.com/czlonkowski/n8n-mcp

n8n MCP 설치하기

• 로그인 계정의 루트에 .claude.json 파일을 에디터에서 Open합니다.
• mcpServers 항목에 아래 내용을 추가합니다.

{
  "mcpServers": {
    "n8n-mcp": {
      "command": "npx",
      "args": ["n8n-mcp"],
      "env": {
        "MCP_MODE": "stdio",
        "LOG_LEVEL": "error",
        "DISABLE_CONSOLE_OUTPUT": "true"
      }
    }
  }
}

• 이렇게 설치하면 기본적인 툴만 사용 가능합니다.
• 만약, n8n 서버에 워크플로우를 작성하고, 수정하는 작업을 하려면 아래와 같이 인증 정보까지 추가해줍니다.

{
  "mcpServers": {
    "n8n-mcp": {
      "command": "npx",
      "args": ["n8n-mcp"],
      "env": {
        "MCP_MODE": "stdio",
        "LOG_LEVEL": "error",
        "DISABLE_CONSOLE_OUTPUT": "true",
        "N8N_API_URL": "https://your-n8n-instance.com",
        "N8N_API_KEY": "your-api-key"
      }
    }
  }
}

• 맥북 환경변수에 등록 하여 사용하실 경우는 .zshrc 파일에 아래 내용을 추가하시면 됩니다.

export N8N_API_URL="https://your-n8n-instance.com"
export N8N_API_KEY="your-api-key"

• 환경변수에 추가한 후에 .claude.json 은 해당 부분을 아래와 같이 수정합니다.

"N8N_API_URL": "$N8N_API_URL",
"N8N_API_KEY": "$N8N_API_KEY"

n8n MCP 연결 확인

• 이제 클로드코드를 재실행 합니다.
• "/mcp" 를 입력합니다.
• 아래와 같이 "connected"라고 나오면 정상적으로 설치가 완료된 것입니다.

이제 클로드 코드에서 n8n에 있는 워크플로우를 프롬프트로 제어할 수 있습니다.

https://youtu.be/z2UgicfCSXU

프론트엔드와 백엔드를 동시에 구현하기

이번 글에서는 클로드 코드를 활용하여 구글 로그인 기능을 구현합니다.

지난 글에서는 frontend와 backend를 각각 구현하는 것을 해보았고, 이번에는 동시에 개발하는 과정을 진행하려고 합니다.

우선 개발전에 구글 로그인에 필요한 GCP 설정을 진행하겠습니다.

GCP(Google Cloud Platform) 설정

• GCP에서 새로운 프로젝트를 생성합니다. (저는 CodeGear로 만들었습니다)
• 프로젝트 선택 후 "API 및 서비스" - "사용자 인증 정보" 메뉴로 이동합니다.

• "사용자 인증 정보 만들기"를 클릭하고 "OAuth 클라이언트 ID"를 선택합니다.

• 애플리케이션 유형에서 "웹 애플리케이션"을 선택합니다.

• "승인된 JavaScript 원본"에 "http://localhost:3001"을 입력합니다.
• "승인된 리디렉션 URI"에 "http://localhost:3001/auth/google/callback"을 입력합니다.

• "만들기" 버튼을 클릭하여 설정을 완료합니다.

구현

폴더 열기

• 우선 VSCode를 실행하고, frontend와 backend의 상위 폴더인 codegear 폴더를 열어줍니다.

README.md

• README.md 파일을 만들고 아래와 같이 작성합니다.

## 프로젝트 정의
- 이 프로젝트는 CodeGear의 유튜브 채널을 홍보하는 사이트 개발을 위해 만들어졌다.
- 이 프로젝트는 frontend와 backend로 구성되어 있다.
- /frontend 폴더는 next.js 기반의 프론트엔드 프로젝트이다.
- /backend 폴더는 nest.js 기반의 백엔드 프로젝트이다.

Claude 실행

• 터미널에 claude를 입력합니다.

Claude 초기화

• /init 명령으로 프로젝트를 초기화 합니다.
• 초기화가 완료되면 CLAUDE.md 파일이 생성됩니다.

• 구글 로그인 기능 추가
  • 아래와 같은 프롬프트를 입력합니다.

구글 로그인 기능을 추가하려고 하는데 백엔드와 프론트엔드로 나누어서 각각 필요한 기능들을 추가해줘.

이렇게 하면 클로드코드가 frontend와 backend에 필요한 코드들을 생성하고 테스트까지 진행을 하게됩니다.

구글 로그인 기능 테스트

다음과 같은 순서로 테스트를 진행합니다.

프로그램 실행하기

• 프론트엔드 실행
  • frontend 폴더에서 "npm run dev" 를 실행합니다.
• 백엔드 실행
  • backend 폴더에서 "npm run start:dev"를 실행합니다.

브라우저에서 확인하기

• 브라우저 주소창에 http://localhost:3001을 입력하면 아래와 같은 화면이 보입니다.

• 우측 상단의 Google로 로그인 버튼을 클릭합니다.

• 로그인 하려는 계정을 클릭합니다.

• CodeGear 서비스 로그인 안내창에서 "계속" 버튼을 클릭하면 로그인이 완료되고 로그인한 사용자 정보가 표시됩니다.

이 프로젝트 아키텍처는 실서비스에 사용할 수 있는 구조입니다.

백엔드와 프론트엔드로 나누어져 있어서 전문적인 서비스를 개발하는데 사용 가능합니다.

이 기반위에 여러가지 필요한 설정과 기능들을 추가해서 여러분의 서비스를 개발하시면 됩니다.

참고로 이 기능은 CodeGear.info 사이트에 올라가 있습니다.

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 시대에 개발자들에게 큰 힘을 실어줄 수 있는 유용한 도구입니다.

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

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

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

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

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

최근 제가 가장 관심있게 보고 있는게 n8n입니다.

n8n은 Workflow를 자동화하는 솔루션입니다.

워크플로우 자동화 솔루션은 이전에도 많이 있었습니다.

하지만 n8n이 기존 솔루션들과 다른점이 하나 있습니다.

바로 AI Agent를 사용할 수 있다는 점입니다.

AI Agent는 LLM을 연결하여 질문과 수행을 판단할 수 있게 하는 역할을 합니다.

즉, Workflow 중간에 LLM이 개입해서 업무를 판단하고 처리할 수 있다는 뜻입니다.

이게 엄청난 매력으로 작용하게 됩니다.

이 n8n에 대해 알아보도록 하겠습니다.

N8N이란 무엇인가요?

N8N (엔에잇엔)은 "노드 기반의 워크플로우 자동화 도구"입니다. 코딩 없이도 다양한 웹 서비스와 애플리케이션을 연결하여 복잡한 자동화 작업을 만들 수 있도록 도와주는 오픈소스 플랫폼입니다.

쉽게 말해, 레고 블록처럼 생긴 "노드(Node)"들을 연결해서 원하는 작업을 순서대로 쭉 나열하면, N8N이 그 순서에 따라 자동으로 작업을 처리해 주는 방식입니다.

• 노드 기반(Node-based): 각 서비스나 기능이 하나의 블록(노드)으로 표현되어, 드래그 앤 드롭으로 연결하기만 하면 됩니다. 코드를 직접 작성할 필요가 없어 프로그래밍 초보자도 쉽게 접근할 수 있어요.
• 오픈소스(Open Source): 누구나 자유롭게 사용하고 수정하며 개선할 수 있습니다. 커뮤니티가 활성화되어 있어 다양한 정보와 도움을 얻기 쉽죠.
• 자체 호스팅 가능(Self-hostable): AWS 같은 클라우드 서버에 직접 설치하여 운영할 수 있어, 데이터 보안과 비용 효율성 면에서 큰 장점을 가집니다.

N8N으로 어떤 자동화를 할 수 있나요?

N8N은 웹훅, API, 데이터베이스, 클라우드 서비스 등 수많은 서비스와 연동할 수 있어 그 활용 범위가 무궁무진합니다. 몇 가지 대표적인 활용 예시를 들어볼게요.

1. 데이터 수집 및 통합:
   • "새로운 이메일이 오면, 첨부 파일을 구글 드라이브에 저장하고 슬랙으로 알림 보내기"
   • "특정 웹사이트의 데이터를 주기적으로 가져와 스프레드시트에 자동 업데이트하기"
2. 마케팅 및 영업 자동화:
   • "새로운 리드(잠재 고객)가 CRM(고객 관계 관리) 시스템에 추가되면, 자동으로 환영 이메일 보내고 담당자에게 알림 주기"
   • "유튜브 채널에 새 영상이 올라오면, 자동으로 트위터에 홍보 트윗 작성하기"
3. 내부 업무 프로세스 자동화:
   • "지라(Jira)에 새로운 티켓이 생성되면, 팀원에게 디스코드 알림 보내고 관련 파일 드롭박스에 자동 생성하기"
   • "매일 아침 특정 데이터베이스에서 리포트를 추출하여 이메일로 발송하기"
4. AI 에이전트 워크플로우 구축 (CodeGear 시리즈의 핵심!):
   • "사용자의 질문을 OpenAI API로 보내 답변을 생성하고, 그 답변을 슬랙/디스코드/웹사이트에 자동 게시하기"
   • "들어오는 데이터를 분석하여 특정 조건에 맞으면 AI가 요약하고, 관련 액션을 자동으로 트리거하기" (예: 고객 문의 분류 후 AI가 1차 답변 초안 작성)
   • "AI가 생성한 콘텐츠를 구글 시트에 저장하거나, 웹사이트에 자동으로 발행하기"
5. 소셜 미디어 관리:
   • "인스타그램에 새 게시물이 올라오면, 자동으로 페이스북 페이지에도 동시 발행하기"

왜 N8N인가요?

• 코드 지식 없이도 강력한 자동화:
  • 복잡한 API 연동이나 스크립트 작성 없이도 드래그 앤 드롭만으로 워크플로우를 만들 수 있습니다.
• 다양한 서비스 연동:
  • 수백 가지의 내장 통합(Integrations)을 제공하며, 웹훅 등을 통해 거의 모든 서비스와 연결할 수 있습니다.
• 강력한 커스터마이징:
  • 오픈소스이므로 필요에 따라 기능을 확장하거나 직접 노드를 개발할 수도 있습니다.
• 데이터 주권:
  • 클라우드 서비스에 민감한 데이터를 맡기지 않고, 내 서버에서 직접 관리할 수 있어 안심입니다.

결론

결론적으로 N8N은 코딩 없이도 누구나 자신의 업무와 서비스를 효율적으로 자동화할 수 있도록 돕는 강력한 도구입니다.

특히 AI 시대에 반복적인 작업을 AI에 맡기고, 그 결과를 다른 서비스로 연동하는 등의 복잡한 워크플로우를 구축하는 데 핵심적인 역할을 할 것입니다.

다음 영상에서는 이 강력한 N8N을 여러분의 AWS 서버에 월 0원으로 설치하는 방법을 상세히 알려드릴 예정이니 기대해주세요!

https://www.youtube.com/shorts/q2hnJXySydY

이 글은 괴테의 서사시 "마법사의 제자"를 디즈니가 애니메이션으로 각색한 작품을 통해, 오늘날 급변하는 AI 시대에 우리가 되새겨야 할 중요한 교훈을 이야기합니다.

이야기는 위대한 마법사의 제자인 미키 마우스가 스승의 부재를 틈타 힘든 허드렛일을 피하고자 스승의 마법 모자를 몰래 쓰고 빗자루에 마법을 거는 것으로 시작됩니다.

마법에 걸린 빗자루는 스스로 움직이며 미키 대신 물을 길어 나르기 시작합니다.

처음에는 편안함에 잠이 들었던 미키.

그러나 잠에서 깨어났을 때, 빗자루는 멈추지 않고 계속 물을 부어 작업실은 걷잡을 수 없는 물바다가 됩니다.

당황한 미키는 빗자루를 멈추는 주문을 알지 못해 결국 도끼로 빗자루를 부숴버립니다.

하지만 놀랍게도 부서진 빗자루 조각들은 각각 새로운 빗자루로 되살아나며 상황을 더욱 악화시키고, 온 세상이 물에 잠길 듯한 대혼란이 벌어집니다.

절망적인 순간, 스승 마법사가 돌아와 단 한 번의 강력한 지휘로 모든 것을 원래대로 되돌려 놓습니다.

스승은 말썽을 피운 미키에게 다시 빗자루와 양동이를 건네주며, 어설픈 재능을 함부로 사용했을 때의 위험을 뼈저린 교훈으로 남깁니다.

원작에 등장하는 "내가 불러낸 영혼들 이제 다시는 떨쳐낼 수 없네"라는 문구는 오늘날 AI의 무서운 발전을 보며 깊은 울림을 줍니다.

AI의 발전 속도는 가히 폭발적이며, 우리는 과연 우리가 창조한 AI를 제대로 제어할 수 있을지에 대한 근본적인 질문에 직면해 있습니다.

이제는 단순히 AI를 '만드는 것'을 넘어, '어떻게 다룰 것인가'에 대한 깊은 고민과 책임감이 필요한 시점입니다.

마법사의 제자처럼 통제 불능의 상황에 빠지지 않기 위해, 우리는 AI의 잠재력을 이해하고 윤리적이며 책임감 있는 활용 방안을 모색해야 할 것입니다.

마법사의 제자가 AI 시대에 주는 인사이트

"마법사의 제자"는 AI 시대에 우리가 깊이 고민해야 할 몇 가지 추가적인 인사이트를 제공합니다.

1. 한계에 대한 이해의 중요성: 미키 마우스의 가장 큰 실수는 마법을 시작하는 방법은 알았지만, 그것을 멈추는 방법을 몰랐다는 점입니다. 이는 AI 개발에 있어서 우리가 만드는 시스템의 한계와 잠재적 위험을 명확히 이해해야 함을 시사합니다. AI의 능력만을 맹신하고 통제 메커니즘이나 안전장치에 대한 고려 없이 무분별하게 확장하는 것은 예측 불가능한 결과를 초래할 수 있습니다.
2. 의도치 않은 결과의 힘: 단순한 허드렛일을 피하려던 미키의 행동이 통제 불능의 대혼란으로 이어진 것처럼, AI 시스템의 작은 설계 결함이나 의도치 않은 상호작용이 예상치 못한 거대한 문제를 야기할 수 있습니다. AI 개발자는 시스템의 복잡성과 잠재적 파급 효과를 깊이 이해하고, 발생 가능한 모든 시나리오를 고려하여 신중하게 접근해야 합니다.
3. 전문성과 감독의 역할: 미키가 초래한 위기는 스승 마법사의 개입으로 비로소 해결됩니다. 이는 AI 시대에 인간 전문가의 역할과 강력한 감독의 필요성을 강조합니다. AI는 강력한 도구이지만, 궁극적인 책임과 윤리적 판단은 인간에게 있습니다. AI의 개발, 배포, 활용 전반에 걸쳐 전문가의 지식과 윤리적 가이드라인, 그리고 지속적인 감독 체계가 필수적입니다.
4. 편의성 추구가 가져올 수 있는 위험: 미키는 힘든 일을 피하려는 편의성 때문에 스승의 마법을 오용했습니다. 이는 AI가 제공하는 편리함에만 매몰되어 비판적 사고나 적절한 관리 없이 AI에 전적으로 의존할 때 발생할 수 있는 위험을 경고합니다. AI는 우리의 생산성을 높이고 삶을 윤택하게 할 수 있지만, 그 사용에 있어서는 항상 신중함과 책임감을 잃지 않아야 합니다.

결론적으로, "마법사의 제자"는 AI라는 강력한 도구를 다루는 데 있어 기술적 능력뿐만 아니라, 그에 수반되는 책임감, 통제력, 그리고 윤리적 성찰의 중요성을 일깨워주는 고전적인 경고로 남아 있습니다.

https://youtu.be/--ec9f0_QnU

Google AI Studio 시연을 보고...

지난 5월 20일 있었던 Google I/O 2025에서 Google AI Studio에 대한 내용이 있었습니다.
그 내용은 다음과 같습니다.
 
미국 자연사 박물관에 AI Studio로 만든 갤러리 웹앱이 있었습니다.

이걸 3D Sphere 형태로 보여주자는 brilliant 한 idea가 있었습니다.
이걸 스케치한 게 다음 내용입니다.

이 스케치를 AI Studio에 업로드하고, prompt를 짧게 입력했습니다.
단 37초 만에 다음과 같은 결과가 나왔습니다.

스케치의 내용처럼 sphere는 회전, 좌우 틸트, 줌인등의 효과를 완벽하게 구현했습니다.
이를 본 참석자들의 환호와 박수가 쏟아졌습니다.
 

v0.dev로 똑같이 구현할 수 있을까?

시연에 나온 AI Studio의 UI가 동작하는 방식은 Vercel의 v0.dev와 거의 유사했습니다.
그렇다면 v0.dev에서도 구현이 되지 않을까? 하는 의문이 생겼습니다.
그래서 한번 시도해 보았습니다.
 

v0.dev로 Photo Sphere Web App을 만들기

진행 순서는 다음과 같습니다.

• 1단계 : 갤러리 웹앱을 만듭니다.
• 2단계 : 스케치를 이용한 회전하는 원형 갤러리로 업그레이드 합니다.

1단계 : 갤러리 웹앱

• v0.dev에서 새 프로젝트를 만듭니다.
• 프로젝트 제목은 Photo Sphere로 합니다.
• 우선 갤러리를 만들기 위해 다음 프롬프트를 입력합니다.

로컬 폴더에 있는 이미지들을 자동으로 읽어와서 보여주는 
갤러리 웹앱을 만들어줘.

• 코드 생성이 완성되면 v0.dev 우측 상단의 다운로드 버튼을 누르고 소스를 다운로드 합니다.
• 로컬 프로젝트 폴더에서 압축을 풀고 에디터에서 폴더 열기를 합니다.
• yarn install을 실행해서 프로젝트 패키지를 설치합니다.
• yarn dev를 실행해서 서버를 start 시킵니다.
• 브라우저에서 http://localhost:3000을 입력하면 아래와 같이 갤러리 웹앱이 보입니다.

• public/images 폴더에 사진을 추가하고 브라우저를 새로 고침하시면 추가된 이미지가 보입니다.

2단계 : 스케치로 개발하기

• v0.dev의 프롬프트 창에 아래 이미지를 업로드합니다.

• 아래 프롬프트를 입력합니다.

tree.js를 사용해서 업로드한 스케치와 같이 지금 코드를 업데이트 해줘

• 저는 한번에 되지 않아 여러 차례 수정을 해주어야 했습니다. 아마도 영문 prompt로 했다면 좀 더 빨리 되지 않았을까 하는 생각도 드네요.
• 최종 결과 화면은 다음과 같습니다.

완벽하지는 않지만 구글I/O 2025에서 AI Studio가 보여준 화면과 유사한 형태의 결과가 나왔습니다.
스케치를 보고 사용자가 무엇을 원하는지를 정확하게 분석을 해내는 모습이 인상적이었습니다.
 

결론

요즘 AI가 빠른 속도로 발전하고 있고, 성능도 점점 좋아지고 있습니다.

까딱 잘못하면 시대의 흐름에 뒤쳐질 수 있습니다.

이제 AI를 다루는 것도 프로그램 개발 능력 중 하나가 된 것 같습니다.