반응형

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)의 부상: 깊은 이해가 경쟁력

최근 화두가 되고 있는 바이브 코딩(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

 

https://www.aliexpress.com/item/1005008908999396.html?pdp_npi=4%40dis%21KRW%2178558%2139300%21%21%21400.49%21200.35%21%402101539c17517585188765812de843%2112000047159590090%21affd%21%21%21&aff_fcid=7f426ab3a558410b810983729217ae48-1751758591899-08675-_oCXoUbE&aff_fsk=_oCXoUbE&aff_platform=portals-billboard-hd&sk=_oCXoUbE&aff_trace_key=7f426ab3a558410b810983729217ae48-1751758591899-08675-_oCXoUbE&terminal_id=6688ed226468444dae605629ce63e879&afSmartRedirect=y

 

www.aliexpress.com

반응형
반응형

여러 사이트에 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: 요청한 내용을 즉시 코드로 작성합니다.

 

결론: 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

 

Lofree Flow Lite Keyboard Lighter&Silenter POM Switch 2.4G Bluetooth&Wired Gasket Mount Volume Roller Key Configurator Keycaps -

Smarter Shopping, Better Living! Aliexpress.com

www.aliexpress.com

 

 

 

반응형
반응형

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/

n8n Plans and Pricing - n8n.io

Discover n8n's pricing alternatives for cost-effective workflow automation solutions. Find the perfect plan to maximize your workflows.

n8n.io

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

6천원 도메인, 무료 AWS로 '나만의 웹사이트' 띄우는 갓성비 끝판왕 가이드!

https://youtu.be/xXxljxkJy7Y 서비스 개발이 완료되면, 이를 서비스 하기 위해서는 서버와 도메인이 필요합니다.도메인을 싸게 구입하는 방법과AWS에서 도메인을 등록하고 서버를 셋팅해서 도메인 서버

codegear.tistory.com

이번 글에서는 앞에서 설정한 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

Amazon ECS에서 사용할 컨테이너 이미지 생성 - Amazon Elastic Container Service

경우에 따라서는 ec2-user가 Docker 대몬에 액세스할 수 있는 권한을 제공하기 위해 인스턴스를 재부팅해야 할 수도 있습니다. 다음 오류가 표시될 경우 인스턴스를 재부팅합니다. Cannot connect to the D

docs.aws.amazon.com

터미널을 열어 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 { }
}

최종 확인:

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

반응형
반응형

 

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

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

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

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

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

n8n 워크플로우 샘플

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

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

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

 

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

 

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://youtu.be/xXxljxkJy7Y

 

서비스 개발이 완료되면, 이를 서비스 하기 위해서는 서버와 도메인이 필요합니다.

도메인을 싸게 구입하는 방법

AWS에서 도메인을 등록하고 서버를 셋팅해서 도메인 서버를 만드는 방법에 대해 알아봅니다.



인터넷은 보통 IP라는 주소를 사용합니다. 예를들면 111.111.111.111 이런 형식으로 되어 있습니다.
naver.com의 도메인을 whois에서 검색해보면 다음과 같은 결과가 나옵니다.

218.232.110.133 이런 주소를 직접 입력하기는 어려워서 도메인(naver.com)이란 것을 사용합니다.


이 도메인을 싸게 구입하는 방법과 실 서비스를 위해 AWS에서 도메인을 셋팅하는 방법에 대해 알아보겠습니다.  

 


도메인 구입 (6,000원)

도메인은 AWS에서도 구입이 가능합니다.

하지만 가격 비교를 위해 AWS와 여러 도메인 구입 사이트를 확인해 보겠습니다.


AWS Route53

AWS에서 도메인을 구입하기 위한 서비스는 Route53입니다.
Route53에 들어가면 도메인 등록에 원하는 도메인(codegear)을 입력하고 조회를 합니다.

다음과 같이 검색결과가 나옵니다. codegear.info 기준으로 가격은 $25입니다.


가비아

다음은 대표적인 국내 도메인 사이트인 가비아에서 검색을 해보았습니다.
codegear.info를 이벤트 가격인 6,000원으로 판매하고 있습니다.

https://domain.gabia.com

 

가비아: 대한민국 도메인 점유율 1위

대한민국 100만 도메인 등록 업체

domain.gabia.com

Gabia 도메인 검색


Whois

whois에서 동일하게 검색을 해보았습니다.
codegear.info를 44,000원으로 판매하고 있습니다.

https://domain.whois.co.kr/

 

후이즈 도메인

도메인 등록, 안전한 도메인 연장 관리, 기업 도메인 관리 컨설팅, 강력한 부가서비스 제공

domain.whois.co.kr


GoDaddy

GoDaddy에서는 7,918원에 판매를 하고 있습니다.
https://kr.godaddy.com/

 

나만의 여정 만들기 | GoDaddy KR

온라인에서 성장하는 데 필요한 모든 지원 수단 및 도구인 웹사이트, 도메인, 디지털 및 소셜 마케팅 외에 GoDaddy 가이드를 통해 모든 단계 안내

kr.godaddy.com

1년 이상일 경우는 가격이 비슷하겠지만, 1년 사용료는 가격 차이가 꽤 납니다.
그러니 사이트 별로 꼭 비교하여 구매하시기 바랍니다.


AWS에 도메인 등록하기

Route 53을 DNS 서비스로 사용하고 기존 등록 기관은 유지하는 방법

이 방법은 도메인 등록 기관(예: 가비아, 후이즈, Godaddy 등)은 그대로 유지하되, 해당 도메인의 DNS 관리를 Route 53으로 위임하는 방식입니다.

 

AWS Route 53에서 "호스팅 영역" 생성:

  • AWS 콘솔에 로그인하여 Route 53 서비스로 이동합니다.
  • 왼쪽 메뉴에서 "호스팅 영역"을 선택하고 "호스팅 영역 생성" 버튼을 클릭합니다.
  • "도메인 이름" 필드에 다른 곳에서 구매한 도메인 이름을 정확하게 입력합니다 (예: codegear.info).
  • "유형"은 "퍼블릭 호스팅 영역"으로 선택합니다.
  • "호스팅 영역 생성"을 클릭합니다.

Route 53에서 제공하는 네임서버(NS) 확인:

  • 호스팅 영역이 생성되면 해당 호스팅 영역을 클릭하여 상세 정보를 확인합니다.
  • 여기서 **NS (Name Server)** 유형의 레코드를 찾아 "값/트래픽 라우팅 대상"에 나열된 4개의 네임서버 주소를 확인합니다. 이 주소들이 바로 Route 53이 해당 도메인의 DNS 관리를 위해 제공하는 고유한 네임서버입니다. (예: `ns-xxxx.awsdns-xx.com.`, `ns-xxxx.awsdns-xx.net.`, `ns-xxxx.awsdns-xx.org.`, `ns-xxxx.awsdns-xx.co.uk.`)
  • **주의:** 네임서버 주소 마지막에 있는 온점(`.`)은 제외하고 복사합니다.

기존 도메인 등록 기관에서 네임서버 변경:

  • 도메인을 구매했던 등록 기관(예: 가비아, 후이즈 등) 웹사이트에 로그인합니다.
  • 도메인 관리 또는 네임서버 변경 메뉴로 이동합니다.
  • 기존에 설정되어 있던 네임서버를 Route 53에서 복사한 4개의 네임서버 주소로 변경합니다. 등록 기관에 따라 네임서버를 1차, 2차, 3차, 4차 등으로 구분하여 입력하는 칸이 있을 수 있습니다. 각 칸에 맞게 입력합니다.
  • 변경 사항을 저장합니다.
  • 주의사항:
    • 네임서버 변경은 전파(Propagation)되는 데 최대 48시간이 소요될 수 있습니다. 이 기간 동안 도메인 접속이 불안정할 수 있습니다. (경험상 이렇게까지 걸리지 않습니다. 보통 1시간 정도면 대부분 전파가 됩니다)
    • DNS 레코드를 추가할 때 TTL(Time To Live) 값을 적절히 설정해야 합니다. 값이 낮을수록 DNS 변경 사항이 빠르게 적용되지만, DNS 서버에 부하를 줄 수 있습니다. 일반적으로 웹사이트 연결에는 300초(5분) ~ 3600초(1시간) 정도가 적당합니다.
    • 네임서버 전파 상태는 아래 사이트에서 확인할 수 있습니다.
      https://www.whatsmydns.net/
 

DNS Propagation Checker - Global DNS Checker Tool

Instant DNS Propagation Check. Global DNS Propagation Checker - Check DNS records around the world.

www.whatsmydns.net


AWS에 서버 셋팅하기

AWS 프리 티어 EC2 인스턴스 설정 (Amazon Linux 2023)

프리 티어 핵심 요약:

  • 기간: AWS 계정 생성 후 12개월 동안 제공.
  • 인스턴스 유형: `t2.micro` 또는 `t3.micro` (일부 리전에서 제공)만 프리 티어 적용. (이 중 하나만 선택!)
  • 사용 시간: 월별 최대 750시간. (예: `t2.micro` 1개를 한 달 내내 켜두면 약 730시간이므로 프리 티어 범위 내.) 만약 `t2.micro` 2개를 동시에 사용하면 375시간(750/2)만 무료가 되므로 주의!
  • 스토리지 (EBS): 총 30GB까지 무료 (GP2 또는 마그네틱). 여러 인스턴스에 걸쳐 총합 30GB입니다.
  • 네트워크: 퍼블릭 IPv4 주소 (탄력적 IP 포함) 사용 시 **월 750시간 무료** (2024년 2월 1일 이후 유료화되었지만, 프리 티어 사용자는 월750시간까지 무료).

단계별 설정 방법:

1. AWS 계정 로그인 및 리전 선택:

  • AWS 콘솔(console.aws.amazon.com)에 로그인합니다.
  • 가장 중요! 화면 우측 상단에서 원하는 리전(Region)을 선택합니다. 보통 서울 리전(ap-northeast-2)을 많이 사용하지만, 사용 목적에 따라 다른 리전을 선택할 수 있습니다. (리전을 잘못 선택하면 나중에 인스턴스를 못 찾을 수 있어요!)

2. EC2 서비스로 이동:

  • 검색창에 "EC2"를 입력하거나, 서비스 목록에서 "EC2"를 클릭합니다.
  • EC2 대시보드에서 "인스턴스 시작" 버튼을 클릭합니다.

3. 인스턴스 이름 및 태그 지정:

  • 이름 및 태그: 인스턴스에 식별하기 쉬운 이름을 입력합니다. (예: `MyNginxServer`, `AutoBlogInstance`)
  • (선택 사항) 필요에 따라 태그를 추가할 수 있습니다.

4. 애플리케이션 및 OS 이미지(AMI) 선택:

  • Amazon Machine Image (AMI): 서버의 운영체제(OS)를 선택하는 단계입니다.
  • "프리 티어 사용 가능" 라벨이 붙은 AMI를 선택해야 합니다.
  • "Amazon Linux 2023 AMI"를 선택합니다. (이전 버전인 Amazon Linux 2와 헷갈리지 마세요!)

5. 인스턴스 유형 선택:

  • 인스턴스 유형: 서버의 성능을 결정합니다.
  • "프리 티어 사용 가능" 라벨이 붙은 `t2.micro` (또는 일부 리전에서는 `t3.micro`)를 선택합니다. 다른 유형을 선택하면 바로 요금이 부과될 수 있으니 반드시 확인하세요!


6. 키 페어(로그인) 생성 또는 선택:

  • 키 페어(로그인): SSH로 인스턴스에 접속하기 위한 인증 키입니다. 없다면 새로 생성해야 합니다.
  • "새 키 페어 생성"을 클릭합니다.
  • 키 페어 이름: 원하는 이름을 입력합니다. (예: `my-ec2-key`)
  • 키 페어 유형: `RSA`를 선택합니다. (더 나은 보안을 위해 `ED25519`도 좋지만, `RSA`가 일반적이고 호환성이 높습니다.)
  • 프라이빗 키 파일 형식: `PEM`을 선택합니다. (PuTTY를 사용하는 경우 `PPK`로 변환해야 하지만, `PEM`이 일반적인 리눅스/macOS 터미널 접속에 용이합니다.)
  • "키 페어 생성" 버튼을 클릭하면 `.pem` 파일이 자동으로 다운로드됩니다. **이 파일은 절대로 잃어버리거나 남에게 노출해서는 안 됩니다! 안전한 곳에 보관하세요. (이 키 없이는 인스턴스에 다시 접근할 수 없습니다.)

7. 네트워크 설정 (보안 그룹):

  • 네트워크 설정: 인스턴스의 네트워크 규칙(방화벽)을 설정하는 부분입니다.
  • "편집" 버튼을 클릭하여 세부 설정을 변경합니다.
  • 보안 그룹 (Security Group):
    • "보안 그룹 생성"을 선택합니다. (기존 보안 그룹이 있다면 선택해도 되지만, 처음이라면 새로 생성하는 것이 좋습니다.)
    • 보안 그룹 이름: 식별하기 쉬운 이름을 지정합니다. (예: `web-server-sg`)
    • 설명: 간단한 설명을 추가합니다. (예: `Web server security group for HTTP/HTTPS/SSH`)
    • 인바운드 보안 그룹 규칙:
      • 규칙 추가 클릭:
        • 유형: `SSH` (포트 22) - 인스턴스에 터미널로 접속하기 위해 필수입니다.
        • 소스 유형: `내 IP` (현재 접속한 IP에서만 허용) 또는 `어디서나(0.0.0.0/0)` (모든 IP에서 접속 허용 - **보안에 취약**하니 신중하게 선택하세요. 개인 서버라면 `내 IP`가 좋습니다.)
      • 규칙 추가 클릭:
        • 유형: `HTTP` (포트 80) - 웹사이트 접속을 위해 필수입니다.
          소스 유형: `어디서나(0.0.0.0/0)` (모든 곳에서 웹사이트 접속 허용)
          규칙 추가 클릭:
          유형: `HTTPS` (포트 443) - SSL/TLS 웹사이트 접속을 위해 필수입니다.
        • 소스 유형: `어디서나(0.0.0.0/0)`
      • (필요한 경우, 다른 포트(예: n8n의 기본 포트 5678)도 여기서 추가할 수 있습니다.)
  • 스토리지 구성:
    • 스토리지: 인스턴스의 하드 디스크 용량입니다.
    • 크기(GiB): 30 GiB로 설정합니다. (프리 티어 최대 용량입니다. 초과하면 과금됩니다.)
    • 볼륨 유형: `gp2` (범용 SSD) 또는 `Standard` (마그네틱)를 선택합니다. (`gp3`도 프리 티어에 포함될 수 있으나, `gp2`가 가장 보편적입니다.)
    • (스냅샷, 암호화 등은 필요에 따라 설정하며, 일반적으로 기본값을 유지합니다.)

9. 고급 세부 정보 (선택 사항):

  • 고급 세부 정보: 대부분의 경우 기본값을 유지해도 됩니다.
  • 퍼블릭 IP 자동 할당: "활성화"로 되어 있는지 확인합니다. (기본적으로 활성화되어 있습니다. 그래야 인스턴스 생성 후 바로 퍼블릭 IP를 받을 수 있습니다.)
  • (IAM 역할, 종료 방지 등은 필요에 따라 설정합니다.)

10. 요약 및 인스턴스 시작:

  • 우측 "요약" 패널에서 지금까지 설정한 내용을 최종적으로 검토합니다. 특히 AMI, 인스턴스 유형, 스토리지, 보안 그룹 규칙이 프리 티어 기준에 맞는지 다시 한번 확인합니다.
  • "인스턴스 시작" 버튼을 클릭합니다.

11. 인스턴스 시작 완료 및 접속:

  • 인스턴스 시작이 완료되면 "모든 인스턴스 보기"를 클릭하여 인스턴스 목록으로 이동합니다.
  • 새로 생성된 인스턴스의 **상태 검사**가 `초기화`에서 `2/2 검사 통과`로 바뀔 때까지 잠시 기다립니다.
  • 인스턴스를 선택하고 하단 상세 정보에서 **퍼블릭 IPv4 주소**를 확인합니다.

탄력적 IP (고정IP) - 12개월 무료

  • 과거에는 탄력적 IP가 실행 중인 EC2 인스턴스에 연결되어 있으면 무료였습니다.
  • 하지만 2024년 2월 1일부터는 실행 중인 EC2 인스턴스에 연결된 첫 번째 탄력적 IP 주소시간당 $0.005 USD의 요금이 부과됩니다.
  • 예외: AWS Free Tier 사용자는 계정 생성 후 12개월 동안 월 750시간의 퍼블릭 IPv4 주소 사용이 무료로 제공됩니다.

AWS에서 탄력적 IP(Elastic IP) 추가 및 연결 방법

  1. EC2 대시보드 이동:
    • 검색창에 "EC2"를 입력하여 EC2 서비스 대시보드로 이동합니다.
  2. 올바른 리전(Region) 선택 확인:
    • 화면 우측 상단에서 현재 작업 중인 EC2 인스턴스가 위치한 리전이 올바르게 선택되어 있는지 반드시 확인합니다. 탄력적 IP는 리전별로 할당됩니다.
  3. 탄력적 IP 대시보드로 이동:
    • EC2 대시보드 왼쪽 메뉴에서 "네트워크 및 보안(Network & Security)" 아래에 있는 "탄력적 IP(Elastic IPs)"를 클릭합니다.
  4. 새 탄력적 IP 주소 할당:
    • "탄력적 IP(Elastic IPs)" 페이지에서 상단의 "탄력적 IP 주소 할당(Allocate Elastic IP address)" 버튼을 클릭합니다.
  5. IP 주소 설정 확인:
    • 대부분의 경우, 별도의 설정을 변경할 필요 없이 기본 옵션(Amazon 풀의 IPv4 주소)을 유지하면 됩니다.
    • "할당(Allocate)" 버튼을 클릭합니다.
    • 성공적으로 할당되면 새로운 탄력적 IP 주소가 "탄력적 IP" 목록에 추가된 것을 확인할 수 있습니다.
  6. 할당된 탄력적 IP를 EC2 인스턴스에 연결 (Associate):
    • 목록에서 방금 할당받은 새 탄력적 IP 주소를 선택합니다.
    • 상단 "작업(Actions)" 드롭다운 메뉴를 클릭합니다.
    • "탄력적 IP 주소 연결(Associate Elastic IP address)"을 선택합니다.
  7. 연결할 인스턴스 선택:
    • "리소스 유형(Resource type)" 드롭다운에서 "인스턴스(Instance)"를 선택합니다.
    • "인스턴스(Instance)" 드롭다운에서 탄력적 IP를 연결하고자 하는 실행 중인 EC2 인스턴스를 선택합니다. (인스턴스가 중지되어 있으면 목록에 표시되지 않을 수 있습니다.)
    • "프라이빗 IP 주소(Private IP address)"는 일반적으로 선택한 인스턴스의 기본 프라이빗 IP 주소가 자동으로 채워집니다. 변경할 필요 없습니다.
    • "연결(Associate)" 버튼을 클릭합니다.
  8. 연결 확인:
    • 연결이 성공하면 "탄력적 IP" 목록에서 해당 IP 주소 옆에 "연결된 인스턴스 ID"가 표시됩니다.
    • EC2 대시보드의 "인스턴스(Instances)" 메뉴로 돌아가서 해당 인스턴스를 클릭합니다. 인스턴스 상세 정보의 "세부 정보(Details)" 탭에서 "탄력적 IP 주소(Elastic IP address)" 항목에 방금 연결한 IP 주소가 표시되는 것을 확인할 수 있습니다.

도메인을 서버에 연결

Route 53 호스팅 영역에 DNS 레코드 추가:

  • 이제 원하는 AWS 서비스(예: EC2, S3, Amplify 등)에 트래픽을 라우팅하기 위한 레코드를 Route 53 호스팅 영역에 추가해야 합니다.
  • 웹사이트 연결 (탄력적 IP 주소 사용):
    • "레코드 생성"을 클릭합니다.
    • "레코드 이름": `www` 또는 비워두면 도메인 자체를 의미합니다.
    • "레코드 유형": `A - IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅`을 선택합니다.
    • "값": 연결하고자 하는 EC2 인스턴스의 탄력적 IP 주소를 입력합니다.
    • "라우팅 정책": "단순 라우팅"을 선택합니다.
    • "레코드 생성"을 클릭합니다.
  • Load Balancer, S3 버킷, CloudFront 등 연결:
    • "레코드 유형": `A` 또는 `AAAA`를 선택한 후 "별칭"을 "예"로 설정하고 연결하려는 AWS 리소스를 선택합니다. (Load Balancer, S3 웹사이트 호스팅, CloudFront 배포 등은 별칭 레코드를 통해 쉽게 연결할 수 있습니다.)
  • 서브 도메인 연결 (CNAME):
    • `blog.mydomain.com`과 같은 서브 도메인을 연결하려면 "레코드 유형"을 `CNAME`으로 선택하고 "값"에 대상 도메인 이름을 입력합니다.

AWS EC2에 Nginx 설치하기

SSH로 EC2 인스턴스에 접속하기:

1. 터미널 (macOS/Linux) 또는 PuTTY (Windows) 준비:

  • macOS/Linux: 터미널을 엽니다.
  • Windows: PuTTY 또는 Windows Terminal에서 OpenSSH 클라이언트를 사용할 수 있습니다. PuTTY를 사용하려면 `pem` 파일을 `ppk` 파일로 변환해야 합니다 (`PuTTYgen` 사용).

2. `.pem` 키 파일 권한 설정 (Linux/macOS):

  • 다운로드한 `.pem` 파일이 있는 디렉토리로 이동합니다.
  • 파일 권한을 변경합니다. (매우 중요! 권한이 없으면 접속 불가.)
chmod 400 your_key_pair_name.pem


3. SSH 접속:

  • 터미널에서 다음 명령어를 입력합니다.
ssh -i "your_key_pair_name.pem" ec2-user@your_instance_public_ip

 

  • `your_key_pair_name.pem`: 다운로드한 키 페어 파일의 이름
  • `ec2-user`: Amazon Linux의 기본 사용자 이름입니다. (Ubuntu는 `ubuntu`, CentOS는 `centos` 또는 `ec2-user` 등 OS마다 다를 수 있습니다.)
  • `your_instance_public_ip`: EC2 콘솔에서 확인한 인스턴스의 퍼블릭 IPv4 주소
  • 처음 접속 시 "Are you sure you want to continue connecting (yes/no/[fingerprint])?" 메시지가 나오면 `yes`를 입력합니다.

 

이제 EC2 인스턴스에 성공적으로 접속하여 원하는 작업을 수행할 수 있습니다!

 

Nginx 설치 및 셋팅

1. 패키지 목록 업데이트

설치 전 최신 패키지 정보를 가져오기 위해 시스템을 업데이트합니다.

sudo dnf update -y

(-y 옵션은 모든 질문에 "예"로 자동 응답하여 설치 과정을 자동화합니다.)

 

2. Nginx 설치

이제 dnf 명령어를 사용하여 Nginx를 설치합니다.

sudo dnf install nginx -y

 

3. Nginx 서비스 시작 및 활성화

Nginx 설치가 완료되면, 서비스를 시작하고 서버 재부팅 시 자동으로 시작되도록 설정합니다.

sudo systemctl start nginx
sudo systemctl enable nginx

 

4. Nginx 서비스 상태 확인

Nginx가 올바르게 실행 중인지 확인합니다.

sudo systemctl status nginx

"active (running)"이라는 메시지가 보이면 Nginx가 정상적으로 실행되고 있는 것입니다.

 

5. 방화벽 설정 (선택 사항)

Amazon Linux 2023은 기본적으로 firewalld가 설치되어 있지 않을 수 있습니다. 만약 방화벽을 사용하고 있다면, HTTP (80번 포트) 및 HTTPS (443번 포트) 트래픽을 허용하도록 설정해야 합니다.

  • firewalld 설치 (필요한 경우):
    sudo dnf install firewalld -y
    sudo systemctl start firewalld
    sudo systemctl enable firewalld
    
  • HTTP 및 HTTPS 포트 열기:
    sudo firewall-cmd --permanent --add-service=http
    sudo firewall-cmd --permanent --add-service=https
    sudo firewall-cmd --reload
    

6. 보안 그룹 설정 (AWS EC2에서 필수)

EC2 인스턴스 생성할때 보안 그룹(Security Group)을 이미 오픈했습니다.

HTTP (80번 포트) 및 HTTPS (443번 포트) 인바운드 규칙으로 외부에서 Nginx 웹 서버에 접속할 수 있습니다.

 

7. Nginx 기본 페이지 확인

웹 브라우저를 열고 EC2 인스턴스의 퍼블릭 IP 주소 또는 퍼블릭 DNS를 입력합니다. http://your-instance-ip

정상적으로 설치되었다면 Nginx의 기본 환영 페이지가 표시될 것입니다.

이제 Amazon Linux 2023에 Nginx가 성공적으로 설치되었으며, 웹 서버로 사용할 준비가 완료되었습니다. Nginx 설정 파일은 /etc/nginx/nginx.conf에 있으며, 가상 호스트 설정 등은 /etc/nginx/conf.d/ 디렉토리에 .conf 파일을 생성하여 관리하는 것이 일반적입니다.

 

Nginx SSL 적용하기

Nginx에 SSL/TLS를 적용하여 HTTPS를 사용하면 웹사이트의 보안을 강화하고 사용자 데이터를 보호할 수 있습니다. 가장 일반적이고 권장되는 방법은 Let's Encrypt에서 무료 SSL 인증서를 발급받고, Certbot 도구를 사용하여 Nginx에 자동으로 적용하는 것입니다.

Amazon Linux 2023 환경에서 Certbot을 사용하여 Nginx에 SSL을 적용하는 단계를 안내해 드리겠습니다.

준비물:

  1. 도메인: SSL을 적용할 도메인 이름 (예: example.com).
  2. DNS 설정: 해당 도메인이 Nginx 서버의 퍼블릭 IP 주소를 가리키도록 DNS A 레코드가 설정되어 있어야 합니다. (설치 전 필수)
  3. Nginx 설치 및 실행: 앞서 설명한 대로 Nginx가 Amazon Linux 2023에 설치되어 실행 중이어야 합니다.
  4. 보안 그룹 및 방화벽: AWS EC2 인스턴스의 보안 그룹에서 HTTP (80번 포트)  HTTPS (443번 포트) 인바운드 규칙이 열려 있어야 합니다.

Nginx SSL 적용 (Certbot 사용):

1. Certbot 설치

Certbot은 Let's Encrypt 인증서를 쉽고 자동으로 발급하고 Nginx에 적용할 수 있도록 도와주는 도구입니다. Amazon Linux 2023에서는 dnf를 사용하여 설치할 수 있습니다.

Bash
 
# EPEL(Extra Packages for Enterprise Linux) 저장소 활성화 (Certbot이 EPEL에 있을 수 있습니다)
sudo dnf install epel-release -y

# Certbot 및 Nginx 플러그인 설치
# Amazon Linux 2023에서는 python3-certbot-nginx 대신 python-certbot-nginx 일 수 있습니다.
# 먼저 아래 명령을 시도하고 실패하면 'python-certbot-nginx'로 시도하세요.
sudo dnf install certbot python3-certbot-nginx -y

만약 python3-certbot-nginx가 없다는 오류가 발생하면, python-certbot-nginx로 다시 시도하거나, Certbot 공식 웹사이트에서 제공하는 Amazon Linux용 설치 지침을 확인하는 것이 가장 좋습니다. (현재 시간 기준으로는 python3-certbot-nginx가 일반적입니다.)

 

2. Nginx 설정 확인

Certbot이 Nginx 설정을 자동으로 수정하려면, Nginx가 올바르게 구성되어 있어야 합니다. 특히, 도메인 이름이 server_name 지시문에 명시되어 있어야 합니다.

기본 설정 파일은 /etc/nginx/nginx.conf 또는 /etc/nginx/conf.d/default.conf에 있을 수 있습니다. 예를 들어, default.conf 파일을 열어 편집합니다.

sudo vi /etc/nginx/nginx.conf
# 또는
sudo vi /etc/nginx/conf.d/default.conf

http 블록 내에 다음과 유사한 server 블록이 있는지 확인합니다 (아직 HTTPS 설정은 하지 않습니다):

server {
    listen 80;
    server_name your_domain.com www.your_domain.com; # 여기에 실제 도메인 이름을 입력하세요
    # 기타 설정 (root, index, location 등)
    # ...
}

변경 사항을 저장하고 Nginx 설정 구문이 올바른지 확인합니다.

sudo nginx -t

syntax is ok와 test is successful 메시지가 표시되어야 합니다.

Nginx를 다시 로드합니다.

sudo systemctl reload nginx

 

3. SSL 인증서 발급

이제 Certbot을 사용하여 Let's Encrypt 인증서를 발급받고 Nginx에 적용합니다.

sudo certbot --nginx

이 명령을 실행하면 Certbot이 몇 가지 질문을 할 것입니다:

  • 이메일 주소: 인증서 갱신 알림 및 보안 관련 통지를 받을 이메일 주소를 입력합니다.
  • 서비스 약관 동의: 약관에 동의합니다.
  • 도메인 선택: Certbot이 Nginx 설정에서 감지한 도메인 목록이 표시됩니다. SSL을 적용할 도메인 번호를 선택하거나 all을 입력하여 모두 적용합니다.
    • 예시: 1: your_domain.com 2: www.your_domain.com 원하는 도메인 번호를 쉼표로 구분하여 입력하거나, 1,2와 같이 입력할 수 있습니다.
  • HTTP -> HTTPS 리디렉션 설정: Certbot이 HTTP(80번 포트)로 들어오는 모든 요청을 HTTPS(443번 포트)로 자동으로 리디렉션할지 물어봅니다. **"2: Redirect"**를 선택하는 것이 좋습니다.

성공적으로 완료되면 Certbot이 인증서가 발급되었고 Nginx 설정이 업데이트되었다는 메시지를 표시합니다. 인증서는 /etc/letsencrypt/live/your_domain.com/ 경로에 저장됩니다.

 

4. Nginx 설정 자동 업데이트 확인

Certbot이 Nginx 설정 파일 (예: /etc/nginx/conf.d/default.conf 또는 새로운 설정 파일)을 자동으로 수정합니다. 변경된 내용은 다음과 유사할 것입니다:

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;
    return 301 https://$host$request_uri; # HTTP -> HTTPS 리디렉션
}

server {
    listen 443 ssl http2; # HTTPS (443) 포트 및 HTTP/2 활성화
    server_name your_domain.com www.your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem; # 전체 인증서 체인
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem; # 개인 키
    include /etc/letsencrypt/options-ssl-nginx.conf; # Certbot이 제공하는 보안 설정
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # DH 매개변수 (보안 강화)

    # 기타 설정 (root, index, location 등)
    # ...
}

 

5. SSL 적용 확인

웹 브라우저를 열고 https://your_domain.com으로 접속하여 자물쇠 아이콘이 표시되고 웹사이트가 정상적으로 로드되는지 확인합니다. 또한 http://your_domain.com으로 접속했을 때 자동으로 https://로 리디렉션되는지도 확인합니다.

 

6. 인증서 자동 갱신 확인

Let's Encrypt 인증서는 90일마다 갱신해야 합니다. Certbot은 일반적으로 시스템에 cron job 또는 systemd timer를 자동으로 설정하여 인증서가 만료되기 전에 갱신되도록 합니다.

다음 명령어로 자동 갱신 시뮬레이션을 실행하여 제대로 작동하는지 확인할 수 있습니다.

sudo certbot renew --dry-run

이 명령이 오류 없이 실행되면 자동 갱신이 잘 설정된 것입니다.


이렇게 하면 모든 셋팅이 완료되고 브라우저에 도메인을 입력하면 다음과 같은 화면을 볼 수 있습니다.

 

 

앞으로는 이 도메인을 기반으로 여러 가지 사이트들을 만드는 과정도 진행할 예정입니다.

반응형
반응형

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를 다루는 것도 프로그램 개발 능력 중 하나가 된 것 같습니다.

반응형
반응형

이 글의 유튜브 영상 링크입니다.
https://www.youtube.com/watch?v=XXurwjs307s

 



유튜브 영상을 시청하다 보면 기록으로 남겨 놓고 싶은 영상들이 있습니다. 최신 AI 기술을 활용하면 이런 과정을 쉽게 자동화할 수 있습니다.

자동화 구성 요소

이 자동화는 Cline, MCP, Gemini, Obsidian을 활용하여 이루어집니다.

 

구성 요소 설치

  1. Cline: Visual Studio Code의 확장 프로그램으로, 플러그인으로 쉽게 설치할 수 있습니다.
  2. LLM 연동: Cline에 Gemini와 같은 다양한 LLM(Large Language Model)을 연동합니다.
  3. MCP Server 설치: Cline에 MCP Server를 설치하여 AI Agent 환경을 구성합니다.
  4. YouTube Subtitles MCP 설치: 유튜브 스크립트를 가져오기 위해 MCP에서 YouTube Subtitles 도구를 설치합니다.

자동화 작동 방식


사용 환경 설정이 완료되면, 사용자의 요청에 따라 AI가 스스로 어떤 도구들을 활용할지 판단하여 요청을 수행합니다.

* AI Agent: 기존 AI Workflow와 달리, AI Agent는 AI가 스스로 처리 방식을 판단하여 유연하게 작업을 수행합니다.
* 자동 처리: 유튜브 링크와 간단한 프롬프트만 입력하면, AI Agent가 모든 과정을 자동으로 처리합니다.
* 결과 저장: 처리된 결과는 Cline이 Markdown 파일로 생성하여 Obsidian에 저장합니다. 모든 과정이 사람의 개입 없이 자동으로 처리됩니다.

사용 예시


"코딩 없이 웹사이트 개발하기 v0.dev" 영상(https://www.youtube.com/watch?v=YxEZkQi3M5w)을 예시로 자동화 과정을 설명합니다.

 

프롬프트 예시:

https://www.youtube.com/watch?v=YxEZkQi3M5w 
이 영상의 내용을 Markdown 문법으로 정리해서 
0.Inbox 폴더에 "코딩없이 웹사이트 개발하기 v0.dev"란 제목으로 저장해줘. 
문서 제일 상단에는 youtube link도 넣어줘.



처리 과정:

  1. 프로젝트 열기: VSCode에서 폴더 열기를 선택한 후 Obsidian 최상위 폴더를 선택합니다.
  2. 도구 활용 판단: AI가 YouTube Subtitles MCP Server의 `download_youtube_url` 도구를 사용한다고 판단하고 승인을 요청합니다.
  3. 자막 추출: 승인 후, YouTube에서 자막이 응답으로 옵니다.
  4. 문서 생성: 마지막으로 AI가 내용을 정리하여 Markdown 문서를 생성하고 Obsidian에 저장합니다.

 

 


생성된 문서 내용 (예시):

코딩 없이 웹사이트 개발하기 v0.dev

YouTube Link: https://www.youtube.com/watch?v=YxEZkQi3M5w

영상 요약

이 영상은 AI를 활용하여 코딩 없이 웹사이트를 개발하는 방법, 특히 Vercel의 V0.dev 서비스를 소개합니다.

1. 바이브 코딩 (Vibe Coding) 이란?

* 정의: 키보드로 직접 코드를 입력하는 대신, 특정 분위기나 느낌을 가진 화면을 자연어로 요청하여 AI가 이를 해석하고 코드를 생성하는 개발 방식입니다.
* 장점:
* 개발 지식이 부족해도 개발이 가능합니다.
* 기술적인 측면보다 핵심 서비스에 집중할 수 있습니다.
* 기획-디자인-개발의 전통적인 방식 대신, 프롬프트 입력만으로 AI가 적절한 기술과 디자인 트렌드를 적용하여 서비스를 개발합니다.

2. V0.dev 소개

* 개발사: Next.js 프레임워크를 만든 Vercel에서 개발했습니다.
* 특징:
* Next.js 프레임워크 기반의 코드 생성 AI로, UI 개발에 강점을 가집니다.
* 높은 코드 품질과 디자인 완성도를 자랑하여 실제 프로젝트에 바로 적용 가능합니다.
* 개발 시간을 크게 단축할 수 있습니다.
* 백엔드 개발자가 프론트엔드 지식이 부족해도 풀스텝 개발 및 서비스 런칭이 가능합니다.
* 에러 발생 시, 에러 코드를 입력하면 AI가 분석하여 코드를 수정해줍니다.

3. V0.dev 사용 예시 (테크 블로그 사이트 제작)

* 목표: 현대적인 디자인의 프로그래밍 테크 블로그 사이트 제작.
* 프롬프트 예시: "현대적인 디자인의 프로그래밍 테크 블로그를 만들어줘. 상단에 Hardyshop 섹션을 만들고, 그 아래에 최신 글을 이미지와 요약과 함께 그리드 형식으로 보여줘. 사이드바에 카테고리와 뉴스레터 구독 폼을 추가해줘."
* 제작 과정:
1. V0.dev 사이트 접속 후, `Projects`에서 `Create new project` 클릭.
2. `Create Blog Site` 버튼 클릭 후, 준비된 프롬프트 복사/붙여넣기.
3. AI가 프롬프트를 해석하여 코드를 생성 (약 2~3분 소요).
4. 생성된 사이트는 헤더, 로고 내비게이션, 검색 기능, 핫 이슈 섹션, 최신 글 그리드, 사이드바 등으로 구성되며, Shad CN UI 컴포넌트, 반응형 디자인, 호버 효과, 일관된 색상 구성 등이 적용됩니다.
5. 생성된 코드는 `page.tsx`를 메인으로 컴포넌트 단위로 잘 분리되어 있습니다.
* 추가 기능 적용:
* 다크 모드 추가 (예: `darklight mode toggle feature` 구현 요청).
* V0.dev 내에서 바로 배포 및 서비스 런칭이 가능합니다.

4. 향후 학습 내용

* V0.dev에서 생성된 소스 코드 다운로드 및 로컬 실행 방법.
* 백엔드 API 연결 방법.
* AWS 등 실제 서비스를 활용한 서비스 설정 방법.

반응형

+ Recent posts