Hugo 로컬 미리보기 열기

목표

현재 Binder에서 로컬 미리보기를 준비하고 기본 브라우저에서 사이트를 연다.

1. Preview로 이동

현재 Binder가 fixture를 가리키는지 확인한 뒤 Preview 화면으로 이동한다. 미리보기 준비가 끝날 때까지 기다린다.

2. 브라우저에서 열기

브라우저에서 열기를 선택한다. 기본 웹 브라우저에 로컬 주소가 열리고 프로젝트 문서 목록이 표시된다.

Glif가 생성한 파일럿 fixture의 Hugo 로컬 사이트

앱 안의 미리보기만 보는 것으로 브라우저 확인을 대신하지 않는다. Binder를 바꾸거나 preview server가 다시 시작되면 주소가 달라질 수 있으므로 현재 버튼을 다시 사용한다.

3. 결과 확인

다음을 차례로 확인한다.

  1. 사이트 제목이 Glif 파일럿 프로젝트다.
  2. 첫 프로젝트 보드 페이지를 열 수 있다.
  3. heading, task와 metadata badge가 읽기 가능한 Kanban으로 보인다.
  4. 다른 문서로 이동한 뒤 브라우저 뒤로 가기가 동작한다.

로컬 미리보기와 공개 배포의 차이

로컬 주소를 브라우저에서 열어도 인터넷에 공개된 것은 아니다. 이 단계는 현재 컴퓨터에서 Hugo 결과를 확인하는 절차다. Cloudflare 같은 외부 provider 연결이나 공개 URL은 이 파일럿 범위에 포함하지 않는다.

다음

문제가 있으면 첫 시작 문제 해결을 확인한다. 정상이라면 Markdown Kanban 쿡북으로 진행한다.

Preview가 만드는 결과

Preview는 현재 Binder를 publish 입력으로 삼아 Hugo 결과를 만드는 작업이다. 결과를 다음 세 층으로 나눠 확인한다.

확인 위치 원본 여부
Source Glif 작성 화면과 로컬 폴더 사용자가 수정하는 정본
Build 상태 Preview 진행률·log·진단 일회성 실행 상태
Browser 결과 로컬 URL의 HTML·asset·navigation 생성된 읽기 결과

Preview가 끝났다는 알림만으로 Browser 결과를 검증했다고 판단하지 않는다. build가 성공해도 Binder에 빠진 문서는 사이트에 나타나지 않을 수 있다.

1. 시작 전 Binder와 source 고정

  1. 현재 문서의 저장 상태가 완료인지 확인한다.
  2. Binder 목록에서 포함된 Markdown과 asset을 확인한다.
  3. project-board.md에 넣은 문장이 Source에 실제로 저장되었는지 다시 연다.
  4. Preview 실행 전 문서 수와 제목을 메모한다.

2. Preview 상태 읽기

Preview 화면에서 다음 상태를 구분한다.

  • 준비 중: 입력을 수집하고 build가 아직 시작되지 않음
  • 생성 중: Markdown·asset을 materialize하는 중
  • 완료: 브라우저에서 열 수 있는 주소와 결과가 준비됨
  • 경고 포함 완료: 결과는 열리지만 누락·fallback·지원 제한이 있음
  • 실패: 결과를 정상으로 취급하지 않고 log와 원인으로 돌아감

경고가 있는 완료 상태라면 브라우저 결과와 경고 문구를 함께 기록한다. 성공처럼 보이도록 public 결과를 수동으로 고치지 않는다.

3. 브라우저에서 확인할 경로

Glif가 생성한 파일럿 fixture의 Hugo 로컬 사이트

  1. : 사이트 제목과 Binder의 첫 문서가 보이는지 확인한다.
  2. 문서 본문: project-brief.md의 H1, H2, list가 읽히는지 확인한다.
  3. 보드 결과: project-board.md가 저장된 Kanban projection으로 보이는지 확인한다.
  4. 다른 문서: roadmap, metrics, structure 링크가 열리는지 확인한다.
  5. 새로고침: 브라우저 새로고침 뒤에도 제목·본문·asset이 유지되는지 확인한다.
  6. 모바일 폭: 가로 스크롤 없이 카드·표·navigation을 읽을 수 있는지 확인한다.

브라우저의 drag, 검색어, 선택된 card 같은 Desktop session 상태는 로컬 사이트에 자동으로 전달되지 않는다. 필요한 경우 source 표나 정적 fallback과 함께 설명한다.

4. Preview 결과와 source 비교

  • Source에 추가한 한 문장이 Browser에 반영되면 source-backed 결과가 닫힌 것이다.
  • Binder에서 제외한 문서가 Browser에 나타나지 않으면 범위 경계가 작동한 것이다.
  • Browser에 이전 제목이 남으면 저장 완료·재생성·캐시 순서부터 확인한다.
  • asset 하나만 빠지면 파일 경로 대소문자와 Binder 포함 여부를 확인한다.
  • 보기 설정이 달라져도 Markdown 본문이 바뀌지 않았다면 projection profile과 publish renderer의 차이일 수 있다.

완료 체크

  • Preview 대상 Binder와 문서 수가 기록되어 있다.
  • build log에 실패가 없고 경고의 의미를 확인했다.
  • 로컬 URL에서 홈·본문·대표 projection을 모두 열었다.
  • 새로고침과 모바일 폭에서 결과가 유지된다.
  • Source 변경이 필요한 경우 diff와 저장 완료를 확인했다.
  • 로컬 preview와 외부 공개 URL을 같은 것으로 말하지 않았다.