팝오버

정의

팝오버는 어떤 요소, 즉 트리거를 눌렀을 때 그 바로 옆에 나타나는 작은 패널입니다. 툴팁이 그저 짧은 설명을 보여 주는 데 그친다면, 팝오버 안에는 버튼이나 입력창, 목록처럼 직접 조작할 수 있는 요소를 담을 수 있습니다. 예를 들어 공유 버튼을 누르면 옆에 떠오르는 링크 복사 패널이나, 필터 아이콘 옆에 펼쳐지는 조건 선택 패널이 팝오버입니다. 화면 전체를 덮지 않고 트리거 근처에 붙어 뜨기 때문에, 사용자는 자신이 방금 무엇을 눌러서 이 패널이 나왔는지 그 맥락을 시선에서 놓치지 않습니다.

왜 중요한가

팝오버는 툴팁과 모달 사이의 빈자리를 정확히 메우는 패턴입니다. 툴팁처럼 가볍게 트리거 곁에 붙지만 안에서 실제 조작이 가능하고, 모달처럼 상호작용을 담지만 화면을 어둡게 덮어 흐름을 끊지는 않습니다. 그래서 자잘한 설정을 바꾸거나, 짧은 메뉴를 고르거나, 링크를 복사하는 것처럼 잠깐이면 끝나는 일에 잘 어울립니다. 필요할 때만 살짝 열렸다가 볼일이 끝나면 조용히 사라지므로, 매번 페이지를 옮기거나 큰 창을 띄우지 않고도 작은 작업들을 제자리에서 해결할 수 있습니다. 이렇게 무거운 모달을 아껴 두면 사용자의 흐름이 훨씬 매끄러워지고, 화면도 필요 이상으로 복잡해지지 않습니다. 결국 팝오버를 잘 쓰는 화면은 작은 일은 그 자리에서 가볍게, 큰 결정만 모달로 무겁게 처리하는 리듬을 갖추게 됩니다.

흔한 실수

• 팝오버와 툴팁을 뒤섞어 쓰는 것입니다. 단순한 설명일 뿐인데 클릭으로 열리는 팝오버에 담거나, 반대로 버튼이 들어가는 조작 패널을 호버로 뜨는 툴팁에 넣으면 사용자가 언제 무엇을 기대해야 할지 헷갈립니다.
• 바깥을 눌러도 닫히지 않게 만드는 것입니다. 팝오버는 잠깐 쓰고 넘어가는 가벼운 패널이라, 다른 곳을 눌렀을 때 자동으로 닫히지 않으면 화면에 계속 남아 방해가 됩니다.
• 화면을 거의 덮을 만큼 크고 복잡한 내용을 팝오버에 담는 것입니다. 이 정도로 무거운 작업은 트리거 옆에 붙는 작은 패널보다 모달이나 별도 페이지가 어울리며, 억지로 팝오버에 넣으면 위치가 어긋나거나 화면 밖으로 잘려 나가기 쉽습니다.

실무 팁

• 팝오버는 클릭으로 열리고 안에서 조작이 가능하다는 점에서 툴팁과 다르고, 화면을 덮지 않고 트리거 옆에 붙는다는 점에서 모달과 다릅니다. 이 성격을 살려 공유나 필터, 간단한 메뉴처럼 맥락을 유지한 채 잠깐 처리할 일에 쓰세요.
• 바깥 영역을 누르거나 ESC 키를 눌렀을 때 팝오버가 닫히게 만드세요. 열고 닫기가 가벼워야 사용자가 부담 없이 열어 보고, 볼일이 끝나면 자연스럽게 넘어갈 수 있습니다.
• 트리거와 패널을 시각적으로 이어 두세요. 화살표 꼬리를 붙이거나 위치를 딱 붙여, 이 패널이 방금 누른 그 버튼에서 나왔다는 관계가 한눈에 보이게 하면 맥락이 흐트러지지 않습니다.

관련 개념