Skip to content
Gallery
화면별
화면별 참고사항 정리
음음
Share
Explore
화면별 참고사항 정리

icon picker
[공통] 목록


화면 구성

페이지 경로
화면명
⁠
검색 건 수
검색 / 필터 영역
테이블
페이지네이션
⁠

통합 검색 타입
⁠
image.png
⁠
⁠
컬럼별 검색
⁠
image.png
⁠
⁠

페이지 경로

현재 화면에 접근하기 위한 메뉴명 전체 표기
ex. 홈 > 스토리지 > 볼륨 메인 > 커뮤니티 > 1:1 문의 > 등록 등

화면명

좌측 상단에 현재 화면명을 강조하여 표기
ex. 볼륨 1:1 문의 등록

건 수

해당 화면에서 노출되는 상세 페이지 개수 노출
검색 또는 필터 적용 시 노출되는 건 수 값이 변경되어야 함
1,000건 존재 시 자리수 표기 정책 정의 필요

노출 건 수

페이지 당 노출되는 최대 개수 제한 노출
10건 / 30건 / 50건 / 100건 등등으로 옵션 제공

검색

공통
대소문자 구분 없어야 함
검색 동작 결정
문자열 입력될 때마다 검색을 할 것인지
Enter 또는 검색 버튼 클릭해야만 검색할 것인지(이 케이스는 검색 버튼 필요)
통합 검색
모든 컬럼에 대해 검색 가능한지
검색 목록에서 제공되는 범위에 대해서만 가능한지
결정 필요
컬럼별 검색
필터 영역 / 검색어 입력 영역으로 구분
필터 영역에는 전체가 기본적으로 선택되어 있어야 함.
전체 선택 시 검색 대상 설정
전체 검색 시 모든 컬럼에 대해 검색을 할 것인지
필터에 존재하는 컬럼만 검색될 것인지

테이블

데이터가 표시되는 목록
검색 사항없을 떼 컬럼 헤더 및 데이터가 없습니다. 노출될 수 있도록 적용
고려사항
테이블 사이즈 : 1920 사이즈에 맞게 조정, 이 이하로 된다면 스크롤 발생하도록
체크박스
일괄 삭제 및 수정이 가능한 경우 체크박스 컬럼 및 버튼 영역 추가 제공되어야 함
페이지네이션 2개 이상 포함되어 있을 경우 삭제 기능 정의
현재 보고 있는 페이지만 삭제되는지
다른 페이지도 삭제되는지
컬럼명
목록 / 등록 / 수정 / 상세 화면에서 사용되는 용어가 동일해야 함
필수값으로 입력하는 값 및 정보 조회에서 중요한 값이 컬럼 항목으로 노출되어야 함
컬럼값
테이블 width size로 인해 텍스트가 일부만 노출될 경우 툴팁 등으로 전문 노출
다른 화면으로 이동 가능한 컬럼값일 경우 밑줄 등으로 추가 이동 가능 표시
값이 비었을 때 표기 방법 정의 필요
- 표기할 지
빈 칸 표기할 지
행 :
클릭 시 상세 화면으로 이동됨을 마우스 커서로 표시
행 하이라이트 적용
다중 선택일 경우 선택된 상태와 커서온 하이라이트가 서로 달라야 함
데이터 노출 순서 정해야 함
보통 데이터 등록 최신순
예외
체크박스 : 체크박스 체크 상태가 페이지네이션 이동해도 유지가 되어야 함
화면 자체가 이동되었을 때는 풀리도록 적용
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.