안녕하세요.
헤이딜러 안드로이드팀 박상권입니다.
지금 이 글을 읽는 여러분들은 아래질문에 답하실 수 있으신가요?
“저 화면에서는 [X]버튼인데,
왜 이 화면에서는 [⬅️] 버튼이에요?”
질문에 대한 명확한 답이 떠오르지 않으셨다면 잘 찾아오셨습니다.🤗🤗
이 포스팅에서는 어떤 기준으로 닫기(X)와 뒤로가기(⬅)를 사용해야 하는지에 대해
헤이딜러 제품팀에서 진행했던 UX 스터디에 대해서 공유합니다.
다른 UX스터디 주제들도 궁금하시다면 아래 목차에서 확인해보세요
이 내용은 지난 드로이드나이츠 2023 행사에서도 발표된 내용입니다.
YouTube영상으로도 확인하실 수 있습니다.
잠깐!
‘뒤로가기'에도 종류가 있다?
우리가 생각하는 ‘뒤로가기'에도 사실을 2가지 종류가 존재합니다.
- 하이어라키 백: 하위개념에서 상위개념으로 돌아가는 것
- 히스토리 백: 이전에 지나왔던 화면들을 역순하여 차례대로 되돌아가는 것
각 화면에서 사용자가 기대하는 ‘뒤로가기'는 어떤것일까요?
- 정답은 없다. 상황에 따라 다르다
쿠팡의 ‘뒤로가기'
- 모든 ‘뒤로가기’를 히스토리 백으로 처리
- 무한 ‘뒤로가기' 사태가 발생하는 경우도 생김🤬🤬
- 사용자가 원하는 ‘뒤로가기'는 하이어라키 백이었을수도..?
혼종의 탄생
- 히스토리 백과 하이어라키 백이 함께있는 혼종도 생김 (카카오뷰)
- ‘뒤로가기’ + ‘닫기’ = ..?🥲
헤이딜러에서 정한 UX 규칙📌📌
- 먼저 페이지 간 위계를 파악해본다.
- 그 다음 어떤 back이 자연스러울지 생각해본다.
- 두가지의 back기능이 모두 필요하다면
- 뒤로가기 버튼을 하이어라키 백으로 두고
- 히스토리 백을 다른형태의 UI로 해결한다.
닫기와 뒤로가기, 어떻게 다를까?
다시 이 포스팅의 주제로 돌아와 보겠습니다.
지금까지 ‘닫기'와 ‘뒤로가기'를 사용하는데
아래와 같은 문제들이 존재했습니다.
- 닫기와 뒤로가기 버튼 사용 기준이 명확하지 않아서 느낌적인 느낌으로 사용해왔다.🤔
- 결과적으로 여기저기서 일관성 없이 쓰이고 있었다.🤐
☝🏻 ‘닫기’는 모달에서만 쓰입니다.
- 아이폰: Modal
- 안드로이드: Dialog
🤔 그렇다면 모달이 뭘까요?
현재 수행하고 있는 작업을 끊고, 다른 맥락의 작업을 일시적으로 수행해야할 때 사용하는 뷰입니다.
예시)
- ‘견적요청’ 도중 [거래과정 자세히보기]로 페이지 이동
- 해당 페이지는 원래 수행 중이던 ‘견적요청’과는 다른 맥락의 작업
→ [거래과정 자세히보기]: 가이드라인에 따라 모달 뷰 사용
따라서, 모달 내 작업은 단순하고 쉬워야합니다.
(화면의 일부를 가리는 pop up, bottom sheet 같은 형태가 사용되는 이유)
하지만, 좀 더 몰입해야하는 컨텐츠나 복잡한 작업을 포함하고 있다면
모달을 Full screen으로도 사용할 수도 있을것입니다.
☝🏻 따라서, 사용 기준은 맥락만 판단해주면 됩니다..
- 맥락일 때: Modal이 아니므로 → 뒤로가기 버튼 + 좌우 애니메이션
- 맥락이 아닐 때: Modal이므로 → 닫기 버튼 + 상하 애니메이션
헤이딜러 제품팀의 기준
- 닫기: 모달을 닫고 현재 작업으로 되돌아가기 위해 사용
- 뒤로가기: 지나왔던 페이지로 되돌아가기위한 네비게이션으로 사용
맥락 판별법
- A > B > A : 맥락이 아니다 → 닫기 버튼 사용
- A > B > C : 맥락이다 → 뒤로가기 버튼 사용
잘못생각했던 오답 정리
- 뒤로가기와 닫기 버튼 사용 기준은 depth 차이다 ❌
→ 맥락 차이다 ✅ - 뒤로가기와 닫기는 동시에 존재할 수 있다 ❌
→ 없다 ✅
추가로 생각해볼만한 것들
Full screen 모달 내에서 페이지 이동이 또 있게 된다면 어떻게 해야 할까요?
- 절대 존재해서는 안되는 케이스다
→ best 해결책이지만 불가능할 것 같다.😭😭 - 모달 내 컨텍스트로 받아들인다
→ 마찬가지로, 이동된 페이지에서 맥락판단에 따라 [X] [←]를 사용한다.
지금까지 헤이딜러 제품팀에서 고민하고 UX스터디를 진행했던
‘닫기와 뒤로가기’ 에 대해서 공유해드렸습니다.
여러분들의 ‘닫기와 뒤로가기’에 대한 기준은 어떠신가요?
회사에서 정하신 기준이 있으시다면 공유해주시면 좋을것 같습니다.
저희와 함께 헤이딜러 서비스를 발전 시켜나가실 분들을 기다리고 있습니다.
감사합니다.
