LifeAI — 블록체인 컨설팅 파트너
블록체인 시장을 선도하는 전문 컨설팅 기업의 브랜드 웹사이트. WebGL 3D 히어로, 6단계 컨설팅 프로세스 타임라인, 거래소 네트워크, 상담 신청 폼까지 갖춘 기업 소개 사이트입니다.
사이트 방문프로젝트 개요
LifeAI(라이프에이아이)는 블록체인 프로젝트의 기획부터 거래소 상장, 상장 후 관리까지 원스톱으로 지원하는 전문 컨설팅 기업의 공식 웹사이트입니다. React Three Fiber로 구현한 WebGL 셰이더 기반 3D 히어로가 첫 화면에서 강렬한 인상을 주며, Orbitron 디스플레이 폰트와 Geist 본문 폰트를 조합한 테크 포워드 타이포그래피를 적용했습니다. 6개 주요 서비스(Advisory & Consulting, Technical Support, PR & Marketing, Project Acceleration, Exchange Listing, Market Management)를 카드 그리드로, 6단계 컨설팅 프로세스를 레드 타임라인으로 시각화합니다. Bybit, Binance, Korbit, OKX, LBank 등 파트너 거래소 로고 슬라이더와 대표 프로젝트(Medical AI Alliance) 소개, 상담 신청 폼(/consultation 페이지)까지 포함한 기업 브랜딩 사이트입니다. life-ai.co.kr에서 실제 운영 중입니다.
주요 기능
WebGL 3D 히어로 & 브랜딩
React Three Fiber + drei를 활용한 커스텀 Three.js 셰이더가 애니메이션 도트 그리드 효과를 생성합니다. 마우스 인터랙션과 시간 기반 유니폼으로 동적인 배경을 구현하며, 그 위에 LifeAI 로고(펜로즈 삼각형)와 '블록체인 시장을 선도하는 전문 컨설팅 파트너' 타이틀이 배치됩니다.
Orbitron 폰트로 미래지향적 느낌을 강조하고, 레드(#EF4444) & 블랙 컬러 팔레트로 강렬한 브랜드 아이덴티티를 전달합니다.
주요 서비스 6개 카드 그리드
Advisory & Consulting(비즈니스 모델 설계, 토큰 이코노미, 화이트페이퍼 컨설팅), Technical Support(지갑 솔루션, 토큰/코인 개발, 보안 감사), PR & Marketing(홈페이지 제작, 시장 분석, ICO/IEO 전략), Project Acceleration(ICO 및 IEO 분석, 브랜드 관리), Exchange Listing(업비트·빗썸·코인원 등 국내외 거래소 상장), Market Management(상장 후 시장 관리) 6개 서비스를 아이콘 카드 그리드로 소개합니다.
각 카드에 레드 아이콘과 간결한 설명을 배치하여 서비스 범위를 한눈에 파악할 수 있습니다.
6단계 통합 컨설팅 프로세스
프로젝트 기획부터 상장 후 관리까지 전 과정을 6단계 레드 타임라인으로 시각화합니다. 01 토큰 제작 & ICO/IEO(토큰 이코노미 설계, 스마트 컨트랙트 개발, 화이트페이퍼 작성), 02 마케팅 & PR(홈페이지 제작, 브랜드 디자인, 글로벌 미디어 홍보), 03 국내 거래소 상장(업비트·빗썸·코인원·고팍스), 04 해외 거래소 상장(바이낸스·OKX·바이비트), 05 상장 후 관리(초기 대응, 시장 관리, 마켓 메이킹), 06 비즈니스 개발(파트너십 구축, 투자자 유치).
각 단계의 세부 항목이 레드 불릿 포인트로 나열되어 체계적인 프로세스를 전달합니다.
차별화된 경쟁력
원스톱 솔루션(토큰 제작부터 상장 후 관리까지 프로젝트 전 생애주기를 아우르는 종합 컨설팅), 검증된 전문성(국내 4대 원화거래소 + 글로벌 거래소 상장 실적으로 축적된 실무 노하우), 유기적 프로세스(기획·마케팅·법무·기술·거래소 실무까지 분야별 최적 시너지 창출) 3가지 차별점을 강조합니다.
거래소 네트워크 & 대표 프로젝트
GOPAX, Gate.io, HTX, Bitget, KuCoin, Coinbase, MEXC Global, BingX, Bithumb, Upbit, OKX, Bybit, Binance, Korbit, DeepCoin, XT.com 등 파트너 거래소 로고를 슬라이딩 배너로 표시하여 네트워크 규모를 시각적으로 전달합니다.
대표 프로젝트로 Medical AI Alliance(MAA) — 글로벌 헬스케어 데이터 통합 솔루션을 YouTube 영상과 함께 소개하여 기업 역량을 증명합니다.
상담 신청 폼 (/consultation)
별도 상담 신청 페이지에서 프로젝트 문의를 접수합니다. 이름, 이메일, 연락처, 회사명, 관심 서비스(드롭다운 선택), 프로젝트 내용 필드로 구성된 폼을 제공합니다.
레드 그라디언트 배경과 'CONSULTATION' 배지로 페이지 성격을 명확히 하며, '블록체인 프로젝트의 성공을 위한 첫 걸음을 함께 시작하겠습니다' 문구로 전환을 유도합니다.
WebGL 셰이더 & 인터랙션
hero-webgl.tsx에서 커스텀 버텍스/프래그먼트 셰이더를 작성하여 마우스 위치와 시간에 반응하는 애니메이션 도트 그리드를 구현했습니다. @react-three/fiber Canvas에서 유니폼을 통해 마우스 인터랙션과 시간 기반 애니메이션을 제어합니다.
법적 페이지 & SEO
이용약관(/terms), 개인정보처리방침(/privacy), 쿠키 정책(/cookies) 법적 페이지를 포함합니다. OKLCH 색공간 CSS 변수 기반 다크 테마, Vercel 배포, 메타데이터 최적화를 적용했습니다.
Tech Stack
Highlights
- React Three Fiber WebGL 3D 히어로 셰이더
- 6단계 통합 컨설팅 프로세스 타임라인
- 상담 신청 폼 + 거래소 네트워크 쇼케이스
Architecture
Next.js 16 App Router / React 19 / TypeScript 5 / Tailwind CSS v4 (@tailwindcss/postcss) / React Three Fiber + drei (WebGL 3D 셰이더) / Framer Motion 애니메이션 / shadcn/ui + Radix UI / OKLCH 색공간 CSS 변수 다크 테마 / Orbitron + Geist 듀얼 폰트 / Vercel 배포 / life-ai.co.kr 운영 중