위시메이커 웹사이트의 기술 아키텍처 — 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을 방문하세요.