Versions Compared

Old Version 8

changes.mady.by.user PSMON

Saved on

compared with

New Version 9

changes.mady.by.user PSMON

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info
title검색/추론

Decision reasoning: Result 1은 “Mermaid Flowchart for Vibe Coding Workflow”라는 제목과 함께 바이브 코딩 플로우를 mermaid 차트로 시각화한 내용을 제공하고 있어, 사용자의 요청과 정확히 부합합니다.

Tip
titleAI응답

  • 확률적으로 깨짐현상 발생 발생하며 다음 두가지 방식으로 개선가능
    • LLM을 안깨지게 개선하거나 ? 작동되는 CSS - 모델이 저성능인 원인일수도 있음
    • 안깨지게 CSS 포맺팅으로 세이프변환 로직 적용 포맺팅으로 개선하거나? 


아래는 MCP(모델 컨텍스트 프로토콜) 로직을 기존 “바이브 코딩 플로우”에 통합한 Mermaid 차트입니다.

  • 클라이언트 → LLM 추론 엔진 → MCP 서버 라는 흐름이 “Specification” 단계에 삽입됩니다.
  • 이후 기존 “Rules → Oversight → PDCA” 순서가 그대로 유지되며, MCP와 관련된 노드를 MCP 서브그래프로 묶었습니다.
  • KPI와 CI 자동화도 별도 서브그래프로 두어 가시성을 높였습니다.

주요 변경 포인트

단계기존MCP 통합 후
Specification요구사항 → 명세서 → 아키텍처 → 가이드라인위 단계 뒤에 클라이언트 → LLM 추론 엔진 → MCP 서버 흐름 추가
Rules정적 분석, 체크리스트, CI/CD 구성MCP 서버가 완료된 뒤 바로 Rules 단계로 이동
Oversight코드 리뷰 → 병합/개선동일
PDCA배포 → 피드백 루프동일
KPI / CI 자동화별도 서브그래프동일, MCP와 연계된 지표가 필요하면 추가 가능

사용 팁

  1. MCP 서브그래프는 필요에 따라 색상이나 레이아웃을 조정해 시각적으로 구분합니다.
  2. MCP 서버가 실제 서비스되는 엔드포인트라면, API 호출·JSON‑RPC 같은 세부 메커니즘을 별도 노드로 추가해 보세요.
  3. KPI에서 “MCP 호출 성공률” 같은 지표를 추가하면, 프로토콜 자체의 품질을 모니터링할 수 있습니다.

위 Mermaid 코드를 mermaid.live 또는 VS Code의 Mermaid 플러그인에 붙여넣으면, MCP가 포함된 전체 바이브 코딩 플로우를 한눈에 확인할 수 있습니다. 필요 시 노드 연결이나 레이아웃을 자유롭게 조정해 주세요!
 참고 문서:


...