Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill beginner-guideO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baseado na classificação ocupacional SOC
Exibindo SKILL.md
| name | beginner-guide |
| description | 초보자를 위한 SaaS 개발 완전 가이드 - 아무것도 몰라도 OK |
| triggers | ["초보자","기초","설명","뭐야","어떻게","처음","입문"] |
프로그래밍을 전혀 몰라도 이해할 수 있도록 모든 것을 자세히 설명합니다.
🌐 인터넷 = 전 세계 컴퓨터가 연결된 거대한 네트워크
비유: 전 세계 도로망
- 도로 = 인터넷 케이블/와이파이
- 자동차 = 데이터(정보)
- 집/건물 = 서버(컴퓨터)
- 주소 = URL/IP 주소
┌─────────────────────────────────────────────────────────────┐
│ 인터넷 구조도 │
│ │
│ 🏠 당신의 컴퓨터 │
│ ↓ │
│ 📡 공유기 (와이파이) │
│ ↓ │
│ 🏢 인터넷 서비스 제공자 (KT, SK, LG 등) │
│ ↓ │
│ 🌍 인터넷 백본 (해저 케이블, 위성) │
│ ↓ │
│ 🏭 데이터센터 (구글, 네이버 등의 서버) │
└─────────────────────────────────────────────────────────────┘
🕸️ 웹 (World Wide Web) = 인터넷 위에서 동작하는 서비스 중 하나
비유: 인터넷이 도로라면, 웹은 그 도로를 달리는 택시 서비스
웹 vs 다른 인터넷 서비스:
┌────────────────┬─────────────────────────────────────┐
│ 서비스 │ 설명 │
├────────────────┼─────────────────────────────────────┤
│ 웹 (HTTP) │ 웹사이트 보기 (크롬, 사파리) │
│ 이메일 (SMTP) │ 이메일 주고받기 (Gmail, 네이버) │
│ 파일전송 (FTP) │ 파일 업로드/다운로드 │
│ 화상통화 (RTC) │ Zoom, 카카오톡 영상통화 │
└────────────────┴─────────────────────────────────────┘
URL = 웹에서 특정 페이지의 주소
예시: https://www.example.com/products/shoes?color=red&size=270
분해:
┌─────────────────────────────────────────────────────────────┐
│ │
│ https:// www.example.com /products/shoes ?color=red │
│ ↓ ↓ ↓ ↓ │
│ 프로토콜 도메인 경로 쿼리 │
│ (보안연결) (웹사이트 이름) (페이지 위치) (추가 정보) │
│ │
└─────────────────────────────────────────────────────────────┘
프로토콜:
- http:// = 일반 연결 (보안 취약)
- https:// = 암호화된 연결 (안전) ✅ 필수!
도메인:
- www = 서브도메인 (생략 가능)
- example = 도메인 이름
- .com = 최상위 도메인 (TLD)
- .com = 기업
- .org = 비영리
- .kr = 한국
- .io = 기술 스타트업에서 많이 사용
🌍 브라우저 = 웹사이트를 보여주는 프로그램
종류:
- Chrome (구글) - 가장 많이 사용 ⭐
- Safari (애플) - 맥/아이폰 기본
- Firefox (모질라) - 오픈소스
- Edge (마이크로소프트) - 윈도우 기본
브라우저가 하는 일:
1. URL 입력 받기
2. 서버에 페이지 요청
3. HTML, CSS, JavaScript 받기
4. 화면에 그려주기 (렌더링)
5. 사용자 입력 처리
개발자 도구 (매우 중요! ⭐):
- 열기: F12 또는 Ctrl+Shift+I (맥: Cmd+Option+I)
- Elements 탭: HTML 구조 보기
- Console 탭: 에러 메시지 확인
- Network 탭: 데이터 요청 확인
- Application 탭: 저장된 데이터 확인
📦 SaaS = Software as a Service (서비스형 소프트웨어)
쉽게 말해: 설치 없이 인터넷으로 사용하는 프로그램
과거 소프트웨어:
1. 가게에서 CD 구매 💿
2. 컴퓨터에 설치 💾
3. 한 번 구매로 평생 사용 (업데이트 별도)
4. 그 컴퓨터에서만 사용 가능
현재 SaaS:
1. 웹사이트 접속 🌐
2. 설치 필요 없음 ✅
3. 월/년 구독료 지불 💳
4. 어디서든 접속 가능 (폰, 태블릿, PC)
5. 항상 최신 버전
예시 비교:
┌────────────────┬─────────────────┬────────────────────┐
│ 과거 │ SaaS │ 차이점 │
├────────────────┼─────────────────┼────────────────────┤
│ MS Office CD │ Microsoft 365 │ 클라우드 저장 │
│ 포토샵 CD │ Adobe CC │ 월 구독 │
│ 한글 CD │ 한컴오피스 웹 │ 어디서든 접속 │
│ 로컬 메모장 │ Notion │ 실시간 동기화 │
│ Outlook 설치 │ Gmail │ 웹에서 바로 사용 │
└────────────────┴─────────────────┴────────────────────┘
사용자 입장:
✅ 설치 불필요 - 브라우저만 있으면 OK
✅ 자동 업데이트 - 항상 최신 버전
✅ 어디서든 접속 - 폰, 태블릿, PC 동기화
✅ 초기 비용 낮음 - 비싼 소프트웨어 한 번에 구매 X
✅ 무료 체험 가능 - 써보고 결정
개발자/사업자 입장:
✅ 꾸준한 수익 - 구독료로 예측 가능한 매출
✅ 빠른 업데이트 - 모든 사용자에게 즉시 적용
✅ 사용 데이터 수집 - 서비스 개선에 활용
✅ 낮은 유통 비용 - CD 제작, 배송 불필요
✅ 글로벌 판매 - 인터넷으로 전 세계 판매
💰 SaaS 수익 모델 종류
1. 프리미엄 (Freemium)
┌─────────────────────────────────────┐
│ 무료 플랜 │ 유료 플랜 │
├─────────────────────────────────────┤
│ 기본 기능 │ 고급 기능 │
│ 제한된 용량 │ 무제한 용량 │
│ 광고 있음 │ 광고 없음 │
│ 워터마크 │ 워터마크 없음 │
└─────────────────────────────────────┘
예: Notion, Canva, Spotify
2. 구독제 (Subscription)
- 월간: $9.99/월
- 연간: $99/년 (2개월 무료)
예: Netflix, Adobe CC, Microsoft 365
3. 사용량 기반 (Usage-based)
- API 호출당 $0.001
- 저장 용량 GB당 $0.02
- 사용자 수당 $5/월
예: AWS, OpenAI API, Twilio
4. 1회성 + 유지보수
- 소프트웨어: $199 (1회)
- 업데이트/지원: $49/년
예: 일부 전문 소프트웨어
5. 티어 기반 (Tiered)
┌─────────┬──────────┬──────────┬──────────┐
│ Free │ Basic │ Pro │ Enterprise│
├─────────┼──────────┼──────────┼──────────┤
│ $0 │ $9/월 │ $29/월 │ 문의 │
│ 1명 │ 5명 │ 무제한 │ 무제한 │
│ 1GB │ 10GB │ 100GB │ 무제한 │
└─────────┴──────────┴──────────┴──────────┘
📊 분야별 SaaS 예시
생산성:
- Notion - 올인원 워크스페이스
- Slack - 팀 메신저
- Trello - 프로젝트 관리
- Figma - 디자인 협업
비즈니스:
- Salesforce - CRM (고객 관리)
- HubSpot - 마케팅 자동화
- Zendesk - 고객 지원
- QuickBooks - 회계
개발:
- GitHub - 코드 저장소
- Vercel - 웹 배포
- Supabase - 데이터베이스
- Stripe - 결제
AI:
- ChatGPT - AI 챗봇
- Midjourney - AI 이미지 생성
- Jasper - AI 글쓰기
- Copy.ai - AI 마케팅
한국 SaaS:
- 채널톡 - 고객 상담
- 토스페이먼츠 - 결제
- 센드버드 - 채팅 API
- 스티비 - 이메일 마케팅
🖥️ 클라이언트-서버 = 웹의 기본 구조
클라이언트 = 요청하는 쪽 (브라우저, 앱)
서버 = 응답하는 쪽 (웹 서버, 데이터베이스)
비유: 식당
┌─────────────────────────────────────────────────────────────┐
│ │
│ 👤 손님 (클라이언트) │
│ "짜장면 주세요" → 📋 주문서 (HTTP 요청) │
│ │
│ ↓ │
│ │
│ 👨🍳 주방 (서버) │
│ 짜장면 조리 → 🍜 음식 (HTTP 응답) │
│ │
│ ↓ │
│ │
│ 👤 손님이 짜장면 받음 │
│ │
└─────────────────────────────────────────────────────────────┘
웹에서:
1. 브라우저에서 URL 입력 (주문)
2. 서버가 요청 받음
3. 서버가 페이지 만들어서 보냄 (응답)
4. 브라우저가 페이지 표시
👁️ 프론트엔드 = 사용자가 보고 만지는 모든 것
구성 요소:
1. HTML (뼈대)
┌─────────────────────────────────────────┐
│ <html> │
│ <head> │
│ <title>내 웹사이트</title> │
│ </head> │
│ <body> │
│ <h1>제목</h1> │
│ <p>내용</p> │
│ <button>클릭</button> │
│ </body> │
│ </html> │
└─────────────────────────────────────────┘
역할: 페이지의 구조와 내용 정의
비유: 건물의 철근 뼈대
2. CSS (디자인)
┌─────────────────────────────────────────┐
│ h1 { │
│ color: blue; /* 글자색 */ │
│ font-size: 32px; /* 글자 크기 */ │
│ margin: 20px; /* 여백 */ │
│ } │
│ │
│ button { │
│ background: green; /* 배경색 */ │
│ border-radius: 8px; /* 둥근 모서리 */ │
│ } │
└─────────────────────────────────────────┘
역할: 색상, 크기, 레이아웃, 애니메이션
비유: 건물의 페인트, 인테리어
3. JavaScript (동작)
┌─────────────────────────────────────────┐
│ // 버튼 클릭하면 알림 표시 │
│ button.onclick = function() { │
│ alert('버튼을 클릭했습니다!'); │
│ } │
│ │
│ // 3초 후에 메시지 변경 │
│ setTimeout(() => { │
│ title.textContent = '새로운 제목'; │
│ }, 3000); │
└─────────────────────────────────────────┘
역할: 클릭, 입력, 애니메이션 등 상호작용
비유: 건물의 전기, 엘리베이터, 자동문
프론트엔드 프레임워크 (더 쉽게 개발):
┌────────────┬───────────────────────────────────┐
│ React │ Facebook이 만듦, 가장 인기 │
│ Vue │ 배우기 쉬움, 한국에서 인기 │
│ Angular │ Google이 만듦, 대기업에서 사용 │
│ Svelte │ 가볍고 빠름, 떠오르는 신예 │
│ Next.js │ React 기반, 서버 기능 포함 ⭐ │
└────────────┴───────────────────────────────────┘
🧠 백엔드 = 보이지 않는 곳에서 일하는 모든 것
역할:
1. 데이터 저장/조회/수정/삭제 (CRUD)
2. 로그인/회원가입 처리 (인증)
3. 결제 처리
4. 이메일 발송
5. 파일 업로드
6. 외부 API 연동
구성 요소:
1. 웹 서버
┌─────────────────────────────────────────┐
│ 요청을 받고 응답을 보내는 프로그램 │
│ │
│ - Express (Node.js) - 가장 쉬움 ⭐ │
│ - Fastify (Node.js) - 빠름 │
│ - Hono (Edge Runtime) - 초경량, 빠름 │
│ - Django (Python) - 기능 풍부 │
│ - FastAPI (Python) - 현대적, 빠름 ⭐ │
│ - Spring Boot (Java) - 대기업 │
│ - NestJS (Node.js) - 구조적 │
└─────────────────────────────────────────┘
2. 데이터베이스
┌─────────────────────────────────────────┐
│ 데이터를 영구적으로 저장하는 곳 │
│ │
│ SQL (관계형): │
│ - PostgreSQL - 가장 강력 ⭐ │
│ - MySQL - 가장 많이 사용 │
│ - SQLite - 가벼움, 파일 기반 │
│ │
│ NoSQL (비관계형): │
│ - MongoDB - 유연한 구조 │
│ - Redis - 초고속 캐시 │
│ - Firebase - 실시간 동기화 │
└─────────────────────────────────────────┘
3. API (Application Programming Interface)
┌─────────────────────────────────────────┐
│ 프론트엔드와 백엔드가 대화하는 방법 │
│ │
│ REST API (가장 흔함): │
│ GET /users → 사용자 목록 조회 │
│ POST /users → 새 사용자 생성 │
│ GET /users/123 → 특정 사용자 조회 │
│ PUT /users/123 → 사용자 정보 수정 │
│ DELETE /users/123 → 사용자 삭제 │
│ │
│ GraphQL (유연함): │
│ 필요한 데이터만 정확히 요청 가능 │
└─────────────────────────────────────────┘
📡 API = 프로그램끼리 대화하는 약속된 방법
비유: 레스토랑 메뉴판
손님(프론트엔드)은 메뉴판(API 문서)을 보고
웨이터(API)에게 주문(요청)하고
주방(백엔드)에서 만든 음식(데이터)을 받음
HTTP 메서드 (요청 종류):
┌─────────┬────────────────────────────────────┐
│ GET │ 데이터 조회 (읽기만) │
│ │ "이 상품 정보 보여줘" │
├─────────┼────────────────────────────────────┤
│ POST │ 새 데이터 생성 │
│ │ "새 회원 등록해줘" │
├─────────┼────────────────────────────────────┤
│ PUT │ 데이터 전체 수정 │
│ │ "이 상품 정보 전부 바꿔줘" │
├─────────┼────────────────────────────────────┤
│ PATCH │ 데이터 일부 수정 │
│ │ "이름만 바꿔줘" │
├─────────┼────────────────────────────────────┤
│ DELETE │ 데이터 삭제 │
│ │ "이 댓글 삭제해줘" │
└─────────┴────────────────────────────────────┘
실제 예시:
1. 사용자 목록 조회
요청: GET /api/users
응답:
{
"users": [
{ "id": 1, "name": "김철수", "email": "kim@example.com" },
{ "id": 2, "name": "이영희", "email": "lee@example.com" }
]
}
2. 새 사용자 생성
요청: POST /api/users
보내는 데이터:
{
"name": "박민수",
"email": "park@example.com",
"password": "secure123"
}
응답:
{
"id": 3,
"name": "박민수",
"message": "사용자가 생성되었습니다"
}
상태 코드 (응답 결과):
┌───────┬────────────────────────────────────────┐
│ 200 │ ✅ 성공 (OK) │
│ 201 │ ✅ 생성 성공 (Created) │
│ 400 │ ❌ 잘못된 요청 (Bad Request) │
│ 401 │ ❌ 인증 필요 (Unauthorized) │
│ 403 │ ❌ 권한 없음 (Forbidden) │
│ 404 │ ❌ 찾을 수 없음 (Not Found) │
│ 500 │ ❌ 서버 오류 (Internal Server Error) │
└───────┴────────────────────────────────────────┘
🎯 풀스택 = 프론트엔드 + 백엔드 모두 다루는 것
풀스택 개발자의 역할:
┌─────────────────────────────────────────────────────────────┐
│ │
│ 📱 프론트엔드 │
│ - UI/UX 디자인 구현 │
│ - 사용자 상호작용 │
│ - API 연동 │
│ ↕️ │
│ 🔌 API 계층 │
│ - 요청/응답 처리 │
│ - 데이터 변환 │
│ - 인증/권한 │
│ ↕️ │
│ 💾 백엔드/데이터베이스 │
│ - 비즈니스 로직 │
│ - 데이터 저장 │
│ - 외부 서비스 연동 │
│ ↕️ │
│ 🚀 배포/인프라 │
│ - 서버 설정 │
│ - 도메인 연결 │
│ - 모니터링 │
│ │
└─────────────────────────────────────────────────────────────┘
Next.js가 풀스택에 좋은 이유:
- 하나의 프로젝트에서 프론트+백엔드 모두 작성
- 서버 컴포넌트로 데이터베이스 직접 접근
- API 라우트로 백엔드 API 쉽게 생성
- Vercel로 원클릭 배포
💻 프로그래밍 = 컴퓨터에게 일을 시키기 위해 명령어를 작성하는 것
비유: 레시피 작성
요리 레시피:
1. 물 500ml를 냄비에 넣는다
2. 불을 켜고 끓인다
3. 라면을 넣는다
4. 4분간 기다린다
5. 불을 끈다
프로그래밍:
1. 변수에 값을 저장한다
2. 조건을 확인한다
3. 반복 작업을 수행한다
4. 결과를 화면에 표시한다
5. 프로그램을 종료한다
차이점:
- 레시피: 사람이 이해하고 실행
- 프로그램: 컴퓨터가 이해하고 실행
컴퓨터는 바보다!
- 정확한 명령만 이해함
- 애매한 표현 이해 못함
- 순서대로만 실행함
- 실수하면 에러 발생
📜 JavaScript = 웹에서 가장 많이 쓰이는 프로그래밍 언어
왜 JavaScript?
- 브라우저에서 바로 실행됨
- 프론트엔드 필수
- 백엔드도 가능 (Node.js)
- 배우기 쉬움
- 취업 시장에서 수요 많음
1. 변수 (데이터 저장)
┌─────────────────────────────────────────────────────────────┐
│ // 변수 선언 방법 3가지 │
│ │
│ const name = "김철수"; // 상수 (변경 불가) ⭐ 권장 │
│ let age = 25; // 변수 (변경 가능) │
│ var old = "옛날 방식"; // 오래된 방식 (사용 X) │
│ │
│ // 변수 변경 │
│ age = 26; // let은 변경 가능 │
│ name = "이영희"; // ❌ const는 에러! │
│ │
│ // 데이터 타입 │
│ const text = "문자열"; // String (문자) │
│ const number = 42; // Number (숫자) │
│ const isTrue = true; // Boolean (참/거짓) │
│ const nothing = null; // 의도적 비어있음 │
│ const notDefined = undefined; // 정의되지 않음 │
│ const list = [1, 2, 3]; // Array (배열) │
│ const person = { // Object (객체) │
│ name: "철수", │
│ age: 25 │
│ }; │
└─────────────────────────────────────────────────────────────┘
2. 조건문 (만약 ~라면)
┌─────────────────────────────────────────────────────────────┐
│ const age = 20; │
│ │
│ if (age >= 19) { │
│ console.log("성인입니다"); │
│ } else if (age >= 14) { │
│ console.log("청소년입니다"); │
│ } else { │
│ console.log("어린이입니다"); │
│ } │
│ │
│ // 비교 연산자 │
│ // === 같다 (타입까지 비교, 권장) │
│ // == 같다 (타입 무시) │
│ // !== 다르다 │
│ // > 크다 │
│ // < 작다 │
│ // >= 크거나 같다 │
│ // <= 작거나 같다 │
│ │
│ // 논리 연산자 │
│ // && 그리고 (AND) │
│ // || 또는 (OR) │
│ // ! 아니다 (NOT) │
│ │
│ if (age >= 19 && age < 65) { │
│ console.log("일할 수 있는 나이"); │
│ } │
└─────────────────────────────────────────────────────────────┘
3. 반복문 (여러 번 실행)
┌─────────────────────────────────────────────────────────────┐
│ // for 반복문 │
│ for (let i = 0; i < 5; i++) { │
│ console.log(i); // 0, 1, 2, 3, 4 출력 │
│ } │
│ │
│ // 배열 순회 (for...of) ⭐ 권장 │
│ const fruits = ["사과", "바나나", "오렌지"]; │
│ for (const fruit of fruits) { │
│ console.log(fruit); // 사과, 바나나, 오렌지 │
│ } │
│ │
│ // 배열 메서드 (더 현대적) │
│ fruits.forEach((fruit) => { │
│ console.log(fruit); │
│ }); │
│ │
│ // map (변환) │
│ const upperFruits = fruits.map((fruit) => { │
│ return fruit.toUpperCase(); │
│ }); │
│ // ["사과", "바나나", "오렌지"] (변환 예시) │
│ │
│ // filter (필터링) │
│ const numbers = [1, 2, 3, 4, 5]; │
│ const evenNumbers = numbers.filter((n) => n % 2 === 0); │
│ // [2, 4] │
└─────────────────────────────────────────────────────────────┘
4. 함수 (재사용 가능한 코드 묶음)
┌─────────────────────────────────────────────────────────────┐
│ // 함수 선언 │
│ function greet(name) { │
│ return `안녕하세요, ${name}님!`; │
│ } │
│ │
│ // 함수 호출 │
│ const message = greet("철수"); │
│ console.log(message); // "안녕하세요, 철수님!" │
│ │
│ // 화살표 함수 (현대적 방식) ⭐ │
│ const greet2 = (name) => { │
│ return `안녕하세요, ${name}님!`; │
│ }; │
│ │
│ // 한 줄일 때 더 간단히 │
│ const greet3 = (name) => `안녕하세요, ${name}님!`; │
│ │
│ // 여러 매개변수 │
│ const add = (a, b) => a + b; │
│ console.log(add(3, 5)); // 8 │
│ │
│ // 기본값 설정 │
│ const greet4 = (name = "손님") => `안녕, ${name}!`; │
│ console.log(greet4()); // "안녕, 손님!" │
│ console.log(greet4("영희")); // "안녕, 영희!" │
└─────────────────────────────────────────────────────────────┘
5. 비동기 처리 (기다리기)
┌─────────────────────────────────────────────────────────────┐
│ // 왜 필요한가? │
│ // 서버에서 데이터 가져오는 건 시간이 걸림 │
│ // 기다리는 동안 다른 작업을 할 수 있게 해줌 │
│ │
│ // async/await 방식 (권장) ⭐ │
│ async function fetchUser() { │
│ try { │
│ // 서버에 요청하고 응답 기다리기 │
│ const response = await fetch('/api/user'); │
│ // JSON으로 변환 │
│ const data = await response.json(); │
│ console.log(data); │
│ } catch (error) { │
│ console.error('에러 발생:', error); │
│ } │
│ } │
│ │
│ // 사용 │
│ fetchUser(); │
│ │
│ // Promise 방식 (async/await의 기반) │
│ fetch('/api/user') │
│ .then(response => response.json()) │
│ .then(data => console.log(data)) │
│ .catch(error => console.error(error)); │
└─────────────────────────────────────────────────────────────┘
📘 TypeScript = JavaScript + 타입
왜 TypeScript?
- 에러를 미리 발견
- 자동완성이 더 잘 됨
- 큰 프로젝트에서 필수
- 취업 시 필수 스킬
기본 문법:
┌─────────────────────────────────────────────────────────────┐
│ // 타입 명시 │
│ const name: string = "철수"; │
│ const age: number = 25; │
│ const isStudent: boolean = true; │
│ const hobbies: string[] = ["독서", "운동"]; │
│ │
│ // 객체 타입 │
│ interface User { │
│ id: number; │
│ name: string; │
│ email: string; │
│ age?: number; // ? = 선택적 (없어도 됨) │
│ } │
│ │
│ const user: User = { │
│ id: 1, │
│ name: "철수", │
│ email: "kim@example.com" │
│ // age는 없어도 OK │
│ }; │
│ │
│ // 함수 타입 │
│ function greet(name: string): string { │
│ return `안녕, ${name}!`; │
│ } │
│ │
│ // 화살표 함수 타입 │
│ const add = (a: number, b: number): number => { │
│ return a + b; │
│ }; │
│ │
│ // 유니온 타입 (여러 타입 중 하나) │
│ let value: string | number; │
│ value = "문자열"; // OK │
│ value = 42; // OK │
│ value = true; // ❌ 에러! │
│ │
│ // 제네릭 (타입을 매개변수로) │
│ function first<T>(arr: T[]): T { │
│ return arr[0]; │
│ } │
│ const firstNumber = first([1, 2, 3]); // number │
│ const firstString = first(["a", "b"]); // string │
└─────────────────────────────────────────────────────────────┘
에러 방지 예시:
┌─────────────────────────────────────────────────────────────┐
│ // JavaScript (에러 발견 어려움) │
│ function getUser(id) { │
│ // id가 뭔지 모름... │
│ // 실수로 문자열을 넣을 수도 있음 │
│ } │
│ getUser("abc"); // 실행 시 에러 │
│ │
│ // TypeScript (미리 에러 발견) │
│ function getUser(id: number) { │
│ // id는 반드시 숫자 │
│ } │
│ getUser("abc"); // ❌ 컴파일 에러! (실행 전에 발견) │
└─────────────────────────────────────────────────────────────┘
⌨️ 터미널 = 컴퓨터에게 글로 명령하는 창
왜 필요한가?
- 개발 도구 대부분이 터미널에서 실행
- 클릭보다 빠름
- 자동화 가능
- 서버 관리 시 필수
열기:
- Windows: Win 키 → "cmd" 또는 "PowerShell"
- Mac: Spotlight(Cmd+Space) → "터미널"
- VS Code: Ctrl+` (백틱)
기본 명령어 상세:
┌─────────────────────────────────────────────────────────────┐
│ 📂 폴더 이동 │
│ │
│ cd Documents # Documents 폴더로 이동 │
│ cd my-project # 하위 폴더로 이동 │
│ cd .. # 상위 폴더로 이동 │
│ cd ~ # 홈 폴더로 이동 (Mac/Linux) │
│ cd / # 루트 폴더로 이동 │
│ cd - # 이전 폴더로 이동 │
│ │
│ 예시: │
│ /Users/kim $ # 현재 위치 │
│ /Users/kim $ cd Documents │
│ /Users/kim/Documents $ # 이동됨 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📋 목록 보기 │
│ │
│ ls # 파일 목록 (Mac/Linux) │
│ ls -la # 자세한 목록 (숨김 파일 포함) │
│ dir # 파일 목록 (Windows) │
│ │
│ 출력 예시: │
│ drwxr-xr-x 5 kim staff 160 Jan 4 10:30 my-project │
│ -rw-r--r-- 1 kim staff 1234 Jan 4 10:30 package.json │
│ │ │ │ │
│ └─권한 └─소유자 └─파일명 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📁 폴더 생성/삭제 │
│ │
│ mkdir my-folder # 폴더 생성 │
│ mkdir -p a/b/c # 중첩 폴더 한 번에 생성 │
│ rmdir my-folder # 빈 폴더 삭제 │
│ rm -rf my-folder # 폴더와 내용물 모두 삭제 ⚠️ 주의 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 📄 파일 작업 │
│ │
│ touch file.txt # 빈 파일 생성 │
│ cat file.txt # 파일 내용 보기 │
│ cp file.txt copy.txt # 파일 복사 │
│ mv file.txt new.txt # 파일 이동/이름 변경 │
│ rm file.txt # 파일 삭제 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 🔍 찾기 │
│ │
│ pwd # 현재 위치 표시 │
│ which node # 프로그램 위치 찾기 │
│ find . -name "*.js" # 파일 찾기 (Mac/Linux) │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 🛠️ 기타 유용한 명령어 │
│ │
│ clear # 화면 지우기 │
│ history # 명령어 히스토리 │
│ ↑ / ↓ # 이전/다음 명령어 │
│ Tab # 자동 완성 │
│ Ctrl+C # 현재 작업 중단 │
│ Ctrl+D # 터미널 종료 │
└─────────────────────────────────────────────────────────────┘
🟢 Node.js = JavaScript를 컴퓨터에서 실행하게 해주는 프로그램
원래 JavaScript는 브라우저에서만 실행 가능
Node.js로 컴퓨터에서도 실행 가능
→ 서버 프로그램 작성 가능!
설치:
1. https://nodejs.org 접속
2. LTS 버전 다운로드 (안정적)
- LTS = Long Term Support (오래 지원)
- Current = 최신 기능 (불안정할 수 있음)
3. 설치 파일 실행 → 다음 → 다음 → 완료
확인:
┌─────────────────────────────────────────────────────────────┐
│ $ node --version │
│ v22.12.0 # 버전 표시되면 성공! │
│ │
│ $ npm --version │
│ 10.9.0 # npm도 함께 설치됨 │
└─────────────────────────────────────────────────────────────┘
npm이란?
- Node Package Manager
- 다른 사람이 만든 코드를 쉽게 설치
- 전 세계 개발자가 공유하는 라이브러리 저장소
주요 명령어:
┌─────────────────────────────────────────────────────────────┐
│ npm init # 새 프로젝트 시작 │
│ npm init -y # 기본값으로 빠르게 시작 │
│ │
│ npm install 패키지명 # 패키지 설치 │
│ npm install # package.json의 모든 패키지 설치 │
│ npm install -D 패키지명 # 개발용 패키지 설치 │
│ npm install -g 패키지명 # 전역 설치 │
│ │
│ npm uninstall 패키지명 # 패키지 삭제 │
│ npm update # 패키지 업데이트 │
│ npm outdated # 업데이트 가능한 패키지 확인 │
│ │
│ npm run 스크립트명 # 스크립트 실행 │
│ npm run dev # 개발 서버 실행 │
│ npm run build # 프로덕션 빌드 │
│ npm run start # 프로덕션 실행 │
└─────────────────────────────────────────────────────────────┘
package.json 이해하기:
┌─────────────────────────────────────────────────────────────┐
│ { │
│ "name": "my-saas", // 프로젝트 이름 │
│ "version": "1.0.0", // 버전 │
│ "description": "내 SaaS", // 설명 │
│ │
│ "scripts": { // 실행 스크립트 │
│ "dev": "next dev", // npm run dev │
│ "build": "next build", // npm run build │
│ "start": "next start" // npm run start │
│ }, │
│ │
│ "dependencies": { // 필수 패키지 │
│ "next": "14.0.0", │
│ "react": "18.2.0" │
│ }, │
│ │
│ "devDependencies": { // 개발용 패키지 │
│ "typescript": "5.0.0", │
│ "eslint": "8.0.0" │
│ } │
│ } │
└─────────────────────────────────────────────────────────────┘
💻 VS Code = 가장 인기 있는 무료 코드 에디터
설치:
1. https://code.visualstudio.com 접속
2. 다운로드 & 설치
첫 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. 한글화 │
│ - Ctrl+Shift+X (확장 프로그램) │
│ - "Korean" 검색 │
│ - "Korean Language Pack" 설치 │
│ - VS Code 재시작 │
│ │
│ 2. 테마 변경 │
│ - Ctrl+K → Ctrl+T │
│ - 원하는 테마 선택 │
│ - 추천: "One Dark Pro", "GitHub Dark" │
│ │
│ 3. 글꼴 변경 │
│ - File → Preferences → Settings │
│ - "font" 검색 │
│ - Font Family: 'Fira Code', monospace │
│ - Font Ligatures: 체크 (=> → ≡ 등 합자 표시) │
└─────────────────────────────────────────────────────────────┘
필수 확장 프로그램:
┌─────────────────────────────────────────────────────────────┐
│ 기본: │
│ - Korean Language Pack 한글화 │
│ - Prettier 코드 자동 정리 │
│ - ESLint 코드 오류 검사 │
│ - GitLens Git 히스토리 보기 │
│ │
│ 웹 개발: │
│ - Tailwind CSS IntelliSense Tailwind 자동완성 │
│ - Auto Rename Tag HTML 태그 자동 수정 │
│ - Path Intellisense 파일 경로 자동완성 │
│ - ES7+ React Snippets React 코드 조각 │
│ │
│ 편의: │
│ - Material Icon Theme 파일 아이콘 │
│ - Error Lens 에러 바로 표시 │
│ - Todo Tree TODO 주석 관리 │
│ - Thunder Client API 테스트 │
└─────────────────────────────────────────────────────────────┘
핵심 단축키:
┌─────────────────────────────────────────────────────────────┐
│ 파일: │
│ Ctrl+S 저장 │
│ Ctrl+N 새 파일 │
│ Ctrl+O 파일 열기 │
│ Ctrl+P 파일 검색 (빠른 열기) │
│ Ctrl+Shift+N 새 창 │
│ │
│ 편집: │
│ Ctrl+X 잘라내기 (줄 전체) │
│ Ctrl+C 복사 (줄 전체) │
│ Ctrl+V 붙여넣기 │
│ Ctrl+Z 되돌리기 │
│ Ctrl+Shift+Z 다시 실행 │
│ Ctrl+D 같은 단어 선택 │
│ Ctrl+/ 주석 토글 │
│ Alt+Up/Down 줄 이동 │
│ Ctrl+Shift+K 줄 삭제 │
│ │
│ 검색: │
│ Ctrl+F 찾기 │
│ Ctrl+H 찾아 바꾸기 │
│ Ctrl+Shift+F 전체 파일에서 찾기 │
│ │
│ 보기: │
│ Ctrl+` 터미널 열기/닫기 │
│ Ctrl+B 사이드바 토글 │
│ Ctrl+Shift+E 탐색기 │
│ Ctrl+Shift+X 확장 프로그램 │
│ Ctrl+Shift+G Git │
│ │
│ 멀티 커서: │
│ Alt+클릭 커서 추가 │
│ Ctrl+Alt+Up 위에 커서 추가 │
│ Ctrl+Alt+Down 아래에 커서 추가 │
└─────────────────────────────────────────────────────────────┘
자동 저장 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. File → Preferences → Settings │
│ 2. "auto save" 검색 │
│ 3. Files: Auto Save → "afterDelay" │
│ 4. Files: Auto Save Delay → 1000 (1초) │
└─────────────────────────────────────────────────────────────┘
Prettier 자동 포맷 설정:
┌─────────────────────────────────────────────────────────────┐
│ 1. File → Preferences → Settings │
│ 2. "format on save" 검색 → 체크 │
│ 3. "default formatter" 검색 → Prettier 선택 │
└─────────────────────────────────────────────────────────────┘
🔄 Git = 코드 버전 관리 시스템
왜 필요한가?
┌─────────────────────────────────────────────────────────────┐
│ Git 없이: │
│ - project_최종.zip │
│ - project_최종_진짜최종.zip │
│ - project_최종_진짜최종_수정.zip │
│ - project_최종_진짜최종_수정_real.zip │
│ │
│ Git 사용 시: │
│ - 모든 변경 기록 저장 │
│ - 언제든 이전 상태로 되돌리기 │
│ - 여러 버전 동시 작업 (브랜치) │
│ - 팀원과 협업 │
└─────────────────────────────────────────────────────────────┘
설치:
1. https://git-scm.com 접속
2. 다운로드 & 설치
3. 설치 확인: git --version
초기 설정 (딱 한 번):
┌─────────────────────────────────────────────────────────────┐
│ # 이름 설정 (커밋에 표시됨) │
│ git config --global user.name "내 이름" │
│ │
│ # 이메일 설정 (GitHub 계정과 동일하게) │
│ git config --global user.email "my@email.com" │
│ │
│ # 기본 브랜치 이름 설정 │
│ git config --global init.defaultBranch main │
│ │
│ # 설정 확인 │
│ git config --list │
└─────────────────────────────────────────────────────────────┘
핵심 개념:
┌─────────────────────────────────────────────────────────────┐
│ │
│ 작업 디렉토리 스테이징 영역 로컬 저장소 원격 │
│ (Working) (Staging) (Local Repo) (Remote)│
│ │ │ │ │ │
│ 📄 파일 수정 │ │ │ │
│ │ │ │ │ │
│ └─── git add ───→│ │ │ │
│ │ │ │ │
│ └── git commit ───→│ │ │
│ │ │ │
│ └── git push ──→│ │
│ │ │
│ ←──────────────── git pull ─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Working Directory: 실제 파일들
Staging Area: 커밋 대기 상태
Local Repository: 내 컴퓨터의 Git 저장소
Remote Repository: GitHub 등 원격 저장소
기본 명령어:
┌─────────────────────────────────────────────────────────────┐
│ # 저장소 초기화 (새 프로젝트 시작) │
│ git init │
│ │
│ # 현재 상태 확인 │
│ git status │
│ │
│ # 변경사항 확인 │
│ git diff │
│ │
│ # 스테이징에 추가 │
│ git add 파일명 # 특정 파일 │
│ git add . # 모든 변경 파일 │
│ │
│ # 커밋 (변경사항 저장) │
│ git commit -m "변경 내용 설명" │
│ │
│ # 커밋 히스토리 보기 │
│ git log # 자세히 │
│ git log --oneline # 한 줄씩 │
│ │
│ # 원격 저장소 연결 │
│ git remote add origin https://github.com/username/repo.git │
│ │
│ # 원격에 푸시 (업로드) │
│ git push origin main │
│ git push -u origin main # 첫 푸시 시 (-u 옵션) │
│ │
│ # 원격에서 풀 (다운로드) │
│ git pull origin main │
│ │
│ # 저장소 복제 │
│ git clone https://github.com/username/repo.git │
└─────────────────────────────────────────────────────────────┘
브랜치 (가지):
┌─────────────────────────────────────────────────────────────┐
│ 브랜치 = 독립적인 작업 공간 │
│ │
│ main ─────●─────●─────●──────────────●───── │
│ ╲ ╱ │
│ feature ●────●────● │
│ (새 기능 작업) │
│ │
│ # 브랜치 목록 │
│ git branch │
│ │
│ # 새 브랜치 생성 │
│ git branch feature-login │
│ │
│ # 브랜치 이동 │
│ git checkout feature-login │
│ git switch feature-login # 최신 방식 │
│ │
│ # 생성 + 이동 한 번에 │
│ git checkout -b feature-login │
│ git switch -c feature-login # 최신 방식 │
│ │
│ # 브랜치 병합 (main에서 실행) │
│ git checkout main │
│ git merge feature-login │
│ │
│ # 브랜치 삭제 │
│ git branch -d feature-login │
└─────────────────────────────────────────────────────────────┘
실수 복구:
┌─────────────────────────────────────────────────────────────┐
│ # 마지막 커밋 취소 (변경사항 유지) │
│ git reset --soft HEAD~1 │
│ │
│ # 마지막 커밋 취소 (변경사항 삭제) │
│ git reset --hard HEAD~1 │
│ │
│ # 특정 파일 되돌리기 │
│ git checkout -- 파일명 │
│ │
│ # 모든 변경사항 버리기 │
│ git checkout . │
│ │
│ # 스테이징 취소 │
│ git reset HEAD 파일명 │
│ git reset HEAD # 모든 파일 │
└─────────────────────────────────────────────────────────────┘
.gitignore 파일:
┌─────────────────────────────────────────────────────────────┐
│ # .gitignore - Git에서 추적하지 않을 파일 목록 │
│ │
│ # 의존성 │
│ node_modules/ │
│ │
│ # 빌드 결과물 │
│ .next/ │
│ dist/ │
│ build/ │
│ │
│ # 환경 변수 (비밀 정보!) │
│ .env │
│ .env.local │
│ .env*.local │
│ │
│ # OS 파일 │
│ .DS_Store │
│ Thumbs.db │
│ │
│ # IDE │
│ .idea/ │
│ .vscode/ │
│ │
│ # 로그 │
│ *.log │
│ npm-debug.log* │
└─────────────────────────────────────────────────────────────┘
[기존 내용 유지하면서 더 상세하게...]
🚀 Next.js = React 기반 풀스택 프레임워크
왜 Next.js?
- 프론트엔드 + 백엔드 한 번에
- 파일 기반 라우팅 (폴더 = URL)
- 서버 사이드 렌더링 (SEO 좋음)
- 자동 코드 분할 (빠른 로딩)
- Vercel과 완벽 호환
프로젝트 생성 (상세):
┌─────────────────────────────────────────────────────────────┐
│ # 1. 터미널 열기 │
│ │
│ # 2. 원하는 폴더로 이동 │
│ cd Documents │
│ │
│ # 3. 프로젝트 생성 │
│ npx create-next-app@latest my-saas │
│ │
│ # 4. 질문에 답하기 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ✔ Would you like to use TypeScript? → Yes │ │
│ │ (타입 안전성, 에러 방지) │ │
│ │ │ │
│ │ ✔ Would you like to use ESLint? → Yes │ │
│ │ (코드 오류 검사) │ │
│ │ │ │
│ │ ✔ Would you like to use Tailwind CSS? → Yes │ │
│ │ (CSS 쉽게 작성) │ │
│ │ │ │
│ │ ✔ Would you like to use `src/` directory? → Yes │ │
│ │ (깔끔한 폴더 구조) │ │
│ │ │ │
│ │ ✔ Would you like to use App Router? → Yes │ │
│ │ (최신 라우팅 방식) │ │
│ │ │ │
│ │ ✔ Would you like to customize import alias? → No │ │
│ │ (기본값 @/* 사용) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ # 5. 프로젝트 폴더로 이동 │
│ cd my-saas │
│ │
│ # 6. VS Code로 열기 │
│ code . │
│ │
│ # 7. 개발 서버 실행 │
│ npm run dev │
│ │
│ # 8. 브라우저에서 확인 │
│ http://localhost:3000 │
└─────────────────────────────────────────────────────────────┘
[이하 생략 - 너무 길어서 계속됩니다...]
🤖 AI API = AI 모델을 API로 호출하는 것
과거:
- 직접 AI 모델 학습 (수개월~수년)
- 비싼 GPU 서버 필요 (수억원)
- 전문 지식 필요 (박사급)
현재:
- API 호출 한 번으로 AI 사용
- 사용한 만큼만 비용 지불
- 코드 몇 줄이면 끝!
어떻게 동작하나?
┌─────────────────────────────────────────────────────────────┐
│ │
│ 👤 사용자 입력 │
│ "오늘 날씨 어때?" │
│ │ │
│ ↓ │
│ 💻 당신의 SaaS 서버 │
│ API 키로 OpenAI/Claude에 요청 │
│ │ │
│ ↓ │
│ 🌐 AI 회사 서버 (OpenAI, Anthropic 등) │
│ 거대한 GPU로 AI 모델 실행 │
│ │ │
│ ↓ │
│ 📤 응답 반환 │
│ "오늘은 맑고 따뜻한 날씨입니다..." │
│ │ │
│ ↓ │
│ 👤 사용자에게 표시 │
│ │
└─────────────────────────────────────────────────────────────┘
// 1. 패키지 설치
// npm install openai
// 2. API 키 설정 (.env.local)
// OPENAI_API_KEY=sk-...
// 3. 코드 작성
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
// 기본 대화
async function chat(message: string) {
const response = await openai.chat.completions.create({
model: "gpt-4o", // 또는 "o3-mini", "gpt-4.1"
messages: [
{ role: "system", content: "친절한 AI 어시스턴트입니다." },
{ role: "user", content: message }
],
temperature: 0.7, // 창의성 (0~2, 높을수록 창의적)
max_tokens: 1000, // 최대 응답 길이
});
return response.choices[0].message.content;
}
// 사용
const answer = await chat();
.(answer);
// 1. 패키지 설치
// npm install @anthropic-ai/sdk
// 2. API 키 설정 (.env.local)
// ANTHROPIC_API_KEY=sk-ant-...
// 3. 코드 작성
import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY,
});
async function chat(message: string) {
const response = await anthropic.messages.create({
model: "claude-sonnet-4-20250514", // 또는 "claude-opus-4-20250514"
max_tokens: 1024,
system: "친절한 AI 어시스턴트입니다.",
messages: [
{ role: "user", content: message }
],
});
// Claude는 응답 구조가 조금 다름
return response.content[0].type === 'text'
? response.content[0].text
: '';
}
// 여러 AI를 쉽게 통합!
// 1. 패키지 설치
// npm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google
// 2. 스트리밍 응답 (실시간으로 글자가 나타남)
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openai('gpt-4o'),
messages,
});
return result.toDataStreamResponse();
}
// 3. 프론트엔드에서 사용
import { useChat } from 'ai/react';
function ChatComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>
{m.role}: {m.content}
</div>
))}
<form onSubmit={handleSubmit}>
전송
);
}
🔴 자주 발생하는 에러와 해결법
1. "Module not found" 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 패키지가 설치되지 않음 │
│ │
│ 해결: │
│ npm install # 모든 패키지 재설치 │
│ npm install 패키지명 # 특정 패키지 설치 │
│ │
│ 그래도 안 되면: │
│ rm -rf node_modules # 폴더 삭제 │
│ rm package-lock.json # 락 파일 삭제 │
│ npm install # 재설치 │
└─────────────────────────────────────────────────────────────┘
2. "Port 3000 is already in use" 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 다른 프로그램이 3000번 포트 사용 중 │
│ │
│ 해결: │
│ # Mac/Linux │
│ lsof -i :3000 # 사용 중인 프로세스 찾기 │
│ kill -9 PID번호 # 프로세스 종료 │
│ │
│ # Windows │
│ netstat -ano | findstr :3000 # 사용 중인 프로세스 찾기 │
│ taskkill /PID 번호 /F # 프로세스 종료 │
│ │
│ # 또는 다른 포트 사용 │
│ npm run dev -- -p 3001 │
└─────────────────────────────────────────────────────────────┘
3. TypeScript 에러
┌─────────────────────────────────────────────────────────────┐
│ 원인: 타입이 맞지 않음 │
│ │
│ 자주 보는 에러: │
│ "Type 'string' is not assignable to type 'number'" │
│ → 문자열을 숫자 자리에 넣으려 함 │
│ │
│ "Property 'xxx' does not exist on type 'yyy'" │
│ → 없는 속성에 접근하려 함 │
│ │
│ "Object is possibly 'undefined'" │
│ → 값이 없을 수 있음 (옵셔널 체이닝 사용) │
│ user?.name # user가 있을 때만 name 접근 │
│ user?.profile?.image # 중첩도 가능 │
└─────────────────────────────────────────────────────────────┘
4. CORS 에러
┌─────────────────────────────────────────────────────────────┐
│ "Access to fetch has been blocked by CORS policy" │
│ │
│ 원인: 다른 도메인의 API를 호출할 때 발생 │
│ │
│ 해결: │
│ 1. 백엔드에서 CORS 허용 설정 │
│ 2. API Route를 통해 호출 (Next.js) │
│ 3. 프록시 설정 │
└─────────────────────────────────────────────────────────────┘
5. 환경 변수 에러
┌─────────────────────────────────────────────────────────────┐
│ "NEXT_PUBLIC_XXX is undefined" │
│ │
│ 원인: │
│ - .env.local 파일이 없음 │
│ - 변수명이 다름 │
│ - 서버 재시작 필요 │
│ │
│ 해결: │
│ 1. .env.local 파일 확인 │
│ 2. NEXT_PUBLIC_ 접두사 확인 (프론트엔드용) │
│ 3. npm run dev 재시작 │
└─────────────────────────────────────────────────────────────┘
🎉 축하합니다! 이제 SaaS 개발의 기초를 이해했습니다.
배운 것들:
✅ 인터넷과 웹의 동작 원리
✅ SaaS 비즈니스 모델
✅ 프론트엔드, 백엔드, API 구조
✅ JavaScript/TypeScript 기초
✅ 터미널, Node.js, VS Code, Git 사용법
✅ Next.js 프로젝트 생성
✅ 데이터베이스, 로그인, 결제 이해
✅ AI 기능 추가
✅ 배포와 운영
다음 단계:
1. 직접 간단한 프로젝트 만들어보기
2. 공식 문서 읽어보기
3. 다른 사람 코드 분석해보기
4. 커뮤니티 참여하기
KreatSaaS가 도와드립니다!
/kreatsaas 명령어로 시작하세요.