Desk로 Binder 첫 화면 만들기

Desk로 Binder 첫 화면 만들기

Desk는 현재 Binder의 루트 첫 화면을 구성하는 조판 도구다. Markdown 문서 한 장을 카드형 보기로 바꾸는 Page와 달리, Desk는 Hero, Grid, Stack, Image, Button, Card와 Binder 문서를 자동으로 모으는 Live document list를 조합해 사이트의 랜딩을 만든다.

Desk는 Binder마다 하나의 루트 랜딩을 관리한다. 여러 경로의 독립 페이지를 만드는 범용 페이지 빌더는 아니다.

시작하기

1. Binder를 연 뒤 Desk를 연다. 활성 Binder가 없으면 Desk는 편집을 시작하지 않는다.
2. 빈 Desk에서는 추천 시작 구성을 적용하거나 빈 캔버스에서 시작한다.
3. Blocks에서 블록을 추가한다. Structure와 Inspector는 구조를 이동하거나 선택한 블록을 설정할 때 연다.
4. 캔버스에서 결과를 확인한 뒤 Save로 로컬 원본을 저장한다.
5. Preview를 열어 발행 전 결과를 확인한다. 실제 배포 상태는 Preview와 별도로 관리된다.

Grid와 Stack은 다른 블록을 묶어 배치한다. Hero, Heading, Text, Image, Button, Card는 랜딩의 핵심 콘텐츠를 만든다. 기존 Desk에 RelationGraph가 있으면 데이터를 보존하고 오류 없이 열지만, 새 랜딩의 기본 시작 블록은 아니다.

랜딩 구성 삽입하기

활성 Desk의 Blocks 패널에서 랜딩 구성을 열면 제품 소개, 프로젝트 소개, 이벤트 소개, 문서 허브 중 하나를 선택할 수 있다. 선택한 구성은 기존 Desk 블록 뒤에 편집 가능한 블록으로 추가된다.

• 내용이 있는 Desk에는 덧붙이기 확인이 먼저 표시된다. 기존 root나 블록을 자동으로 바꾸거나 지우지 않는다.
• 새 Binder의 Guided Start는 제품·프로젝트·이벤트 소개만 제공한다. 문서 허브는 이미 활성화한 Desk에 삽입한다.
• 삽입 후에는 일반 Desk 저장 절차를 따라 Save를 눌러야 한다. Preview와 Publish는 별도의 상태를 따른다.

Hero 레이아웃 고르기

Hero의 Layout에서 메시지와 media의 관계를 고른다. 이 선택은 현재 Desk root에 저장되고 Preview와 Web publish에서 같은 방식으로 적용된다.

• Copy led: 제목·설명·CTA를 먼저 보여 주고, media가 있으면 그 아래에 표시한다.
• Split media: 넓은 화면에서는 copy와 media를 나란히, 좁은 화면에서는 copy 다음 media 순서로 표시한다. product-site에서는 이미지가 있는 split Hero에 media frame과 copy-column 제목 크기가 함께 적용된다.
• Leading transition: product-site의 루트 첫 Hero에서만 Split media와 정적 이미지(jpg, jpeg, png, webp)를 고른 뒤 Full frame to split을 명시적으로 켤 수 있다. publish의 넓은 화면은 full-frame media에서 split reading 상태로 전환한다. Desk는 같은 split 종착점을 정적으로 보여 준다. 모바일, reduced motion, 강제 색상, GIF/비디오·media 없음과 첫 Hero가 아닌 블록은 항상 정적으로 표시한다.
• Background media: media 위에 제목·설명·CTA를 겹쳐 보여 준다.
• Sticky media: publish 화면에서 media가 스크롤에 따라 접히는 기존 sticky 동작을 사용한다. 에디터에서는 접힌 상태를 미리 본다.

Split, Background, Sticky에는 지원되는 이미지나 비디오가 필요하다. media가 없거나 지원하지 않는 형식이면 저장한 선택을 지우지 않고 copy-led로 표시하며, media를 추가한 뒤 다시 확인할 수 있다.

Live document list 사용하기

Live document list는 문서 목록 자체가 아니라 조건을 저장한다. Binder 문서가 바뀌면 같은 조건으로 목록을 다시 계산한다.

• Preset에서 최근 생성, 최근 수정, 폴더, 섹션, 태그, featured 문서 같은 시작점을 고른다.
• 필요한 경우 폴더·섹션·태그와 결과 수를 좁힌다.
• Inspector의 query 요약과 freshness 상태로 현재 조건과 갱신 상태를 확인한다.
• 목록이 비어 있으면 조건 불일치인지, 문서 인덱스를 사용할 수 없는지 표시된 원인을 확인한다.
• 결과 항목의 원본 열기를 사용해 해당 Markdown 문서로 이동한다.
• 외부 변경 뒤 목록이 오래된 상태이면 Refresh로 최신 Binder 문서를 다시 읽는다.

잘못된 필터 값은 조용히 다른 값으로 저장하지 않고 진단과 적용된 fallback을 표시한다.

저장, Preview, Publish 구분하기

Desk의 Save는 현재 Binder의 Desk 원본과 로컬 파생 결과를 저장한다. 자동 저장으로 간주하지 않는다.

• Unsaved: 현재 캔버스에 아직 저장하지 않은 변경이 있다.
• Saved locally: Desk 원본이 로컬에 저장됐다.
• Preview가 오래되었거나 동기화 대기 중이면 저장 성공과 별도로 표시된다.
• 실제 사이트 배포 성공 여부는 Desk 저장 상태가 아니라 Publish 흐름에서 확인한다.

앱이나 Binder를 닫을 때 저장되지 않았거나 reconcile이 필요한 작업이 있으면 Desk는 조용히 완료된 것으로 처리하지 않는다. 안내된 저장 재시도나 복구 선택을 마친 뒤 이동한다.

여러 패널이나 창에서 같은 Binder Desk를 편집하면 저장 요청이 순서대로 처리된다. 다른 편집기의 더 최신 대기 요청이 현재 요청을 대체한 경우 성공으로 숨기지 않고 경고한다. 최신 저장본을 다시 읽어 충돌을 확인한 뒤 현재 초안을 다시 저장한다.

저장되지 않은 Desk 초안 4개가 이미 보호 중이면 다섯 번째 dirty 초안은 캐시에 밀어 넣거나 기존 초안을 버리지 않는다. 현재 초안은 화면에 유지되고 Save/Retry는 계속 사용할 수 있지만, 저장하거나 이 초안 버리기를 명시적으로 선택하기 전에는 이동·닫기가 차단된다. 버리기는 현재 화면의 초안만 대상으로 한다.

손상 또는 충돌에서 복구하기

Desk 원본을 읽을 수 없거나 root 전환이 중단되면 캔버스 대신 복구 화면이 열린다. 손상된 원본을 자동 삭제하거나 빈 Desk로 덮어쓰지 않는다.

• Retry: 원본과 현재 Binder 상태를 다시 읽는다.
• Restore: 확인된 보존본으로 복원한다.
• Start New: 손상 원본을 보존한 상태에서 새 Desk를 시작한다.
• 저장 충돌에서는 저장된 버전을 다시 불러오거나 현재 편집을 계속 보존하는 선택을 따른다.

복원이나 새로 시작하기는 화면에 표시된 확인 절차 뒤에만 실행된다. 확신이 없으면 먼저 Retry를 사용하고 보존본을 삭제하지 않는다.

키보드와 좁은 화면

블록 추가, 선택, 루트 순서 이동과 설정은 pointer drag 없이도 사용할 수 있다. 선택한 루트 블록의 이동 명령은 한 번의 undo 단계로 기록되고 완료 상태를 알린다. 좁은 창에서는 캔버스와 현재 요청한 보조 영역 하나를 유지하므로 Blocks, Structure, Inspector를 필요할 때 전환해 사용한다.

Desk의 핵심 발행 블록은 Desktop과 Web publish에서 콘텐츠, 내부 링크, 이미지 asset, Live document list 결과 순서를 같은 의미로 유지한다. Desktop 편집기의 선택 상태나 drag interaction 자체를 웹 페이지에 복제하지는 않는다.

현재 범위

• Binder 루트 랜딩 하나를 명시적으로 저장하는 흐름이다.
• 자동 저장, 여러 독립 Desk page route, 임의 SQL/JavaScript query는 지원하지 않는다.
• 저장된 Desk 원본을 Markdown Page 원본으로 자동 변환하지 않는다.
• 매우 큰 Binder에서 성능 예산을 벗어나면 query 최적화 범위를 다시 검토하며, 현재 지원 기준은 5,000개 문서와 1,000개 루트 블록이다.