Desk로 Binder 첫 화면 만들기

Desk는 Binder의 공개 첫 화면과 landing 구조를 조립하는 작업면이다. Markdown 원문을 대체하는 자유형 편집기가 아니라, component와 구조 설정을 이용해 원문·지표·최근 문서 같은 재료를 공개 페이지로 구성한다.

기능 ID	기능	이 장의 실증 범위
VW-11	Desk root 활성화	Binder root 확인과 명시적 활성화
VW-12	guided start	Blank 시작으로 새 composition 생성
VW-13	component panel	Hero·Stats·Text·Divider 검색과 삽입
VW-14	structure·inspector	block 순서 확인과 선택 block 속성 편집
VW-15	responsive viewport	desktop·tablet·mobile preview 전환
VW-16	history·save	undo·redo, 원본 저장과 후속 동기화 상태 표시

준비된 예제

Canvas 장과 같은 조립 실험실을 사용한다. 01_product-story.md, 02_release-metrics.md, 03_release-roadmap.md는 Desk가 참조하는 원문이며, Desk block을 배치해도 본문 해시는 바뀌지 않아야 한다.

1. Binder root를 확인하고 Desk 활성화

Desk는 현재 Binder root에 page 설정을 만든다. 하위 폴더나 잘못된 Binder에서 시작하면 다른 landing을 편집하게 되므로 활성화 전 경로를 확인한다.

활성화 버튼을 누르면 운영체제 앱 dialog가 다시 한 번 대상을 확인한다.

확인은 되돌릴 수 없는 publish가 아니라 Desk 설정을 시작하는 동작이다. 그래도 어떤 Binder에 파일이 생기는지 명확히 읽고 진행한다.

2. 시작 방식 선택

처음에는 guided start에서 Blank 또는 준비된 시작 구성을 고른다. 이 예제는 각 panel의 역할을 분명히 보기 위해 Blank로 시작한다.

Blank는 빈 composition을 만들 뿐 원본 문서를 지우지 않는다. 나중에 필요한 component를 하나씩 추가한다.

3. Components에서 block 추가

왼쪽 Components panel은 추가할 수 있는 block catalog다. 검색으로 종류를 좁힌 뒤 원하는 block을 composition에 넣는다.

예제 순서:

1. Hero를 검색해 소개 block을 추가한다.
2. Stats를 추가해 02_release-metrics.md의 수치를 표현한다.
3. Text를 추가해 설명 문단을 둔다.
4. Divider를 검색해 section 사이 경계를 만든다.

component는 공개 구조의 표현 단위다. source 문서 자체의 heading이나 문단을 자동 재작성하지 않는다.

4. Structure에서 순서 읽기

Structure panel은 현재 composition의 block tree와 순서를 보여 준다. 화면에서 선택하기 어려운 block도 tree에서 찾아 선택할 수 있다.

• 위에서 아래 순서가 composition의 읽기 순서다.
• 선택한 항목은 가운데 preview와 오른쪽 Inspector의 대상이 된다.
• 구조 변경 후에는 viewport마다 읽기 흐름을 다시 확인한다.

5. Inspector에서 선택 block 편집

오른쪽 Inspector는 선택한 block만 편집한다. Text block에서는 내용, 정렬, 크기, 굵기, 행간, 색상과 padding 같은 속성을 조절한다.

Inspector에서 값을 바꾸면 가운데 preview가 갱신된다. 다른 block이 바뀌었다면 Structure의 현재 선택을 먼저 확인한다.

6. Responsive viewport 확인

Desk toolbar의 화면 아이콘으로 preview 폭을 바꾼다.

mode	확인할 것
Desktop	넓은 화면의 block 폭, 여백과 section 균형
Tablet	중간 폭에서 text wrapping과 stats 열 수
Mobile	좁은 폭에서 읽기 순서, overflow와 touch 간격

viewport 전환은 responsive composition을 빠르게 검토하는 도구다. 실제 브라우저·운영체제·기기 인증을 대신하지 않는다. 출시 전에는 Hugo 결과를 실제 target browser에서도 확인한다.

7. 실행 취소, 다시 실행과 저장

1. Divider를 추가한다.
2. 실행 취소로 추가 전 상태를 확인한다.
3. 다시 실행으로 같은 변경을 복원한다.
4. 저장을 누르고 toolbar와 안내 영역의 상태를 읽는다.

Desk 저장은 한 줄의 성공/실패가 아니라 원본, 문서 인덱스와 preview staging의 후속 상태를 구분한다.

이 실증에서는 Desk 원본 저장은 완료됐고, 격리된 guide fixture에는 완전한 Hugo staging 구성이 없어 후속 동기화 필요 / preview staging 미생성이 명시적으로 표시됐다. 이를 전체 publish 성공으로 간주하지 않는다. 실제 프로젝트에서는 다시 시도한 뒤 Hugo preview와 공개 결과를 별도로 대조한다.

저장 상태별 판단

표시	뜻	다음 행동
모든 변경 사항 저장됨	Desk 원본과 후속 산출물이 현재 상태	Hugo preview에서 결과 확인
원본 저장됨 · 후속 동기화 필요	composition 원본은 안전하지만 파생 산출물 미완료	동기화 다시 시도, staging 설정과 오류 확인
저장되지 않은 변경 사항	editor draft가 아직 원본에 기록되지 않음	저장 또는 의도한 취소 수행
충돌·복구 안내	외부 변경이나 후속 reconcile 문제	조용히 덮지 말고 다시 불러오기·사본·재시도 경로 선택

문제 해결

증상	확인	조치
Desk가 활성화되지 않음	현재 위치가 Binder root인지 확인	올바른 Binder로 전환해 명시적으로 활성화
component가 보이지 않음	Components 검색어와 category 확인	검색 초기화 후 지원 목록에서 다시 선택
Inspector가 엉뚱한 값을 표시	Structure의 선택 block 확인	편집할 block을 다시 선택
mobile에서 잘림	고정 폭, padding, 긴 text 확인	responsive 속성을 조정하고 세 viewport 재검사
원본 저장 후 preview 미생성	Hugo/staging 설정과 안내 문구 확인	후속 동기화 재시도 후 실제 preview 대조

실증 경계

이 예제는 Desk 활성화, guided start, 세 panel, component composition, 세 viewport, undo·redo와 원본 저장 상태를 검증한다. 격리된 fixture에서 materialize되지 않은 preview staging이나 모든 block의 production Hugo parity는 검증했다고 주장하지 않는다. viewport preview 역시 실제 기기 인증이 아니다.