안녕하세요, 앱갈피입니다. 오늘은 확 바뀐 블로그의 디자인 변화를 AI에 MCP서버를 통하여 Context7과 Sequential Thinking를 사용해보았습니다.
Antigravity라는 강력한 AI Agent와 함께, Context7과 Sequential Thinking은 단 1시간 만에 Vanilla HTML 레거시 코드를 최신 React 앱으로 완전히 탈바꿈시켰네요.
⏱️ 타임라인: 단 60분의 여정
08:47 -
blog_react프로젝트 생성 (Vite + TypeScript)08:55 - 메인 홈 화면 구조 잡기 및 사이드바 구현
09:15 - Firebase 연동 및 데이터 패칭 구현
09:30 - 다크 모드(Dark Mode) 및 전역 테마 적용
09:47 - 최종 배포 준비 완료
이 모든 과정이 약 1시간 만에!
🤖 Antigravity: 단순한 코딩 도구를 넘어서
이번 프로젝트에서 경험한 AI는 단순히 질문에 답하는 챗봇이 아니었습니다.
Antigravity는 상황을 주도하고 문제를 해결하는 노련한 파트너였습니다.
1. Model Context Protocol (MCP) 활용
Antigravity에 드디어 MCP(Model Context Protocol) 사용법을 찾아내어 적용해보았습니다.
Context7 서버 연결: AI가 라이브러리의 최신 공식 문서를 직접 열람했습니다. 제가 "Mantine UI 써보자"라고 했을 때,
최신 v7 버전의 문서를 참고하여AppShell과 Theme 설정을 한 번에 정확하게 코딩해냈습니다. 옛날 버전의 코드를 섞어 쓰는 실수가 전혀 없었죠
Sequential Thinking (순차적 사고): 개발 도중 다크 모드 색상 반전이나 데이터 구조 같은 복잡한 문제가 나왔을 때, AI는 순차적 사고 도구를 사용해 스스로 생각을 단계별로 정리했습니다.
"일단 CSS 변수를 먼저 정의하고, 그 다음 컴포넌트에 적용한 뒤, 마지막으로 토글 버튼을 연결하겠습니다." 마치 사람이 사고하듯 체계적으로 접근하여 오류를 미연에 방지했습니다.
마지막으로, 이 글 역시 AI가 정리해주었답니다. ^^
🎨 주요 변화: Apple 스타일의 디자인
디자인은 Apple의 Human Interface Guidelines에서 영감을 찾아보라고 했는데, 딱히 잘 된 것 같진 않아요.
몰입감 있는 UI: Backdrop Blur 효과가 적용된 헤더와 부드러운 인터랙션
다크 모드: 시스템 설정에 맞춰 눈이 편안한 색상으로 자동 전환
컴포넌트 기반 구조: React와 Mantine을 도입하여 유지보수성과 확장성을 극대화
마치며
역시 AI 툴만으로는 부족합니다. 바이브 코딩은 MCP를 얼마나 잘 쓰냐에 달려있는 것 같아요.
아.. 저기 깨지네.
디버깅 툴도 있다고 하니, 디버깅하러 가보겠습니다.
Discussion
Loading comments...