# design-type-01 — 인터랙션 인벤토리 (출처: hanmir.co.kr) 관찰 방법: ScrollTrigger 인스턴스 실측(`scrolltriggers-raw.json`) + 스크롤 위치별 스크린샷 시퀀스(`pin_frame_*.png`). GIF 녹화는 생략 — pin_frame 시퀀스가 상태 변화를 대체 기록함. ## 0. 첫 로딩 인트로 (2차 실측 — load_*.png 시퀀스) - 위치: 페이지 로드 직후, 흰 풀스크린 / 트리거: 로드 1회 - 움직임 (3단계): 1. 중앙 대형 타이포(Hero 카피와 동일 문구)가 **회색 → 검정으로 좌→우 채워짐** (원본 keyframes `fill`. 300ms 프레임에서 절반 진행 → 총 ~1.2s) 2. **단어 사이에 홀로그래픽 그라데이션 필(pill)이 바운스하며 폭 확장** (원본 keyframes `expandWidthBounce`. 900ms 프레임에서 진행 중. 줄마다 1개, 그라데이션 색 상이) 3. 인트로 종료 후 풀 히어로 배경(이미지)으로 전환 (~2.5s 시점) - 재현 난이도: 중 → `components/IntroReveal.tsx` ## 1. Hero 슬라이더 + 배경 (2026-07-16 3차 실측으로 정정) - 위치: Hero (100vh) / 트리거: 로드 + 자동재생 - **배경: canvas/video 아님 — 1728×1080 홀로그래픽 그라데이션 이미지 배너** 슬라이드 전환 - ⚠ **"홀로그래픽 그라데이션"을 흐릿한 blur 뭉치(그라데이션 메시)로 재현하면 오답** — 실제로는 슬라이드별로 뚜렷한 그래픽 패턴 3종(대각선 컬러 밴드 / 동심원 링 / 체커보드 모자이크)이며 색이 서서히 순환. 상세 재현법은 `profile.md`의 "Hero 배경 패턴 3종" 참조, 참조 캡처는 `screenshots/probe_hero_slide*.png` - ⚠ **CSS 패턴 재현은 최후 대안일 뿐, 기본 선택지가 아니다** — 업체 리드에 크롤링 확보 실사가 있으면 그 실사를 Hero 배경으로 쓰고(다크 오버레이로 텍스트 가독성 확보), 이 슬라이더 구조(타이머+화살표+카운터)만 그대로 재현한다. 실사가 1장뿐이어도 슬라이더 구조는 만들어 두고 이미지만 나중에 추가하면 되게 설계 (`components/HeroFadeCarousel.tsx` 그대로 재사용 가능) - **구현 실측: slick 캐러셀** (`slick-slide slick-current slick-active`) — opacity 페이드 전환 (active z:999 / 비활성 z:998·opacity 0) - **자동재생 간격 실측: 6.83초** (20초 폴링: 5427→12256→19085ms, 완전 등간격) - 텍스트: 슬라이드 내부 txtbox가 슬라이드와 함께 페이드 (active만 opacity 1) - 컨트롤: 일시정지 원형 버튼(진행 링) + `01 / 03` 페이지 표기 + 좌우 화살표 - 재현 난이도: 하 → `components/HeroFadeCarousel.tsx` ## 1.5. Portfolio 카드 레일 (2차 실측 — Swiper 인스턴스 직접 조회) - 위치: Company 섹션과 지원사업 밴드 사이 (top 2191, 높이 425px) / 트리거: 수동 드래그·스크롤바 - 실측 파라미터: `slidesPerView: 3.5` / `spaceBetween: 15` / `speed: 300` / `loop: false` / autoplay 없음 / breakpoints 576·768·1200 - 카드 7장: 다크 추상 비주얼 배경 + 좌하단 텍스트(카테고리 소제목 + 굵은 타이틀 2줄), radius ~24px - 하단에 가는 진행바(swiper-scrollbar, 잉크색 진행 표시) - **3.5 노출(우측 카드 잘림)이 "더 있다"는 시각 신호 — 정수로 바꾸지 말 것** - 재현 난이도: 하 → `components/PortfolioRail.tsx` ## 1.7. hover 전용 VIEW 커서 (2026-07-12 실측 — 초기 학습 누락분) - `cursor-view` 요소: 80px 원형 + "VIEW" 라벨, **평소 opacity 0 + scale 0.2로 숨김** - **포트폴리오 카드 위에서만 opacity 1 + scale 1로 등장**해 마우스를 따라다님 (태광의 상시 팔로워와 달리 hover 전용) - 포트폴리오 카드 이미지 자체는 hover 스케일 없음 — 카드의 hover 반응은 이 커서 등장이 전부 - 재현: `components/HoverViewCursor.tsx` — **취향 규칙상 기본 미사용, 명시 요청 시에만** ## 1.8. 헤더 hide/show (2026-07-12 실측 확정 — 기존 '추정' 대체) - 스크롤 다운 → 헤더가 위로 숨음 (실측: top -104px), 업 → 복귀 (top 0). 흰 배경 fixed - design-type-02와 동일 패턴 — 두 벤치마크 공통 문법 ## 2. 통계 카드 등장 + 카운트업 (2026-07-12 정정) - 위치: Company 섹션 카드 4장 / 트리거: 스크롤 진입 (`flip-card-trigger`, start 798 end 1823, scrub 아님 — 1회 재생) - 움직임 정정: 플립(rotate) 아님 — **translateY(-70px→0) 스태거 등장** (transition 0.3s) + **숫자 카운트업** (실측: 11→14, 569→705 증가 프레임) - 재현 난이도: 중 ## 3. 지원사업 3단 밴드 스태킹 (핵심 패턴 A) - 위치: section-03 / 트리거: **scrub: 1** (start 1916, end 3063 — 약 1150px 스크롤 구간) - 움직임(실측 tween): `card-01`, `card-02`, `card-03`이 순차로 `yPercent → 0, opacity → 1`. 뒤 카드가 앞 카드 위로 밀려 올라와 덮는 스태킹 구조 - 카드 배경 변주: 화이트 → `#F5F5F5` → 오렌지 그라데이션(`bg-gradient` + `color-fff`) - 타이밍: scrub이므로 duration은 스크롤 거리에 종속. scrub 지연값 1 - 재현 난이도: 중 → `components/StackingBands.tsx` ## 4. Pinned 타이포 쇼케이스 (원본 시그니처였으나 2026-08-13 기본값에서 제외) - 위치: ONE-STOP SERVICE 섹션 (높이 4280px ≈ 4.7vh 분량) - 원본(hanmir.co.kr) 움직임 (pin_frame 시퀀스 실측): - 중앙 타이포(오렌지 아이브로우 + 110px 2줄)는 **화면 중앙에 고정** (sticky/pin) - 좌/중/우 3열의 이미지 카드(radius 24px, 세로형)가 **서로 다른 속도로 아래→위로 흐름** (컬럼별 패럴랙스, scrub) - 배경이 진행도에 따라 화이트 → 피치/오렌지 틴트 그라데이션으로 서서히 전환 - 중앙 열 카드는 고정 타이포 위를 지나가며 일시적으로 텍스트를 가림 (레이어: 카드 > 타이포) ⚠ 2026-07-17 동진하이텍 1113에서 1차로 "3열 + 텍스트 가림" 두 가지를 의도적으로 배제한 `components/PinnedTypeShowcase.tsx`(5열 이상, z-index 없이 DOM 순서로만 쌓기, mix-blend-difference)를 만들었으나, **2026-08-13 이 페이지의 스크롤 기록(`recordings/` 참고 영상)을 재검토한 결과 원본 패턴 자체(로봇팔·과일·한약재·방호복 등 업종과 무관한 스톡 이미지가 무작위로 흘러가는 콜라주)가 산만하고 브랜드와 무관하다는 사용자 피드백으로 design-type-01 기본 시안에서 이 섹션 슬롯 자체를 폐기했다.** **대체 패턴 (2026-08-13 확정)**: ONE-STOP SERVICE 슬롯은 이제 design-type-05의 "씬 핀 + 상호보완 clip-path 텍스트 전환"(`SceneSequencePin.tsx`, interactions.md #10 참조)을 차용한 `components/PinnedWipeShowcase.tsx`를 기본으로 쓴다. 원본 3열 콜라주보다 절제되어 있고, 텍스트가 씬마다 **와이퍼로 닦이듯 clip-path로 전환**되어 이전 텍스트와 겹치지 않는다(§9 와이퍼 텍스트 리빌 규칙 참조). `PinnedTypeShowcase.tsx`(5열 콜라주 버전)는 폐기하지 않고 코드는 남겨두되, **design-type-01 신규 시안의 기본 선택지는 아니다** — 업체 실사가 5장 이상 풍부하고 콜라주 스타일을 사용자가 명시 요청할 때만 예외적으로 쓴다. - 재현 난이도: 상 → `components/PinnedWipeShowcase.tsx` (기본), `components/PinnedTypeShowcase.tsx` (예외 시) ## 5. 공통 등장 모션 (AOS) — 예외 없이 전 텍스트에 적용 (2026-08-13 강화) - 실측: `data-aos="fade-up"` / duration 800ms / delay 0 — **14곳 전부 동일 설정** - 의미: 등장 모션을 한 가지로 통일해 "설정값 하나로 리듬을 만든다". 요소별로 다른 모션을 섞지 않음 - 재현: GSAP으로 y 24~32px + opacity, 0.8s, ease power2.out, once → `components/FadeUp.tsx` - **★ 2026-08-13 사용자 확정 — "스크롤로 나오는 텍스트에는 항상 애니메이션이 들어가야 한다"**: 헤딩·본문·라벨·리스트 항목 등 스크롤로 뷰포트에 진입하는 모든 텍스트 블록은 예외 없이 `FadeUp`(또는 섹션 성격상 더 어울리는 등장 모션, 예: §9 와이퍼 리빌)으로 감싼다. "정적으로 이미 보이는 상태로 로드되는 텍스트"는 Hero 최초 진입 문구·헤더처럼 뷰포트 진입이라는 트리거 자체가 없는 경우로만 한정한다 — 스크롤해서 처음 나타나는 섹션의 텍스트를 트랜지션 없이 그냥 나타나게(no-op) 두는 것은 이 벤치마크 기준으로 미완성 취급한다. ## 6. 헤더 상태 - Hero 위: 투명 배경 + 검정 로고/메뉴 (Hero 배경이 밝아서 성립) - 스크롤 후: 흰 배경 fixed + hide/show (1.8 항목 실측 참조) ## 7. 기타 - TOP 버튼: 우하단 고정 오렌지 원형 (#FA4C16) - 전역 스크롤: Lenis 스무스 스크롤 (관성 있는 부드러운 감속 — 옵션값은 번들 내부라 실측 불가, 기본값 추정) - 최상위 ScrollTrigger(start 104, end 8183)는 헤더 상태/진행도용 전역 트리거로 추정 ## 8. 스크롤 기록 영상 재검증 (2026-08-13, `/Users/damanegi/Desktop/화면 기록 2026-08-13 오후 4.29.41.mov`) 1fps로 프레임을 추출해 처음부터 CONTACT US 푸터까지 전 구간을 재확인. 기존 실측 문서와 섹션 순서· 움직임이 전부 일치함을 확인(Hero 3슬라이드 배경 패턴 3종 → Company 통계 카운트업 → Portfolio 카드 레일 hover VIEW 커서 → 지원사업 3단 밴드 스태킹 → ONE-STOP SERVICE pinned(위 §4 참조, 이번에 기본값에서 제외 결정) → CONTACT US 다크 푸터). 새로 확인된 것: - **마우스 인터랙션**: 화살표·인디케이터·포트폴리오 카드 위에서 커서가 포인터로 바뀌는 정도이고, 1.7 항목(hover VIEW 커서)이 유일한 커스텀 마우스 반응 — 그 외 마그네틱 버튼이나 커서 팔로워 등 추가 인터랙션은 없음(기존 문서에 누락된 항목 없음, 재확인만 완료) - **ONE-STOP SERVICE 구간에서 이미지가 실제로 헤드라인 중앙을 가리는 프레임을 재확인** (프레임 48/55 — 과일 사진이 "STOP SERVICE" 텍스트 위에 직접 겹침). §4의 기본값 제외 결정의 근거. ## 9. 핀 텍스트 와이퍼 리빌 (design-type-01 기본 가이드로 신규 채택, 2026-08-13) ONE-STOP SERVICE를 대체하는 `components/PinnedWipeShowcase.tsx`에서 확립한 패턴 — **design-type-01 안에서 핀(pin)이 걸린 채로 텍스트가 여러 번 바뀌는 모든 구간의 기본값**으로 삼는다: - 메커니즘은 `_taste-profile.md`의 "스크롤 pin 안에서 여러 패널이 순차 전환" 규칙과 동일한 상호보완(complementary) clip-path — 퇴장 `inset(0 0 t% 0)` / 진입 `inset((1-t)% 0 0 0)`. 이전 텍스트가 t에 따라 위→아래로 "닦여 사라지고" 다음 텍스트가 같은 자리에서 위→아래로 "닦여 나타난다" — 두 상태가 항상 정확히 여집합이라 겹쳐 보이는 프레임이 구조적으로 없다. - **와이퍼 블레이드 하이라이트(신규)**: 전환 진행률 0