Page 보기 전체 가이드

Page는 구조가 있는 Markdown을 소개 페이지, 브리핑, 제품 요약 또는 읽기 좋은 패널 문서로 바꾸는 보기다. 별도의 카드 데이터베이스를 만들지 않는다. H1, 첫 소개 문단, H2 section과 그 아래 내용이 계속 원문이고, Cards와 Accordion은 같은 원문을 읽는 두 표시 방식이다.

이 장에서는 실제 Page 실습 Binder와 Glif 앱 캡처를 사용해 다음 흐름을 확인한다.

  • Page가 읽는 Markdown 문법
  • Source에서 Page로 전환하기
  • Cards와 Media split 배치
  • Accordion 열기·닫기·검색·키보드 탐색
  • 원문을 바꾸는 편집과 profile만 바꾸는 표현 설정 구분
  • 저장·재열기와 Hugo/Slide 출력 경계
  • 깨진 이미지, 구조 부족, 저장 실패 문제 해결

1. 실습 자료 준비

page-lab 폴더 전체를 내려받아 Scope 또는 Binder로 연다. 01_page-tour.md와 Resources/의 상대 위치를 바꾸면 이미지 경로가 달라지므로 폴더 구조를 유지한다.

Page 입력으로 사용하는 실제 Markdown 원문

캡처 원문에는 H1 1개, 소개 문단 1개, H2 4개, H3, 일반 목록, task 목록, 코드 fence, 이미지 2개와 wiki link가 들어 있다. Page는 이 요소를 새 형식으로 복사하지 않고 현재 Markdown에서 매번 파생한다.

2. Page가 읽는 구조 

# 문서는 다시 활용할 수 있는 자산이다

다양한 문서와 에셋을 Markdown으로 모은다.

## 1. 다양한 입력을 모은다

Page는 H2 section을 카드로 읽는다.

- Markdown 문서와 목록
- 이미지와 참고 자료

![문서 순환](Resources/page-cycle.svg)

### 확인할 점

대표 이미지는 이 Markdown 이미지 줄에서 온다.
Markdown 요소 Page 의미 저장 위치
첫 H1 hero 제목 Markdown
H1 뒤 첫 일반 문단 hero subtitle Markdown
H2 card 또는 Accordion panel 제목 Markdown
H2 아래 문단·목록·task·H3·code card/panel 본문 Markdown
H2 아래 첫 standalone 이미지 대표 media 후보 Markdown 경로 + Resources/ 파일
Cards / Accordion 같은 card model의 표시 방식 Page projection profile
열·간격·너비·radius·색 presentation style Page projection profile
검색어·열린 panel·현재 선택·scroll 일시적인 탐색 상태 session only

H2 하나에는 한 가지 질문이나 주제를 맡기는 것이 좋다. 제목만 있는 빈 H2도 구조에는 남지만, Page가 내용을 만들어 주지는 않는다. 이미지는 독립 Markdown 이미지 줄과 Binder Resources/ 상대 경로를 사용한다.

3. Source에서 Page로 전환

  1. 01_page-tour.md를 연다.
  2. H1과 H2가 의도한 순서인지 Source 또는 Outline에서 확인한다.
  3. editor 상단의 보기 선택기를 연다.
  4. Page를 선택한다.
  5. 오른쪽 Page 정보 pane이 보이지 않으면 연결된 정보 pane을 연다.

같은 원문을 Cards로 투영하고 Page 정보 pane을 연 화면

hero 제목과 subtitle, H2 네 개의 source order, task·H3·대표 이미지, 현재 문서와 정보 pane의 연결 상태를 확인한다.

4. Cards 보기와 원문 편집

Cards는 여러 section을 한 화면에서 비교할 때 적합하다. 지원되는 문서에서는 다음 source-safe command가 Markdown을 변경한다.

  • 카드 제목 변경 → 해당 H2 제목 변경
  • 카드 본문 편집 → 지원되는 section source range 변경
  • task checkbox 선택 → 해당 [ ] 또는 [x] marker 변경
  • 카드 위/아래 이동 → 인접 H2 section source range 재정렬
  • 카드 삭제 → 확인 뒤 해당 H2 section 삭제
  • 원문 줄 열기 → 정확한 heading 또는 항목으로 복귀

저장 직전에 원문이 외부에서 달라졌거나 source signature가 맞지 않으면 덮어쓰지 않고 실패 상태와 원문 이동 경로를 보여 준다. hover, 현재 선택, scroll, resolve된 이미지 URL·크기·load 상태는 session-derived이며 Markdown이나 profile의 카드 데이터로 복사하지 않는다.

5. Standard와 Media split

  • 표준: 카드 본문과 이미지가 일반적인 읽기 흐름으로 배치된다.
  • 미디어 분할: 대표 이미지와 텍스트를 나란히 놓는다.

대표 이미지와 본문을 나란히 배치한 Media split Page

Media split은 Markdown 이미지의 의미나 순서를 바꾸지 않는다. 이미지가 없는 카드는 텍스트 중심으로 남고, 깨진 이미지는 실패 상태를 보여야 한다. Accordion에서는 한 열 흐름을 사용하므로 Media split control이 비활성화되며 Cards로 돌아오면 저장된 배치가 다시 적용된다.

6. Cards 표현 설정

Page 정보 pane에서는 제목 위치·정렬·굵게·밑줄·accent·큰 제목과 카드 배경·icon·채움·palette·radius·열·간격·정렬·너비를 조정한다. 제목을 숨겨도 H1을 삭제하지 않는다. 이 값은 content가 아니라 renderer-neutral Page profile이다.

7. Accordion으로 전환

Page 정보 pane의 보기에서 아코디언을 선택한다. 별도의 Accordion 문서 보기나 두 번째 원문이 아니라 같은 H2 card model의 표시 preset이다.

같은 네 개 H2 section을 Accordion panel로 표시한 화면

  • 열림 정책: 첫 panel, 모두 닫기, 모두 열기, session의 열린 panel 기억
  • panel 모드: 하나만 여는 단일 모드 또는 여러 개를 여는 모드
  • 밀도: compact / comfortable / spacious
  • 스타일: contained / flush / outline

열림 정책은 초기 표현 intent다. 현재 session에서 임시로 연 panel 목록 자체를 Markdown content로 저장하지 않는다.

8. Accordion 탐색과 검색

  1. 제목과 본문 검색에 profile을 입력한다.
  2. 일치하는 panel과 강조된 본문 발췌를 확인한다.
  3. 이전·다음 match action으로 결과를 이동한다.
  4. 검색을 지우고 검색 전 열린 panel 상태가 복원되는지 확인한다.
  5. outline의 모든 panel 열기/닫기로 전체 상태를 바꾼다.

profile 검색 결과와 강조된 본문 발췌

검색어와 결과 index는 session 상태다. 검색했다고 원문 section이 삭제되거나 publish 결과에 숨은 filter가 저장되지 않는다.

9. 실제 전환과 상호작용 영상

영상은 실제 Glif 앱에서 Source → Page Cards → Accordion → 모두 닫기 → panel 다시 열기 → profile 검색을 실행한다. 파란 pointer는 클릭 위치를, 하단 자막은 검증 의도를 나타낸다.

10. 키보드와 접근성

  • 보기 선택기에서 키보드로 Page를 선택한다.
  • panel focus 후 방향키, Home, End로 이동하고 Enter 또는 Space로 연다.
  • /로 검색에 이동하고 Escape로 검색을 지운다.
  • panel 위치·열림·task 상태를 색만으로 구분하지 않는다.
  • code·image·task metadata와 원문 줄 action에 키보드로 접근한다.
  • Source에서 저장하고 돌아오면 가능한 경우 기존 panel과 focus를 복원한다.

11. 문서별 profile 저장과 재열기

features.page.projection에는 Cards/Accordion, Standard/Media split, Accordion open policy·mode·density·style, 제목과 카드 표현만 저장한다. Markdown 사본, 파싱된 card 배열, source range, 열린 panel 목록, 검색어, focus, scroll, 이미지 runtime 상태는 저장하지 않는다. Page namespace가 손상되면 해당 namespace만 안전한 기본값으로 복구하고 다른 기능의 profile 오류를 조용히 지우지 않는다.

12. Hugo와 Slide에서 재사용

Hugo는 glif_projection: page 문서를 같은 Markdown-derived model로 렌더링하고 지원되는 style metadata를 적용한다. Slide embedded Page도 fence 안 Markdown에서 model을 다시 만든다.

  • Desktop의 source edit, 검색, focus return과 session open state는 편집 앱 상호작용이다.
  • Hugo는 읽기 가능한 Cards/Accordion 결과와 지원 style을 materialize한다.
  • 모든 Desktop control과 pixel이 Hugo에서 완전히 같다고 주장하지 않는다.
  • screenshot이나 generated card JSON을 두 번째 content authority로 내보내지 않는다.

13. 문제 해결

Page를 선택할 수 없다

실제 ## H2 section이 있는지 확인한다. 굵은 문장과 fenced code 안 ##는 Page 구조가 아니다.

hero 제목이 예상과 다르다

첫 실제 H1과 Page 제목 숨김·위치 preset을 확인한다. H1이 없으면 문서 제목 fallback이 사용될 수 있다.

이미지가 표시되지 않는다

독립 Markdown 이미지 줄, Resources/ 상대 위치, 파일 이름의 대소문자와 확장자를 확인한다.

Media split을 선택할 수 없다

Accordion에서는 비활성화되는 것이 정상이다. 카드로 돌아간 뒤 선택한다.

검색 뒤 panel이 사라졌다

검색 filter일 뿐 삭제가 아니다. 지우기 action 또는 Escape로 원래 목록을 복원한다.

카드 편집이 실패한다

외부 변경 또는 stale source guard를 확인한다. 실패 위치의 원문 줄을 열어 최신 내용을 확인한 뒤 다시 시도한다.

14. 실증 결과와 경계

2026-08-02 release-candidate에서 실제 Glif Windows client area 1200×800, H1/H2와 card 4개, Cards·Media split·Accordion, 모두 닫기·panel 다시 열기·본문 검색, Page profile 저장, 캡처 전후 예제 6개 파일 SHA-256 동일, 10.0초 MP4/WebM, console error 0을 확인했다.

모든 style 조합, physical resource 삭제, session 검색·열림 상태의 영구 저장과 Desktop/Hugo pixel-identical parity는 주장하지 않는다. 자동 결과는 /media/manual/views-and-projections/page-evidence.json에 기록한다.

관련 기능 ID: ED-01, ED-23, PB-01.

완료 체크리스트

  • page-lab을 Scope 또는 Binder로 열었다.
  • Source의 H1, subtitle, H2 네 개와 이미지 경로를 확인했다.
  • Page Cards와 Media split을 비교했다.
  • Accordion panel을 열고 닫고 profile을 검색했다.
  • content 편집과 profile 표현 설정의 차이를 설명할 수 있다.
  • Hugo/Slide 출력과 Desktop session 기능의 경계를 확인했다.