원고지 규칙 제거하고 격자/흐름 두 쓰기 모드 도입 #1

Merged
tyange merged 2 commits from feat/writing-modes into main 2026-06-29 07:29:43 +00:00
tyange commented 2026-06-29 07:22:00 +00:00 (Migrated from github.com)

배경

Palim의 실제 목표를 **"시인이 쓴 시를 한 글자도 안 틀리게 따라 치기"**로 다시 정의했다. 한국 시는 두 부류로 나뉘는데, 기존 원고지 규칙(칸 점유 묶기·금칙·soft-wrap)은 텍스트를 재배치해 충실한 전사를 오히려 방해했다.

  • 배치형 시(예: 「현재형 일기」, 눈송이형 구체시): 활자의 2D 위치가 곧 시 → 고정폭 격자
  • 산문·일반 시(예: 「바퀴 달린 짐 가방」): 보통 공백 + 자연스러운 흐름 → 비례폭

하나의 조판 모델로는 둘 다 담을 수 없어 두 가지 쓰기 모드로 재설계했다. 자세한 근거는 docs/writing-modes.md 참고.

변경 사항

core — 원고지 규칙 제거

  • tokenizer.ts: segmentGraphemes(자소 분할 + offset + 줄바꿈)로 단순화
  • layout.ts: flowGraphemes(자소 1=1칸, 자동 cols/rows 확장)로 교체, 단위 테스트 갱신

격자 모드 — 배치형 시

  • GridEditor: 동적 크기·옅은 가이드, IME·캐럿 모델 유지
  • GridPreview: 흐름 모드 자간 + 공백=글자폭, full-width 흰 박스에 자연 크기

흐름 모드 — 산문·일반 시 (신규)

  • FlowEditor: 공백 보존 비례폭 textarea (native IME)
  • FlowPreview: canvas 측정 비례폭 조판

배선·정리

  • ModeToggle + EditorView 모드 분기 (격자는 세로 스택, 흐름은 좌우)
  • useExport로 SVG/PNG 공통화
  • 죽은 코드 제거(EditorToolbar 등), 문서 전면 갱신

검증

  • bun run test:run (11개 통과), bun run build (vue-tsc) 클린
  • 브라우저로 두 모드 입력·미리보기·내보내기 확인

알려진 후속 (별도 작업)

  • 격자 빈 칸 클릭 후 타이핑 시 공백/줄바꿈 누락 (실제 IME 재현 확인 필요)
  • 넓은 격자 가로 스크롤 UX, 텍스트·모드 localStorage 저장

🤖 Generated with Claude Code

## 배경 Palim의 실제 목표를 **"시인이 쓴 시를 한 글자도 안 틀리게 따라 치기"**로 다시 정의했다. 한국 시는 두 부류로 나뉘는데, 기존 원고지 규칙(칸 점유 묶기·금칙·soft-wrap)은 텍스트를 재배치해 충실한 전사를 오히려 방해했다. - **배치형 시**(예: 「현재형 일기」, 눈송이형 구체시): 활자의 2D 위치가 곧 시 → 고정폭 격자 - **산문·일반 시**(예: 「바퀴 달린 짐 가방」): 보통 공백 + 자연스러운 흐름 → 비례폭 하나의 조판 모델로는 둘 다 담을 수 없어 **두 가지 쓰기 모드**로 재설계했다. 자세한 근거는 `docs/writing-modes.md` 참고. ## 변경 사항 **core** — 원고지 규칙 제거 - `tokenizer.ts`: `segmentGraphemes`(자소 분할 + offset + 줄바꿈)로 단순화 - `layout.ts`: `flowGraphemes`(자소 1=1칸, 자동 cols/rows 확장)로 교체, 단위 테스트 갱신 **격자 모드** — 배치형 시 - `GridEditor`: 동적 크기·옅은 가이드, IME·캐럿 모델 유지 - `GridPreview`: 흐름 모드 자간 + 공백=글자폭, full-width 흰 박스에 자연 크기 **흐름 모드** — 산문·일반 시 (신규) - `FlowEditor`: 공백 보존 비례폭 textarea (native IME) - `FlowPreview`: canvas 측정 비례폭 조판 **배선·정리** - `ModeToggle` + `EditorView` 모드 분기 (격자는 세로 스택, 흐름은 좌우) - `useExport`로 SVG/PNG 공통화 - 죽은 코드 제거(EditorToolbar 등), 문서 전면 갱신 ## 검증 - `bun run test:run` (11개 통과), `bun run build` (vue-tsc) 클린 - 브라우저로 두 모드 입력·미리보기·내보내기 확인 ## 알려진 후속 (별도 작업) - 격자 빈 칸 클릭 후 타이핑 시 공백/줄바꿈 누락 (실제 IME 재현 확인 필요) - 넓은 격자 가로 스크롤 UX, 텍스트·모드 localStorage 저장 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign in to join this conversation.
No description provided.