사이드프로젝트10 Porkbun에서 도메인 구매 및 구글 서치콘솔 주소 변경 가이드 Vercel 프로젝트 Porkbun 도메인 연결 및 구글 서치콘솔 주소 변경 가이드Porkbun이 대체적으로 com 도메인 가격도 적당하고 갱신할 때도 비용이 같아 Porkbun에서 도메인을 구매하고 Vercel 프로젝트에 연결하는 방법, 그리고 이메일 포워딩 설정 및 구글 서치콘솔(GSC) 주소 변경 절차를 정리합니다.1. Porkbun 도메인 구매 및 이메일 포워딩 설정도메인 구매 절차도메인 검색: Porkbun 메인 페이지에서 원하는 도메인을 검색하여 장바구니에 담습니다.결제: 가입 및 결제를 진행합니다. WHOIS Privacy는 기본적으로 무료 적용됩니다.이메일 인증: 등록한 이메일로 발송된 ICANN 인증 메일의 링크를 클릭하여 소유권 인증을 완료합니다.이메일 포워딩 설정 (Gmail 수신)G.. 2026. 3. 11. 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. 이전 1 2 다음
