Part 5.4 유지보수와 모니터링: 끝은 곧 시작

제가 수강생분들한테 매일매일 하는 말이 있었습니다

• 출시는 끝이 아니라 시작입니다.

실제 사용자가 쓰기 시작하면 예상치 못한 문제가 발생하고, 이를 파악하고 대응하는 것이 유지보수입니다.

내 플랫폼을 잘 유지하는 데 필요한 모니터링과 유지보수의 기초를 다룹니다.

---

1. 에러 트래킹: 사용자가 겪는 에러 알아내기

사용자가 에러를 겪어도 말해주지 않으면 모릅니다. 대부분은 그냥 나가버립니다. 그래서 에러를 추적해야 합니다.

왜 에러 트래킹이 필요한가?

• 브라우저 콘솔 에러는 사용자 화면에서만 보임

• 사용자가 직접 연락하지 않으면 에러 발생 자체를 모름

• 어떤 환경(브라우저, 기기)에서 문제인지 파악 불가

요새는 에러 트래킹툴도 많이 등장하고, 저렴한 것도 많습니다. 한 번 직접 검색해서 어떤 게 좋을지를 판단해보시기 바랍니다. 저는 예전부터 사용해오던 Sentry를 기준으로 작성하겠습니다. Sentry좋아요!!

Sentry 설정하기

Sentry는 가장 널리 쓰이는 에러 트래킹 서비스입니다. 무료 플랜으로 시작 가능합니다.

1단계: 가입 및 프로젝트 생성

1. sentry.io 가입

2. "Create Project" → React/Next.js 선택

3. DSN(연결 키) 복사

2단계: 설치

npm install @sentry/react

3단계: 적용

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,  // "production" 또는 "development"
  
  // 성능 모니터링 (선택사항)
  tracesSampleRate: 0.1,  // 10% 샘플링
});

이 때 어디에 적용할 지 모르겠다면? 이제 어떻게 해야 할 지 감이 잡히시죠? LLM한테 물어보면 됩니다. 어디 넣어야 할 지 바로 알려주고, 알려주는 걸 넘어서 코드도 다 만들어줄거에요. 우리는 key값을 어디에다 넣는다? env에!

4단계: 환경 변수 추가

# .env
NEXT_PUBLIC_SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx

Vercel에도 같은 환경 변수를 추가하세요.

Sentry에서 확인할 수 있는 것

에러 발생 시 Sentry 대시보드에서:

✓ 에러 메시지와 스택 트레이스
✓ 발생 시간과 빈도
✓ 사용자 브라우저, 기기, OS
✓ 에러 발생 직전 사용자 행동
✓ 영향받은 사용자 수

---

2. 사용자 분석

왜 분석이 필요한가?

• 실제로 사용자가 있는지 확인

• 어떤 기능을 많이 쓰는지 파악

• 어디서 이탈하는지 발견

• 개선 방향 결정에 활용

간단한 분석: Vercel Analytics

Vercel을 쓴다면 내장 분석 기능이 있습니다.

1. Vercel 대시보드 → Analytics 탭

2. "Enable" 클릭

3. 필요한 패키지 설치 - 대시보드에 나와있는대로 설치!

핵심 지표 (KPI)

처음엔 이것만 봐도 충분합니다:

지표	의미	좋은 신호
DAU	일일 활성 사용자	꾸준히 증가
세션 시간	평균 사용 시간	3분 이상
이탈률	한 페이지만 보고 나감	50% 이하
전환율	원하는 행동 완료	업종마다 다름

---

3. 버그 리포트

에러 트래킹으로 못 잡는 문제도 있습니다.

피드백 받는 방법

방법 1: 간단한 피드백 버튼

function FeedbackButton() {
  const handleFeedback = () => {
    const message = prompt('불편한 점이나 개선 의견을 알려주세요:');
    if (message) {
      // 이메일로 보내기, DB에 저장, 또는 Slack으로 전송
      sendFeedback(message);
      alert('피드백 감사합니다!');
    }
  };

  return (
    <button onClick={handleFeedback} className="feedback-btn">
      💬 피드백
    </button>
  );
}

방법 2: Google Form 연동

1. Google Forms에서 피드백 폼 생성

2. 앱에 링크 추가

<a 
  href="https://forms.gle/xxx" 
  target="_blank"
  className="feedback-link"
>
  버그 신고 / 피드백
</a>

방법 3: 이메일 링크

<a href="mailto:support@myapp.com?subject=버그 신고">
  문제 신고하기
</a>

버그 리포트 템플릿

사용자에게 이런 정보를 요청하면 해결이 빨라집니다:

1. 어떤 문제가 발생했나요?
2. 어떤 동작을 했을 때 발생했나요?
3. 예상한 결과는 무엇이었나요?
4. 사용 환경 (브라우저, 기기)
5. 스크린샷 (가능하면)

---

4. 업데이트 배포

버그를 고치거나 기능을 추가했으면 배포해야 합니다.

기본 배포 흐름

코드 수정 → 로컬 테스트 → git push → 자동 배포 → 확인

안전한 배포 체크리스트

배포 전
□ npm run build 성공?
□ 주요 기능 로컬 테스트 완료?
□ 새 환경 변수가 필요하면 Vercel에 추가?

배포 후
□ 배포 사이트에서 주요 기능 확인
□ 콘솔 에러 없는지 확인
□ Sentry에 새 에러 없는지 확인

핫픽스: 긴급 수정

프로덕션에서 심각한 버그 발견 시:

# 1. 빠르게 수정
# 2. 로컬에서 해당 버그만 테스트
# 3. 바로 배포
git add .
git commit -m "hotfix: 결제 버튼 클릭 안 되는 문제 수정"
git push

롤백: 이전 버전으로 되돌리기

새 배포 후 문제가 심각하면 이전 버전으로 롤백:

1. Vercel 대시보드 → Deployments

2. 이전 정상 버전 찾기

3. "..." → "Promote to Production"

빠르게 이전 버전으로 되돌릴 수 있습니다.

---

5. 비용 모니터링

바이브코딩에서 예상치 못한 비용이 발생하는 경우가 많습니다. 여기서 꼭 말씀드리고 싶은 것이, 초기 비용에 대해서는 관대해질 필요가 있습니다. 바이브코딩을 하는 대부분의 사람들은 프로덕트를 만들어서 수익을 창출하는게 목적이실거에요. 당연히 수익계산할 때 비용을 낮추면 좋지만, 클라우드를 사용하는 만큼 또 유저가 인입이 늘어날 수록 클라우드 비용은 당연히 올라갈 수 밖에 없습니다. 즉, 일정 허용 가능한 범위는 쿨하게 비용으로 지불하시고, 그 안에서 비즈니스모델을 구성하셔서 수익을 도모하시는 것을 추천드립니다.

비용이 발생하는 곳

서비스	무료 한도	초과 시
Vercel	월 100GB 대역폭	사용량당 과금
Supabase	500MB DB, 2GB 전송	플랜 업그레이드
OpenAI API	없음 (유료)	토큰당 과금
Sentry	월 5,000 에러	플랜 업그레이드