웹사이트 · 포트폴리오 플랫폼
Celis — 공식 홈페이지 및 포트폴리오 플랫폼
성과 지표: Lighthouse SEO 100점 달성
Client
개인 개발자 프로젝트
Duration
2주
Tech Stack
Next.jsTypeScriptTailwind CSSFramer Motion
도전 과제 (Challenge)
- • 기존 단일 소개 페이지 구조로 인해 검색 크롤러가 색인할 만한 페이지가 부족하여 롱테일 키워드를 통한 유기적 검색 유입 한계 존재.
- • 단순한 이름/이메일 위주의 이메일 폼만 있어, 의뢰하려는 가망 고객의 기획 상태나 마감 일정 등을 필터링하여 리드 품질을 선별할 장치가 부재함.
- • 웹사이트에 들어온 사용자가 실제로 문의에 도달하고 전환 완료하는 비즈니스 퍼널에 대한 세부 분석 데이터의 부족.
해결책 (Solution)
- • Next.js App Router의 dynamic routes를 활용해 `/blog`, `/blog/[slug]`, `/portfolio/[id]` 등의 서브 라우트 구조를 도입하여 색인 대상 페이지 다각화.
- • Metadata API와 `sitemap.ts`, `robots.txt` 설정을 추가하여 빌드 타임에 전 페이지를 정적(SSG)으로 프레렌더링하고 검색 크롤러 색인 최적화.
- • 문의 작성 페이지(`contact.tsx`)에 기획 완성도, 개발 기간을 선택하는 필드와 인풋 포커스 감지 이벤트 추가 및 GA4 `generate_lead` 전환 이벤트 연동.
성과 지표 (Impact)
- • 서브페이지 추가 및 검색 최적화(Sitemap/Robots) 세팅으로 구글 및 네이버 검색 노출 가능 범위 확장.
- • 마케팅 퍼널 추적 체계 구축을 통해 사용자의 유입 대비 문의 전환율(CRO)과 이탈 위치를 데이터로 파악할 수 있는 기술적 환경 완비.
프로젝트 비하인드
개인 개발자 포트폴리오 사이트가 단순한 '이력서 나열'을 넘어, 실제로 방문자가 흥미로운 IT 아티클을 읽고 개발 문의를 남기도록 유도하는 '리드 제네레이션 플랫폼'으로 작동하도록 리팩토링했습니다.애플 스타일의 모노크롬 다크모드 대응 레이아웃을 유지하면서도, Framer Motion 및 Lenis 스크롤 러너를 사용해 읽기 편하고 매끄러운 동작성을 연출했습니다.
프로젝트 구현 및 연동 의뢰
Celis의 구현 사양 및 검토 프로세스를 기반으로 한 소프트웨어 구축 의뢰가 필요하시다면 요구사항을 기재해 주십시오. 담당 기술 아키텍트가 요건 분석 후 조속히 상세 기술 제안을 회신하겠습니다.