숫자가 있다는 이유로 작품명까지 표기처럼 강조하면 문장의 뜻이 달라 보일 수 있다. K-POP PULSE의 당시 렌더러 수정에는 숫자와 문장부호 조건, 소유격 따옴표의 경계를 보완한 기록이 있다. 나는 이 작업에서 한 단계 더 나아가 강조할 뜻을 편집자가 명시하는 작은 모듈을 새로 만들었다.
일반 문장과 표기를 구별한 토큰을 받아 화면으로 출력한다. 편집자가 정한 뜻이 맞는지 판단하거나 시각을 환산하는 기능은 아니다. 코어 검사는 통과했고 새 예제의 PC·작은 화면·키보드 입력 검수는 아직 대기 중이다. 코드와 이 범위를 함께 공유한다.
형태를 찾는 일과 뜻을 정하는 일을 나눈다
시간, 날짜와 작품명은 모두 숫자와 따옴표를 가질 수 있다. 같은 모양이 다른 뜻을 가지면 정규식 조건만 늘려 모든 문장에서 정확하게 분류하기 어렵다. 새 모듈은 숫자를 자동 판정하는 대신 편집자가 일반 문장과 표기를 입력 구조에서 구별하도록 한다.
이 선택은 기존 콘텐츠를 자동으로 전부 바꾸는 기능을 포기하고 모든 것을 지우는 일이 아니다. 이미 알고 있는 뜻을 표시 단계까지 보존하는 경로를 제공하는 것이다. 자동 가져오기가 필요하면 그 의미 지정과 검토를 별도로 마련하고 화면 출력과 한 번에 섞지 않는다.
입력 토큰은 순서를 가진 문장의 부분이다
text는 일반 문장이고 notation은 편집자가 표기로 지정한 문자열이다. 이름에 숫자가 있더라도 text면 강조하지 않으며 소유격의 따옴표가 다음 표기와 짝을 이루려 하지 않는다. 토큰의 순서는 원문의 읽기 순서로 유지한다.
아래는 새 설명용 입력이다. 예제의 이름과 값은 합성이며 실제 일정이 아니다. 데모 화면은 앞·표기·뒤의 세 필드로 관계를 보여 주지만 핵심 API는 순서 있는 여러 토큰을 받을 수 있다. 전체 블로그의 글감이나 편집 형식을 세 부분으로 제한하는 규칙이 아니다.
코드와 구현 살펴보기
새 명시 토큰 입력. 합성 이름·시각이며 실제 일정 확인/환산이 아니다.
const tokens = [
{type:'text', text:"Aster's next date is "},
{type:'notation', text:'6PM (KST)'},
{type:'text', text:'.'}
];
renderNotationTokens(tokens);
// Only the explicitly marked token becomes a code element.
// This does not verify or convert the time value.사용자 문자열을 태그 실행 권한으로 읽지 않는다
코어는 고정된 code 태그와 이스케이프한 텍스트만 출력한다. 태그처럼 생긴 문자열을 넣어도 그 태그를 만들지 않고 글자로 보여 준다. 편집자가 표기로 지정했다는 사실은 문자열 안의 HTML을 실행해도 된다는 뜻이 아니다.
이 모듈은 일반 HTML을 받아 허용 태그를 남기는 정리 프로그램이 아니다. 기존 HTML을 넘기면 태그 모양도 텍스트가 된다. 실제 HTML 구현이나 영상은 사이트의 별도 편집 블록에서 다루고, 이 작은 강조 기능을 관리자나 전체 문서의 실행 권한으로 확대하지 않는다.
모르는 종류는 그대로 통과시키지 않는다
알 수 없는 토큰 종류나 문자열이 아닌 값은 오류로 끝난다. 과도한 토큰도 조용히 일부만 출력하지 않고 계약을 거부한다. 이 범위는 화면을 읽는 사람이 원고가 잘렸는지 모르는 상태를 피하기 위한 명시적 조건이다.
필요한 표기가 늘면 종류의 의미와 출력, 검사를 함께 추가할 수 있다. CSS의 code.notation도 자신의 색과 줄바꿈 조건에 맞게 바꾼다. 새 기능을 넣었다고 이미 지정된 문장의 순서와 값을 바꾸지 않도록 확인한다. 이 패키지는 서버 저장이나 전체 문서 편집기를 포함하지 않는다.
표기가 잘 보이는지 확인할 때는 색의 차이뿐 아니라 확대와 줄바꿈, 주변 문장과의 읽기 순서도 살핀다. 강조 때문에 긴 값이 잘리거나 원래 문장을 따라가기 어려워지면 표시의 목적을 다시 판단해야 한다.
코드 검사와 화면 검수를 각각 남긴다
다운로드에는 핵심 모듈, 한영 독립 HTML, 설명과 Node 재현 검사가 있다. 숫자가 있는 작품명, 소유격·둥근 따옴표, 태그처럼 생긴 입력, 잘못된 종류와 과도한 토큰 등 열 개 합성 검사를 통과했다. 의미의 진실성과 모든 HTML 보안을 인증하는 검사로 넓히지 않는다.
이번에는 실제 Studio 브라우저의 한국어·영어 예제 프레임을 960px·390px 폭으로 확인했다. 입력한 표기가 읽는 화면에 반영됐고 태그처럼 생긴 문자열도 이미지 요소를 만들지 않고 문자로 표시됐다. 작은 폭에서 줄바꿈과 가로 넘침도 확인했다. 보조 기술의 읽기 순서와 실제 기기, 적용한 사이트 전체 흐름은 별도 검수 범위다. 아래에서 자신의 문자열을 바꾸어 명시한 뜻과 표시가 어떻게 연결되는지 살펴볼 수 있다.