👾표준화 검토 체크리스트

  •        

    그리드 버튼 정렬

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

    그리드 버튼 정렬 검토 사항

    • · 버튼의 정렬 상태가 가이드에 맞춰 정렬되어 있는지 체크한다.
    • · 구분선을 통해 같은 역할끼리 분류되어 있는지 체크한다.

    버튼 간격

    • · 버튼과 버튼 간의 간격이 겹치지 않도록 일정한 간격으로 수정 권장
    구성 예시 이미지
    as-is_to-be

    버튼 간격 검토 사항

    • · 버튼 간의 간격이 일정한지 체크한다.
    • · 각 버튼의 역할에 따라 간격을 통해 구분되어 지는지 체크한다. (필요시 구분선 사용)

    버튼 스타일 통일

    • 버튼의 스타일을 일관성 있도록 통일 권장(체크박스/액션버튼 등)
    구성 예시 이미지
    btn_통일

    버튼 스타일 통일 검토 사항

    • · 버튼 스타일이 통일되어 있는지 체크한다.
    • · 버튼의 형태가 각 기능 및 상황별로 알맞게 디자인 되어있는지 체크한다.
    내용 추가 예정
  • 데이터 정렬

    • · 좌측 정렬 데이터 : 긴 서술형 정보로 구성된 문자/숫자
    • (예) 주소, 특이사항, 비고, TASK명 등

    • · 우측 정렬 데이터 : 수량/금액을 표현 하는 숫자 *자릿수 구분(,)표기 필수
    • (예) 순서(Seq), 출강목표번호, 날짜, 성명,규격약호, 행선, 설비구분 등

    • · 중앙 정렬 데이터 : 길이가 동일한 문자/숫자 또는 위 경우에 해당되지 않는 경우
    • (예) 순서(Seq), 출강목표번호, 날짜, 성명,규격약호, 행선, 설비구분 등

    구성 예시 이미지
    데이터 정렬

    데이터 정렬 검토 사항

    • · 데이터가 각 성격에 따라 좌측/우측/중앙으로 맞게 정렬되어 있는지 체크한다.

    데이터 잘림

    • · 항목값의 데이터가 잘리지 않도록 아래와 같이 말줄임 표기 또는 항목 길이 수정 권장
    구성 예시 이미지
    데이터 잘림

    데이터 잘림 검토 사항

    • · 테이블 내 데이터가 잘리지 않고 모두 표기되는지 체크한다.
    • · 데이터가 잘리는 경우 말줄임 표기 또는 테이블 길이 수정 등 상황에 맞는 수정 방향을 제시한다.

    번호 표기 통일

    • · 같은 의미를 가진 번호, Seq, No. 는 모두 '번호'로 통일하는 것을 권장
    구성 예시 이미지
    번호 표기

    번호 표기 통일 검토 사항

    • · 같은 의미를 가진 타이틀의 경우 표기법을 통일하고 있는지 체크한다.
  •        

    조회영역 정렬

    • · 조회 영역 내 항목명은 좌측 정렬을 권장
    구성 예시 이미지
    조회영역 정렬

    조회영역 정렬 검토  사항

    • · 조회 영역 내 항목명이 좌측 정렬 상태인지 체크한다.
    • · 조회 영역 내 인풋 박스(입력창, 셀렉트 박스 등)끼리의 정렬 상태를 체크한다.

    조회 버튼 위치 및 크기

    • · 조회 버튼은 마지막 인풋 박스(입력창, 셀렉트박스 등) 뒤에 일관성 있는 위치를 권장
    구성 예시 이미지
    조회버튼 위치 및 크기

    조회 버튼 간격 위치 크기 검토 사항

    • · 조회 버튼의 위치가 마지막 인풋 박스 뒤에 위치하는지 체크한다.
    • · 조회 버튼의 크기가 가이드에 맞게 적용되어 있는지 체크한다.

    조회 버튼 간격

    • · 조회 버튼은 마지막 인풋 박스(입력창, 셀렉트박스 등) 뒤에 일관성 있는 위치를 권장
    구성 예시 이미지
    조회버튼 간격

    조회 버튼 간격 검토 사항

    • · 조회 버튼의 위치가 마지막 인풋 박스 뒤에 위치하는지 체크한다.
    • · 조회 버튼과 마지막 인풋 박스 사이의 간격이 일정한지 체크한다.
  • 팝업 스타일 통일

    • · 팝업 스타일을 표준 가이드에 따라 팝업 타이틀, 컨텐츠, 버튼 영역으로 일관성 있게 구성하는 것을 권장
    구성 예시 이미지
    팝업 스타일

    팝업 스타일

    • · 팝업 상단 헤더 부분의 타이틀과 닫기 버튼의 유무를 체크한다.
    • · 컨텐츠 영역의 여백이 동일하게 제작되었는지 체크한다.
    • · 버튼의 정렬이 가운데 정렬인지 체크한다.
    • · 각 팝업에 따라 알맞은 기능 및 형태의 버튼을 제공하는지 체크한다.

    안내 대화상자 스타일 통일

    • · 안내 대화상자는 브라우저의 Alert 대화상자를 사용하는 것을 원칙으로 함
    • · 직접 제작할 경우 동일한 시스템 안에서 안내 대화상자 스타일을 일관성 있게 통일 권장
    구성 예시 이미지
    안내 대화상자 스타일

    안내 대화상자 스타일 통일 검토 사항

    • · 대화상자에 사용된 버튼 및 아이콘의 스타일이 일관성 있는지 체크한다.
    • · 대화상자에 사용된 어투가 일관성 있는지 체크한다.
  • 외래어 표기

    • · 한글 표기를 기본으로 하며 외래어 고유명사의 경우 한글로 표기. (의미 전달상 필요한 경우에만 외래어 사용)
    구성 예시 이미지
    외래어 표기

    외래어 표기 검토 사항

    • · 외래어 표기의 경우 의미 전달 상 필요한 경우인지 체크한다.
    •                                        

    날짜 표기

    • · 시스템의 분산된 표기방법을 일관성 있도록 YYYY.MM.DD로 통일하여 사용하는 것을 권장
    구성 예시 이미지
    날짜 표기

    날짜 표기 검토 사항

    • · 가이드에 맞게 표기되어있는지 체크한다.
    • · 하나의 시스템 안에서 여러 스타일로 혼용되고 있진 않은지 체크한다.

    화면명 통일

    • · 화면명 및 탭명의 경우 동일한 명칭 사용을 권장
    구성 예시 이미지
    화면명 통일

    화면명 통일 검토 사항

    • · 화면명과 탭명의 명칭이 동일하게 사용되었는지 체크한다.
  • 내용 추가 예정
    내용 추가 예정
    내용 추가 예정
  • 불필요 여백

    • · 불필요한 여백이 발생되지 않도록 수정 권장
    구성 예시 이미지
    불필요 여백

    불필요 여백 검토 사항

    • · 테이블, 조회 영역 등 모두 컨텐츠 내에서 불필요한 여백이 있진 않은지 체크한다.
    • · 불필요한 여백이 발생했을 경우 컨텐츠 간의 간격, 위치 등을 조절하여 수정한다.

    데이터가 없는 경우

    • · 데이터가 없거나 조회된 결과가 없는 경우 공백이 아닌 이해를 도울 수 있는 안내문구 표기를 권장
    구성 예시 이미지
    데이터가 없는 경우

    안내문구 표기 검토 사항

    • · 데이터가 없거나 조회된 결과가 없는 경우 안내문구를 표기하고 있는지 체크한다.

    컨텐츠 겹침

    • · 컨텐츠 간 겹치는 현상이 발생하지 않도록 수정 권장
    구성 예시 이미지
    컨텐츠 겹침

    컨텐츠 겹침 검토 사항

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