🎨 어드민 핵심 기능 및 듀얼 에디터 소개

본 문서는 다국어 동시 발행, 기기별 레이아웃 배치, 실시간 디자인 에디터 등 관리자 페이지(어드민)가 제공하는 핵심 기능들의 기본 구성과 개요를 소개합니다.

📝 1. 다국어 글 작성 및 듀얼 에디터

글 작성 메뉴에 진입하면 여러 언어 탭이 한 화면에 나란히 배열된 다국어 작성 환경이 제공됩니다.

① 다국어 글 일괄 작성 및 저장

• 작성 흐름: 상단 언어 탭(KO, EN, JA 등)을 전환하며 제목, 요약, 슬러그(주소명) 및 본문을 각 언어에 맞게 작성합니다.
• 일괄 저장: 하단의 [모든 탭 동시 저장하기] 버튼을 통해 작성한 모든 언어의 글들을 데이터베이스에 한 번에 저장할 수 있습니다. 발행 설정이 되지 않은 언어는 자동으로 초안으로 저장되며, 비워둔 언어 탭은 데이터가 생성되지 않고 제외됩니다.

② 듀얼 에디터 지원 (비주얼 vs 마크다운)

• 비주얼 HTML 에디터 (Visual): 일반적인 웹 에디터처럼 서식을 지정하고 미디어를 임베드하며 직관적으로 작성하는 방식입니다. 이미지 파일은 툴바 업로드 버튼으로 본문에 간편하게 삽입할 수 있습니다.

• 마크다운 에디터 (Markdown): 마크다운 문법을 선호하는 사용자를 위해 제공됩니다. 제목, 요약, 카테고리, 태그 등의 정보는 마크다운 헤더 영역에 Front Matter(---) 형식으로 자동 관리됩니다. 저장 시 마크다운 원문과 변환된 HTML 본문이 함께 저장됩니다.

③ 대표 이미지(썸네일) 자동 지정

• 별도로 대표 이미지를 지정하지 않은 경우, 시스템이 본문 내용을 분석하여 썸네일을 자동으로 설정합니다.
  • 1순위: 본문 내용에 삽입된 가장 첫 번째 이미지
  • 2순위: 본문에 이미지가 없고 유튜브 링크나 iframe 임베드가 포함된 경우, 해당 비디오의 공식 고해상도 썸네일 주소

🧱 2. 기기별(데스크톱/모바일) 독립 위젯 배치

레이아웃 에디터에서는 마우스 드래그 앤 드롭으로 사이드바와 본문 영역의 위젯 카드 순서를 조정할 수 있으며, 방문자의 기기 유형(데스크톱 또는 모바일)에 따라 독립된 위젯 노출 설정을 구성할 수 있습니다.

⚙️ 기기별 위젯 노출 조건

1. 디자인 에디터 메뉴 내 블로그 구조 탭에서 전체 레이아웃의 컬럼 구성 및 너비 비율을 선택합니다.
2. 각 위젯 추가 및 변경 시 노출 기기 조건(Device)을 지정할 수 있습니다.
   • Desktop(데스크톱 전용): 화면 폭이 넓은 PC 화면에만 위젯을 노출하며, 모바일 접속 시에는 불필요한 리소스 로드를 차단합니다.
   • Mobile(모바일 전용): PC 화면에서는 숨겨지고 스마트폰 및 태블릿 모바일 해상도에서만 표시되도록 제한합니다.
3. 효과: 모바일 사용자에게 불필요하거나 무거운 위젯의 렌더링과 다운로드를 생략하여, 접속 속도와 스크롤 성능을 최적화합니다.

🎨 3. 실시간 디자인 에디터 및 테마 설정

디자인 에디터에서 변경한 테마 색상 및 스타일 정보는 서버 재빌드나 배포 과정 없이 저장 즉시 방문자 브라우저의 CSS 변수로 반영됩니다.

• 4가지 배경 타입: 단색(Solid), 그라디언트(Gradient), 배경 이미지(Image), HTML5 Canvas 애니메이션(Canvas) 형식을 선택할 수 있습니다.
• 글래스모피즘 효과: 이미지 배경 사용 시 텍스트 가독성을 확보할 수 있도록 불투명도(Opacity)와 흐림(Blur) 수치를 조절하는 유리창 효과 설정을 지원합니다.
• 인터랙티브 캔버스: 샌드박스로 격리된 안전한 캔버스 내에서 눈송이, 물결, 별자리 등 움직이는 모션 아트워크를 배경으로 구동할 수 있습니다.

[!TIP]
배경 설정 옵션의 종류와 예시 스크립트는 디자인 에디터 설정 소개 문서에서 확인하실 수 있습니다.

💾 4. 미디어 저장소(Storage) 지원

본문에 사용하는 미디어가 저장될 클라우드 스토리지를 필요에 따라 유연하게 전환하여 운용할 수 있습니다.

1. 미디어 라이브러리 메뉴 하단의 저장소 설정 영역으로 이동합니다.
2. 연동할 스토리지 유형을 선택하고 정보를 입력합니다.
   • Cloudflare KV: 에지 노드의 KV 저장소에 에셋을 보관하여 신속하게 서빙합니다.
   • Cloudflare R2: 대용량 오브젝트 스토리지를 사용하여 비용 효율적으로 이미지를 관리합니다.
   • Supabase Storage: Supabase 스토리지 버킷 경로에 미디어를 업로드하여 안전하게 보관합니다.
   • ImageKit.io: 글로벌 이미지 CDN 플랫폼을 연동하여, 업로드한 이미지의 해상도 최적화 및 압축 처리를 활용합니다.
3. 저장소 실시간 전환: 변경 사항 저장 즉시 업로드 엔진이 해당 저장소로 전환되어 구동됩니다.

[!NOTE]
기본 미디어 저장소(Cloudflare KV)의 탐색기 기능 제한
Cloudflare KV는 Workers 사용량 및 비용 최적화를 위해 이미지 탐색기 내 목록 조회(조회 API 호출)를 지원하지 않습니다. 반면 Cloudflare R2, Supabase Storage, ImageKit.io 등의 외부 저장소를 설정하여 연결하는 경우에는 업로드된 이미지들의 목록 조회와 미리보기 탐색 기능을 모두 사용할 수 있습니다.