antigravity7 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. [개선] 모바일 뷰포트 수정과 직관적인 지도 검색 오늘 개발의 핵심 주제는 "사용자가 보고 있는 곳을 중심으로" 였습니다. 모바일 환경에서의 화면 높이 문제 해결부터, 내 위치가 아닌 내가 보고 있는 지도 중심으로 검색하는 경험까지, 사용자 경험(UX)을 한 단계 끌어올린 과정을 정리해 봅니다.1. 100vh의 배신, 그리고 100dvh로의 전환모바일 웹 개발자라면 누구나 한 번쯤 겪는 고통이 있습니다. 바로 브라우저 주소창(Address Bar)입니다.기존에는 min-h-screen이나 100vh를 사용해 전체 화면을 잡으려 했지만, 모바일 사파리 등에서는 주소창이 나타나거나 사라질 때 뷰포트 크기가 달라지며 하단 버튼이 가려지거나 불필요한 스크롤이 생기는 문제가 발생했습니다. 특히 지도 서비스에서는 하단 푸터나 줌 버튼이 가려지는 치명적인 UX 저하.. 2026. 2. 18. 커뮤니티 기능 개발 전 네이버 블로그 RSS & API로 연동하기 [Next.js]초기 서비스를 운영하다 보면 가장 곤란한 순간이 바로 '텅 빈 리뷰 섹션'을 마주할 때입니다. 자체 리뷰 시스템을 구축하고 데이터를 쌓기까지는 시간이 걸리죠. 오늘은 네이버 블로그의 데이터를 활용해 우리 서비스의 신뢰도를 즉시 높여줄 수 있는 임시 리뷰 시스템 구축기를 공유합니다.Vercel과 Supabase 환경에서 네이버 RSS와 검색 API를 통합하여 데이터 형식을 깔끔하게 맞추는 실전 가이드를 확인해 보세요.1. 사전 작업: 네이버 API 권한 획득데이터를 가져오기 전, 네이버 디벨로퍼스에 접속하여 애플리케이션을 등록하고 아래 키를 발급받아야 합니다. 이 키가 있어야 JSON 방식의 블로그 검색 결과를 호출할 수 있습니다.NAVER_CLIENT_IDNAVER_CLIENT_SECRE.. 2026. 2. 12. Antigravity와 험난한 UI 수정기 개발 현장에서 디자인과 기능을 맞추다 보면, 기획 단계에서 예상치 못한 변수들을 마주하게 됩니다. 특히 '데이터의 길이'나 '정보의 밀도'에 따른 가독성 문제는 실제 데이터를 넣어보기 전까지는 체감하기 어렵죠.오늘은 시설 관리 서비스의 목록 화면(Facility Card)을 개발하면서, AI툴과 UI를 점진적으로 개선해 나간 과정을 생생한 대화 형식으로 기록해 보았습니다.초기 화면1. 첫 번째 이슈: 3자리 숫자와 레이아웃 깨짐[문제 상황]시설 카드 내의 인원 정보(정원, 현원 등)가 3자리를 넘어가는 경우, 텍스트가 다음 줄로 밀려 내려가면서 전체적인 카드 높이가 들쭉날쭉해지는 현상이 발생했습니다.💬 사용자 피드백:"목록 화면에서 인원 관련 자리수가 3자리가 넘어가면 줄바꿈 되어서 길어지게 나오는 경.. 2026. 2. 11. 이전 1 2 다음
