기본 콘텐츠로 건너뛰기

Pinned Post

ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기

AI 코딩 에이전트 · 웹사이트 클론 ai-website-cloner-template 활용법: URL 하나로 Next.js 클론 만들기 설치부터 "관찰 → 구현" 2단계 프롬프트, 한계와 주의사항까지 정리했습니다. 작성 기준일: 2026-10-16 이 글은 공식 GitHub 저장소(README, 저장소 master 압축본의 SKILL.md·AGENTS.md·references 문서)를 읽고 정리했습니다. 아래 프롬프트 예시는 작성자가 제안하는 방식이며 실제 클론 실행 결과로 검증하지 않았습니다. 1. 핵심 요약 이 템플릿은 변환 프로그램이 아니라 AI 에이전트에게 주는 작업 지침서(스킬) 입니다. 실행 스크립트 없이 에이전트가 브라우저로 사이트를 보고 코드를 작성합니다. 사용법은 프로젝트를 만든 뒤 에이전트에서 /clone-website URL 을 실행하는 것입니다. 결과물은 Next.js 16 + React 19 + shadcn/ui + Tailwind CSS v4 프로젝트입니다. 품질을 높이려면 범위를 좁히고, 관찰과 구현을 두 단계로 나눠 지시하는 편이 좋습니다. 2. 핵심 정보 항목 내용 구분 명령 /clone-website <url> 공식 정보 필요 환경 Node.js 24 이상, 브라우저 접근이 가능한 AI 코딩 에이전트 공식 정보 지원 에이전트 Claude Code(권장), Codex CLI, OpenCode, Cursor 공식 정보 기술 스택 Next.js 16(package.json 기준 16.3.5), React 19, Tailwind CSS v4 공식 정보 작업 4단계 Map → Observe → Build → Compare 공식 정보 라이선스 MIT 공식 정보 3. 사전 준...

코딩 전에 쓰는 메모, intent.md란 무엇일까?

코딩 전에 쓰는 메모, intent.md란 무엇일까?

※ 초·중등학생도 이해할 수 있도록 쉽게 설명한 글입니다.

한눈에 이해하기

AI에게 코드를 만들어 달라고 바로 부탁하면 원하는 결과가 나오지 않을 수 있습니다.

그래서 코드를 만들기 전에 “무엇을 만들고 싶은지”를 먼저 적어 둡니다.

이 메모 파일의 이름이 바로 intent.md입니다.

쉽게 말하면 intent.md는 AI에게 보여 주는 만들기 계획 메모입니다.

1. AI에게 바로 코드를 만들어 달라고 하면 안 될까?

AI는 코드를 아주 빠르게 만들 수 있습니다. 하지만 우리가 원하는 것을 정확히 모르면 엉뚱한 프로그램을 만들 수도 있습니다.

예를 들어 친구에게 이렇게 말한다고 생각해 봅시다.

맛있는 것 만들어 줘.

친구는 김밥을 만들 수도 있고, 라면을 만들 수도 있고, 케이크를 만들 수도 있습니다.

내가 원한 것이 김밥이었다면 처음부터 이렇게 말하는 편이 더 좋습니다.

참치와 단무지가 들어간 김밥을 만들어 줘.
매운 재료는 넣지 말아 줘.

프로그램을 만들 때도 똑같습니다. AI에게 코드를 부탁하기 전에 무엇을 만들고 싶은지 자세히 알려 주어야 합니다.

2. intent.md는 무엇인가?

intent.md는 프로그램을 만들기 전에 작성하는 아이디어 설명서입니다.

여기서 intent는 “의도” 또는 “무엇을 하려는 생각”이라는 뜻입니다.

.md는 Markdown이라는 글쓰기 형식입니다. 메모장처럼 글을 쓸 수 있고, 제목과 목록도 쉽게 만들 수 있습니다.

따라서 intent.md는 쉽게 말해 “이 프로그램을 왜 만들고, 어떤 모습으로 만들고 싶은지 적은 파일”입니다.

3. intent.md에는 무엇을 적을까?

어려운 말을 많이 쓸 필요는 없습니다. 다음 다섯 가지 질문에 답하면 됩니다.

  1. 어떤 문제가 있는가?
  2. 무엇을 만들고 싶은가?
  3. 누가 사용할 것인가?
  4. 반드시 지켜야 할 것은 무엇인가?
  5. 아직 결정하지 못한 것은 무엇인가?

쉬운 예시

# 학생 검색 기능 만들기
작성자: 민수
상태: 초안
## 어떤 문제가 있나요?
학생이 많아서 원하는 학생을 찾기 어렵습니다.
## 무엇을 만들고 싶나요?
이름이나 학번을 입력하면
학생을 쉽게 찾을 수 있는 검색 기능을 만들고 싶습니다.
## 누가 사용하나요?
선생님과 학교 직원이 사용합니다.
## 꼭 지켜야 할 것은 무엇인가요?
학생의 개인정보가 아무에게나 보이면 안 됩니다.
## 아직 정하지 못한 것은 무엇인가요?
검색 결과를 몇 명까지 보여 줄지 정하지 못했습니다.

이것만 읽어도 어떤 기능을 만들고 싶은지 알 수 있습니다.

4. 왜 글로 적어 두어야 할까?

사람의 말은 시간이 지나면 달라질 수 있습니다.

처음에는 “학생을 쉽게 찾는 기능을 만들자”고 했는데, 나중에는 누군가가 “학생 정보를 모두 보여 주는 기능”으로 잘못 이해할 수도 있습니다.

하지만 처음 생각을 파일에 적어 두면 언제든 다시 확인할 수 있습니다.

즉 intent.md는 처음 생각을 잊지 않게 해 주는 약속 문서입니다.

5. AI가 작성해도 괜찮을까?

AI에게 초안을 작성해 달라고 부탁할 수 있습니다.

예를 들어 이렇게 말할 수 있습니다.

학생 검색 기능을 만들고 싶어.
내가 말한 내용을 정리해서 intent.md 파일로 만들어 줘.

AI는 우리가 말한 내용을 정리해서 intent.md 초안을 만들어 줄 수 있습니다.

하지만 AI가 만든 내용을 그대로 믿고 사용하면 안 됩니다.

AI가 내 생각을 잘못 이해했을 수도 있기 때문입니다.

가장 중요한 규칙

AI는 초안을 만들 수 있지만, 그 내용이 정말 맞는지 확인하는 것은 사람입니다.

6. 프로그램을 만드는 6단계

Anthropic은 AI를 이용해 프로그램을 만드는 과정을 6단계로 설명합니다.

어려워 보이지만, 학교에서 과제를 하는 과정과 비슷합니다.

단계 쉬운 뜻 무엇을 하나요?
1. Plan 계획 세우기 무엇을 만들지 정합니다.
2. Design 모양 정하기 어떻게 만들지 자세히 정합니다.
3. Build 만들기 AI와 사람이 코드를 만듭니다.
4. Test 시험하기 잘 작동하는지 확인합니다.
5. Deploy 사용하게 하기 검토한 뒤 실제로 공개합니다.
6. Maintain 계속 관리하기 문제를 찾고 고칩니다.

7. 학교 과제로 비유해 보기

프로그램을 만드는 과정을 학교 과제를 하는 과정으로 바꾸어 생각해 보겠습니다.

1단계: Plan — 계획 세우기

과학 시간에 화산 모형을 만든다고 해 봅시다.

먼저 이렇게 생각합니다.

화산이 폭발하는 모습을 보여 주는 모형을 만들자.

이것이 바로 아이디어입니다. 이 아이디어를 자세히 적은 것이 intent.md입니다.

2단계: Design — 모양 정하기

이제 어떤 재료를 사용할지, 화산을 얼마나 크게 만들지, 어떻게 폭발하는 모습을 보여 줄지 정합니다.

프로그램에서는 이 단계에서 화면 모양과 기능을 자세히 정합니다.

3단계: Build — 만들기

정한 계획에 따라 실제로 화산 모형을 만듭니다.

프로그램에서는 AI가 코드를 만들고, 사람이 코드를 확인합니다.

4단계: Test — 시험하기

화산 모형이 정말 폭발하는지 시험합니다.

프로그램에서는 버튼을 눌렀을 때 제대로 작동하는지 확인합니다.

5단계: Deploy — 사용하게 하기

선생님과 친구들에게 모형을 보여 줍니다.

프로그램에서는 다른 사람들이 사용할 수 있도록 공개합니다.

6단계: Maintain — 계속 관리하기

친구들이 사용하다가 문제가 생기면 고칩니다.

프로그램도 사용 중 문제가 생기면 다시 고치고 시험합니다.

8. 6단계는 한 번만 하고 끝나지 않는다

프로그램은 한 번 만들었다고 끝나지 않습니다.

사용하다 보면 새로운 문제가 생길 수 있습니다.

아이디어
  ↓
계획
  ↓
만들기
  ↓
시험하기
  ↓
공개하기
  ↓
사용하기
  ↓
문제 발견
  ↓
새로운 계획

예를 들어 학생 검색 기능을 만들었는데 검색 결과가 너무 느리다는 문제가 생길 수 있습니다.

그러면 이 문제를 다시 새로운 intent.md에 적습니다.

그래서 프로그램 만들기는 계속 반복되는 동그란 과정이라고 생각하면 쉽습니다.

9. intent.md 다음에는 무엇을 만들까?

intent.md는 첫 번째 메모입니다.

그다음에는 더 자세한 문서를 만듭니다.

파일 쉬운 설명 대답하는 질문
intent.md 아이디어 메모 왜 만들려고 하나요?
spec.md 자세한 설명서 무엇을 만들기로 했나요?
plan.md 만들기 순서표 어떤 순서로 만들까요?
CLAUDE.md 프로젝트 규칙 이 프로젝트에서는 어떻게 해야 하나요?

10. 네 가지 파일을 학교생활로 비유하면

intent.md
= 어떤 과제를 하고 싶은지 적은 아이디어 메모
spec.md
= 과제를 어떻게 만들지 자세히 적은 설명서
plan.md
= 과제를 어떤 순서로 할지 적은 순서표
CLAUDE.md
= 과제를 할 때 지켜야 하는 교실 규칙

각각의 역할이 다르기 때문에 하나의 파일로 모두 대신하지 않습니다.

11. AI가 만든 계획을 바로 실행해도 될까?

가능하면 먼저 계획을 확인하는 것이 좋습니다.

AI가 만든 계획에 잘못된 내용이 있을 수 있기 때문입니다.

예를 들어 AI가 “학생 정보를 모두 공개한다”고 계획했다면 사람은 즉시 잘못된 부분을 고쳐야 합니다.

그래서 중요한 원칙은 다음과 같습니다.

계획을 확인한 뒤 만들기

AI가 먼저 계획을 만들고, 사람이 확인한 다음, 실제 코드를 만듭니다.

12. AI가 만든 프로그램은 꼭 시험해야 한다

AI가 만든 코드라고 해서 항상 완벽한 것은 아닙니다.

사람이 만든 프로그램도 실수할 수 있고, AI가 만든 프로그램도 실수할 수 있습니다.

그래서 다음과 같이 확인합니다.

  • 버튼을 눌렀을 때 제대로 작동하는가?
  • 잘못된 값을 입력해도 문제가 없는가?
  • 화면이 이상하게 보이지 않는가?
  • 기존 기능이 망가지지 않았는가?
코드 만들기
  ↓
시험하기
  ↓
문제 발견
  ↓
고치기
  ↓
다시 시험하기

이 과정을 여러 번 반복하면 프로그램의 품질이 좋아집니다.

13. 테스트를 먼저 만들 수도 있다

프로그램에 문제가 생겼을 때는 먼저 그 문제가 다시 나타나는지 확인하는 시험을 만들 수 있습니다.

예를 들어 검색창에 이름을 입력했는데 결과가 나오지 않는 문제가 있다고 해 봅시다.

문제 발견
  ↓
이름을 입력하는 시험 만들기
  ↓
정말 실패하는지 확인하기
  ↓
코드 고치기
  ↓
시험 통과 확인하기

이렇게 하면 문제를 제대로 고쳤는지 쉽게 확인할 수 있습니다.

14. AI가 검토해도 사람의 확인이 필요하다

AI는 코드를 만들 수도 있고, 코드를 읽고 문제를 찾을 수도 있습니다.

하지만 AI가 모든 것을 결정하게 하면 위험할 수 있습니다.

특히 다음과 같은 일은 사람이 확인해야 합니다.

  • 정말 필요한 기능인가?
  • 사람들이 사용하기 편한가?
  • 개인정보가 안전한가?
  • 프로그램이 다른 기능을 망가뜨리지 않는가?
  • 실제로 공개해도 괜찮은가?

따라서 전체 과정은 다음과 같습니다.

AI가 초안 만들기
  ↓
사람이 확인하기
  ↓
문제 고치기
  ↓
다음 단계로 넘어가기

15. Hooks는 안전장치다

AI가 파일을 수정하거나 명령을 실행할 수 있게 되면 안전장치가 필요할 수 있습니다.

예를 들어 AI가 중요한 파일을 지우려고 할 때 바로 실행하지 못하게 막는 것입니다.

이런 안전장치를 Hooks라고 부릅니다.

Hooks는 다음과 같이 행동할 수 있습니다.

  • 허용: 실행해도 됩니다.
  • 질문: 사람에게 먼저 물어봅니다.
  • 차단: 실행하지 못하게 막습니다.

학교에서 중요한 실험을 하기 전에 선생님에게 허락을 받는 것과 비슷합니다.

16. 프로그램을 공개하기 전에도 확인한다

프로그램을 만들었다고 바로 다른 사람에게 공개하지 않습니다.

먼저 AI와 사람이 함께 확인합니다.

AI가 코드 만들기
  ↓
AI가 시험하기
  ↓
AI가 코드 검토하기
  ↓
사람이 최종 확인하기
  ↓
공개하기

AI는 빠르게 많은 부분을 확인할 수 있고, 사람은 중요한 판단을 할 수 있습니다.

17. 프로그램을 만든 뒤에도 계속 관리한다

프로그램을 공개한 뒤에도 계속 살펴봐야 합니다.

예를 들어 다음과 같은 문제가 생길 수 있습니다.

  • 프로그램이 너무 느려짐
  • 버튼이 작동하지 않음
  • 사용자가 너무 많아짐
  • 화면이 깨짐
  • 개인정보가 잘못 표시됨

이런 문제가 발견되면 다시 새로운 intent.md를 만들 수 있습니다.

프로그램 사용
  ↓
문제 발견
  ↓
새로운 intent.md 작성
  ↓
새로운 계획
  ↓
수정
  ↓
시험
  ↓
다시 사용

18. 폴더는 어떻게 정리할까?

기능마다 폴더를 하나씩 만들면 정리하기 쉽습니다.

intent/
│
├── 학생검색/
│   ├── intent.md
│   ├── spec.md
│   └── plan.md
│
├── 출석관리/
│   ├── intent.md
│   ├── spec.md
│   └── plan.md
│
└── 성적조회/
    ├── intent.md
    ├── spec.md
    └── plan.md

이렇게 하면 각 기능에 대해 다음 내용을 쉽게 찾을 수 있습니다.

  • 왜 만들었는가?
  • 무엇을 만들기로 했는가?
  • 어떤 순서로 만들었는가?
  • 실제 프로그램이 계획과 같은가?

19. 하나의 기능에는 하나의 계획을 둔다

학생 검색 기능과 출석 관리 기능은 서로 다른 기능입니다.

따라서 각각 따로 관리하는 것이 좋습니다.

학생검색/
├── intent.md
├── spec.md
└── plan.md
출석관리/
├── intent.md
├── spec.md
└── plan.md

한 폴더 안에 너무 많은 기능을 넣으면 어떤 계획이 어떤 코드와 연결되는지 헷갈릴 수 있습니다.

20. Git은 무엇일까?

Git은 파일의 변경 내용을 기록해 주는 도구입니다.

숙제 파일을 매번 새 이름으로 저장한다고 생각해 봅시다.

과학과제_1차.docx
과학과제_2차.docx
과학과제_최종.docx
과학과제_진짜최종.docx

Git을 사용하면 누가 언제 무엇을 바꾸었는지 더 편하게 확인할 수 있습니다.

그래서 intent.md를 Git에 저장하면 처음 아이디어가 어떻게 바뀌었는지도 볼 수 있습니다.

21. PR은 무엇일까?

PR은 다른 사람에게 “제가 이렇게 바꿨는데 확인해 주세요”라고 부탁하는 과정입니다.

조별 과제를 제출하기 전에 친구에게 먼저 보여 주고 틀린 부분이 없는지 확인해 달라고 하는 것과 비슷합니다.

프로그램에서는 다음과 같이 사용할 수 있습니다.

  • intent.md를 만들고 확인받기
  • spec.md를 만들고 확인받기
  • 코드를 만들고 시험하기
  • PR을 만들어 다른 사람이 검토하기
  • 문제가 없으면 프로그램에 반영하기

22. AI와 사람은 어떤 일을 나누어 할까?

일 AI가 할 수 있는 일 사람이 해야 하는 일
아이디어 정리 질문하고 글로 정리하기 내 생각과 맞는지 확인하기
설계 여러 방법 제안하기 좋은 방법 고르기
코딩 코드 작성하기 코드가 맞는지 확인하기
테스트 반복해서 시험하기 결과가 충분한지 판단하기
공개 문제 찾기 최종 승인하기

23. AI-Native SDLC를 아주 쉽게 말하면

AI-Native SDLC라는 어려운 말은 사실 다음 뜻입니다.

생각하기
↓
글로 적기
↓
자세히 계획하기
↓
AI와 함께 만들기
↓
시험하기
↓
사람이 확인하기
↓
사용하기
↓
문제가 생기면 다시 고치기

24. 가장 중요한 세 가지

첫째, 코드를 바로 만들지 않는다

먼저 무엇을 만들고 싶은지 적습니다.

둘째, AI가 만든 내용을 확인한다

AI는 똑똑하지만 항상 정답을 말하는 것은 아닙니다. 사람이 내용을 확인해야 합니다.

셋째, 만든 뒤에도 계속 시험한다

프로그램은 사용하면서 문제가 발견될 수 있습니다. 문제가 생기면 다시 계획을 세우고 고칩니다.

25. 한 문장으로 정리하면

intent.md는 AI에게 코드를 만들기 전에 “무엇을 왜 만들고 싶은지” 알려 주는 계획 메모입니다.

26. 전체 과정 한눈에 보기

아이디어가 생김
  ↓
intent.md에 생각을 적음
  ↓
사람이 내용 확인
  ↓
spec.md에 자세한 기능을 적음
  ↓
plan.md에 만드는 순서를 적음
  ↓
AI가 코드 작성
  ↓
테스트하고 문제 고치기
  ↓
AI와 사람이 코드 검토
  ↓
프로그램 공개
  ↓
사용 중 문제 발견
  ↓
새로운 intent.md 작성

27. 마무리

AI는 프로그램을 빠르게 만들어 주는 좋은 도구입니다.

하지만 AI에게 아무 설명 없이 “프로그램 만들어 줘”라고 하면 내가 원하는 것과 다른 결과가 나올 수 있습니다.

그래서 먼저 생각을 정리하고, 그 내용을 intent.md에 적습니다.

그다음 자세한 설명과 만드는 순서를 정하고, AI와 함께 코드를 만듭니다.

마지막으로 반드시 시험하고, 사람이 확인한 뒤 사용합니다.

이것이 AI를 이용해 프로그램을 안전하고 똑똑하게 만드는 방법입니다.

기억할 문장

먼저 생각하고, 글로 적고, 계획한 뒤, AI와 함께 만들자.

※ 이 글은 Anthropic과 Claude Academy에서 설명하는 AI-Native SDLC 개념을 초·중등학생도 이해할 수 있도록 쉬운 말과 학교 과제 비유로 다시 설명한 글입니다.

#intentmd #AI개발 #AI코딩 #Claude #ClaudeCode #프로그램만들기 #소프트웨어개발 #코딩공부 #개발공부 #AI공부

댓글

이 블로그의 인기 게시물

ChatGpt 의 유료결제 영수증 및 청구서 다운로드

ChatGpt 의 유료결제 영수증 및 청구서 다운로드   https://chatgpt.com/  사이트에 접속하며 회원가입을 합니다.   ChatGpt 유료 결제를 위해서는 왼쪽 하단에 있는 " Team 워크스페이스 추가 "를 선택합니다.   https://chatgpt.com/     ChatGPT의 요금제는 세 가지로 나뉩니다:  Free ,  Plus , 그리고  Custom Plan (기업용 요금제). 각 요금제의 특징과 차이점은 다음과 같습니다. 1.  Free Plan (무료 플랜) 사용 모델:  GPT-3.5 제공 기능:  기본적인 질문 응답, 텍스트 생성 접속 가능성:  트래픽이 많을 때는 사용이 제한될 수 있으며, 응답 속도가 느릴 수 있습니다. 제한 사항:  최신 모델이나 고급 기능을 사용할 수 없고, 성능이나 속도 면에서 제한이 있습니다. 2.  Plus Plan (플러스 플랜) 월 요금:  $20 사용 모델:  GPT-4 장점:  더 빠른 응답 속도, 트래픽이 많을 때도 안정적인 접속 가능 차이점:  GPT-4의 향상된 성능으로 더 복잡한 질문이나 고급 작업에도 우수한 결과를 제공합니다. 접속 가능성:  트래픽이 많아도 안정적이며, 더 나은 응답 속도를 제공합니다. 3.  Custom Plan (맞춤형 플랜) 대상:  대규모 기업 또는 특정 요구사항이 있는 고객 요금:  고객의 요구에 따라 맞춤 설정 특징:  기업 맞춤형 기능과 성능을 제공하며, 보안, 데이터 정책, API 액세스와 같은 맞춤형 옵션을 포함할 수 있습니다. 차이점:  대규모 기업에 특화된 기능으로, 추가 지원과 고급 기능 제공이 가능합니다. 주요 차이점 모델 사용:  Free는 GPT-3.5,...

인천국제공항 제1여객터미널에서 일본으로 가는 출국 절차 안내 ✈️

인천공항 제1여객터미널 출국 절차 가이드 (탑승동 이동 및 셔틀트레인 완벽 정리) 공항 도착부터 체크인, 보안검색, 출국심사, 그리고 셔틀트레인을 타고 탑승동으로 이동하는 전체 출국 단계를 빠짐없이 안내합니다. 1. 공항 도착 시간 항공기 출발 3시간 전 제1여객터미널 3층 출국장 도착 권장 2. 탑승구 확인 101~132번 게이트는 셔틀트레인을 타고 탑승동 으로 이동 필수 3. 되돌아오기 불가 셔틀트레인은 편도 이동만 가능하므로 본동 면세품 인도 후 탑승 Step 1. 공항 도착 및 체크인 (3층 일반지역) 항공기 출발 3시간 전 공항 3층 출국장에 도착하는 것을 권장합니다. 셀프 체크인 & 자동 수하물 위탁(Self Bag-Drop): 키오스크에서 모바일·지류 탑승권을 발급받고 전용 카운터를 이용하면 대기시간을 크게 단축할 수 있습니다. 유인 카운터: 여권과 항공권(e-티켓)을 제시하여 좌석 배정 및 위탁 수하물을 처리합니다. Step 2. 출국 전 사전 준비 (환전 및 통신) 환전 수령: 사전 신청한 외화를 3층 또는 지하 1층 환전소·은행 영업점에서 수령합니다. 로밍 및 통신: 통신사 부스에서 데이터 로밍 확인 또는 신청한 USIM/eSIM/와이파이 단말기를 수령합니다. 기타 편의시설: 외투 보관 서비스, 약국, 여행자 보험 창구 이용은 보안검색장 진입 전 일반지역에서 마쳐야 합니다. Step 3. 출국장 진입 및 보안 검색 3층 출국장 게이트(2~5번)로 이동하여 탑승권과 여권을 확인받고 보안검색대로 이동합니다. 주의 (액체류 규정 안내) 기내 반입 액체류는 개별 용기당 100ml 이하, 1인당 총 1L 투명...

엑셀·워드와 호환되는 최신 WYSIWYG 웹 에디터 강추

최신 자료를 기반으로 엑셀과 워드 호환이 잘 되는 상위 10개의 WYSIWYG 웹에디터를 조사하겠습니다. 이 목록은 사용량, 기능, 개발자 선호도를 고려하여 선정되며, 각 웹에디터의 공식 웹사이트 링크도 함께 제공해드리겠습니다.  엑셀·워드와 호환되는 최신 WYSIWYG 웹 에디터 10선 1.  CKEditor 5 오픈 소스 기반의  CKEditor 5 는 높은 완성도의 WYSIWYG 웹 에디터로, Drupal 등 주요 CMS에서 기본 에디터로採용될 정도로 널리 쓰입니다 ( Drupal and CKEditor: a history of advanced content editing | CKEditor | CKEditor ). 풍부한 플러그인과 커스터마이징 기능을 제공하며,  Microsoft Word  문서를 댓글이나 변경 추적 내용까지 포함하여 불러오는 고급 호환 기능도 갖추고 있습니다 ( Wysiwyg Editors Statistics 2025 ). 또한 별도 플러그인을 통해 편집한 내용을 바로  .docx  워드 파일로 내보낼 수 있어 워드 호환성이 뛰어납니다 ( Export to Word | CKEditor 5 Documentation ). 개발자들은 CKEditor 5의 모듈식 설계와 활발한 커뮤니티 지원을 선호하며, 기업용 협업 편집 기능 등의 프리미엄 옵션도 제공됩니다. 2.  TinyMCE TinyMCE 는 오랜 역사와 함께 가장 널리 사용되는 웹 에디터 중 하나로, WordPress에서는 수년간 기본 편집기로採用되어 왔습니다. Joomla, Umbraco, Shopify 등 수많은 CMS에 내장되어 있으며, 전 세계 웹 콘텐츠의 약 40%가 TinyMCE로 작성·출판되고 있다고 합니다 ( Configure TinyMCE for your CMS to rival Wix and WordPress | TinyMCE ). 기본 기능만으로도 강력하지만,...