[Technical Design] Main Hero Spray Interaction

[SubJeeLee]

상태

구현 전 기술 설계 초안입니다. 디자인 자산과 색상 팔레트가 확정된 뒤 최소 동작 버전부터 구현합니다.

배경

메인 Hero의 그래피티·스프레이 시각 언어를 사용자의 입력으로 확장합니다. Hero 위에서 포인터를 누른 채 이동하면 경로를 따라 스프레이 자국이 남고, 일정 시간이 지나면 자연스럽게 사라집니다.

목표는 장식 효과를 추가하는 데 그치지 않고, 전시의 시각적 분위기에 사용자가 짧게 개입하는 경험을 만드는 것입니다.

요구사항

• 메인 Hero에서만 동작
• 포인터를 누른 상태에서만 분사
• 빠른 이동에서도 자국이 끊기지 않음
• 자국은 일정 시간 유지 후 페이드아웃
• 스프레이는 Hero 아트워크 위, 캐릭터 커서 아래에 렌더링
• 터치 환경과 prefers-reduced-motion에서는 비활성화
• 반복 사용에도 프레임 드롭과 메모리 증가를 제어

아키텍처

Hero
├─ MainArtwork
├─ SprayCanvas
└─ MainCursor

Hero 내부에 Canvas 2D 레이어 하나만 추가합니다. React state로 자국을 관리하거나 스탬프마다 DOM 요소를 만들지 않고, 입력 데이터와 렌더링 루프를 Canvas에서 독립적으로 처리합니다.

선택: Canvas 2D

Canvas는 다수의 반투명 스프레이 스탬프를 단일 레이어에서 그릴 수 있어 DOM 파티클 방식보다 스타일 계산·레이아웃·페인트 비용을 줄일 수 있습니다. 현 요구 범위에서는 WebGL보다 구현 복잡도가 낮고 충분한 성능을 제공합니다.

데이터 모델

type SprayStamp = {
  id: number;
  x: number;
  y: number;
  size: number;
  rotation: number;
  assetIndex: number;
  createdAt: number;
};

각 자국은 좌표·크기·회전·브러시 종류·생성 시간만 저장합니다. 투명도는 렌더링 시 생성 시간으로 계산해 별도 애니메이션 상태를 줄입니다.

입력과 경로 보간

pointerdown에서 분사를 시작하고 pointermove에서 이전 좌표와 현재 좌표의 거리를 계산합니다. 이벤트마다 무조건 자국을 생성하지 않고, 12px 간격으로 경로를 보간합니다.

const spacing = 12;

function emitAlongPath(previous: Point, current: Point) {
  const distance = getDistance(previous, current);
  const count = Math.floor(distance / spacing);

  for (let index = 1; index <= count; index += 1) {
    addSprayStamp(interpolate(previous, current, index / count));
  }
}

이 방식은 빠른 드래그에서도 공백을 줄이고, 느린 이동에서 같은 위치에 과도한 자국이 쌓이는 문제를 방지합니다.

자국 생명주기

초기 성능 예산은 다음과 같습니다.

항목	초기값
생성 간격	12px
유지 시간	3초
페이드아웃	1초
총 생명주기	4초
최대 활성 자국	240개
Canvas DPR 상한	2

자국은 3초 동안 유지한 뒤 1초 동안 투명해집니다. 최대 수를 넘으면 가장 오래된 자국부터 제거합니다. 살아 있는 자국이 없고 분사 중도 아닐 때는 requestAnimationFrame 루프를 중지합니다.

성능 고려

• 포인터 이벤트마다 즉시 렌더링하지 않고 requestAnimationFrame당 한 번만 처리
• 스프레이 브러시 이미지는 최초 1회 preload 후 재사용
• 매 프레임 CSS blur/filter를 적용하지 않음
• 캔버스 해상도는 Math.min(devicePixelRatio, 2)로 제한
• React re-render 없이 Canvas 컨텍스트와 ref 기반으로 동작
• 모바일·터치·reduced motion 환경에서는 효과를 생성하지 않음

const dpr = Math.min(window.devicePixelRatio, 2);
canvas.width = width * dpr;
canvas.height = height * dpr;
context.setTransform(dpr, 0, 0, dpr, 0, 0);

고밀도 화면에서 DPR을 제한하지 않으면 캔버스 버퍼와 알파 합성량이 커져 GPU 메모리와 렌더링 비용이 늘어날 수 있습니다.

접근성

• prefers-reduced-motion: reduce에서 비활성화
• pointer: coarse 환경에서 비활성화
• Canvas는 aria-hidden 처리
• 실제 링크·버튼의 포인터 이벤트를 가로채지 않음
• 키보드 탐색과 기본 콘텐츠 접근에 영향을 주지 않음

검증 계획

1. 1920px, 1350px, 1020px에서 레이어 순서와 자국 좌표 확인
2. 빠른 드래그에서 경로 단절 여부 확인
3. 30초 이상 반복 입력 후 메모리 증가 확인
4. Chrome Performance 패널에서 long task·프레임 드롭 확인
5. 고해상도 화면에서 DPR 상한 적용 여부 확인
6. reduced motion·터치 환경의 비활성화 확인

향후 확장

• KNUD 색상 팔레트 기반 분사 색상
• 브러시 종류별 밀도·회전 규칙
• 클릭 지점의 대형 스플래시
• 자국 수가 수천 개 이상으로 확대될 경우 WebGL 전환 검토

[SubJeeLee]

1차 구현 초안

2026-08-07.3.58.50.mov

[SubJeeLee]

구현 업데이트 — 시간 기반 소멸로 과도한 분사를 제어한 과정

초기 설계 이후 실제 메인 Hero에 Canvas 2D 기반 스프레이를 구현하고, 디자인 검수를 반복하면서 스프레이의 핵심 문제를 “얼마나 오래 남길 것인가”가 아니라 “어떤 기준으로 사라지게 할 것인가”로 재정의했습니다.

1. 최종 인터랙션 모델

• Hero에서 주 포인터 버튼을 누른 상태로 이동할 때만 분사합니다.
• 이전 좌표와 현재 좌표 사이를 12px 간격으로 보간해, 빠르게 움직여도 경로가 끊기지 않게 합니다.
• 새 스트로크마다 노랑 → 빨강 → 아이보리 → 연두 순으로 색상을 순환합니다.
• 각 분사는 독립적인 createdAt 시간을 가지며, 1.8초 동안 유지한 뒤 0.6초 동안 페이드아웃합니다.
• 방향을 따라 그리는 곡선 꼬리와 별도 잔상 입자는 제거했습니다. 각 지점은 중심 도포와 주변 분사 입자만으로 구성됩니다.

즉 사용자가 긴 경로를 그려도 고정 길이의 꼬리가 뒤따르는 방식이 아니라, 먼저 뿌려진 지점부터 시간 순서대로 자연스럽게 사라지는 방식입니다.

2. 실제 구현에서 발견한 문제와 조정

문제 A. 방향성 꼬리가 물줄기처럼 보임

초기에는 이동 반대 방향으로 곡선 꼬리와 잔분사 입자를 추가했습니다. 그러나 스프레이는 선명한 이동 궤적보다 불규칙한 도포가 중요한 표현이라, 결과가 페인트가 흐르는 물줄기처럼 보였습니다.

• 조정: 방향성 꼬리와 전용 잔상 입자를 모두 제거했습니다.
• 결과: 스프레이의 형태가 이동 방향에 종속되지 않고, 개별 도포가 겹치는 질감으로 남습니다.

문제 B. 스탬프 개수 상한이 또 다른 꼬리를 만듦

동시 스탬프 수를 제한하는 방식은 성능에는 안전해 보였지만, 긴 드래그에서 가장 오래된 스탬프가 시간과 무관하게 삭제됐습니다. 이때 화면에는 항상 일정 길이의 경로만 남아 “꼬리가 잘려 따라오는” 인상을 만들었습니다.

• 조정: 개수 기반 강제 절단을 제거했습니다.
• 결과: 경로의 길이는 입력 거리로 제한되지 않고, 오직 각 지점의 생성 시간으로만 사라집니다.
• 성능 판단: 분사 밀도는 12px 간격으로 제어하고, 총 생명주기를 2.4초로 짧게 유지해 활성 객체가 시간적으로 자연 정리되도록 했습니다.

문제 C. 필압 기반 크기 변화의 일관성

Pointer Events의 pressure로 스프레이 크기를 바꾸는 실험도 진행했습니다. 하지만 마우스와 펜의 압력값 신뢰도·기기별 감도가 달라, 전시 사이트에서는 예측하기 어려운 시각적 밀도 차이가 발생했습니다.

• 조정: 필압 배율을 제거하고 모든 입력 기기에서 고정된 크기를 사용합니다.
• 결과: 디자인 검수와 재현성이 좋아지고, 입력 장치에 따른 결과 차이가 줄었습니다.

3. 렌더링 구조와 성능 경계

Hero
├─ MainArtwork
├─ SprayCanvas (Canvas 2D, aria-hidden)
└─ MainCursor

React state나 스탬프별 DOM 노드를 만들지 않고 useRef에 스탬프 데이터를 보관한 뒤 Canvas 2D에서만 그립니다. 이 선택으로 다수의 반투명 입자를 렌더링할 때 React 재조정, DOM 스타일 계산, 레이아웃 비용을 피합니다.

• Canvas 버퍼 DPR: Math.min(devicePixelRatio, 2)
• 렌더링 루프: 분사 중이거나 아직 사라지지 않은 스탬프가 있을 때만 requestAnimationFrame 실행
• 입력: pointerdown, pointermove, pointerup, pointercancel 및 pointer capture 사용
• 접근성: prefers-reduced-motion, 정밀 포인터 미지원 환경에서는 기능 비활성화
• 레이어: Canvas는 포인터 이벤트를 차단하지 않아 Hero의 기존 링크·버튼 상호작용을 보존

4. 현재의 기술적 결론

이 기능의 성능 안전장치는 “표현을 고정 길이로 자르는 것”이 아니라, 입력 샘플링 간격과 짧은 시간 기반 생명주기를 조합하는 데 있습니다. 그 결과 긴 경로도 시각적으로 부자연스럽게 절단되지 않으면서, 오래된 분사는 빠르게 정리돼 화면과 렌더링 비용이 과도하게 누적되지 않습니다.

5. 후속 검증 항목

• 데스크톱 1920px·1350px·1020px에서 빠른 장거리 드래그 시 경로 단절 및 시간 순서 소멸 확인
• Chrome Performance 패널에서 30초 이상 반복 입력 시 long task와 프레임 드롭 확인
• 메모리 패널에서 Canvas 스탬프가 생명주기 종료 후 해제되는지 확인
• reduced motion 및 터치 환경에서 기능이 노출되지 않는지 확인

관련 구현 커밋: a135ae7, 5c89908