Workshop 화면 구성 선택

모듈을 나누어 삽입할 때

하나의 모듈에 독립적인 페이지와 기능이 많아지면 다른 Workshop 모듈을 삽입하여 로직을 분리하고 각 모듈의 변수 수를 줄일 수 있습니다. 여러 페이지에서 같은 인터페이스를 반복한다면 재사용할 모듈로 분리하여 유지보수할 범위를 줄입니다.

중앙 대화상자는 확인, 경고와 액션 입력처럼 사용자가 현재 결정에 집중해야 하는 작업에 적합합니다. Drawer는 구성 요소의 상세 내용, 설정과 보조 액션처럼 원래 화면을 보면서 참고할 정보를 담는 데 적합합니다.

배경이 보이는 것과 배경에서 상호작용할 수 있는 것은 다릅니다. 대화상자는 뒤의 콘텐츠 스크롤과 조작을 막습니다. 긴 본문을 참고하면서 입력해야 한다면 레이아웃 원칙의 안내처럼 본문 옆에 입력을 배치하거나 필요한 내용을 차단되지 않는 영역에 함께 제공합니다.

Object Table은 여러 속성을 열로 표시하여 비교, 정렬과 일괄 작업을 수행할 때 사용합니다. Object List는 속성이 적은 항목을 선형으로 훑거나 한 항목씩 처리할 때 적합합니다. 표와 목록의 배치를 함께 적용합니다.

접을 수 있는 섹션은 사용자가 내용을 열거나 닫아도 그 섹션의 위치를 알 수 있게 합니다. 보조 정보가 있는 옆 패널과 필터에 적합하며 사용자 토글이나 변수 기반 로직으로 가시성을 정할 수 있습니다. 접는 섹션을 여러 겹으로 쌓는 구성은 피합니다.

버튼으로 여는 숨긴 섹션은 특정 액션이나 사용 상황에서만 필요한 내용을 표시할 때 사용합니다. 화면이 복잡하거나 공간이 좁고 이미 접을 수 있는 섹션을 쓰는 경우에도 검토합니다. 모바일 앱에서는 좁은 화면과 터치 흐름에 맞춰 별도로 배치합니다.

탐색이나 주요 지표처럼 내용이 필수이거나 자주 사용되고, 패널 구성이 단순하며, 주로 넓은 화면에서 사용할 때 기본 표시를 고려합니다.

내용이 선택적이거나 보조 정보이고 작은 화면 사용이 많다면 접거나 숨기는 편이 적합합니다. 페이지 overlay를 사용할 때도 일시적인 작업과 분석 화면을 구분하여 사용자가 동시에 참고해야 하는 정보를 가리지 않도록 합니다.