팝업(Pop-up)으로 불리는 것들에 대하여

본문은 위시켓과 번역가 윌리(Willy)가 함께 만든 해외 콘텐츠 기반 번역문입니다. 사용자 인터페이스와 관련된 다양한 정보를 다루는 ‘Adrian Roselli’ 의 블로그 글을 번역했습니다. 필자인 애드리안 로젤리(Adrian Roselli)는 컨설턴트이자, 사용자 인터페이스와 멀티미디어 및 소프트웨어 응용 프로그램을 위한 인터페이스를 개발하고 있습니다. 본문은 팝업(Pop-up)으로 불리는 용어들에 대해 정리한 내용으로, 앞으로 팝업을 어떻게 부를지 함께 고민해보셔도 좋겠습니다.

이 글을 읽기 전, '드롭다운(Drop-down)으로 불리는 것들에 대하여' 을 먼저 읽어보시면 배경지식을 얻으실 수 있습니다. 드롭다운과 팝업, 이 두 가지 용어는 팀원 모두가 사용에 앞서 한 번쯤 생각해봐야 할 용어입니다. 여러분과 팀, 그리고 이해관계자들이 디자인, 문서화, 개발을 시작할 때 무엇을 왜 만드는지 이해하는 것이 매우 중요합니다. 누군가 여러분에게 "팝업"이라고 말했다면 아래 중 무엇을 의미할까요? 고객은 어떻게 생각할까요? 디자이너는? 개발자는? 뿐만 아니라 사용자(콜센터에 문의하는 사람), 스크린리더[1], 음성인식 소프트웨어 등 다양한 시각에서 고려해야 합니다.

1. 새창 새창을 사용하는 경우는 크게 두 가지가 있습니다. 먼저, 마케팅의 입김으로 이탈률을 낮추기 위해 모든 위부 링크에 target="_blank" 를 사용하는 것으로 피해야 할 방식 입니다. 또는, 용어집이나 튜토리얼과 현재 페이지를 유지하며 유용한 정보를 같이 보여주기 위한 용도로 사용합니다. 두 사례 모두 기본 브라우저 창을 사용합니다. 새 탭으로 연다고 해도 (두 번째 사례에는 그다지 유용하지 않음) 여전히 독립적으로 실행되는 브라우저의 개별적인 문서입니다.

새 브라우저 창을 여는 경우 "새창(New window)"이라고 부르세요.

2. 브라우저 대화상자 브라우저가 제공하는 기본 대화상자를 통해 메시지를 띄우거나 사용자에게 피드백을 요청하는 방식은 이제 거의 찾아보기 힘듭니다. 보안에 문제가 있을뿐더러 웹 사이트를 제공하는 브랜드가 대화상자를 원하는 대로 디자인할 수 없기 때문입니다.

window.alert() (디버깅 메시지나 입력값 오류를 보여주기 위해 사용하는 전통적인 방식의 JavaScript), window.confirm() (필요한 행동을 정말로 취할 것인지 몰어볼 때), window.prompt() ( 사용자로부터 입력값을 받음 )가 모두 여기에 해당합니다.

이러한 컴포넌트를 지칭하려면 상황에 맞춰 브라우저 "경고창(alert)", "확인창(confirm)", 또는 “입력창(prompt)"이라고 부르세요.

3. 모달 모달은 콘텐츠를 페이지 위에(z-index) 띄우기 위해 직접 혹은 라이브러리를 사용하여 개발합니다. 사용자가 작업을 완료하거나 페이지에서 작업이 완료되었다고 판단할 때까지 메인 페이지와의 상호작용은 중단됩니다. 모달을 사용하기 위해서는 적절한 ARIA role 과 개체에 접근 가능한 이름을 부여하고, 포커스(focus)를 관리하고 , 창을 닫을 수 있는 방법을 제공해야 합니다. 또한, 창이 떠 있는 동안 메인 콘텐츠를 "회색으로" 또는 "흐리게" 표시해줍니다.

이 컴포넌트를 지칭하려면 "모달 대화상자(Modal dialog)"라고 부르세요.

4. 토스트 토스트를 구현하는 방식은 적어도 44개 가 있으며 이에 따라 다른 이름으로 불릴 수 있습니다. 다양한 토스트 유형에는 경고(alert) 및 알림(notification)이 포함되며 IBM 스타일과는 차별되는 Noty와 Growl (OSX 이전 시대의 Mac) 또한 여기에 해당하며 그 숫자만큼이나 다양한 동작 방식이 존재합니다. 토스트는 본질적으로 페이지와의 상호작용을 방해하지 않고 페이지(z-index) 위에 나타나는 메시지로, 일반적으로 2-3초 간의 짧은 시간 후에 자동으로 제거됩니다. 토스트는 올바르게 구현하는 것은 쉬운 일이 아니지만 이를 팝업이라고 부르면 안 됩니다.

이 컴포넌트를 지칭하려면 "토스트(Toast)"라고 부르세요.

5. 디스클로저 위젯 / 의 ARIA 버전이라 부를 수 있지만 ARIA role을 사용하여 제어 기능을 추가할 수는 없습니다. aria-expanded 와 aria-controls (지원 종료 예정) 속성을 가진 하나와, 숨기거나 보여줄 콘텐츠를 포함한 컨테이너가 하나가 필요합니다.

디스클로저 위젯 은 HTML과 스크립트를 통해 쉽게 구현할 수 있습니다. 버튼 클릭 시 나타나는 콘텐츠가 다른 콘텐츠보다 위에 표시되는 경우 팝업처럼 보이게 됩니다. 완성도가 높은 패턴으로, 내비게이션에도 사용 할 수 있습니다.

이 컴포넌트를 지칭하려면 "디스클로저 위젯(Disclosure Widget)"이라고 부르세요.

6. 툴팁 일반적으로 사용자가 표의 헤더, 버튼, 추가 정보 아이콘(보통 i 모양의 원형 아이콘) 같은 항목 위에 마우스를 올려놓을 때 나타납니다. 키보드, 음성, 터치 인터페이스를 사용하는 경우 화면이 ( title 속성을 사용해도) 툴팁 텍스트로 가득 찬다는 치명적인 단점이 있습니다. 이러한 접근성 이슈 때문에 툴팁을 사용해서는 안 됩니다. 못 믿으시겠다면 Tooltips in the time of WCAG 2.1 이라는 글을 읽어보시기 바랍니다. ARIA GitHub에서도 관련된 토론 을 확인할 수 있습니다.

접근성 문제에도 이 컴포넌트를 사용하려면 "툴팁(Tool-tip)"이라고 부르세요.

7. 토글 팁 개발팀이 툴팁을 사용하지 않겠다고 못 받았어도 고객이 이를 강력하게 요청한다면 디스클로저 위젯을 사용함으로써 어느 정도 요구사항을 만족시킬 수 있습니다. 이를 사용하면 여러분이 직접 보이고 숨기는 것을 제어해야 한다는 점을 제외하고는 툴팁과 다름없어 보입니다. 스크린리더 사용자라면 토글 팁에 포함된 내용을 추가로 들을 수 있습니다. 하지만 이를 추가하기 전, 사용자와 함께 실제로 테스트를 거쳐 필요 여부를 결정하세요. Twitter에 이 토글 팁에 대한 예제 를 공유했지만, 아직 완성하지는 못했습니다.

이 컴포넌트를 지칭하려면 "토글 팁(Toggle-tip)"이라고 부르세요.

8. ARIA 메뉴 마이크로소프트 워드의 파일 메뉴와 같은 OS의 기본 UI를 나만의 스타일로 재창조하려면 ARIA Authoring Practices 메뉴 또는 메뉴 버튼(menubutton) 패턴을 사용할 수 있습니다. 웹사이트 내비게이션을 위한 도구는 분명히 아니지만 네이티브 애플리케이션을 개발하거나 웹 뷰에서 사용할 경우 좋은 선택이 될 수 있습니다.

둘 중 어느 것을 택하더라도 "ARIA 메뉴(menu)"라고 부를 수 있습니다.

9. 플라이아웃(Fly-out) 내비게이션 우리는 웹 사이트 내비게이션을 드롭다운이라고 불러왔습니다. 이유는 모르겠지만 제 고객 중 몇몇은 이를 팝업이라고 부릅니다. 하지만 최상위 메뉴를 탭하거나 마우스를 올렸을 때, 하위 메뉴가 중첩(nested)되어 표시되는 것을 보고 있자면 접근성을 위해 더 나은 방법이 필요하겠다는 생각이 듭니다. WAI[2]가 제공하는 다양한 UI 패턴에 대한 설명 중 플라이아웃 메뉴 가 이에 가장 적합해 보입니다. 이는 사실 새로운 용어가 아니라 초창기에 매우 유행했던 Suckerfish 이전부터 있어왔습니다.

이러한 방식의 내비게이션을 사용 중이라면 "플라이아웃(Fly-out)" 또는 "플라이아웃(Fly-out) 내비게이션"이라고 부르세요.

10. macOS & iOS의 VoiceOver와 Android의 TalkBack은 를 팝업 버튼이라 부른다는 사실 때문에 이 리스트에 이름을 올렸습니다. JAWS[3]와 NVDA[4]에서는 이를 콤보박스(combobox)라고 부릅니다. 스크린리더 사용자는 이 용어를 사용할 수 있으므로 함께 작업할 때 해당 단어의 차이점을 이해해야 합니다.

HTML에서 기본적으로 제공하는 네이티브 를 의미한다면 "셀렉트(select)"라고 부르세요.

11. 커스텀 디스플레이 셀렉터(Custom Display Selector) 이것은 모든 것을 포괄하는 용어입니다. 저는 개발자들이 동적인 UI를 구현할 때 일단 특정한 컨테이너를 화면에서 안 보이게 숨겨놓고 애니메이션 효과와 함께 등장시키는 트릭을 사용하는 것을 많이 봤습니다. 이러한 방식은 고려하고 있다면 다시 한번 생각해 보세요. 이는 보통 웹 접근성을 지원하지 않으며, 위에 소개한 패턴 중 하나로 구현할 수 있습니다. 감에 의존하여 혼자만 이해할 수 있는 새로운 패턴을 발명하기 전에 다시 돌아가 고객이 진짜로 원하는 것이 무엇인지 다시 한번 검토해보세요.

이러한 접근방식은 다른 말로 "컨설팅"이라 부릅니다.

12. 팝업(Popup) 혹시 여러분의 눈을 의심하지는 않으셨나요? 네 맞습니다. 단어 Pop와 up 사이에 하이픈(-)이 빠져있기 때문입니다. 2021년 1월, 마이크로소프트의 개발팀 중 하나가 새로운 HTML 요소인 을 소개 했습니다. 저는 관심이 생겨 바로 몇 가지 질문을 던졌고 직접 부딪혀 보기 위해 GitHub 토론 에 뛰어들었습니다. 이러한 논의는 Enabling Popups, Initial Explainer 라는 이름으로 OpenUI로 이전됐습니다. 누구나 토론에 참여할 수 있으며 일부 질문에 대해서는 상세한 답변을 주기도 합니다. (예: GitHub에서 이루어진 앵커(anchor) 위치 에 관한 토론)

이렇듯 커뮤니티에서 논의되고 있는 새로운 요소를 가리켜 팝업(Popup)이라고 부릅니다.

기타 관련 용어 누군가 팝업을 만들어달라고 요청하면 이것이 대화상자, 폼 UI, 디스플레이 위젯 중 무엇을 의미하는지 명확히 구분할 필요가 있습니다. 그런 다음 커뮤니케이션에서 해당 용어를 적극적으로 사용해야 합니다. 간단한 대화상자를 조차도 오래전부터 함수로 구현해 사용해온 것일 수 있으므로 항상 확인이 필요합니다.

한 줄 요약 "팝업(Pop-up)"이란 용어를 무조건 사용하기보다는 원하는 도구를 정확히 지칭할 수 있는 용어를 선택해 사용해보세요.

[1] 시각장애인들에게 컴퓨터의 화면과 자신이 입력한 키보드 정보 그리고 마우스 좌표 등을 음성으로 알려 주어 컴퓨터를 사용할 수 있도록 도와주는 소프트웨어.

[2] 웹 접근성 이니셔티브(Web Accessibility Initiative) 또는 줄여서 WAI는 장애인들의 월드 와이드 웹에 대한 접근성을 향상시키기 위해 W3C에서 만든 개념이다.

[3] PC 기반의 스크린리더로 화면에 있는 내용을 TTS 엔진을 통해 음성으로 출력해준다.

[4] 다국어를 지원하는 무료 오픈소스 스크린리더.