Workshop 애플리케이션 디자인 원칙

앱의 시각적 계층은 사용자가 어디에서 판단하고 행동해야 하는지 보여 줍니다. 구성 요소의 의미를 분명히 하고 여러 모듈의 배치와 표현을 맞추면 사용자가 화면이 바뀔 때마다 조작법을 다시 익힐 필요가 줄어듭니다.

정보와 조작의 밀도

한 화면에 과도한 작업, 알림과 선택지를 넣지 않습니다. 상위 탐색의 주요 액션은 다섯 개 이하를 권장합니다. 여백은 화면의 30~40% 정도, 한 화면에 보이는 버튼, 패널과 위젯 등의 구성 요소는 열 개 이하를 출발점으로 검토합니다. 이 숫자는 디자인 권장치이며 Workshop의 강제 자원 한도가 아닙니다.

읽는 순서에 맞는 레이아웃

화면 위와 왼쪽에서 시작하여 가로로 읽고 왼쪽을 따라 내려가는 F 형태의 탐색 순서를 고려합니다. 설정 영역과 실제 콘텐츠 영역을 구분합니다.

격자형은 정보를 왼쪽에서 오른쪽으로 이어 볼 때 사용합니다.

열 중심 배치는 각 패널의 위쪽에 주요 탐색을 두고 아래로 정보를 이어 갑니다.

행과 열을 조합할 때는 왼쪽에 필터를 두고 오른쪽으로 콘텐츠가 이어지게 할 수 있습니다. Metric Card는 중요한 전체 수치를 빠르게 확인하는 데 사용합니다.

새 위젯을 추가한 뒤 Set layout으로 배치를 정합니다. 기존 섹션은 canvas에서 선택하고 오른쪽 패널의 Layout에서 수정합니다.

제목과 설명

페이지 제목은 앱의 전체 목적을 나타내는 가장 큰 제목입니다. 섹션 제목은 그 아래 내용을 묶고, Description은 필요한 경우 섹션의 맥락을 보완합니다. 처음 사용하는 사람도 내용을 이해할 수 있도록 간결하고 구체적으로 씁니다.

Section 패널의 Section header를 켜면 제목을 추가할 수 있습니다.

간격과 정렬

대부분의 화면에서는 Compact padding을 사용할 수 있습니다. Compact는 자식 요소 주위에 16px의 여백을 둡니다. Custom에서는 카드 높이 또는 너비 비율을 80%로 정하고 간격을 16px로 두는 조합도 사용할 수 있습니다. 카드 크기 비율과 각 방향의 padding 값은 별도 설정입니다.

서로 다른 콘텐츠 묶음은 container로 구분하고, 한 섹션 안의 관련 내용은 divider로 나눕니다. 그룹 사이의 여백을 함께 사용하여 구획을 알아볼 수 있게 합니다.

가상 Claims 화면에서는 padding과 배경색으로 처리 영역을 강조하고 Group 영역에서 선택할 Object List를 구분합니다.

테두리와 높이감

중요한 영역에는 바깥쪽 그림자로 높이감을 주고, 덜 강조할 영역에는 안쪽 그림자를 사용할 수 있습니다. 배경의 명도도 구분에 활용하여 중요한 콘텐츠는 밝게, 필터나 접는 패널 같은 보조 영역은 어둡게 둘 수 있습니다.

한 페이지에서 강한 그림자와 음영을 반복하지 않습니다. 사용자가 행동하는 주요 콘텐츠나 기본 대화상자 한 곳에 바깥쪽 그림자를 적용하면 강조 대상을 구분하기 쉽습니다.

여러 모듈의 일관성

진입 페이지에서는 사용할 모듈의 개요와 사용자 정의 thumbnail을 제공하고 필요한 화면으로 이동하게 합니다. 기본 header는 로고와 전역 설정을 같은 위치에 유지하며 보통 로고는 왼쪽 위, 설정은 오른쪽 위에 둡니다.

자주 쓰는 구성 요소도 같은 위치와 모양을 사용합니다. 예를 들어 필터는 왼쪽에 두고 탭, Metric Card, 제목과 버튼의 스타일을 모듈 간에 맞춥니다.

스크롤

가능하면 가로 스크롤을 줄입니다. Object Table의 Fit columns horizontally로 열을 수평 공간에 맞출 수 있습니다. 페이지 전체의 가로 탐색이 필요한 경우에는 그 목적을 고려합니다.

탐색 막대와 탭은 기본 header에 두고 콘텐츠 섹션만 스크롤하게 하면 이동 수단이 계속 보입니다.

스크롤하는 섹션에서는 버튼 같은 터치 대상을 최소 30px로 구성하는 것을 권장합니다.

Overlay

Overlay는 설문이나 일시적인 보조 작업에 사용합니다. 여러 정보 층을 동시에 살펴봐야 하는 분석 화면에는 적합하지 않을 수 있습니다. 객체를 선택한 뒤 하나 또는 여러 액션을 수행하는 순서도 고려합니다.

대화상자는 배경의 스크롤과 상호작용을 막습니다. 긴 텍스트를 참고하면서 입력해야 한다면 입력란을 콘텐츠 옆에 두거나 필요한 본문을 차단되지 않는 영역에 다시 제공합니다.

글꼴

Settings의 Module Appearance에서 Typography를 정합니다.

Custom typeface가 기기에 없으면 Foundry 기본 글꼴로 돌아갑니다. 이 Workshop 설정에는 사용자 정의 글꼴 파일을 업로드하거나 보관하는 기능이 없습니다. 사용자마다 설치 글꼴이 다를 때의 차이를 줄이려면 System fonts를 우선 검토합니다.

화면 점검

화면을 흐리게 보았을 때도 주요 행동 영역이 드러나는지 살펴봅니다. 실제 사용자가 각 섹션에서 이루려는 업무와 배치가 맞는지 확인하고, 항상 보여 줄 필요가 없는 요소는 필요한 시점에만 표시합니다.

표, 버튼과 검색의 구체적인 배치는 구성 요소별 지침, 모듈 분리와 패널 선택은 화면 구성 선택에 설명합니다.