[Microsoft Data School] 7일차 - Vibe Coding

RudinP·7일 전
post-thumbnail

Vibe Coding

LLM의 코드 작성 능력을 활용하여 개발하는 방법

  • 자연어를 통한 신속한 아이디어 구현
  • 디자이너도 자연어를 통해 아이디어를 프로토타입화하고, 개발자와의 소통 비용 줄이기 가능
  • 반복적, 정형화된 코드는 AI가, 시스템 아키텍처 설계 및 알고리즘 최적화는 사람이 집중
  • 아이디어를 즉시 코드로 변환하여 테스트 가능

→ 좀 더 시스템 아키텍처 설계, 알고리즘 최적화, Performance Engineering 공부 필요
→ AI를 잘 사용해야만 살아남을 수 있다.

Agentic Coding

AI 에이전트가 코드베이스 및 개발환경과 자율적으로 상호작용 → 최소한의 인간 개입으로 코드를 생성 ,수정, 유지보수하는 소프트웨어 개발 접근법

  • 작업을 개별 단계로 분해, 반복적 작업, 솔루션을 지속적으로 개선하는 자체 완결적 피드백 루프 생성
    → Agentic 시스템이 코드를 실행, 테스트한 다음 출력이나 오류를 스스로 피드백 하여 다음 단계 실행
    일회적, 단발성인 단순한 바이브 코딩과는 다름

Vibe Coding vs Agentic Coding

  • Vibe Coding: 인간이 자연어를 써서 코드 생성을 하고 수동으로 테스트
  • Agentic Coding: AI 에이전트가 실행 환경에서 자동화된 행동 수행, 독립적 테스트 진행

[참고] Software Engineering Agent

핵심 기술

  • LLM 이해
  • 도구 사용: 터미널 명령어, 파일 시스템, 외부 API 등 개발 도구를 스스로 활용
  • 계획 및 추론: 주어진 목표를 위해 작업 계획 → 실행 결과 분석 → 다음 단계 결정
    • Git에서 bug-fix, feature 등 문서를 읽고 알아서 PR까지 날릴 수 있는 수준

예시

  • Devin AI: 전체 소프트웨어 개발 프로젝트를 처음부터 끝까지 혼자서 처리
  • SWE-agent: 실제 GitHub 이슈를 해결하도록 훈련된 오픈소스 에이전트, 복잡한 버그를 자동으로 수정
  • ChatDev: 개발자, 테스터 등 여러 AI 에이전트가 팀을 이루어 소프트웨어 개발을 진행하는 가상 개발 팀

AI Assisted Coding

Visual Studio Code에 Github Copilot 구성

  • 좌측이 아닌 상단에 추가되므로 확인하자.

Edit 모드에서 질문

Copilot 모드를 Edit으로 변경하고 입력
@workspace 이 함수에 네트워크 연결 오류(ConnectionError)와 JSON 디코딩 오류에 대한 예외 처리 코드를 추가해줘

# /utils/todo_client.py
import requests
 
def get_todo_item(todo_id: int):
    """지정된 ID의 할 일 항목을 API로부터 가져옵니다."""
    api_url = f"https://jsonplaceholder.typicode.com/todos/{todo_id}"
    response = requests.get(api_url)
    todo_item = response.json()
    return todo_item
 
todo = get_todo_item(1)
print("To Do item received:", todo)
 
non_existent_todo = get_todo_item(9999)
print("To Do item received:", non_existent_todo)

Edit 후

# /utils/todo_client.py
import requests
import json
 
def get_todo_item(todo_id: int):
    """지정된 ID의 할 일 항목을 API로부터 가져옵니다."""
    api_url = f"https://jsonplaceholder.typicode.com/todos/{todo_id}"
    try:
        response = requests.get(api_url, timeout=5)
        response.raise_for_status()
    except requests.exceptions.ConnectionError as e:
        print(f"Connection error while fetching {api_url}: {e}")
        return None
    except requests.exceptions.Timeout as e:
        print(f"Timeout while fetching {api_url}: {e}")
        return None
    except requests.exceptions.RequestException as e:
        print(f"Request error while fetching {api_url}: {e}")
        return None
 
    try:
        todo_item = response.json()
    except json.JSONDecodeError as e:
        print(f"Failed to decode JSON from {api_url}: {e}")
        return None
 
    return todo_item
 
todo = get_todo_item(1)
print("To Do item received:", todo)
 
non_existent_todo = get_todo_item(9999)
print("To Do item received:", non_existent_todo)

Github Copilot의 Keywords

copilot agent: remote 용

  • 보통 token 베이스로 과금되지만, copilot은 리퀘스트당 과금이되기때문에 정확한 과금 양을 예측할 수 있다는 장점이 있다.

Chat participants

  • 명시적으로 지정하지 않아도 자연어 프롬프트에 의해 참조 가능
  • 외부 Extension 설치로 확장 가능
  • @

Slach commands

  • 특정 시나리오를 나타내는 명령어
  • 자연어로 길게 쓰면 안됨
  • /
    ex) /explain #함수이름: 해당 함수 설명해달라는 의미

Chat variables

  • Specific context
  • #

Github Copilot의 4가지 모드

Ask

일반적인 질문이나 코드에 대해 질문하고 설명을 들을 때 사용

  • 이 함수는 어떤 역할을 해?
  • 'RequestException'은 언제 발생하는 오류야?
    • 코드를 직접 수정하지 않고 채팅창에 설명이나 코드 예시를 보여줌

Edit

현재 열려있는 파일이나 선택된 코드 블록을 직접 수정하도록 지시할 때 사용

  • 이 함수에 예외 처리 코드를 추가해줘
    • 변경사항을 diff로 보여주고, 사용자는 accept 또는 decline 하면 됨

Agent

파일 수정, 파일 생성, 터미널 명령어 실행, 프로젝트 구조 파악 등 여러 단계에 걸친 작업을 자율적으로 수행할 때 사용

  • OAuth 2.0 로그인 기능을 구현해줘
    • 필요한 파일을 만들고, 코드를 추가하고, 라이브러리 설치 등 작업 포함

Plan

작업을 수행하기 전 상세 구현 계획을 세우고 모든 요구 사항이 반영되고 해결되었는지 코드를 수정하기 전에 검토할 때 사용
요구 사항과 제약 사항을 이해하기 위해서 코드분석, 수행해야 할 작업을 관리가능하고 수행 가능한 step으로 나누어 작업 계획 제시

  • OAuth 2.0 로그인 기능을 구현해줘
    • 필요한 파일을 만들고, 코드를 추가하고, 라이브러리 설치 등 작업 포함
    • 해달라고 하면 Plan에서 Agent 모드로 넘어가게 됨

  • 이런식으로 필요한 모듈도 알아서 설치해줌
  • unit test도 별도로 생성해줌

AI Coding Agent

VSCode에서 사용 가능한 Agent

  • Github Copilot
  • Gemini CLI
  • Claude Code
  • OpenCode
  • Qodo Gen
  • Amazon Q

Copilot Model 비교

  • 지원되는 모델 확인 중요

모델 비교

  • ~opus 가 토큰을 더 많이 사용해 결과물이 더 좋다.
  • ~sonnet은 그보단 낮은 단계. 코딩 관점에서는 opus와 큰 차이 X
  • ~haiku: 라이트 버전

LLM

LLM의 동작 방식

Autoregressive Transformer

  • Input prompt와 이전에 생성한 output token을 기반으로 다음 token을 생성하는 방식
    • 가장 확률이 높은 단어를 추출
  • 훈련된 Data에 따라서 output이 달라진다.
    • 정제된 Input을 제대로 넣어야한다.(Garbage In, Garbage Out)
  • LLM에서 발생하는 hallucination의 원인중 하나로 AI Coding Assistant에서도 마찬가지

AI Coding Tool의 위험성

  • 반향실 효과(Echo Chamber Effect)

    • 정보 편향 현상
  • 존재하지 않는 Package 추천 → 동일한 이름으로 악성 코드 배포

  • Rules File Backdoor: 설정 파일에 악의적인 지시를 숨김(룰 파일)

  • AI Coding Tool이 스스로 판단하여 File 및 DB를 삭제

    • AI로 작업시 DB 접근권한을 약하게 준 Account에서 처리

AI Prompting

Context

왜 이 요청을 하는가?

  • 우리 회사는 곧 20대 대학생을 대상으로 방수 기능과 재활용 소재 사용이 핵심 장점인 친환경 노트북 파우치를 출시할 예정이야

Role

AI의 역할

  • 당신은 20년 경력의 전문 투자 컨설턴트야

Action

무엇을 해야하는가

  • 주어진 제품 특징을 활용하여 소셜 미디어 광고용 카피를 3가지 버전으로 만들어 줘

Format

어떻게 결과를 보여줄 것인가

  • 보고서의 핵심 내용을 300자 이내의 요약문으로 작성해줘. 세 가지 주요 결론을 번호 목록 형식으로 나열해줘

Tone

어떤 느낌으로 말할것인가

  • 전문적이고, 자신감 넘치며, 논리적인 어조로 작성해.

최신 모델

  • 추론 기능 강화 → 생각하는 과정 내재화

  • Chain-of-Thought: 논리적인 과정을 기술하거나 생각하라고 지시

    • 하나의 전략을 단계별로 탐색하도록 유도
    • 불필요하거나 오히려 모델 자체 사고 과정 방해 가능
  • Tree-of-Thought는 유효하도록

    • 여러 전략을 동시에 고려하여 최적의 전략을 스스로 선택하도록 하는 기법
  • 역할을 반복적으로 지정하지 않아도 됨(Context 유지)

  • Output Token 개수 절약을 위해 Format을 강조하기(모델이 말이 많아짐)

    Chain-of-Thoughts는 AI에서 복잡한 작업을 단계별로 나누어, 각 단계를 추론한 뒤 답변하도록 모델에 지시하는 프롬프트 엔지니어링 기법

    Tree-of-thoughts는 더 많은 exploration과 중간 reasoning 과정의 평가를 통해 더 나은 의사 결정을 가능하게 하는 CoT의 발전된 버전 중 하나로, 줄여서 ToT라고도 부른다

긴 Context 실패 요인

  • Context Poisoning
    • Hallucination, 다른 오류가 context로 유입되어 반복 참조 가능성
  • Context Distraction
    • 모델이 학습에서 배운 내용을 소홀히 하고 맥락에 지나치게 집중
  • Context Confusion
    • 중요하지 않은 context가 모델에 의해 사용되어 품질 낮은 응답 생성
    • MCP를 무작정 참조하면 상관 없는 MCP가 호출될 수 있음(성능저하)
  • Context Clash
    • Context가 서로 충돌

→ /clear 하거나 새로운 세션 시작하자
MCP는 주로 AI 분야에서 Model Context Protocol(모델 컨텍스트 프로토콜)의 약자로, 대규모 언어 모델(LLM)이 다양한 외부 도구(슬랙, 구글 드라이브 등)나 최신 정보와 원활하게 연결하고 소통하기 위한 개방형 표준 통신 규약

Context 관리를 위한 핵심 전략

목표: LLM이 무엇을 볼지 능동적으로 한정 자원인 Context를 관리

압축 및 정제(Compaction and Pruning)

  • 관련 없는 내용 제거
  • 의도적인 압축 및 진행 파일 활용
  • LLM 기반 요약

격리 및 집중(Isolation and Focus)

  • 작업별 새 세션 시작
  • Context 격리
  • MCP 서버 선택

구조화된 입력 및 충돌 관리

  • 정확한 이해 기반의 작업
  • RAG를 통한 정확도 보강
  • Memory 관리 시스템을 두어 충돌감지 및 정보 보완

RAG는 Retrieval-Augmented Generation의 약자로, 인공지능이 답변을 생성할 때 대규모 언어 모델(LLM)의 지식뿐만 아니라 외부 데이터베이스에서 관련 정보를 검색해 참고하고 이를 바탕으로 답변을 만들어내는 기술

AI Coding Agent 사용 Tip

  • 일 잘하는 신입사원 대하듯
  • 명확하고 구체적으로
    • 원하는 작업, 변경 범위, 기대 결과 등을 구체적으로 기술
    • 때에 따라 사용할 Tool 및 Version도 명시
  • 큰 일은 작게 나누어서
    • AI Model 혹은 허용되는 Token 수에 따라서 Context 저장 범위에 차이가 있다
    • 한 번에 많은 output file이 생기면 Review에 소홀하게 된다
  • 신규 기능 개발은 Top-Down 방식으로
    • 전체 Architecture Design 먼저
    • Object-Oriented Desing Principles 등이 큰 도움
  • PRD, Task/ToDoList, Coding convention 등을 기술
  • 결과물 Review
    • 오래된 Package를 사용하는 경우도 있다
  • 작업 단위별 잦은 commit
  • Test Driven Development

실습

TODO List Serivce

단계1

  • TODO item에 대한 CRUD 정도와 같은 간단한 요구사항 시작

단계2

  • 여러 사용자에게 서비스될 수 있도록 확장

단계3

  • 작성한 TODO item을 다른 사람에게 할당할 수 있는 기능 추가

Guide

  • 어떤 식으로 작업을 진행할 지 미리 생각: 통으로 맡기기 X
  • 작업 진행 과정에서 어떻게 AI Model과 협력할지 생각
    • 저장은 어떻게? 어떤 DS? Protocol은? Backend와 Frontend의 역할 분담은?
  • 전 단계 결과물과 새로운 요구 사항에 대한 context가 AI model에 잘 전달이 되는 지 살펴볼 것
  • 결과물이 만족스럽지 않다면 원인을 생각해 보고 Prompt를 어떻게 바꾸어야 할 지 생각해볼 것

https://github.com/RudinP/MiniProject2

profile
iOS 개발자가 되기 위한 스터디룸/스터디의 레퍼런스는 모두 kxcoding

0개의 댓글