Real World Development with GitHub Copilot and VS Code - Harald Kirschner, Christopher Harrison

영상 링크: Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison
채널명: AI Engineer

GitHub Copilot와 VS Code로 실전 개발하기 핵심 요약

• 영상 제목: GitHub Copilot와 VS Code로 실전 개발하기
• 대규모 코딩(‘VIP coding’)의 3단계(요로 즉흥 - 구조화 - 확장 스펙트럼)를 소개하며, 코드에 집착하지 않고 산출물 중심의 개발 방식을 강조함
• “YOLO 바이브 코딩”: 빠른 프로토타이핑 및 비기술자도 아이디어를 구현하기 위한 창의·즉흥적 개발 패러다임을 설명, 즉시 실행과 즉각적인 피드백의 장점 부각
• VS Code에서 에이전트 모드 및 ‘Insiders’ 프리릴리즈 빌드, auto-approve(자동 승인) 세팅 등 VIP 코딩의 실제 세팅 방법과 UI 운영 방식을 구체적으로 시연
• 리액트+Vite+머티리얼(또는 Fluent) 등 널리 알려진 프론트엔드 스택을 활용해 빠르게 프로젝트 생성, 자연어 대화로 디자인 방향(‘애플 스타일’ 등) 지정
• Copilot instructions(코파일럿 지침)과 유저 프롬프트/플랜 파일 활용, 팀 내 샤어링, 커스텀 명세 및 작업 공유/재사용 방법 실습
• 커스텀 모드(예: 테스트 주도 개발 모드)와 도구집(toolset) 생성, MCP 서버(외부 도구 통합 플랫폼) 설치 및 연동 방법, 실제 플러그인들 설명
• 음성 입력·비주얼 UI 컨텍스트·작업 되돌리기(UNDO) 등 실사용 생산성 기능 체험, 다양한 윈도우/채팅 뷰 관리, 오토세이브 등 VS Code 활용 팁
• 구조화된 바이브 코딩 단계에서 팀/기업용 템플릿화, 명확한 지침 및 Guardrail 세팅을 통한 일관성/재현성 강화법 소개
• 최종적으로, 실전에서는 팀과 개인의 요구에 맞는 모드/도구/프롬프트 설계와 실험, 꾸준한 프로세스 개선 및 ‘의미 있게 AI 코딩’을 실천할 것을 강조

세부 요약 - 주제별 정리

‘바이브(VIBE) 코딩’은 코드가 아니라 산출물·결과에 집중하는 개발 방식임을 주장

• VIP 코딩은 전통적 소프트웨어 개발과 달리 ‘코드를 보는 것’보다 ‘결과물을 얻는 것’에 초점
• 최근 AI 에디터 경험을 ‘로우코드(Low-Code) 모드’라고 부르는 흐름을 소개
• AI와 자연어 대화만으로 개발할 수 있으며, 자동 변경 승인(auto-approve)으로 코드 확인조차 생략 가능
• 신뢰와 안전장치를 AI에 구축하는 것이 키포인트
• ‘Exponential(지수적)’하게 늘어나는 에이전트 코드 자동 생성 사례(Anthropic 콘퍼런스 자료 등) 언급

‘YOLO 바이브 코딩’은 즉흥성, 속도, 창의성, 빠른 학습에 특화된 첫 번째 단계임을 사례로 보임

• 개인 학습, 아이디어 목업, POC 프로토타이핑, 자녀와 주말 프로젝트 등 다양한 캐주얼 개발에 적합
• 일부 기업에서 비전문 직군(UX 등)이 쉽게 아이디어를 구현/시연 가능함을 장점으로 소개
• 예: 3JS 게임 만드는 실습에서 ‘코드 자체’보다는 동작하는 결과 통해 기술 구조 및 동작 이해가 빨라짐
• 즉각적인 성취감(즉시 실행→시각적 피드백)이 큰 동기부여로 작용

실전 YOLO 바이브 코딩 워크플로우: VS Code 에이전트 모드, Insiders 빌드, 주요 설정/팁을 시연함

• VS Code ‘Insiders’ 빌드는 데일리 업데이트로 최신 AI 기능 빠르게 체험 가능
• 에이전트 모드 활성화(기본 모드 전환 예정), 툴즈 픽커에서 scaffold new workspace 끄기 등 순서별 안내
• ‘auto-approve’ 세팅: continue 버튼 없이 AI가 자동 반영, workspace 단위 세팅 권장
• 리액트+Vite+머티리얼/플루언트 등 인기 프론트엔드 스택 조합, 자연어로 디자인(‘Apple 스타일’ 등) 지정
• 동시에 여러 개발 시 세션 관리, auto-approve 적용 순서 등 작업 환경 팁 제공

AI와 자연어로 대화해 UI/기능 추가, 시각 컨텍스트, 음성 입력 등 실전 인터랙션 예시를 체험시킴

• 브라우저 프리뷰와 ‘시각 컨텍스트’ 연동: UI 요소 클릭→AI가 해당 요소 속성/화면 자동 추출→대화 맥락에 추가됨
• 예: 헤더에 파티클 애니메이션 추가→실제 코딩 없이 자연어로 피처 요청→AI가 CSS/JS 수정
• 작업 실시간 미리보기(Hot Reload), 특정 엘리먼트만 시각적 컨텍스트 연결 가능
• Undo(되돌리기), 다양한 체크포인트 관리 및 되살리기 등 결과물이 마음에 안 들면 쉽게 롤백
• 음성 명령(Cmd+I), 자동 받아쓰기·응답 등 비코딩 인터페이스 활용법

Copilot 지침/프롬프트 관리, 공유, 고도화로 팀 생산성과 통제력을 강화하는 방법을 구체적으로 안내함

• copilot-instructions.mmd: 스택 정보, 가이드, 툴 사용 범위 등 프로젝트/조직 차원의 일관성 유지를 위한 명세파일
• glob 패턴 기반 파일별 룰, 컨텍스트 활성/비활성 조건 등 작성법
• 커스텀 프롬프트/플랜(명세 자동 생성, 테스트 자동화 등)을 슬래시 명령어(/)로 바로 실행
• 프롬프트와 instructions의 역할/적용 범위 차이(전자는 구체적 작업, 후자는 ‘방법’ 지시)
• 조직/팀 단위 프롬프트/지침 표준화 및 클라우드/Slack 등 활용 아이디어 논의

커스텀 모드(예: TDD)와 도구집(toolset), 플랜/프롬프트 공유 등, 팀 맞춤형 워크플로우 설계 방법을 예제 중심으로 시연함

• ‘모드’ 커스터마이즈: 테스트 주도 개발(TDD) 지원 모드 직접 작성, 코드베이스와 연결, 프로젝트 or 유저 단위 적용
• 프롬프트 공유 및 내보내기, 각 프롬프트별 적용 도구(tool) 지정
• 계획(플랜), 스펙명세, 특정 프로세스(TDD, 플랜-스펙-구현 등) 세분화에 따라 모드 및 프롬프트 설정 추천

MCP 서버(외부 도구 연동 플랫폼) 설치/활용과 실제 예시(Playwright, JustPad 등)를 상세히 설명함

• MCP 서버는 외부 도구(테스트, DB, 검색 등)를 VS Code 에이전트 내에서 직접 호출·조작 가능케 하는 확장 시스템
• MCP 서버 설치: JSON 편집 or ‘install server’ 버튼으로 간단 연동, 유저/워크스페이스 단위 전환 가능
• Playwright MCP: 브라우저 테스트, 스크린샷, 접근성 검사 등 브라우저 레벨 액션 제공
• 톡큰 등 보안값은 개별 입력·암호화 지원, Mac에서는 키체인과 연동
• HTTP/SSE 등 최신 포맷 지원, 툴셋(tool set) 내 도구별 조합/활성화 관리
• MCP 예시: Perplexity(리서치), JustPad(기스트 기반 칸반/프롬프트 저장), GitHub MCP 서버 등 다양한 생태계 도구 소개

VS Code의 에이전트/도구/모델/모드 관리: 퍼포먼스, 호환, 사용자 경험 개선 팁을 체계적으로 제공함

• 모델 관리: 로컬(LLaMA, open routers 등) 및 외부(Plexity, Anthropic, Azure 등) API 키 별도 등록/간편 교체 가능
• 각 모델별 기능(도구 호출 가능/불가) 및 지원 범위 체계적 연결(예: agent mode/ask mode 차별 설명)
• MCP 서버, 도구 셋팅, 인라인 툴 언급 등 다양한 조직·유저 맞춤 워크플로우 소개
• 윈도우/챗 뷰 분할, 핀고정, 다중챗 네이밍 등 고급 사용자 인터페이스 활용법

구조화된 바이브 코딩: 템플릿, 명확한 지침, 내부 도구화 등 팀/비즈니스 용도로 확장하는 방법론을 전수함

• 구조화 단계에서는 ‘템플릿화된 스타터’로 기술스택·디자인시스템·가이드라인 일괄 적용
• 프로젝트/템플릿 내 반복/중복 행동을 instructions로 정형화, ‘YOLO’식 AI의 편의성과 ‘일관성’을 가드레일로 동시 확보
• 예: copilot-instructions에 조직의 스택/테스트 방식/디자인 명세 포함, 각 프론트엔드 툴도 직접 지정
• 도메인 지식/내부 도구를 드롭인(import), 그린필드 개발시 생산성·품질 극대화

실전 ‘스펙 주도’ 개발 및 AI 비판적 활용, 지속 개선 등 진화적 팀 개발 프로세스를 제안함

• ‘스펙’(명세)부터 먼저 AI와 대화, 기존 회의록/대화문/기획안 자동 정리→스펙 자동 생성 활용법
• 프롬프트로 비판적 분석(예: ‘내 아이디어에 질문 3개’), AI를 피드백·크리틱 파트너로 적극 활용하는 실전 팁
• 계획→스펙→구현까지 AI 워크플로우 분할, 구체적 명령어와 도구를 활용해 점진적 개선
• 체크포인트 자주 커밋, 오류시 Pause로 즉시 리뷰, AI 과실 감시·개선·피드백 루프 강조
• 답습 아닌, 팀/개인 맞춤형 실험 및 개선, 도구/모드/프롬프트 진화의 중요성 환기

다양한 실수·실전 예시·실무적 해법을 공유하며, 의미 있는 AI-개발 융합을 꾸준히 실천할 것을 촉구함

• 커스텀 모드와 프롬프트, 예시 프롤리퍼레이션(major mode/minor mode 중복 등) 현상 발생 가능성 공유
• AI 코드베이스 구조, 명확한 예시·지침·최신화된 instructions의 중요성 반복 강조
• 큰 그림에서 실험, 피드백, 프로세스 개선 및 가장 적합한 도구/모드의 집적이 핵심임을 결론으로 제시