소개
UI를 바이브코딩으로 구현해보겠다는 생각은 처음부터 만만치 않았습니다. 기능 구현은 비교적 잘 따라오지만, 내가 머릿속에 그리는 디자인을 말로 설명하는 건 정말 어려웠어요. 게다가 UI를 구현하는 데 필수적인 여러 라이브러리들은 LLM에 학습이 잘 안 돼 있어서, 기대만큼 구현이 되지 않는 경우가 많았습니다. 그럼에도 불구하고, 이걸 어떻게든 바이브코딩으로 구현해보겠다는 마음으로 여러 가지 실험을 해봤습니다.
진행 방법
Tailwind v4 이슈와 싸우다 💥
바이브코딩을 통해 웹 서비스를 구현하다 보면 아예 페이지가 안 뜨거나, 전체 레이아웃이 붕괴되는 경우를 겪으셨을 거예요. 저도 가장 자주 맞닥뜨렸던 문제가 바로 Tailwind CSS v4였습니다.
Tailwind v4는 2024년 1월 23일에 출시되며 많은 문법 변경이 있었어요.
그런데 agent는 v4로 작업한다고 말하지만, 실제로는 v3 문법으로 코드를 짜는 경우가 많았습니다.
그 결과, 페이지가 아예 깨지거나 로딩조차 되지 않는 경우가 다반사였죠.
여러분이 수없이 보실 수 밖에 없는 화면
이럴 땐 하나하나씩 직접 질문하며 오류를 잡아야 했고, 실제로 그렇게 해서만 간신히 페이지가 구현됐습니다.
context7 MCP로 문제 해결 🔧
Context7이란?
Context7는 최신 버전의 문서를 동적으로 제공하는 MCP 서버입니다. 라이브러리나 프레임워크의 최신 버전에 맞는 공식 문서와 코드 예제를 실시간으로 불러와, 정확하고 실제로 동작하는 코드를 제공해줍니다. 그래서 현재 llm이 스스로 작성하지 못하는 영역에서도 문제없이 구현할 수 있게 도와줍니다.
https://apidog.com/kr/blog/context7-mcp-server-kr/
이 과정에서 꽤 효과적이었던 전략은 다음과 같아요:
한번 바이브코딩으로 UI를 구성해본 뒤,
문제가 생기면 현재 구현된 부분을 context7 MCP를 사용해 정확한 구문을 검색
오류를 비교하여 정확한 구문으로 수정해 라는 프롬프트를 입력하여 수정
오류를 비교하여 정확한 구문으로 수정해
이 방식은 지난 스터디에서도 효과적이었고, 이번에도 마찬가지였습니다.
https://www.gpters.org/wealth/post/end-document-work-TPs947QjENTcjDV
고급 인터랙션도 시도 🎞️
특히 동적인 요소, 예를 들어
gsapScrollTriggerthree.js
같은 고급 애니메이션 기술은 바이브코딩으로는 거의 구현이 불가능해 보였지만, 관련 문서나 예시를 함께 제공하면서 구현 요청을 하면 꽤 높은 정확도로 완성되었습니다.
정확한 구문없이 구현된 사이트의 예시
정확한 구문으로 작성되어 인터랙션과 애니메이션이 제대로 작동하는 모습
결과와 배운 점
LLM은 최신 버전의 문법 변화에 아직 익숙하지 않음 → 정확한 구문, 문법이 핵심
UI 구현에서 "느낌"을 전달하는 건 정말 어렵지만, 예시와 조합된 지시로 보완 가능
context7 MCP같은 툴을 활용하면 바이브코딩 정확도 상승결국에는
RAG나Agent to Agent와 같은 최신 ai 기술까지도 충분히 활용 가능할 것 이라는 자신감을 얻게 되었어요