스벨트킷 블로그 엔진 v1.0.0.10 업데이트 안내
스벨트킷 블로그 엔진(SvelteKit Blog Engine) v1.0.0.10 버전 업데이트 내용입니다.
다국어로 글을 계속 작성하다 보니 관리자 페이지에서 특정 언어의 글만 따로 모아서 보거나, 어떤 언어의 번역이 덜 작성되었는지 확인하기 불편한 점이 있었습니다. 이번 버전에서는 이 부분을 개선하기 위해 포스트 관리 페이지의 동적 언어 탭을 추가하고, 블로그 허브 연동 프로토콜 보완, 에디터 서식 유실 방지, 배포 명령어 간소화 작업을 진행했습니다.
1. 포스트 관리 페이지 언어별 필터 탭 추가
기존에는 전체 포스트가 작성일 순으로만 나열되어 있어, 한국어, 영어, 일본어 등 여러 언어가 섞여 있을 때 관리하기가 번거로웠습니다.
주요 변경 사항
- 동적 언어 감지 및 카운트 배지: 코드로 언어 목록을 고정하지 않고, 데이터베이스에 등록된 언어와 실제 작성된 포스트 데이터를 종합하여 탭을 동적으로 만듭니다. 각 탭 옆에는 작성된 글 개수가 실시간으로 표시됩니다.
- 글이 없는 언어 선택 시 안내: 아직 작성된 글이 없는 언어 탭(예:
English (0))을 누르면 단순 빈 화면 대신 안내 문구와 함께 해당 언어로 바로 글을 작성할 수 있는 링크 버튼이 표시됩니다. - 단일 언어 환경 고려: 다국어를 쓰지 않고 단 1개의 언어로만 운영되는 블로그에서는 불필요하게 탭 바가 나오지 않도록 처리했습니다.
- 목록 내 언어 뱃지 및 페이지네이션 연동: 테이블의 각 제목 옆에 언어 코드(
KR,EN,JA등)를 표시하여 한눈에 구분할 수 있게 했고, 탭을 바꿀 때 자동으로 1페이지로 넘어가도록 처리했습니다.
2. 블로그 허브(Hub) 연동 프로토콜 보완
중앙 피드 플랫폼인 스벨트킷 블로그 허브(hub.sveltekitblog.com)로 글을 전송할 때 발생하던 자잘한 엣지 케이스들을 정리했습니다.
주요 보완 내용
- 서론 1,500자 HTML 자동 추출: 마크다운이든 비주얼 HTML이든, 피드 카드에 적합한 서론 1,500자 분량의 HTML을 서버 측에서 정제하여 허브로 전달합니다.
- 이미지 상대경로 자동 변환: 본문에 들어간
/images/posts/...같은 내부 상대 경로 이미지를 사이트 대표 도메인이 포함된 완전한 절대 URL(https://도메인/images/...)로 자동 변환하여, 허브 피드에서 썸네일과 본문 이미지가 깨지지 않도록 했습니다. - 글 수정 시 최초 발행일 유지: 이미 올라간 글을 수정할 때 수정일시로 덮어써지지 않고, 최초 발행일(
published_at)을 보존하여 허브 피드 타임라인의 시간 순서가 꼬이지 않도록 수정했습니다. - 허브 자동 제출 기본값 설정: 관리자 설정(
⚙️ 설정)에 '글 작성 시 허브 자동 제출 기본 활성화' 토글을 추가하여, 새 글을 쓸 때 매번 체크박스를 따로 누르지 않아도 되도록 개선했습니다.
3. 포스트 에디터 서식 유실 방지 가드
포스트 에디터에서 모드를 전환하거나 에디터 종류를 바꿀 때 작성 중이던 내용이 실수로 날아가는 일을 방지하는 안전장치를 추가했습니다.
- HTML ➔ Visual 모드 전환 경고: HTML 에디터에서 커스텀 테이블(표)이나 인라인 스타일을 작성한 뒤 Visual 모드로 돌아갈 경우, 티프탭(Tiptap) 파서에 의해 비표준 태그가 정제되어 지워질 수 있습니다. 이런 손실을 막기 위해 모드 전환 전 확인 알림창을 띄우도록 했습니다.
- 에디터 유형(HTML ↔ Markdown) 변경 락: 이미 저장된 글의 경우 데이터 보호를 위해 에디터 종류를 잠그고, 변경을 시도할 때 경고창을 통해 데이터 손실을 사전에 인지할 수 있도록 했습니다.
4. 다중 계정 배포(deploy-multi) CLI 옵션 간소화
여러 계정을 배포할 때 사용하는 deploy-multi 스크립트의 인자 입력 방식을 직관적으로 바꿨습니다.
# 이전 방식
npm run deploy:multi -- myaccount --admin-only
# 변경된 방식 (간결한 옵션 지원)
npm run deploy:multi -- myaccount admin # 어드민만 배포
npm run deploy:multi -- myaccount blog # 블로그만 배포
npm run deploy:multi -- myaccount # 전체(블로그+어드민) 배포
기존에 사용하던 --admin-only, --blog-only 플래그도 그대로 작동합니다.
적용 방법
저장소에서 최신 코드를 pull 받은 뒤 배포를 진행하시면 됩니다.
# 최신 코드 받기
git pull origin main
# 배포 실행 (예시)
npm run deploy:admin
# 또는 멀티 배포 시
npm run deploy:multi -- <계정명> admin
블로그를 직접 운영하면서 필요한 기능이나 수정할 점이 보이면 계속해서 다듬어나갈 예정입니다. 감사합니다.
댓글 0개
댓글을 작성하려면 로그인이 필요합니다.