웹 개발을 위해 관리해야 할 사이트 및 계정

웹 서비스를 운영·개발할 때 준비·관리해야 할 계정·인프라·도구와 서로의 관계를 정리한다.

---

1. Google 메일

• 각종 관리 사이트 로그인 용도
• 관리 사이트 인증 확인 및 업무 관리용 메일

프로젝트(고객)가 다르면 고객용 Google 계정을 따로 쓰는 것을 권장한다.
한 계정으로 여러 도메인을 관리하면 관리 사이트가 유료 플랜인 경우가 많다.

---

2. GitHub

• Google 메일로 가입하면 편리함
• 소스코드 관리에 필수 (Private 저장소 권장)

---

3. Cloud Server

자체 VPS/클라우드 서버에서 운영할 때의 구성이다.

3.1 Supabase (Docker 설치·운영)

• Self-hosting 으로 사용함

3.2 API 운영

• Node.js, Python 등
• Docker 운영이 효율적
• 별도 API 서버는 동작하지 않음 -> SvelteKit에서 직접 API 구현

3.3 웹사이트 운영

• 이미지·파일 등 사이트 운영을 위한 충분한 스토리지 필요

---

4. 관리 사이트

4.1 서버 콘솔

서버 세팅 항목:

• 사용자 계정
• Docker
• PM2
• Nginx + Certbot
• SSL
• crontab (DB Backup 등)
• 위 항목 모두 사용함

4.2 도메인 관리 (예: gabia.com)

• 도메인 및 DNS 관리
• 서버 운영을 위해 직접 설정할 수 있어야 함

4.3 Google

4.4 Vercel (vercel.com)

• 클라우드 서버가 없을 때 GitHub 연동으로 Front 배포·도메인 연결
• GitHub 계정으로 가입하면 편리함
• 사용하지 않음

4.5 Supabase Cloud (supabase.com)

• 클라우드 서버가 없을 때 DB 관리용으로 연동
• Google 계정 가입 권장
• 소셜 로그인·이메일 전송 지원
• 사용하지 않음

4.6 Resend (resend.com)

• 이메일 전송에 필수
• Google 계정 가입 권장

4.7 Sentry (sentry.io)

• 서비스 사이트 모니터링
• 오류(Crash), 예외(Exception), 성능(APM), 사용자 세션 등을 실시간 수집·분석

4.8 Cloudflare (cloudflare.com)

• 보안 및 서비스 운영
• Turnstile 위젯 설정 (CAPTCHA 대안)

4.9 YouTube

• Google 계정 이용 권장
• 웹에 동영상을 게시할 때 유튜브 업로드 후 링크로 삽입

---

5. PWA · Open Graph

최적화된 사용자 경험·공유를 위한 권장 사항이다.

5.1 PWA (Progressive Web App)

• 웹과 네이티브 앱의 장점을 결합
• 앱스토어 설치 없이 URL만으로 홈 화면 아이콘 추가
• 오프라인 작동, 푸시 알림 등 앱 수준 기능
• 비용 효율·크로스 플랫폼에 유리

5.2 Open Graph

• SNS·메신저 링크 공유 시 미리보기(제목·설명·이미지) 설정
• SEO에도 도움이 됨

---

6. 개발 도구

Cursor IDE

• 소스코드 코딩·관리 (GitHub 연동) — 유료 Plan 권장
• SSH 접속 관리 (AI를 활용한 서버 작업)

---

7. 참고 · 운영 원칙

1. 프로젝트별로 위 계정·설정을 분리·관리하는 것이 중요함
2. 고객이 다르면 Google 계정은 고객용으로 별도 가입하는 것이 좋음
3. 개발자용 관리 사이트를 별도 개발해 두는 것도 좋은 방법
4. 클라우드 서버가 있는 경우
   • Vercel / Supabase Cloud를 써도 되지만, 유휴 시 자동 중지, 도메인·DB Backup 등 유료 이슈가 있음
   • → 서버에 직접 배포·설정하는 것을 추천 (서버 비용은 발생)
5. 클라우드 서버가 없는 경우
   • Vercel + Supabase Cloud 조합을 사용

---

연관성 도식

계정·로그인 중심

flowchart TB
  Gmail["Google 메일<br/>(중앙 계정)"]

  Gmail --> GitHub
  Gmail --> GDev["Google 개발자 콘솔"]
  Gmail --> GSC["Google Search Console"]
  Gmail --> YT["YouTube"]
  Gmail --> Resend
  Gmail --> SupabaseCloud["supabase.com"]
  Gmail --> Sentry
  Gmail --> CF["Cloudflare"]

  GitHub --> Cursor["Cursor IDE"]
  GitHub --> Vercel