본문 바로가기

상태관리2

Next.js로 만든 장기요양등급 자가진단 모의평가 — 설계부터 SEO까지 시니어 숲 프로젝트의 핵심 기능인 '내 요양등급 찾기' 모의평가 서비스를 기획·설계·구현한 과정을 기술적으로 정리합니다.1. 왜 만들었나노인장기요양보험의 등급 판정은 국민건강보험공단에서 직접 받아야 하지만, 신청 전에 "우리 부모님이 대략 몇 등급에 해당할까?"를 미리 가늠해보고 싶은 수요가 많습니다. 기존에는 이를 간단히 확인할 수 있는 웹 기반 도구가 부족했고, 있더라도 모바일 친화적이지 않거나 최신 수가 기준이 반영되지 않은 경우가 대부분이었습니다.시니어 숲에서는 보건복지부 고시 52개 평가 항목을 기반으로, 5분 안에 예상 등급과 2026년 기준 지원 혜택을 미리 확인할 수 있는 웹 모의평가 도구를 개발했습니다.2. 기술 스택 한눈에 보기영역선택 기술이유프레임워크Next.js (App Router.. 2026. 2. 27.
[지도 기반 서비스] 검색 UX와 렌더링 성능 최적화 경험기 우리 서비스는 지도 기반으로 요양기관 검색 및 비교 기능을 제공하고 있습니다. 이번 업데이트에서는 사용자가 더 직관적이고 편안하게 시설을 검색할 수 있도록 검색 기능과 지도 UI 전반을 개선했습니다.이 과정에서 1) 지도의 프로그래밍적 이동과 사용자 상호작용의 분리, 2) React의 렌더링 최적화(Empty State 및 참조 비교), 그리고 3) 모바일/데스크톱 반응형 UX 설계라는 3가지의 재미있는 기술적 챌린지가 있었습니다. 이번 글에서는 이 문제들을 어떻게 해결했는지 공유하고자 합니다.1. 지도의 '프로그래밍적 이동'과 '사용자 드래그' 구분하기문제 상황사용자가 지도를 드래그하여 이동할 때만 "이 위치에서 검색" 버튼이 나타나게 하고 싶었습니다. 하지만 사용자가 검색창에 지역명(예: "강남구").. 2026. 2. 25.