⚡ AI 인텔리전스 레이더
🚀 중급반 · 나만의 자동화 봇 & 앱 서비스 런칭

💻 파트 4 · 나만의 서비스 만들기

7회차 · Claude Code 입문 — 앱으로 시작해 직접 만들기

글 백두산 (Doosan Baek) · 게시 2026-06-13 · 최종 수정 2026-07-10

이 회차에서 배우는 것

🚪 어디서 쓰지CLI · 데스크탑 앱 두 입구 (CLI는 기본 터미널·tmux·cmux 중 선택)
💻 터미널 기초두려움 깨기 + 자주 쓰는 10개 명령
📦 설치·로그인Node.js → Claude Code → Anthropic 계정
🗣️ 첫 앱말로 설명해 To-do 웹앱 뼈대 만들기
🖥️ 로컬 실행·수정브라우저 확인 + 자연어로 즉시 수정
🧠 워크플로 감각계획·승인·수정·커밋의 리듬 잡기
⚙️ 슬래시 명령·CLAUDE.md/clear · /init 등 핵심 + 프로젝트 영구 지침
🔌 IDE·MCP·확장VS Code/Cursor 통합과 MCP 도구 추가
🔐 권한 다루기확인 프롬프트를 위험도에 맞춰 단계별로 풀기
💻 CLI 경로터미널 기초 + 같은 앱을 터미널로 (심화)

파트 4의 시작 — '나만의 앱'을 직접 만듭니다. Claude Code는 앱이나 터미널에서 자연어로 코드를 작성·수정하는 도구로, 코딩을 몰라도 '말로 시켜서' 앱을 만들 수 있습니다. 이번 회차의 진짜 목표는 '코드를 받는 법'이 아니라 '계획 → 승인 → 수정 → 저장의 리듬'을 익히는 것 — 이 리듬이 8~10회차의 진짜 서비스로 이어집니다.

🚪 Claude Code 시작하기 — 두 입구: CLI · 데스크탑 앱

본격 실습 전에 '어디서 켤지'부터 정합시다. Claude Code는 같은 두뇌(Anthropic 모델 + 에이전트 엔진)를 여러 방식으로 쓸 수 있는데, 2026년 4월 데스크탑 앱이 '병렬 에이전트 작업 환경'으로 새로 단장되면서 입구가 또렷해졌습니다. 크게 보면 입구는 둘 — CLI(터미널)와 데스크탑 앱입니다. 일반적인 웹서비스를 만드는 데는 데스크탑 앱이면 충분하니, 비개발자는 앱으로 시작하는 걸 추천합니다. 터미널(CLI)은 자동화·CI나 '여러 에이전트 병렬' 같은 심화로 갈 때 진가를 발휘하고, 이때 '어떤 터미널에서 돌릴지'(기본 터미널·tmux·cmux 등)를 한 번 더 고를 수 있어요.

🖥️ 터미널 선택지 — CLI를 '어디서' 돌릴까 (심화·선택)

CLI를 고르면 질문이 하나 더 열립니다 — '어떤 터미널에서 claude를 돌릴까'. 먼저 핵심부터: 무엇을 고르든 그 안에서 도는 건 똑같은 claude CLI예요. 터미널은 그 CLI를 '담는 그릇'일 뿐이라, 아래 선택지는 모두 '같은 claude를 어디에 담느냐'의 차이입니다. 기본 터미널로도 충분하지만, '여러 에이전트를 병렬로 굴리고 싶다'면 멀티플렉서나 전용 터미널이 답이 됩니다.

  1. 가장 쉬운 길 — 기본 터미널에서 그냥 'claude' (7회차 설치 흐름 그대로). 여기서 출발하세요.
  2. 병렬이 필요해지면 tmux: 'brew install tmux' → 'tmux' 실행 → 기본 접두키 Ctrl+b 다음에 % (세로 분할)·큰따옴표(가로 분할)·c (새 창). 각 패널에서 'claude'를 따로 띄웁니다.
  3. 전용 도구를 원하면 cmux: 'brew install --cask cmux' 또는 cmux.com에서 .dmg → 탭마다 claude·codex·gemini를 띄워 같은 폴더에서 비교, split(⌘D)으로 나란히.
  4. 어느 길이든 인증·사용량은 동일(같은 Anthropic 계정) — 터미널만 바뀔 뿐 claude 자체는 그대로입니다.

🪟 앱으로 시작하기 (터미널 없이 — 추천 경로)

데스크탑 앱으로 시작하면 설치·첫 앱·실행까지 클릭과 자연어만으로 가능합니다. 터미널(CLI)로 직접 하는 방법은 8회차 후반 'CLI 심화'에서 따로 다루니, 앱 사용자는 명령을 외울 필요 없이 '말로' 시키면 됩니다. (터미널이 이미 익숙하면 8회차 후반 CLI 심화부터 봐도 됩니다.)

  1. claude.ai/download 에서 데스크탑 앱 설치(Mac/Windows) → Anthropic 계정으로 로그인
  2. 새 프로젝트(폴더) 선택 또는 생성 — mkdir·cd 같은 명령 불필요
  3. 채팅창에 자연어로 첫 앱 요청 — 아래 '첫 앱 만들기'의 프롬프트를 그대로 붙여넣어도 됨
  4. 내장 미리보기 패널에서 결과 즉시 확인 (브라우저로 따로 열 필요 없음)
  5. '추가 버튼 크게', '완료 항목 흐리게'처럼 말로 수정 → 미리보기 자동 갱신
  6. 빌드·실행에 필요한 명령은 앱의 통합 터미널이 알아서 실행

🧰 Claude Code 앱 완전 정복 (2026.4)

'앱으로 시작하기'가 빠른 출발이었다면, 여기서는 앱의 핵심 기능을 화면 기준으로 하나씩 익힙니다. 2026년 4월 리디자인으로 앱은 '여러 작업을 동시에 굴리는 작업대'가 됐어요. 채팅·diff·미리보기·터미널 패널은 모두 드래그·드롭으로 원하는 격자 배치로 둘 수 있습니다.

Claude Code 앱 — 드래그·드롭 패널 배치세션(병렬)세션 A · 로그인세션 B · 버그수정+ 새 세션각 세션 = Gitworktree 격리💬 채팅우선순위 기능 추가해줘완료 — 오른쪽 diff·미리보기에서 확인하세요🔍 diff 뷰어+ priority: high- old line+ sort by priority👁️ 미리보기 (localhost)☑ 우유 사기☐ 보고서 (높음)⌨️ 통합 터미널$ npm run devready on :5173💬 사이드 챗 (Cmd+;) — 곁가지 질문메인 작업 컨텍스트 안 건드림
그림 · 사이드바(병렬 세션) + 채팅 + diff 뷰어 + 미리보기 + 통합 터미널 + 사이드 챗

🗂️ 병렬 세션 — 사이드바 + Git worktree

왼쪽 사이드바에서 작업(세션)을 여러 개 만들어 동시에 굴립니다. 각 세션은 Git worktree로 격리된 프로젝트 사본을 가져, 한 세션의 변경이 다른 세션에 영향을 주지 않습니다(머지 전까지).

  1. 사이드바에서 '+ 새 세션'으로 작업 추가 (예: 세션A=로그인 기능, 세션B=버그 수정)
  2. 각 세션은 같은 레포의 독립 worktree에서 동작 — 서로 안 섞임
  3. 세션 사이를 클릭으로 전환하며 병렬 진행
  4. 마음에 들면 각 세션의 변경을 커밋·머지

🔍 diff 뷰어 — 큰 변경도 한눈에 검토

Claude가 무엇을 바꿨는지 색으로 표시(추가=초록, 삭제=빨강). 대규모 변경도 빠르게 검토하도록 새로 만들어졌습니다.

  1. Claude가 파일을 수정하면 diff 뷰어 패널에 변경분이 뜸
  2. 추가/삭제 줄을 확인 → 의도와 맞는지 검토
  3. 맞으면 승인(커밋), 아니면 '이 부분 되돌려'로 수정 요청

👁️ 미리보기 패널 — HTML·PDF·로컬 서버

브라우저를 따로 열 필요 없이 앱 안에서 결과를 봅니다. HTML·PDF를 바로 열고, 로컬 개발 서버(localhost)도 패널 안에서 띄웁니다.

  1. 만든 index.html → 미리보기 패널에 바로 표시
  2. '개발 서버 띄워줘'(npm run dev 등) → 패널 안에서 실행 결과 확인
  3. 코드 수정 → 패널이 새로고침으로 갱신
  4. PDF·문서 결과물도 같은 패널에서 확인

⌨️ 통합 터미널 + 패널 배치

💬 사이드 챗 (Cmd+;) — 본 작업 안 건드리고 곁가지 질문

긴 작업이 도는 중 '이거 잠깐 물어볼게'를 메인 대화에 끼어들지 않게. 메인 스레드에 추가 컨텍스트를 섞지 않고 곁에서 묻습니다.

  1. 작업 실행 중 Cmd+; 로 사이드 챗 열기
  2. 메인과 분리된 곳에서 질문 — 메인 스레드 컨텍스트 오염 없음
  3. 답 확인 후 메인 작업으로 복귀

🗣️ 첫 앱 만들기 — To-do 웹앱 (앱으로)

전형적인 첫 앱. 코드 한 줄도 안 쳐도 됩니다. 이 과정에서 '계획 → 승인 → 수정' 리듬을 직접 경험합니다.

  1. 앱에서 새 세션 만들기 — 작업할 빈 폴더 선택 (예: my-todo)
  2. 채팅창에 자연어로 첫 요청 — 아래 프롬프트 그대로
  3. Claude가 만들 파일을 미리 설명 → 'Accept'로 승인
  4. diff 뷰어에서 생성된 코드 확인
간단한 To-do 웹앱 만들어줘.
- HTML 한 파일에 CSS·JS 인라인
- 기능: 추가 / 완료 토글 / 삭제
- 저장은 localStorage (새로고침해도 유지)
- 디자인: 미니멀 다크, 폰트는 system
- 모바일에서도 잘 보이게 반응형

먼저 어떻게 만들지 계획 알려주고, 내가 OK 하면 코드 작성해줘.

🖥️ 로컬에서 실행 & 수정 (미리보기 패널)

  1. 미리보기 패널 열기 — 앱이 로컬 서버를 띄워 결과를 바로 보여줌
  2. 화면에서 마음에 안 드는 부분 메모
  3. 채팅창에 자연어로 수정 요청 — '추가 버튼이 더 컸으면', '완료된 항목은 흐리게'
  4. 패널에서 즉시 반영 확인 — 마음에 들 때까지 반복 (한 번에 한두 가지만)

🧩 MCP·플러그인·SSH — 앱의 능력 확장 (이제 CLI와 동등)

MCP(Model Context Protocol)는 Claude에 외부 도구를 붙이는 표준 — 한 번 연결하면 '내 노션', '내 시트'에 Claude가 직접 접근합니다. 2026.4 리뉴얼로 앱이 CLI와 동등하게 플러그인·MCP·SSH까지 지원해요.

🧩 스킬 & 플러그인 — 나만의 Claude Code 만들기

MCP가 '외부 도구를 연결'하는 거라면, 스킬·플러그인은 'Claude가 일하는 방식 자체를 내 식대로 굳혀두는 것'입니다. 같은 작업을 매번 길게 설명하지 않아도 되게 만들어요.

  1. /plugin 입력 → 마켓플레이스에서 원하는 플러그인 설치 (안의 스킬·명령이 한꺼번에 추가, /플러그인이름:스킬 형태로 호출)
  2. 자주 반복하는 내 작업이 있으면 → .claude/skills/ 에 SKILL.md 한 개 만들어 '나만의 스킬'로
  3. 그 스킬이 쓸 만하면 → 플러그인으로 묶어 팀·동료에게 배포

🧩 (심화) 서브에이전트 & 훅 — 플러그인 속 두 부품

앞에서 플러그인이 묶는다고 한 '서브에이전트'와 '훅'이 뭔지 한 번만 짚고 갑니다. 비개발자는 '이런 게 있구나' 정도면 충분해요.

🧠 워크플로 감각 — 잘 되는 패턴

같은 도구를 써도 결과가 다른 건 '리듬' 차이. 다음 패턴을 익히세요.

⚙️ 슬래시 명령 — 자주 쓰는 것만 (앱·CLI 공통)

입력창에 '/' 를 치면 명령 메뉴가 뜹니다 — 앱·CLI 모두. 아래는 앱 채팅창에서도 그대로 되는 핵심.

📜 CLAUDE.md — 프로젝트에 영구 지침 주기

매번 'React 쓰지 마', '한국어로 답해'를 반복하긴 번거롭습니다. 프로젝트 루트에 CLAUDE.md를 두면 Claude가 매 세션 시작 시 자동으로 읽습니다.

# 이 프로젝트 규칙
- 언어: 한국어로 답변
- 스타일: Vanilla JS + HTML 한 파일 구조
- 디자인: 미니멀 다크, system 폰트
- 코드 주석은 최소화
- 새 라이브러리 추가 전 반드시 물어볼 것
- 모든 데이터는 localStorage, 외부 API 호출은 명시적 허가 후

🔒 권한 모드 & 보안

Claude Code는 파일을 고치고 터미널 명령을 실행하는 권한이 강력합니다. 그래서 평소엔 '얼마나 자주 멈춰서 물어볼지'를 터미널(CLI)에서 Shift+Tab 키 하나로 조절합니다 — 누를 때마다 아래 세 모드를 차례로 돕니다(상태 표시줄에 현재 모드가 떠요). 데스크톱 앱·웹(GUI)에는 Shift+Tab이 없으니, 상단 '권한 모드 드롭다운'에서 고르세요(맥 Cmd+Shift+M / 윈도우 Ctrl+Shift+M).

여기까지가 '안전한 범위'입니다(터미널은 Shift+Tab으로 순환, GUI는 위 드롭다운으로 전환). 모드와 별개로, 보안의 기본기는 꼭 챙기세요 — 이게 돼 있어야 뒤의 자동화도 마음 놓고 씁니다.

⚡ 권한 프롬프트 줄이기 — 안전하게 단계별로 (터미널 기준)

아래 단계는 터미널(CLI) 기준입니다 — 데스크톱 앱·웹(GUI) 사용자는 뒤의 '앱으로 시작' 슬라이드를 참고하세요. 앞의 모드 선택이 '어떤 방식으로 일할지'를 고르는 다이얼이라면, 여기서는 한 발 더 나아가 '확인 자체를 어디까지 생략할지'를 정합니다. 실습을 하다 보면 grep·ls 같은 안전한 명령까지 매번 '허용하시겠습니까?'를 물어 흐름이 끊기거든요. 무작정 전부 끄지 말고, 위험도에 맞춰 아래 순서로 한 칸씩 푸는 게 정석입니다 — 내려갈수록 편하지만 그만큼 위험해집니다.

// .claude/settings.local.json — 안전한 읽기 명령만 자동 허용 (2단계 · 권장)
{
  "permissions": {
    "allow": [
      "Bash(grep:*)",
      "Bash(ls:*)",
      "Bash(cat:*)"
    ]
  }
}

🐛 막힐 때 — 30초 대응

에러가 나면 메시지를 그대로 복사해 Claude에 붙여넣고 '고쳐줘'. 꼬이면 '/clear' 후 다시 한 줄로 명확히, 또는 직전 커밋으로 되돌리기. 재현·콘솔·수정·재테스트로 이어지는 '5단계 디버깅 워크플로'는 8회차에서 본격적으로 다룹니다.

📌 7회차 핵심