한화비전 · 2025.02 – 2025.03
한화비전 Keeper 공식 홈페이지 – SEO 중심 Next.js 사이트 1개월 구축
디자인 시스템부터 전 화면까지 1개월 만에 혼자 구축, 주요 키워드 구글 최상단 노출
개요
AI CCTV 기반 매장 관리 서비스 Keeper의 공식 홈페이지를 디자인 시스템 정의부터 전 화면 구현까지 혼자 맡아 1개월 만에 구축했습니다.
배경
문제
서비스를 알리고 검색으로 유입을 만들 공식 홈페이지를 짧은 일정 안에 새로 만들어야 했습니다.
주요 작업
- 라이브러리 없이 CSS 키프레임 애니메이션으로 모든 인터랙션 구현
- SSR, 메타·Open Graph 태그, LCP 최적화 등 기술적 SEO 전반 설계·구현
- 블로그 어드민: Tiptap 에디터를 커스터마이징한 CMS, HTML 정제와 URL 프로토콜 검증 등 XSS 방지 처리
성과
- 주요 키워드 구글 최상단 노출
기술적 SEO로 '알바비 정산 방법', '매장 도난 사고' 등 주요 키워드에서 구글 최상단에 노출됐습니다.
- 자연 유입 11,000회
검색 자연 유입 11,000회, 평균 세션 1분 40초를 기록했습니다.
핵심 기능
- 01
라이브러리 없는 인터랙션
모든 스크롤·전환 효과를 CSS 키프레임 애니메이션으로 직접 구현했습니다.
- 02
블로그 CMS
Tiptap 에디터를 커스터마이징해 콘텐츠를 직접 작성하고 발행하는 어드민을 만들었습니다.
화면
※ 이미지와 영상은 프로젝트 참여 당시 화면입니다.
