작성자: Sam LEE (여러분의 개발 코치) 목표: 코딩을 전혀 모르는 분들도 내 컴퓨터를 '개발이 가능한 상태'로 만드는 것!
본격적으로 도구를 설치하기 전에, 우리가 왜 이런 도구들을 쓰는지부터 알아야 합니다. 개발자들이 입버릇처럼 말하는 "기술 스택"이라는 단어, 사실 알고 보면 아주 친숙한 개념입니다.
🍳 은유(Metaphor): "최고급 이탈리아 레스토랑의 주방" 여러분은 지금부터 'OpenClaw' 라는 아주 훌륭한 요리(애플리케이션)를 만드는 셰프입니다.
- 기술 스택: 요리를 만들기 위해 필요한 '주방 도구 세트' 전체를 말합니다. (칼, 가스레인지, 냉장고, 양념통 등)
- 스택(Stack = 쌓다): 요리에 칼만 있다고 되는 게 아니죠? 도구들이 차곡차곡 쌓여서 하나의 음식이 만들어지듯, 여러 기술이 조화롭게 쌓여있는 모습을 뜻합니다.
📦 기술 스택의 종류 (4대 핵심 장비) 보통 기술 스택은 역할에 따라 크게 4가지로 나뉩니다:
- Frontend (요리의 데코레이션): 손님이 직접 보는 접시와 플레이팅입니다. (HTML, CSS, Lit)
- Backend (비밀 주방): 손님 눈에는 안 보이지만, 불을 피우고 재료를 손질하는 핵심 주방입니다. (Node.js, Hono)
- Database (냉장고): 재료를 신선하게 보관하고 필요할 때 꺼내 쓰는 곳입니다. (SQLite)
- Language (셰프의 레시피 기록법): 레시피를 적는 언어입니다. 실수를 줄이기 위해 아주 정밀한 문법을 씁니다. (TypeScript)
우리는 아무 도구나 쓰지 않습니다. "최소한의 비용으로, 빛의 속도로" 봇을 만들기 위해 엄선하다 보니 아래의 최신 기술들을 선택한 것이죠. 아주 탁월한 선택입니다.
- Node.js (LTS): "강력한 터보 엔진"
- 이유: 수만 건의 메시지가 동시에 쏟아져도 멈추지 않고 처리할 수 있는 '비동기' 기능 때문입니다. 현재 가장 많은 봇 개발자들이 쓰고 있어서 정보 찾기도 쉽습니다.
- TypeScript: "잔소리 심한 수석 주방장"
- 이유: 자바스크립트는 "대충 해도 돼"라며 실수하기 쉽지만, 타입스크립트는 "아니, 이건 소금이 아니라 설탕이잖아!"라고 즉시 지적해 줍니다. 덕분에 나중에 요리가 망가질 확률을 99% 줄여줍니다.
- Hono: "가장 얇고 튼튼한 요리 테이블"
- 이유: 기존 도구들(Express 등)은 너무 무겁습니다. Hono는 오직 속도와 표준에만 집중해서, 어디서든(클라우드, 로컬) 날아다니듯 작동합니다.
- Baileys: "WhatsApp으로 통하는 비밀 통로"
- 이유: WhatsApp은 공식적으로 봇을 만드는 절차가 매우 까다롭고 유료인 경우가 많습니다. Baileys는 우리가 마치 진짜 사람인 것처럼 WhatsApp과 통신하게 해주는 마법 같은 도구입니다.
- SQLite: "가방에 쏙 들어가는 미니 금고"
- 이유: 대규모 서버 없이도 파일 하나면 대화 내용을 완벽하게 저장할 수 있습니다. 관리가 너무 편합니다.
인제 기술 스택이 뭔지 이해가 되셨으니 어떻게 내 컴퓨터에 설치하고 설정하는지에 대해 알아보도록 하겠습니다.
Node.js: 자바스크립트 실행기. (건설 현장의 인부)
- 💡 [입문 수업] Node.js는 도대체 왜 쓰는 건가요?
- 은유: 수족관을 탈출한 자바스크립트: 원래 자바스크립트는 브라우저라는 '수족관' 안에서만 살 수 있는 물고기였습니다. Node.js는 이 물고기에게 **'기계 슈트'**를 입혀 수족관 밖(서버)에서 파일을 만지고 DB를 관리하는 **'천하무적 일꾼'**으로 만든 것입니다.
- 엔진: 구글 크롬의 V8 페라리 엔진을 장착하여, 배우기 쉬우면서도 속도는 엄청나게 빠릅니다.
- 설치법 (macOS/Linux): fnm을 통해 최신 LTS(v22 이상)를 설치합니다.
curl -fsSL https://fnm.vercel.app/install | bash fnm install 22 - 설치법 (Windows): 공식 홈페이지에서 LTS 버전을 다운로드하여 설치.
Tip
🎓 [개념 수업] 비동기 I/O (Asynchronous I/O)가 뭔가요? **"맛집 웨이터의 서빙 방식"**입니다. 손님이 메뉴를 고민할 때 가만히 서 있지 않고 **"결정되면 벨 눌러주세요"**라며 다른 일을 하는 효율적인 방식입니다. 수천 명의 사용자가 동시에 접속하는 OpenClaw에 필수적인 기술입니다.
pnpm: 효율적인 패키지 매니저. (자재 관리 소장)
- 💡 [보충 수업] npm이 도대체 뭔가요?
- 은유: 개발자들의 "앱스토어" 혹은 "다이소": 달력이나 암호화 기능 같은 '부품'이 필요할 때 직접 만들지 않고 **무료 부품 상점(npm)**에서 다운로드 받습니다.
- 레고 블록: 성을 쌓을 때 블록 하나하나를 직접 굽지 않고, 이미 만들어진 블록들을 가져와 조립하는 것과 같습니다.
- 설치법:
npm install -g pnpm - 왜 pnpm인가?: npm은 100명이 같은 책을 읽을 때 100권을 다 사주는 방식이지만, pnpm은 도서관에 딱 한 권만 두고 **'마법의 대출증(Hard Link)'**만 줍니다. 하드디스크가 꽉 찰 걱정 없죠.
TypeScript: 엄격한 문법 검사기. (설계도 감리사)
- 설치법 (전역): 컴퓨터 어디서든 설계도를 검사할 수 있게 전역으로 설치합니다.
npm install -g typescript # 확인: tsc -v - 은유: "철저한 설계도 감리사". 벽돌 하나를 쌓을 때마다 설계도와 일치하는지 확인하여 나중에 건물이 무너지는 대형 사고를 99% 막아줍니다.
Hono: 초고속 웹 프레임워크. (건물 뼈대)
- 왜 Hono인가? Express가 무거운 세단이라면, Hono는 최신 웹 표준을 따르는 F1 레이싱카입니다. 5배 더 빠르고 어디서든 잘 돌아갑니다.
"명령어는 알겠는데, 도대체 어디에 치라는 건가요?" 막막해하실 분들을 위해, 마우스 클릭 하나하나까지 다 알려드립니다. 천천히 따라오세요.
🤔 [잠깐] VSCode가 뭔가요? 메모장이랑 뭐가 달라요?
- 메모장(Notepad): 단순히 글자만 적는 '과도(과일 깎는 칼)' 입니다. 사과 하나 깎을 땐 좋지만, 요리는 못 합니다.
- VSCode (Visual Studio Code): 마이크로소프트가 만든 '최첨단 셰프의 주방' 입니다. 전 세계 70% 개발자의 필수 도구이며, 아래와 같은 기능을 제공합니다.
- 재료 색깔 표시: 코드가 알록달록하죠? 소금인지 설탕인지 헷갈리지 말라고 색칠해 주는 겁니다. (Syntax Highlighting)
- 보조 셰프:
consol만 쳐도console이라고 추천해 줍니다. (Auto-completion) - 상황실 통합: 코드를 짜면서 바로 서버를 켜고 끄는 버튼(터미널)이 내장되어 있습니다.
- Workspace 폴더 만들기 (부지 확보)
- 먼저 컴퓨터 하드디스크(C드라이브 혹은 홈 디렉토리)에
Workspace라는 이름의 폴더를 만드세요. - 그
Workspace폴더 안에 들어가서, 다시openclaw-lab이라는 새 폴더를 만듭니다. - 구조: 내 컴퓨터 -> Workspace -> openclaw-lab
- 이
openclaw-lab폴더가 앞으로 우리의 베이스캠프가 됩니다.
- 먼저 컴퓨터 하드디스크(C드라이브 혹은 홈 디렉토리)에
Tip
💡 [Coach's Tip] 왜 굳이 Workspace 폴더를 만드나요?
개발을 하다 보면 "어? 제 파일 어디 갔죠?" 하고 길을 잃는 경우가 정말 많습니다. 윈도우(C드라이브) 사용자, 맥(홈) 사용자 모두 Workspace라는 공통된 약속 장소를 정해두면, 나중에 "경로를 못 찾겠어요" 같은 문제를 99% 예방할 수 있습니다. 이것은 전 세계 개발자들의 '국룰(불문율)' 같은 습관이며, 경로 문제로 헷갈릴 일을 원천 봉쇄해 줍니다.
-
VSCode 열기 (입주)
- VSCode를 실행합니다.
- 방금 만든
openclaw-lab폴더를 마우스로 끌어서(Drag & Drop) VSCode 화면 정중앙에 놓으세요. - 또는 메뉴에서 파일 > 폴더 열기(Open Folder...)를 선택해도 됩니다.
- 왼쪽 탐색기(Explorer)에 폴더 이름이 보인다면 입주 성공입니다.
-
터미널 열기 (상황실 개방)
- 이제 검은 화면, **터미널(Terminal)**을 열 차례입니다. 이곳이 바로 우리가 컴퓨터에게 직접 명령을 내리는 대화창입니다.
- 단축키:
Ctrl+ - 메뉴: 상단 메뉴바 Terminal -> New Terminal
- 하단에 패널이 열리면서 깜빡이는 커서가 보이나요? 준비 완료입니다.
-
명령 하달 (Start)
- 아래 코드 한 줄 한 줄 복사 후 터미널 창에 붙여넣기 하고 실행(Enter 키)으로 실행 시켜 주세요.
# 1. 호적 등본(package.json) 만들기
pnpm init
# 2. 필수 자재(라이브러리) 주문하기
pnpm add hono @hono/node-server @whiskeysockets/baileys better-sqlite3
# 3. 설계 도구(TypeScript) 주문하기 (개발용)
pnpm add -D typescript @types/node- 확인 사살 (Check): 왼쪽 탐색기에서 package.json 파일을 클릭해보세요. 파일 내용이 아래와 비슷하다면 성공입니다. (버전 숫자는 조금 달라도 괜찮습니다.)
{
"name": "openclaw-lab",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@hono/node-server": "^1.x.x",
"@whiskeysockets/baileys": "^6.x.x",
"better-sqlite3": "^11.x.x",
"hono": "^4.x.x"
},
"devDependencies": {
"@types/node": "^20.x.x",
"typescript": "^5.x.x"
}
}본 것: 학교에서 필독 도서 1권을 지정하자 전교생 1,000명이 각자 똑같은 책을 사서 가방에 무겁게 넣고 다니는 상황입니다. 사물함은 폭발 직전이고 학생들의 어깨는 나날이 눌려만 갑니다. 이것이 우리가 흔히 사용하는 npm의 비효율적인 모습입니다.
눈: 시니어 개발자는 다르게 행동합니다. 학교 도서관에 책을 딱 한 권만 비치하고, 학생들에게는 그 책을 언제든 꺼내볼 수 있는 **'마법의 대출증(Hard Link)'**을 줍니다. 학생들의 가방은 깃털처럼 가벼워지고 책을 찾는 속도는 기하급수적으로 빨라집니다. 이것이 바로 전문가들이 pnpm을 선택하는 진짜 이유입니다.
Tip
🎓 [개념 수업] 비동기 I/O가 왜 중요한가요? "맛집 웨이터의 서빙 방식"입니다. 손님이 메뉴를 고민할 때 가만히 서 있지 않고 다른 테이블 업무를 보는 '벨 누르는 방식'의 천재이기 때문입니다.
Tip
🛒 [에디터의 추가 팁] npm이 도대체 뭔가요?
**npm(Node Package Manager)**은 한마디로 **'전 세계 개발자들이 재료를 올리는 거대 식자재 마트'**입니다.
우리가 맛있는 요리(프로그램)를 할 때, 밀을 직접 재배하고 닭을 키울 필요는 없죠? 마트에서 밀가루와 달걀(라이브러리)을 사 오면 됩니다. npm은 전 세계의 천재 개발자들이 "내가 미리 만들어둔 이 재료 가져다 쓰세요!" 하고 올려둔 거대한 창고이고, 우리는 방금 pnpm이라는 '스마트 장바구니'를 이용해 거기서 필요한 재료를 주문한 것입니다.
축하합니다! 이제 튼튼한 하드웨어와 소프트웨어 기반이 모두 갖춰졌습니다. 다음 회차부터는 본격적으로 이 주방에서 OpenClaw의 심장을 하나씩 조립해 보겠습니다! 🚀