Timeline 보기 상세

Timeline은 Markdown의 H2 section을 한 줄의 일정 데이터로 복사하지 않고, 원문 순서·본문·task·이미지를 시간 또는 단계의 흐름으로 투영한다. Source가 최종 권위이고 Timeline은 질문에 맞춰 같은 자산을 다시 보는 표면이다. 제목을 바꾸거나 task를 토글하거나 entry를 이동하면 지원되는 source range만 Markdown으로 돌아가며, 색상·밀도·rail·lens는 문서 내용을 바꾸지 않는 projection profile이다.

이 장은 timeline-lab 예제와 실제 Glif Desktop 캡처를 기준으로 작성했다. 정적 Hugo 페이지는 저장된 문서와 profile을 재현하지만 검색 focus, drag, task toggle, source jump 같은 세션 상호작용은 포함하지 않는다. 그 동작은 실증 동영상과 증거 manifest에서 확인한다.

1. Timeline을 선택할 때

Timeline은 “무엇이 먼저였고 다음에 무엇을 하는가?”를 설명할 때 적합하다.

• 릴리즈 기록, 마이그레이션 단계와 회고를 날짜 순서로 읽는다.
• 날짜를 만들기 어려운 운영 절차를 준비 → 작성 → 검증 → 게시 단계로 읽는다.
• 하나의 entry에 설명, checklist, 이미지와 source 위치를 모은다.
• 같은 원문을 Source, Timeline, Slide와 Hugo에서 재사용한다.

정확한 시작·종료 시각, 기간 겹침, 사람·자원 배정과 선후 의존 관계가 핵심이면 Timeline을 Gantt의 대체로 사용하지 않는다. Timeline의 rail 간격은 날짜가 있어도 “일수에 비례한 좌표”가 아니다. compact lens 역시 기간을 줄여 카드 밀도를 높이는 표현이며 실제 시간 비율을 주장하지 않는다.

2. 빠른 성공 경로

1. Timeline Lab의 01_release-narrative.md를 Binder에 추가한다.
2. Source에서 H1, H2, H3, task와 Date: YYYY-MM-DD를 확인한다.
3. 문서 헤더의 보기 선택기에서 Timeline을 선택한다.
4. 네 개 entry, 각 entry의 본문과 section, task 상태가 원문 순서와 같은지 확인한다.
5. Timeline info에서 temporal lens = dates 또는 compact를 선택한다.
6. task 하나를 토글하고 Source로 돌아가 [ ]/[x]가 바뀌었는지 확인한다.
7. 현재 공식 Timeline plugin에서는 entry의 Move up/Move down command를 누르고 H2 section 순서가 함께 바뀌었는지 확인한다. native drag handle이 연결된 workspace pane을 사용하는 빌드에서는 포인터 경로도 같은 source range 계약을 따른다.

3. 원문 문법: 어떤 줄이 무엇이 되는가

Timeline parser는 Markdown을 별도 데이터베이스로 가져가지 않는다. H1부터 H3, 최상위 bullet/task, 일반 paragraph와 첫 standalone image의 source 범위를 찾아 renderer-neutral render model을 만든다.

다음 예제는 날짜·section·task·이미지를 모두 포함한다.

# Glif 가이드 릴리즈 이야기

## 2026-07-24 — 방향 정리

Date: 2026-07-24

문서는 자산이라는 제품 문장을 정했다.

### 결정

- [x] Source를 최종 권위로 명시하기
- [ ] 예제 Binder 링크 점검하기

![원문에서 projection으로 이어지는 흐름](timeline-source.svg)

H2보다 높은 heading이 새로 나오거나 fenced code 안의 ##가 나오면 parser는 그것을 entry로 오인하지 않도록 범위를 닫는다. 복잡한 fence, 중첩 list와 여러 H2 경계를 가로지르는 편집은 Source에서 처리한다.

4. History mode와 Steps mode

4.1 History mode

모든 entry가 날짜 또는 version처럼 읽히고 유효한 날짜가 있으면 history mode로 표시한다. 01_release-narrative.md는 다음처럼 H2와 Date:를 함께 둔다.

## 2026-07-28 — 첫 번째 세로 슬라이스

Date: 2026-07-28

첫 번째 Date: YYYY-MM-DD만 metadata로 채택한다. Date: 2026-02-30, 소문자 date:, 날짜가 섞인 일반 문장은 metadata로 쓰지 않고 entry body에 남긴다. 날짜 metadata는 현재 Timeline에서 읽기 전용이다. 고치려면 Source에서 날짜 line을 바꾼다.

4.2 Steps mode

날짜가 없거나 일부 H2가 history-like가 아니면 H2 순서를 단계로 읽는다. 02_steps-without-dates.md의 준비, 작성, 검증, 게시는 날짜를 발명하지 않고 순번과 rail로 표시된다.

steps mode에서 화면의 순번은 presentation 값이다. 순번을 직접 source에 저장하지 않으며, entry를 옮기면 H2 section의 연속 범위만 이동한다.

5. Temporal lens와 날짜 표시

Timeline info의 temporal lens는 source-neutral derived state다. 설정은 문서별 features.timeline.projection.style namespace에 저장되며 본문에는 삽입되지 않는다.

date source = echo는 card에 source 날짜를 보여 주고, hide는 card에서 exact source line을 숨긴다. hide를 선택해도 Source line과 문서의 날짜 metadata가 지워지는 것은 아니다.

6. Entry 안의 body와 task 편집

6.1 제목과 body

entry 제목은 H2 heading, body 편집은 해당 H2와 다음 H2 사이의 연속 source range를 대상으로 한다. 편집이 성공하면 선택된 entry를 다시 reveal하고 Source line으로 돌아갈 수 있다.

• H2 제목을 바꾸면 heading text만 바뀐다.
• body를 바꾸면 H3, paragraph, list가 함께 교체되지만 entry 밖의 H2는 건드리지 않는다.
• no-change이면 저장을 시도하지 않는다.
• source revision이 달라진 stale request는 fail-closed로 거절한다.

6.2 Task toggle

entry 또는 section의 - [ ]/- [x] checkbox는 source command로 토글한다. checkbox가 없는 일반 bullet이나 지원하지 않는 복합 item은 task command의 대상이 아니다.

- [ ] Hugo 링크 확인

Timeline에서 체크하면 다음처럼 최소 범위만 바뀐다.

- [x] Hugo 링크 확인

6.3 Section과 item

H3 section 제목과 직속 item은 각각 source line을 갖는다. 인접 section을 가로지르는 이동, blockquote 내부의 ambiguous list, fenced code 내부의 checkbox는 Source에서 편집한다.

7. Entry 순서 변경: keyboard와 drag

entry reorder는 카드 하나의 label만 옮기는 것이 아니라 해당 H2부터 다음 동일/상위 heading 직전까지의 source range를 함께 이동한다. 따라서 H3, paragraph, task, image가 entry와 함께 보존된다.

키보드 경로

1. entry 또는 drag handle에 focus한다.
2. ArrowUp 또는 ArrowDown을 누른다.
3. 새 index가 적용되고 이동한 entry가 다시 focus된다.
4. Source에서 H2와 하위 body가 함께 이동했는지 확인한다.

포인터 경로

1. entry의 drag handle을 누른다.
2. 유효한 entry 앞·뒤 drop target으로 이동한다.
3. drop preview가 대상 위치를 가리키는지 확인한다.
4. 놓은 뒤 source hash, 변경 파일과 H2 순서를 비교한다.

다음은 source-safe reorder를 동영상으로 재현한 캡처다.

WebM 대체 동영상 열기

8. Story preset과 lead media

Timeline info에서 presentation preset = story를 선택하면 각 entry의 첫 standalone image가 lead media 후보가 된다. image paragraph 뒤의 설명은 body로 남고 image source line은 원문에 보존된다.

규칙은 다음과 같다.

• entry마다 첫 standalone image 하나만 자동 승격한다.
• inline image, 두 번째 image, code fence 안의 image는 lead media가 아니다.
• image가 없는 entry는 텍스트 card로 남으며 앞 entry의 이미지를 상속하지 않는다.
• Hugo/Slide materialization은 저장된 image 경로와 profile만 사용한다.

9. Timeline info와 profile

Timeline info는 timeline-info cockpit에서 다음 style-only 설정을 조정한다.

profile은 문서의 content fingerprint와 함께 저장된다. source가 바뀌면 stale-content-fingerprint 상태를 관찰할 수 있으며, repair 가능한 style field만 기본값으로 복구한다. 검색어, 현재 선택, scroll 위치, drag preview와 focus는 profile에 저장하지 않는다.

10. 저장·출력 경계

Desktop

Desktop runtime은 parser가 만든 render model과 document-local source command를 사용한다. task, title, body, section, item, reorder와 source jump는 이 경계 안에서만 실행된다.

Slide와 Hugo

Slide와 Hugo는 renderer-neutral Timeline render model과 저장된 profile을 materialize한다. 공개 결과에 Desktop session의 검색 focus, selection, drag preview, hover나 checkbox interaction을 사실처럼 저장하지 않는다.

정적 출력에서 기대하는 것은 다음이다.

• 같은 Markdown entry 수와 heading/body 구조
• 저장된 title, density, palette, marker, lens와 story preset
• 로컬 image 경로와 alt text
• source link, fixture link와 accessibility label

정적 출력에서 주장하지 않는 것은 다음이다.

• 동영상 없이 drag가 재생된다는 주장
• Hugo 페이지에서 task toggle이 원문을 수정한다는 주장
• 날짜 차이가 pixel 좌표에 비례한다는 주장

11. 접근성과 운영 검증

• entry는 article/card와 heading 계층을 유지한다.
• drag handle과 task checkbox는 keyboard focus가 가능해야 한다.
• 선택 entry는 aria-selected와 visible focus를 함께 가진다.
• 색상만으로 완료/미완료나 marker 종류를 구분하지 않는다.
• compact에서도 충분한 focus ring과 읽을 수 있는 날짜 label을 유지한다.
• 동영상은 controls, poster, WebM 대체 링크를 함께 제공한다.
• 이미지 alt text는 원문 의미를 설명하고 장식 이미지는 빈 alt를 사용한다.

12. 문제 해결

Timeline 선택 항목이 보이지 않는다

H2가 하나 이상 있어야 한다. H2가 fenced code 안에만 있거나 Source가 아직 저장되지 않았다면 H2를 문서 본문으로 옮기고 저장한 뒤 다시 연다.

날짜가 무시된다

대소문자를 포함한 정확한 Date: YYYY-MM-DD인지, 실제 calendar date인지 확인한다. 잘못된 날짜는 숨기지 않고 body에 남는다. 날짜가 없는 H2가 섞이면 steps mode로 읽힐 수 있다.

task나 제목 저장이 거절된다

다른 편집이 먼저 저장되어 stale revision이 되었거나 대상이 복합/중첩 source range일 수 있다. Source로 돌아가 현재 line을 확인한 다음 다시 시도한다. 실패 시 원문을 조용히 덮어쓰지 않는 것이 정상이다.

drag 뒤 내용 일부가 사라졌다

drop target이 자기 entry·descendant·hidden H2 경계를 가리키지 않았는지 확인한다. 문제가 재현되면 Source의 전후 hash와 변경 파일을 저장하고, 수동으로 H2 section 순서를 조정한다.

Story 이미지가 lead media가 되지 않는다

entry 내부의 첫 standalone image인지 확인한다. image가 paragraph 안에 inline으로 들어갔거나 앞에 다른 standalone image가 있으면 자동 승격되지 않는다.

13. 실증 동영상과 증거

동영상은 다음 순서로 실제 앱 client area에서 녹화한다.

1. Source에서 01_release-narrative.md를 연다.
2. view selector에서 Timeline을 선택한다.
3. temporal lens를 바꿔도 Markdown hash가 변하지 않는지 확인한다.
4. task checkbox를 눌러 source marker가 바뀌는 장면을 담는다.
5. Move down command로 entry를 이동하고 H2·하위 body가 함께 바뀌는 장면을 담는다. native drag는 별도 미주장 경계로 기록한다.
6. Source로 돌아가 변경 파일이 fixture 한 개뿐인지 보여 준다.

캡처 결과는 evidence manifest의 timeline-source-backed-reorder-temporal-lens-and-story 시나리오에 기록한다. 이 시나리오는 화면이 예쁘다는 증거가 아니라 source hash, 변경 파일, profile namespace, console error와 fixture 경계를 함께 검증한다.

14. 완료 체크리스트

• H1, H2, H3, paragraph, bullet/task와 image mapping을 설명했다.
• history mode와 steps mode를 각각 실행했다.
• valid/invalid Date: 경계를 확인했다.
• 모든 temporal lens와 date source 표시를 확인했다.
• title/body/section/item/task의 source-safe edit 경계를 확인했다.
• keyboard 또는 Move up/down source command를 실행했다. native drag/drop은 현재 캡처의 미주장 경계로 남겼다.
• story preset의 첫 standalone image 규칙을 확인했다.
• style profile이 source와 분리되어 저장되는지 확인했다.
• Desktop interaction과 Hugo static output의 차이를 설명했다.
• 접근성, stale source, hidden H2, unsupported structure를 점검했다.
• Source 이미지, projection 이미지, style 이미지, lens 이미지, reorder 이미지, story 이미지와 동영상을 매니페스트에 연결했다.
• feature ID ED-01, ED-23, PB-01이 coverage ledger와 양방향으로 일치한다.

다음은 Chart 보기 상세 또는 Desktop과 Hugo 결과 비교다.