Skip to content

핵심 개념

PageFlow는 애플리케이션의 라우트와 탐색 대상을 탐색 가능한 그래프로 바꿉니다. 다섯 가지 개념을 이해하면 나머지 인터페이스도 쉽게 사용할 수 있습니다.

페이지

페이지는 PageFlow가 렌더링할 수 있는 하나의 구체적인 라우트를 나타냅니다. 정적 라우트는 즉시 준비되며, 동적 라우트는 대표 매개변수 값을 제공하면 렌더링할 수 있습니다.

각 페이지에는 제목, 라우트 경로, 미리보기, 썸네일, 탐색 링크와 연결된 테스트가 포함될 수 있습니다. 쿼리 문자열과 해시는 별도의 라우트 정의를 만들지 않고도 더 구체적인 탐색 위치를 보존합니다.

탐색 링크

링크는 한 페이지에서 다른 페이지로 향하는 방향성 관계입니다. PageFlow는 지원되는 라우터 링크, 동일 출처 앵커, 리터럴 프로그래밍 대상, 브라우저 기록 탐색, data-pageflow-to 같은 명시적 프레임워크 힌트를 찾을 수 있습니다.

계산된 대상은 애플리케이션에서 관련 상호작용이 일어난 뒤에야 발견될 수 있습니다.

핫스팟

페이지를 선택하면 PageFlow가 알려진 탐색을 발생시키는 요소를 강조합니다. 핫스팟은 시각적 미리보기와 그래프를 연결하여 두 라우트가 관련 있다는 사실뿐 아니라 실제 UI에서 전환이 시작되는 위치도 보여 줍니다.

미리보기와 썸네일

선택된 페이지는 활성 동일 출처 iframe을 사용합니다. 주변 페이지는 캡처된 미리보기를 사용하여 캔버스의 반응성을 유지합니다. 오래된 페이지가 백그라운드에서 갱신되는 동안 캐시된 썸네일은 계속 표시됩니다.

라우트 그룹

큰 라우트 트리는 덱으로 접힙니다. 덱에 들어가 하위 항목을 확인한 뒤 이동 경로를 사용해 상위 그룹으로 돌아올 수 있습니다. 그룹화는 페이지 관계를 버리지 않으면서 시각적 복잡성을 줄입니다.

다음

MIT 라이선스로 공개됩니다.