화면과 영상으로 따라 하는 실습 경로
이 페이지는 긴 설명보다 먼저 실제 화면을 보고 싶은 사용자를 위한 미디어 중심 동반 가이드다. 각 실습에는 실행 순서, 그대로 열 수 있는 Markdown 예제, 실제 Desktop 또는 Hugo 결과 이미지, 조작 영상을 함께 둔다. 영상을 본 뒤에는 바로 아래의 텍스트 절차로 같은 결과를 재현한다.
모든 이미지와 영상은 예제 프로젝트를 사용한 실제 Glif Desktop client area 또는 생성된 Hugo 결과다. 노란 표시가 있는 경우에는 클릭 위치나 결과를 읽기 쉽게 보여 주는 안내 표시이며, 원문 데이터나 제품 상태를 대신하지 않는다.
이 페이지를 쓰는 방법
- 처음에는 각 실습의 영상을 한 번 본다.
- 해당 실습의 예제 문서를 새 폴더에 복사해 Scope로 연다.
- 화면의 결과와 함께 원문 Markdown이 무엇을 바꾸는지 확인한다.
- 같은 결과를 재현한 뒤에만 다음 실습으로 이동한다.
하나의 실습을 건너뛰어도 된다. 다만 Cart·Canvas·Desk, 보기 전환, 게시은 모두 같은 원본을 다르게 쓰는 흐름이므로, 처음이라면 1번부터 순서대로 진행하는 편이 이해하기 쉽다.
1. 내 폴더에서 첫 결과 보기
목표: 로컬 Markdown 폴더를 Scope로 열고, 문서를 저장한 뒤 Hugo 로컬 미리보기에서 같은 내용을 확인한다.
- 예제: 첫 프로젝트 준비물
- 상세 절차: 설치와 시작하기
확인할 것은 세 가지다. 폴더가 Scope로 열렸는지, 저장한 Markdown이 원본 폴더에 남아 있는지, 브라우저 결과가 같은 제목·본문·에셋을 표시하는지 차례대로 본다. 로컬 미리보기 주소는 공개 URL이 아니다.
2. 재료를 모아 Canvas와 Desk로 조립하기
목표: 문서와 heading을 Cart에 참조로 모으고, Canvas의 공간 배치와 Desk의 공개 구조가 원본 Markdown을 대체하지 않는다는 점을 확인한다.
- 예제: 조립 작업실
- 상세 절차: Cart에 문서와 에셋 모으기, Canvas에서 재료 조립하기, Desk로 Binder 첫 화면 만들기
실습 순서는 01_product-story.md를 Cart에 담기 → 링크·embed·text copy의 차이 확인 → Canvas에 카드 놓기 → Desk의 landing component 배치다. Cart에서 제거하는 일은 바구니 참조를 없애는 일일 뿐 원본 파일을 삭제하지 않는다.
3. 같은 Markdown을 Kanban으로 전환하기
목표: heading과 task가 보드의 컬럼·카드가 되고, 카드 이동이 저장 가능한 원문 변경과 어떤 관계인지 확인한다.
- 예제: Kanban 실습 Binder
- 상세 절차: Markdown Kanban 쿡북
카드를 움직이기 전과 후에 원문을 반드시 비교한다. 필터, 검색, 확대·축소처럼 화면만 바꾸는 상태와 Markdown에 저장되는 변경을 같은 것으로 취급하지 않는다.
4. 링크를 따라 지식 구조 읽기
목표: 링크가 끊긴 위치를 찾고, 관계를 좁힌 뒤, 원문으로 돌아가 수정하거나 복구한다.
- 예제: link-health 실습 파일
- 상세 절차: 검색·링크와 지식 관리
문제가 있는 링크를 찾았다고 즉시 대량 수정하지 않는다. 먼저 원본 문서, 대상 경로, 현재 Binder 범위를 확인하고 한 건의 수정 후 결과를 다시 연다. 그래프는 관계를 찾는 보조 화면이며 Markdown 원본의 대체물이 아니다.
5. 표를 Chart로 읽고 원문으로 돌아가기
목표: Markdown 표의 수치와 Chart 결과를 대조하고, 진단이나 표시 설정을 원본 데이터와 혼동하지 않는다.
- 예제: 표·Chart 실습 Binder
- 상세 절차: Chart 보기, 표와 데이터 작업
값이 예상과 다르면 Chart 모양부터 바꾸지 말고 표의 열 이름, 숫자 형식, 빈 셀과 현재 source를 먼저 확인한다. Chart profile과 탐색 상태는 source 데이터와 서로 다른 저장 경계를 가진다.
6. 사이트 설정을 저장하고 실제 출력 비교하기
목표: 사이트 설정의 draft·applied·run snapshot을 구분하고, 저장된 설정이 Hugo 결과에 반영되는지 확인한다.
- 예제: 사이트 설정 실습 Binder
- 상세 절차: 사이트 설정 전체 가이드
설정 화면에 입력했다고 공개 배포가 끝난 것은 아니다. 저장 → 새 preview 실행 → 생성된 Hugo 결과 확인 순서로 검증한다. 비밀번호, token, 개인 식별 정보는 예제 문서·화면 캡처·설정 파일에 넣지 않는다.
7. 변경 이력을 읽고 안전하게 복구하기
목표: 외부 변경이나 잘못된 편집이 생겼을 때 현재 파일, diff와 history를 비교한 뒤 의도적으로 복구한다.
- 예제: history-recovery 실습 Binder
- 상세 절차: 히스토리·복구와 문제 해결
복구는 현재 파일을 바로 덮는 자동 정리가 아니다. 어떤 변경을 유지하고 어떤 변경을 되돌릴지 diff로 확인한 뒤 진행한다. 원본 폴더를 별도 백업하는 습관은 history 기능과 별개로 계속 필요하다.
8. 긴 문서를 Page로 읽기 좋게 만들기
목표: heading·본문·task로 이루어진 Markdown을 카드와 accordion으로 읽고, 열기·검색 같은 화면 상태와 source를 구분한다.
- 예제: Page 실습 Binder
- 상세 절차: Page 보기
Page는 문서를 읽기 편하게 만드는 projection이다. accordion을 열거나 검색어를 입력하는 일은 원문을 바꾸지 않는다. 문단·heading·task 자체를 고칠 때만 원문 편집과 저장 결과를 확인한다.
9. Gallery에서 자산과 공개 결과를 함께 검토하기
목표: Markdown의 이미지·album marker를 Gallery로 읽고, 보기 설정·검색·업로드 결과를 source 및 publish 경계와 함께 확인한다.
- 예제: Gallery 실습 Binder
- 상세 절차: Gallery 보기 전체 가이드
이미지를 올리거나 공개 결과를 만들기 전에는 해당 resource의 경로와 포함 범위를 확인한다. Gallery의 style·검색·lightbox 상태가 원본 resource나 Markdown을 자동으로 대체하지 않으며, 게시 결과는 별도 materialization 검증이 필요하다.
다음에 볼 만한 영상
각 기능의 상세 페이지에는 여기보다 긴 화면 설명, 예제 문서, 예외 처리와 완료 기준이 있다. 아래 영상은 다음 탐색으로 연결하는 빠른 입구다.
| 하고 싶은 일 | 영상과 상세 가이드 |
|---|---|
| Mindmap에서 구조를 옮기고 원문을 확인 | Mindmap 보기 |
| Timeline의 순서를 바꾸고 source를 대조 | Timeline 보기 |
| PDF 결과를 확인하고 출력 경계를 점검 | PDF 보기 |
| 문서를 Slide 초안으로 조립 | Binder Slide 조립 |
완료 기준
- 로컬 원본, 화면의 derived state, 공개 output을 구분했다.
- 영상 하나 이상을 본 뒤 같은 예제 문서로 결과를 재현했다.
- 보기 전환 또는 Cart 조립 뒤 원문 Markdown의 변화를 직접 확인했다.
- 외부 provider·공개 배포처럼 별도 자격 증명이 필요한 단계는 로컬 확인과 구분했다.
- 영상을 재생할 수 없는 환경에서는 같은 절차의 텍스트와 정적 이미지를 사용했다.
더 깊은 기능별 설명은 Glif 상세 가이드의 각 장에서 계속 읽을 수 있다.