팝오버

화면에 무언가를 더 보여 줄 방법이 두 극단밖에 없던 시절이 있었습니다. 새 화면으로 넘기거나, 뒤를 검게 덮고 창을 띄우는 것입니다. 둘 다 지금 보고 있던 것을 치워 버립니다.

문서 목록에서 한 건의 공유 설정을 바꾸려는 상황이 그랬습니다. 설정 창이 뒤를 덮으면 목록이 가려지고, 창을 닫은 뒤에는 어느 문서를 고치던 중이었는지 다시 찾아야 했습니다. 아바타를 눌러 계정 메뉴를 보려고 했는데 페이지 전체가 바뀌는 일도 흔했습니다. 5초면 끝나는 일에 맥락을 잃는 대가를 매번 치른 셈입니다.

필요한 것은 두 극단 사이였습니다. 누른 그 자리 옆에 작게 뜨고, 뒤 화면은 그대로 두고, 다른 곳을 누르면 그냥 닫히는 층입니다. 팝오버가 맡은 자리가 여기입니다. 앵커라고 부르는 기준 요소에 위치를 묶어 둔다는 점이 이 층의 성격을 정합니다. 사용자는 방금 누른 것과 지금 뜬 것이 이어져 있다는 사실을 화면 위치만으로 압니다.

누른 요소를 기준점으로 삼아 그 아래나 옆에 뜨고, 기준점이 움직이면 같이 움직입니다. 지켜야 하는 것은 다섯 가지입니다.

1. 기준 요소에 붙여 띄웁니다. 버튼이나 아바타 옆 4에서 8픽셀쯤 떨어진 자리가 보통이고, 목록을 스크롤하면 기준 요소를 따라 함께 이동하거나 닫힙니다. 화면 가운데에 뜨면 무엇에 딸린 것인지 알 수 없습니다.
2. 클릭이나 탭으로만 엽니다. 마우스를 얹는 동작으로 열면 손가락으로 쓰는 화면에서는 열 방법이 없어집니다. 안에 누를 것이 들어 있는 층이니 여는 동작도 누르는 동작이어야 맞습니다.
3. 자리가 없으면 방향을 뒤집습니다. 기준 요소가 화면 아래쪽에 있어서 아래에 뜰 자리가 없으면 위로 뜹니다. 이 처리를 빼면 화면 끝에 있는 항목의 팝오버가 잘려 보입니다.
4. 닫는 방법을 셋 둡니다. 바깥을 누르기, ESC 키, 기준 요소를 다시 누르기입니다. 닫기 버튼만 두면 작은 층에 X 하나가 자리를 잡아먹고, 바깥을 눌러도 안 닫히면 사용자는 갇힌 느낌을 받습니다.
5. 열릴 때 선택된 자리를 안으로 옮깁니다. 키보드 등으로 선택된 상태를 포커스라 하는데, 이것이 뒤 화면에 남아 있으면 마우스 없이 키보드만으로 조작하는 키보드 내비게이션 사용자는 방금 열린 층에 닿을 수 없습니다.

뒤를 막지 않는다는 점이 이 층의 값이면서 한계입니다. 뒤 화면이 그대로 보이니 맥락을 잃지 않지만, 실수로 바깥을 한 번 누르면 그냥 닫힙니다. 그래서 되돌릴 수 없는 결정이나 여러 칸을 채워야 하는 입력은 여기 담지 않는 편이 안전합니다.

맥락을 유지한 채 짧게 끝나는 일에 씁니다. 아바타를 눌러 여는 계정 메뉴, 목록 위에 붙는 필터 설정, 한 항목의 공유 범위 고치기, 색 고르기, 날짜 고르기가 대표적입니다. 공통점은 5초에서 15초 사이에 끝나고, 고른 결과가 바로 뒤 화면에 반영된다는 것입니다.

담을 분량에는 선이 있습니다. 화면 높이의 3분의 1을 넘지 않고 안에서 스크롤이 생기지 않는 정도입니다. 안에 스크롤이 생겼다면 내용이 이 층에 맞지 않는다는 신호이고, 그때는 가장자리에서 밀려 나오는 드로어나 아예 새 화면으로 옮깁니다.

작은 화면에서는 이 층이 잘 서지 않습니다. 기준 요소 옆에 남는 공간이 없어서 화면 절반을 덮어 버리게 되고, 그러면 뒤를 막지 않는다는 장점이 사라집니다. 그래서 같은 내용을 바닥에서 올라오는 시트로 바꿔 내보내는 경우가 많습니다. 안에 든 항목의 크기도 다시 봅니다. 손가락으로 누를 수 있게 확보하는 최소 영역을 터치 타깃이라 하고, 마우스용으로 만든 24픽셀짜리 줄을 그대로 올리면 옆 항목이 같이 눌립니다.

"이걸 모달로 띄우면 뒤 목록이 안 보여요. 팝오버로 붙이죠."

작업 중인 항목을 계속 보면서 고쳐야 하는 일이라는 판단입니다.

"팝오버 안에 스크롤이 생겼어요. 내용이 이 자리에 안 맞는다는 뜻입니다."

분량 기준을 넘었으니 다른 층으로 옮기자는 제안입니다.

"모바일에서는 붙일 자리가 없어서 바닥 시트로 내렸어요."

작은 화면에서는 같은 내용을 다른 형태로 낸다는 뜻입니다.

페이지덱 문서 목록에서 민서가 공유 설정을 팝오버로 옮겼습니다. 그전에는 뒤를 덮는 창이었고, 사용성 테스트에서 창을 닫은 뒤 어느 문서를 고쳤는지 확인하려고 목록을 다시 훑는 사람이 다섯 중 셋이었습니다.

옮긴 뒤에 문제가 하나 남았습니다. 태오가 구현하면서 바깥 클릭으로 닫히게 만들었는데, 링크 만료일을 고치던 사용자가 날짜 칸 밖을 누르자 입력 중이던 값이 사라졌습니다. 민서가 만료일 설정만 따로 떼어 별도 화면으로 옮겼고, 팝오버에는 한 번 누르면 끝나는 항목만 남겼습니다.

툴팁과 같은 것으로 보는 경우가 가장 많습니다. 둘 다 작은 층이 요소 옆에 뜨는 모양이니 겉보기로는 구분이 안 됩니다. 실제로는 여는 동작과 담는 내용이 다릅니다. 팝오버는 눌러서 열고 안에 누를 것이 들어 있고, 툴팁은 마우스를 얹으면 뜨고 설명만 들어 있습니다. 이걸 섞으면 두 방향으로 다 깨집니다. 마우스를 얹어 열리는 층에 버튼을 넣으면 마우스를 옮기는 동안 층이 사라져 누를 수 없고, 눌러서 열리는 층에 설명만 넣으면 사용자는 누른 뒤에 아무 일도 일어나지 않았다고 느낍니다.

뒤를 막지 않으니 아무 내용이나 담아도 된다고 보는 시각도 자주 나옵니다. 가볍게 뜨고 가볍게 닫히니 부담이 없어 보입니다. 하지만 가볍게 닫힌다는 말은 사용자가 원하지 않을 때도 닫힌다는 뜻입니다. 칸 세 개를 채우다가 화면 아무 곳을 누른 순간 입력이 사라지면, 사용자는 두 번째 시도에서 같은 기능을 아예 쓰지 않습니다. 여러 칸을 받는 입력과 삭제 확인은 뒤를 막는 층으로 올리는 것이 원칙입니다.