실험은 약 한 시간 동안 세 가지 반복적인 접근 방식으로 진행되었습니다. 초기 Gemini는 스타일링에 집중했으나 페이지의 기능 구현에는 실패했습니다. Claude의 첫 시도는 Rails 아키텍처 분석은 좋았으나, 불필요한 복잡성을 초래하며 완전한 연결에 도달하지 못했습니다. 그러나 Claude에게 더 구체적인 프롬프트를 제공하자 상황이 크게 개선되었습니다. Claude는 즉시 테스트를 생성하고 라우트를 설정하며 TDD(테스트 주도 개발) 접근 방식을 따랐습니다. 스트림 종료 시점에는 거의 완성 단계에 이르렀으며, 단 하나의 use client 지시문만 추가하면 완벽하게 작동하는 상태였습니다. 이는 AI가 복잡한 웹 개발 작업에 상당한 기여를 할 수 있음을 입증하는 결과였습니다.
AI가 Rails 페이지를 Next.js로 재구축할 수 있을까? 우리가 시도해 보았다.
Can AI rebuild a Rails page in Next.js? We tried it
작성자
Ruby Weekly
발행일
2025년 06월 12일
핵심 요약
- 1 AI를 활용하여 Rails 앱의 특정 페이지를 Next.js로 재구축하는 실험이 진행되었습니다.
- 2 다양한 LLM(Gemini, Claude)을 사용한 반복적인 시도 끝에, 구체적인 프롬프트가 성공에 결정적인 역할을 했습니다.
- 3 단 한 줄의 코드(`use client` 지시문)만으로 거의 완성에 가까운 결과를 얻어 AI 개발의 잠재력을 확인했습니다.
도입
Thoughtbot은 최근 내부 Rails 애플리케이션인 Hub의 Events 페이지를 Next.js로 재구축하는 라이브스트림 실험을 진행했습니다. 이 실험은 AI 기반 편집기 Cursor를 활용하여 AI의 도움을 최대한 받는 것을 목표로 했으며, Gemini 2.5 Pro 및 Claude 4와 같은 최신 LLM 모델이 사용되었습니다. 실행 중인 Rails 앱, 페이지 링크, 스크린샷이 LLM에 제공되어 디자인 및 스타일링 가이드라인을 제시하며 AI 지원 개발의 현실적인 가능성을 탐색했습니다.
결론
이번 실험은 AI 지원 개발의 놀라운 발전을 보여주었으며, 이는 단지 시작에 불과하다고 평가됩니다. Thoughtbot은 향후 Cursor의 Max Mode 및 Custom Rules와 같은 기능을 통해 AI 에이전트의 역할 확장을 지속적으로 탐색할 계획입니다. 이 경험은 LLM이 처리할 수 있는 작업 범위, 필요한 감독 수준, 그리고 AI가 증강된 생산적인 워크플로우의 실제 모습에 대한 중요한 질문들을 제기합니다. Thoughtbot은 이러한 탐색을 계속할 것이며, 관련 업데이트는 YouTube 채널을 통해 공유될 예정입니다.