truloop Wiki

다크 모드

Teaser ​

truloop-teaser-web은 truloop의 마케팅 랜딩 페이지입니다. 제품 소개, 기능 설명, FAQ, 앱 다운로드 CTA 등을 포함하는 프로모션 사이트로, 메인 도메인 truloop.app에서 서비스됩니다.

기술 스택 ​

기술버전용도
Next.js15.5.11React 프레임워크 (App Router)
React19UI 라이브러리
TypeScript5타입 안전성
CSS순수 CSS페이지별 스타일링 (Tailwind CSS 미사용)
@next/third-parties15Google Tag Manager 연동

정보

Teaser는 의도적으로 최소한의 의존성만 사용합니다. Tailwind CSS, 상태 관리 라이브러리, UI 프레임워크 등을 사용하지 않으며, 순수 CSS로 스타일링합니다.

페이지 구성 ​

경로설명렌더링
/메인 랜딩 페이지 (Hero, Features, Use Cases, FAQ, CTA)Client Component
/our-story브랜드 스토리Server/Client
/privacy개인정보처리방침Server
/terms이용약관Server

메인 랜딩 페이지 섹션 ​

메인 페이지는 9개 섹션으로 구성된 풀스크린 스크롤 방식입니다.

  1. Hero — 플로잉 이미지 배경 + 메인 카피 ("Host simply. Look organized.")
  2. How It Works — 4단계 기능 시연 (Plan & Prep → On the Way → Hanging Out → Recap)
  3. Use Cases — 사용 사례 카드 그리드 (생일 파티, 골프, 팀 오프사이트 등)
  4. AI Intelligence — AI 기능 소개 (Smart Time-Finding, Gentle Outreach, Smart Follow-up)
  5. Loop Cycle — Create → Confirm → Meet & Share → Recap 순환 시각화
  6. Partner Speaks — iMessage 스타일 대화 데모
  7. Scheduling Partner — 제품 철학
  8. FAQ — 아코디언 형태 FAQ
  9. Download CTA — App Store / Google Play 다운로드 배지

프로젝트 구조 ​

truloop-teaser-web/
├── src/
│   ├── app/
│   │   ├── layout.tsx         # 루트 레이아웃 (GTM, 폰트)
│   │   ├── globals.css        # 최소 글로벌 스타일 (@font-face)
│   │   ├── page.tsx           # 메인 랜딩 (Client Component)
│   │   ├── our-story/
│   │   │   ├── layout.tsx     # Our Story 레이아웃
│   │   │   └── page.tsx       # 브랜드 스토리 페이지
│   │   ├── privacy/page.tsx   # 개인정보처리방침
│   │   └── terms/page.tsx     # 이용약관
│   ├── components/
│   │   ├── gnb.tsx            # 네비게이션 바 (햄버거 메뉴)
│   │   └── footer.tsx         # 페이지 푸터
│   ├── hooks/
│   │   ├── use-scroll-snap.ts     # 풀페이지 스크롤 스냅
│   │   ├── use-feature-stepper.ts # 기능 스텝 탭 자동 재생
│   │   ├── use-gnb-section.ts     # GNB 섹션별 색상 전환
│   │   └── use-faq-toggle.ts      # FAQ 아코디언 토글
│   └── styles/
│       ├── main.css           # 메인 페이지 (다크 테마, 풀페이지)
│       ├── our-story.css      # Our Story (스크롤 애니메이션)
│       └── legal.css          # Privacy/Terms (라이트 테마)
├── public/
│   ├── images/
│   │   ├── hero-flow/         # 14장의 Hero 플로잉 이미지
│   │   ├── feature1-4.PNG     # 앱 기능 스크린샷
│   │   ├── story1-4.jpg       # Our Story 페이지 사진
│   │   └── ...
│   └── fonts/                 # Oldschool Grotesk woff2
├── next.config.ts             # Rewrite 규칙 (/invite, /story)
├── jest.config.js             # Jest 테스트 설정
└── package.json

주요 아키텍처 패턴 ​

폰트 ​

Google Fonts(Inter, Merriweather, Space Grotesk)는 layout.tsx에서 CDN link 태그로 로드하고, Oldschool Grotesk는 globals.css에서 @font-face로 로컬 woff2 파일을 사용합니다.

GNB 섹션별 색상 전환 ​

use-gnb-section 훅이 현재 활성 섹션 인덱스에 따라 body에 CSS 클래스를 토글하여 GNB의 밝은/어두운 테마를 전환합니다. 밝은 배경 섹션(How It Works, AI Intelligence, Scheduling Partner, FAQ)에서는 어두운 텍스트/로고를 사용합니다.

풀스크린 스크롤 ​

메인 페이지는 CSS scroll-snap을 활용한 섹션별 스크롤을 구현합니다. use-scroll-snap 커스텀 훅이 IntersectionObserver로 현재 활성 섹션을 추적하고, URL 해시를 섹션 앵커와 동기화합니다.

Hero 플로잉 애니메이션 ​

3개 행의 이미지가 CSS @keyframes(flowScroll, flowScrollReverse)로 연속 스크롤됩니다. 각 행의 이미지 트랙이 복제되어 끊김 없는 루핑 효과를 만듭니다.

Feature Stepper ​

4단계 탭 인터페이스가 섹션 진입 시 자동 재생됩니다. use-feature-stepper 훅이 IntersectionObserver로 뷰포트 진입을 감지하고 타이머 기반으로 스텝을 전환합니다.

외부 서비스 Rewrite ​

next.config.ts에서 /invite와 /story(리캡) 경로를 별도 Vercel 배포로 rewrite합니다.

typescript
// next.config.ts
async rewrites() {
  return [
    { source: '/story', destination: 'https://truloop-web-story.vercel.app/story' },
    { source: '/story/:path*', destination: 'https://truloop-web-story.vercel.app/story/:path*' },
    { source: '/invite', destination: 'https://truloop-web-invite.vercel.app/invite' },
    { source: '/invite/:path*', destination: 'https://truloop-web-invite.vercel.app/invite/:path*' },
  ];
}

개발 환경 ​

bash
# 의존성 설치
npm install

# 개발 서버 (Turbopack)
npm run dev

# 프로덕션 빌드
npm run build

# ESLint
npm run lint

# 테스트
npm test

정보

이 프로젝트는 환경 변수가 필요하지 않습니다. GTM ID는 코드에 하드코딩되어 있으며, 백엔드 의존성이 없는 완전 정적 사이트입니다.

언어 ​

사이트 콘텐츠는 영어 전용입니다. 다국어 지원이 필요한 경우 Invite 서비스와 동일하게 next-intl 도입을 검토합니다.

변경 이력 ​

날짜내용
2026-03-10소스 코드 검증: Next.js 버전 정밀화 (15.5→15.5.11), 섹션 수 정정 (7→9), 폰트/GNB/스크롤 아키텍처 설명 추가, rewrite 순서 수정, 프로젝트 구조 트리 보강