Structure
SAIGE 제품군은 공통 그리드 시스템에 기반한 레이아웃을 형성하여 사용자에게 제품 전반에 걸쳐 일관적인 경험을 제공할 뿐 아니라 명확한 시각 계층을 형성하여 사용자가 과업을 성공적으로 수행하는 데에 집중하도록 도움을 주어야 합니다.
Anatomy
| # | Name | Description |
|---|---|---|
| 1 | GNB | 화면 가장 왼쪽에 위치한 GNB는 app logo와 글로벌 내비게이션을 포함합니다. |
| 2 | LNB | GNB 우측에 위치하여 필요한 경우만 노출되는 LNB는 로컬 내비게이션을 포함합니다. 사용자가 핸들을 사용하여 LNB를 접거나 펼칠 수 있습니다. |
| 3 | Content area | 현재 페이지의 구성 요소 및 데이터가 보여지는 영역입니다. |
| 4 | App frame | Web browser가 아닌 electron 환경에서는 favicon 왼쪽에 뒤로 가기 버튼 (←) 을 포함하는 app frame을 사용합니다. |
| 5 | App Bar | 화면 최상단에 위치한 app bar는 현재 페이지 이름을 보여주어 사용자가 앱 어디에 위치해 있는지 파악할 수 있도록 돕습니다. 우측에는 알림, 도움말, 사용자 아바타를 포함합니다. |
| 6 | Action bar | App bar 아래에 위치하며 필요할 때만 노출되는 action bar는 다른 데이터 단위로 이동할 수 있는 기능을 제공하거나 페이지 단위의 액션을 제공합니다. |
Full Pages
Content area에 콘텐츠가 가득 차서 배치되는 일반적인 형태입니다.
Page with Side Drawer
Side Drawer는 접고 펼칠 수 있는 구조로 구성되며, 데이터에 대한 디테일을 제공하는데 사용됩니다. 리사이징 옵션을 제공하고 Header 하단에 위치합니다.
