콘텐츠로 이동

2. 시스템 아키텍처

dcamp 웹사이트는 헤드리스 CMS 아키텍처를 채택했습니다. 쉽게 말해, 사용자가 보는 화면(프론트엔드)과 데이터를 관리하는 시스템(백엔드)을 완전히 분리한 구조입니다.

┌─────────────────────────────────────────────────────────────────────────┐
│ 인터넷 사용자 │
└───────────────────────────────┬─────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ Cloudflare (보안/CDN) │
│ - DDoS 방어, SSL 인증서 관리 │
└───────────────────────────────┬─────────────────────────────────────────┘
┌───────────────┴───────────────┐
▼ ▼
┌───────────────────────────┐ ┌───────────────────────────┐
│ dcamp.kr │ │ admin.dcamp.kr │
│ (프론트엔드) │ │ (관리 시스템) │
│ │ │ │
│ - Astro 프레임워크 │ │ - Drupal CMS │
│ - 정적 페이지 + SSR │ │ - JSON:API 제공 │
│ - 일반 사용자 접속 │ │ - 관리자 전용 │
└───────────────┬───────────┘ └───────────────────────────┘
│ │
│ JSON:API │
└───────────────────────────────┘
(데이터 요청/응답)
장점설명
독립적인 개발화면과 데이터 관리를 별도로 개발/수정할 수 있음
보안 강화관리 시스템을 일반 사용자로부터 완전 분리
성능 최적화프론트엔드에서 필요한 데이터만 선택적으로 요청
확장 용이모바일 앱 등 새로운 채널 추가가 쉬움

일반 사용자가 접속하는 웹사이트입니다.

┌─────────────────────────────────────────────┐
│ dcamp.kr (프론트엔드) │
├─────────────────────────────────────────────┤
│ [페이지 구성] │
│ - 메인 페이지 (프로그램, 스타트업 소개) │
│ - 포트폴리오 (스타트업/파트너 목록) │
│ - 프로그램 (이벤트, 신청 페이지) │
│ - 인사이트 (뉴스, 아티클) │
│ - 마이페이지 (회원 정보, 신청 내역) │
├─────────────────────────────────────────────┤
│ [기술] │
│ - Astro (정적 사이트 생성기) │
│ - 서버 사이드 렌더링 (SSR) │
│ - Svelte 컴포넌트 │
└─────────────────────────────────────────────┘

관리자가 사용하는 콘텐츠 관리 시스템이자 API 서버입니다.

┌─────────────────────────────────────────────┐
│ admin.dcamp.kr (관리 시스템) │
├─────────────────────────────────────────────┤
│ [관리 기능] │
│ - 콘텐츠 관리 (공지, 인사이트, 페이지) │
│ - 포트폴리오 관리 (스타트업, 파트너) │
│ - 프로그램 관리 (이벤트, 심사) │
│ - 회원 관리 (일반회원, 관리자) │
│ - 신청서 관리 (웹폼, 제출내역) │
├─────────────────────────────────────────────┤
│ [기술] │
│ - Drupal 11 (CMS 프레임워크) │
│ - PHP 8.3 │
│ - MariaDB (데이터베이스) │
│ - JSON:API (데이터 통신) │
└─────────────────────────────────────────────┘

[관리자] [관리 시스템] [dcamp.kr] [사용자]
│ │ │ │
│ 1. 콘텐츠 작성 │ │ │
│ ─────────────────────► │ │ │
│ │ │ │
│ │ 2. DB 저장 │ │
│ │ ──────┐ │ │
│ │ ◄─────┘ │ │
│ │ │ │
│ │ │ 3. 페이지 요청 │
│ │ │ ◄───────────────── │
│ │ │ │
│ │ 4. API로 데이터 요청 │ │
│ │ ◄────────────────────── │ │
│ │ │ │
│ │ 5. JSON 데이터 응답 │ │
│ │ ──────────────────────► │ │
│ │ │ │
│ │ │ 6. 화면 표시 │
│ │ │ ─────────────────► │
[사용자] [dcamp.kr] [관리 시스템]
│ │ │
│ 1. 로그인 요청 │ │
│ ────────────────────► │ │
│ │ │
│ │ 2. 인증 API 호출 │
│ │ ─────────────────────► │
│ │ │
│ │ │ 3. 비밀번호 확인
│ │ │ 4. 토큰 발급
│ │ │
│ │ 5. 토큰 반환 │
│ │ ◄───────────────────── │
│ │ │
│ 6. 로그인 완료 │ │
│ ◄──────────────────── │ │
│ │ │
│ 7. 데이터 요청 │ │
│ (토큰 포함) │ │
│ ────────────────────► │ 8. 토큰 검증 후 │
│ │ ─────────────────────► │
│ │ 데이터 반환 │

┌─────────────────────────────────────────────────────────────────┐
│ 관리 시스템 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 파일 저장 │ │ 이메일 발송 │ │ 소셜 로그인 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
└──────────┼───────────────────┼───────────────────┼───────────────┘
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ AWS S3 │ │ SMTP 서버 │ │ OAuth │
│ Cloudflare │ │ (메일 발송) │ │ - 카카오 │
│ R2 │ │ │ │ - 네이버 │
│ (이미지 저장) │ │ │ │ - 구글 │
└──────────────┘ └──────────────┘ └──────────────┘
서비스용도연동 방식
AWS S3 / Cloudflare R2이미지, 첨부파일 저장SDK 연동
SMTP인증 메일, 알림 메일 발송Symfony Mailer
OAuth (카카오/네이버/구글)소셜 로그인OAuth 2.0

보안을 위해 일반 회원과 관리자 계정을 완전히 분리했습니다.

┌─────────────────────────────────────────────────────────────────┐
│ 사용자 계정 구조 │
├─────────────────────────────┬───────────────────────────────────┤
│ 일반 회원 │ 관리자 │
│ (user.user) │ (user.manager) │
├─────────────────────────────┼───────────────────────────────────┤
│ 접속: dcamp.kr │ 접속: admin.dcamp.kr │
│ 가입: 웹사이트 자가 가입 │ 가입: 기존 관리자가 생성 │
│ 인증: 이메일 + 소셜 로그인 │ 인증: 이메일 + MFA │
├─────────────────────────────┼───────────────────────────────────┤
│ ✗ 관리 시스템 접근 불가 │ ✗ 일반 사이트 로그인 불가 │
└─────────────────────────────┴───────────────────────────────────┘

왜 이렇게 분리했나요?

  • 일반 회원 계정이 해킹되어도 관리 시스템은 안전
  • 관리자 권한을 실수로 일반 회원에게 부여하는 것을 원천 방지
  • 각 시스템에 맞는 보안 정책을 독립적으로 적용 가능

← 이전: 1. 프로젝트 개요 | 다음: 3. 기술 스택 →