프론트엔드2 [지도 기반 서비스] 검색 UX와 렌더링 성능 최적화 경험기 우리 서비스는 지도 기반으로 요양기관 검색 및 비교 기능을 제공하고 있습니다. 이번 업데이트에서는 사용자가 더 직관적이고 편안하게 시설을 검색할 수 있도록 검색 기능과 지도 UI 전반을 개선했습니다.이 과정에서 1) 지도의 프로그래밍적 이동과 사용자 상호작용의 분리, 2) React의 렌더링 최적화(Empty State 및 참조 비교), 그리고 3) 모바일/데스크톱 반응형 UX 설계라는 3가지의 재미있는 기술적 챌린지가 있었습니다. 이번 글에서는 이 문제들을 어떻게 해결했는지 공유하고자 합니다.1. 지도의 '프로그래밍적 이동'과 '사용자 드래그' 구분하기문제 상황사용자가 지도를 드래그하여 이동할 때만 "이 위치에서 검색" 버튼이 나타나게 하고 싶었습니다. 하지만 사용자가 검색창에 지역명(예: "강남구").. 2026. 2. 25. Antigravity와 험난한 UI 수정기 개발 현장에서 디자인과 기능을 맞추다 보면, 기획 단계에서 예상치 못한 변수들을 마주하게 됩니다. 특히 '데이터의 길이'나 '정보의 밀도'에 따른 가독성 문제는 실제 데이터를 넣어보기 전까지는 체감하기 어렵죠.오늘은 시설 관리 서비스의 목록 화면(Facility Card)을 개발하면서, AI툴과 UI를 점진적으로 개선해 나간 과정을 생생한 대화 형식으로 기록해 보았습니다.초기 화면1. 첫 번째 이슈: 3자리 숫자와 레이아웃 깨짐[문제 상황]시설 카드 내의 인원 정보(정원, 현원 등)가 3자리를 넘어가는 경우, 텍스트가 다음 줄로 밀려 내려가면서 전체적인 카드 높이가 들쭉날쭉해지는 현상이 발생했습니다.💬 사용자 피드백:"목록 화면에서 인원 관련 자리수가 3자리가 넘어가면 줄바꿈 되어서 길어지게 나오는 경.. 2026. 2. 11. 이전 1 다음
