AI로 시작하는 No-code 개발: MVP부터 프로토타입까지

안녕하세요. 이번에는 AI를 활용한 개발 경험을 공유해드리려고 합니다. 특히 개발 경험이 전혀 없는 분들도 AI를 이용해 어떻게 프로그램을 만들 수 있는지, 그 과정에서 배운 점들을 이야기해 보겠습니다. 제가 실험해 본 결과, AI 도구들을 적절히 활용하면 생각보다 훨씬 빠르게 원하는 프로그램을 만들 수 있습니다.

---

1. AI 개발 도구 현황

현재 AI 개발 도구는 크게 두 가지 방향으로 발전하고 있습니다.

1. 웹 기반 프로토타이핑 도구
2. AI 코드 에디터

각각의 도구들은 서로 다른 장점을 가지고 있어, 개발 목적과 상황에 따라 적절히 선택해서 사용하면 됩니다. 자세히 살펴보겠습니다.

1.1 웹 기반 프로토타이핑 도구

프로토타이핑 도구들은 코드 작성 없이도 빠르게 아이디어를 구현할 수 있게 해주는 도구들입니다.

Lovable.dev

개발 지식이 없어도 쉽게 사용할 수 있는 도구입니다. 자연어로 원하는 기능을 설명하면 AI가 이해하고 실제 작동하는 프로토타입을 생성해줍니다. 특히 MVP 개발이나 아이디어 검증 단계에서 유용합니다.

Lovable

주요 기능:

• 코드 없는 프로토타입 생성
• 반응형 디자인 자동 생성
• API 연동 지원
• 실시간 협업 기능
• 바로 테스트 가능한 실행 환경

Bolt.new

Lovable보다 더 완성도 높은 애플리케이션 개발이 가능한 도구입니다. 백엔드 통합이 강점이며, Supabase 등 다른 서비스들과의 연동이 쉽습니다.

bolt.new

주요 기능:

• 풀스택 애플리케이션 개발
• 데이터베이스 자동 통합
• API 엔드포인트 자동 생성
• 사용자 인증 내장
• 실시간 데이터 동기화

v0.dev (Vercel)

Vercel에서 제공하는 AI 기반 UI 생성 도구입니다. Tailwind CSS와 shadcn/ui 컴포넌트를 활용한 모던한 UI 개발에 특화되어 있습니다.

v0 by Vercel

주요 기능:

• AI 기반 UI 컴포넌트 생성
• Tailwind CSS 통합
• shadcn/ui 컴포넌트 지원
• 반응형 디자인 자동화
• 코드 내보내기 기능

1.2 AI 코드 에디터

AI 코드 에디터들은 실제 개발 환경에서 코드 작성을 도와주는 도구들입니다.

Cursor

현재 가장 강력한 AI 코드 에디터 중 하나입니다. 전체 프로젝트의 컨텍스트를 이해하고, 이를 바탕으로 정확한 코드 제안을 제공합니다.

Cursor - The AI Code Editor

주요 기능:

• 프로젝트 전체 컨텍스트 이해
• 자연어 기반 코드 생성
• 상세한 코드 설명
• 자동 리팩토링
• 고급 디버깅 지원

Windsurf

초보자도 쉽게 사용할 수 있는 AI 코드 에디터입니다. 직관적인 인터페이스와 자동화된 기능이 특징입니다.

Windsurf Editor by Codeium

주요 기능:

• 쉬운 코드 생성
• 실시간 오류 검사
• 간편한 프로젝트 설정
• 초보자 친화적 인터페이스
• 즉각적인 피드백

GitHub Copilot

GitHub의 방대한 코드베이스를 학습한 AI 도구입니다. VSCode 등 주요 IDE와의 통합이 강점입니다.

GitHub Copilot · Your AI pair programmer

주요 기능:

• 실시간 코드 제안
• 다중 언어 지원
• GitHub 통합
• 테스트 코드 생성
• 지속적인 학습과 개선

2. 백엔드/인프라 도구 생태계

개발에 필요한 백엔드와 인프라 도구들도 AI와의 통합이 강화되고 있습니다.

2.1 Supabase

PostgreSQL 기반의 강력한 백엔드 서비스로, Firebase의 오픈소스 대안입니다.

Supabase | The Open Source Firebase Alternative

주요 기능:

• PostgreSQL 데이터베이스
• 실시간 데이터 구독
• 자동 API 생성
• 인증 시스템
• Edge Functions
• 파일 저장소

2.2 인증 서비스

• Next-Auth: Next.js 앱을 위한 인증 솔루션
• Clerk: 풀스택 인증 플랫폼
• Supabase Auth: Supabase의 내장 인증 시스템

2.3 배포 플랫폼

• Vercel: Next.js 앱에 최적화된 배포 플랫폼
• Netlify: 정적 사이트와 서버리스 기능 지원
• Cloudflare: 엣지 컴퓨팅과 CDN 서비스

---

3. 실제 프로젝트 개발 경험

제가 이번에 시도한 프로젝트는 미국 외교관 교육기관인 FSI(Foreign Service Institute)의 언어 학습 방법에서 영감을 받아 개발한 영어 학습 프로그램입니다. FSI 학습법의 핵심인 실제 상황 기반 학습과 즉각적인 피드백 시스템을 AI 기술과 결합했습니다.

사용자가 새 글을 작성하면 먼저 주제를 선정하고, 그 주제에 대한 자신의 생각을 아는 범위 내에서 영어로 작성합니다. 그러면 GPT가 이 작문을 분석해서 Beginner부터 Master까지 5단계로 실력을 평가합니다. 평가 후에는 Tavily API를 이용해 온라인에서 관련 표현들을 검색하고, 이를 바탕으로 GPT가 사용자의 작문과 비슷한 수준의 모범 답안을 제시합니다. 사용자는 자신의 표현과 AI가 제안한 표현을 비교하면서 학습할 수 있습니다.
이 방식의 장점은 단순한 문법 교정이나 첨삭을 넘어서, 실제로 비슷한 상황에서 영어 원어민들이 어떤 표현을 사용하는지 배울 수 있다는 점입니다. 또한 실시간으로 자신의 영어 실력 수준을 객관적으로 파악할 수 있고, 구체적인 개선 방향도 제시받을 수 있습니다.
이런 시스템을 통해 사용자들은 더 자연스럽고 실용적인 영어 표현을 학습할 수 있습니다. 실제 상황에서 자주 사용되는 표현들을 익히고, 점진적으로 자신의 영어 실력을 향상할 수 있습니다.

이번 프로젝트는 개발 경험이 전혀 없다는 가정하에 시작했습니다. 프로젝트를 위해 ChatGPT o1, Cursor AI 코드 에디터, Next.js 프레임워크, shadcn UI 컴포넌트 라이브러리를 활용했습니다.
개발 과정을 최대한 단순화하기 위해 데이터베이스 연결, 사용자 인증, 배포 과정은 일단 제외했습니다. 대신 핵심 기능인 영어 작문, AI 분석, 관련 표현 검색에 집중했습니다. 이렇게 하면 개발 경험이 없더라도 기능 구현에 더 집중할 수 있고, 프로젝트의 실현 가능성을 먼저 검증할 수 있다고 판단했기 때문입니다.

3.1 PRD(Product Requirements Document) 작성

개발을 시작하기 전에 ChatGPT에 프로젝트의 핵심 아이디어를 전달하고 PRD를 작성하도록 요청했습니다. FSI 학습법의 핵심 원리, 영어 학습 프로그램의 주요 기능, 그리고 개발 환경에 대한 내용을 자연어로 설명했고, ChatGPT가 이를 바탕으로 상세한 PRD 초안을 만들어주었습니다. 저는 모델을 o1을 사용했습니다.

아래 요구사항을 바탕으로 영어 학습 서비스(Study English with AI) 개발에 필요한 PRD(Product Requirements Document) 작성해줘.
- 최대한 단순한 UI로 학습에만 집중할 수 있는 환경 제공
- 날짜별 학습 기록을 리스트뷰 형식으로 관리
- 사용자 작문을 GPT로 분석해서 5단계로 실력을 평가(Beginner, Intermediate, Upper Intermediate, Advanced, Master)
- 분석 결과에 따라서 각 학습 기록마다 Lucide React 이모티콘으로 단계 표시
- 필수 기술스택으로 Next.js App Router, ShadCN, TailwindCSS 사용하고, 요구사항에 따른 추가적인 기술스택 업데이트
- LangChain, GPT API, Tavily Search API 등 AI 기능 구현에 필요한 라이브러리 최대한 활용
- MVP(Minimum Viable Product) 개발에 집중. 복잡한 기능보다는 핵심 기능 완성도에 초점
- 와이어프레임, 데이터 모델, API 설계 포함
- 성능 목표(페이지 로딩/API 응답 시간)와 보안 요구사항 정의
- 단계별 개발 마일스톤과 우선순위 정의

PRD는 다음 내용을 포함해야해
- 프로젝트 개요
- 유저 플로우
- 핵심 기능
- UI/UX 설계
- 데이터 모델링
- 기술스택
- 성능/보안 요구사항
- 개발 로드맵
- MVP 기능 개발 이후 추가 개선사항

3.2 개발 환경 설정과 기본 규칙 수립

개발을 시작하기 전에 먼저 프로젝트의 기본 구조와 규칙을 설정했습니다.

PRD.md 파일 생성

앞서 ChatGPT와의 대화를 통해 만든 PRD 내용을 'PRD.md' 파일로 저장했습니다. 이 문서는 개발 과정에서 지속적으로 참조할 수 있는 가이드라인이 되었습니다.

.cursorrules 설정

Cursor AI 에디터에서 일관된 코드 스타일과 개발 방향을 유지하기 위해 .cursorrules 파일을 생성했습니다. 여기에는 다음과 같은 규칙들을 포함했습니다.

# 규칙
## 패키지 매니저
- **패키지 매니저**: `pnpm`을 사용합니다.

## UI 컴포넌트 생성
- **ShadCN 컴포넌트를 우선적으로 활용합니다.**
- **ShadCN 컴포넌트 추가 명령어**:
  - CLI 명령어 예시: `pnpm dlx shadcn@latest add button`

## 스타일 가이드
- TailwindCSS 클래스 순서:
  1. Layout (width, height, display)
  2. Spacing (margin, padding)
  3. Typography (font, text)
  4. Colors (bg, text)
  5. Effects (shadow, opacity)

## 환경 변수
- `.env.local`에서 관리

## Git 관련
- 커밋 메시지 컨벤션:
  - feat: 새로운 기능 추가
  - fix: 버그 수정
  - docs: 문서 수정
  - style: 코드 포맷팅
  - refactor: 코드 리팩토링
  - test: 테스트 코드
  - chore: 빌드 업무 수정

 

Next.js + shadcn/ui 초기 설정

그다음으로 프로젝트의 기본 환경을 설정했습니다.

npx shadcn@latest init

이 명령어를 통해 Next.js 프로젝트가 생성되고, shadcn/ui의 기본 설정이 완료되었습니다.

Composer에 개발 요청

기본 환경 설정이 완료된 후, Cursor의 Composer 기능을 활용해 본격적인 개발을 시작했습니다. PRD.md 파일을 참조하여 각 기능별 구현을 요청했습니다. 특히 PRD에 정의된 기능들을 순차적으로 구현하도록 요청했는데, 이렇게 하면 각 단계별로 결과를 확인하고 필요한 수정을 할 수 있다는 장점이 있었습니다.
이렇게 기본적인 프로젝트 구조와 규칙을 설정함으로써, 이후 개발 과정에서 일관성을 유지하고 효율적으로 작업을 진행할 수 있었습니다. 특히 .cursorrules 파일은 AI와 협업하는 과정에서 일관된 코드 스타일을 유지하는 데 큰 도움이 되었습니다.

 

4. 실제 개발 결과

4.1 새로운 작문 작성 기능 구현

첫 번째로 구현한 기능은 작문 작성 페이지입니다. 이 페이지는 사용자가 영어 작문을 시작하는 첫 단계입니다.

개발 과정에서 초기 PRD에는 없었던 힌트 기능을 추가했습니다. 사용자가 주제와 관련된 표현을 미리 참고할 수 있도록 하여 작문의 진입 장벽을 낮추기 위함이었습니다. GPT에 각 주제에 맞는 실용적인 예시 문장들을 요청하여 사용자에게 제공함으로써, 작문을 시작하는 단계에서부터 실질적인 도움을 줄 수 있게 되었습니다.

4.2 작문 분석 기능 구현

두 번째로 구현한 기능은 작문 분석입니다. 사용자가 작문을 완료하고 "분석하기" 버튼을 클릭하면, GPT API를 통해 작성된 영어 문장을 분석합니다. 분석은 5단계(Beginner, Intermediate, Upper Intermediate, Advanced, Master)로 평가되며, 각 단계별 상세한 피드백을 제공합니다. GPT는 문법적 정확성, 어휘 사용, 문장 구조의 다양성, 표현의 자연스러움 등을 종합적으로 평가하여 사용자의 현재 영어 실력을 진단하고 개선점을 제시합니다.

4.3 유사 표현 검색 기능 구현

세 번째로 구현한 기능은 유사 표현 검색입니다. 작문 분석이 완료되면 Tavily API를 활용하여 온라인에서 관련된 영어 표현들을 검색합니다. 검색된 결과를 GPT에 전달하면 사용자가 작성한 것과 비슷한 맥락의 자연스러운 영어 표현으로 재구성하여 보여줍니다. 단순한 작문 교정을 넘어서, 실제 원어민들이 비슷한 상황에서 어떤 표현을 사용하는지 학습할 수 있게 해주는 기능입니다.

 

이 외에도 여러 가지 기능들을 추가로 구현했습니다. 자주 사용하고 싶은 표현을 저장할 수 있는 단어장 기능, 작성한 글을 수정하고 삭제할 수 있는 기능 등을 개발했습니다. 모든 기능은 코드를 직접 작성하지 않고, Cursor의 Composer에 자연어로 요구사항을 설명하는 방식으로 구현했습니다. 예를 들어 "단어장에 표현을 저장하고 조회할 수 있는 기능을 만들어줘"와 같이 대화하듯 요청하면, AI가 이해하고 적절한 코드를 생성해 주었습니다. 개발 과정에서 발생하는 오류나 수정 사항들도 대화를 통해 해결했습니다.

5. AI 주도 개발의 한계와 개선점

제약사항과 우려

• 복잡한 비즈니스 로직 구현의 한계
• AI 의존도가 높을 경우 반복적 오류 발생
• 코드 품질 관리의 어려움

개선 방향

• 명확한 PRD 문서 작성이 중요
  • 상세할수록 AI의 이해도 상승
  • 오류 발생 빈도 감소
• 개발 표준과 규칙 정립 필요
  • .cursorrules 등 가이드라인 중요
  • 일관된 개발 패턴 유지

---

AI 도구들을 활용한 개발은 MVP나 프로토타입 제작에 효과적이지만, 프로덕션 단계의 개발은 아직 제한적입니다. 하지만 명확한 PRD 작성과 개발 표준을 잘 정립한다면, 더 효율적인 개발이 가능할 것으로 보입니다.

여담이지만, 이 영어 학습 프로그램의 이름은 ChatGPT에게 추천을 받아 'Lingular Lab'으로 정했습니다. Language와 Singular의 조합으로, 독특하고 기억하기 쉬운 이름이라며 추천했습니다. 아이콘은 AI 이미지 생성 도구인 Recraft를 활용해 고래와 상어가 대화하는 모습을 디자인했습니다.

이렇게 프로그램 이름부터 아이콘까지, AI 도구들을 활용해 브랜딩 작업까지 완성할 수 있었습니다.

---

[Github] https://github.com/yunwoong7/ai-driven-dev-playground/