그리드 버튼 정렬
- · 액션 기능 영역에는 테이블 내 데이터를 제어하는 추가, 삭제, 편집, 저장 등의 버튼을 배치하며 업무 우선도, CRUD순으로 테이블 좌측에서 우측으로 정렬 권장
- · 옵션 기능 영역에는 새로고침, 인쇄, 검색, 보기옵션 등의 버튼을 배치하며 테이블 우측에서 좌측으로 정렬 권장
구성 예시 이미지



그리드 버튼 정렬 검토 사항
- · 버튼의 정렬 상태가 가이드에 맞춰 정렬되어 있는지 체크한다.
- · 구분선을 통해 같은 역할끼리 분류되어 있는지 체크한다.
버튼 간격
- · 버튼과 버튼 간의 간격이 겹치지 않도록 일정한 간격으로 수정 권장
구성 예시 이미지

버튼 간격 검토 사항
- · 버튼 간의 간격이 일정한지 체크한다.
- · 각 버튼의 역할에 따라 간격을 통해 구분되어 지는지 체크한다. (필요시 구분선 사용)
버튼 스타일 통일
- 버튼의 스타일을 일관성 있도록 통일 권장(체크박스/액션버튼 등)
구성 예시 이미지

버튼 스타일 통일 검토 사항
- · 버튼 스타일이 통일되어 있는지 체크한다.
- · 버튼의 형태가 각 기능 및 상황별로 알맞게 디자인 되어있는지 체크한다.
내용 추가 예정
데이터 정렬
- · 좌측 정렬 데이터 : 긴 서술형 정보로 구성된 문자/숫자
- · 우측 정렬 데이터 : 수량/금액을 표현 하는 숫자 *자릿수 구분(,)표기 필수
- · 중앙 정렬 데이터 : 길이가 동일한 문자/숫자 또는 위 경우에 해당되지 않는 경우
(예) 주소, 특이사항, 비고, TASK명 등
(예) 순서(Seq), 출강목표번호, 날짜, 성명,규격약호, 행선, 설비구분 등
(예) 순서(Seq), 출강목표번호, 날짜, 성명,규격약호, 행선, 설비구분 등
구성 예시 이미지

데이터 정렬 검토 사항
- · 데이터가 각 성격에 따라 좌측/우측/중앙으로 맞게 정렬되어 있는지 체크한다.
데이터 잘림
- · 항목값의 데이터가 잘리지 않도록 아래와 같이 말줄임 표기 또는 항목 길이 수정 권장
구성 예시 이미지

데이터 잘림 검토 사항
- · 테이블 내 데이터가 잘리지 않고 모두 표기되는지 체크한다.
- · 데이터가 잘리는 경우 말줄임 표기 또는 테이블 길이 수정 등 상황에 맞는 수정 방향을 제시한다.
번호 표기 통일
- · 같은 의미를 가진 번호, Seq, No. 는 모두 '번호'로 통일하는 것을 권장
구성 예시 이미지

번호 표기 통일 검토 사항
- · 같은 의미를 가진 타이틀의 경우 표기법을 통일하고 있는지 체크한다.
조회영역 정렬
- · 조회 영역 내 항목명은 좌측 정렬을 권장
구성 예시 이미지

조회영역 정렬 검토 사항
- · 조회 영역 내 항목명이 좌측 정렬 상태인지 체크한다.
- · 조회 영역 내 인풋 박스(입력창, 셀렉트 박스 등)끼리의 정렬 상태를 체크한다.
조회 버튼 위치 및 크기
- · 조회 버튼은 마지막 인풋 박스(입력창, 셀렉트박스 등) 뒤에 일관성 있는 위치를 권장
구성 예시 이미지

조회 버튼 간격 위치 크기 검토 사항
- · 조회 버튼의 위치가 마지막 인풋 박스 뒤에 위치하는지 체크한다.
- · 조회 버튼의 크기가 가이드에 맞게 적용되어 있는지 체크한다.
조회 버튼 간격
- · 조회 버튼은 마지막 인풋 박스(입력창, 셀렉트박스 등) 뒤에 일관성 있는 위치를 권장
구성 예시 이미지

조회 버튼 간격 검토 사항
- · 조회 버튼의 위치가 마지막 인풋 박스 뒤에 위치하는지 체크한다.
- · 조회 버튼과 마지막 인풋 박스 사이의 간격이 일정한지 체크한다.
팝업 스타일 통일
- · 팝업 스타일을 표준 가이드에 따라 팝업 타이틀, 컨텐츠, 버튼 영역으로 일관성 있게 구성하는 것을 권장
구성 예시 이미지

팝업 스타일
- · 팝업 상단 헤더 부분의 타이틀과 닫기 버튼의 유무를 체크한다.
- · 컨텐츠 영역의 여백이 동일하게 제작되었는지 체크한다.
- · 버튼의 정렬이 가운데 정렬인지 체크한다.
- · 각 팝업에 따라 알맞은 기능 및 형태의 버튼을 제공하는지 체크한다.
안내 대화상자 스타일 통일
- · 안내 대화상자는 브라우저의 Alert 대화상자를 사용하는 것을 원칙으로 함
- · 직접 제작할 경우 동일한 시스템 안에서 안내 대화상자 스타일을 일관성 있게 통일 권장
구성 예시 이미지

안내 대화상자 스타일 통일 검토 사항
- · 대화상자에 사용된 버튼 및 아이콘의 스타일이 일관성 있는지 체크한다.
- · 대화상자에 사용된 어투가 일관성 있는지 체크한다.
외래어 표기
- · 한글 표기를 기본으로 하며 외래어 고유명사의 경우 한글로 표기. (의미 전달상 필요한 경우에만 외래어 사용)
구성 예시 이미지

외래어 표기 검토 사항
- · 외래어 표기의 경우 의미 전달 상 필요한 경우인지 체크한다.
날짜 표기
- · 시스템의 분산된 표기방법을 일관성 있도록 YYYY.MM.DD로 통일하여 사용하는 것을 권장
구성 예시 이미지

날짜 표기 검토 사항
- · 가이드에 맞게 표기되어있는지 체크한다.
- · 하나의 시스템 안에서 여러 스타일로 혼용되고 있진 않은지 체크한다.
화면명 통일
- · 화면명 및 탭명의 경우 동일한 명칭 사용을 권장
구성 예시 이미지

화면명 통일 검토 사항
- · 화면명과 탭명의 명칭이 동일하게 사용되었는지 체크한다.
불필요 여백
- · 불필요한 여백이 발생되지 않도록 수정 권장
구성 예시 이미지

불필요 여백 검토 사항
- · 테이블, 조회 영역 등 모두 컨텐츠 내에서 불필요한 여백이 있진 않은지 체크한다.
- · 불필요한 여백이 발생했을 경우 컨텐츠 간의 간격, 위치 등을 조절하여 수정한다.
데이터가 없는 경우
- · 데이터가 없거나 조회된 결과가 없는 경우 공백이 아닌 이해를 도울 수 있는 안내문구 표기를 권장
구성 예시 이미지

안내문구 표기 검토 사항
- · 데이터가 없거나 조회된 결과가 없는 경우 안내문구를 표기하고 있는지 체크한다.
컨텐츠 겹침
- · 컨텐츠 간 겹치는 현상이 발생하지 않도록 수정 권장
구성 예시 이미지

컨텐츠 겹침 검토 사항
- · 컨텐츠 간 겹치는 현상이 발생하진 않는지 체크한다.
- · 겹치는 현상이 발생할 경우 위치 및 간격 등을 조절하여 겹치는 현상이 없도록 수정한다.