HealthCatcher Web: 헬스캐처 공식 홈페이지 만들기
헬스캐처 사업 소개, 서비스 영역, 팀 소개, 커뮤니티 소식, 제휴 문의, 개인정보처리방침을 담은 공식 홈페이지입니다. 2025년 2월 사업 정리 전까지 브랜드 소개 채널로 사용했습니다.
프로젝트 소개
헬스캐처 브랜드와 사업 영역을 소개하기 위한 Vue 기반 공식 홈페이지 배포된 홈페이지와 Vue/Vite 저장소의 컴포넌트 구조, 이미지 자산, Git 기록을 기준으로 정리했습니다. 사업 소개 채널로서 브랜드 첫 화면, 사업 영역, 팀 소개, 제휴 문의, 정책 문서까지 갖춘 프로젝트입니다.
- 역할
- Vue 랜딩 페이지 구현, 반응형 UI, 라우팅, 콘텐츠 섹션 구성, Vercel 배포
- 형태
- 헬스캐처 사업 프로젝트
- 상태
- 사업 정리
Main Screen
홈페이지 메인 화면
배포된 헬스캐처 홈페이지의 첫 화면 구성을 포트폴리오 안에서 다시 보여줍니다.
구현한 기능
- 브랜드 메인 히어로와 회사 소개 섹션 구성
- 건강 앱, 건강 운세, 건강 제품 사업 영역 페이지 구성
- 팀 소개, 파트너십 목표, 제휴 문의, Q&A 섹션 구현
- 커뮤니티 소식과 공지성 콘텐츠 섹션 구성
- 개인정보처리방침과 약관 페이지 추가
- 모바일 환경 대응을 위한 섹션별 패딩과 내비게이션 조정
사용 기술
홈페이지는 Vue 3, Vite, Vue Router, Pinia, Tailwind CSS 기반으로 구성했고, Vercel 정적 배포에 맞춰 페이지와 섹션 컴포넌트를 나눴습니다.
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: 개인정보처리방침 페이지를 별도 라우트로 제공
배운 점
- 사업 홈페이지는 기술 과시보다 방문자가 브랜드, 서비스, 제휴 가능성을 빠르게 이해하는 정보 구조가 먼저라는 점을 배웠습니다.
- 팀/사업 소개 콘텐츠는 반복 수정이 잦아 페이지보다 섹션 컴포넌트 단위로 쪼개는 편이 유지보수에 유리했습니다.
- 모바일에서 히어로 문구와 CTA가 자연스럽게 보이도록 폰트 크기와 줄바꿈을 따로 설계해야 했습니다.
- 서비스가 종료되어도 홈페이지와 저장소는 당시 문제 정의와 제품 방향성을 설명하는 중요한 포트폴리오 기록이 될 수 있다는 점을 체감했습니다.