[기획/개발] 앱 '두뇌 산책' 랜딩 페이지: Vanilla Stack 기반의 글로벌 SEO 엔지니어링

시니어 타겟의 브레인 트레이닝 서비스 '두뇌 산책(Brain Walk)'의 브랜드 가시성 확보와 글로벌 유입 최적화를 위한 웹 프론트엔드 구축 과정을 기록합니다. 이번 프로젝트의 주요 엔지니어링 목표는 "Runtime overhead 제거", "Edge-side Localization", 그리고 "Advanced SEO Schema"의 정밀한 구현이었습니다.

---

1. Stack Selection: Pure Vanilla vs. Modern Frameworks

최근 Next.js나 Remix 같은 현대적인 프레임워크가 표준으로 자리 잡았음에도 불구하고, 본 프로젝트는 Pure HTML/CSS/Vanilla JS 스택을 과감히 채택했습니다.

• 성능 최적화 (LCP & TTI): 실버 테크(Silver-tech) 타겟 유저들은 고성능 기기보다는 보급형 기기나 상대적으로 불안정한 네트워크 환경에서 접속할 확률이 높습니다. 프레임워크 런타임에 의한 Hydration 오버헤드나 번들 사이즈를 0으로 수렴시킴으로써, LCP(Largest Contentful Paint)를 0.8초 이내로 단속(Capping)하는 유의미한 성능 수치를 달성했습니다.
• Cold Start Elimination: 서버 사이드 렌더링(SSR) 대기 시간을 제거하고 정적 자산(Static Assets)을 전 세계 Edge 서버에 분산 서빙함으로써, TTFB를 극도로 단축했습니다.
• End-to-End Maintenance: Zero-dependency 정책을 통해 외부 라이브러리 업데이트에 따른 브레이킹 체인지를 방지하고, 장기적으로 운영 리스크를 최소화했습니다.

---

2. i18n & Edge-side Routing System

Cloudflare Pages 환경에서 다국어(한/영/일)를 효율적으로 서빙하기 위한 디렉터리 기반 아키텍처를 설계했습니다.

Localization Router Logic

유저의 브라우저 언어 환경(navigator.language)을 감지하여 가장 적합한 local path로 리다이렉트하는 경량 라우터를 구현했습니다.

// Entry: /index.html
(function() {
    const userLang = (navigator.language || navigator.userLanguage).slice(0, 2);
    const langMap = { 'ko': 'ko', 'ja': 'ja' };
    const targetPath = langMap[userLang] || 'en';

    // location.replace를 통한 히스토리 스택 관리 및 루프 방지
    window.location.replace(`./${targetPath}/`);
})();

단순한 이동이 아닌 location.replace를 사용하여 브라우저 히스토리 스택을 깔끔하게 유지함으로써, 뒤로가기 클릭 시의 사용자 경험(UX)까지 세밀하게 관리했습니다.

---

3. SEO Engineering: Technical Schema & Governance

단순한 메타 태그 삽입을 넘어, 검색 로봇에게 사이트의 다국어 구조를 명확히 각인시키는 Technical SEO를 정밀하게 설계했습니다.

Hreflang Configuration (XML Sitemap)

국가별/언어별 중복 콘텐츠(Duplicate Content) 페널티를 방지하고 최적의 언어 페이지를 추천하기 위해 hreflang 설정을 XML 사이트맵 레벨에서 통합 관리했습니다.

• x-default fallback: 매칭되는 언어가 없는 글로벌 유저들을 위해 루트 페이지를 기본값으로 명시하여 크롤러의 도달 범위를 확장했습니다.

Indexing Management & Crawl Budget

서치 엔진의 검색 품질을 높이기 위해 전략적으로 색인을 통제했습니다.

• noindex Tactics: 개인정보처리방침(privacy.html)과 같이 홍보 가치가 낮은 법적 공고문은 noindex, nofollow를 명시하여 검색 크레딧을 핵심 페이지로 집중시켰습니다.
• Robots-side Control: robots.txt에서 불필요한 경로를 사전에 차단함으로써 봇의 불필요한 크롤링 시도를 제거하고 인덱싱 효율을 최적화했습니다.

---

4. Branding Design & Visual Hierarchy Engineering

실버 테크 서비스의 신뢰감을 구축하기 위해 '따뜻하고 정돈된' 스타일 가이드를 준수했습니다.

• Logo Structure Refactoring: 기존 단일 span 구조를 logo-title과 logo-subtitle로 DOM 레벨에서 분리했습니다. 이를 통해 CSS Flexbox 기반의 수직 정렬과 타이포그래피 제어를 정교화하여, 서비스명과 슬로건의 시각적 위계(Visual Hierarchy)를 확립했습니다.
• Asset Pipeline Optimization: 수채화풍의 에셋들을 손실 없이 표현하면서도 용량을 최적화하기 위해 고압축 에셋 파이프라인을 점검했습니다.

---

5. Observability: Full-stack Analytics

데이터 기반의 서비스 고도화를 위해 GA4(Google Analytics 4) 통합 트래킹 시스템을 구축했습니다.

• 전역 트래킹 스크립트 구축: 모든 로컬별 엔트리 포인트에 태그를 삽입하여, 한/영/일 각 유저의 유입 경로와 히어로 섹션에서의 다운로드 버튼 전환율(Conversion Rate)을 정밀하게 측정할 수 있는 기반을 마련했습니다.

---

💡 Engineering Retrospective

이번 프로젝트는 "최신 기술을 사용하지 않는 것이 때로는 최고의 기술적 결정이 될 수 있다"는 사실을 다시금 증명했습니다. 타겟 유저에 대한 깊은 이해를 바탕으로 '본질'에 집중한 결과, 가장 견고하고 빠른 결과물을 도출할 수 있었습니다.

---