(아티클 분석) 닫기와 뒤로가기 설계

2025.01.23.

아티클

UI 디자인 가이드 : 닫기와 뒤로가기 설계는?

https://brunch.co.kr/@august9/362

 

뒤로가기의 종류

1. 하이어라키백(Hierarchy Back)

계층 간 이동을 말하며, 하위 개념에서 상위 개념으로의 이동을 말한다.

때로 이전에 봤던 화면을 가로질러 이동할 수 있다.

 

예시

1) 팝업창에서 Back 버튼을 사용해 이전 계층으로 이동

2) 모달 팝업창에서 팝업 외부 터치 시 취소버튼과 동일하게 동작하도록 구성

3) 토스트 팝업에서 우측 상단에 위치한 닫기 버튼으로 이동

4) 바텀 시트의 좌측 상단에 아랫방향의 화살표 아이콘 사용

 

2. 히스토리백(History Back / System Back)

이전 화면을 역순(이전)으로 이동하는 것을 뜻한다.

 

예시

1) 뒤로가기

2) 이전화면

3) 이전

 

구분해서 사용하는 법

닫기는 모달에서만 사용되는 개념이다.

모달은 현재 수행 중인 작업 도중, 다른 맥락의 작업을 일시적으로 수행해야할 때 사용되는 화면이다. pop up, bottom sheet 등, Full Screen의 형태 (Ex. 카카오톡 선물하기)로도 사용된다.

 

작업의 맥락에 있을 때(X)

맥락에서 벗어날 때(O)

 

ios에서는 모달

Android는 다이얼로그

이름은 다르지만 같은 개념이다.

 

인사이트

여태까지 앱을 사용하면서 닫기와 뒤로가기 버튼을 자주 사용했었는데 닫기와 뒤로가기가 어느 상황에서 사용되는지 잘 알지 못했었다. 이번 아티클을 통해 확실하게 어떤 차이점이 있고, 어떻게 구별해야 되는 지 알 수 있었다. 중간에 예시나 구분하는 과정에서 좀 더 다양한 이미지 자료가 있었으면 이해하기 더 쉬웠을 것 같다는 생각이 들었다. 오늘 처음 알게 된 개념으로는 계층 간의 이동을 뜻하는 하이어라키백과 화면을 이전으로 이동하는 히스토리백이 있었고 모달을 안드로이드와 ios가 다르게 부른다는 사실도 처음 알게 되었다.