GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

모바일 하단 탭바 9종 — 상태 값으로 바뀌는 아홉 가지 전환

· Godrich · 9종 · 17분 읽기

전환SCSS바닐라 JS스크롤클릭내비게이션

모바일 하단 탭바는 화면 아래 고정된 채 상태 값 하나로 다시 계산해 그리는 자리인데, 아홉 가지 중 하나는 선택 값이 바뀌면 강조 표시의 위치와 너비 값이 새 자리로 함께 옮겨가고, 하나는 알림 수량 값이 올라가면 그 표시의 크기 값이 잠깐 커졌다가 가라앉으며, 또 하나는 스크롤

아래 아홉 개는 전부 앱 이름이나 브랜드 요소 없이 활성 인덱스·배지 수·스크롤 방향·안전영역 인셋 같은 일반적인 상태 값 하나가 바뀌는 순간을 다룬 것입니다. 실제 서비스 화면을 베낀 게 아니라, 앱 하단 탭바가 값 하나에 반응해 자리·크기·여백을 다시 계산하는 방식 자체를 아홉 갈래로 나눠 본 것에 가깝습니다.

활성 표시 이동 전환 — 선택된 탭이 바뀌면 강조 표시의 위치와 너비 값이 이전 자리에서 새 자리로 함께 바뀌는 방식01 bottom-nav-bar-indicator-slide-morph 아이콘 채움 전환 — 선택된 탭이 바뀌면 그 자리 아이콘의 채움 정도 값이 낮은 상태에서 가득 찬 상태로 바뀌는 방식02 bottom-nav-bar-icon-fill-swap 배지 수량 튐 전환 — 알림 수량 값이 올라갈 때마다 그 표시의 크기 값이 한 번 커졌다가 되돌아오는 방식03 bottom-nav-bar-badge-count-bump 중앙 융기 전환 — 가운데 탭의 선택 값이 켜지면 그 자리만 배경보다 높이 값이 커지며 위로 떠오르는 방식04 bottom-nav-bar-center-lift-scale 스크롤 방향 숨김 전환 — 스크롤 방향 값이 아래쪽이면 바 전체가 화면 밖으로 숨고 위쪽이면 다시 나타나는 방식05 bottom-nav-bar-scroll-hide-reveal 길게 눌러 펼치기 전환 — 누름 지속 시간 값이 기준을 넘으면 그 자리 위로 펼침 정도 값이 커지며 추가 자리가 드러나는 방식06 bottom-nav-bar-longpress-reveal 스와이프 추종 전환 — 화면을 옆으로 미는 거리 값이 커지는 동안 강조 표시의 위치 값이 그 비율만큼 옆 탭 쪽으로 따라가는 방식07 bottom-nav-bar-swipe-follow 여백 값 대응 전환 — 화면 아래쪽 여백 값이 커지면 바의 전체 높이와 안쪽 여백 값이 그 차이만큼 함께 늘어나는 방식08 bottom-nav-bar-safe-area-inset-resize 모션 감소 즉시 전환 — 모션 감소 설정이 켜지면 앞선 여덟 방식의 전환이 전부 중간 단계 없이 목표 값으로 바뀌는 방식09 bottom-nav-bar-reduced-motion-instant

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개의 해부 — 어떤 값이 언제 바뀌는가

아홉 개 전부 자동 재생 중이던 .is-demo 클래스는 사람이 클릭·키보드(Enter·Space)·포인터 입력을 하는 순간 human() 함수에서 지워지고, 그 뒤로는 실제 입력 이벤트(click·resize·keydown·pointerdown·pointermove·pointerup·pointercancel)에 반응하는 requestAnimationFrame 루프만 값을 그립니다. 09를 뺀 여덟 개는 자동 클릭·자동 순번 같은 정해 둔 순서로만 재생을 시작하고, 그 안에 무작위 값은 하나도 없습니다.

항목 누적면적 % 강도 평균 움직인 프레임
01 활성 표시 이동 전환 6.096 32.0 17/23
02 아이콘 채움 전환 1.267 56.3 14/23
03 배지 수량 튐 전환 0.217 97.3 20/23
04 중앙 융기 전환 2.599 116.0 12/23
05 스크롤 방향 숨김 전환 39.533 30.5 23/23
06 길게 눌러 펼치기 전환 3.297 74.2 16/23
07 스와이프 추종 전환 5.814 141.6 10/23
08 여백 값 대응 전환 22.792 89.8 17/23
09 모션 감소 즉시 전환 5.072 133.8 12/23

05가 39.533%로 아홉 개 중 누적면적이 가장 큰 건 정상입니다 — 05는 바 전체가 화면 밖과 원래 자리 사이를 오가는 구조라 다른 여덟 개(자리 하나의 요소만 바뀌는 구조)보다 매 프레임 바뀌는 화면 영역 자체가 큽니다. 반대로 03은 0.217%로 가장 작은데, 배지 하나의 스케일 값만 짧게 튀는 구성이라 원래 면적이 작은 게 맞습니다.

목표 값에서 가속도를 계산해 당겨가는 값 — 01·03·04·07

01·03·04·07은 전부 acc = (target - pos) * SPRING_K - vel * SPRING_C 형태로 목표까지의 거리에서 가속도를 구하고, 그 가속도로 속도(vel)를, 속도로 위치(pos)를 매 프레임 다시 쌓아 올립니다. 01은 SPRING_K(210)·SPRING_C(19)로 인디케이터의 x좌표와 너비를 함께 당기고, 03은 SPRING_K(260)·SPRING_C(22)로 숫자 롤(strip)의 세로 위치만 당깁니다. 04는 SPRING_K(190)·SPRING_C(18)로 중앙 탭의 들림 정도(liftT)를 당기고, 07은 SPRING_K(240)·SPRING_C(20)로 손을 뗀 뒤 인디케이터가 가장 가까운 탭 좌표로 정착하는 값을 당깁니다.

목표 값과의 차이를 지수 평활로 서서히 좁히는 값 — 02·05·06·08

02·05·06·08은 가속도 계산 없이 값 += (목표 - 값) * (1 - Math.exp(-RATE * dt)) 형태로 차이를 서서히 좁힙니다. 02는 FILL_RATE(0.012)로 아이콘 채움 정도를, 05는 LERP_RATE(14)로 트랙의 세로 위치(navY)를 좁히고, 06은 MENU_RATE(20)로 펼침 메뉴의 등장 비율을, 08은 LERP_RATE(10)로 인셋 값(insetPx)을 좁힙니다. 같은 형태의 계산이지만 05와 08의 LERP_RATE는 서로 다른 항목의 서로 다른 값이라, 하나를 바꿔도 다른 하나에는 영향이 없습니다.

감쇠 코사인 진동으로 목표를 지나쳤다 되돌아오는 값 — 02·03

02와 03은 위 두 계산과 별도로 Math.exp(-ZETA * (t / DUR)) * (1 - Math.cos(FREQ * t)) 형태의 펄스를 하나 더 가지고 있습니다. 02는 PULSE_ZETA(4.4)로 방금 선택된 아이콘의 스케일을 한 번 튀웠다가 가라앉히고, 03은 BUMP_ZETA(4.8)로 수량이 오른 배지의 스케일을 튀웁니다. 둘 다 지수 평활이나 스프링과는 다른, 순간적인 강조 한 번을 위한 별도 계산입니다.

경과 시간을 정해둔 구간 길이로 나눈 비율(선형)로 값을 만드는 값 — 06·07

06과 07은 위의 스프링·평활 계산과 별개로 선형 비율 계산도 하나씩 갖습니다. 06은 누르고 있는 시간(heldMs)을 HOLD_MS로 나눈 progress 값으로 링의 stroke-dashoffset을 채우고, 07은 데모 자동재생에서 경과 시간(demoElapsed)을 DRAG_MS로 나눈 비율로 손가락이 미는 거리를 대신 시뮬레이션합니다. 06의 HOLD_MS(650ms)는 실제로 눌러야 하는 기준 시간이고, 04에도 이름이 같은 HOLD_MS(900ms)가 있지만 그건 자동 루프가 중앙 융기 상태를 얼마나 유지할지 정하는 데모 재생 값일 뿐 눌러야 하는 시간과는 무관합니다.

실측 좌표와 각도로 자리를 계산하는 값 — 01·06·07

01·06·07은 값 하나만이 아니라 화면에서 실측한 좌표·각도도 계산에 씁니다. 01과 07은 각각 measure()가 getBoundingClientRect()로 탭들의 실제 좌표를 재서 인디케이터의 목표 위치·정착 위치를 정하고, 06은 FAN_ANGLES([-150, -90, -30])라는 세 각도를 사인·코사인으로 좌표로 바꿔 부채꼴 액션 버튼 세 개를 펼칩니다. 셋 다 짐작한 px가 아니라 실제 화면에서 잰 값이나 정해둔 각도를 계산에 그대로 씁니다.

09는 위 다섯 갈래와 성격이 다릅니다. 앞선 여덟 개 각각의 계산을 스스로 가진 게 아니라, 왼쪽 판(A)은 01처럼 값이 서서히 바뀌는 일반 판이고 오른쪽 판(B)은 계산 없이 목표 값을 즉시 대입하는 판이라, 계산이 있는 전환과 없는 전환을 한 화면에 나란히 두고 대조해 보여주는 역할만 합니다.

패턴별 코드

01활성 표시 이동 전환 — 선택된 탭이 바뀌면 강조 표시의 위치와 너비 값이 이전 자리에서 새 자리로 함께 바뀌는 방식

탭을 클릭해 activeIdx 값이 바뀌면 springTo()가 SPRING_K(210)·SPRING_C(19) 스프링 계산으로 인디케이터의 목표 좌표를 따라가게 해, translateX 값과 width 값이 이전 탭 자리에서 새 탭 자리로 함께 옮겨갑니다. 탭 폭은 짐작 px가 아니라 measure()가 getBoundingClientRect()로 실측한 값이라 resize 리스너가 창 크기 변화마다 다시 잽니다. 여러 탭을 오가며 지금 어디 있는지 강조하는 탭 내비게이션에 씁니다.

  function springTo(pos, vel, target, dt) {
    var acc = (target - pos) * SPRING_K - vel * SPRING_C;
    vel += acc * dt;
    pos += vel * dt;
    return [pos, vel];
  }

  function render() {
    indicator.style.transform = 'translateX(' + posX.toFixed(2) + 'px)';
    indicator.style.width = posW.toFixed(2) + 'px';
  }
활성 표시 이동 전환 — 선택된 탭이 바뀌면 강조 표시의 위치와 너비 값이 이전 자리에서 새 자리로 함께 바뀌는 방식
새 창에서 열기

01 · 활성 표시 이동 전환 — 선택된 탭이 바뀌면 강조 표시의 위치와 너비 값이 이전 자리에서 새 자리로 함께 바뀌는 방식 — 측정 누적면적 6.096% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SPRING_KtranslateXwidth

02아이콘 채움 전환 — 선택된 탭이 바뀌면 그 자리 아이콘의 채움 정도 값이 낮은 상태에서 가득 찬 상태로 바뀌는 방식

선택 값이 켜지는 순간 그 자리 아이콘의 채움 정도(fillAmt) 값이 FILL_RATE(0.012)로 서서히 1까지 오르고, 나머지 자리는 반대로 0까지 내려갑니다. 동시에 pulseScale()이 PULSE_ZETA(4.4)로 감쇠하는 코사인 값을 곱해, 막 선택된 아이콘만 스케일이 잠깐 튀었다가 가라앉습니다. 아이콘만으로 선택 상태를 뚜렷이 보여주려는 탭 구성에 어울립니다.

  var HOLD_MS = 650; // 계산 겹 상수: 자동 루프가 각 탭에 머무는 시간
  var FILL_RATE = 0.012; // 계산 겹: 채움 정도 지수 평활 상수(ms 기준)
  var PULSE_DUR = 360; // ms, 활성화 순간 스케일 펄스 지속
  var PULSE_FREQ = 2 * Math.PI * 1.6 / PULSE_DUR; // 계산 겹: 펄스 각속도
  var PULSE_ZETA = 4.4; // 계산 겹: 펄스 감쇠 상수
  var TAB_COUNT = 4;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var bf = document.getElementById('bf');
  var tabs = [0, 1, 2, 3].map(function (i) { return document.getElementById('bfTab' + i); });
  var wraps = [0, 1, 2, 3].map(function (i) { return document.getElementById('bfIcon' + i); });

  var isDemo = true;
  var activeIdx = 0;
  var fillAmt = [1, 0, 0, 0];
  var pulseStart = [-9999, -9999, -9999, -9999];
  var cycleStart = 0;
  var lastTs = 0;

  function pulseScale(t) {
    // 계산 겹: 활성화 순간의 스케일 펄스 — 감쇠 코사인 진동으로 목표를 넘어섰다 되돌아온다
    if (t < 0 || t > PULSE_DUR) return 1;
    var amp = Math.exp(-PULSE_ZETA * (t / PULSE_DUR));
    return 1 + amp * (1 - Math.cos(PULSE_FREQ * t)) * 0.16;
  }
아이콘 채움 전환 — 선택된 탭이 바뀌면 그 자리 아이콘의 채움 정도 값이 낮은 상태에서 가득 찬 상태로 바뀌는 방식
새 창에서 열기

02 · 아이콘 채움 전환 — 선택된 탭이 바뀌면 그 자리 아이콘의 채움 정도 값이 낮은 상태에서 가득 찬 상태로 바뀌는 방식 — 측정 누적면적 1.267% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

FILL_RATEPULSE_ZETAscale

03배지 수량 튐 전환 — 알림 수량 값이 올라갈 때마다 그 표시의 크기 값이 한 번 커졌다가 되돌아오는 방식

추가 버튼을 클릭하거나 Enter·Space를 누르면 increment()가 수량 값을 하나 올리고 bump()가 그 시각을 기록해, render() 안에서 bumpScale()이 BUMP_ZETA(4.8)로 감쇠하는 코사인 값을 배지 스케일에 곱하고 strip은 SPRING_K(260)·SPRING_C(22) 스프링으로 translateY 값을 새 숫자 위치로 옮깁니다. 읽지 않은 알림 수를 보여주는 탭에 씁니다.

  function bumpScale(t) {
    // 계산 겹: 배지 bump — 감쇠 코사인 진동
    if (t < 0 || t > BUMP_DUR) return 1;
    var amp = Math.exp(-BUMP_ZETA * (t / BUMP_DUR));
    return 1 + amp * (1 - Math.cos(BUMP_FREQ * t)) * 0.5;
  }

  function bump(ts) {
    bumpStart = ts;
  }

  function increment(ts) {
    count = (count + 1) % 10;
    badge.style.display = 'inline-flex';
    bump(ts);
  }

  function render(ts) {
    var s = bumpScale(ts - bumpStart);
    badge.style.transform = 'scale(' + s.toFixed(3) + ')';
    strip.style.transform = 'translateY(' + (-pos).toFixed(2) + 'px)';
  }
배지 수량 튐 전환 — 알림 수량 값이 올라갈 때마다 그 표시의 크기 값이 한 번 커졌다가 되돌아오는 방식
새 창에서 열기

03 · 배지 수량 튐 전환 — 알림 수량 값이 올라갈 때마다 그 표시의 크기 값이 한 번 커졌다가 되돌아오는 방식 — 측정 누적면적 0.217% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

BUMP_ZETAtranslateYscale

04중앙 융기 전환 — 가운데 탭의 선택 값이 켜지면 그 자리만 배경보다 높이 값이 커지며 위로 떠오르는 방식

중앙 자리를 클릭해 lifted 값이 켜지면 SPRING_K(190)·SPRING_C(18) 스프링이 liftT 값을 0에서 1로 밀어 올리고, render()는 그 값에 비례해 LIFT_PX(22)만큼의 translateY·SCALE_MAX(1.14)까지의 scale·SHADOW_BLUR_GAIN(20)만큼의 그림자 블러를 한 번에 계산합니다. 여기 쓰인 HOLD_MS(900ms)는 자동 루프가 이 상태를 얼마나 유지할지 정하는 데모 값일 뿐, 06의 누름 시간 HOLD_MS와는 다른 항목의 다른 값입니다. 중앙에 주요 기능을 둔 하단 내비게이션에 맞습니다.

  function loop(ts) {
    if (!lastTs) { lastTs = ts; cycleStart = ts; }
    var dt = Math.min(0.05, (ts - lastTs) / 1000);
    lastTs = ts;

    if (isDemo) {
      var phase = Math.floor((ts - cycleStart) / HOLD_MS) % 2;
      setLifted(phase === 1);
    }

    var target = lifted ? 1 : 0;
    var acc = (target - liftT) * SPRING_K - liftV * SPRING_C;
    liftV += acc * dt;
    liftT += liftV * dt;

    render();
    requestAnimationFrame(loop);
  }
중앙 융기 전환 — 가운데 탭의 선택 값이 켜지면 그 자리만 배경보다 높이 값이 커지며 위로 떠오르는 방식
새 창에서 열기

04 · 중앙 융기 전환 — 가운데 탭의 선택 값이 켜지면 그 자리만 배경보다 높이 값이 커지며 위로 떠오르는 방식 — 측정 누적면적 2.599% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

LIFT_PXSHADOW_BLUR_GAINtranslateY

05스크롤 방향 숨김 전환 — 스크롤 방향 값이 아래쪽이면 바 전체가 화면 밖으로 숨고 위쪽이면 다시 나타나는 방식

스크롤 영역의 scrollTop 변화량으로 구한 속도(vel)가 VEL_HIDE(90px/s)를 넘으면 hiddenTarget 값이 1로 바뀌고, render()는 LERP_RATE(14)로 navY 값을 지수 평활해 트랙의 translateY 값을 화면 밖과 원래 자리 사이로 옮깁니다. 본문을 넓게 보여주고 싶은 화면의 하단 내비게이션에 씁니다.

  function onScrollFrame(scrollTop, dtSec) {
    // 계산 겹: 실제 scrollTop 변화량으로 속도(px/s)를 구해 비대칭 임계와 비교한다
    if (dtSec <= 0) return;
    var delta = scrollTop - lastScrollTop;
    lastScrollTop = scrollTop;
    var vel = delta / dtSec;
    if (scrollTop <= 2) {
      hiddenTarget = 0;
    } else if (vel > VEL_HIDE) {
      hiddenTarget = 1;
    } else if (vel < -VEL_SHOW) {
      hiddenTarget = 0;
    }
  }

  function render(dtSec) {
    navY += (hiddenTarget * BAR_H - navY) * (1 - Math.exp(-LERP_RATE * dtSec));
    track.style.transform = 'translateY(' + navY.toFixed(2) + 'px)';
  }
스크롤 방향 숨김 전환 — 스크롤 방향 값이 아래쪽이면 바 전체가 화면 밖으로 숨고 위쪽이면 다시 나타나는 방식
새 창에서 열기

05 · 스크롤 방향 숨김 전환 — 스크롤 방향 값이 아래쪽이면 바 전체가 화면 밖으로 숨고 위쪽이면 다시 나타나는 방식 — 측정 누적면적 39.533% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

VEL_HIDELERP_RATEtranslateY

06길게 눌러 펼치기 전환 — 누름 지속 시간 값이 기준을 넘으면 그 자리 위로 펼침 정도 값이 커지며 추가 자리가 드러나는 방식

FAB를 누르고 있는 시간(heldMs)이 HOLD_MS(650ms)에 닿을 때까지 progress 값이 선형으로 차오르며 stroke-dashoffset 값이 RING_CIRC만큼 줄어들고, 링이 다 차면 openMenu()가 FAN_ANGLES([-150, -90, -30])를 삼각함수로 좌표 변환해 액션 버튼 세 개를 부채꼴로 펼칩니다. 탭마다 하위 선택지를 숨겨 둔 내비게이션에 씁니다.

  var RING_CIRC = 2 * Math.PI * RING_R; // 계산 겹: 원둘레를 실제로 계산해 stroke-dashoffset 에 쓴다
  var SPRING_RATE = 16; // 지수 평활 상수(1/s) — 뗄 때 링이 되돌아가는 속도
  var MENU_RATE = 20; // 메뉴 등장/퇴장 지수 평활 상수(1/s)
  var FAN_R = 62; // 부채꼴 반경(px) — 액션 버튼이 FAB 로부터 떨어지는 거리
  var FAN_ANGLES = [-150, -90, -30]; // 계산 겹: 각 액션 버튼의 각도(도) — sin/cos 로 좌표를 만든다
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var lp = document.getElementById('lp');
  var fab = document.getElementById('lpFab');
  var ring = document.getElementById('lpRingProgress');
  var menu = document.getElementById('lpMenu');
  var actions = Array.prototype.slice.call(menu.querySelectorAll('.lp__action'));
  var tabs = Array.prototype.slice.call(document.querySelectorAll('.lp__tab'));

  var isDemo = true;
  var isPressing = false;
  var pressStart = 0;
  var opened = false;
  var progress = 0; // 0..1, 링이 찬 비율
  var menuT = 0; // 0..1, 메뉴 등장 비율
  var lastTs = 0;
  var cycleStart = 0;
  var closeTimer = null;

  ring.style.strokeDasharray = RING_CIRC.toFixed(2);
길게 눌러 펼치기 전환 — 누름 지속 시간 값이 기준을 넘으면 그 자리 위로 펼침 정도 값이 커지며 추가 자리가 드러나는 방식
새 창에서 열기

06 · 길게 눌러 펼치기 전환 — 누름 지속 시간 값이 기준을 넘으면 그 자리 위로 펼침 정도 값이 커지며 추가 자리가 드러나는 방식 — 측정 누적면적 3.297% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

FAN_ANGLESRING_CIRCstroke-dashoffset

07스와이프 추종 전환 — 화면을 옆으로 미는 거리 값이 커지는 동안 강조 표시의 위치 값이 그 비율만큼 옆 탭 쪽으로 따라가는 방식

손가락을 track 위에서 미는 거리(dragRatio)만큼 인디케이터의 translateX 값이 옆 탭 쪽으로 따라가고, 손을 떼는 순간 SPRING_K(240)·SPRING_C(20) 스프링이 가장 가까운 탭 좌표(settleTarget)로 posX 값을 당겨 정착시킵니다. 화면을 옆으로 넘겨 탭을 바꾸는 제스처 중심의 탭 구성에 맞습니다.

    if (settling) {
      var acc = (settleTarget - posX) * SPRING_K - vel * SPRING_C;
      vel += acc * dt;
      posX += vel * dt;
      if (Math.abs(settleTarget - posX) < 0.4 && Math.abs(vel) < 4) {
        posX = settleTarget; vel = 0; settling = false;
      }
      indicator.style.transform = 'translateX(' + posX.toFixed(1) + 'px)';
    }
스와이프 추종 전환 — 화면을 옆으로 미는 거리 값이 커지는 동안 강조 표시의 위치 값이 그 비율만큼 옆 탭 쪽으로 따라가는 방식
새 창에서 열기

07 · 스와이프 추종 전환 — 화면을 옆으로 미는 거리 값이 커지는 동안 강조 표시의 위치 값이 그 비율만큼 옆 탭 쪽으로 따라가는 방식 — 측정 누적면적 5.814% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SPRING_KDRAG_MStranslateX

08여백 값 대응 전환 — 화면 아래쪽 여백 값이 커지면 바의 전체 높이와 안쪽 여백 값이 그 차이만큼 함께 늘어나는 방식

홈 인디케이터 기기로 전환하면 insetTarget 값이 INSET_ON(34px, 실제 기기 실측이 아니라 이 데모가 가정한 값)으로 바뀌고, tick()은 LERP_RATE(10)로 insetPx 값을 그 목표까지 지수 평활해 render()가 BASE_H(58)와 더한 totalH 값으로 바의 전체 높이와 안쪽 여백을 다시 그립니다. 기기마다 다른 모바일 하단 탭바 사이즈에 맞추는 화면에 씁니다.

  var BASE_H = 58; // px, 인셋 0일 때 바 콘텐츠 높이 — 계산 겹의 기준값
  var INSET_ON = 34; // px, 계산 겹: 홈 인디케이터가 있는 기기의 안전영역 인셋(데모용 가정값)
  var LERP_RATE = 10; // 인셋 값이 목표로 지수 평활되는 속도(1/s)
  var CYCLE_MS = 2600; // 자동 루프 왕복 주기
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var ai = document.getElementById('ai');
  var nav = document.getElementById('aiNav');
  var inset = document.getElementById('aiInset');
  var indicator = document.getElementById('aiIndicator');
  var readout = document.getElementById('aiReadout');
  var toggle = document.getElementById('aiToggle');
  var tabs = Array.prototype.slice.call(document.querySelectorAll('.ai__tab'));

  var isDemo = true;
  var manualOn = false;
  var insetTarget = 0;
  var insetPx = 0;
  var lastTs = 0;
  var cycleStart = 0;

  function human() {
    if (isDemo) { ai.classList.remove('is-demo'); isDemo = false; }
  }
여백 값 대응 전환 — 화면 아래쪽 여백 값이 커지면 바의 전체 높이와 안쪽 여백 값이 그 차이만큼 함께 늘어나는 방식
새 창에서 열기

08 · 여백 값 대응 전환 — 화면 아래쪽 여백 값이 커지면 바의 전체 높이와 안쪽 여백 값이 그 차이만큼 함께 늘어나는 방식 — 측정 누적면적 22.792% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

INSET_ONBASE_HmatchMedia

09모션 감소 즉시 전환 — 모션 감소 설정이 켜지면 앞선 여덟 방식의 전환이 전부 중간 단계 없이 목표 값으로 바뀌는 방식

왼쪽 판(A)은 easeOutCubic()을 rAF로 직접 적분해 DURATION_MS(320ms) 동안 translateX 값을 매끄럽게 옮기고, 오른쪽 판(B)은 계산 없이 목표 좌표를 즉시 대입해 두 판을 나란히 두고 대조합니다. 접근성 설정을 켠 사용자의 화면이나 애니메이션을 줄이고 싶은 내비게이션을 설계할 때 참고할 수 있습니다.

  var DURATION_MS = 320; // 계산 겹: 일반 패널의 전환 실제 시간(ms) — CSS transition 이 아니라 rAF 로 직접 적분
  var CYCLE_MS = 700; // 자동 루프가 좌우 탭을 오가는 간격
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var rm = document.getElementById('rm');
  var trackA = document.getElementById('rmTrackA');
  var indicatorA = document.getElementById('rmIndicatorA');
  var readoutA = document.getElementById('rmReadoutA');
  var trackB = document.getElementById('rmTrackB');
  var indicatorB = document.getElementById('rmIndicatorB');
  var readoutB = document.getElementById('rmReadoutB');
  var tabsA = Array.prototype.slice.call(trackA.querySelectorAll('.rm__tab'));
  var tabsB = Array.prototype.slice.call(trackB.querySelectorAll('.rm__tab'));

  var isDemo = true;

  function human() {
    if (isDemo) { rm.classList.remove('is-demo'); isDemo = false; }
  }
모션 감소 즉시 전환 — 모션 감소 설정이 켜지면 앞선 여덟 방식의 전환이 전부 중간 단계 없이 목표 값으로 바뀌는 방식
새 창에서 열기

09 · 모션 감소 즉시 전환 — 모션 감소 설정이 켜지면 앞선 여덟 방식의 전환이 전부 중간 단계 없이 목표 값으로 바뀌는 방식 — 측정 누적면적 5.072% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

DURATION_MSCYCLE_MSmatchMedia

값이 자리와 크기를 바꾸는 곳 — 선택 값·수량 값·스크롤 방향 값 기준

선택 값 하나로 자리·채움을 바꾸는 건 01·02·07입니다. 01은 activeIdx가 바뀌는 순간 인디케이터의 좌표·너비를 스프링으로 당기고, 02는 같은 값으로 아이콘 채움 정도를 지수 평활하며, 07은 스와이프 중 실시간 비율(dragRatio)로, 뗀 뒤에는 스프링으로 같은 선택 값을 좌표로 바꿉니다. 셋 다 같은 activeIdx 계열 값을 쓰지만 언제(클릭 즉시·드래그 도중·드래그 후)와 어떻게(스프링·평활) 바뀌는지는 서로 다릅니다.

수량 값이 기준인 건 03입니다. 클릭마다 오르는 count 값 자체는 즉시 바뀌지만, 화면에 보이는 스케일·위치 값은 BUMP_ZETA 펄스와 SPRING_K 스프링을 거쳐 뒤늦게 바뀝니다. 04는 수량이 아니라 중앙 자리의 on/off 값(lifted) 하나가 기준이고, 그 값이 스프링을 거쳐 높이·크기·그림자 세 가지를 동시에 계산해 냅니다.

스크롤 방향·눌린 시간·여백 값이 기준인 건 05·06·08입니다. 05는 scrollTop 변화량에서 구한 속도(vel)의 부호가 기준이고, 06은 heldMs가 HOLD_MS를 넘었는지가 기준이며, 08은 insetTarget이 0인지 INSET_ON인지가 기준입니다. 09는 앞선 값 계산을 스스로 갖지 않고, 01과 같은 계산이 있는 판과 계산 없는 판을 나란히 비교하는 값만 다룹니다.

아홉 개 패턴의 html·scss·js 소스 전부가 비번 zwxer7f5 으로 열리는 zip 안에 들어 있어, 위에서 짚은 01의 스프링 계산과 06의 선형 진행 계산을 직접 코드에서 확인하고 바꿔볼 수 있습니다.

어디서 깨지는가 — 빠른 연속 전환, 안전 여백 값, 모션 감소

빠른 연속 전환에서 가장 눈에 띄게 갈리는 건 01·07입니다. 탭을 여러 번 빠르게 눌러 activeIdx가 계속 바뀌면 springTo()의 목표(target)가 매번 바뀌어 인디케이터가 이전 목표에 닿기도 전에 방향을 트는데, 감쇠(SPRING_C)가 충분해 튕겨나가지는 않지만 화면상으로는 거의 멈추지 않고 계속 미끄러집니다. 07도 손가락으로 빠르게 여러 탭을 오가며 밀면 settling 스프링이 매번 새 목표로 다시 시작해 같은 방식으로 계속 미끄러집니다.

안전 여백 값(INSET_ON)은 08의 기준 자체가 실제 기기 실측이 아니라는 점에서 깨지기 쉽습니다. 이 34px는 이 데모가 가정한 값일 뿐이라, 실제 서비스에 쓸 때는 각 기기의 안전영역 값을 CSS env(safe-area-inset-bottom) 같은 실제 값으로 다시 재야 합니다. 06은 반대로 너무 짧게 눌렀다 떼는 순간에 깨지는데, heldMs가 HOLD_MS 근처에서 손을 떼면 progress 값이 절반쯤에서 멈춘 채 링이 서서히 되돌아가 사용자가 "눌렀는데 왜 안 열리지" 라고 느낄 수 있습니다.

모션 감소 처리는 01~08 전부 자바스크립트에서 prefers-reduced-motion 미디어 쿼리 값을 matchMedia()로 한 번 읽어 두지만, 그 값을 쓰는 방식은 둘로 나뉩니다. 01·02·03·04·05는 그 값이 참이면 requestAnimationFrame 루프 자체를 시작하지 않고 render()를 한 번만 호출해 최종 모습으로 즉시 넘어가는 반면, 06·07·08은 루프는 그대로 돌리고 자동 재생이 목표 값을 바꾸는 부분만 건너뛰어 실제 입력에 대한 지수 평활·선형 진행은 모션 감소와 무관하게 그대로 이어집니다. 09만 예외로 시스템 reduce 값과 무관하게 두 판이 항상 나란히 돌아 계산이 있는 경우와 없는 경우를 계속 대조해 보여줍니다.

이 하단 탭바 구성 자체를 다른 내비게이션과 비교하면 이 편의 계산 축이 더 뚜렷해집니다. CSS 탭 메뉴 전환 애니메이션 9종은 탭 메뉴가 전환되는 시각 연출 자체를 다루는 반면, 이 편은 그 전환이 이 바의 상태 값(활성 인덱스)에서 어떻게 파생되는지를 다룬다는 점에서 계산 축이 다릅니다. 플로팅 내비게이션 독 스타일 9종은 화면에 떠 있는 독이 마우스·터치에 반응하는 계산을 다루는데, 이 편은 화면 바닥에 고정된 채 스크롤 방향·여백 같은 값에서 위치·크기를 계산한다는 점에서 기준 값 자체가 다릅니다. 메가 메뉴 UI 9종은 메뉴 항목이 여러 겹으로 펼쳐지는 구성을 다루는 반면, 이 편은 배지 수량·중앙 융기처럼 단일 상태 값 하나가 크기·위치로 바뀌는 계산만 다룬다는 점에서 다룹니다.

변형 세 가지와 접근성

이 바를 자기 화면에 맞게 손볼 때는 수치 하나만 바꿔도 느낌이 크게 달라집니다.

이름 값 느낌
중앙 버튼 융기 배율 키우기 04 SCALE_MAX 1.14 → 1.28 배율을 1.14에서 1.28로 올리면 중앙 탭이 선택되는 순간 훨씬 크게 튀어 올라 주요 동작이라는 인상이 강해진다.
길게 누르는 기준 시간 늘리기 06 HOLD_MS 650 → 1200 기준 시간을 650에서 1200ms로 늘리면 링이 다 차는 데 거의 두 배가 걸려 실수로 눌러 메뉴가 열리는 일이 줄어든다.
인셋 반응 속도 늦추기 08 LERP_RATE 10 → 4 평활 속도를 10에서 4로 낮추면 바 높이가 목표 값을 향해 훨씬 느긋하게 늘어나 여백 전환이 덜 갑작스럽게 느껴진다.

접근성은 01·02가 가장 갖춰진 쪽입니다. 이 둘만 탭 버튼에 aria-current를 걸어 두고, 선택 값이 바뀔 때마다 t.setAttribute('aria-current', i === idx ? 'true' : 'false')로 값을 다시 매겨 스크린리더에도 지금 선택된 탭을 알립니다. 03·04·05·06·07·08은 탭 버튼에 is-active 클래스만 토글할 뿐 aria-current·aria-selected 같은 속성이 하나도 없어, 시각적으로는 선택 상태가 보여도 스크린리더로는 어느 탭이 활성인지 알 방법이 없습니다 — 실제 화면에 이 점을 그대로 옮기면 접근성이 01·02보다 떨어지니 aria-current 정도는 더해 주는 게 좋습니다. 06의 액션 버튼 세 개는 예외로 각각 aria-label("알림"·"메시지"·"좋아요")을 갖고 있어, 아이콘만으로는 구분되지 않는 의미를 텍스트로 보완합니다.

FAQ

값이 빠르게 여러 번 바뀌면 애니메이션이 항상 깨지나요?

아니요. 01·07처럼 목표 값이 계속 바뀌는 항목은 스프링 감쇠(SPRING_C)가 있어 튕겨나가지는 않고 방향만 계속 바뀌며 미끄러지듯 따라갑니다. 다만 06처럼 진행 값이 한 방향으로만 쌓이다가 중간에 멈추는 구조에서는 링이 절반쯤에서 되돌아가는 어색함이 그대로 드러납니다.

08처럼 INSET_ON 34px을 그대로 써도 되나요?

아니요. 08의 INSET_ON(34px)은 이 데모가 계산 구조를 보여주기 위해 가정한 값일 뿐, 실제 기기의 안전영역 실측값이 아닙니다. 실제 서비스에 쓸 때는 이 값을 고정하지 말고 각 기기·브라우저가 제공하는 안전영역 값으로 다시 재서 대입해야 합니다.

이 바를 처음 만들 때 아홉 개 중 어디부터 손대는 게 좋나요?

01이나 03부터 시작하는 걸 권합니다. 둘 다 목표 값 하나가 스프링 계산 한 가지로만 자리·크기를 바꾸기 때문에, 06처럼 선형 진행과 삼각함수 좌표가 같이 있거나 08처럼 인셋 값과 높이 값이 함께 바뀌는 구조보다 상수 하나가 결과에 미치는 영향을 눈으로 확인하기가 훨씬 쉽습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.