🟦

풀와이드 Sticky CTA (토스식)

왜 토스식인가요

한국 모바일 앱은 한 손 엄지 사용 비율이 높아요. 토스는 모든 폼·온보딩에서 '한 화면 한 액션'을 강제하면서 다음 액션 버튼을 항상 같은 자리(엄지 도달 영역)에 두는 룰을 정착시켰습니다. 사용자는 다음 액션을 찾을 필요가 없고, 화면이 바뀌어도 동일한 위치에서 동일한 모양의 버튼을 눌러요.

키보드 추적 코드

useEffect(() => {
  const vv = window.visualViewport
  if (!vv) return
  const onResize = () => {
    const offset = window.innerHeight - vv.height - vv.offsetTop
    document.documentElement.style.setProperty('--keyboard-offset', `${offset}px`)
  }
  vv.addEventListener('resize', onResize)
  vv.addEventListener('scroll', onResize)
  return () => {
    vv.removeEventListener('resize', onResize)
    vv.removeEventListener('scroll', onResize)
  }
}, [])