# Mobile Blog Readability

> Beacon·내공·보호자노트 등 한국어 정보성 블로그의 원고와 공개 화면을 문장별 여백, 목록 번호, 약어 설명 중심으로 모바일에 맞게 편집하고 의미 보존을 검사한다.

- Skill: `formars0309-cloud/mobile-blog-readability` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add formars0309-cloud/mobile-blog-readability`
- Raw SKILL.md: https://api.skillmd.com/api/skills/formars0309-cloud/mobile-blog-readability/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: formars0309-cloud (https://skillmd.com/u/formars0309-cloud)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/formars0309-cloud/mobile-blog-readability

---


# 모바일 우선 블로그 편집

2026-09-14 사용자 지시로 WordPress·네이버·Google Blogger·Astro 정보성 글에 적용한다. 기존 브랜드 형식은 유지하되 문장 간격·번호·약어는 이 최신 규칙을 우선한다. 공개 권한과 의료진 검토 여부는 프로젝트 지침을 따른다.

## 필수 편집

- 본문의 **모든 완성 문장 뒤에 빈 줄 한 줄**을 둔다. Markdown은 문장마다 빈 줄로 문단을 구분한다. HTML은 문장마다 `<p>`로 나누고 본문 범위 CSS로 문단 사이 본문 한 줄 높이의 여백을 만든다. HTML 소스 개행만으로 화면 여백이 생겼다고 판단하지 않는다.
- 네이버 본문 텍스트에는 글자 크기 19를 명시한다. 문서 전체 기본값만 설정하거나 빈 `se-fs-` 클래스를 남긴 상태는 통과가 아니다. 공개 페이지에서 각 텍스트의 실제 계산 크기가 18px 이상인지 확인한다. 기존 소제목의 더 큰 크기는 유지한다.
- 네이버는 문장 문단 사이 빈 문단 한 개를 실제로 유지한다. Enter 한 번의 효과를 추측하지 말고 저장·재열기 후 공개 DOM과 화면을 확인한다. 연속 빈 문단 두 개 이상은 만들지 않는다.
- 소수점·날짜·URL·DOI·영문 약어·말줄임표 내부를 문장 끝으로 오인하지 않는다. 닫는 따옴표·괄호·인용번호는 해당 문장에 붙인다. 여러 문장인 인용과 목록 설명도 같은 인용 블록·목록 항목 안에서 문장별 여백을 둔다. 제목·단어형 목록·서지 항목·짧은 표 셀에는 강제 빈 줄을 넣지 않는다.
- 병렬 항목·체크 항목·절차는 목록으로 보여준다. 소제목 번호가 `1. 2.`이면 본문 나열은 `① ②`를 쓴다. HTML에서는 실제 목록 구조를 유지하면서 원문자 마커를 쓴다. 소제목이 무번호인 브랜드는 유지할 수 있다. 실제 순서가 있는 절차만 단계로 표현한다. 비순위 항목은 ‘확인할 항목’ 등 중립적 도입으로 식별용 번호임을 드러낸다. OR 조건을 AND 조건으로 바꾸거나 번호로 우선순위를 만들어내지 않는다.
- 본문에 법조문 항 표시 `①②`가 있으면 목록은 `(1) (2)`로 구분한다. 보호자노트는 이 방식을 기본으로 한다. 참고문헌·출처의 서지 목록에는 본문용 번호와 한 줄 여백을 강제하지 않는다. 출처 영역의 설명 문장은 문장 간 한 줄 여백을 유지한다.
- 생소한 기관·검사·제도 약어는 첫 본문 등장에 한국어 명칭과 필요한 짧은 역할 설명을 붙인다. 예: `영국 국가보건서비스(NHS)`; 필요하면 `영국의 공공의료 서비스로, 일반인을 위한 건강정보도 제공합니다.`라고 설명한다. 이후 NHS로 줄일 수 있다. 참고문헌의 원래 기관명과 공식 제목은 보존한다.

## 모바일 화면

- 본문 18px 이상, 보조 설명·출처 약 16px 이상을 시작값으로 쓴다. 왼쪽 정렬, 행간 1.7~1.8, 좌우 여백 16~24px를 기본으로 실제 화면을 조정한다. 호스팅 플랫폼이 제한하면 실제 적용값·제약을 기록한다.
- H1 한 개, 의미에 맞는 H2/H3 계층과 기존 브랜드 소제목 형식을 유지한다. 소제목 전 여백을 문장 사이보다 크게 둔다. 문단마다 구분선을 추가하지 않는다.
- 강조는 핵심 구절에 한정하고 부정·예외만 분리해 의미를 바꾸지 않는다. 네이버 Beacon의 기존 굵기 범위는 유지한다. 색만으로 뜻을 전달하지 않는다.
- 표 글자를 줄여 맞추지 않는다. 단위·조건·행과 열의 대응을 보존하고 표 영역만 가로 스크롤하거나 항목 카드로 바꾼다. 페이지 전체 가로 넘침은 금지한다.
- 이미지 비율·대체텍스트·링크·캡션을 보존한다. 이미지 안의 작은 글자를 유일한 정보 전달 수단으로 쓰지 않는다. 기존 승인 이미지를 가독성 개정만으로 재생성하지 않는다.

## 개정과 검증

1. 최근 글은 수정일이 아닌 실제 공개일로 선정하고 URL·공개일·채널을 기록한다. 공개본과 로컬이 다르면 공개본을 먼저 백업한다. 다른 작업 중 원고·초안은 최근 공개 글에 포함하지 않는다.
2. 수정 전 원문과 자산을 백업하고 해시를 남긴다. 기존 URL·게시일·의료진 검토 상태·출처를 유지한다. 원고·변환기·입력 지시·검증 규칙을 함께 연결한다.
3. 수치·단위·조건·예외·부정·인용·링크·이미지가 보존됐는지 대조한다. 가시 텍스트 정규화 일치는 보조 검사이며 목록 전환의 의미 검토를 대신하지 않는다. `fact-integrity`가 있으면 함께 사용한다.
   약어 삽입·조사 보정·제목 레벨·차례 생성은 별도 변경으로 기록한다. 본문 정규화 일치를 페이지 전체가 동일하다는 뜻으로 보고하지 않는다. H3만 있는 본문을 H2로 올리는 경우 기존 차례 정책과 상호작용을 확인한다.
4. 문장 분리는 마침표 정규식 하나로 자동 수정하지 않는다. 한국어 종결과 문맥을 확인하고, 자동 검출은 후보·누락 탐지로 사용한다. 애매한 경계를 조용히 통과시키지 않는다.
5. 360/390/430px 폭에서 저장된 결과를 실제 브라우저로 확인한다. 문장 간 여백, 번호와 소제목 구분, 표 조작, 이미지 잘림, 페이지 가로 넘침, 확대를 확인한다. 뷰포트 검증을 실기기 검증이라고 기록하지 않는다.
6. 자동 검사·빌드와 시각 검수 결과를 구분해 기록한다. 공개 수정 시 저장 응답만으로 완료하지 말고 같은 URL에서 재조회한다. 미완료 채널과 제약을 명시한다.

## 판단 근거

Astro 표시기 정본은 `assets/rehype-mobile-readability.mjs`다. `python3 scripts/install-astro.py <프로젝트>`로 배포용 생성본을 내보내고 Astro의 rehype 플러그인에 연결한다. 배포용 생성본은 직접 편집하지 않는다. 표시기 변경 때 설치기는 재생성 가능한 Astro/Vite 캐시를 비워 이전 렌더 결과가 재사용되지 않게 한다. 빌드 종료 코드 0을 확인한 다음 캡처한다.

표시기는 문장·인라인 수식·괄호·인용번호를 보존하고, 여러 문장의 직접 인용은 같은 문단 안에서 `<br><br>`로 빈 줄을 둔다. 명시적인 첫째·둘째 나열은 원문 설명과 예외를 각 항목에 붙여 목록으로 만든다. 프로젝트가 직접 검토한 `listSections`와 `glossary`만 옵션으로 전달하며 약어 뜻을 추측해 등록하지 않는다. 문장·링크·표·인용 보존 검증은 `node --test scripts/readability.test.mjs`로 실행한다. 렌더링 변경 뒤 기존 원고 SHA가 같아도 화면 변경 자체를 새로 검수한다.

위 검사 경로는 전역 스킬 안의 정본이다. 설치된 Astro 저장소에서는 `node --test scripts/mobile-readability.test.mjs` 또는 `npm run test:mobile`을 실행한다. 화면 캡처에서 고정 헤더가 검사하려는 본문 첫 줄을 가리지 않도록 스크롤 여유를 둔다.

여러 출처 링크가 문장 뒤에 이어지면 링크 묶음을 그 문장에 붙인다. 줄 첫머리 숫자 번호는 문장 종결로 자르지 않는다. Markdown 파서가 연속 번호 줄을 문단으로 남겼으면 시작 번호를 보존한 실제 목록으로 복원한다. 서수 목록 뒤 총괄·요약 문장은 목록 밖에 둔다. 이 경계는 문맥을 확인한 `enumerationEndBefore`로 지정하며 자동으로 의미를 추측하지 않는다. 검수는 첫 화면만 보지 말고 링크 묶음·중간 번호·목록 뒤 요약 위치를 포함한다.

도입 문장 뒤 첫째 항목이 시작되고 둘째 항목이 다음 문단에 있으면, 도입은 목록 밖에 두고 두 항목을 묶는다. 각 항목의 뒤 설명과 예외는 해당 항목 안에 남겨야 한다. 문단이 나뉜 서수 목록도 최종 화면 검수에 포함한다.

긴 쉼표 나열은 직접 검토한 `commaLists`의 문맥·시작·끝·항목 수가 모두 맞는 경우만 번호 목록으로 표시한다. 괄호 안 쉼표는 나누지 않고 수치·기간·연결어·종결어미까지 보존한다. 항목 수나 괄호가 달라지면 빌드를 실패시킨다. 원문 전체를 대상으로 무조건 쉼표를 나누지 않는다.

쉼표 목록 변환은 서수 목록과 문장 분리 뒤에 수행한다. `when`에는 나눌 나열 문장 자체의 고유 문구를 쓰며 앞 도입 문장만 지정하지 않는다. 첫 등장 약어의 별도 설명은 문장 분리 뒤 해당 문장 옆에 둔다. ‘아래 표는’ 같은 도입문과 표는 붙여 두고, 필요한 용어 설명은 도입문 앞에 둔다.

목록 요약 경계는 `{when: "대상 문단의 고유 문맥", before: "목록 밖으로 둘 첫 문구"}`로 지정한다. 문맥이 맞는데 경계가 없으면 빌드를 실패시킨다. 기존 문자열 형식은 호환용이며 새 설정에는 쓰지 않는다. `emphasizeParagraphs`와 `labelPrefixes`에는 직접 검토한 묶음 이름·명사형 머리말만 넣는다. 이는 새 소제목이나 차례 항목을 만드는 설정이 아니다.

약어 풀이에서 공식 링크 제목은 보존한다. 기존 괄호 안에서는 `명칭 약어` 형식으로 풀어 겹괄호를 피한다. 풀이 뒤 조사는 한국어 명칭 끝말에 맞추며 문장부호 앞도 확인한다. 단위 기호·차종명·표의 약칭을 기관·검사 약어와 똑같이 자동 확장하지 말고 글의 독자와 기존 범례에 따라 결정한다.

표에서 약어가 먼저 나오면 표의 글자·수치·셀을 바꾸지 않고 바로 뒤에 풀이를 붙인다. `definitions`는 문맥을 확인한 짧은 설명을 첫 등장 뒤에 한 번 넣는 옵션이다. 괄호 깊이는 같은 문단의 강조·링크 등 인라인 노드 사이에도 이어서 계산한다. 파서가 남긴 별표 강조 복원은 직접 확인한 `boldRepairs` 문구에만 허용하며 일반 별표·코드 표기는 그대로 둔다.

문장마다 빈 줄과 번호 구분은 사용자의 편집 선호다. 보편적인 접근성 표준의 필수값이라고 설명하지 않는다. 글자 크기·행간도 프로젝트 기본값이다.

- [W3C: 짧은 문단·명료한 소제목·목록](https://www.w3.org/WAI/tips/writing/)
- [W3C: 문단과 목록의 의미 구조](https://www.w3.org/WAI/tutorials/page-structure/content/)
- 현자 2026-09-14 비교: Claude·Codex·Antigravity 응답. Grok은 402 잔액 소진으로 실패. 의견 중 본문 16px 축소, 소제목 프리셋 강제, Enter 한 번으로 여백 보장, 마침표 정규식만으로 분리는 채택하지 않았다.

## 내용 변환의 적용 범위

기존 글 개정은 프로젝트의 `mobile-readability-scope.mjs`에 대상 slug와 신규 적용 시작일을 명시한다. 본문 변환과 요약 풀이 모두 같은 범위를 따른다. 목록·약어·제목 변경을 대상 밖의 과거 글에 자동 적용하지 않는다. 본문 크기와 줄 간격 CSS는 사이트 공통 규칙이다. 요약 약어는 `explainKoreanAbbreviations`로 본문과 같은 조사 보정·기존 풀이 보호를 재사용한다.