Result Section
데이터 로딩 결과, 사용자의 액션 완료 여부 등 사용자에 액션에 대한 결과를 제공하는 템플릿입니다. 주로 전체 화면이나 특정 영역을 차지하여 다음 액션을 유도하거나 현재 상황을 안내하는 역할을 합니다.
Anatomy
Result Section은 시각적 이해를 돕는 Asset과 핵심 메시지를 담은 Title을 중심으로, 상세 정보를 위한 Description과 다음 행동을 유도하는 Button을 선택적으로 조합하여 구성합니다.
Anatomy의 모든 구성 요소는 화면 구현 방식에 따라 선택적으로 표시할 수 있습니다.
배경색은 가이드에서 시각적 구분을 위해 추가된 것이며, 컴포넌트 자체에는 배경색이 지정되어 있지 않습니다.
Properties
Size
Result Section의 타이틀과 설명 텍스트는 두 가지 크기인 Large, Medium으로 제공됩니다. 컴포넌트가 사용되는 영역의 크기에 맞춰 아래와 같이 적절한 크기를 선택해야 합니다.
| Size | 사용 상황 |
|---|---|
| Large | 전체 화면을 차지하는 상태를 표현할 때 사용합니다. |
| Medium | 카드나 섹션 등 페이지의 일부 영역에서 상태를 표현할 때 주로 사용합니다. |
Buttons
Result Section 컴포넌트 영역 내에 버튼을 제공합니다. 현재 상태를 해결하거나 보조적인 정보를 제공하는 역할을 합니다. 따라서 필요에 따라 사용할 수 있습니다.
주로 문제를 해결(재시도)하거나, 선택적인 옵션을 제공할 때 적합합니다. 버튼을 모두 사용하지 않을 수도 있습니다.
Layout
Result Section은 항상 자신을 감싸는 부모 컨테이너를 기준으로 중앙 정렬을 수행하여 유연한 레이아웃을 지원합니다.
화면 전체 중앙 정렬
앱의 최상위 레이아웃에 적용 시 콘텐츠가 화면 정중앙에 위치합니다.
섹션 내부 중앙 정렬
특정 컴포넌트나 섹션 내부에 배치 시 해당 영역 안에서 중앙 정렬됩니다.
Asset type
Result Section 내 자주 활용되는 Asset 타입을 디자인 편의를 위해서 제공합니다.
Lottie
Result Section에서 가장 빈번하게 사용되는 완료(Complete) 및 실패(Fail) 상태는 Lottie 애니메이션으로 표현합니다. 라이트/다크 모드별 Lottie 에셋이 각각 제공됩니다.
Icon
상태를 표현할 때, 일러스트레이션 대신 아이콘을 사용할 수 있습니다. 아이콘은 주로 Empty(데이터 없음) 상태에 사용되며, Seed Icon에 정의된 모든 아이콘을 활용할 수 있습니다.
2D, 3D Asset
일반적인 성공, 실패 상태가 아닌 서비스의 고유한 맥락에 맞는 상태 표현이 필요할 때가 있습니다. 이 경우, 'Asset Town'에 등록된 에셋을 가져와 성공, 정보 안내 등 다양한 상태를 더욱 유연하고 창의적으로 표현할 수 있습니다.
Custom(Slot)
화면 맥락에 맞는 다양한 에셋 및 그래픽을 넣어서 표현할 수 있습니다. Slot에 들어오는 요소의 크기에 맞춰 여백을 조절해 사용하세요.
Usage
Success / Complete
사용자의 행동이 성공적으로 완료되었음을 알려줍니다. 작업의 결과를 명확히 보여주고, 다음 행동 유도가 필요한 경우 버튼을 이용해 안내합니다.
Error / Failure
사용자의 행동이 실패했음을 알려줍니다. 사용자가 상황을 이해하고 문제를 해결하여 원래의 목적을 달성하도록 다음에 취해야 할 행동을 명확하게 안내합니다.
Empty / First-time use
사용자의 행동 혹은 해당 화면에서 내용이 없음을 알려줍니다. 이때 사용자가 무엇을 해야 할지 알려주어 행동을 유도하고 이탈을 방지하도록 하는 것이 좋습니다.
3D Asset을 사용하는 경우
특정 서비스에서 제공하는 경험의 경우, 서비스의 맥락 및 브랜딩을 강화하기 위해 3D 에셋을 사용할 수 있어요.
버튼의 위계는 상황에 맞게 조절하기
Result Section의 버튼은 메시지의 중요도와 사용자가 처한 맥락에 따라 적절한 위계를 설정하여, 사용자의 다음 행동을 효과적으로 유도해야 합니다.
| Button 유형 | 설명 |
|---|---|
| Bottom CTA | 화면 하단 전체를 차지하는 버튼입니다. 시각적 무게감이 가장 크며, 사용자가 가장 먼저 취해야 할 핵심 행동을 안내합니다. |
| Contained Button | Result Section 컴포넌트 영역 내에 포함되는 작은 버튼입니다. 하단 CTA보다 시각적 중요도가 낮으며, 현재 상태를 해결하거나 보조적인 정보를 제공하는 역할을 합니다. |
'광고 상세 보기'가 다음 여정을 이끄는 핵심 행동인지, 선택적인 보조 행동에 가까운지에 따라 버튼의 표현을 다르게 할 수 있어요.
실패했을 시 화면 맥락에 맞는 적절한 액션을 제공하기
실패 화면의 이탈 버튼은 현재 화면의 성격(전체 화면 vs 임시 화면)에 따라 명확히 구분하여 사용해야 합니다.
| 버튼 | 역할 |
|---|---|
| < (뒤로 가기) | 사용자의 입력 오류처럼 수정이 필요할 때 '직전 단계'로 돌려보내는 역할을 합니다. |
| 'X' (닫기) | 모달이나 팝업과 같이 임시 레이어로 화면을 구현한 경우, 임시 화면을 '닫고' 원래 보던 화면으로 돌아갈 때 사용합니다. |
| '돌아가기' | 되돌아갈 수 없는 상황에서 홈 등 안전한 목적지로 사용자를 명확히 안내합니다. |
| '다시시도' | 실패한 동일 작업을 즉시 재실행하는 옵션을 제공하며 위 버튼들과 함께 사용될 수 있습니다. |
로딩 이후 상태 표현하기
로딩 상태가 완료된 후에는, 작업 결과에 따라 성공, 실패 등의 Result Section을 이어서 표시하여 사용자에게 명확한 피드백을 제공할 수 있습니다.
Result Section V3 변경점
- App patterns의 empty,error를 Result Section, Result Page로 변경해 특정 섹션과 풀 페이지에서 결과를 쉽게 표현할 수 있도록 변경했습니다.
- 결과를 빠르게 인지할 수 있도록 그래픽 에셋 영역을 추가했습니다.
- 사이즈를 추가해 다양한 케이스에서 사용할 수 있도록 했습니다.
Last updated on