매거진 툴을 개발할거에요. 기관 단체 등에서 대부분 가지고 있는 홈페이지와는 별도로 고객과 직접 소통할 수 있는 중간 역할을 하는.. 관건은 이 별도 사이트에 글을 올리면 네이버나 구글에 하루 이틀 후 정확히 노출되고, SNS와의 완벽한 연동, 그리고 마우스 드래그로 쉽게 편집되는 온라인 웹진툴, 결정적으로는 페이지별로 표지부터 본문까지 이미지, 텍스트 등을 편집해서 PDF로 저장해서 바로 인쇄하면 책자가 될 수 있도록... 이 솔루션 개발에 대한 구체적인 개발문서를 만들어주세요.

  1. 1 Domain CMS Tool
  2. 개발환경 - PHP 8~, MariDB 10~
  3. 개발중점 - 구글, 네이버 SEO, AIO 최적화, 글 등록시 100% 노출 - SNS 완벽 연동 - 댓글, 좋아요, 메일링 구독 신청 등 사용자 참여 확대, 강력한 포인트 정책
  4. 템플릿 기능 (CMS의 메뉴관리, 기본스킨(리스트형, 갤러리형, 웹진형 고정), 게시판 생성 관리, 게시물 관리, 회원관리 기능)
  5. 웹진 제작툴 - 온라인용 반응형 PC, 모바일용 웹진 제작(이미지 배치, 배경, 타이틀, 본문노출 등 설정, 링크 바로가기 - 인쇄용 매거진 편집(화면 상에서 간이 인디자인 수준 마우스 드래그로 이미지 텍스트 배치 등 편집, PDF파일로 출력, 바로 인쇄 가능하도록)

---

매거진 CMS 솔루션 개발 문서

프로젝트명: 1Domain Magazine CMS
버전: v1.0
개발환경: PHP 8.x / MariaDB 10.x / Apache or Nginx
문서작성일: 2026-05-05


1. 프로젝트 개요

1.1 목적

기관·단체·기업이 기존 홈페이지와 별도로 운영할 수 있는 독립형 매거진 퍼블리싱 플랫폼. 콘텐츠 발행 즉시 검색엔진(Google·Naver) 노출, SNS 완벽 연동, 독자 참여 극대화, 온라인 웹진 + 인쇄용 PDF 매거진 동시 제작이 핵심 가치.

1.2 핵심 가치 요약

구분 목표
SEO 글 등록 후 1~2일 내 구글·네이버 색인 100%
SNS 주요 SNS 자동 연동 발행
참여 댓글·좋아요·구독·포인트 생태계
편집 드래그 앤 드롭 웹진 편집기
인쇄 인디자인 수준 PDF 출력·즉시 인쇄

2. 시스템 아키텍처

2.1 기술 스택

[프론트엔드]
- HTML5 / CSS3 / Vanilla JS (ES6+)
- Alpine.js (경량 반응형 UI)
- Fabric.js (캔버스 기반 드래그 편집기)
- jsPDF + html2canvas (PDF 출력)
- Swiper.js (웹진 슬라이드)

[백엔드]
- PHP 8.2+
- MariaDB 10.6+
- Composer (의존성 관리)
- PHPMailer (메일링)
- Cron Job (색인 핑, 자동 SNS 발행)

[서버]
- Apache 2.4+ 또는 Nginx 1.24+
- Let's Encrypt SSL (무료 인증서)
- Redis (세션·캐시, 선택)
- 1 Domain / 1 서버 단일 설치

2.2 디렉터리 구조

/root
├── /admin              # 관리자 패널
│   ├── /board          # 게시판 관리
│   ├── /member         # 회원 관리
│   ├── /menu           # 메뉴 관리
│   ├── /seo            # SEO 설정
│   ├── /sns            # SNS 연동 설정
│   ├── /magazine       # 웹진·PDF 편집기
│   └── /point          # 포인트 정책
├── /api                # REST API 엔드포인트
├── /assets             # 정적 자산 (css, js, img)
├── /skin               # 스킨 (list / gallery / webzine)
├── /uploads            # 업로드 파일
├── /cache              # 페이지 캐시
├── /cron               # 크론잡 스크립트
├── /lib                # 공통 라이브러리
├── index.php
├── .htaccess
└── config.php

3. 데이터베이스 설계

3.1 주요 테이블

users — 회원

CREATE TABLE users (
  id          INT AUTO_INCREMENT PRIMARY KEY,
  username    VARCHAR(50) UNIQUE NOT NULL,
  email       VARCHAR(100) UNIQUE NOT NULL,
  password    VARCHAR(255) NOT NULL,         -- bcrypt
  nickname    VARCHAR(50),
  level       TINYINT DEFAULT 1,             -- 1일반 2에디터 9관리자
  point       INT DEFAULT 0,
  sns_type    ENUM('local','google','naver','kakao') DEFAULT 'local',
  sns_id      VARCHAR(255),
  is_active   TINYINT DEFAULT 1,
  created_at  DATETIME DEFAULT NOW(),
  updated_at  DATETIME ON UPDATE NOW()
);

boards — 게시판 설정

CREATE TABLE boards (
  id          INT AUTO_INCREMENT PRIMARY KEY,
  slug        VARCHAR(50) UNIQUE NOT NULL,   -- URL slug
  name        VARCHAR(100) NOT NULL,
  skin        ENUM('list','gallery','webzine') DEFAULT 'list',
  use_comment TINYINT DEFAULT 1,
  use_like    TINYINT DEFAULT 1,
  use_point   TINYINT DEFAULT 1,
  write_level TINYINT DEFAULT 1,
  read_level  TINYINT DEFAULT 0,
  sort_order  INT DEFAULT 0,
  created_at  DATETIME DEFAULT NOW()
);

posts — 게시물

CREATE TABLE posts (
  id            INT AUTO_INCREMENT PRIMARY KEY,
  board_id      INT NOT NULL,
  user_id       INT NOT NULL,
  title         VARCHAR(255) NOT NULL,
  content       LONGTEXT,
  summary       TEXT,                         -- SEO 메타 설명 자동생성
  thumbnail     VARCHAR(500),
  tags          VARCHAR(500),
  view_count    INT DEFAULT 0,
  like_count    INT DEFAULT 0,
  comment_count INT DEFAULT 0,
  is_published  TINYINT DEFAULT 1,
  published_at  DATETIME,
  og_title      VARCHAR(255),                 -- Open Graph
  og_desc       TEXT,
  og_image      VARCHAR(500),
  schema_json   TEXT,                         -- JSON-LD 구조화 데이터
  sns_auto_post TINYINT DEFAULT 0,
  created_at    DATETIME DEFAULT NOW(),
  updated_at    DATETIME ON UPDATE NOW(),
  FULLTEXT KEY ft_search (title, content, tags)
);

magazines — 웹진·매거진 프로젝트

CREATE TABLE magazines (
  id          INT AUTO_INCREMENT PRIMARY KEY,
  title       VARCHAR(255) NOT NULL,
  type        ENUM('webzine','print') NOT NULL,
  pages_json  LONGTEXT,                       -- 페이지별 레이아웃 JSON
  cover_image VARCHAR(500),
  status      ENUM('draft','published') DEFAULT 'draft',
  created_at  DATETIME DEFAULT NOW(),
  updated_at  DATETIME ON UPDATE NOW()
);

comments / likes / subscriptions / points / menus

(표준 구조 — 별도 상세 스키마 제공 가능)


4. 모듈별 기능 명세

4.1 SEO / AIO 최적화 모듈

목표: 글 등록 후 1~2일 내 구글·네이버 색인

구현 항목

  • 자동 메타 생성: 제목→ <title> , 본문 앞 150자→ <meta description> , 대표 이미지→ og:image
  • JSON-LD 구조화 데이터: Article, BreadcrumbList, Organization 스키마 자동 삽입
  • Open Graph / Twitter Card: 게시물 저장 시 자동 생성
  • Canonical URL: 중복 URL 방지
  • XML Sitemap 자동 갱신: 글 등록/수정 시 sitemap.xml 즉시 재생성
  • RSS 2.0 피드: /feed.xml 자동 생성
  • 구글 색인 즉시 요청: Google Indexing API (Pub/Sub) 연동, 글 발행 즉시 ping
  • 네이버 즉시 등록: 네이버 서치어드바이저 API ping ( /ping?rss=피드URL )
  • robots.txt 관리: 관리자 UI에서 편집
  • 페이지 로딩 최적화: 이미지 WebP 자동 변환, Lazy Load, CSS/JS 압축
  • AIO (AI Overview) 대응: FAQ 스키마, HowTo 스키마 선택 삽입 UI 제공

크론잡 ( /cron/seo_ping.php ) — 매 발행 시 실행

// Google Indexing API ping
// Naver RSS ping
// Sitemap 갱신

4.2 SNS 완벽 연동 모듈

지원 SNS

SNS 기능
Facebook 페이지 자동 포스팅, 공유 버튼
Instagram 이미지+캡션 자동 발행 (Graph API)
X (Twitter) 트윗 자동 발행 (OAuth 2.0)
카카오톡 카카오링크 공유, 카카오채널 메시지
네이버 블로그 네이버 오픈API 발행
스레드 (Threads) Threads API 연동

관리자 설정: API Key / Secret / Access Token 입력 UI
발행 옵션: 즉시 발행 / 예약 발행 (크론 기반)
공유 버튼: 각 게시물 하단 플로팅 공유바


4.3 사용자 참여 모듈

댓글

  • 비회원 댓글 허용 옵션 (이름·비밀번호)
  • 회원 댓글 포인트 적립
  • 댓글 신고 / 관리자 승인 옵션
  • 대댓글 (1depth)

좋아요

  • 비로그인 IP 기반 중복 방지
  • 좋아요 수 실시간 업데이트 (AJAX)
  • 좋아요 포인트 적립

메일링 구독

  • 이메일 입력 → 더블 옵트인 (인증 메일 발송)
  • 구독자 그룹 관리
  • 발행 시 구독자 자동 메일 발송 (PHPMailer + 큐)
  • 구독 취소 원클릭

포인트 정책

활동 기본 포인트
회원가입 +100
글 작성 +50
댓글 작성 +10
좋아요 받음 +5
구독 신청 +20
출석체크 +3/일
포인트 소진 관리자 설정

포인트 정책은 관리자 UI에서 항목별 조정 가능.


4.4 CMS 기본 기능

메뉴 관리

  • 드래그 앤 드롭 메뉴 순서 정렬
  • 상위/하위 메뉴 (2depth)
  • 외부 링크, 게시판 연결, 웹진 연결 선택

게시판 관리

  • 게시판 생성/수정/삭제
  • 스킨 선택: 리스트형 / 갤러리형 / 웹진형 (고정 3종)
  • 권한 설정 (읽기·쓰기 레벨별)
  • 페이지당 글 수, 썸네일 크기 등 설정

게시물 관리

  • 에디터: TinyMCE 6 또는 CKEditor 5
  • 임시저장 자동 (30초 간격)
  • 예약 발행
  • 태그, 카테고리 다중 선택
  • 이미지 업로드 → WebP 자동 변환
  • 게시물 통계 (조회·좋아요·댓글 수 그래프)

회원 관리

  • 회원 목록·검색·필터
  • 레벨 조정, 포인트 수동 지급
  • 소셜 로그인: 구글·네이버·카카오 OAuth
  • 활동 로그 조회

4.5 웹진 제작 툴 (온라인)

개요

게시판 스킨 '웹진형' 적용 시 활성화. 반응형 PC·모바일 레이아웃을 시각적으로 편집.

편집 기능

  • 블록 편집기 방식: 섹션 추가 (이미지 블록·텍스트 블록·영상 블록·구분선)
  • 배경 설정: 색상, 그라데이션, 이미지 배경
  • 타이틀·부제 폰트·색상·정렬 설정
  • 이미지 배치: 좌/우/전체 너비 선택
  • 링크 바로가기 버튼: CTA 버튼 삽입
  • 모바일 미리보기: 편집 중 실시간 모바일 뷰 패널

기술 구현

  • 편집 데이터 JSON으로 DB 저장
  • 프론트에서 JSON → 반응형 HTML 렌더링
  • Tailwind CSS 기반 반응형 그리드

4.6 인쇄용 매거진 편집기 (PDF 출력)

개요

화면에서 직접 페이지를 편집, PDF로 출력해 즉시 인쇄 가능한 인디자인 수준의 브라우저 기반 편집기.

핵심 기능

기능 설명
캔버스 편집 Fabric.js 기반 A4 캔버스 (210×297mm → px 환산)
요소 추가 텍스트박스, 이미지, 도형, 구분선, 표
자유 배치 마우스 드래그로 위치·크기·회전 조정
레이어 관리 앞으로/뒤로 순서 조정
페이지 관리 표지·목차·본문·뒷표지 추가/삭제/순서변경
마스터 페이지 공통 헤더·푸터·페이지 번호 일괄 적용
글자 스타일 폰트(웹폰트), 크기, 색상, 자간, 행간
이미지 처리 크롭, 투명도, 테두리 반경
안내선 그리드·여백 가이드라인 표시/숨김
저장 페이지별 JSON 저장 (DB)
PDF 출력 jsPDF + html2canvas, A4/A5 선택, 고해상도 (300dpi 대응)
인쇄 최적화 CMYK 근사 출력, 재단선(Bleed) 옵션 3mm

편집기 UI 레이아웃

┌─────────────────────────────────────────────────┐
│  [파일] [편집] [보기] [삽입] [페이지]   [PDF저장] │  ← 상단 메뉴바
├──────┬──────────────────────────┬───────────────┤
│페이지│                          │  속성 패널    │
│썸네일│     A4 캔버스 편집 영역   │  - 위치 X/Y  │
│  목록│     (Fabric.js)          │  - 크기 W/H  │
│      │                          │  - 폰트 설정  │
│  [+] │                          │  - 색상      │
└──────┴──────────────────────────┴───────────────┘
│ 하단 도구바: [선택] [텍스트] [이미지] [도형] [표] [실행취소] [다시실행] │

PDF 출력 플로우

편집 완료
  → 각 페이지 캔버스를 고해상도 PNG로 렌더링 (html2canvas)
  → jsPDF에 A4 페이지로 순서대로 삽입
  → PDF Blob 생성 → 브라우저 다운로드
  → (옵션) 서버 저장 → 공유 링크 생성

5. API 설계 (REST)

Method Endpoint 설명
GET /api/posts 게시물 목록
GET /api/posts/{id} 게시물 상세
POST /api/posts 게시물 등록
PUT /api/posts/{id} 게시물 수정
DELETE /api/posts/{id} 게시물 삭제
POST /api/posts/{id}/like 좋아요 토글
GET /api/posts/{id}/comments 댓글 목록
POST /api/posts/{id}/comments 댓글 등록
POST /api/subscribe 구독 신청
GET /api/magazine/{id} 웹진 데이터
POST /api/magazine/{id}/export PDF 생성 요청

인증: JWT 토큰 (Authorization: Bearer)


6. 보안 설계

  • XSS 방지: htmlspecialchars(), DOMPurify (에디터 출력)
  • SQL Injection: PDO Prepared Statement 100%
  • CSRF: 폼 토큰 검증
  • 파일 업로드: 확장자·MIME 타입 이중 검증, 업로드 디렉터리 실행 차단
  • 비밀번호: password_hash() / password_verify() (bcrypt)
  • Rate Limiting: 로그인 5회 실패 → 15분 잠금
  • 관리자 경로: /admin 경로 IP 화이트리스트 옵션

7. 개발 단계 로드맵

Phase 1 — 기반 CMS (8주)

  • DB 스키마, 공통 라이브러리
  • 회원가입·로그인 (로컬 + 소셜)
  • 게시판·게시물 CRUD
  • 관리자 패널 기본 UI
  • 스킨 3종 (리스트·갤러리·웹진형) 기본 템플릿

Phase 2 — SEO + SNS 연동 (4주)

  • 메타 자동 생성, JSON-LD
  • Sitemap·RSS 자동 갱신
  • Google Indexing API, Naver ping
  • SNS 자동 발행 (Facebook·X·카카오)

Phase 3 — 참여 기능 + 포인트 (3주)

  • 댓글·좋아요
  • 메일링 구독·발송
  • 포인트 시스템

Phase 4 — 웹진 편집기 (4주)

  • 블록 기반 온라인 웹진 편집기
  • 모바일 반응형 렌더링

Phase 5 — 인쇄용 매거진 편집기 (6주)

  • Fabric.js 캔버스 편집기
  • 페이지 관리, 마스터 페이지
  • jsPDF 고해상도 출력

Phase 6 — QA·최적화·배포 (3주)

  • 크로스 브라우저 테스트
  • 성능 최적화 (캐시·압축)
  • 설치 패키지 구성

총 예상 개발 기간: 28주 (약 7개월)


8. 설치 요구사항

항목 최소 사양
PHP 8.1 이상 (8.2 권장)
MariaDB 10.6 이상
웹서버 Apache 2.4 (mod_rewrite) 또는 Nginx
메모리 2GB RAM 이상
스토리지 20GB 이상
SSL 필수 (HTTPS)
PHP 확장 pdo, pdo_mysql, gd, mbstring, curl, zip, intl

9. 향후 확장 고려사항

  • 멀티사이트 지원 (서브도메인별 독립 매거진)
  • 유료 구독 결제 (PG 연동)
  • AI 자동 요약·태그 추천 (Anthropic API 연동)
  • 앱 푸시 알림 (FCM)
  • 통계 대시보드 고도화 (Chart.js)