작업 소개 단순한 소개형 페이지가 아니라, 고객 유입과 상담 전환을 함께 고려한 리드 수집형 홈페이지 진단 서비스로 기획하고 구축한 React 기반 프로젝트입니다. 사용자가 홈페이지 주소와 기본 정보를 입력하면 사이트의 주요 이슈를 직관적으로 확인할 수 있도록 구성했으며, 진단 결과 요약부터 개선 포인트 안내, 상담 연결까지 자연스럽게 이어지는 흐름으로 설계했습니다. 프론트엔드는 React 기반으로 구성하여 컴포넌트 단위로 관리성과 확장성을 높였고, 진단 로직은 Google 성능 및 검색 관련 지표 기반 구조를 활용해 속도, 모바일 최적화, 검색 노출, 전환 요소 등 핵심 항목을 시각적으로 보여줄 수 있도록 구현했습니다. 단순히 사이트를 분석해주는 페이지가 아니라, 고객이 현재 홈페이지의 문제를 체감하고 개선이 필요하다는 인식을 갖도록 유도하여 최종적으로 상담 문의 전환까지 연결되는 점이 이 프로젝트의 핵심입니다. 진행 내용 홈페이지 URL 입력 기반의 진단 요청 폼을 개발했으며, 업종 및 연락처 등 리드 수집 기능을 함께 구성했습니다. 진단 결과 요약 화면을 설계하고 속도, 모바일, 검색, 전환 요소 등 핵심 항목을 시각화하여 사용자가 문제를 직관적으로 파악할 수 있도록 했습니다. 개선 포인트를 제안하는 기능을 구현했으며, PDF 다운로드 또는 상담 연결 CTA를 구성하여 상담 문의로 자연스럽게 이어지도록 설계했습니다. 모바일, 태블릿, PC 전 기기에 대응하는 반응형 UI를 적용했으며, React 기반의 컴포넌트 구조와 Google 성능 분석 지표 기반의 진단 로직을 함께 구축했습니다. 작업 결과 고객이 자신의 홈페이지 URL만 입력하면 핵심 문제를 빠르게 확인할 수 있는 진단 환경을 구축했으며, 진단 결과를 통해 자연스럽게 상담 문의로 이어지는 전환 구조를 완성했습니다. 브랜드, 병원, 뷰티, 소상공인 홈페이지처럼 문의가 적거나 이탈이 발생하는 이유를 설명하기 어려운 경우, 이러한 진단형 랜딩페이지를 통해 고객의 관심을 끌고 신뢰를 형성할 수 있음을 확인했습니다. 기획, UI/UX 설계, 프론트엔드 개발, 진단 로직 구현, 리드 수집 구조 설계까지 전 과정을 직접 수행한 프로젝트이며, 단순한 홈페이지 제작을 넘어 고객 유입부터 문제 인식, 상담 전환까지의 흐름을 설계한 것이 가장 큰 특징입니다.