스타일 가이드
X2BEE 3.0 BO 시스템 UI/UX 가이드는 고객의 브랜드 아이덴티티를 효과적으로 반영할 수 있도록 설계되었습니다. X2BEE 고객사의 아이덴티티를 적용할 수 있는 기준을 제공하며 다음과 같은 기대효과를 목표로 작성되었습니다.
사용자 경험의 제고와 이용자 만족도 향상
사용자 경험을 향상하기 위한 접근 방법과 지침 제시
UI/UX 개발 및 관리 투입 비용 절약
적용 범위
X2BEE 3.0 솔루션 기반 온라인 커머스 BO 시스템
색상(color), 서체(typography), 형태(Shape), 배치(Layout), 아이콘(Icon) 요소와 함께 사용 규칙들을 준수하여 일관된 아이덴티티를 유지하도록 합니다.
Color
Typography
Layout
System icon
Key colors
Primary color
Secondary color
Grayscale
Alpha
Usage
Point colors
System Colors
Palette
Accessibility
Typeface
Type Scale
Font size
Font weight
Line height
Hierarchy
Header
Nav
Grid
Base
Selections
Arrow
Info
Common
Ohter
색상(Color)
고객사를 대표하는 색상을 기반으로 디지털 UI에 최적화한 색상으로 구성합니다. 색상 대비와 접근성 기준(WCAG)을 준수하여 사용자 환경에서 가독성과 시각적 일관성을 유지합니다.
Primary Color: 주요 UI 구성 요소(버튼, 활성 상태 등)에 사용
Secondary Color: 필터, 칩과 같이 보조적인 역할을 하는 구성 요소에 사용
Grascale: 배경 및 텍스트 대비를 위한 색상
Alpha: 단계 투명도로 구성
Gradient: Light, Main, Bold로 구분
사용지침
Color Palette는 밝은 색상부터 어두운 색상까지 5단계로 사용
서체(Typography)
Typeface
기본 서체: 프리텐다드(Pretendard)
선택 서체: 나눔고딕, 퍼블릭산스, IBM 플렉스 산스체
Type scale
Style
Size
Font weight
Line height
Letter spacing
Usage
Main Title
H5
16px
700
26px
메뉴 페이지 단위 타이틀에 사용
Sub Title
H6
14px
700
24px
Body
12px
600
22px
Body1
13px
400
24px
Label
Large
24px
버튼
Medium
20px
Small
18px
사용 지침
중요 콘텐츠와 보조 콘텐츠의 계층을 명확히 구분
반응형 디자인을 고려하여 폰트 크기는
배치(Layout)
화면에 있는 요소들의 시각적 배열을 다양한 디바이스에서도 일관성을 유지할 수 있도록 작업영역을 기준 준수를 권장합니다.
1. 중단점(Breakpoint)
디바이스 크기에 따라 중단점은 4가지 min-width(최소 가로값)로 정의되어 있습니다.
Device
Breakpoint
대표 화면 사이즈
PC/Desktop
1025 ~ 1920 px
XL: 1536px, L: 1200px
Tablet
601 ~ 1024px
900px
Mobile
360 ~600px
600px
2. 화면 구성
다양한 디바이스에서 보이는 화면의 최대 콘텐츠 영역을 설정하여 사용합니다. 디바이스 크기가 커져도 동일한 배치를 유지하는 제한된 콘텐츠 영역을 사용하며, 최댓값 1200px을 적용합니다. 반응형을 기반으로 레이아웃을 구성하며 디바이스 축소 시에는 디바이스 크기에 맞게 콘텐츠가 재배치 됩니다.
Area
사용
기본 구성
Top, Left, Work 3분할 구조를 사용합니다.
GNB
메뉴 검색, 설정, 사용자 정보 확인을 제공하는 컴포넌트를 배치합니다.
LNB
전체 시스템 메뉴 정보를 배치, 구성하여 페이지를 이동할 수 있습니다.
메뉴 접기 기능을 제공해 작업영역을 더 확보할 수 있습니다.
Work Area
다양한 컴포넌트로 구성되어 있으며, 메뉴의 업무를 처리할 수 있습니다.
3. 작업 공간 유형
작업 공간은 메뉴에 따라 다른 타입으로 제공되며, 크게 4가지 유형으로 구분합니다. 모바일의 경우 반응형으로 제작되어 다른 작업 공간 유형으로 제공하나 데스크탑과 동일한 정보를 제공해야 합니다.
4. 구성 별 간격
페이지 내 콘텐츠 영역은 다음과 같은 간격을 유지하고 데스크탑에서 모바일 사이즈로 변화되는 간격에 유의해야 합니다.
작업영역은 메뉴명 영역과 조회/조회결과 영역으로 구분되며 콘텐츠 단락 사이의 간격을 아래와 같이 준수합니다.
Area
데스크톱(1200기준)
모바일(600기준)
GNB
LNB
Heading-Body
조회 및 조회 결과 영역 - Body
조회 목록 버튼 - Body
Body - Footer
시스템 아이콘(System Icon)
기본 규칙
SVG 파일 사용
표준 아이콘의 사이즈는 24px이며, 16px, 18px. 20px, 32px, 40px 사이즈 사용
Google Material Symbol/Rounded/400 을 기본 사용
사용 지침
라인 타입(Line type)과 필 타입(Fill type)을 구분하여 사용
명확한 정보 전달을 위해 일관된 스타일 유지
버튼(Button)
작성 규칙
버튼 명은 명사로 표기 ([저장], [확인] 등)
버튼의 기능은 사용자 동작을 중심으로 표현
AI 기능 및 다국어와 같이 특수 작업 버튼은 별도 스타일 제공
사용지침
팝업, 연관 화면 버튼의 경우, 대상화면명을 버튼명으로 지정
실행 버튼의 순서는 화면 기능에 따라 선택 나열
접근성
WCAG 2.1 AA 레벨 기준 충족
색상 대비, 텍스트 크기 및 키보드 내비게이션 지원
마지막 업데이트