Next
Back
PC, Tablet, Mobile 세가지 기준의 반응형 웹 헤더를 사용하며, 각각의 헤더는 기능별 사용성에 따라 대응되어 **하나의 번들(bundle)**로 활용합니다.
대응되는 그룹에 따라 헤더 종류가 컴포넌트화 되어 있기 때문에, 사용성에 맞게 간단히 State 를 변경하는 형태로 시스템 상에서 활용 가능합니다.
구분은 크게 카테고리 메뉴만 존재하는 Text Header, 카테고리 메뉴 이외에 구분이 필요한 중요 기능 및 기타 메뉴들을 아이콘 형태로 배치하는 Icon Header 로 나뉘어집니다.
Text Header, Icon Header , Sub Menu 의 각 명칭은, 활용 기준에 따른 피그마(Figma)상 컴포넌트 명칭입니다.
각 컴포넌트는 PC, Tablet, Mobile 디바이스별로 분류되어 있습니다.
각 컴포넌트의 State (ex. 로그인 / 로그아웃 , Nickname / Profile , Mypage On / Off 등의 상태) 및 종류 변경은, 피그마 우측 Design 탭 컴포넌트 영역에서 Togle Button 및 옵션 선택으로 적용 가능합니다.
태블릿의 경우 Mobile 헤더 정책을 적용합니다.
반응형 기준에서 카테고리 메뉴 영역에 발생하는 텍스트 잘림 이슈를 방지하기 위함입니다.
카테고리 메뉴는 최대 5개까지 포함 가능하며, 좌측 또는 중앙 정렬 가능합니다.
5개가 넘어갈 경우, 반응형 시스템에서 텍스트가 넘치거나 잘리는 경우가 발생할 수 있어, 하위 메뉴탭 형태로 배치하는 방향을 우선적으로 고려합니다.
활성화 된 메뉴는 Primary 컬러 또는 Under Bar 형태로 강조할 수 있습니다.
Default 상태에서는, 카테고리 메뉴에 아래와 같은 Padding과 Margin 정책을 적용합니다.
Dropdown Sub Menu 가 적용되는 카테고리 메뉴의 경우, Text Width를 100px로 고정합니다.
아이콘 메뉴는 최대 4개까지 포함 가능하며, 컨테이너에 우측 정렬합니다.
Search Icon 이 포함될 경우 해당 아이콘은 우선적으로 Main Header 에 포함시키는 3번째 또는 4번째 자리에 배치합니다.
User Icon은 아이콘메뉴 1번째 또는 2번째 자리에 배치하며, 해당 아이콘은 최소 2개 이상의 아이콘 메뉴가 사용될 때 함께 포함시킬 수 있습니다.
User Icon 포함 아이콘 메뉴가 2개 뿐일 경우에는 User Icon 을 항상 첫번째에 배치합니다.
(반응형 정책에서 우선적으로 분리해, Slide Menu 좌측 영역에 포함하기 위함.)
User Menu 단일 기능만 사용되는 경우, 아이콘을 활용하지 않고 아래와 같이 Text Header 를 사용합니다.
자세한 내용은 Icon Header _ Login 페이지에서 설명합니다.
모바일 헤더에서 제품의 로고는, 헤더 구분에 따라 좌측 또는 중앙 정렬로 배치합니다.
Text Header의 경우 좌측 정렬, Icon Header의 경우 중앙 정렬을 적용합니다.
로고 영역은 최대 215*80px 로 제한합니다.
피그마 컴포넌트 Logo 영역에, 제품에 맞는 로고 이미지를 불러와 재배치 하면, 시스템 상의 모든 컴포넌트 헤더에 자동으로 재적용됩니다.
슬라이드 메뉴는 모바일 헤더 정책에 따라 Sliding Direction이 지정됩니다.
Text Header의 경우 우측에서 슬라이드 시작, Icon Header의 경우 좌측에서 슬라이딩 메뉴가 등장합니다.
Text Header의 경우 슬라이드 메뉴 안에 System X icon이 필수로 포함됩니다.
Header에 사용되는 Text 컬러는 **Black** 또는 Fixed Text Color - **White** 색상으로 정의합니다.
Header Box 에는 아래와 같은 세 가지 색상 정책을 적용합니다.
White 색상에 Bottom Border 가 적용되는 헤더입니다.
텍스트 색상은 Black 을 사용합니다.
_
Background : White
Bottom Border : Gray2 , 1px
Text : Black
Top 상태에서 메인이 어둡거나 색상 배경을 사용할 경우, 헤더에 투명한 배경을 적용할 수 있습니다.
Scroll 상태에서는 항상 Default 정책을 적용합니다.
_
Background : Transparent
Bottom Border : None ****
Text : Fixed Text Color - **White**
Header Box에 Primary 색상이 적용되는 헤더입니다.
텍스트 색상은 Fixed Text Color - **White**를 사용합니다.
_
Background : Primary
Bottom Border : None ****
Text : Fixed Text Color - **White**
계정정보 및 Login / Sign Up 기능이 필요없는 헤더. ex) 랜딩페이지
모바일 반응형에서 Slide Menu 우측에 System X Icon이 필수로 포함됩니다.