| 정보구조(IA) |
표준 정보구조 |
정보구조를 3Depth 이하로 설계하였는가? |
권고 |
|
| 1Depth 구조의 Menu |
Menu의 수가 적은 경우 Top Menu 방식으로 제공하였는가? |
권고 |
|
| Menu의 수가 많은 경우 Left Menu 방식으로 제공하였는가? |
권고 |
|
| Menu 명은 짧게 제공하였는가? |
권고 |
|
| Menu가 선택된 상태를 명확히 표시하였는가? |
필수 |
|
| 2Depth 구조의 Menu |
Menu를 화면의 위쪽 혹은 왼쪽에 배치하였는가? |
권고 |
|
| Menu 명은 짧게 제공하였는가? |
권고 |
|
| Menu가 선택된 상태를 명확히 표시하였는가? |
필수 |
|
| 3Depth 구조의 Menu |
Menu를 화면의 위쪽 혹은 왼쪽에 배치하였는가? |
권고 |
|
| 1Depth Menu를 5개 이하로 설계하였는가? |
권고 |
|
| Menu 명은 짧게 제공하였는가? |
권고 |
|
| Menu가 선택된 상태를 명확히 표시하였는가? |
필수 |
|
| Mobile의 경우 3Depth 구조의 설계는 피했는가? |
권고 |
|
| 4Depth 구조의 Menu |
Menu 명은 짧게 제공하였는가? |
권고 |
|
| Menu가 선택된 상태를 명확히 표시하였는가? |
필수 |
|
| Mobile의 경우 4Depth 구조의 설계는 피했는가? |
권고 |
|
| Mobile에서 4Depth 이상의 구조 적용 시 PC UI와는
별도로 Mobile UI를 제공하였는가? |
권고 |
|
| 4Depth 이상, Browser 방식의 System 구성 (PC Web
only) |
Menu 명은 짧게 제공하였는가? |
권고 |
|
| Menu가 선택된 상태를 명확히 표시하였는가? |
필수 |
|
| Mobile의 경우 PC Web에서 제공되는 메뉴 및 기능의 일부를
선별하여 구성하였는가? |
권고 |
|
| 레이아웃 (Layout) |
표준 레이아웃 |
중요한 정보, 자주 사용하는 기능, 중요한 기능의 우선순위를
고려하여 배치하였는가? |
필수 |
|
| 중요도에 따라 왼쪽 위부터 오른쪽 아래 방향으로 배치하였는가? |
권고 |
|
| 중요한 기능이나 정보는 시각적으로 컬러나 크기를 차별적으로 적용하여
부각시켰는가? |
권고 |
|
| 전체적으로 통일된 화면과 규칙적인 배치를 제공하였는가? |
권고 |
|
| 한 화면에 많은 기능을 제공하지 않았는가? |
권고 |
|
| PC와 Mobile의 반응형 UI를 고려하였는가? |
권고 |
|
| PC Web (Header 영역) |
Mobile UI를 고려해 가변 영역과 구성 요소의 정렬 규칙
준수하였는가? |
필수 |
|
| Utility 기능은 우선순위에 따라 왼쪽에서 오른쪽으로 배치하고,
성격이 유사한 기능을 묶어 디바이더로 각 기능의 그룹을 구분하였는가? |
필수 |
|
| Banner를 제공한 경우 닫기 버튼을 제공하였는가? |
필수 |
|
| PC Web (Top Menu 영역) |
Utility 기능과 1Depth 메뉴가 적은 경우
Header영역을 생략하고 Top Menu만 제공하였는가? |
권고 |
|
| PC Web (Left Menu 영역) |
Login을 하지 않으면 Contents나 기능을 사용할 수 없는
경우, Login 화면을 별도로 구성하여 적용하고 Left Menu에는 Login 영역을 제외하였는가? |
필수 |
|
| Login은 버튼만 제공하고 Login화면을 별도로 제공하였는가? |
권고 |
|
| Banner를 적용한 경우 영역 최하단에 배치하였는가? |
권고 |
|
| PC Web (Contents영역) |
브라우저의 좌측, 중앙 정렬로 배치하였는가? |
권고 |
|
| Breadcrumb 제공 시 Contents영역 최 상단 왼쪽에
위치하고 왼쪽 정렬로 배치하였는가? |
권고 |
|
| Tab Menu 제공 시 Breadcrumb 아래에 위치하며 중앙
정렬로 배치하였는가? |
권고 |
|
| Menu Title 제공 시 사용자가 선택한 메뉴명을 좌측 정렬로
배치하였는가? |
권고 |
|
| Contents Control Button 제공 시 Menu
Title 영역 우측, Contents Detail Area 영역 위 또는 아래에 배치하였는가? |
권고 |
|
| 정보가 많아 스크롤이 발생한 경우에 Contents Control
Button 제공 시 Contents Detail Area 위쪽과 아래쪽에 병렬로 배치하였는가? |
권고 |
|
| Search & Inquiry Area 제공 시 검색 조건은
간단하게 제공하였는가? |
권고 |
|
| Search & Inquiry Area 제공 시 조회나 검색 버튼의
경우 우측 정렬로 배치하였는가? |
권고 |
|
| Contents Detail Area 제공 시 내용을 중앙 또는
좌측 정렬로 배치하였는가? |
권고 |
|
| Page Navigation 제공 시 List가 표시될 때 하단에
배치하며, 중앙 정렬로 배치하였는가? |
권고 |
|
| Button 제공 시 우측 정렬로 배치하였는가? |
권고 |
|
| Quick Menu 제공 시 전체 화면이 스크롤로 이동되어도 항상
화면의 오른쪽 상단에 위치하고 있는가? |
필수 |
|
| PC Web (Footer영역) |
B2B 형태의 시스템 Logo 와 Copyright를 좌측 정렬로
배치하였는가? |
권고 |
|
| Family Site는 상단 우측에 배치하였는가? |
권고 |
|
| 시스템 내에서 결제가 발생하는 경우나 결제를 유도하는 정보가 있을
경우 전자 상거래 형태의 시스템을 적용하였는가? |
필수 |
|
| 전자 상거래 형태의 시스템을 제공한 경우 Logo 적용 시
Footer 영역의 좌측 하단에 배치하고, 가운데 정렬로 배치하였는가? |
권고 |
|
| 기타 정보는 로고 우측에 배치하였는가? |
필수 |
|
| 시스템과 관련된 인증 마크는 가장 아래에 배치하였는가? |
권고 |
|
| 반응형 UI 구성 (Top Menu 영역) |
Header를 사용하는 경우 Utility 기능은 가장 중요한
기능(검색, 개인설정)을 배치하고 나머지 기능은 Overflow를 선택해 볼 수 있도록 제공하였는가? |
권고 |
|
| Header를 사용하는 경우 Menu는 현재 선택된 메뉴를 표시하고
선택 시 다른 메뉴에 접근할 수 있도록 제공하였는가? |
필수 |
|
| Header를 사용하는 경우 Mobile에서 Header와 Menu
영역을 하나의 영역(Navigation Bar)에 제공하였는가? |
권고 |
|
| Header를 사용하지 않는 경우 Banner는 Menu 영역
아래에 배치되어 제공하였는가? |
권고 |
|
| Header를 사용하지 않는 경우 Menu는 Drawer
Menu(햄버거 메뉴)로 제공하였는가? |
권고 |
|
| Header를 사용하지 않는 경우 로고는 화면의 가운데로 옮겨지도록
제공하였는가? |
권고 |
|
| Header를 사용하지 않는 경우 1Depth 메뉴가 5개 이하일
때 1Depth의 Menu를 Tab Bar 형태로 제공하였는가? |
권고 |
|
| Header를 사용하지 않는 경우 선택된 1Depth Menu에
종속된 2Depth Menu를 Drawer Menu를 통해 제공하였는가? |
권고 |
|
| 중요도가 낮은 Utility 기능은 Drawer Menu를 통해
제공하였는가? |
권고 |
|
| 반응형 UI 구성 (Left Menu 영역) |
중요도가 낮은 Utility 기능은 Overflow 또는
Drawer Menu를 통해 제공하였는가? |
권고 |
|
| Menu는 Drawer Menu(햄버거 메뉴)로 제공하였는가? |
필수 |
|
| Mobile에서 Header와 Menu 영역을 하나의
영역(Navigation Bar)에 제공하였는가? |
권고 |
|
| Mobile Web (Navigation Bar) |
Menu의 Depth은 1~2Depth로 사용하였는가? |
권고 |
|
| Logo 또는 Title은 가운데 정렬로 배치하였는가? |
권고 |
|
| Utility Function은 1개에서 최대 2개로 배치하였는가? |
권고 |
|
| Utility Function의 기능이 더 있다면 Overflow에
숨겨 제공하였는가? |
권고 |
|
| 이전, 다음 화면으로의 Navigation 은 단말기의 브라우저에서
제공하는 Navigation 기능을 사용하였는가? |
권고 |
|
| Drawer Menu 화면에서 각 메뉴들은 좌측 정렬로
배치하였는가? |
권고 |
|
| Drawer Menu에 하위 메뉴가 있는 경우 아코디언
아이콘(아래화살표)을 메뉴 텍스트의 오른쪽으로 정렬하여 배치하였는가? |
권고 |
|
| Overflow 화면에서 각 기능들은 좌측 정렬로 배치하였는가? |
권고 |
|
| Mobile Web (Contents Area) |
Tab Menu가 있는 경우 레이어드 형태로 제공하며 스크롤 시
위치가 유지되도록 제공하였는가? |
권고 |
|
| Tab Menu가 있는 경우 Tab Menu를 화면의 가장 위에,
중앙 정렬로 배치하였는가? |
권고 |
|
| Contents Control Button(콘텐츠 추가, 삭제
등)과 Filter button(Inquiry)은 내용의 타이틀 우측 또는 상단에 배치하였는가? |
권고 |
|
| 제목 및 본문은 좌측 또는 중앙 정렬로 배치하였는가? |
권고 |
|
| Key Task Button은 화면의 우측 하단에 배치하였는가? |
권고 |
|
| Mobile Web (Footer Area) |
Footer가 있는 경우 Contents 영역의 가장 아래에
배치하였는가? |
필수 |
|
| Logo, 주소, 사업자 정보, Copyright은 좌측 정렬로
배치하였는가? |
권고 |
|
| 시스템 운영 정책과 메뉴의 경우 가운데 정렬로 배치하였는가? |
권고 |
|
| 관계사 Site와 인증 및 수상 정보는 가운데 정렬로 배치하였는가? |
권고 |
|
| 인증 및 수상 정보가 많은 경우 좌우 버튼을 제공하여 롤링할 수
있도록 제공하였는가? |
권고 |
|
| 시스템 내에서 결제가 발생하는 경우나 결제를 유도하는 정보가 있을
경우 전자 상거래 형태의 시스템을 적용하였는가? |
필수 |
|
| 해외 국가를 대상으로 제작하는 시스템인 경우 해당 국가의 전자
상거래 관련 법률이나 규정을 참고하여 적용하였는가? |
필수 |
|
| 구성 요소는 PC와 동일하게 제공하였는가? |
필수 |
|
| Mobile Web (Tab Bar) |
스크롤 시에도 위치를 유지하는 형태로 제공하였는가? |
권고 |
|
| 1Depth Menu를 5개 이하로 사용하였는가? |
권고 |
|
| 메뉴명을 짧게 사용하였는가? |
권고 |
|
| 1Depth Menu가 5개 이상인 경우 더보기 메뉴를 배치하고
별도의 Menu 화면을 호출하는 방식으로 제공하였는가? |
권고 |
|
| 좌우 여백을 적용하고 메뉴 간 여백을 균등하게 정렬하였는가? |
권고 |
|
| 레이아웃 여백 |
상, 하, 좌, 우에 여백(Margin)을 제공하였는가? |
필수 |
|
| 서식 (Text format) |
문장 작성 원칙 |
정확한 내용으로 작성하였는가? |
필수 |
|
| 사용자가 처한 상황을 고려하여 적절하게 표현하였는가? |
권고 |
|
| 사용자에게 동작을 요구하는 경우 사용자가 직관적으로 이해할 수
있도록 명확하게 표현하였는가? |
필수 |
|
| 필요한 정보는 생략하지 않고 표현하였는가? |
권고 |
|
| 완전한 문장으로 작성하였는가? |
필수 |
|
| 숫자 사용 시 정확한 단위를 사용하였는가? |
필수 |
|
| 지시 대명사를 사용하지 않고 구체적으로 가리키는 것이 무엇인지
명확하게 표현하였는가? |
필수 |
|
| 맞춤법과 외래어 표기법을 지켰는가? |
필수 |
|
| 단어를 줄여서 사용하지 않고 표현하였는가? |
필수 |
|
| UI와 직접적인 관련이 있는 텍스트는 굵게 표시하거나 대괄호를
사용하여 다른 텍스트와 구분되도록 표현하였는가? |
필수 |
|
| 문장이나 메시지를 쓸 때 누구나 이해하기 쉽도록 보편적이고 쉬운
표현으로 작성하였는가? |
필수 |
|
| 시제는 현재형으로 표현하였는가? |
권고 |
|
| 비속어나 은어 대신 표준어를 사용하여 작성하였는가? |
필수 |
|
| 내용을 이해하는 데 필요하지 않은 말은 덧붙이지 않고 표현하였는가? |
필수 |
|
| 같은 뜻의 단어나 용어를 중복하거나 같은 내용을 반복해서 사용하지
않고 표현하였는가? |
필수 |
|
| 마침표 |
문장을 끝맺을 때는 마침표를 붙어 작성하였는가? |
권고 |
|
| 마침표를 찍은 후 다음 문장을 쓸 때는 마침표 다음에 한 칸 띄어
표기하였는가? |
필수 |
|
| 연월일을 구분할 때 마침표 뒤는 한 칸 띄어 표기하였는가? |
권고 |
|
| 문장이 명사 어구로 끝나더라도 바로 다음에 문장이 이어지면 문장과
문장을 구분하기 위해 마침표를 찍어 표현하였는가? |
권고 |
|
| 쉼표 |
같은 자격의 어구를 열거할 때 그 사이에 표기하였는가? |
필수 |
|
| 열거의 순서를 나타내는 어구 다음에 표기하였는가? |
필수 |
|
| 문장의 연결 관계를 분명히 하고자 할 때 절과 절 사이에
표기하였는가? |
권고 |
|
| 쉼표 앞은 붙여 쓰고, 뒤는 한 칸 띄어 표기하였는가? |
필수 |
|
| 가운데점 |
열거할 어구들을 일정한 기준으로 묶어서 나타낼 때 표기하였는가? |
권고 |
|
| 같은 계열의 단어 사이에 표기하였는가? |
권고 |
|
| 빗금 |
대비되는 어구를 묶어서 나타낼 때 표기하였는가? |
권고 |
|
| 분수를 나타낼 때 표기하였는가? |
필수 |
|
| ‘얼마/전체’를 나타낼 때 표기하였는가? |
필수 |
|
| 띄어쓰기를 하지 않고 표기하였는가? |
권고 |
|
| 괄호 |
UI 텍스트를 쓸 때 괄호를 사용하지 않고 표기하였는가? |
권고 |
|
| 우리말 표기와 원어 표기를 함께 나타낼 때 괄호를 표기하였는가? |
필수 |
|
| 괄호 앞에는 빈칸을 두지 않으며, 괄호 안의 내용이 앞 문장과
긴밀한 관계에 있을 때는 두 문장의 마침표를 묶어 괄호 밖에 하나만 표기하였는가? |
필수 |
|
| 대괄호 |
UI 문장을 구별하는 서식을 따로 지정할 수 없을 때 표기하였는가? |
필수 |
|
| 사용자에게 메시지를 전달할 때 표기하였는가? |
권고 |
|
| 꺾은 괄호 |
제목을 강조할 때 표기하였는가? |
권고 |
|
| 메뉴 접근 순서를 나타낼 때 대괄호와 함께 표기하였는가? |
권고 |
|
| 수식에서 부등호 기호를 나타낼 때 앞/뒤로 한 칸씩 띄어서
표시하였는가? |
필수 |
|
| 작은따옴표 |
검색어로 입력된 키워드를 강조해서 표시할 때 제공하였는가? |
권고 |
|
| 쌍점 |
쌍점 앞은 붙여 쓰고 쌍점 뒤는 한 칸 띄어 표기하였는가? |
권고 |
|
| 시간을 표시하거나 점수 등을 표기할 때는 띄어쓰기 없이
표기하였는가? |
권고 |
|
| 물결표 |
물결표는 앞/뒤로 한 칸씩 띄어서 표기하였는가? |
필수 |
|
| 물결표의 앞과 뒤에 오는 단어의 표현 형태는 동일하게 표기하였는가? |
권고 |
|
| 붙임표 |
사전, 논문 등에서 파생어나 합성어를 나타내거나 접사나 어미임을
나타낼 때, 외래어와 고유어 또는 외래어와 한자어가 결합하는 경우에 표기하였는가? |
필수 |
|
| 전화번호를 표기할 때 표기하였는가? |
필수 |
|
| 단위 표기 방법 |
법정계량단위의 기본단위는 국제단위계(SI)를 따르며, 유도단위와
보조단위, 특수 단위를 추가로 정해 사용하였는가? |
필수 |
|
| 단위를 쓸 때는 숫자 뒤에 기호를 표기하였는가? |
필수 |
|
| 긴 텍스트 처리 |
긴 Text를 적용해야 해서 공간이 부족할 경우에 ‘…’
표기하였는가? |
권고 |
|
| 인명 표기 |
이름 입력 시 성과 이름 구분 없이 하나의 입력 필드로 입력받고,
출력 시 성과 이름을 붙여서 출력하였는가? |
권고 |
|
| 주민등록번호 (법인등록번호) 표기 |
입력 시 앞 6자리와 뒤 7자리를 각각 입력받고, 뒤 7자리는
‘*’로 처리하고, 출력 시 앞 6자리와 뒤 7자리 사이에 ‘-’를 표기하여 출력하였는가? |
필수 |
|
| 전화번호 표기 |
입력 시 지역번호, 국, 번을 각각 입력받으며 지역번호는 사용자가
선택할 수 있게 하고, 출력 시 지역번호, 국, 번 사이에 ‘-’를 표기하여 출력하였는가? |
필수 |
|
| 휴대폰 번호 표기 |
입력 시 이동통신사 번호, 국, 번을 각각 입력받고, 이동통신사
번호는 입력 필드 드롭다운을 사용하였는가? |
필수 |
|
| 출력 시 이동통신사 번호, 국, 번 사이에 ‘-’를 표기하여
출력하였는가? |
필수 |
|
| 우편번호 표기 |
주소 찾기 기능을 제공할 경우 inputbox 뒤에 주소 찾기
버튼을 배치하였는가? |
필수 |
|
| 주소 찾기를 통해 입력하도록 제공하였는가? |
권고 |
|
| 이메일 표기 |
입력 시 메일 아이디는 사용자가 직접 입력할 수 있게
inputbox로 제공하였는가? |
필수 |
|
| 입력 시 메일 도메인은 직접 입력할 수 있는 inputbox와 자주
사용하는 메일 도메인을 선택할 수 있는 Dropdown를 동시에 제공하였는가? |
필수 |
|
| Dropdown에서 선택된 메일 도메인은 메일 도메인
inputbox에 자동으로 적용되는가? |
필수 |
|
| 출력 시에는 메일 아이디와 도메인 사이에 ‘@’를 표기하여
출력하였는가? |
필수 |
|
| 사업자 등록번호 표기 |
입력 시 첫 3자리, 두 번째 2자리, 세 번째 5자리를 순서대로
입력받고, 출력 시 각 자리 사이에 ‘-’를 표기하여 출력하였는가? |
필수 |
|
| 날짜 표기 |
‘년’, ‘월’, ‘일’ 대신 기호를 사용하는 경우 마침표(.)만
사용하였는가? |
권고 |
|
| 시간 표기 |
‘시’, ‘분’, ‘초’ 대신 기호를 사용하는 경우 쌍점(:)만
사용하였는가? |
권고 |
|
| 통화 표기 |
액수를 아라비아 숫자가 아닌 한글로 쓸 때 띄어 표기하였는가? |
필수 |
|
| ‘\’을 사용하는 경우 숫자 앞에 붙여서 표기하였는가? |
필수 |
|
| ‘\’을 사용하는 경우 액수는 아라비아 숫자로 표기하였는가? |
필수 |
|
| ‘\’을 사용하는 경우 ‘원’과 중복해서 사용하지 않고
표기하였는가? |
필수 |
|
| 파일 용량 표기 |
파일의 용량에 따라 단위를 다르게 출력하고, 파일 용량은 소수점
둘째 자리까지 출력하고 3자리 당 ‘,’로 출력하였는가? |
권고 |
|
| 국가/언어 표기 |
국가명과 해당 국가의 언어를 영어로 출력하였는가? |
권고 |
|
| 공통 문장 |
시스템에 사용되는 상황별 문장 사례를 참고하였는가? |
권고 |
|
| 그리드시스템 (Grid system) |
Grid |
열, 여백 등 모든 그리드는 X2를 기본으로 제공하였는가? |
필수 |
|
| 간격과 여백 등 전체 레이아웃을 짝수 그리드에 모두 맞추어
제공하였는가? |
필수 |
|
| 반응형 레이아웃 그리드 (Columns) |
여백을 제외한 화면 영역에 내용을 배치하였는가? |
필수 |
|
| 일반적으로 모바일에서 사용되는 360px~599px의 화면에서
레이아웃 그리드는 4개의 Columns을 사용하였는가? |
필수 |
|
| 모바일&태블릿에서 사용되는 600px~1279px 크기의 화면에서
레이아웃 그리드는 8개의 Columns을 사용하였는가? |
필수 |
|
| PC에서 사용되는 1280px~ 크기의 화면에서 레이아웃 그리드는
12개의 Columns을 사용하였는가? |
필수 |
|
| 반응형 레이아웃 그리드 (Gutters & Margins) |
Gutters & Margins 반응형으로 조절되는 환경 변화에도
일관성 있는 고정된 크기로 제공하였는가? |
필수 |
|
| Columns 사이에 8px 고정된 크기로 Gutters를
제공하였는가? |
필수 |
|
| 좌우에 16px 고정된 크기로 Margins을 제공하였는가? |
필수 |
|
| 반응형 레이아웃 그리드 (BreakPoint) |
주어진 BreakPoint 범위에서 레이아웃은 화면 크기와 방향에
맞게 조정하였는가? |
필수 |
|
| 화면영역 |
UI 영역은 다양한 화면 크기에 따라 BreakPoint 에
적응하면서 여러 장치에서 일관되게 제공하였는가? |
권고 |
|
| PC Web 용으로 설계된 UI 요소를 Mobile UI와 일치하는
방식으로 구성하였는가? |
권고 |
|
| 왼쪽 메뉴를 고정 영역으로 제공하는 경우 왼쪽 메뉴를 제외한 나머지
영역에 Columns의 수와 넓이는 고정값으로 제공하였는가? |
필수 |
|
| 왼쪽 메뉴를 유동적으로 제공하는 경우 Columns의 수는
고정값으로 제공하며 Columns의 넓이는 유동적으로 제공하였는가? |
필수 |
|
| 레이어 화면 영역은 일시적으로 나타나며 그럴 경우 반응 형 그리드에
영향을 미치지 않도록 제공하였는가? |
필수 |
|
| 레이어 화면 영역으로 제공하는 경우 항목 또는 영역의 외부 공간을
탭 하여 레이어 영역을 숨길 수 있도록 제공하였는가? |
권고 |
|
| Padding |
한 화면 안에서 패딩은 컨테이너 영역 안에 균일하게 적용하였는가? |
권고 |
|
| 패딩의 크기를 기본값으로 제공할 수 없는 경우 균일하게 변경하여
적용하였는가? |
권고 |
|
| 크기 규칙 |
아이콘 크기는 짝수로 구성된 스케일을 사용하였는가? |
필수 |
|
| 콘텐츠 크기를 조정할 때 제공한 비율 중 하나를 선택하여
사용하였는가? |
권고 |
|
| 수직 여백 크기는 개별 구성 요소를 배치할 때 구성 요소 간의 수직
간격에 적용하며 제공한 규칙에 따라 사용하였는가? |
권고 |
|
| 수직 여백 크기는 반응형에 유동적이지 않고 고정된 값으로
사용하였는가? |
필수 |
|
| 수직 여백 크기는 짝수값을 사용하며 최솟값은 2px, 최댓값은
90px로 제한하여 사용하였는가? |
권고 |
|
| 수평 여백 크기는 개별 구성 요소를 배치할 때 구성 요소 간의 수평
간격에 적용하며 제공한 규칙에 따라 사용하였는가? |
권고 |
|
| 수평 여백 크기는 반응형에 유동적이지 않고 고정된 값으로
사용하였는가? |
필수 |
|
| 수평 여백 크기는 짝수값을 사용하며 최솟값은 2px, 최댓값은
38px로 제한하여 사용하였는가? |
권고 |
|
| 서체 (Typography) |
서체 소개 |
한글/영문을 기본으로 하며, 오픈소스 서체인 나눔고딕을
사용하였는가? |
필수 |
|
| 중문의 경우에는 NotoSans Cjk를 사용하였는가? |
필수 |
|
| 스타일 |
크기 유형은 상황에 맞도록 타이틀 폰트와 본문 폰트로 구분하여
제공하였는가? |
필수 |
|
| 행간은 폰트 크기 x 1.6을 규칙으로 계산하여 제공하였는가? |
권고 |
|
| Regular를 기본 굵기로 사용하였는가? |
권고 |
|
| Bold와 ExtraBold는 긴 텍스트에 사용하지 않고 타이틀에만
사용하였는가? |
권고 |
|
| 서체 굵기는 계층 우선순위에 맞게 올바르게 사용하였는가? |
필수 |
|
| 타입컬러 |
기본 텍스트 컬러는 지정된 컬러를 사용하였는가? |
권고 |
|
| 세아 오렌지 컬러는 텍스트 링크 및 동작되는 폰트에 사용하였는가? |
권고 |
|
| 기본 텍스트 컬러는 아이콘을 보조하는 곳에도 사용하였는가? |
권고 |
|
| 경고 메시지에는 레드 컬러가 사용하였는가? |
필수 |
|
| 승인 메시지에는 블루 컬러가 사용하였는가? |
필수 |
|
| 스타일 유형 |
계층 구조에 맞도록 제공하고 있는 폰트 스타일 유형으로
적용하였는가? |
권고 |
|
| 컬러(Color) |
컬러 분석 |
오렌지 컬러는 모든 세아의 시스템에서 포인트 컬러로 사용하며, 추가
색상은 가능한 절제하여 사용하였는가? |
권고 |
|
| 컬러 구현 |
화이트 테마에서는 Black01 또는 Primary
Gray01~02를 기본 배경컬러로 사용하였는가? |
필수 |
|
| 다크 테마에서는 Black10 또는 Primary
Gray09~10을 기본 배경컬러로 사용하였는가? |
필수 |
|
| 배경과 유사한 중간 톤을 사용하지 않으며, 제공되는 컬러를 변경하지
않고 적용하였는가? |
필수 |
|
| 상호작용 상태 |
화이트 테마의 경우 상태값의 반응에 따라 어두워지는 효과를
적용하고, 다크 테마의 경우 상태값의 반응에 따라 밝아지는 효과를 적용하였는가? |
권고 |
|
| Hover 표현 시 리튬 디자인 시스템에서 제공하는 10단계의
테마별 컬러 세트를 기반으로 Normal 상태의 색상과 인접 색상 사이의 “반 단계” 색상을 활용하였는가? |
권고 |
|
| Active 표현 시 리튬 디자인 시스템에서 제공하는 10단계의
테마별 컬러 세트를 기반으로 Normal 상태 색상의 한 단계 위 또는 아래의 색상을 활용하였는가? |
권고 |
|
| Active 표현 시 구성 요소에 포함되는 텍스트는 화이트 테마의
경우 두 단계 어두운 컬러를 적용하고, 다크 테마의 경우 두 단계 밝은 컬러를 적용하였는가? |
권고 |
|
| 컨테이너 컬러는 Selected 와 Normal은 동일한 색상을
적용하였는가? |
권고 |
|
| Selected 표현 시 구성 요소에 포함되는 텍스트는 화이트
테마의 경우 두 단계 어두운 컬러를 적용하고, 다크 테마의 경우 두 단계 밝은 밝은 컬러를 적용하였는가? |
권고 |
|
| Disabled 표현 시 리튬 디자인 시스템에서 제공하는 10단계의
테마별 컬러 세트를 기반으로 화이트 테마의 경우 Black04컬러를 사용하고, 다크 테마의 경우 Black06을
사용하였는가? |
필수 |
|
| Disabled 표현 시 구성 요소의 컨테이너는 30% 투명도를
적용하였는가? |
필수 |
|
| 접근성 |
색약자 등 사용자의 접근성을 고려하여 색상 간의 대비를
적용하였는가? |
권고 |
|
| 테마별 컬러세트 |
컬러 팔레트를 사용할 때는 각 테마 기준의 컬러 팔레트만을
사용하였고, 2가지 테마 컬러 팔레트를 혼용하여 사용하지 않았는가? |
필수 |
|
| 화이트 테마를 기본으로 사용하였는가? |
권고 |
|
| 아이콘(Icon) |
아이콘 종류 |
아이콘 제공 시 기본적으로 라인 시스템 아이콘 세트를 사용하며,
테마별 4가지 컬러 스타일의 아이콘을 사용하였는가? |
권고 |
|
| 작고 협소한 공간에 아이콘 제공 시 디자인 시스템에서 제공되는 면
타입을 사용하였는가? |
권고 |
|
| 아이콘 크기 |
제공한 5가지 아이콘 크기 중 UI 구성 요소 또는 텍스트 등과
조합 시 알맞은 크기를 사용하였는가? |
권고 |
|
| 크기 기준은 짝수로 구성된 고정 크기로 12px, 16px,
20px, 24px, 32px 크기를 사용하였는가? |
권고 |
|
| 아이콘 컬러 |
화이트 테마 적용 시 제공되는 컬러 세트만을 사용하였는가? |
필수 |
|
| 다크 테마 적용 시 제공되는 컬러 세트만을 사용하였는가? |
필수 |
|
| 아이콘 활용 |
아이콘과 레이블을 함께 사용하는 경우 제공하는 규칙을 상황에 맞게
선택하여 사용하였는가? |
권고 |
|
| 탭 형식의 선택이 가능한 아이콘의 경우 선택 안된
아이콘(Normal)의 경우 단색 Black&Gray 컬러만을 사용하였는가? |
권고 |
|
| 아이콘을 텍스트와 배치하는 경우, 정해진 아이콘 크기 중 텍스트
크기와 매칭되는 크기를 사용하였는가? |
권고 |
|
| 아이콘을 텍스트와 배치하는 경우 텍스트와 아이콘은 유사 색상을
사용하였는가? |
권고 |
|
| 아이콘을 텍스트 옆에 사용되는 경우 아이콘을 중앙 정렬하였는가? |
필수 |
|
| 터치 영역 |
대화 형 아이콘의 모든 터치 대상은 44px 이상으로 제공하였는가? |
필수 |
|
| 인터랙션 가이드 (interaction guide) |
인터랙션 적용 |
동일한 인터랙션 규칙을 제공하였는가? |
권고 |
|
| 접근성 (Accessibility) |
인식의 용이성 |
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체
텍스트를 제공하였는가? |
필수 |
|
| PC Web 화면에서 콘텐츠에 마우스 커서를 올리면
Tooltip으로 대체 텍스트를 볼 수 있도록 제공하였는가? |
필수 |
|
| 멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록
제작하기 위해 서는 자막, 대본 또는 수화를 제공하였는가? |
권고 |
|
| 명료성 |
전문적인 시스템(예: MES)이 아닌 일반 사용자 대상의 시스템
혹은 서비스에서는 색보다는 가능한 명도나 무늬를 이용해서 콘텐츠의 차이를 인식할 수 있도록 제공하였는가? |
권고 |
|
| 사용자들이 색, 크기, 모양 또는 위치에 관한 정보를 인식하지
못하더라도 원하는 콘텐츠에 접근할 수 있도록 제작하였는가? |
권고 |
|
| 레이블이 명확하거나 대체 텍스트를 통해서 지칭하는 텍스트와 동일하게
정보를 제공하였는가? |
권고 |
|
| 웹 페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와
배경 간의 충분한 대비를 제공하여, 저시력 장애인, 색약 장애인, 노인 등도 콘텐츠를 인식할 수 있도록
제공하였는가? |
권고 |
|
| 콘텐츠 사이에 구분선을 두거나, 테두리를 통한 구분, 줄 간격 및
글자 간격을 조절하여 구분하여 모든 이웃한 콘텐츠는 시각적으로 구분될 수 있도록 구현하였는가? |
필수 |
|
| 운용의 용이성 |
키보드의 tab키를 이용하여 사용자가 클릭하여 동작하는 기능요소에
이동할 수 있도록 제공하였는가? |
필수 |
|
| 콘텐츠가 자동으로 갱신되거나 롤링이 되는 경우 사용자가 이를 제어할
수 있는 기능을 제공하였는가? |
권고 |
|
| 화면 구성 요소 (Component) |
아코디언 (Accordion) |
콘텐츠나 아코디언 형태의 메뉴는 제목의 우측 끝에 배치하였는가? |
권고 |
|
| 컨테이너 아코디언을 제공하는 경우 아이콘 선택 시 콘텐츠 영역의
내용이 아래로 밀리면서 그 사이에 상세 검색 항목들이 노출하였는가? |
필수 |
|
| 배지(Badge) |
숫자는 최대 3자리 숫자까지 표기하며, 999개를 초과한 경우
999+로 표기하였는가? |
필수 |
|
| 모바일의 경우 점으로만 표기하였는가? |
권고 |
|
| 텍스트인 경우 오른쪽 옆에 배치하고, 아이콘인 경우 오른쪽 상단에
배치하였는가? |
필수 |
|
| 브래드크럼 (Bread crumb) |
각 레벨 사이에 구분자를 제공하였는가? |
필수 |
|
| 동일 레벨의 이동을 지원하는 경우 레이블 우측에 아이콘을
제공하였는가? |
필수 |
|
| 브라우저의 공간이 제한되는 경우 첫 번째 레벨과 현재 레벨(마지막
레벨)은 말줄임표를 표시하지 않고, 두 번째 레벨부터 하위 레벨 순서로 말줄임표를 표시하였는가? |
필수 |
|
| 콘텐츠 영역에 있는 타이틀 위에 왼쪽 정렬로 배치하였는가? |
필수 |
|
| 버튼(Button) |
핵심 기능 버튼과 기능을 부정(취소 등) 하는 버튼이 함께 사용되는
경우 부정하는 버튼은 좌측에, 핵심 기능 버튼은 우측에 배치하였는가? |
필수 |
|
| 버튼은 우선순위가 높은 순서로 우측에서 좌측으로 배치하였는가? |
필수 |
|
| 버튼의 레이블은 버튼을 선택한 결과를 명확하게 예측할 수 있도록
제공하였는가? |
권고 |
|
| 메뉴 영역인 경우 가운데에 배치하고, 콘텐츠인 경우 우측 정렬로
배치하였는가? |
권고 |
|
| 컨트롤 버튼의 경우 좌측 정렬로 배치하였는가? |
권고 |
|
| Button의 Normal 상태와 Hover된 상태,
Disabled된 상태, Button을 Active 했을 때의 형태 별로 각기 다르게 표현되었는가? |
필수 |
|
| 버튼: 플로팅 (Button: Floating) |
핵심 기능 버튼을 플로팅 버튼으로 사용하는 경우에는 메일 쓰기,
연락처 추가 등과 같은 긍정적인 버튼을 플로팅 버튼으로 사용하였는가? |
권고 |
|
| 플로팅 버튼에 기타 요소를 겹쳐 놓지 않도록 하였는가? |
권고 |
|
| 브라우저 화면을 스크롤 할 때에도 위치가 유지되며, 하단 가장자리에
배치하였는가? |
권고 |
|
| 캘린더 (Calendar) |
명확한 날짜 표기로 오류를 방지하였는가? |
권고 |
|
| 컨테이너는 입력 필드 하단에 배치하였는가? |
필수 |
|
| 스크롤 되어 아래로 이동하여 인터페이스 가장자리에 가까워지는 경우
컨테이너가 잘리지 않도록 위로 배치하였는가? |
필수 |
|
| 카드(Cards) |
콘텐츠에 대한 기능이 많은 경우 오버플로우를 제공하였는가? |
권고 |
|
| 카드의 Normal 상태와 Hover된 상태, Disabled된
상태, 카드를 Active 했을 때의 형태 별로 각기 다르게 표현되었는가? |
필수 |
|
| 체크박스 (Checkbox) |
짧은 단어를 사용하고, 체크박스를 선택한 경우 결과를 명확하게
표시하였는가? |
권고 |
|
| 상황(Normal, Hover, Selected,
Disabled)에 따라 다르게 표현하였는가? |
필수 |
|
| 콘텐츠 스위처 (Content switcher) |
기본 선택을 제공하고, 선택된 상태를 명확하게 구분하여
표기하였는가? |
필수 |
|
| 제공 시 콘텐츠 영역의 중앙 정렬로 배치하였는가? |
권고 |
|
| 데이터 테이블 (DATA TABLE) |
컨트롤 적용 상태를 명확하게 표기하였는가? |
필수 |
|
| 데이터 테이블에 제공되는 숫자(예: 금액, 수량 등)는 우측 정렬로
하고, 버튼, 체크박스와 같은 요소들은 모두 가운데 정렬로 배치하였는가? |
권고 |
|
| 처음 여러 개의 테이블 사용 시 브라우저에 맞는 동일한 너비의
그리드를 제공하고, 최소로 줄일 수 있는 너비를 지정하여 제공하였는가? |
필수 |
|
| 핸들러를 통해 데이터 테이블의 너비값을 자유롭게 조절할 수 있도록
제공하였는가? |
필수 |
|
| 콘텐츠 영역의 좌측 정렬로 배치하였는가? |
권고 |
|
| 디바이더(Dividers) |
디바이더가 너무 부각되거나, 희미하여 보이지 않게 적용하지 않고,
요소를 분리할 수 없는 경우에만 사용하였는가? |
필수 |
|
| 드롭다운 (Drop-down) |
스크롤로 아래로 이동하여 인터페이스 가장자리에 가까워지는 경우
메뉴가 잘리지 않도록 위로 배치하였는가? |
필수 |
|
| 스크롤 될 옵션이 있는 경우 표시하였는가? |
권고 |
|
| 일관성 있는 배치를 제공하였는가? |
권고 |
|
| 파일 업로더 (File uploader) |
업로드한 파일을 제출 또는 업로드 가능하도록 버튼을 제공하고,
버튼은 파일이 있는 경우에 활성화 되도록 제공하였는가? |
필수 |
|
| 파일 선택 버튼 선택 시 브라우저 업로드 창을 제공하고 특정 파일
형식만 허용되는 경우 유효성 검사를 제공하였는가? |
필수 |
|
| 업로드한 파일은 선택 시 동작하지 않으며, 삭제 버튼만 동작하도록
제공하였는가? |
필수 |
|
| 핸들러(Handler) |
화면이 좁은 모바일에서는 제공하지 않고 데스크톱과 같이 넓은
화면에서만 제공하였는가? |
필수 |
|
| 세로형 핸들러는 개개별로 컨테이너 크기를 조절되고, 가로형 핸들러는
개개별로 컨테이너 크기를 조절할 수 없도록 제공하였는가? |
필수 |
|
| 핸들러를 사용할 수 있는 최대 개수는 3X3으로 제한하여
제공하였는가? |
권고 |
|
| 인풋박스 (Inputbox) |
내용을 입력하기 전 완전한 문장의 가이드 텍스트를 노출하고,
사용자가 입력 시 가이드 텍스트는 사라지도록 하였는가? |
필수 |
|
| 비밀번호 입력 시 문자를 입력하면 ‘●’로 변경되어 표현하였는가? |
필수 |
|
| 입력값에 오류가 있는 경우 사용자가 오류임을 알 수 있도록
인풋박스와, 유효성 검사 아이콘, 오류 안내 텍스트를 명확하게 제공하였는가? |
필수 |
|
| Normal, Hover, Active, Complete,
Error, Disabled 상태에 따라 다르게 표현하였는가? |
필수 |
|
| 링크(Link) |
인라인 링크로 제공하는 경우 한 인라인 링크가 줄바꿈이 되지 않도록
제공하였는가? |
필수 |
|
| 링크의 Normal 상태와 Hover된 상태, Disabled된
상태, Visited된 상태, 링크를 Active 했을 때의 형태 별로 각기 다르게 표현되었는가? |
필수 |
|
| 리스트: 테이블 (List: Table) |
리스트를 구성하고 있는 정보의 형태는 모두 동일하게 제공하였는가? |
권고 |
|
| 리스트 항목이 한 화면에 모두 표시되지 않는 경우 페이지 내비게이션
구성 요소를 함께 사용하거나 스크롤을 제공해 더 많은 정보가 있음을 표시하였는가? |
권고 |
|
| 리스트: 갤러리 (List: Gallery) |
더 이상 이동이 불가한 경우 이동 버튼을 비활성화로 제공하였는가? |
필수 |
|
| 섬네일 이미지 리스트로 제공하는 경우 선택한 이미지와 선택하지 않은
이미지를 명확히 구분할 수 있도록 제공하였는가? |
필수 |
|
| 이미지는 가운데 정렬로 제공하고, 섬네일 이미지 리스트를 제공하는
경우 이미지의 가로 넓이를 고려하여 섬네일 이미지 노출 개수를 정해 제공하였는가? |
권고 |
|
| 로딩(Loading) |
로딩이 실패했을 때에는 로딩 실패에 대한 원인을 사용자에게 알려주는
메시지나 Popup을 노출하였는가? |
필수 |
|
| 노티피케이션 (Notification) |
텍스트 영역을 초과하는 경우 ‘더 보기’를 제공하였는가? |
필수 |
|
| 알림 정보 상태에 따라 다르게 표현하였는가? |
필수 |
|
| 인라인 알림은 관련 항목 근처에 배치하고, 콘텐츠 영역에서 그리드의
열에 맞춰 배치하였는가? |
필수 |
|
| 토스트 알림은 화면 오른쪽 상단에 배치하고, 새 토스트 알림이
발생하는 경우 목록 상단에 나타나고 이전 알림은 해제될 때까지 푸시 다운되도록 제공하였는가? |
필수 |
|
| 넘버(Number) |
변경되는 숫자 단위를 상황에 따라 다르게 제공하였는가? |
권고 |
|
| 상황(Normal, Hover, Active, Error,
Disabled)에 따라 다르게 표현하였는가? |
필수 |
|
| 오버플로우 (Overflow) |
사용자 데이터를 크게 변경시킬 수 있는 작업 (예: 삭제)은 기본
작업 집합의 아래에 배치하였는가? |
권고 |
|
| 메뉴가 나타나는 위치에 따라 우측 또는 좌측으로 정렬되어 오버플로우
메뉴를 제공하였는가? |
필수 |
|
| 페이지네이션 (Pagination) |
더 이상 이동이 불가한 경우 이동 버튼을 비활성화로 제공하였는가? |
필수 |
|
| 페이지 수가 10개를 초과하지 않을 경우 페이지 이동 버튼을
제공하지 않도록 하였는가? |
필수 |
|
| 브라우저 공간이 줄어드는 경우 고스트 버튼 형태로 변경되어
제공하고, 버튼 선택 시 정해진 리스트가 더 표시되도록 하였는가? |
권고 |
|
| 한 화면에 과도한 스크롤 발생이 예상되는 경우 배치하고, 페이지
숫자로 제공하는 경우 콘텐츠 영역 하단 부분 가운데 정렬로 배치하였는가? |
필수 |
|
| 팝업(Popup) |
사용자가 팝업 내용을 신속하게 파악하고, 다음에 수행할 작업을 알
수 있도록 제공하였는가? |
필수 |
|
| 전체 화면을 Dimmed 처리와 함께 중앙에 배치하였는가? |
권고 |
|
| 퀵 메뉴 (Quick Menu) |
Quick Menu 적용 시에는 Home 화면을 제외한 시스템 내
모든 화면에 동일한 기능과 형태로 적용하였는가? |
필수 |
|
| 위에서 아래로 우선순위가 높은 기능 순서로 배치하였는가? |
필수 |
|
| 라디오 버튼 (Radio button) |
짧은 단어를 사용하고, 라디오 버튼을 선택한 경우 결과를 명확하게
표시하였는가? |
권고 |
|
| 이미 선택된 항목이 있을 경우, 다른 항목이 선택되었을 때 기존에
선택되었던 항목은 선택 해제 되는가? |
필수 |
|
| 상황(Normal, Hover, Selected,
Disabled)에 따라 다르게 표현하였는가? |
필수 |
|
| 서치(Search) |
상세 검색과 검색 기록, 자동 완성 기능 제공 시 브라우저 공간이
줄어드는 경우 전체 화면으로 제공하였는가? |
권고 |
|
| 검색 아이콘은 화면 우측 상단에 배치하고, 상세 선택과 함께
지원하는 경우 검색 결과를 제공하는 콘텐츠 영역 타이틀의 하단 좌측에 배치하였는가? |
권고 |
|
| 셀렉트(Select) |
스크롤 되어 아래로 이동하여 인터페이스 가장자리에 가까워지는 경우
메뉴가 잘리지 않도록 위로 배치하였는가? |
필수 |
|
| 선택되는 항목에 대한 기본값(Default)을 설정하여
제공하였는가? |
필수 |
|
| 선택한 항목과 선택하지 않은 항목을 명확하게 표시하였는가? |
필수 |
|
| 시트: 보텀 (Sheets: Bottom) |
하단에 요약된 정보를 제공하는 경우 시트를 펼칠 수 있는 버튼과
다시 접을 수 있는 버튼을 제공하였는가? |
필수 |
|
| 모바일의 경우 보텀 시트 제공 시 전체 화면을 Dimmed 처리와
함께 하단에 배치하였는가? |
권고 |
|
| 시트: 사이드 (Sheets: Side) |
사이드 시트를 펼친 상태에서 스크롤 시 사이드 시트는 유지된 상태로
제공하였는가? |
필수 |
|
| 모바일의 경우 사이드 시트 제공 시 왼쪽에서 오른쪽, 혹은
오른쪽에서 왼쪽으로 슬라이드 되어 나타나도록 제공하였는가? |
권고 |
|
| 슬라이더(Slider) |
최솟값과 최댓값은 표기하였는가? |
필수 |
|
| 슬라이더 내에 핸들러를 좌/우로 움직일 때 현재값이 우측 입력
필드에 바로 나타나는가? |
필수 |
|
| Normal, Hover, Active, On
Click/Typing, Error, Disabled 상황에 따라 다르게 표현하였는가? |
필수 |
|
| 스테퍼(Stepper) |
변경되는 숫자 단위를 상황에 맞게 적용하였는가? |
권고 |
|
| 상황(Normal, Hover, Active, Error,
Disabled)에 따라 다르게 표현하였는가? |
필수 |
|
| 스텝(Step) |
수행하고 있는 단계를 명확하게 표시하고, 이동 방향을 표시하였는가? |
필수 |
|
| 전체 프로세스가 종료되기 전까지 사용자가 직전에 입력하고 선택한
내용을 저장하고 있는가? |
권고 |
|
| 탭(Tab) |
현재 선택된 탭은 선택되지 않은 탭과 그래픽 적으로 구분하여
표현하였는가? |
필수 |
|
| 브라우저 공간이 줄어드는 경우 드롭다운 형태로 변경되어
제공하였는가? |
권고 |
|
| 태그(Tag) |
태그 개수가 많아 영역의 공간이 부족한 경우 두 번째 줄로 줄 바꿈
되어 제공하였는가? |
권고 |
|
| 상황(Normal, Hover, Selected,
Disabled)에 따라 다르게 표현하였는가? |
필수 |
|
| 텍스트 에어리어 (Text area) |
내용을 입력하기 전 완전한 문장의 가이드 텍스트를 노출하고,
사용자가 입력 시 가이드 텍스트는 사라지도록 하였는가? |
필수 |
|
| 입력할 수 있는 텍스트의 개수가 한정되어 있는 경우 카운터를
제공하였는가? |
필수 |
|
| Normal, Hover, Active, Complete,
Error, Disabled상태에 따라 다르게 표현하였는가? |
필수 |
|
| 토글(Toggle) |
레이블은 좌측 정렬로 배치하고, 토글은 우측 정렬로 배치하였는가? |
권고 |
|
| 상황(Normal(ON/OFF), Hover, Disabled)에
따라 다르게 표현하였는가? |
필수 |
|
| 툴팁(Tooltip) |
커서가 타깃 밖으로 이동하면 툴팁이 사라지고, 타깃 내에서 커서가
이동하는 경우 툴팁이 유지되도록 제공하였는가? |
권고 |
|
| 다른 정보를 방해하지 않도록 툴팁을 제공하였는가? |
권고 |
|
| Dimmed 처리는 필요한 경우에만 제공하였는가? |
필수 |
|
| 탭: 브라우저 타입 (Tab: Browser type) |
말줄임표를 사용하여 표기한 후에 탭이 많아 탭 공간이 제약되는 경우
아이콘이 탭 위로 레이어 되도록 제공하였는가? |
필수 |
|
| 고정된 탭은 우선순위가 높아지며 가장 앞쪽으로 이동하고, 고정한
순서대로 배치하였는가? |
필수 |
|
| Normal, Hover, Selected, Disabled,
Pin Icon ON 상태에 따라 다르게 표현하였는가? |
필수 |
|
| 범례(Legend) |
범례 내용을 수정 및 삭제 등 편집할 수 있는 버튼 제공 시 우측에
배치하였는가? |
권고 |
|
| 2개 이상의 범례를 배열할 경우 범례 사이에 디바이더를 제공하고,
일정한 간격으로 배치하였는가? |
권고 |
|
| 패턴 (Pattern) |
엠프티 스테이트 (Empty states) |
콘텐츠 영역에서 엠프티 스테이트 제공을 넓은 공간에 배치하는 경우
좌측 또는 중앙에 배치하였는가? |
권고 |
|
| 엠프티 스테이트를 제공하는 공간이 좁은 경우 텍스트만 제공하였는가? |
권고 |
|
| 폼(Forms) |
알맞은 구성 요소 사용으로 사용자가 빠르게 인지하고 작성할 수
있도록 제공하였는가? |
필수 |
|
| 로그인(Login) |
아이디 비밀번호 입력 시 유효하지 않은 정보를 입력했을 때
Inputbox 바로 아래에 오류 안내 텍스트를 제공하고 아래의 구성 요소들은 오류 안내 텍스트 영역만큼 아래로
밀려 나타나는가? |
필수 |
|
| 팝업(Popup) |
제목 영역과 버튼 영역을 고정으로 제공하였는가? |
권고 |
|
| 아코디언 또는 탭과 같이 정보를 숨기는 구성 요소와 데이터 테이블과
같은 복잡한 구성 요소는 사용하지 않고 제공하였는가? |
권고 |
|
| 팝업의 내용이 중요한 경우 전체 화면을 Dimmed 처리와 함께
중앙에 배치하였는가? |
권고 |
|
| 회원가입 (Sign up) |
회원가입 시 약관이 여러 개 존재할 경우 전체 약관 동의하기
Checkbox를 제공하는가? |
권고 |
|
| 회원가입 시 각 약관 별 Textarea 좌측 하단에 동의하기
Checkbox를 제공하는가? |
필수 |
|
| 스켈레톤(Skeleton) |
노출되는 콘텐츠 영역의 내용의 너비와 높이를 추론하여 제공하였는가? |
권고 |
|