AI와 함께 커뮤니티 서비스 만들기(Gemini, Claude, Cursor)

시작은 단순한 아이디어였다

요즘 ChatGPT, Claude 같은 AI가 핫하지만, 정작 직장인들은 "어떻게 써야 하지?"라는 생각만 든다고 한다. 그래서 '실무에서 바로 쓸 수 있는 AI 활용법'을 알려주는 온라인 강의 플랫폼을 만들어보기로 했다. 전문가와 사용자가 소통할 수 있는 커뮤니티 기능도 넣고 싶었다.

근데 이번엔 혼자 코딩하지 않았다. Gemini, Claude, Cursor AI와 함께 마치 3명의 개발자가 협업하는 것처럼 프로젝트를 진행했다. 이걸 나는 '바이브 코딩' 이라고 부르기로 했다.(요즘 워낙 핫한 주제이기도 하다)

팀원 소개: 나와 AI 3총사

👨‍💻 나: 프로젝트 매니저, 최종 의사결정권자, 코드 검토 및 실행
🤖 Gemini: 전체 컨셉 설계 + 백엔드 개발 담당
🧠 Claude: 전체 컨셉 설계 + 프론트엔드 개발 담당
⚡ Cursor AI: 전체 코드 리팩토링, 디버깅, 프론트-백엔드 연결 담당

원래 혼자 했으면 2-3주는 걸렸을 프로젝트를 마치 3명의 전문 개발자가 동시에 작업하는 것처럼 진행했다. 결과적으로 1주일 만에 풀스택 MVP를 완성할 수 있었다. 본격적인 시작 전에 아래는 중간중간 진행률 확인할 수 있게 프롬프트를 입력했다.

역할 분담과 개발 프로세스

1단계: 전체 컨셉 설계 (Gemini + Claude)

처음에 "실무 AI 활용 강의 플랫폼을 만들려고 하는데, 어떤 기능들이 필요할까?"라고 두 AI에게 동시에 물어봤다.

Gemini는 기술적 아키텍처와 성능 중심으로 접근했고, Claude는 사용자 경험과 인터페이스 관점에서 답변해줬다. 두 관점을 합쳐서 다음과 같은 최종 컨셉이 나왔다:

• 핵심 기능: 강의 등록/수강, 사용자 관리, 커뮤니티 Q&A
• 기술 스택: Django(백엔드) + React(프론트엔드) + PostgreSQL
• 인증: JWT 기반 토큰 인증
• 배포: 프론트-백엔드 분리 아키텍처

2단계: 백엔드 개발 (Gemini 담당)

Gemini에게 "Django REST Framework로 온라인 강의 플랫폼 백엔드를 만들어달라"고 요청했다. 필요한 모델, API 엔드포인트, 인증 로직까지 체계적으로 설계해줬다.

# Gemini가 설계한 사용자 모델
class User(AbstractUser):
    role = models.CharField(
        max_length=20,
        choices=[('student', '학생'), ('instructor', '강사')],
        default='student'
    )
    created_at = models.DateTimeField(auto_now_add=True)

# Gemini가 설계한 강의 모델
class Course(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    instructor = models.ForeignKey(User, on_delete=models.CASCADE)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    created_at = models.DateTimeField(auto_now_add=True)

이 백엔드 구조는 완전히 Gemini가 설계한 대로 구현했다. API 엔드포인트부터 데이터베이스 스키마까지 모든 게 체계적이었다.

3단계: 프론트엔드 개발 (Claude 담당)

백엔드가 완성되자 Claude에게 "React로 사용자 친화적인 온라인 강의 플랫폼 프론트엔드를 만들어달라"고 했다. Claude는 사용자 경험을 중심으로 다음과 같은 컴포넌트들을 설계해줬다.

// Claude가 설계한 강의 목록 컴포넌트
const CourseList = () => {
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchCourses();
  }, []);

  const fetchCourses = async () => {
    try {
      const response = await api.get('/courses/');
      setCourses(response.data);
    } catch (error) {
      console.error('강의 목록을 불러오는데 실패했습니다:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="course-grid">
      {courses.map(course => (
        <CourseCard key={course.id} course={course} />
      ))}
    </div>
  );
};

Claude의 장점은 사용자 관점에서 직관적인 인터페이스를 만들어준다는 것이었다. 에러 처리, 로딩 상태, 사용자 피드백까지 세심하게 고려해줬다.

4단계: 통합과 최적화 (Cursor AI 담당)

백엔드와 프론트엔드가 각각 완성되자, 이제 Cursor AI의 진가가 발휘됐다. 전체 코드베이스를 한 번에 볼 수 있는 Cursor의 장점을 활용해서

1. API 연동 최적화: 프론트엔드의 API 호출과 백엔드 엔드포인트를 자연스럽게 연결
2. 에러 핸들링 통합: 백엔드 에러 응답과 프론트엔드 에러 처리 로직 일치화
3. 코드 리팩토링: 중복 코드 제거, 성능 최적화
4. CORS 설정: 프론트-백엔드 간 통신을 위한 설정 자동화

핵심 기능 구현 과정

권한 시스템: Gemini의 백엔드 로직

Gemini가 설계한 권한 시스템이 정말 인상적이었다.

from rest_framework.permissions import BasePermission

class IsInstructor(BasePermission):
    def has_permission(self, request, view):
        return request.user.is_authenticated and request.user.role == 'instructor'

이 권한을 강의 생성 API에 적용했는데, 처음엔 제대로 작동하는지 확신이 안 섰다. 그런데 프론트엔드에서 강의 생성 버튼이 사라졌더라.

"어? 버그인가?" 싶어서 당황했는데, 사용자 role을 'instructor'로 바꾸니까 버튼이 다시 나타났다. 그때 "아, Gemini와 Claude가 만든 백엔드-프론트엔드 로직이 제대로 연동되고 있구나"라는 걸 확인할 수 있었다.

JWT 인증: 백엔드-프론트엔드 완벽 연동

# Gemini가 설계한 백엔드 JWT 설정
SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
    'ROTATE_REFRESH_TOKENS': True,
}

// Claude가 만든 프론트엔드 인증 로직
const login = async (credentials) => {
  try {
    const response = await api.post('/auth/login/', credentials);
    const { access, refresh } = response.data;
    
    localStorage.setItem('access_token', access);
    localStorage.setItem('refresh_token', refresh);
    
    setAuth({ token: access, user: response.data.user });
  } catch (error) {
    throw new Error('로그인에 실패했습니다.');
  }
};

인상 깊었던 점은 Gemini의 백엔드 토큰 설정과 Claude의 프론트엔드 인증 로직이 별도로 작업했는데도 완벽하게 호환됐다는 것이다.

Cursor AI의 마법: 전체 통합과 디버깅

가장 기억에 남는 통합 과정

Gemini가 만든 백엔드와 Claude가 만든 프론트엔드를 연결하는 과정에서 예상치 못한 문제들이 생겼다. CORS 에러, API 엔드포인트 불일치, 데이터 형식 차이 등등...

이때 Cursor AI가 정말 유용했다. 전체 프로젝트를 한 번에 스캔해서 코드 디버깅이 가능했다.

# Cursor가 자동으로 추가한 CORS 설정
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React 개발 서버
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

// Cursor가 수정한 API 클라이언트
const api = axios.create({
  baseURL: 'http://localhost:8000/api',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
  }
});

// 토큰 자동 첨부 인터셉터
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Cursor AI는 백엔드와 프론트엔드 코드를 동시에 보면서 어디서 연결이 안 되는지 정확히 찾아내고, 양쪽 코드를 모두 수정해줬다.

리팩토링의 힘

개발이 거의 끝나갈 때쯤, Cursor AI에게 "전체 코드를 리팩토링해달라"고 했다. 

1. 중복 코드 제거: 비슷한 API 호출 로직을 custom hook으로 통합
2. 에러 처리 일관성: 백엔드-프론트엔드 에러 메시지 형식 통일
3. 성능 최적화: 불필요한 렌더링 방지, API 호출 최적화
4. 코드 가독성: 변수명, 함수명 개선

혼자였다면 놓쳤을 최적화 포인트들을 찾아내 줬다.

숫자로 보는 성과

• 개발 기간: 1주일 (기존 예상: 2-3주)
• 구현한 기능: 풀스택 MVP (백엔드 API 12개 + 프론트엔드 컴포넌트 8개)
• 해결한 이슈: 20개 이상 (통합 과정에서 발생한 CORS, 인증, 데이터 형식 문제들)
• AI 협업 세션: 대략 30회
• 구글링 횟수: 3회 미만 (평소의 20분의 1)
• 코드 리팩토링: 전체 코드 3번 최적화

가장 큰 깨달음: 3명의 전문가와 함께하는 개발

이번 프로젝트를 통해 깨달은 건, AI를 각자의 전문 분야에 맞게 활용하면 혼자서는 불가능한 속도와 품질을 달성할 수 있다는 것이다.

• Gemini: 백엔드 아키텍처와 로직 설계의 달인
• Claude: 사용자 경험을 고려한 프론트엔드 개발 전문가
• Cursor AI: 전체 시스템을 보는 통합 및 최적화 전문가

각자 다른 강점을 가지고 있어서, 상황에 맞게 적절한 AI에게 작업을 맡기는 게 핵심이었다. 마치 백엔드 개발자, 프론트엔드 개발자, 시니어 아키텍트가 있는 팀처럼 역할 분담이 명확했다.

다음 스텝: 실제 서비스로 발전시키기

이제 튼튼한 풀스택 MVP가 완성됐으니, 다음은 실제 서비스로 발전시키는 단계다.

1. 배포 및 운영: AWS/GCP를 활용한 실제 배포
2. 고도화: 결제 시스템, 화상 강의, 파일 업로드 기능 추가
3. 성능 최적화: 대용량 데이터 처리, 캐싱 전략
4. 모니터링: 로그 수집, 에러 추적, 성능 모니터링

마무리하며

혼자 개발하는 시대는 끝났다. 이제는 AI와 함께 더 빠르고, 더 정확하고, 더 체계적으로 개발할 수 있다. 중요한 건 AI를 어떻게 활용하느냐인 것 같다.개발자라면 한 번쯤 AI와 '바이브 코딩'을 경험해보길 추천한다. 생각보다 훨씬 효율적이고, 많이 배울 수 있다.

---

🔗 프로젝트 주요 기술 스택

• Backend: Django, Django REST Framework (Gemini 담당)
• Frontend: React, Axios, Context API (Claude 담당)
• Database: PostgreSQL
• Authentication: JWT (djangorestframework-simplejwt)
• Integration & Optimization: Cursor AI 담당
• AI Tools: Gemini, Claude, Cursor AI

📚 다음 포스트 예고

• AWS로 풀스택 앱 배포하기
• AI와 함께하는 성능 최적화
• 실제 서비스 운영 경험담

---