오버레이
팝오버
Popover
팝오버는 트리거를 눌렀을 때 그 옆에 떠서, 버튼·입력창처럼 직접 조작할 수 있는 요소를 담는 작은 패널입니다.
정의
팝오버는 어떤 요소, 즉 트리거를 눌렀을 때 그 바로 옆에 나타나는 작은 패널입니다. 툴팁이 그저 짧은 설명을 보여 주는 데 그친다면, 팝오버 안에는 버튼이나 입력창, 목록처럼 직접 조작할 수 있는 요소를 담을 수 있습니다. 예를 들어 공유 버튼을 누르면 옆에 떠오르는 링크 복사 패널이나, 필터 아이콘 옆에 펼쳐지는 조건 선택 패널이 팝오버입니다. 화면 전체를 덮지 않고 트리거 근처에 붙어 뜨기 때문에, 사용자는 자신이 방금 무엇을 눌러서 이 패널이 나왔는지 그 맥락을 시선에서 놓치지 않습니다.
왜 중요한가
팝오버는 툴팁과 모달 사이의 빈자리를 정확히 메우는 패턴입니다. 툴팁처럼 가볍게 트리거 곁에 붙지만 안에서 실제 조작이 가능하고, 모달처럼 상호작용을 담지만 화면을 어둡게 덮어 흐름을 끊지는 않습니다. 그래서 자잘한 설정을 바꾸거나, 짧은 메뉴를 고르거나, 링크를 복사하는 것처럼 잠깐이면 끝나는 일에 잘 어울립니다. 필요할 때만 살짝 열렸다가 볼일이 끝나면 조용히 사라지므로, 매번 페이지를 옮기거나 큰 창을 띄우지 않고도 작은 작업들을 제자리에서 해결할 수 있습니다. 이렇게 무거운 모달을 아껴 두면 사용자의 흐름이 훨씬 매끄러워지고, 화면도 필요 이상으로 복잡해지지 않습니다. 결국 팝오버를 잘 쓰는 화면은 작은 일은 그 자리에서 가볍게, 큰 결정만 모달로 무겁게 처리하는 리듬을 갖추게 됩니다.
흔한 실수
- 팝오버와 툴팁을 뒤섞어 쓰는 것입니다. 단순한 설명일 뿐인데 클릭으로 열리는 팝오버에 담거나, 반대로 버튼이 들어가는 조작 패널을 호버로 뜨는 툴팁에 넣으면 사용자가 언제 무엇을 기대해야 할지 헷갈립니다.
- 바깥을 눌러도 닫히지 않게 만드는 것입니다. 팝오버는 잠깐 쓰고 넘어가는 가벼운 패널이라, 다른 곳을 눌렀을 때 자동으로 닫히지 않으면 화면에 계속 남아 방해가 됩니다.
- 화면을 거의 덮을 만큼 크고 복잡한 내용을 팝오버에 담는 것입니다. 이 정도로 무거운 작업은 트리거 옆에 붙는 작은 패널보다 모달이나 별도 페이지가 어울리며, 억지로 팝오버에 넣으면 위치가 어긋나거나 화면 밖으로 잘려 나가기 쉽습니다.
실무 팁
- 팝오버는 클릭으로 열리고 안에서 조작이 가능하다는 점에서 툴팁과 다르고, 화면을 덮지 않고 트리거 옆에 붙는다는 점에서 모달과 다릅니다. 이 성격을 살려 공유나 필터, 간단한 메뉴처럼 맥락을 유지한 채 잠깐 처리할 일에 쓰세요.
- 바깥 영역을 누르거나 ESC 키를 눌렀을 때 팝오버가 닫히게 만드세요. 열고 닫기가 가벼워야 사용자가 부담 없이 열어 보고, 볼일이 끝나면 자연스럽게 넘어갈 수 있습니다.
- 트리거와 패널을 시각적으로 이어 두세요. 화살표 꼬리를 붙이거나 위치를 딱 붙여, 이 패널이 방금 누른 그 버튼에서 나왔다는 관계가 한눈에 보이게 하면 맥락이 흐트러지지 않습니다.
AI에게 시키기
아래에 붙여넣을 UI 요구사항이 팝오버·툴팁·모달 중 무엇에 맞는지 판정해줘. 기준은 이렇게 잡아: 클릭으로 열리고 안에 버튼·입력창·목록처럼 직접 조작하는 요소가 들어가면 팝오버, 호버로 떠서 짧은 설명만 보여 주면 툴팁, 화면을 어둡게 덮을 만큼 무겁고 복잡한 작업이면 모달이야. [기능 설명 — 예: 공유 버튼 옆 링크 복사 패널]에 대해 셋 중 하나를 고르고 이유를 한 줄로 달아줘. 팝오버로 판정되면 트리거 바로 옆에 붙여 맥락이 유지되게, 무거운 작업이면 모달이나 별도 페이지로 옮기라고 알려줘.
[트리거 — 예: 필터 아이콘 버튼]을 누르면 그 바로 옆에 뜨는 팝오버를 만들어줘. 트리거를 클릭했을 때 옆에 붙여 열리게 하고, 안에는 [담을 내용 — 예: 조건 선택 체크박스와 적용 버튼]을 넣어줘. 바깥 영역을 클릭하거나 ESC 키를 누르면 닫히게 하고, 화살표 꼬리를 붙이거나 트리거에 딱 붙여서 이 패널이 방금 누른 버튼에서 나왔다는 게 한눈에 보이게 해줘. 트리거가 화면 가장자리에 있어도 패널이 화면 밖으로 잘리지 않게 위치를 반대쪽으로 뒤집는(flip) 처리도 넣어줘. 화면을 거의 덮을 만큼 커지지 않게, 내용은 잠깐이면 끝나는 수준으로만 유지해줘.
아래에 붙여넣을 팝오버 코드를 점검해서 규칙에 어긋나는 부분을 고쳐줘. 먼저 바깥 영역 클릭과 ESC 키 두 가지로 다 닫히는지 확인하고, 빠진 게 있으면 추가해줘. 호버로만 뜨는데 안에 버튼·입력창이 들어 있으면 클릭으로 여는 팝오버로 바꾸고, 반대로 짧은 설명뿐이면 툴팁으로 정리해줘. 트리거가 화면 가장자리에 있을 때 패널이 화면 밖으로 잘리지 않게 위치를 뒤집고, 트리거와의 연결이 안 보이면 화살표 꼬리를 붙이거나 위치를 트리거에 붙여줘. 바꾼 항목을 '문제→수정' 형태로 정리해줘.