오버플로우 패턴은 정해진 영역 이상으로 텍스트나 데이터가 노출되는 경우를 처리하기 위한 패턴입니다.
Truncate
잘라내기(truncate)는 일반적으로 컨테이너 크기를 초과하는 텍스트나 링크를 처리할 때 사용합니다. 잘린 부분은 줄임표(ellipsis)로 표시하고 툴팁 형식을 통해 잘린 부분을 포함한 전체 문자를 표시합니다.
버튼을 제외한 모든 구성요소에서 사용할 수 있습니다.
Pattern
짧은 문자열은 정해진 이상의 문자가 표시되는 경우에는 줄임표로 잘라내고 마우스 오버 시 툴팁을 통해 전체 문자를 표시합니다. 잘라내기는 문자 단위(break-all 속성)로 합니다.
긴 문자열의 경우는 잘라내기를 한 후에 줄임표를 표시하지만, 툴팁은 사용하지 않습니다.
파일 다운로드 등 파일명이나 링크를 줄여서 표시해야 하는 경우에는 확장자 앞에서 잘라내기를 합니다.
Related
Show more
내용이 많아 화면에 많은 영역을 차지하는 경우에는 일부 내용만 표시하고 나머지는 ‘더 보기’를 통해 볼 수 있도록 사용합니다.
Pattern
더 보기 패턴은 카드형 등 상대적으로 좁은 영역을 통해 정보를 제공할 때 사용합니다.
•
‘더 보기’는 버튼 클릭 등의 사용자의 트리거를 통해 작동합니다.
•
명확하게 기능을 인지할 수 있도록 매우 보편적인 아이콘을 사용하거나 텍스트 레이블을 표시해야 합니다.
•
‘더 보기’를 사용 할 때는 반드시 ‘표시 안함(show less)’ 기능도 함께 제공해야 합니다.
Related
Show other
한 항목에 복수의 데이터가 존재하는 경우, 대표 데이터 1건만 표시하는 패턴입니다. 대표 데이터를 제외한 나머지 데이터는 몇 건이 존재하는지 숫자로 표시합니다.
Pattern
복수의 데이터 건이 존재하는 경우, 대표 데이터 1건만 표시하고 나머지는 건수로 표시합니다.
•
나머지 데이터 건수를 표시할 때는 대표 데이터를 제외하고 카운트 합니다.
•
나머지 데이터 건수는 상호작용을 통해 추가 정보를 제공하고 있다는 행위지원성을 나타낼 수 있도록 버튼 또는 링크 형태로 표시합니다.
•
건수에 마우스 오버 시, 툴팁 형태로 나머지 데이터를 표시합니다.
•
나머지 데이터 건이 6건 이상일 경우에는 툴팁 내 스크롤을 표시하여 사용자의 스크롤을 유도합니다.
Related
