1주차 ⑤ 토요일 온오프모임 — VS Code & AI 에이전트 실습

📅 3/22(토) 오후 2~4시 · 오프라인(역삼역) + 줌 동시 진행

🎬 다시보기

📋 진행 순서

순서	내용
1	VS Code 초기 환경 설정 (테마, 한국어 팩)
2	마크다운(MD) 프리뷰 설정
3	Mermaid 익스텐션으로 워크플로 시각화
4	VS Code 3단 작업 화면 구성
5	로컬 폴더 ↔ VS Code 연동
6	터미널 UI 설정
7	AI 비서 ‘뽀짝이’ 실시간 시연
8	워크샵 스킬 설치 & API 키 발급
9	환경 오류 해결 (AI에게 맡기기)
10	워크샵 설계서 스킬 실행

1. VS Code 초기 환경 설정

“까만 화면이 싫다 하시는 분들, 지금이 기회입니다. 라이트 모드로 바꿔주세요.”

테마 변경

OS	경로
Mac	상단 메뉴 → `기본 설정` → `테마` → `색 테마`
Windows	왼쪽 아래 ⚙️ → `테마` → `색 테마`

라이트 모드(흰 배경)로 바꾸면 심리적 거부감이 크게 줄어요
다크 모드가 편한 분은 그대로 두셔도 OK

한국어 팩 설치

왼쪽 사이드바 네모 4개 아이콘 (익스텐션) 클릭
Korean Language Pack 검색 → 설치
VS Code 재시작하면 한국어로 변경

💡 “노션에서 쓰듯이 예쁘게 한국어로. 모든 심리적 거부감을 낮추는 겁니다.”

2. 마크다운(MD) 프리뷰 설정

왜 마크다운인가?

AI가 생성하는 계획안, 보고서, 설계서는 대부분 마크다운(.md) 형식이에요. #, * 같은 기호가 가득한 원본은 읽기 힘들지만, 프리뷰를 켜면 깔끔하게 볼 수 있어요.

프리뷰 기본값 설정

파일 탐색기에서 .md 파일 우클릭
연결 프로그램... (또는 Open With...)
기본 편집기 구성... (또는 Configure Default Editor...)
프리뷰(미리보기) 선택

이제 .md 파일을 열 때마다 자동으로 서식이 적용된 깔끔한 형태로 보여요.

💡 일회성 미리보기: Ctrl + Shift + V (Mac: Cmd + Shift + V)

프리뷰가 중요한 이유

AI가 만든 계획이 원래 의도와 다른 방향으로 갈 수도 있어요. 내가 뭘 시키는지, AI가 뭘 하고 있는지 알아야 수정할 수 있어요.

3. Mermaid — 워크플로 시각화

Mermaid란?

텍스트 코드를 다이어그램으로 시각화해주는 도구예요. AI에게 “머메이드로 시각화해줘!”라고 하면, 작업 흐름을 플로우차트로 그려줘요.

익스텐션 설치

익스텐션 마켓플레이스에서 Markdown Preview Mermaid Support 검색
설치

활용법

AI에게 복잡한 작업을 시켰는데, 무슨 로직으로 하고 있는지 모를 때:

너 그럼 머메이드로 시각화해줘!

→ AI가 Mermaid 코드를 생성 → 프리뷰에서 플로우차트로 확인!

💡 n8n 써보신 분들은 그 워크플로 화면과 비슷하다고 생각하시면 돼요. 텍스트 기반이라 더 가볍고 빠릅니다.

4. VS Code 3단 작업 화면 구성

가장 효율적인 화면 레이아웃:

위치	역할
왼쪽	📁 파일 목록 — 프로젝트 구조 파악
중앙	📄 문서 에디터/프리뷰 — AI 작업 결과물 확인
오른쪽	🤖 AI 대화창 — 명령 & 소통

“구조 보고, 문서 프리뷰 보고, AI랑 대화하면서 문서 바뀌는 거 확인하고.”

병렬 작업

새 창 열기로 여러 VS Code를 동시 실행 가능
단, AI 토큰을 배로 소모 → 최소 $100 이상 요금제 필요
21:9 와이드 모니터 추천! 🖥️

5. 로컬 폴더 ↔ VS Code 연동

“VS Code에서 만든 파일, 카톡에 어떻게 공유하죠?”

VS Code에 보이는 파일은 이미 내 PC에 저장돼 있어요. 찾는 법:

왼쪽 파일 탐색기에서 원하는 파일 우클릭
파일러에 표시 (Mac) 또는 파일 탐색기에 표시 (Windows)
PC 탐색기가 열리면서 해당 파일이 선택된 상태로 나타남!

이제 이메일 첨부, 카톡 공유 등 자유롭게 할 수 있어요.

6. 터미널 UI 설정

VS Code 터미널이 하단에 가로로 길게 있으면 불편해요. 오른쪽으로 드래그해서 세로 배치하면 대화 형식에 훨씬 편해요.

OS	기본 터미널
Windows	PowerShell
Mac	ZSH

“저도 몰라요. 몰라도 돼요. 우리가 다 알아야 되지 않습니다. 우리는 해야 될 것만 알면 돼요.”

7. AI 비서 실시간 시연 🐈‍⬛

참여자가 PC 카톡이 없어서 파일을 못 받는 상황 → ‘닿’이 즉석에서 시연:

시연 1 — 웹사이트에 다운로드 버튼 추가

뽀야야, 소셜임팩트 스터디 웹에 이 파일 
다운로드 받을 수 있는 버튼 하나 홈 화면에 만들어줘

→ 잠시 후 웹사이트에 다운로드 버튼 생성!

시연 2 — 이메일 자동 발송

이 URL을 진우님한테 이메일로 보내. 닉네임 진우

→ AI가 Airtable DB에서 ‘진우’ 검색 → 이메일 주소 찾기 → 이메일 발송 완료!

💡 “미래는 이렇게 일을 하는 거예요.”

참여자 반응: “이걸 쓰면 퇴사할 수 있을 것 같아요” 😄

8. 워크샵 스킬 설치

설치

터미널에 아래 명령어를 붙여넣고 실행:

Mac:

curl -fsSL https://raw.githubusercontent.com/daht-mad/workshop-prep-skill/main/install.sh | bash

Windows (PowerShell):

irm https://raw.githubusercontent.com/daht-mad/workshop-prep-skill/main/install.ps1 | iex

API 키 발급

설치 중 Context7 MCP 키를 요구하면:

안내된 URL 접속
회원가입 후 API 키 발급
터미널에 키 입력

💡 ‘스킬’이 뭔지는 2주차에 자세히! 오늘은 “내가 스킬이라는 것을 받았다”고만 이해하면 OK

9. 환경 오류 해결 — “아니, 너가 해줘”

설치 후 npx, Context7MCP 관련 오류가 발생할 수 있어요. 각자 PC 환경이 다르기 때문에 자연스러운 현상이에요.

해결 원칙

내가 직접 고치려 하지 말고, AI에게 시키세요:

Context7MCP 설치가 실패했어. 해결책을 찾아줘

npx 이슈라는데 확인해봐

AI가 스스로 문제를 진단하고 필요한 패키지를 설치해줘요.

⚠️ 핵심: AI가 “이걸 실행하세요”라고 하면? → “아니, 너가 해줘” 라고 말하세요!

10. 워크샵 설계서 스킬 실행

모든 설정이 끝나면:

워크샵 준비해줘

→ AI가 인터뷰 시작! 질문을 통해 나의 업무/상황을 파악하고, 맞춤형 워크샵 설계서를 생성해줘요.

결과물에는 텍스트 문서 + 워크플로 도식화가 포함돼요.

🧠 오늘의 핵심 마인드셋

”우리는 마인드를 바꿔야 돼요”

❌ 기존 방식	✅ 새로운 방식
내가 직접 찾고, 만들고, 해결	AI에게 시키고, 검토하고, 피드백
에러 → 구글링 → 삽질	에러 → AI에게 “이거 안 돼, 해결해줘”
도구를 다 알아야 사용	해야 될 것만 알면 됨
혼자 고민	AI와 대화하며 해결

💬 “말 한마디면 5분, 20분이면 다 개발을 해주는데, 월 30만원짜리 두 개 써도 60만원이에요. 개발자 인건비 생각해보세요. 안 아까워요.”

📌 다음 시간 예고

2주차 (목요일): 스킬 & 자동화

오늘 만든 환경에서, 나만의 자동화 계획을 세우고 직접 만들어봐요!