[디독] 📝 팝업, 팝오버, 팝퍼? UI 용어 간단히 살펴보기

#Process #Design System #Tip

📝 팝업, 팝오버, 팝퍼? UI 용어 간단히 살펴보기

👀효정's 큐레이팅 멘트

딤드된 검은 바탕에 떠 있는 ‘그것'을 여러분은 뭐라고 지칭하고 있으신가요? 팝업? 모달? 얼럿? 다이얼로그?. 오늘 아티클은 팝! 하고 튀어 나오는 팝업, 팝오버, 팝퍼라는 UI 용어들에 대한 간단한 정의와 디자인 시스템 별 나타나는 차이점들에 대한 설명을 담고 있습니다.

저자가 글을 마무리 할 쯤 남긴 말에 저는 살짝 ‘아차' 했는데요.. 😅 보통 프로덕트의 기준이 될 디자인 시스템을 만들 때 각 컴포넌트를 완벽하게 정리하는 데에는 몰두하면서 함께 협업하는 작업자끼리 용어를 규정하거나 통일하는 부분에 있어서는 진지하게 고민해보지 못한 것 같아요. 여러분은 어떠신가요? 만약 내부적으로 잘 규정해본 경험이 있으신 분이 계시다면 팁을 부탁드리고 싶네요! 자, 그럼 읽어볼까요?

종종 우리는 같은 것을 각기 다른 용어로 설명하곤 한다.

UI를 설명하기에는 골치 아픈 시나리오🗯️

팀 내에서 나 혼자만 선호하는 용어를 가지고, UI 구성 요소를 설명하는 것은 자칫 혼란을 야기할 수도 있다. 가령, John이 팝업(Pop-up)이라고 부르는 요소를 가지고 Caroline은 팝오버(Popover)라고 말하고, 또 그 와중에 Andrew는 JS에 팝퍼(Poper)라고 이름 지었다고 하자. 새로운 기능의 디자인을 검토하기 위하여 다 같이 모인 회의에서 똑같은 UI 요소를 가지고 이처럼 각기 다른 이름으로 부른다면 어떨까? “잠깐만, 우리 모두 다 같은 것에 대해 이야기하고 있는 게 맞아?”하며 혼란스러워할 것이다.

프로덕트 매니저👨‍💼를 포함한 엔지니어👩‍🔬, 디자이너👩‍🎨 모두가 각기 다른 용어를 사용하는 이런 상황은 무척이나 흔하다. 프로덕트 매니저에게 UI 구성 요소는 비즈니스 용도로써 사용되는 시각적인 부분이지만, 엔지니어에게는 일종의 API의 훅(Hook)이다. 또 디자이너에게는 사용자의 특정 동작을 유도하는, 시각적인 상호 작용 패턴을 의미한다고 할 수 있다. 이런 UI 구성 요소에 대한 직군별 해석의 차이는 곧 용어의 차이로 이어진다.

그렇다면, 같은 소속의 디자이너들끼리 같은 화면을 진행하는 것은 더 쉬울까? 그럴 리가. 동일한 UI 구성 요소라 하더라도 디자인 시스템마다 다르게 이름 짓기 마련이다. 예를 들어, 머터리얼 디자인 가이드라인을 따르는 디자이너는 애플의 HIG(Human Interface Guidelines) 가이드라인을 따르는 디자이너와는 다른 용어를 사용한다는 것이다. 모든 것을 그렇게 하기에는 무리겠지만, UX 요구 사항을 문서화, 혹은 여러 직종끼리 협업을 위한 지침을 만드는 경우에 ‘용어’를 통일하는 작업은 실제로 업무 중 많이 도움된다.

UI 용어로 뛰어들기 🏊🏻

1. 팝업? 그게 뭔데. 어떻게 사용하는 거지?

팝업은 팝업 메뉴 또는 팝업 다이얼로그(Dialog)의 형식을 취하는, 일종의 모달 뷰이다. 내가 알기로, 우리가 “팝업 (pop-up: 튀어나오다 라는 뜻이 있다)”이라는 단어를 사용할 때 표현하고자 하는 건 튀어나오는 UI 모션이다.

애플의 HIG 디자인 시스템에서는 팝업은 상호 배타적인 선택 목록을 표시하기 위해 사용되는 데 반해, 구글의 머티리얼 디자인 시스템에서의 팝업은 중요한 정보를 표시하거나 선택을 제공하는 일종의 다이얼로그이다. UWP(Universal Windows Platform) 디자인 시스템의 경우에는 팝업 다이얼로그 또는 플라이아웃이 있다. 둘의 차이점을 살펴보자면, UWP 팝업 다이얼로그는 사용자의 명확한 액션(창을 닫는 등의 행위)을 요구하는 반면에, 플라이아웃은 보다 쉽게 창을 닫을 수 있고 부차적인 요소라 할 수 있다.

각기 다른 디자인 시스템의 팝업 UI (이미지 출처: 애플, 구글, 윈도우 디자인 가이드라인)

2. 그럼, 팝오버는? 어떻게 사용하는 거지?

팝오버란, 사용자가 제어 버튼 또는 특정 영역을 클릭했을 때, 콘텐츠 화면에 나타나는 일시적인 보기를 의미한다. 애플의 HIG 디자인 시스템에서는 팝오버를 태블릿 크기 이상의 큰 화면에서 사용하는 걸 선호한다. 팝오버는 사용자의 주의를 일시적으로 끌기 위해 사용되는 모달리티의 일반적인 규칙을 따른다.

팝오버의 경우, 운영체제 디자인 시스템 내 모달의 하위 항목이다. (이미지 소스: Apple의 휴먼 인터페이스 지침)

애플의 HIG 디자인 시스템에 따르면, 우리가 주의해야 할 한 가지는 모달(1) 위에 모달(2)의 상황이다. 팝업 컨테이너에서는 완료, 확인 또는 취소의 단일 선택만 가능한데, 이때 혼동스럽지 않게끔 팝오버에 호버나 프레스와 같은 추가 동작은 제외해야 한다. 추가 작업이 필요한 경우에 사용자는 첫 번째 팝오버를 닫은 후 다음 팝오버에 대한 작업을 수행해야 하는 것이다.

HIG에서는 모달 위 모달 상황을 피하고자 모달을 여러 개 사용한다.

다음은 머티리얼 디자인 시스템의 팝오버로, 이는 다이얼로그 중 하나이다. HIG 디자인 시스템과 같이 확인, 수락, 삭제 또는 취소와 같은 단일 액션에 사용된다. HIG의 다이얼로그와 머터리얼 디자인의 다이얼로그의 주목할만한 차이를 정리하자면, 먼저 HIG의 다이얼로그의 경우에는 사용자가 다이얼로그를 닫았을 때 작업을 저장하는데 반해, 머티리얼은 그렇지 않다는 점이다. 이는 사용자가 작업 흐름에서 벗어날 때 뚜렷한 결과 차이가 나타난다.

팝오버 해제 시, 같은 팝오버는 다른 경험으로 이어질 수 있다.

Shopify의 Polaris나 Atlassian 디자인 시스템의 경우에는 팝오버를 팝업 메뉴나 드롭다운 메뉴 또는 타임 셀렉터와 같은 형식의 구성 요소와 함께 사용하게끔 정리되어 있다. 비록 HIG나 머티리얼 디자인 가이드라인에서 추천하는 방식은 아니지만, 사용자가 팝오버의 필터 옵션에 따라 데이터 테이블의 보기를 조정하는 웹 기반의 경우에 도움된다.

Shopify의 Polaris가 정의한 디자인 팝오버 예시

3. 마지막, 팝퍼는 뭐야?

팝퍼란, 머티리얼 디자인의 팝오버의 연장선에 있는 또 하나의 UI 구성 요소를 말한다. 이는 버튼이나 특정 영역 위에 겹칠 수 있는 요소로, 일반적으로 버튼을 마우스로 누른 상태에서 팝오버가 나타난다. 이때 사용자는 가시적으로 버튼이 눌러져 있는 걸 보게 된다. 팝퍼는 버튼 등 다른 UI 구성 요소를 기준으로 고정되어 아래로 펼쳐지는 형태를 띠는데, 그러다 보니 팝오버가 어디서부터 나타난 건지 혼란스러운 경우가 종종 있다.

머터리얼 팝퍼를 사용하면, 요약된 형식으로 UI 위에 겹치게 표현이 가능하다.

UI 용어집 📖

UI 용어집을 만드는 것은 디자인 가이드라인을 만드는 데 중요한 부분이다. 보통 우리는 맞춤형 UI 구성 요소를 디자인하는 데 많은 노력을 기울이면서도 반면에 우리가 사용하는 용어를 규정하는 것에 대한 중요성은 간과하는 경우가 많다. 디자인 시스템에 서로 다른 UI 용어 가지고 있다는 것을 깨닫고 이를 받아들이는 것이야 말로 팀에 일관된 디자인 언어를 규정할 문서를 만드는 데 가장 필요한 첫 번째 단계란 것을 잊지 말자.

+ 더 알고 싶다면

Banksalad Product Language를 소개합니다 - 류성두님

뱅크샐러드의 iOS 개발자 류성두님께서 써주신 글입니다. (이미 보신 분들도 있겠지만) 프로덕트 랭귀지가 무엇이고 어떻게 용어를 정리하며 협업하는 방법을 찾아갔는지에 대한 여정을 설명해주시는데요. 특히나 프로덕트 랭귀지 탄생 배경에 대한 설명은 이번 번역 아티클과 깜짝 놀랄 정도로 똑같은 결과 상황을 보여주고 있어서 역시 작업자 간 소통의 이슈는 만국 공통(?)이구나 싶었습니다. 이미지와 함께 자세히 정리되어 있어 저는 작업 중 틈틈이 반복해서 보고 있는데요. 여러분도 참고해보시면 어떨까요?

HIG 번역) Human Interface Guidelines 한글 정리 - jum0

HIG 관련해서 개인 블로그에 번역 중이신 jum0님의 글입니다. 첫 번역을 시작하는 글이 4월인데 11월까지 틈틈이 번역을 올려주신 것 같아요. 현재 기준 번역해주신 글의 개수만 50개가 넘는데요. 그중 저는 가장 먼저 모달리티에 대해 찾아봤답니다! 애플의 HIG 관련해서 빠르게 살펴볼 수 있는 번역본이 필요하시다면 읽어보시기를 추천드려요.

저자 : Shan Shen

원문 : Pop-up, popover or popper? — a quick look into UI terms

번역자 : 노효정

검수자 : 양혜윤 (LinkedIn)

지난 뉴스레터 살펴보기