HealthCatcher Web헬스캐처 공식 홈페이지 만들기
헬스캐처 사업을 소개하던 공식 홈페이지. 브랜드 소개, 사업 영역, 제휴 문의, 정책 문서를 한 흐름으로 구성했습니다.
프로젝트 소개
헬스캐처 브랜드와 사업 영역을 소개하기 위한 Vue 기반 공식 홈페이지 사업 소개 채널로서 브랜드 첫 화면, 사업 영역, 팀 소개, 제휴 문의, 정책 문서까지 갖춘 공식 홈페이지입니다.
- 역할
- Vue 랜딩 페이지 구현, 반응형 UI, 라우팅, 콘텐츠 섹션 구성, Vercel 배포
- 형태
- 헬스캐처 사업 프로젝트
- 상태
- 종료/보관
Main Screen
홈페이지 메인 화면
배포된 헬스캐처 홈페이지의 첫 화면 구성을 포트폴리오 안에서 다시 보여줍니다.
구현한 기능
- 브랜드 메인 히어로와 회사 소개 섹션 구성
- 건강 앱, 건강 운세, 건강 제품 사업 영역 페이지 구성
- 팀 소개, 파트너십 목표, 제휴 문의, Q&A 섹션 구현
- 커뮤니티 소식과 공지성 콘텐츠 섹션 구성
- 개인정보처리방침과 약관 페이지 추가
- 모바일 환경 대응을 위한 섹션별 패딩과 내비게이션 조정
사용 기술
홈페이지는 Vue 3, Vite, Vue Router, Pinia, Tailwind CSS 기반으로 구성했고, Vercel 정적 배포에 맞춰 페이지와 섹션 컴포넌트를 나눴습니다.
프론트엔드
언어
JavaScript
Vue 기반 정적 홈페이지를 빠르게 구성하고 브라우저 환경에서 단순하게 운영하기 위해 사용했습니다.
프레임워크/라이브러리
Vue 3
작은 팀에서 브랜드 홈페이지를 빠르게 구성하고 섹션 컴포넌트를 단순하게 관리하기 위해 선택했습니다.
Vite
정적 홈페이지 개발 서버와 빌드 속도가 빨라 랜딩 페이지 작업에 적합했습니다.
Vue Router
소개, 사업, 커뮤니티, 문의, 정책 페이지를 명확한 라우트로 나누기 위해 사용했습니다.
Pinia
Vue 생태계의 가벼운 상태 관리 도구로, 공지 모달이나 전역 상태 확장 가능성을 남기기 위해 포함했습니다.
스타일링
Tailwind CSS
반응형 패딩, 타이포그래피, 섹션 레이아웃을 빠르게 조정하기 위해 사용했습니다.
PostCSS
Tailwind 빌드 파이프라인을 구성하기 위한 기본 CSS 처리 도구로 사용했습니다.
인프라
배포
Vercel
정적 사이트를 빠르게 배포하고 외부에 공유하기 위해 선택했습니다.
구조와 개선
홈페이지는 페이지 라우트보다 섹션 컴포넌트가 핵심입니다. Home, About, Business, Community, Contact, Policy 페이지 안에서 브랜드 소개와 사업 콘텐츠를 재사용 가능한 섹션 단위로 나누었습니다.
- Home: Hero, Logo, Services, News, Partnership, NoticeModal 섹션 조합
- About: 회사 소개와 팀 소개 컴포넌트 분리
- Business: 건강 앱, 건강 운세, 건강 제품 섹션으로 사업 영역 설명
- Community: 소식 탭과 게시글 테이블 형태의 콘텐츠 영역 구성
- Contact: 제휴 문의와 Q&A 섹션 구성
- Policy: 개인정보처리방침 페이지를 별도 라우트로 제공
성과와 회고
- 사업 홈페이지는 기능 수보다 정보 구조가 성과를 좌우했습니다. Home, About, Business, Community, Contact, Policy로 라우트를 나누고, 사업 소개와 제휴 문의까지 한 흐름에서 읽히도록 구성했습니다.
- 반복 수정이 많았던 브랜드 문구와 사업 소개 영역은 페이지 단위가 아니라 섹션 컴포넌트 단위로 쪼갰습니다. 덕분에 앱 소개 이미지, 정책 문서, Q&A 같은 콘텐츠를 별도 화면 영향 없이 교체할 수 있었습니다.
- 모바일에서는 히어로 이미지와 CTA가 쉽게 밀려서, 섹션별 패딩과 줄바꿈을 따로 조정했습니다. 단순 반응형보다 첫 화면에서 브랜드명과 제휴 문의 동선이 보이는지가 더 중요했습니다.
- 2025년 2월 사업 종료 이후에도 홈페이지는 당시 문제 정의와 제품 방향을 설명하는 기록으로 남았습니다. 서비스가 사라져도 브랜드 페이지가 사업 맥락을 보존하는 역할을 한다는 점을 확인했습니다.