정적 배포 vs 서버리스: AI 웹앱을 Vercel에 올릴 때 아키텍처 선택의 기준

정적 배포와 서버리스, 왜 구분해야 할까?

사이드 프로젝트로 AI 웹앱을 만들었다면 배포는 자연스러운 다음 단계다. 그런데 Vercel 대시보드에 접속하면 마주치는 선택지가 있다: 정적 사이트로 배포할 것인가, 아니면 서버리스 함수를 함께 사용할 것인가?

이 결정이 단순해 보이지만, 실제로는 프로젝트의 확장성·비용·유지보수 난도를 크게 좌우한다. 특히 AI 모델 API 호출이나 데이터 처리가 필요한 웹앱이라면 더욱 그렇다. 이 글에서는 두 방식의 차이를 명확히 하고, 언제 어떤 것을 선택해야 하는지 예시 시나리오로 풀어본다.

정적 배포: 빠르고 단순하지만 제한적

정적 배포는 HTML, CSS, JavaScript 파일을 그대로 Vercel의 CDN에 올리는 방식이다. 빌드 시점에 모든 콘텐츠가 고정되므로, 사용자가 접속할 때 서버는 파일만 내려준다.

장점:

• 배포 속도가 빠른 편이다
• 별도의 서버 비용이 들지 않는다 (CDN 트래픽은 플랜별 한도 안에서 제공된다)
• 캐싱이 자동으로 최적화된다
• 운영 복잡도가 거의 없다

제약:

• 백엔드 로직을 실행할 수 없다
• 데이터베이스 쿼리나 외부 API 호출을 서버에서 처리하지 못한다
• 클라이언트 JavaScript에서만 API 키를 사용할 수 있어 보안 위험이 있다

예를 들어, 공개된 뉴스 API를 프론트엔드에서 직접 호출하는 AI 요약 도구라면 정적 배포로 충분하다. 하지만 OpenAI API 키를 안전하게 보호해야 한다면? 그때부터 문제가 생긴다.

서버리스 함수: 유연하지만 복잡도 증가

Vercel의 서버리스 함수(Vercel Functions)를 사용하면, 프로젝트의 /api 폴더에 작성한 JavaScript 또는 TypeScript 코드가 요청 시마다 실행된다.

장점:

• API 키를 서버에서 안전하게 관리할 수 있다
• 데이터베이스 쿼리, 외부 API 호출, 복잡한 비즈니스 로직을 처리 가능
• 동적 콘텐츠 생성이 가능하다
• 환경 변수로 민감한 정보를 분리할 수 있다

제약 및 고려사항:

• 콜드 스타트 지연이 발생할 수 있다 (첫 요청이 약간 느림)
• 요청당 실행 시간 제한이 있다 (플랜별 상한이 다르므로 공식 문서에서 확인하자)
• 배포 후 테스트 복잡도가 증가한다
• 환경 변수 설정을 별도로 해야 한다

구체적 시나리오: 사용자가 입력한 텍스트를 AI 모델에 보내 분석 결과를 받아오는 웹앱을 만든다고 하자. 프론트엔드에서 직접 OpenAI API를 호출하면 API 키가 노출된다. 대신 /api/analyze 엔드포인트를 만들어, 클라이언트는 여기로 요청을 보내고 서버리스 함수가 실제 API 호출을 처리하도록 하면 안전하다.

// /api/analyze.js (Vercel 서버리스 함수)
export default async function handler(req, res) {
  const { text } = req.body;
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ model: 'your-model-name', messages: [{ role: 'user', content: text }] })
  });
  const data = await response.json();
  res.status(200).json(data);
}

프론트엔드는 이 엔드포인트만 호출하면 되므로, API 키가 클라이언트에 노출되지 않는다.

프로젝트 규모별 선택 기준

정적 배포를 선택해야 할 때:

• 프로토타입 단계의 데모 앱
• 공개 API만 사용하는 프로젝트
• 사용자 입력을 저장할 필요가 없는 경우
• 빠른 피드백이 중요할 때

예: AI 이미지 검색 엔진 (Unsplash API 사용, 사용자 검색어는 저장 안 함)

서버리스 함수를 선택해야 할 때:

• API 키나 데이터베이스 자격증명이 필요한 경우
• 사용자 데이터를 저장하거나 조회해야 할 때
• 요청 검증이나 인증 로직이 필요할 때
• 외부 서비스 간 데이터 중개 역할을 할 때

예: 사용자 가입·로그인을 지원하는 AI 챗봇 (데이터베이스 필요)

하이브리드 접근: 둘 다 함께 사용하기

실제로는 정적 배포와 서버리스를 조합하는 AI 웹앱이 많다. 프론트엔드는 정적으로 배포되고, 민감한 작업만 서버리스 함수에서 처리한다.

이렇게 하면 대부분의 트래픽(페이지 로드, 정적 자산)은 빠르고 저렴하게 처리되고, 필요한 부분만 서버리스의 유연성을 활용할 수 있다. Vercel은 이런 구조를 기본으로 지원하므로, 프론트엔드 코드와 api/ 폴더의 함수를 함께 배포할 수 있다.

배포 후 운영 복잡도 비교

정적 배포:

• 모니터링: 거의 필요 없음 (CDN 상태만 확인)
• 문제 해결: 빌드 실패 또는 캐시 이슈 정도
• 비용 추적: 신경 쓸 필요 없음

서버리스 함수:

• 모니터링: Vercel 대시보드에서 함수 실행 시간, 에러율 추적
• 문제 해결: 콜드 스타트, 시간 초과, 환경 변수 누락 등 확인 필요
• 비용 추적: 요청 수와 실행 시간에 따라 비용 증가

프로젝트가 성장하면서 트래픽이 증가하면, 서버리스 함수의 비용을 정기적으로 검토해야 한다. Vercel Pro 플랜(월 $20)을 사용하면 일정 수준까지는 추가 비용이 없지만, 그 이상으로 확장되면 다른 호스팅 옵션을 고려할 시점이 온다.

마이그레이션은 얼마나 어려울까?

처음에 정적으로 배포했다가 나중에 서버리스 함수를 추가하는 것은 매우 간단하다. 새로운 엔드포인트를 /api 폴더에 추가하고 배포하면 끝이다. 기존 정적 파일은 그대로 유지된다.

반대로 서버리스에서 정적으로 축소하는 것도 가능하지만, 이미 서버에 의존하는 로직이 있다면 프론트엔드를 수정해야 한다.

자주 묻는 질문

정적 배포로 시작했는데 나중에 서버리스로 전환할 수 있나요?

물론이다. Vercel은 두 방식을 동시에 지원하므로, 필요한 시점에 /api 폴더를 추가하고 함수를 작성한 후 배포하면 된다. 기존 정적 파일은 영향을 받지 않는다. 다만 프론트엔드 코드에서 서버리스 엔드포인트를 호출하도록 수정해야 한다.

서버리스 함수의 콜드 스타트 지연이 얼마나 심한가요?

콜드 스타트 지연은 함수의 크기와 초기화 작업에 따라 달라진다. 의존성이 크거나 초기화 로직이 무거우면 첫 요청이 눈에 띄게 느려질 수 있으니, 의존성을 가볍게 유지하고 초기화 작업을 줄이는 것이 우선이다.

사이드 프로젝트 규모라면 비용이 얼마나 드나요?

Vercel의 무료 플랜은 정적 배포와 서버리스 함수를 모두 지원하며, 월 100만 건의 함수 호출까지 무료다. 대부분의 초기 사이드 프로젝트는 이 한도 안에서 운영할 수 있다. Pro 플랜(월 $20)으로 업그레이드하면 더 많은 리소스와 우선 지원을 받는다.

결론: 작게 시작해서 필요에 따라 확장하기

최적의 아키텍처는 프로젝트의 현재 상태에 맞춰야 한다. 처음부터 모든 것을 서버리스로 구축할 필요는 없다. 정적 배포로 빠르게 론칭한 후, 사용자 피드백과 기능 요구사항에 따라 서버리스 함수를 점진적으로 추가하는 것이 현명하다.

Vercel은 이런 유연한 접근을 지원하도록 설계되었다. 프로젝트가 성장하면서 아키텍처도 함께 진화할 수 있다는 뜻이다.

만든 AI 웹앱이 준비됐다면, 이제 배포할 차례다. Vibeollio에 프로젝트를 등록해서 실제 사용자들의 피드백을 받아보자. 정적 배포로 시작했든 서버리스를 함께 사용했든, 커뮤니티의 반응은 다음 개선 방향을 결정하는 데 가장 큰 도움이 될 것이다.