레디스: Redis

스프링 부트 CKEditor 1 - 실습 환경 및 버전 구성

카테고리 : 개발자 유미

https://youtu.be/KDSJFSp4c4I?si=NLSb7jB4-CY78Xte 이번 글에서는 Spring Boot에서 CKEditor 5를 연동하여 게시글 + 이미지 업로드 기능을 구현하기 위한 실습 환경을 정리한다.

핵심 목표는 단순하다.

“에디터 → 이미지 업로드 → S3 저장 → DB 저장” 흐름을 완성하는 것

스프링 부트 CKEditor 1 - 실습 환경 및 버전 구성

이번 시리즈의 최종 목표

이 시리즈는 단순 에디터 연동이 아니다.

👉 최종적으로 구현하는 구조:

사용자 → CKEditor → Spring Boot → S3 (이미지)
                          ↓
                        DB (게시글)

즉,

  • 텍스트: DB 저장
  • 이미지: S3 저장
  • 에디터: CKEditor

👉 이 3개를 연결하는 것이 핵심이다.

1. 전체 기술 스택 구성

이번 실습에서 사용하는 기술 스택은 다음과 같다.

Backend

  • Spring Boot 3.1.2
  • Spring Framework 6.x
  • Java 17

Build Tool

  • Gradle

Database

  • AWS RDS (MariaDB)

Storage

  • AWS S3 (이미지 저장)

Frontend Editor

  • CKEditor 5 (CDN 방식)

Template Engine

  • Mustache

IDE

  • IntelliJ IDEA

2. 왜 이 조합이 “최적의 실습 환경”인가?

이 부분이 가장 중요하다. 단순 나열이 아니라 선택 이유를 이해해야 한다.

1) Spring Boot 3 + Java 17

  • Spring Boot 3부터 Java 17 필수
  • 최신 생태계 (Jakarta EE 기반)

👉 실무 기준 최신 표준

2) Gradle 선택 이유

  • 빠른 빌드 속도
  • 멀티 모듈에 유리
  • 최근 트렌드

👉 Maven보다 확장성과 생산성 측면에서 유리

3) CKEditor를 CDN으로 사용하는 이유

<script src="https://cdn.ckeditor.com/..."></script>

장점:

  • 설치 필요 없음
  • 버전 관리 간단
  • 빠른 적용

👉 초기 실습 및 MVP에 최적

4) DB는 RDS, 이미지는 S3

이 구조가 핵심이다.

❌ 잘못된 방식

  • 이미지 → DB 저장 (BLOB)

✅ 올바른 방식

  • 이미지 → S3
  • 이미지 URL → DB 저장

👉 이유:

  • DB 부하 감소
  • 확장성 확보
  • CDN 연계 가능

3. 전체 아키텍처 흐름

이걸 이해하면 이후 실습이 훨씬 쉬워진다.

게시글 저장 흐름

1. 사용자 글 작성 (CKEditor)
2. 이미지 업로드 요청 발생
3. Spring Boot 서버로 요청
4. S3 업로드
5. 이미지 URL 반환
6. 에디터에 삽입
7. 최종 글 → DB 저장

핵심 포인트

  • 이미지 업로드는 “중간 처리”다
  • DB에는 실제 이미지가 아니라 URL만 저장

4. CKEditor 5 선택 이유

CKEditor 5는 단순한 텍스트 에디터가 아니다.

특징:

  • 모듈 기반 구조
  • 커스터마이징 용이
  • 이미지 업로드 API 지원

👉 특히 중요한 기능:

Custom Upload Adapter

이걸 이용해서:

  • CKEditor → Spring Boot → S3

흐름을 연결한다.

5. 실습 진행 순서 (로드맵)

이번 시리즈는 다음 순서로 진행된다.

1단계: Spring Boot 환경 구성

  • 프로젝트 생성
  • JPA 설정
  • DB 연결

2단계: CKEditor 5 연동

  • CDN 적용
  • 에디터 출력

3단계: 게시글 저장

  • form → controller
  • DB 저장

4단계: 게시글 수정/조회

  • DB → 화면
  • 데이터 바인딩

5단계: 이미지 업로드 기능

👉 가장 중요한 단계

  • CKEditor 업로드 요청 처리
  • S3 업로드
  • URL 반환

6. 실무 관점 핵심 포인트

이 파트는 면접에서도 자주 나온다.

1. 이미지 저장 전략

  • DB 저장 ❌
  • S3 저장 + URL 저장 ✅

2. 에디터는 “UI일 뿐”

  • 실제 로직은 서버에서 처리
  • 보안, validation, 저장 책임은 backend

3. 업로드는 비동기 이벤트

  • 글 저장과 이미지 업로드는 별도 흐름

4. 장애 대응

  • S3 업로드 실패 시?
  • URL 깨진 경우?
  • 이미지 orphan 문제?

👉 반드시 고려해야 한다

7. 이 구조가 중요한 이유

이 구조는 단순 블로그 기능이 아니다.

👉 실제 서비스에서 그대로 사용된다:

  • 커뮤니티
  • CMS
  • 쇼핑몰 상품 설명
  • 관리자 시스템

정리

이번 글의 핵심을 한 줄로 정리하면:

Spring Boot + CKEditor + S3 구조는 “텍스트와 미디어를 분리하는 아키텍처”다

핵심 요약

  • CKEditor → 사용자 입력
  • Spring Boot → 처리
  • S3 → 이미지 저장
  • DB → 텍스트 + URL 저장

© 2020. All rights reserved.

SIKSIK