Cover
함께 시작하고, 자유롭게 완성한다
공통 UI 템플릿과 포털별 자유 레이아웃
UI Center · Team Guide
Slide 1
공통화의 목적은 화면 통제가 아니다
- 포털이 달라도 사용자는 익숙한 방식으로 업무를 시작합니다.
- 로그인·메뉴·상단바·히어로의 반복 구현을 줄입니다.
- 업무 화면의 정보 구조와 기능 선택권은 포털에 남깁니다.
핵심: 일관된 진입 경험 + 업무 화면의 자율성
Slide 2
두 가지 약속을 함께 지킨다
| 표준 템플릿 | 자유 레이아웃 |
|---|---|
| 사용 흐름을 통일 | 업무 목적에 최적화 |
| 공통 UI가 소유 | 포털과 하위 페이지가 소유 |
| 로그인부터 히어로까지 | 히어로 아래 콘텐츠 전체 |
- 포털은 같은 출발점에서 시작합니다.
- 포털별 업무 경험은 같은 모양이 될 필요가 없습니다.
Slide 3
경계는 한 줄로 설명할 수 있다
text
로그인 → 좌측 메뉴·상단바 → 히어로 → 포털별 자유 업무 영역
공통 UI 표준 템플릿 공통 여백만 적용- 경계 전: 공통 UI가 구조와 동작을 제공합니다.
- 경계 후: 포털이 그리드·섹션·데이터 표현을 설계합니다.
- 모든 영역: 재사용 가능한 공통 컴포넌트는 계속 활용합니다.
Slide 4
표준 템플릿은 네 영역이다
| 영역 | 사용자 경험 | 포털이 제공하는 값 |
|---|---|---|
| 로그인 | 인증 상태와 오류를 일관되게 표시 | 인증 방식, 안내 문구, 이동 경로 |
| 좌측 메뉴 | 탐색·접기·펴기·사용자·관리자 진입 | 메뉴 항목, 사용자 정보, 관리자 경로 |
| 상단바 | 제목·중앙 검색·고정 언어 전환 | 제목, 검색 처리, 헤더 액션 |
| 히어로 | 첫 방문 안내와 빠른 시작 | 업무 문구, 주요 액션 |
Slide 5
좌측 메뉴는 같게 쓰고, 다르게 인지한다
- 디렉토리서비스 기준의 메뉴 계층, 접기·펴기, 활성 상태를 공통 적용합니다.
- 관리자 메뉴는 사용자 정보 바로 위에 같은 규칙으로 배치합니다.
- 일반 모드의 배경색·채도는 포털별 식별 테마로 구분할 수 있습니다.
동작은 동일하게, 포털 인지는 분명하게.
Slide 6
히어로는 처음엔 보이고, 이후엔 개인화된다
- 첫 방문에는 기본 노출해 기능과 맥락을 알립니다.
- 반복 사용자는
이 안내 숨기기로 정보 밀도를 높일 수 있습니다. - 선택값은 포털별 개인 설정으로 저장되고 언제든 다시 표시할 수 있습니다.
안내는 강제가 아니라 사용자 선택 가능한 시작점입니다.
Slide 7
히어로 아래는 업무를 위한 자유 공간이다
- 대시보드, 트리·상세, 승인 흐름, 문서 열람, 운영 콘솔 등은 포털이 설계합니다.
- 페이지별 그리드, 카드, 표, 차트, 반응형 전환도 포털이 결정합니다.
- 데이터 모델, 권한 규칙, 업무 프로세스는 포털의 자체 소스가 소유합니다.
공통 UI는 여백과 기반을 제공하고, 업무 경험은 포털이 완성합니다.
Slide 8
자유 레이아웃에서도 반복 요소는 재사용한다
| 공통 컴포넌트 | 포털이 결정하는 부분 |
|---|---|
| 버튼·입력·상태 표시 | 업무 문구, 이벤트, 배치 |
| 본문·제목 타이포그래피 | 정보 위계, 페이지 조합 |
| 첨부파일 UI | 저장소, 보존·접근 정책 |
| 게시판 UI | 스키마, 승인·공개 규칙 |
- 레이아웃 자유도와 사용자 경험 일관성은 함께 유지할 수 있습니다.
Slide 9
새 화면의 구현 순서
- 로그인·메뉴·상단바·히어로에 해당하는지 먼저 판단합니다.
- 해당하면
PortalFrame과PortalHero를 사용합니다. - 히어로 아래는 포털 업무에 맞는 레이아웃을 설계합니다.
- 버튼·폼·첨부·게시판은 공통 컴포넌트를 우선 검토합니다.
- 반복되는 패턴은 새 페이지 템플릿이 아니라 공통 컴포넌트 후보로 제안합니다.
Slide 10
한 줄 원칙으로 시작합시다
로그인부터 히어로까지는 함께 만들고, 그 아래의 업무 경험은 포털이 자유롭게 완성합니다.
자세한 기준: UI Center 문서 공간의 공통 UI 템플릿 및 포털 자유 레이아웃 가이드