#UI
#web
#BottomSheet
Written by Paul
웹 개발을 하다 보면, 문제를 ‘기술적으로’ 해결하려다 오히려 더 복잡하게 만들게 되는 순간들이 있습니다. 최근에 제가 바텀시트(Bottom Sheet) UI를 개발하면서 문득 떠오른 이야기 하나가 있습니다.
느린 엘리베이터를 해결한 방법
한 건물의 관리인은 세입자들로부터 엘리베이터가 너무 느리다는 불만을 지속적으로 받았습니다. 하지만 실제 엘리베이터의 속도는 타 건물과 크게 다르지 않았고, 기계적으로 문제도 없었습니다. 결국 이 문제는 ‘기술적인 문제’라기보단 ‘기다림에 대한 인식’에서 비롯된 문제였던 것이죠.
건물주는 다음과 같은 아이디어를 떠올립니다.
“사람들이 엘리베이터를 기다리는 동안, 주의를 돌릴 수 있는 무언가를 제공하면 어떨까?”
그리고 엘리베이터 옆에 커다란 거울을 설치했습니다. 그 결과, 엘리베이터가 느리다는 컴플레인은 눈에 띄게 줄어들었습니다. 문제를 직접 해결한 것이 아니라, 문제를 느끼는 ‘경험’을 바꾼 것입니다.
이 사례는 제가 바텀시트를 개발하면서 겪은 상황과 참 닮아 있었습니다.
바텀시트는 쉽지만 어렵다
사실 바텀시트 UI 자체는 기술적으로 어려운 컴포넌트는 아닙니다. position: fixed와 약간의 CSS 애니메이션만으로도 금방 구현할 수 있으니까요.
하지만 실제로 사용 가능한 바텀시트를 구현하려면, 수많은 계륵 같은 문제들을 마주하게 됩니다:
- 바텀시트가 열릴 때 배경 스크롤은 막아야 한다.
- 바텀시트 내부에 input 요소가 있어 모바일 키보드가 열릴 경우에도 UI가 깨지지 않아야 한다.
- 바텀시트 내부는 스크롤이 가능해야 한다.
- indicator를 드래그할 때는 시트 전체가 자연스럽게 움직여야 한다.
이 중 어느 하나도 단순한 CSS로 완벽하게 해결하기 어렵습니다. 특히 모바일 브라우저, 그중에서도 iOS Safari에서의 특이한 렌더링 방식과 키보드 동작은 복잡함을 배가시킵니다.
기술적인 접근보다 중요한 ‘생각의 전환’
예를 들어, indicator(바텀시트를 끌어올리거나 내릴 수 있는 손잡이)를 구현할 때도 단순히 스크롤 가능한 content 위에 올려놓으면, 사용자가 드래그할 때 indicator는 같이 스크롤되어버립니다. 이럴 땐 indicator와 콘텐츠를 서로 독립적인 영역으로 분리해야 합니다.
저는 indicator 영역을 position: fixed로 따로 분리하여 항상 상단에 고정되도록 처리했고, 그 아래에 스크롤 가능한 content zone을 배치했습니다.
기술적으로 대단한 방법은 아니지만, 문제를 보는 관점을 조금만 달리한 것이죠.
단순한 해결책은 없다
물론 바텀시트를 구현하는 데 있어 단순한 관점 전환만으로는 충분하지 않습니다. 모바일 웹에서의 키보드 감지, iOS에서의 뷰포트 대응, 브라우저 간 스크롤 이벤트 처리 등은 여전히 고난이도의 기술적 디테일이 요구됩니다.
하지만 중요한 건, 우리는 항상 기술적인 해결책만을 고집하기보다, 사용자의 경험을 바꾸는 방식으로 문제를 재정의할 수 있다는 것입니다.
마치며
개발을 하다 보면 문제를 해결하기 위해 더 복잡한 기술을 도입하고 싶어질 때가 있습니다. 하지만 때로는 엘리베이터 옆의 거울처럼, 문제를 느끼는 방식 자체를 바꿔보는 것이 더 나은 해결책일 수 있습니다.
바텀시트를 개발하며 저는 이 점을 다시 한 번 절실히 느꼈고, 앞으로도 이런 식의 ‘기지’와 ‘전환’이 기술 못지않게 중요하다는 것을 잊지 않으려 합니다.