headless (2) 썸네일형 리스트형 쉽고 유연하게 Tooltip 컴포넌트 만들기 (floating-ui를 활용한) 개요 프로덕트를 개발하다 보면 특정 요소나 새로운 기능에 대해 UX를 해치지 않는 선에서 부연 설명이 필요한 경우가 있습니다. 이러한 경우를 위해 Tooltip이라는 UI 구성요소를 자주 사용하는데, 오늘은 이러한 Tooltip을 라이브러리를 활용하여 어떻게 빠르고 유연하게 만들 수 있는지 알아보겠습니다. 접근 먼저 직접 구현하는 것도 방법이지만 보다 잘 만들어진 라이브러리를 활용하는 것도 좋겠다는 생각을 했고 이를 활용하면서도 여러 방면으로 유연한 컴포넌트를 설계하는 것을 목표로 검색을 시작했습니다. 일단 잘 만들어진 라이브러리에서는 어떤 방식으로 만들었는지 참고해 보기로 하고 개인적으로 유연하게 잘 만든 UI 라이브러리로 생각하고 있는 Radix-ui는 어떻게 만들었는지 살펴보았습니다. 실제 Tool.. useTouchNavigation 개발기 일단 너무 오랜만에 글을 올리게 되어 상당히 어색하지만, 계속해서 개발을 열심히 하고있고 개인적으로 노션에만 아카이빙하던 것들을 앞으로는 다시 공개적으로 아카이빙하면서 부족한점을 채워가야겠다는 스탠스로 방향을 정했습니다. (_ _) 만들게 된 계기 현재 현업에서는 속도감있는 서비스제공을 위해 메인 앱 내에서 웹뷰로 일부 피처 서비스를 제공하고있고, 이러한 웹뷰에서는 본앱과 유사한 경험을 주는 유저에게 제공하는 것이 주요한 목적 중 하나였습니다. 따라서 유저가 많은 컨텐츠를 접하고 이를 유연하게 이동하기 위해 우측 고정 네비게이션 바가 필요했고, 이러한 요구사항을 구현함에 있어서 custom hook으로 headless하게 기능을 제공할 수 있겠다는 생각에 작업하게 되었습니다. 기능적 한계 현 버전에서는 .. 이전 1 다음
