드로어

정의

드로어는 화면의 가장자리에서 안쪽으로 스르륵 밀려 나오는 패널입니다. 이름 그대로 서랍처럼 왼쪽·오른쪽·아래에서 슬라이드로 등장했다가, 볼일이 끝나면 다시 같은 방향으로 미끄러져 사라집니다. 그 안에는 사이트 전체 내비게이션 메뉴, 목록을 걸러 주는 필터, 항목 하나의 상세 정보처럼 평소엔 접어 두었다가 필요할 때만 펼치고 싶은 내용을 담습니다. 모바일에서 햄버거 버튼을 눌렀을 때 옆에서 미끄러져 나오는 메뉴가 가장 흔한 드로어입니다. 화면을 새로 옮기지 않고도 부가 화면을 잠깐 불러왔다 접을 수 있다는 점이 핵심입니다. 넓게 펼쳐진 본문은 그대로 둔 채, 가장자리 한 칸만 빌려 쓰는 셈입니다.

왜 중요한가

드로어의 강점은 등장하는 위치에 있습니다. 모달이 화면 한가운데로 튀어나와 시선을 강하게 붙잡는다면, 드로어는 가장자리에서 조용히 나오기 때문에 원래 보던 내용을 덜 가리고 맥락을 덜 끊습니다. 사용자는 뒤에 있던 화면을 여전히 곁눈으로 인지한 채, 잠깐 서랍을 열어 메뉴를 고르거나 필터를 조정하고 다시 하던 일로 돌아올 수 있습니다. 특히 화면이 좁은 모바일에서 유용한데, 평소에는 콘텐츠에 온전히 자리를 내주다가 필요한 순간에만 메뉴나 필터를 위해 공간을 빌려 오기 때문입니다. 그러면서도 열려 있는 동안에는 스크림으로 배경을 덮어 지금 드로어에 집중해야 한다는 신호를 분명히 주므로, 가벼움과 집중을 동시에 챙기는 패턴입니다. 화면 중앙을 비워 두면서도 지금 무엇을 다뤄야 하는지 흐릿하지 않게 짚어 주는 셈입니다.

흔한 실수

• 드로어를 열어 놓고 배경을 스크림으로 덮지 않는 것입니다. 뒤 화면이 그대로 밝게 보이면 사용자는 지금 드로어가 열려 있는 상태인지 헷갈리고, 어디를 눌러야 닫히는지도 짐작하기 어려워집니다.
• 바깥을 눌러도, 스와이프를 해도 닫히지 않게 만드는 것입니다. 특히 모바일에서는 가장자리로 쓸어 넘겨 닫는 동작이 몸에 배어 있어, 이 방법이 막혀 있으면 답답하게 느껴집니다.
• 너무 많은 내용을 드로어 한 칸에 욱여넣는 것입니다. 서랍 안이 깊은 스크롤로 가득 차면 가볍게 열었다 접는다는 장점이 사라지고, 차라리 별도 페이지가 나았을 상황이 됩니다.

실무 팁

• 드로어는 모달과 달리 가장자리에서 나와 맥락을 덜 끊는다는 점을 살려, 모바일 메뉴나 필터 패널처럼 잠깐 펼쳤다 접는 내용에 쓰세요. 열렸을 때는 배경을 스크림으로 덮고, 바깥 클릭과 스와이프로 자연스럽게 닫히게 하는 것이 사용자의 기대에 맞습니다.
• 드로어가 나오는 방향과 내용의 성격을 맞추세요. 내비게이션은 보통 왼쪽에서, 필터나 상세는 오른쪽이나 아래에서 여는 식으로 위치에 일관된 의미를 부여하면 사용자가 금세 익숙해집니다.
• 열고 닫히는 슬라이드 움직임에 짧고 부드러운 전환을 주되, 동작 최소화를 원하는 사용자를 위해 과한 애니메이션은 피하세요. 어느 방향에서 왔는지 눈으로 따라갈 정도면 충분합니다.

관련 개념