Connect AI LAB 홈페이지 템플릿 구축과 실행 절차에 관한 구현 논문

초록

본 문서는 ConnectAI-LAB-Template 워크스페이스에 구현된 Connect AI LAB 홈페이지의 목적, 화면 구성, 기술 스택, 실행 절차, 배포 고려사항을 논문 형식으로 정리한다. 해당 홈페이지는 React, Vite, Tailwind CSS, Framer Motion을 기반으로 한 시네마틱 랜딩 페이지이며, Firebase 인증, Firestore 주문 기록, PayPal 및 토스페이먼츠 결제 흐름을 포함한다. 구현의 핵심은 영상 기반 히어로, 스크롤 연동 3D 텍스트, 성능 지표, 기술 설명, 아키텍처 레이어, 가격 정책, 인증 및 결제 모듈을 하나의 상용 템플릿으로 결합하는 데 있다.

1. 서론

디지털 상품, SaaS, AI 서비스, 온라인 강의 판매 페이지는 단순한 정보 전달을 넘어 브랜드 신뢰, 제품 이해, 사용자 전환을 동시에 달성해야 한다. 본 프로젝트는 Connect AI LAB이라는 가상의 AI/뉴럴 인터페이스 브랜드를 중심으로, 프리미엄 랜딩 경험과 실제 서비스 운영에 필요한 인증 및 결제 흐름을 결합한 웹사이트 템플릿을 구축하였다.

홈페이지의 첫 화면은 From Photo To Illustration / One Network라는 메시지와 영상 배경을 통해 제품의 시각적 방향성을 제시한다. 이후 섹션은 신경망 기반 적응형 지능이라는 컨셉을 설명하고, 성능 지표와 아키텍처 구조를 통해 서비스의 논리적 설득력을 보강한다. 마지막에는 Basic, Pro, Enterprise 플랜과 PayPal, Toss 결제 버튼을 배치하여 상용화 가능한 전환 구조를 제공한다.

2. 시스템 개요

본 홈페이지는 다음과 같은 기능 단위로 구성된다.

• 히어로 섹션: 로컬 MP4 영상 배경, 스크램블 텍스트 애니메이션, 영상 위치 조절 슬라이더
• 시네마틱 텍스트 섹션: 스크롤 진행도에 따라 3D 변환과 불투명도가 변화하는 설명 문구
• 성능 지표 섹션: Synaptic Latency, Signal Accuracy, Neural Parameters 지표 표시
• 기술 섹션: Cortical Mapping, Signal Isolation, State Prediction, Loop Feedback 기능 설명
• 아키텍처 섹션: Capture, Process, Interface의 3계층 구조 설명
• 가격 섹션: Basic, Pro, Enterprise 플랜과 결제 버튼 제공
• 인증 모듈: Firebase Authentication 기반 Google, Apple, 이메일 로그인
• 데이터 모듈: Firestore 기반 사용자 프로필 및 주문 기록 저장
• 결제 모듈: PayPal 해외 결제와 토스페이먼츠 국내 결제 대응

3. 구현 방법

3.1 프론트엔드 구조

애플리케이션은 Vite 기반 React 프로젝트로 구성된다. 진입점은 src/main.tsx이며, 주요 화면 구성은 src/App.tsx에 포함되어 있다. 사이트의 표시 텍스트는 src/config/content.ts로 분리되어 있어 브랜드명, 히어로 문구, 성능 지표, 기술 설명, 아키텍처 설명, 푸터 문구를 코드 구조 변경 없이 수정할 수 있다.

영상 자원은 src/config/videos.ts에서 관리한다. 히어로 영상은 public/Ducks_Flower_combined_480p_3x_cropped_lr_topbottom.mp4를 사용하고, 다른 섹션은 CloudFront URL을 통해 원격 MP4를 불러온다. 이 구조는 로컬 자산과 외부 CDN 자산을 함께 사용할 수 있도록 설계되었다.

3.2 인터랙션 설계

히어로 섹션은 HTMLVideoElement 참조를 통해 재생 상태와 슬라이더 값을 동기화한다. 사용자는 Hero video position 슬라이더로 영상의 현재 위치를 직접 조절할 수 있다. 시네마틱 텍스트 섹션은 Framer Motion의 useScroll, useTransform, useSpring, useMotionTemplate을 활용하여 스크롤 진행도에 따라 텍스트가 입체적으로 이동하고 나타나도록 구현하였다.

3.3 인증 및 데이터 저장

Firebase 설정은 .env 환경 변수에서 읽도록 구현되어 있다. src/lib/firebase.ts는 VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, VITE_FIREBASE_PROJECT_ID, VITE_FIREBASE_STORAGE_BUCKET, VITE_FIREBASE_MESSAGING_SENDER_ID, VITE_FIREBASE_APP_ID를 사용해 Firebase 앱을 초기화한다.

인증 상태는 src/contexts/AuthContext.tsx에서 React Context로 관리된다. 로그인한 사용자는 Firestore에서 프로필을 조회하거나 새로 생성하며, 결제 완료 후에는 주문 정보가 Firestore에 저장된다.

3.4 결제 구조

PayPal 결제는 @paypal/react-paypal-js 기반으로 구성되며, src/lib/paypal.ts에 Basic 및 Pro 상품 정보가 정의되어 있다. 토스페이먼츠 결제는 src/lib/toss.ts에 Basic, Pro, Enterprise 상품을 원화 가격으로 정의하고, 결제 성공 및 실패 리다이렉트 URL을 현재 origin 기준으로 생성한다.

결제 성공 시 PayPal 주문 ID, 사용자 ID, 상품 ID, 상품명, 금액, 통화, 결제 상태가 Firestore에 저장된다. 이를 통해 단순 랜딩 페이지를 넘어 실제 주문 추적이 가능한 상용 템플릿으로 확장된다.

4. 실행 절차

본 프로젝트는 다음 절차로 실행한다.

1. 프로젝트 폴더로 이동한다.

cd /home/moos/dev_ws/ConnectAI-LAB-Template

1. 의존성을 설치한다.

npm install

1. 환경 변수 예시 파일을 복사한다.

cp .env.example .env

1. .env 파일에 Firebase, PayPal, Toss 키를 입력한다.

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_PAYPAL_CLIENT_ID=...
VITE_TOSS_CLIENT_KEY=...

1. 개발 서버를 실행한다.

npm run dev -- --host 0.0.0.0

1. 브라우저에서 HTTPS 주소로 접속한다.

https://localhost:5173/photo/

현재 실행 환경에서는 5173 포트가 이미 사용 중이어서 Vite가 자동으로 5174 포트를 사용했고, 접속 주소는 다음과 같이 확인되었다.

https://localhost:5174/photo/

5. 배포 고려사항

Vite 설정은 vite.config.ts에 정의되어 있으며, base 값은 /photo/로 설정되어 있다. 따라서 nginx 또는 리버스 프록시에서 /photo 경로를 Vite 서버 또는 빌드 결과물로 연결해야 한다. 현재 설정은 HTTPS 인증서 파일 hb5u.hyperbook.com-key.pem, hb5u.hyperbook.com.pem을 사용하도록 되어 있으며, 개발 서버 포트는 기본적으로 5173이다.

운영 배포에서는 다음 사항을 확인해야 한다.

• npm run build로 정적 파일을 생성한다.
• nginx에서 /photo/ 경로가 Vite의 base path와 일치하도록 설정한다.
• Firebase Authentication의 승인 도메인에 운영 도메인을 등록한다.
• PayPal은 Sandbox Client ID에서 Live Client ID로 교체한다.
• Toss는 테스트 클라이언트 키에서 실서비스 클라이언트 키로 교체한다.
• 결제 성공 및 실패 URL이 운영 도메인을 기준으로 생성되는지 확인한다.

6. 검증

개발 서버 실행 결과 Vite 8.1.0이 정상적으로 시작되었으며, 5173 포트 충돌 발생 시 자동으로 5174 포트로 전환되었다. 실행 중 확인된 접속 경로는 https://localhost:5174/photo/이다. Vite는 React Babel 플러그인의 esbuild 옵션과 rolldown 관련 deprecation warning을 출력했지만, 서버 기동 자체에는 실패하지 않았다.

7. 결론

Connect AI LAB 홈페이지 템플릿은 시각적 랜딩 경험, 구성 가능한 콘텐츠 관리, Firebase 인증, Firestore 주문 저장, PayPal 및 토스 결제를 결합한 상용 웹사이트 출발점이다. 코드 구조는 콘텐츠, 영상, 인증, 결제, 화면 컴포넌트를 분리하여 브랜드 교체와 기능 확장을 쉽게 하도록 설계되었다. 향후 개선 방향은 운영 빌드 자동화, 결제 성공 페이지 구현, Firebase 보안 규칙 정리, @vitejs/plugin-react-oxc 전환을 통한 개발 성능 개선이다.

참고 구현 파일

• src/App.tsx
• src/config/content.ts
• src/config/videos.ts
• src/contexts/AuthContext.tsx
• src/lib/firebase.ts
• src/lib/firestore.ts
• src/lib/paypal.ts
• src/lib/toss.ts
• vite.config.ts
• .env.example