본문으로 건너뛰기

Karma, CMS with AI

검정 셰이더 배경 위에 Karma의 글 편집 화면을 정면으로 크게 배치한 16:9 커버

Karma

Karma는 여러 사이트의 글과 소개 페이지를 한곳에서 만들고 관리하는 서비스입니다. 운영하는 사이트가 늘어나도 채널을 선택해 글을 찾고, 내용을 고치고, 공개하는 일을 같은 관리 화면에서 이어갈 수 있도록 만들었습니다.

작업은 콘텐츠 목록과 편집 화면에서 시작했습니다. 글을 고르는 데 필요한 정보가 흩어져 있었고, 글과 소개 페이지에는 서로 다른 편집 방식이 필요했습니다. 여기에 초안과 공개본을 나누는 규칙, 사람과 AI가 같은 내용을 고칠 때의 저장 규칙까지 연결했습니다.

  1. 사이트 선택관리할 채널을 고릅니다.
  2. 글·페이지 작성콘텐츠에 맞는 편집기를 씁니다.
  3. 초안 저장작업 중인 내용을 보관합니다.
  4. 미리보기·발행확인한 내용을 공개합니다.

고칠 글을 먼저 찾게

기존 목록은 한 행에 미리보기, 완성도, 검색엔진 등록 정보와 실행 버튼을 함께 보여줬습니다. 제목 아래에서도 분류와 번역 정보가 여러 줄로 나뉘어, 글을 고를 때 확인할 정보와 운영 도구가 섞여 있었습니다.

목록에서는 제목과 공개 상태를 먼저 읽고, 세부 작업은 필요할 때 여는 편이 맞다고 판단했습니다. 분류·시리즈·번역을 한 줄로 묶고, 반복하던 버튼을 줄였습니다. 검색엔진 등록 관리는 별도 화면에서 이어가게 해 기능을 유지하면서 목록의 정보 순서를 정리했습니다.

정리 전 · 글 정보와 운영 도구가 한 행에 섞여 있었습니다. · 예시 데이터를 사용한 실제 화면
정리 전 · 글 정보와 운영 도구가 한 행에 섞여 있었습니다.정리 전 · 분류와 번역 정보가 여러 줄로 나뉘어 있습니다.
정리 후 · 분류·시리즈·번역을 한 줄로 묶었습니다. · 예시 데이터를 사용한 실제 화면
정리 후 · 분류·시리즈·번역을 한 줄로 묶었습니다.
채널 선택, 분류, 검색과 실행 버튼을 타입별로 모은 컴포넌트 · 실제 컴포넌트에 예시 데이터를 넣어 촬영전체 시트 크게 보기 ↗

글과 페이지에 맞는 편집

블로그 글은 문단과 이미지를 순서대로 쌓지만, 소개 페이지는 이미지의 크기와 위치를 자유롭게 조절해야 합니다. 두 작업을 하나의 편집 방식에 맞추기보다, 콘텐츠의 성격에 따라 도구를 나눴습니다.

글에는 EditorJS를 연결해 제목·문단·목록·인용·표를 블록으로 작성하게 했습니다. 본문과 제목·요약, 검색 결과에 보일 내용은 구분하고, 언어를 바꾸면서 번역문도 같은 화면에서 편집할 수 있게 했습니다.

본문 블록, 제목과 요약, 검색 설정을 모은 편집 컴포넌트 · 실제 컴포넌트에 예시 데이터를 넣어 촬영전체 시트 크게 보기 ↗

소개 페이지의 배치

소개 페이지에는 GrapesJS를 연결했습니다. 화면에서 요소를 선택하고, 글자 크기와 간격, 색상과 배치를 조절할 수 있게 했습니다.

완성된 화면만 이미지처럼 보관하면 나중에 다시 고치기 어렵습니다. 편집에 필요한 배치와 스타일 정보도 본문과 함께 저장해, 같은 편집기에서 페이지를 다시 열어 수정할 수 있게 구성했습니다.

페이지에서 제목을 선택한 상태. 파란 선택 테두리와 편집 도구가 보입니다.
페이지에서 제목을 선택하고 글자 스타일을 조절하는 화면 · 예시 데이터를 사용한 실제 화면
내장 HTML WYSIWYG 편집기

저장과 공개를 분리

페이지를 고치는 중간 내용이 방문자에게 바로 보이면 준비되지 않은 화면이 공개될 수 있습니다. 그래서 작업을 보관하는 저장과, 방문자에게 보여주는 발행을 별도 행동으로 나눴습니다.

저장하면 초안만 새로 남고 공개본은 유지됩니다. 저장본을 미리보기로 확인한 뒤 발행하면 그때 공개본이 바뀝니다. 이전에 저장한 내용을 골라 다시 공개할 수도 있어, 수정 중인 내용과 현재 공개한 내용을 따로 관리할 수 있게 했습니다.

다른 수정을 덮어쓰지 않게

사람이 편집 화면을 열어둔 사이에 AI나 다른 사람이 같은 글을 고칠 수 있습니다. 예전 화면에서 그대로 저장하면 나중에 저장한 내용이 앞선 수정을 지울 수 있습니다.

저장 전에 다른 변경이 먼저 저장됐는지 확인하도록 했습니다. 내용이 바뀌었다면 저장을 막고 최신 내용을 다시 불러오도록 안내합니다.

저장
수정한 내용은 초안에 보관합니다. 방문자가 보는 공개본은 그대로 유지됩니다.
발행
미리보기로 확인한 초안을 공개합니다. 이전 저장본을 골라 다시 발행할 수도 있습니다.
동시 수정
다른 사람이 먼저 저장했다면 덮어쓰기를 막습니다. 최신 내용을 다시 불러와 확인합니다.
예시 데이터로 보여주는 콘텐츠 상태, 저장 피드백, 공동편집과 공개 범위 · 실제 컴포넌트에 예시 데이터를 넣어 촬영전체 시트 크게 보기 ↗

화면과 AI가 같은 초안을 수정

AI가 제목과 본문을 수정할 때에도 관리 화면과 같은 저장 규칙을 따르게 하는 연결이 필요했습니다. MCP 도구로 제목·본문·이미지와 페이지 요소를 수정하고, 그 결과를 관리 화면과 같은 페이지 초안에 저장하도록 했습니다.

편집에 필요한 원본과 방문자가 보는 결과물도 구분했습니다. 원본에는 내용과 HTML/CSS, 편집 정보를 함께 보관하고, 발행할 때 검증한 문서에서 공개용 HTML을 만듭니다. 저장할 버전과 채널 접근 권한을 확인해 사람과 AI의 수정이 같은 규칙을 따르도록 구성했습니다.

관리 화면MCP
페이지 초안내용·HTML/CSS·편집 정보
버전·문서 검증저장 기준과 공개 구조 확인
공개용 HTML발행한 내용만 방문자에게 표시

초안에서 발행 준비까지

콘텐츠 운영에서는 본문 작성 뒤에도 제목과 요약을 옮기고, 검색 결과에 보일 문구를 넣고, 언어별 초안을 준비하는 일이 반복됩니다. AI가 만든 글을 다시 복사해 입력하는 대신 이 항목들을 MCP로 함께 전달할 수 있게 했습니다.

운영자는 관리 화면에서 내용을 검수하고 발행을 결정합니다. 같은 문서를 다시 읽어 제목이나 본문 일부만 고칠 수도 있어, 초안 작성 뒤의 수정 작업까지 이어갈 수 있습니다. 이 소개 페이지 역시 MCP로 문구·이미지·배치를 수정하고 저장본을 확인한 뒤 발행했습니다.

콘텐츠 작업 요청 예시

“이 자료로 글 초안을 만들고, 제목·요약·검색 설명과 영어 초안까지 준비해줘. 공개 전에는 검토할 수 있게 저장해줘.”

MCP로 초안 준비 관리 화면에서 검수 발행

반복 작업을 줄인 콘텐츠 운영

글 한 편을 작성하는 데 약 60분이 걸리던 작업을 MCP로 연결해 약 12분으로 줄이는 운영 시나리오입니다. 제목·요약·검색 설명을 따로 입력하던 과정을 함께 처리해, 내용을 검토하고 다듬는 데 집중합니다.

기존에는 모든 채널을 합쳐 하루 최대 3편을 작성했다면, 개선 후에는 채널별 작성 수 제한 없이 글을 준비할 수 있습니다. 월 유입은 한 달 만에 150명에서 1,200명으로 늘어나는 상황을 설정했습니다.

가상 운영 시나리오
항목도입 전MCP 활용 후
게시글 1편 작성약 60분약 12분작성 시간 80% 감소
작성 가능량하루 최대 3편전체 채널 합산작성 수 제한 없음채널별로 글 작성 가능
월 유입평균 150명1.2k명한 달 만에 8배

운영 화면에서 공개 화면까지

목록에서 글을 고르고, 콘텐츠에 맞는 편집기로 수정하고, 미리보기 후 공개하는 흐름을 구현했습니다. 목록의 정보 순서와 편집 도구를 정리하는 데서 시작해, 작업 중인 내용과 공개한 내용을 구분하는 규칙까지 같은 작업 공간에 연결했습니다.

SIK에서도 이 관리 흐름을 사용하고 있습니다. 관리 기능은 공통으로 쓰되 방문자가 보는 콘텐츠는 각 사이트의 디자인을 따르도록 했습니다. 아래는 Karma에서 관리한 콘텐츠를 보여주는 SIK의 공개 화면입니다.

Karma로 관리하는 콘텐츠를 보여주는 SIK의 공개 글 목록

Karma, CMS with AI

Karma는 글 작성, MCP 연결, 페이지 디자인을 하나의 플랫폼에서 해결하는 CMS입니다.

Sik ·