개주 훈련일지/🏋️ 전집중 호흡 훈련

CKEditor5 기초 가이드

lshfood2 2025. 12. 12. 16:55

[ CKEditor5 기초 개념 ]

오늘은 웹사이트의 텍스트 에디터

역할을 담당해주는 CKEditor5를

처음 사용하는 초보 개발자를 위해

필요한 것을 차근차근 설명한다.

 

CKEditor5가 무엇인가?

CKEditor5는 웹사이트에서

사용할 수 있는 텍스트 에디터이다.

 

네이버 블로그나 티스토리에서

글을 쓸 때 보는 그 에디터를

여러분의 웹사이트에도 넣을 수 있다.

 

주요 특징

  • 모듈식 구조: 필요한 기능만 골라서 사용할 수 있다
  • 가볍고 빠름: 불필요한 기능을 빼서 웹사이트 속도를 최적화할 수 있다
  • 커스터마이징 자유: 디자인과 기능을 자유롭게 수정 가능
  • 모바일 친화적: 스마트폰에서도 잘 작동한다

※ 시작하기 전 알아야 할 개념

CKEditor를 사용하려면 먼저

NPM이라는 것을 이해해야 한다.

 

NPM = Node Package Manager

쉽게 말하면 JavaScript 코드의 앱스토어이다.

다른 개발자들이 만든 유용한 코드(패키지)를

검색하고, 설치하고, 관리할 수 있다.

 

왜 사용하나?

X 나쁜 방법: 텍스트 에디터를 직접 만들기 (몇 달 소요)
O 좋은 방법: CKEditor 같은 완성된 라이브러리 사용 (몇 분)

 

Node.js 설치하기

NPM을 사용하려면 Node.js가 필요하다.

- 설치 방법)

  1. https://nodejs.org 접속
  2. LTS 버전 다운로드 (안정적인 버전)
  3. 다운로드한 파일 실행하여 설치

설치 확인)
명령 프롬프트(Windows) 또는 터미널(Mac)을 열어서

node -v    # Node.js 버전 확인
npm -v     # NPM 버전 확인

숫자가 나오면 성공!

[ CKEditor 5의 종류 ]

CKEditor 5는 여러 가지 스타일을 제공한다.

프로젝트에 맞는 것을 골라 사용하면 된다.

 

1. Classic Editor (가장 일반적)

┌─────────────────────────────┐
│ [B] [I] [U] [링크] [이미지] │ ← 툴바
├─────────────────────────────┤
│                             │
│  여기에 글을 작성...        │
│                             │
└─────────────────────────────┘
  • 특징: 툴바가 위에 고정
  • 사용처: 일반적인 관리자 페이지, 블로그 글쓰기

2. Inline Editor

여기를 클릭하면 툴바가 나타나요
     ↓
[B] [I] [U] ← 클릭 시 나타남
  • 특징: 콘텐츠를 클릭할 때만 툴바 표시
  • 사용처: 블로그, CMS, 자연스러운 편집이 필요한 곳

3. Balloon Editor

텍스트를 선택하면
     ↓
   [B][I][U] ← 풍선처럼 떠오름
  • 특징: 텍스트 선택 시 풍선 형태로 툴바 표시
  • 사용처: Medium 같은 미니멀한 디자인

4. Document Editor

┌─────────────────────────────┐
│ 파일 편집 보기 삽입 ...    │
├─────────────────────────────┤
│                             │
│      📄 문서 페이지         │
│                             │
└─────────────────────────────┘
  • 특징: 워드 프로세서 스타일
  • 사용처: 계약서, 보고서 등 정식 문서 작성

실전) CKEditor 5 설치하기

방법 1: CDN 사용 (초보자 추천!)

설치 없이 바로 사용할 수 있다.

HTML 파일에 아래 코드를 복사하면 끝!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>내 첫 CKEditor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>CKEditor 5 테스트</h1>
    <div id="editor">
        <p>여기에 초기 내용을 입력하세요!</p>
    </div>
    
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                console.log('에디터 준비 완료!', editor);
            })
            .catch(error => {
                console.error('에러 발생:', error);
            });
    </script>
</body>
</html>

장점

  • Node.js 설치 불필요
  • 복사 붙여넣기로 바로 사용
  • 테스트하기 좋음

단점

  • 인터넷 연결 필요
  • 커스터마이징 제한적

방법 2: NPM 사용(본격 개발용)

더 자유로운 커스터마이징이

필요하다면 NPM을 사용하자.

 

1단계: 프로젝트 폴더 만들기

mkdir my-ckeditor-project
cd my-ckeditor-project

 

2단계: package.json 생성

npm init -y

 

3단계: CKEditor 설치

npm install @ckeditor/ckeditor5-build-classic

 

4단계: HTML 파일 만들기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CKEditor with NPM</title>
</head>
<body>
    <div id="editor"></div>
    
    <script type="module">
        import ClassicEditor from './node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js';
        
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

 

자주 사용하는 NPM 명령어

# 새 프로젝트 시작
npm init -y

# 패키지 설치
npm install 패키지이름
npm i 패키지이름  # 줄여서 쓸 수 있다

# 모든 패키지 설치 (다른 사람 프로젝트 받았을 때)
npm install

# 패키지 삭제
npm uninstall 패키지이름

 

주요 파일 설명

- package.json

프로젝트의 설명서 같은 파일이다.

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "내 프로젝트 설명",
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.0.0"
  }
}

이 파일에는 프로젝트 정보와 사용하는 패키지 목록이 들어있다.

 

- node_modules 폴더

  • NPM으로 설치한 모든 패키지가 저장되는 곳
  • 매우 크기 때문에 Git에 올리지 않는다
  • package.json만 있으면 언제든 npm install로 다시 설치 가능

[ CDN vs NPM ]

CDN

  • 빠르게 테스트하고 싶을 때
  • 간단한 프로젝트
  • Node.js 설치가 어려울 때

NPM

  • 본격적인 웹 개발 프로젝트
  • 커스터마이징이 많이 필요할 때
  • 오프라인에서도 작업해야 할 때
  • 버전 관리가 중요할 때

초보자를 위한 팁

1. 처음에는 CDN으로 시작하자

NPM이 어렵게 느껴진다면
CDN 방식으로 먼저 CKEditor를 경험해보자.

 

2. 에러가 났을 때

1) "npm: command not found"
→ Node.js가 설치되지 않았다. nodejs.org에서 설치하자.

2) "모듈을 찾을 수 없습니다"
→ npm install을 먼저 실행하자.

 

3. 점진적으로 배우기

  1. CDN으로 기본 사용법 익히기
  2. NPM 설치하고 간단한 프로젝트 만들어보기
  3. 커스터마이징 시도하기

[ 최종 정리 ]

CKEditor 5 = 웹사이트용 텍스트 에디터
NPM = JavaScript 패키지의 앱스토어
Node.js = JavaScript를 컴퓨터에서 실행하게 해주는 프로그램

시작 순서:
1. Node.js 설치 → NPM 자동 설치
2. npm init -y → package.json 생성
3. npm install 패키지이름 → 패키지 설치
4. HTML에서 에디터 사용

'개주 훈련일지 > 🏋️ 전집중 호흡 훈련' 카테고리의 다른 글

CKEditor5 커스텀 빌드 수정하는법  (0) 2025.12.14
CKEditor5 커스텀 빌드 만들기(이미지 업로드 구현)  (0) 2025.12.13
Java로 이메일 발송 구현하기(Gmail SMTP 사용)  (0) 2025.12.11
OAuth 기반 카카오 로그인 API  (0) 2025.12.10
카카오페이 API 단건 결제 방법 정리  (0) 2025.12.05

'개주 훈련일지/🏋️ 전집중 호흡 훈련'의 다른글

  • 현재글CKEditor5 기초 가이드

관련글

티스토리툴바