위시메이커 웹사이트의 기술 아키텍처 — Next.js 14로 구축된 기업 사이트

wishmakergroup.com은 최신 웹 기술로 구축된 기업 사이트입니다. 오용택 대표가 모든 코드를 직접 작성했습니다.

프론트엔드: Next.js 14 App Router + Tailwind CSS

Next.js의 App Router를 사용하여 서버 사이드 렌더링(SSR)과 정적 생성(SSG)을 혼합합니다. 블로그 기사는 SSG로 빌드 시 HTML이 생성되어 SEO에 최적화됩니다. Tailwind CSS로 반응형 디자인을 구현합니다.

애니메이션: Framer Motion + GSAP + Lenis

페이지 전환은 Framer Motion의 whileInView와 variants로 구현합니다. 서브페이지 Hero의 패럴랙스는 GSAP ScrollTrigger를 사용합니다. Lenis가 전체적인 스무스 스크롤을 담당합니다.

3D: Three.js WebGL

메인 Hero 섹션의 매트릭스 배경은 Three.js로 구현된 WebGL 장면입니다. 모바일에서는 성능을 위해 CSS 기반 애니메이션으로 대체됩니다.

SEO: 서버 렌더링 + 구조화 데이터

layout.tsx에 sr-only 텍스트 블록으로 Googlebot이 한국어 키워드를 인덱싱합니다. JSON-LD(Organization, Person, Website, Article, BreadcrumbList) 5종이 구현되어 있습니다. 동적 sitemap과 RSS 피드가 자동 생성됩니다.

자동 기사 시스템: GitHub Actions + Vercel

매일 GitHub Actions가 고품질 기사를 자동 생성하고 posts.ts에 추가합니다. git push 시 Vercel이 자동 빌드+배포합니다. 컴퓨터가 꺼져 있어도 24시간 작동합니다.

배포: Vercel

GitHub push → Vercel 자동 빌드 → 전 세계 CDN 배포. 커스텀 도메인(wishmakergroup.com)에 무료 SSL 적용.

위시메이커의 기술에 관심이 있다면 wishmakergroup.com을 방문하세요.