7.8 KiB
7.8 KiB
"Deep Field" 랜딩 경험 — 메인·외주 다크 캔버스 + WebGL 쇼케이스
- 작성일: 2026-06-12
- 상태: CEO 승인 완료 (Visual Companion 세션으로 방향·구조 확정)
- 목표: 고객이 "AI가 만든 디자인"으로 느끼지 않는 새로운 경험의 랜딩. phantom.land 류의 커서 반응형 WebGL·몰입형 쇼케이스·볼드 타이포·스크롤 연출을 메인(/)과 /outsourcing에 적용하고, 외주 레퍼런스 쇼케이스를 페이지의 주인공으로.
0. 확정된 결정 (CEO)
| 항목 | 결정 |
|---|---|
| 레퍼런스 포인트 | phantom.land의 4요소 전부: 커서 반응 비주얼 + 몰입형 쇼케이스 + 볼드 타이포 + 스크롤 연출 |
| 기술 수준 | three.js WebGL 풀장착 (성능·폴백 조건은 §6) |
| 범위 | 메인(/) + /outsourcing 다크 캔버스 통일. 거래 페이지는 라이트 유지 + 브릿지 |
| 쇼케이스 콘텐츠 | 기존 샘플 8종을 각 컨셉에 맞게 리뉴얼해 연결 — 샘플 리뉴얼은 별도 후속 스펙, 이번엔 쇼케이스 시스템 + 아트 타일 |
| 톤 | 히어로·본문·쇼케이스 동일 톤 (다크 하이브리드 아님 — 페이지 전체 통일) |
| 카피 | "대기업 7년차 개발자" 류 경력 강조 금지. 신뢰는 운영 실증으로: "24시간 돌아가는 실서비스를 직접 설계·운영" 축 (feedback-copy-no-career-emphasis) |
1. 컨셉 — "Deep Field"
깊은 네이비 우주(필드) 위에 작업물이 떠오른다. 다크 베이스는 순수 검정이 아닌 브랜드 네이비 혈통(#070d1a 계열)으로, 기존 --jsm-navy 푸터와 한 핏줄. 포인트는 기존 --jsm-accent(#1d4ed8)에 다크 위 가독용 밝은 변형(#60a5fa)을 추가.
다크 토큰 확장 (globals.css)
--jsm-dark-bg: #070d1a /* 페이지 베이스 */
--jsm-dark-surface: rgba(255,255,255,.03) /* 카드 */
--jsm-dark-line: rgba(148,163,184,.14) /* 보더 */
--jsm-dark-ink: #f8fafc /* 헤드라인 */
--jsm-dark-soft: #94a3b8 /* 보조 텍스트 */
--jsm-accent-bright:#60a5fa /* 다크 위 포인트 */
기존 라이트 토큰은 무수정 (거래 페이지가 사용).
2. 메인(/) 스크롤 구조 (승인된 목업 기준)
- HERO — WebGL 파티클/포인트 필드가 커서를 자기장처럼 따라 굴절. 거대 타이포(2줄, letter-spacing 타이트): 카피는 "생각을 동작하는 소프트웨어로." 방향 (구현 시 디자인 스킬로 다듬되 경력 표현 금지). 서브: 운영 실증 한 줄. CTA 2개(프로젝트 문의 솔리드 / 소프트웨어 보기 고스트). 스크롤 시작 시 필드가 흩어지며 다음 섹션으로.
- SHOWCASE (주인공) — "이런 걸 만들어 드립니다". 비대칭 그리드(대형 1 + 보조 2 페턴, 데스크톱) / 세로 스택(모바일). 각 카드는 컨셉별 고유 컬러 월드를 가진 WebGL 평면 — hover 시 굴절·미세 확대, 클릭 시 풀스크린 몰입 전환 후 데모로 이동. 8슬롯 체계: 리뉴얼 완료된 샘플부터 클릭 활성, 미완료 슬롯은 아트 타일(비활성, "coming" 라벨 없이 자연스럽게 비클릭). [전체 보기 → /outsourcing#showcase]
- PROCESS — 4단계. 스크롤 진입 시 연결선이 그려지며 단계가 순차 점등.
- PROOF — 운영 중 시스템 3종(주식 자동매매/청약 매칭/AI 파이프라인) + 카운터 스탯("운영 중인 실서비스가 곧 포트폴리오"). 숫자는 스크롤 진입 시 카운트업.
- SOFTWARE + CTA — 제품 카드(라이트 카드가 다크 위에 떠 있는 대비), 기존 동적 products 연동 유지. 최종 CTA 밴드.
3. /outsourcing 구조
동일 다크 톤. Hero(축약) → #showcase 풀 그리드(8슬롯 전체) → 제공 분야 → 프로세스(상세 6단계) → FAQ → 의뢰 폼(4단계 폼 — 다크 스타일로 재스킨, 로직·검증·API 무수정). 기존 앵커(#process/#portfolio/#contact) 유지 — #portfolio는 #showcase로 통합하되 구 앵커도 동작(중복 id 불가하니 #portfolio 위치에 showcase 배치).
4. 쇼케이스 카드 시스템 (8슬롯)
기존 샘플 8종(/work/website/samples/*)의 컨셉을 슬롯으로 승계: corporate / commerce(shopping) / dashboard / bakery / portfolio / 기타 3종(구현 시 실제 샘플 목록 확인). 각 슬롯: 컨셉명(모노스페이스 라벨) + 고유 컬러 그래디언트 월드 + 한 줄 설명. 카드 비주얼은 이번 스펙에서 신규 제작하는 아트 타일(WebGL 텍스처/캔버스), 스크린샷 의존 없음 → 샘플 리뉴얼 전에도 완성도 유지. 샘플이 리뉴얼되면 해당 슬롯에 라이브 링크 활성화(데이터는 lib/showcase.ts 단일 배열로 관리 — { slug, label, title, desc, palette, href?: string }, href 있으면 클릭 가능).
5. 네비·브릿지 전략
- TopNav route-aware: 다크 페이지(
/,/outsourcing)에서는 투명→스크롤 시 다크 배경, 라이트 페이지에서는 기존 흰색 동작 유지.usePathname기반 분기 (auth 로직 무수정). - 푸터는 전 페이지 동일 네이비(기존) — 자연 브릿지.
- 거래·계정 페이지(/products, /mypage, /track, /quote, /login, /legal)는 라이트 유지, 무수정 (이번 스펙 범위 밖).
6. 기술·성능·접근성 (WebGL 풀장착의 조건)
- three.js는 dynamic import — 클라이언트 전용 청크, 첫 페인트는 서버 렌더 정적 콘텐츠(텍스트·레이아웃)가 담당. SEO 텍스트는 전부 SSR 유지.
- 폴백 3단계: ①
prefers-reduced-motion→ WebGL 미기동, 정적 그래디언트 ② 모바일/저성능(navigator.hardwareConcurrency<4또는 뷰포트<768) → 경량 모드(파티클 수 1/4, 쇼케이스 굴절 비활성·CSS 전환) ③ WebGL 컨텍스트 실패 → 정적 폴백. 폴백 상태에서도 페이지는 완전한 경험이어야 함 (그래디언트·타이포·CSS 모션). - 단일
<canvas>재사용(히어로) + 쇼케이스는 카드별 경량 셰이더 또는 IntersectionObserver로 화면 내만 렌더.requestAnimationFrame은 탭 비활성 시 정지. - 번들: three.js 코어만(없는 기능 import 금지), 목표 추가 JS ≤ 200KB gzip.
- 컴포넌트 구조:
app/components/deepfield/—HeroField.tsx(WebGL 히어로) /ShowcaseGrid.tsx+ShowcaseCard.tsx/ScrollReveal.tsx(공용 스크롤 연출) /useWebGLSupport.ts(폴백 판정 훅). 페이지는 서버 컴포넌트 유지, WebGL 부분만 클라이언트 경계.
7. 카피 원칙
- 경력·소속 자격("7년차", "대기업") 표현 전면 제거 — metadata description·jsonLd 포함.
- 신뢰 축: "24시간 돌아가는 실서비스 15+를 직접 설계·운영합니다", "납품으로 끝나지 않습니다 — 직접 쓰는 사람이 만듭니다" 류.
- 한글 헤드라인 우선, 영문은 라벨·모노스페이스 디테일에만.
8. 무수정 보존 (회귀 금지선)
- 의뢰 폼(OutsourcingRequestForm) 로직·검증·API 호출 / products 동적 연동 로직 / 모든 라우팅·redirect / GA·jsonLd 구조(내용 카피만 갱신) / 거래·계정·admin 페이지 전부.
9. 검증
npm test+npm run build+ Phase 1~3 E2E 매트릭스 회귀 (숨김 404·redirect·API 401)- 수동: 데스크톱(커서 반응·쇼케이스 hover·스크롤 연출), 모바일 375px(경량 모드),
prefers-reduced-motion에뮬레이션(정적 폴백), 탭 전환 CPU, Lighthouse 성능 확인(LCP가 WebGL에 막히지 않는지) - 의뢰 폼 4단계 제출 회귀 1회
10. 의도적 제외 (후속 스펙)
- 샘플 8종 리뉴얼 (별도 스펙 — 2개씩 점진, 완료 시 쇼케이스 슬롯 활성화)
- 거래·계정 페이지 다크 전환
- 쇼케이스 클릭 몰입 전환의 풀스크린 WebGL 트랜지션 고도화 (1차는 절제된 전환으로 시작)