도착하셨다면

QR을 찍고 두 가지를 입력해 주세요.

• 오늘의 컨디션 체크
• AI-native 레벨 셀프 진단

강의 시작 전까지 모두 완료해 주세요.

2

강사 소개

Quiet Operators Lab 운영

quietoperatorslab.com

4

과정 소개 — 4주 흐름

W1 Foundation → W2 Tooling → W3 Orchestration → W4 Demo

quietoperatorslab.com

5

운영 방식

• 수업 + 과제
• AI-native transformation
• 4주차에 본인이 깎은 업무 자동화 발표

6

1:1 Office Hour (온라인)

본인 업무 자동화를 직접 돕는 시간.

• 막힌 지점 풀기
• 지시서 다듬기
• agent · skill 설계 상담

7

오늘의 학습 목표 3가지

1. Claude Code 주요 명령어와 agent / skill / CLAUDE.md를 다룰 수 있다
2. AI-native — 문서 작업 없이 AI로만 문서 작성을 마무리한다
3. GitHub에 올릴 수 있다

8

왜 배우는가?

AI agent 시대.

• 1인이 처리하는 분량이 팀 단위로 확장됩니다
• "할 줄 모르는 일"이 거의 사라집니다 — 디자인 / 코드 / 분석 / 글쓰기 모두 일단 시도해 봅니다
• 반복 업무가 agent 1개로 응축되고, 본인은 검수와 결정에 집중합니다
• 새 일을 시작할 때의 진입 장벽이 무너집니다 — AI가 첫 막을 깨 줍니다
• 도구를 배우는 게 아니라, 도구와 함께 일하는 새로운 사고 방식을 배웁니다

9

AI-native transition을 시작하면 찾아오는 변화 5가지

1. 비동기로 일이 굴러간다 — 자기 전·출근 전에 AI를 돌려두고, 아침에 결과를 확인·평가한다
2. 멀티태스킹 부하가 사람에게 옮겨온다 — 여러 에이전트가 동시에 돌며 머리가 아파온다
3. 시간은 줄지 않는다, 분량이 늘어난다 — 같은 8시간에 처리하는 양이 몇 배가 된다
4. 손보다 지시가 길어진다 — 직접 만드는 시간보다 context / 지시서를 정리하는 시간이 더 길어진다
5. 역할이 이동한다 — "만드는 사람"에서 "평가하고 결정하는 사람"으로

10

직군별 적용 시나리오 (한 줄씩)

• 직장인
• 인사
• 마케터
• 디자이너
• 자영업
• 예비창업가
• 학생

11

AI 환경 설정

• Claude Code + VS Code 동작 체크
• 사전 과제 claude-setup 점검
• GitHub 가입 + gh cli auth login

13

VS Code Cockpit — 4공간

VS Code는 코딩 화면이 아니라 작업 조종석.

Claude Code가 파일을 바꾸고, 터미널이 실행하고, Git이 기록하고, Preview가 결과를 보여준다.

• Explorer — 파일과 폴더를 보는 공간
• Terminal — 명령을 실행하는 공간
• Source Control — 변경 이력을 보는 공간
• Preview / Browser — 산출물을 확인하는 공간

14

실습 — Cockpit 첫 동작

1. Week1_first_folder 폴더를 만든다
2. VS Code에서 해당 폴더를 연다
3. Claude Code에게 현재 어떤 폴더에 있는지 물어본다
4. VS Code extension 무엇이 설치되어 있는지 물어본다
5. md 파일로 정리해 달라고 한다

15

AI Native — Word / PPT / HWP를 안 쓰는 이유

AI가 다루지 못하기 때문.

사람이 만든 도구가 아니라, AI가 잘 다루는 포맷에서 시작합니다.

17

실습 — Markdown

마크다운으로 직접 문서를 만들어 봅니다.

1. Claude Code에 "마크다운 사용 tutorial을 markdown으로 작성해줘" 요청
2. VS Code preview(Ctrl/Cmd + Shift + V)로 렌더 확인
3. 제목 / 리스트 / 코드 블록 / 표 / 링크가 모두 포함됐는지 검수
4. 본인 업무 메모 1건을 같은 형식으로 다시 요청

19

실습 — Mermaid

텍스트로 도식을 그려 png로 받아 봅니다.

1. "오늘 배운 6단계 프레임워크를 mermaid flowchart로 그려줘"
2. VS Code Mermaid extension preview로 확인
3. "이 도식을 png로 저장해줘"
4. Explorer에서 같은 폴더에 .png가 생겼는지 확인

21

Markmap extension

mermaid mindmap을 그립니다.

텍스트 트리 → 한 번에 펼쳐지는 마인드맵.

22

실습 — Markmap

텍스트 트리 한 장을 마인드맵으로 펼쳐 봅니다.

1. VS Code에 markmap-vscode extension 설치
2. "오늘 수업 내용을 markmap용 mindmap.md로 정리해줘" 요청 (h1 / h2 / h3 트리)
3. 편집기 우상단 Open as Markmap 버튼으로 펼치기
4. 가지를 클릭해 접고 펴 보기 — 빠진 영역이 한눈에 들어옵니다
5. 본인 직무 / 업무 흐름을 한 장으로 정리해 보기

23

Web vs Desktop App vs Claude Code

결정적 차이 — 사람이 복붙하는 단계가 사라집니다.

Web/Desktop은 "AI가 답을 주면 내가 옮긴다", Claude Code는 "AI가 직접 파일을 바꾸고, 실행하고, 결과를 확인한다". 이 한 칸이 30분을 5분으로 줄입니다.

26

실습 — 같은 요청을 세 곳에서

예시 요청 — "내 직무를 한 문단으로 소개해줘 + 한계도 1줄로"

1. Claude Web에 동일 요청
2. Claude Desktop App에 동일 요청
3. Claude Code(터미널)에 동일 요청
4. 응답 길이 / 톤 / 파일 다루기 가능 여부를 비교

27

Claude Code 주요 명령어

전체 리스트 → 자주 쓰는 5개로 좁히기.

/ · /rewind · /clear · /context · /usage · /config · /mcp · /skills · pressing esc

28

기본 작업 방식

1. 프로젝트 폴더 만들기
2. VS Code에서 열기
3. AI와 초안부터 시작하기

31

에이전틱 프레임워크 6단계

구체화(브레인스톰/할일) → context 정리 → plan → 실행 → 평가 → iteration

32

Plan 먼저 받는 습관

실행 전에 묻습니다.

"어떻게 만들지 plan부터 보여줘"

한 줄로 부족할 땐 — 맥락 / 원하는 plan 항목 / 멈출 지점을 같이 적습니다.

이 폴더에 1페이지 프로필 사이트(index.html)를 만들려고 해.
design.md를 참고해.

먼저 plan부터 보여줘:
- 어떤 섹션을 어떤 순서로 둘지
- 만들거나 수정할 파일 목록
- 내가 결정해야 할 옵션이 있으면 따로 정리

OK 하기 전엔 코드 쓰지 마.

plan을 검토하고 수정한 뒤에 실행합니다.

33

실습 — 명함 agent를 직접 만들어 봅시다

본인 정보를 넣으면 1페이지 HTML 명함을 만들어주는 agent.

1. Claude Code에 "명함 agent를 만들어줘" 요청 (agent 파일 생성 시작)
2. 역할 정의 — "본인 정보를 받아 1페이지 HTML 명함을 만든다"
3. 입력 명세 — 이름 / 직무 / 한 줄 소개 / 연락 수단 / 컬러 톤
4. 출력 명세 — 단일 .html 파일, 같은 폴더에 저장
5. 본인 정보로 한 번 호출해 결과를 브라우저에서 열어보기
6. 마음에 안 드는 1~2가지를 agent 정의에 다시 반영

35

agent — 어디에 두고, 어떤 형식으로 쓰는가

• 프로젝트 전용 — .claude/agents/<name>.md (해당 프로젝트에서만 호출)
• 전역 — ~/.claude/agents/<name>.md (모든 프로젝트 공통)

.md 한 장 = agent 한 개. 파일을 만든 순간 바로 호출 가능합니다.

---
name: business-card
description: 본인 정보를 받아 1페이지 HTML 명함을 만든다.
             메인 모델이 description을 보고 호출 여부를 판단.
tools: Read, Write
---

당신은 명함 디자이너입니다.
- 입력: 이름 / 직무 / 한 줄 소개 / 연락 수단 / 컬러 톤
- 출력: 단일 .html 파일, 같은 폴더에 저장
- 톤: 미니멀, 그리드 정렬

36

실습 — playwriter skill 사용

기존 skill을 가져와 본인 Chrome을 자동화해 봅니다.

1. Claude Code에 "https://github.com/remorses/playwriter 주고 skill 설치해줘" 요청
2. 안내에 따라 Chrome extension(Playwriter) 설치 + 본인 Chrome이 연결됐는지 확인
3. "reddit.com 열어서 지금 trending 하는 뉴스 5개 확인해줘" 요청
4. "각 글의 화면을 스크린샷으로 저장해줘" 요청
5. "제목 / 요약 / 스크린샷 경로를 trending.md로 정리해줘" 요청

37

바이브 코딩 한 사이클 — 따라 하기

프로필 사이트 1페이지 만들기

1. 구체화 — 만들 사이트 1개 결정 (HR 팀 소개 / 1인 창업 랜딩 / 학생 포트폴리오 / 자영업 메뉴)
2. 폴더 만들기 — 빈 폴더를 만들고 VS Code · Claude Code로 열기
3. context 작성 — /init 실행 → CLAUDE.md에 목적 · 톤 · 색상 · 참고 사이트 채우기
4. plan 요청 — "어떻게 만들지 plan부터 보여줘" (Shift + Tab 두 번이면 plan 모드)
5. plan 검토 — 어색한 부분 1~2개만 고치고 OK
6. 실행 + 확인 — 생성된 .html을 브라우저로 열어 첫 인상 체크

39

평가 — 5개 variation 만들기

한 번에 5개를 받아서, 비교한 뒤 베스트를 고른다.

1. "HTML 1페이지 5개 variation 만들어줘"
2. 각각 다른 폴더로 분리 요청 — variation-1, variation-2, ...
3. 5개를 모두 브라우저에서 열어 본다
4. 각 시안의 장점 1개 / 단점 1개를 한 줄로 적는다
5. 베스트 1개를 선정

40

Iteration — 개선점을 design skill로

"또 마음에 안 드는 그 부분"을 코드가 아니라 skill로 박는다.

1. 베스트 시안의 개선점 1~2개를 한 줄로 정리
2. "이 규칙을 design skill로 만들어줘" 요청
3. 저장 위치 확인 — ~/.claude/skills/ 또는 프로젝트 .claude/skills/
4. skill 본문(description / when to use)을 읽고 검수
5. 다음 생성에서 자동 적용되는지 한 번 호출해 본다

41

skill 적용 → 재생성 → 결과 비교

1. 같은 요청을 다시 던져 새 HTML 생성
2. 이전 베스트 시안과 나란히 열어 비교
3. 의도한 개선이 반영됐는지 확인
4. 아직 안 된 개선은 skill에 1줄을 추가

산출물 — 본인의 첫 HTML 페이지 + 본인의 첫 design skill

42

Recap

• Working framework 6단계 되짚기
• 학습 목표 3개 대비 점검
• Q&A

47

과제 안내 · W2 예고

• 본인 업무에서 반복되는 작업 1개 → agent 또는 skill로 만들기
• 같은 입력을 넣으면 다른 사람도 같은 결과를 낼 수 있도록 .md 1장으로 정리해 제출

다음 주 — W2 Tooling

48