컴포넌트 사용과 동작

컴포넌트 사용과 동작 (Component usage and behavior)

PatternFly로 설계하다 보면, 비슷한 상황에서 여러 컴포넌트를 쓸 수 있는 경우가 있죠. 이 가이드라인이 바로 그런 상황에서 어떤 컴포넌트를 골라야 하는지, 그리고 더 자세한 사용 가이드는 어디서 찾아야 하는지 안내해 드려요.

출처: 문서

본문

구조화된 데이터 표시하기 (Displaying structured data)

구조화된 데이터(structured data)에는 데이터베이스나 그와 유사한 규칙적인 데이터 구조에 저장된 모든 정보가 포함돼요. 대부분의 경우 구조화된 데이터는 목록(list)이나 테이블(table)로 표시되며, 행(row)이 데이터베이스의 레코드에 해당해요. 이런 유형의 콘텐츠를 표시할 때는 **데이터 목록(data list)**과 테이블(table) 컴포넌트를 사용하는 걸 권장해요.

테이블(Table)은 행과 열로 이루어진 표준 표 구조로 만들어져요.
데이터 목록(Data list)은 행 안에서 유효한 HTML 레이아웃을 모두 지원하므로 더 유연한 포맷팅이 가능해요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
컬럼 헤딩이 있는 그리드로 데이터를 표시하고 싶다.	Table
데이터가 그리드에 잘 맞지 않거나, 행 안에 여러 줄의 데이터를 넣고 싶다.	Data list
이미지나 차트 같은 비텍스트 정보를 표시하고 싶다.	Data list 또는 Table
모든 행의 형식이 같지 않다.	Data list

참고: 테이블은 셀 안에 그래픽을 지원하지만, 이 방법은 작은 그래픽에만 사용하는 것을 권장해요.

페이지에서 상황에 맞는 도움말 제공하기 (Providing contextual help on a page)

상황별 도움말(contextual help)에는 사용자가 작업을 완료하는 데 도움이 되는 추가 정보로 안내하기 위한 화면 요소가 모두 포함돼요. 이런 콘텐츠를 표시할 때는 tooltip, popover, hint 컴포넌트를 사용하는 걸 권장해요.

툴팁(Tooltip)은 사용자가 요소 위에 마우스를 올리면(hover) 표시돼요.
팝오버(Popover)는 호버 또는 클릭 시 표시될 수 있고, 어떤 HTML 콘텐츠든 포함할 수 있으며, 유지(persistent)되는 특성이 있어요.
힌트(Hint)는 페이지의 다른 콘텐츠와 함께 인라인으로 나타나는 정적 요소예요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
새롭거나 익숙하지 않은 UI 요소에 대해 '요청 시에만(on-demand)' 표시되는 간단한 텍스트 문자열로 짧은(1-2줄 이내) 설명을 제공하고 싶다.	Tooltip
메시지 본문에 서식이 있는 텍스트나 상호작용 요소를 포함하고 싶다.	Hint 또는 Popover
사용자가 닫기 전까지 정보가 유지되길 원한다.	Hint 또는 Popover
사용자가 요소에 탭하면 스크린 리더가 정보를 읽어주길 원한다.	Hint, Popover, 또는 Tooltip
모든 사용자에게 꼭 필요하거나 관련이 없는 추가 정보를 보여주고 싶다.	Hint 또는 Popover

참고: 기본적으로 팝오버는 사용자가 요소를 클릭할 때만 트리거돼요. 따라서 스크린 리더는 인터페이스를 탭으로 이동할 때 팝오버 텍스트를 읽어주지 않아요. 팝오버가 호버 시 트리거되면(선택 동작) 툴팁처럼 동작하며, 키보드 사용자가 트리거 요소에 탭하면 그 콘텐츠가 읽혀요.

참고: 힌트는 고급 사용자에게 전하는 정보(예: '프로 팁')를 전달하는 데 사용할 수 있어요. 다만 힌트는 페이지에 정적 콘텐츠를 추가하므로, 이 정보를 항상 표시하는 게 중요한지 고려해 봐야 해요.

점진적 공개 (Progressive disclosure)

점진적 공개(progressive disclosure)는 UI를 단순화하기 위해 필요에 따라 정보를 보여주고 숨기는 방식이에요. 콘텐츠를 점진적으로 공개할 때는 accordion, expandable section, expandable field group을 사용하는 걸 권장해요.

아코디언(Accordion)은 콘텐츠를 쌓을 수 있는(expandable) 컨테이너에 배치해서, 프레젠테이션을 단순화하고 스크롤 필요성을 줄이기 위해 콘텐츠를 숨길 수 있어요.
확장 가능한 섹션(Expandable section)은 단일 콘텐츠 블록이나 설정을 표시/숨기기 링크 뒤에 숨길 수 있게 해줘요.
확장 가능한 필드 그룹(Expandable field group)은 폼 요소를 확장 가능한 컨테이너로 묶을 수 있게 해줘요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
액션, 링크 또는 기타 데이터 목록을 확장 가능한 그룹으로 묶고 싶다.	Accordion
폼 안에서 고급 또는 자주 쓰이지 않는 옵션을 숨기고 싶다.	Expandable section 또는 Field group
긴 스크롤 페이지에서 정보 덩어리를 사용자가 보거나 숨길 수 있게 하고 싶다.	Expandable section

폼 안에서 데이터 입력하기 (Inputting data within forms)

데이터 입력 컨트롤을 사용하면 사용자가 폼에 정보를 입력할 수 있어요. 입력은 제한(bound)되거나 제한되지 않을 수 있어요. 제한된 입력 컨트롤은 slider나 number input처럼 정의된 범위 안에서만 데이터를 입력하게 해주고, 제한되지 않은 컨트롤은 text input이나 text area처럼 제약을 강제하지 않아요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
키보드로 텍스트를 입력하고 싶다. 가능한 값은 영숫자, 무제한, 또는 컨텍스트에 따라 달라진다.	Text area 또는 Text input
숫자 데이터 입력을 지정된 범위로 제한하고 싶다.	Number input, Slider, Text input, 또는 Text area
키보드보다 터치나 마우스를 사용한 직접 조작에 맞게 숫자 데이터 입력을 최적화하고 싶다.	Number input 또는 Slider
사용자가 가능한 값의 범위에서 숫자 입력이 어디에 해당하는지 시각화하는 게 유용하다.	Slider

참고: 항상 한 줄로 제한된다면 text input을 사용하고, 여러 줄 입력에는 text area 컴포넌트를 사용하세요.

참고: 이 사용 사례에는 표준 text input을 사용해 입력된 값을 검증할 수도 있지만, number input이나 slider를 쓰는 것이 사용자가 입력할 수 있는 값을 제한하는 더 직접적인 방법이에요.

폼에서 옵션 선택하기 (Selecting between options on a form)

사용자가 폼 옵션을 선택할 수 있게 하는 몇 가지 컴포넌트가 있어요. 제시되는 옵션의 특성에 따라 checkbox, radio, switch 컴포넌트를 사용하는 걸 권장해요.

체크박스(Checkbox)는 옵션 목록에서 하나 이상의 항목을 선택할 수 있게 해줘요.
라디오 버튼(Radio button)은 상호 배타적인 옵션 집합 중에서 선택할 수 있게 해줘요.
스위치(Switch)는 이진 설정이나 객체의 상태(예: 켜짐/꺼짐, 활성/비활성)를 나타내요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
사용자가 항목 목록에서 하나 이상의 항목을 선택하려 한다.	Checkbox 또는 Switch
사용자가 상호 배타적인 옵션 집합에서 선택하려 한다.	Radio
사용자가 옵션이나 기능을 활성화하려 한다.	Checkbox, Radio, 또는 Switch

참고: 스위치는 체크박스보다 더 큰 터치 타깃을 제공해서 모바일 경험을 개선하므로 체크박스 대신 사용되기도 해요.

참고: 체크박스는 켜기/끄기 설정을 간결하게 표시할 수 있어서 소프트웨어 기능을 활성화/비활성화할 때 자주 사용돼요.

참고: on/off 또는 enabled/disabled 같은 옵션을 선택하도록 라디오 버튼 2개를 사용할 수도 있지만, 이 방법은 더 많은 공간을 차지하며 두 라벨이 붙은 옵션을 동시에 보이게 하는 게 중요할 때만 권장해요.

진행 상황 표시하기 (Displaying progress)

몇 초 이상 걸리는 작업에는 진행 상황을 표시하는 게 중요해요. progress 컴포넌트로 프로세스나 작업의 완료 백분율을 사용자에게 보여주세요. 사용자가 작업 완료를 기다리는 동안 활동을 간단히 나타내려면 spinner와 skeleton 컴포넌트를 사용하세요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
프로세스 완료를 기다리는데 완료까지 남은 시간을 알 수 없다.	Spinner
프로세스 완료를 기다리는데 완료까지 남은 시간을 알 수 있다.	Progress 또는 Spinner
단계별 작업을 진행하면서 프로세스에서 어디쯤 있는지 반영하고 싶다.	Progress
페이지 로딩을 기다리고 있다.	Progress, Skeleton, 또는 Spinner

참고: 완료까지 걸리는 시간이나 작업의 완료 비율을 추정할 수 있다면 progress 컴포넌트가 선호되는 권장 사항이에요.

참고: 페이지 로딩 중에는 보통 progress bar를 사용하지 않지만, 완료까지의 시간에 대한 정보를 더 제공하고 싶다면 skeleton 컴포넌트와 함께 사용할 수 있어요.

참고: 데이터의 세부 사항을 알 수 없을 때 페이지 로딩에 대한 피드백을 제공하기 위해 spinners를 사용할 수 있어요.

객체 세부 정보를 상황에 맞게 표시하기 (Displaying object details in context)

목록이나 테이블 같은 요약 보기에 나열된 객체에 대한 더 많은 세부 정보를 표시해야 할 때가 자주 있어요. 이는 새 페이지로 드릴다운(drill-down)하거나 같은 페이지에 상황별 세부 정보를 표시하는 방식으로 처리할 수 있어요. 이런 접근에는 data list, drawer, table, popover 컴포넌트를 사용하는 걸 권장해요.

데이터 목록과 테이블은 목록이나 테이블 안에서 바로 객체 세부 정보를 표시하는 확장 가능한 행을 지원해요.
드로어(Drawer)는 나란히 배치된(primary-detail) 뷰를 만드는 데 사용할 수 있어요.
팝오버(Popover)는 목록이나 테이블에서 객체에 대한 세부 정보를 표시하는 데 사용할 수 있어요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
비교를 위해 여러 객체의 세부 정보를 동시에 보고 싶다.	Data list 또는 Expandable table row
상세 데이터를 가로 형식으로 표시하는 게 가장 좋다.	Data list, Drawer, Expandable table row, 또는 Popover
상세 데이터를 세로 형식으로 표시하는 게 가장 좋다.	Drawer 또는 Popover
보여줄 상세 데이터가 소량뿐이다.	Data list, Drawer, Expandable table row, 또는 Popover
세부 정보를 표시하면서 다른 정보를 가리지 않으려 한다.	Data list, Drawer, 또는 Expandable table row

참고: 드로어는 부모 컨테이너의 왼쪽, 오른쪽 또는 아래쪽 가장자리에 연결할 수 있어요. 가로 데이터를 제시하려면 하단/가로 드로어를 사용해서 위-아래 primary-detail 뷰를 만들어요.

참고: 행 확장과 드로어는 어느 양의 정보든 수용할 수 있어요. 행 확장이나 드로어 안에 소량의 데이터를 표시하면 부모 컨테이너의 전체 너비나 높이를 차지하므로 공간이 낭비될 수 있어요. 팝오버는 콘텐츠의 크기와 모양에 맞게 조정돼요.

참고: 인라인(inline) 드로어와 오버레이(overlay) 드로어를 모두 사용할 수 있어요. 페이지의 콘텐츠를 가리고 싶지 않다면 인라인 드로어 변형을 권장해요.

사용자가 메뉴에서 항목을 선택할 수 있게 하려면 select, options, dropdown menu 컴포넌트를 사용하는 걸 권장해요.

셀렉트 메뉴(Select menu)는 목록에서 하나 이상의 값을 선택할 수 있게 해줘요.
옵션 메뉴(Options menu)는 셀렉트와 비슷하지만, 사용자가 선택적 설정에서 선택을 할 때 더 적합해요.
드롭다운 메뉴(Dropdown menu)는 가능한 액션 목록을 노출할 수 있게 해줘요.

어떤 컴포넌트를 쓸지는 사용 사례에 따라 달라져요:

사용 사례	권장 컴포넌트
목록에서 값 하나 또는 여러 값을 선택하고 싶다.	Select
목록에서 필터 용어를 선택하고 싶다.	Select
메뉴가 닫혔을 때 선택한 값을 보이게 하고 싶다.	Select
하나 이상의 목록에서 옵션을 선택하고 싶다(예: 정렬 옵션).	Options menu
제한된 공간에서 명령이나 액션 목록을 노출하고 싶다.	Dropdown

컴포넌트 사용과 동작