REACT4 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. [개선] 장기요양시설 비교 기능 개선기 — 데이터, UX, 공유까지 시니어 케어 정보 플랫폼 시니어 숲을 개발하면서 핵심 기능 중 하나인 시설 비교(Comparison) 화면을 대대적으로 개선했습니다. 단순한 UI 리터치를 넘어, 데이터 설계부터 URL 보안, 소셜 공유 최적화까지 다양한 측면을 다루게 되어 그 과정을 공유합니다.1. 배경: 무엇이 문제였나초기 비교 기능은 두 시설의 기본 정보만 카드 형태로 나열하는 수준이었습니다. 사용자 입장에서 "이 시설이 저 시설보다 나은가?"를 판단하려면 각 시설 상세 페이지를 번갈아 켜야 하는 번거로움이 있었습니다. 구체적인 문제점은 다음과 같았습니다.비교 지표 부족: 정원, 등급 수준의 정보만 노출인력 정보 부재: 요양보호사·간호사·사회복지사 등 세부 인원 없음URL 보안: 내부 DB의 raw numeric ID가 URL에 그.. 2026. 2. 20. [개선] 위치 정보 기반 시설 조회: Antigravity 사용한 VibeCoding 기존에 유저의 위치 정보를 활용하지 않고 DB에 입력된 순서대로 노출이 되고 있던 상황이라 위치정보를 활용하도록 개선을 진행했습니다.위치 기반 서비스(Location Based Service)를 개발할 때 가장 골치 아픈 점은 '유저가 언제나 협조적이지 않다'는 것입니다. GPS를 꺼두거나, 권한 요청 팝업에서 단호하게 '거절'을 누르는 유저는 생각보다 많습니다. 이때 개발자가 준비한 로직이 멈춰버린다면 그건 실패한 서비스입니다.오늘은 다음과 같은 요구사항을 바탕으로, 유저 위치 정보가 없어도 중단 없이 돌아가는 시설 조회 시스템을 Antigravity를 이용해서 vibe 코딩으로 작업 해봤습니다.1. 요구사항 정의 (Input Prompt)먼저, 이번 작업의 시작점이 된 요구사항입니다. 실무에서 흔히 .. 2026. 2. 10. 이전 1 다음
