웹사이트에서 버튼을 누르면 살짝 떠오르는 화면이 있습니다. 메뉴를 펼치는 드롭다운, 마우스를 올리면 뜨는 설명 풍선, 저장이 끝났다고 알려주는 작은 알림 같은 것들입니다. 화면 위에 잠깐 겹쳐 떠 있다가 사라진다고 해서 흔히 '떠 있는 화면(floating UI)'이라 부릅니다. 별것 아닌 듯 보여도, 이 작은 화면 하나를 제대로 만드는 일은 의외로 손이 많이 갑니다.
작은 화면 하나에 코드가 한 보따리였다
예전에는 떠 있는 화면을 띄우려면 자바스크립트로 일일이 처리해야 했습니다. 버튼을 누르면 열고, 다른 곳을 누르면 닫고, 키보드 ESC를 눌러도 닫히게 하고, 다른 요소에 가려지지 않도록 z-index라는 '쌓임 순서'를 두고 씨름해야 했습니다. 이 모든 동작을 손으로 짜다 보니, 정작 사소한 메뉴 하나에 버그가 숨고 코드가 불어났습니다.
이제는 HTML 한 줄이면 된다
최근 브라우저들이 popover라는 새 속성을 표준으로 받아들였습니다. 떠 있게 만들 영역에 popover를 적고, 그 화면을 여는 버튼에 어떤 영역을 열지 가리키는 표시만 더하면 끝입니다. 자바스크립트를 한 줄도 쓰지 않아도 버튼과 화면이 서로 이어지고, 누르면 열리고 다시 누르면 닫힙니다.
귀찮던 일을 브라우저가 대신 해준다
popover가 반가운 진짜 이유는 그동안 사람이 떠안던 일을 브라우저가 알아서 처리해 준다는 점입니다.
- 맨 위에 띄우기: z-index를 손볼 필요 없이 항상 다른 요소 위에 또렷이 표시됩니다.
- 바깥을 누르면 닫기: 화면 다른 곳을 누르면 자연스럽게 사라집니다.
- ESC 키로 닫기: 키보드만 쓰는 손님도 손쉽게 닫을 수 있습니다.
- 한 번에 하나만: 새 화면을 열면 앞서 열려 있던 화면이 알아서 닫혀 겹치지 않습니다.
작은 회사 웹사이트엔 무엇이 달라지나
이런 변화는 화려한 기능이 아니라 '안정감'으로 돌아옵니다. 자바스크립트로 직접 짠 메뉴는 브라우저가 바뀌거나 시간이 지나면 어딘가 어긋나 손님 앞에서 먹통이 되기 쉽습니다. 반면 브라우저가 표준으로 보장하는 동작은 한결 덜 깨지고, 키보드 사용자나 화면 낭독기를 쓰는 손님에게도 더 친절합니다. 코드가 줄면 나중에 고치고 관리하는 비용도 함께 줄어듭니다.
겉이 아니라 토대를 챙기는 일
popover 같은 변화는 손님 눈에 직접 보이지는 않습니다. 하지만 메뉴가 매번 제대로 열리고, 알림이 또렷이 떠오르고, 어느 기기에서나 똑같이 동작하는 '당연함'이 쌓여 웹사이트의 신뢰가 됩니다. CYAN은 눈에 띄는 디자인만큼 이런 보이지 않는 토대를 함께 챙겨, 시간이 지나도 덜 깨지고 오래가는 웹사이트를 만들고자 합니다.