["업다운 ESG" 개발 일기] (251129) 뇌과학으로 햅틱 피드백 다듬기 + 자율 모각 후기

뇌과학적으로 끌리게 햅틱을 더 강화할 수 있을까? 계획을 짜줄래?

# 뇌과학 기반 햅틱 강화 계획

## 목표

- **보상·기대·주의 전환**에 맞춰 햅틱을 재설계해, 앱을 더 “손맛 나고 계속 쓰고 싶게” 만듭니다.
- 단순히 세게/많이가 아니라, **타이밍·드물게 주는 강한 보상·대비감**을 활용해 **습관화(무뎌짐)를 줄이면서** 참여를 늘립니다.

## 핵심 원리 (뇌/행동과학 관점)

- **보상 예측 오류(Reward Prediction Error)**: 예상보다 좋은 결과가 나왔을 때 짧고 강한 보상 햅틱 → 성공·득점 순간에 집중.
- **변동 비율 강화(Variable Ratio)**: 모든 성공에 강한 햅틱을 주지 않고, **일부 성공에만 더 강한 패턴**을 랜덤하게 주어 “가끔 오는 큰 보상” 느낌 제공.
- **대비(Contrast)**: 평소에는 약한/없는 햅틱, **정말 중요한 순간에만 강한 패턴**으로 차이를 크게 둡니다.
- **주요 신호 최소화(Sparsity)**: 네비게이션/사소한 클릭은 짧고 약하게, **투표·연속 참여·성공/실패** 등 핵심 이벤트만 두드러지게.

## 1. 햅틱 이벤트 모델 재설계

- 작업 파일: [`src/utils/haptics.ts`](src/utils/haptics.ts)
- 지금은 `primaryAction`, `secondaryAction`, `success`, `error`, `achievement` 수준 → **행동 의미 단위로 더 세분화**:
- `vote_firstTime` / `vote_repeat` (해당 이슈 혹은 오늘 첫 투표 vs 반복 투표)
- `vote_result_success` / `vote_result_fail` (내 예측이 적중/실패했을 때)
- `streak_milestone_small` / `streak_milestone_big` (3일, 7일, 30일 등)
- `open_detail` / `open_comments` / `navigate_back` (정보 탐색/이동 계열)
- `external_link` (토스증권 이동)
- `logout_confirmed`
- `action_blocked_error` (향후 사용: 마감된 투표, 중복 제출 등)
- `HapticEvent` 타입을 위처럼 확장하고, 기존 단순 이벤트(`primaryAction` 등)는 **하위 호환용 alias**로 유지.

## 2. 햅틱 강도·패턴 맵핑 고도화

- 작업 파일: [`src/utils/haptics.ts`](src/utils/haptics.ts)
- 토스 `HapticFeedbackType`들을 **강도/의미 축**으로 재정렬:
- **가벼운 터치/네비게이션**: `tickWeak`, `tap`
- **중간 정도의 확실한 액션**: `tickMedium`, `softMedium`
- **무게감 있는 기본 피드백**: `basicWeak`, `basicMedium`
- **정서적 결과 피드백**: `success`, `error`, `wiggle`, `confetti`
- 새 `HAPTIC_MAP` 설계 예시:
- `vote_firstTime` → `softMedium` (살짝 강한 클릭감)
- `vote_repeat` → `tap` (조금 약하게, 습관화 방지)
- `vote_result_success` → `success`
- `vote_result_fail` → `error` 또는 `wiggle` (실패 신호이되 과도하지 않게)
- `streak_milestone_small` → `basicMedium`
- `streak_milestone_big` → `confetti` (강한 축하 패턴)
- `open_detail` / `open_comments` / `navigate_back` / `external_link` → `tap`
- `logout_confirmed` → `basicMedium`
- `action_blocked_error` → `error`
- `playHaptic`를 그대로 사용하되, 내부에서 새 이벤트 이름을 위 타입들로 매핑.

## 3. 변동 비율(Variable Ratio) 보상 도입

- 작업 파일: [`src/utils/haptics.ts`](src/utils/haptics.ts)
- `playHaptic` 내부에 **선택적 랜덤 보상 로직** 추가:
- 예: `vote_result_success` 또는 `streak_milestone_small` 실행 시,
  - 80%: 평소대로 (`success` / `basicMedium`)
  - 20%: 더 강한 보상(`confetti` / `wiggle`)으로 업그레이드
- 구현 방식:
- `playHaptic(event)`에서 특정 이벤트에 한해 `Math.random()`으로 분기.
- 예: 성공이 잦을수록, 가끔씩 오는 강한 햅틱으로 “도파민 스파이크” 느낌을 줌.
- 주의: 에러 계열(`action_blocked_error`)에는 랜덤을 쓰지 않고, **항상 일정한 패턴**으로 예측가능하게 유지.

## 4. 글로벌 레이트 리미터(반복 시 약화/차단)

- 작업 파일: [`src/utils/haptics.ts`](src/utils/haptics.ts)
- 똑같은 버튼을 빠르게 연타하면 뇌가 자극을 **노이즈로 취급**하므로, 일정 시간 안에는 햅틱을 막거나 약하게:
- `lastHapticTime`와 `lastEvent`를 모듈 단위에서 기억.
- `MIN_INTERVAL_MS` (예: 200~300ms) 보다 짧은 간격의 요청은 무시.
- 동일 이벤트가 짧은 시간에 여러 번 오면, **첫 1~2번만 허용하고 이후는 자동 억제**.
- 예: 투표는 원래 한 번만 가능하지만, 댓글/상세 열기/뒤로가기 등의 반복 탭에서 **손맛은 유지하되 피로감은 줄이는** 역할.

## 5. 화면별 컨텍스트 적용 설계

- ### `SwipeCard.tsx`
- 현재: 투표 시 `primaryAction`, 통계 열릴 때 `success` → 새 모델에 맞게 교체.
- 변경안:
  - 투표 버튼 클릭:
  - 해당 이슈에 **처음 투표** → `playHaptic('vote_firstTime')`
  - 이미 투표했던 이슈 재투표(허용되는 경우) → `playHaptic('vote_repeat')`
  - 투표 통계 패널이 처음 열릴 때 → `playHaptic('vote_result_success')`와 연동(또는 현재 유지).
  - 댓글 열기/상세 보기 토글 → `playHaptic('open_comments')`, `playHaptic('open_detail')`.

- ### `IssueDetail.tsx`
- 투표 버튼 → `vote_firstTime` / `vote_repeat` 로 분기.
- 닫기 버튼 → `navigate_back` 이벤트로 매핑.

- ### `ResultCard.tsx`
- 카드 전체 클릭(결과 상세 진입) → `open_detail`.
- "토스증권에서 보기" → `external_link`.
- "댓글 확인하기" → `open_comments`.
- 향후: 결과 데이터에 따라
  - 내 예측이 맞았을 때 화면 진입 시 `vote_result_success` 호출.
  - 틀렸을 때 `vote_result_fail` 호출.

- ### `MyRecord.tsx`
- 상단 `Navigation` 뒤로가기 → `navigate_back`.
- `전체 기록 보기` → `open_detail` 또는 별도 `open_history`.
- 연속 `streak` 값이 3, 7, 30 등 **임계점에 도달할 때만** `streak_milestone_*` 호출.
- 로그아웃 확정 시 → `logout_confirmed`.

## 6. 성취/마일스톤 순간 강화

- 작업 파일: [`src/components/MyRecord.tsx`](src/components/MyRecord.tsx) 등
- 연속 참여/성공률 등 **정말 칭찬해주고 싶은 순간**만 골라 강한 햅틱 사용:
- `stats.streak.current`가 3, 7, 30일 달성 시 최초 렌더/업데이트에서 `streak_milestone_small/big`.
- `stats.successRate`가 의미 있는 구간(예: 60%→70%)을 처음 돌파할 때 `streak_milestone_small`.
- 이때 `confetti`/`basicMedium` 등 기존보다 강한 타입을 사용해 **희귀하지만 기억에 남는 햅틱**을 만듭니다.

## 7. 실험·튜닝을 위한 설정 포인트

- 작업 파일: [`src/utils/haptics.ts`](src/utils/haptics.ts)
- 상단에 **환경별/버전별로 조정 가능한 설정 객체** 추가:
- `HAPTIC_ENABLED` (전체 on/off)
- `MIN_INTERVAL_MS` (레이트 리미터 간격)
- `SUCCESS_STRONG_PROBABILITY` (강한 보상 확률)
- 이벤트별 타입 맵을 한곳에 모아두고, A/B 테스트나 피드백 반영 시 이 파일만 수정.

## 8. QA 및 체감 테스트 가이드

- 실제 모바일 기기에서 아래 시나리오를 순서대로 수행하며 **강도·빈도**를 체크:
- 빠르게 여러 카드를 넘기며 투표 → 과도하게 울리지 않는지, 첫 투표는 분명히 느껴지는지.
- 결과 확인 페이지에서 맞춘/틀린 케이스 비교 → 정서적 대비가 명확한지.
- 마이페이지에서 streak 마일스톤을 달성했을 때 → “와, 뭔가 해냈다” 느낌이 드는지.
- 피드백을 반영해 `HAPTIC_MAP`과 확률/간격 설정만 조정해서 재튜닝.