ICEFiction 개발기 ③: 표지·문단 정렬·인용문, 그리고 글꼴을 앱에 넣었다 (v0.5.0)
책장에 표지가 걸리고, 문단이 양쪽으로 반듯해지고, 인용문이 인용문처럼 보인다. 한글 글꼴 4종을 앱에 통째로 넣어 남의 PC에서도 같은 판면이 나온다.
쓰는 사람이 눈으로 먼저 만나는 것들을 손봤다. 책장에 표지가 걸리고, 문단이 반듯하게 눕고, 인용문이 인용문처럼 보이고, 글꼴이 내 PC 밖에서도 살아남는다.
이번 v0.5.0은 기능을 늘렸다기보다 "보이는 것"의 부채를 갚은 릴리스다. 사용자(나)가 쓰다가 걸린 여섯 가지를 한 번에 처리했다.
1. 표지 — 책장이 책장처럼
책이 늘어나니 제목만으로는 구분이 안 됐다. 표지를 붙일 수 있게 했다. 지정·변경·제거 전부.
표지는 책 폴더 안에 cover.png로 들어간다. 앱 어딘가의 DB가 아니라 그 책의 폴더에. 이 원칙은 처음부터 지켜온 것이다 — 폴더를 통째로 다른 컴퓨터에 옮겨도 표지가 따라간다. 나중에 이 앱을 안 써도, 그 폴더는 그냥 표지 이미지가 든 원고 폴더로 남는다.
구현하다 예상 못 한 벽을 만났다. 원고 안의 이미지는 ice-asset://라는 자체 프로토콜로 띄우는데, 이건 "열린 책" 기준으로 경로를 푼다. 그런데 책장 화면에는 열린 책이 없다. 서재에 있는 열 권의 표지를 동시에 띄워야 하는데 기준이 되는 책이 없는 것이다.
결국 ice-cover://book/<책id> 라는 스킴을 하나 더 팠다. 서재 폴더에서 그 책의 표지를 찾아 스트리밍한다. 여기서 또 한 번 막혔는데, 화면에 아무것도 안 나와서 한참 들여다보니 CSP(콘텐츠 보안 정책) 였다. 이미지 소스 허용 목록에 새 스킴이 없으니 브라우저가 조용히 차단한 것이다. 로그를 읽고서야 알았다.
새 프로토콜을 만들었으면 CSP에도 등록해라. 안 그러면 서버는 멀쩡히 파일을 주고 있는데 화면만 비어 있다.
교훈이라기엔 사소하지만, 이런 게 반나절을 먹는다.
2. 순서와 검색 — 책이 늘어난 다음의 문제
책장을 드래그해서 순서를 바꿀 수 있게 했다. 제목 검색창과 정렬(수동·제목·최근·오래된)도 붙였다.
순서 역시 각 책의 매니페스트에 저장한다. 앱 설정에 "1번은 이 책, 2번은 저 책" 식으로 적어두면 서재를 다른 PC로 옮겼을 때 순서가 증발한다. 순서를 책 안에 넣어두면 폴더가 곧 진실이다. 같은 이유로 표지도 폴더 안에 넣었다.
3. 문단 정렬 — 기본은 양쪽
좌·가운데·우·양쪽. 소설 판면은 양쪽 정렬이 반듯해서 기본값을 양쪽으로 잡았다.
4. 인용문 — 파서는 멀쩡했다
> 인용문을 쓰면 회색 이탤릭이 되긴 하는데, > 기호가 그대로 남고 인용 블록처럼 보이지 않았다. "인용문이 안 된다"고 적어뒀던 항목이다.
원인을 파보니 재미있었다. 마크다운 파서는 제대로 일하고 있었다. 인용문 안쪽에 인용 태그를 붙이고, > 기호에는 별도 태그를 붙여 정확히 구분해 넘겨주고 있었다. 문제는 내 쪽이었다 — 라이브 프리뷰에서 기호를 감추는 목록에 #, , ` `는 넣어놨는데 >`만 빼먹었다.** 인용 블록의 시각(좌측 바·들여쓰기)도 만든 적이 없었다.
그래서 >를 감춤 목록에 넣고(커서가 그 줄에 있으면 다시 보여준다 — 편집해야 하니까), 인용문이 걸친 줄마다 좌측 바와 들여쓰기를 입혔다. 위 스크린샷의 회색 바가 그거다.
버그를 "안 된다"로만 적어두면 원인이 안 보인다. 뜯어보니 고칠 곳은 한 줄이었다.
5. 글꼴 내장 — 남의 PC에서도 살아남기
가장 실용적인 변경. 나눔명조·나눔고딕·KoPubWorld 바탕·KoPubWorld 돋움 4종을 앱에 넣었다. 각각 보통·굵게 두 굵기, 총 8개 파일 약 12MB.
전에는 글꼴 목록에 나눔명조가 있어도, 그 PC에 나눔명조가 설치돼 있지 않으면 엉뚱한 글꼴로 떨어졌다. 이제 앱이 폰트 파일을 품고 다닌다. 누구 컴퓨터에서 열어도 내가 보던 그 판면이 나온다.
라이선스는 확인하고 넣었다. 나눔은 OFL(자유 임베드), KoPubWorld는 한국출판인회의 배포본으로 임베드가 허용된다. 라이선스 전문도 저장소에 같이 넣어뒀다. 설치파일은 99MB → 110MB가 됐는데, 11MB로 "어디서든 같은 글꼴"을 산 셈이니 남는 거래다.
6. 표지 라운드 제거
책 카드 모서리가 둥글었는데, 표지가 들어가니 어색했다. 각지게 바꿨다. 실제 책은 모서리가 둥글지 않다.
검증
이 앱은 "컴파일 통과 = 동작"이 아니라는 걸 여러 번 배웠다(이전 개발기 참고). 그래서 매번 실제 Electron 창을 띄워 확인한다.
- 타입 검사 0 errors
- 유닛 37건 (마크다운 임베드 7 · 프로젝트 21 · 서재 9)
- 편집기 E2E 24건 — 인용문 블록·
>숨김, 문단 정렬 포함 - 책장 E2E 5건 (신규) — 표지가 새 프로토콜로 진짜 로드되는지, 검색·정렬 순서가 재시작 후에도 남는지
- 내장 글꼴 8개가 런타임에 실제 로드되는지 확인
위 스크린샷도 마케팅용으로 꾸민 게 아니라, 테스트 하네스가 실제 앱을 띄워 찍은 화면이다.
다음
- macOS 빌드 (
docs/BUILD-MAC.md에 절차를 정리해뒀다. 무서명이라 Gatekeeper 우회 방법까지) - 위키링크
[[문서]]+ 백링크, 전문 검색 - 스냅샷·버전 비교
집필 도구를 만들면서 계속 확인하는 게 있다. 쓰는 사람을 방해하지 않는 것이 기능보다 앞선다. 표지가 안 보이고, 인용문이 기호로 남고, 글꼴이 남의 PC에서 깨지는 건 전부 "글 쓰는 일"을 방해한다. 이번 릴리스는 그 방해를 걷어낸 작업이다.