문서는 자산이다 — Gallery Hugo 출력

입력 게이트

여러 입력이 모이는 장면
다양한 입력

Markdown 원문 자산
Markdown 자산

표현과 투영

같은 원문의 여러 보기
다양한 Projection

연결된 문서
연결과 참조

같은 자산의 재사용
재사용

출력과 순환

여러 출력 경로
다양한 출력

입력으로 돌아오는 순환
출력이 다시 입력으로

검토 대기

실제 출력 확인 순서

이 예제는 Gallery lab의 원문을 Hugo publish copy에 넣은 결과다. 원문을 먼저 확인한 뒤 결과를 비교한다.

  1. gallery-lab/Resources/의 SVG와 Markdown 문서를 Binder에 포함한다.
  2. Glif에서 Gallery를 열어 이미지 순서와 제목을 확인한다.
  3. Gallery projection profile의 layout, card surface, thumbnail 크기를 저장한다.
  4. Preview를 다시 생성하고 브라우저에서 이 페이지를 연다.
  5. 원문 순서, alt text, 제목과 이미지 개수가 Desktop과 같은지 대조한다.

Gallery 원문을 Hugo의 정적 Gallery로 출력한 결과 캡처

입력과 결과 대조표

확인 항목 Source Hugo 결과
이미지 순서 Markdown에 적힌 순서 같은 순서로 정적 카드 materialize
alt text Markdown image alt text의 설명 이미지 접근성 이름으로 유지
style .glif Gallery projection profile 지원된 layout/card/thumbnail만 사용
검색·lightbox Desktop session 정적 결과에는 session 상태를 복사하지 않음
누락 asset 존재하지 않는 경로 진단 또는 fallback, 다른 이미지를 조용히 대체하지 않음

원문에 넣은 이미지를 Hugo 결과 폴더에 수동 복사해 맞추지 않는다. 누락이 있으면 Source 경로, Binder 포함 범위, publish materialization log를 순서대로 확인한다.

재현 가능한 최소 source

# Gallery 재현

## 입력

![첫 번째 자산](/examples/glif-guide-project/gallery-lab/Resources/input-gate.svg)

## 출력

![같은 자산](/examples/glif-guide-project/gallery-lab/Resources/output-gate.svg)

이 파일을 Gallery로 열었을 때 두 카드가 보이면 최소 renderer 경로가 닫힌 것이다. 이후 projection-fan.svg, connected-notes.svg, reuse-loop.svg를 하나씩 추가해 순서·alt text·fallback을 다시 확인한다.

제한과 복구

  • Gallery에서 보인 filter나 검색어는 Hugo에 저장되지 않는다.
  • viewerFit은 지원된 static image wrapper에만 적용되며 모든 browser pixel parity를 보장하지 않는다.
  • 이미지 하나가 비면 원문 경로의 대소문자와 Binder asset 포함 여부를 확인한다.
  • 전체 결과가 비면 Markdown image 문법과 Gallery candidate section을 먼저 확인한다.
  • 빌드 오류가 있으면 public 결과를 편집하지 말고 source asset과 profile을 복구한다.

출력 완료 체크

  • 원문 이미지 개수와 Hugo 카드 개수가 같다.
  • alt text와 제목을 새 브라우저에서도 읽을 수 있다.
  • desktop session 검색·lightbox 상태가 결과에 들어가지 않았다.
  • 모바일 폭에서 카드가 가로로 넘치지 않는다.
  • 누락 asset은 진단으로 보이고 다른 이미지로 대체되지 않는다.