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

타이핑 인디케이터 UI 9종 — 점 3개부터 그룹 채팅까지

· Godrich · 9종 · 15분 읽기

로딩SCSS바닐라 JS자동 재생클릭알림미디어·프레스

타이핑 인디케이터 아홉 개 중 하나는 입력 중이던 시간이 길수록 아바타 테두리가 느리게 뛰고, 하나는 그룹 채팅에서 입력자가 바뀔 때마다 남은 시간 값으로 이름표 폭을 다시 그리고, 또 하나는 진폭 값 배열로 음성 입력 표시의 막대 높이를 다시 계산합니다.

이 아홉 화면은 실제 메신저 서비스가 아니라 가상의 발신자와 자체 말풍선으로 만든 것이며, 사용자가 손으로 조작하는 리스너는 08 하나뿐이고 나머지 여덟 개는 타이머와 rAF 로 정해진 주기를 스스로 돕니다.

점 3개 바운스 — 순서를 인덱스로 계산해 튀는 기본형01 typing-indicator-dot-bounce-basic 말풍선 모핑 — 점 세 개가 하나의 말풍선 크기로 합쳐지는 전환02 typing-indicator-bubble-morph-in 다중 사용자 겹침 — 동시 입력자 수를 이름표 폭으로 계산하는 줄03 typing-indicator-multi-user-stack 아바타 펄스 동기화 — 입력 지속 시간으로 박동 주기를 다시 구하는 원04 typing-indicator-avatar-pulse-sync 읽음 표시 병합 — 사라진 시간 차로 합쳐지는 시점을 구하는 라벨05 typing-indicator-read-receipt-merge 그룹 채팅 순환 — 입력자가 바뀔 때마다 남은 시간으로 폭을 다시 그리는 라벨06 typing-indicator-group-chat-cycle 음성 입력 파형 — 진폭 배열 값으로 막대 높이를 다시 그리는 표시07 typing-indicator-voice-waveform 표시 끄기 토글 — 상태 값만큼 투명도를 보간하는 스위치08 typing-indicator-mute-toggle-fade 키보드 바 힌트 — 가상 키보드 높이 값으로 위치를 다시 잡는 표시09 typing-indicator-keyboard-bar-hint

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

인스타 입력중 표시처럼 앱마다 이름과 생김새는 달라도, 이 아홉 화면은 특정 앱의 실제 표시를 재현한 것이 아니라 그런 검색어로 찾는 사람이 흔히 기대하는 움직임을 자체 디자인으로 구현한 것입니다. 같은 "입력 중" 표시라도 무엇을 재서 무엇으로 바꾸는지에 따라 갈래가 나뉘는데, 아래 표는 그 계산이 화면을 실제로 얼마나 흔들었는지 잰 값이고 순서는 점·말풍선·인원 표시(01~03) → 지속·잔여 시간 표시(04~06) → 진폭·상태·위치 표시(07~09) 로 채팅 화면에서 마주치는 배치와 가깝게 잡았습니다.

데모

아홉 화면은 각자의 계산 함수가 인덱스·경과 시간·인원 수·진폭 배열 같은 값 하나를 받아 저마다 다른 방식으로 표시를 새로 그립니다. 실제 메신저 서버와의 연결이나 다른 사람의 실제 타자 신호는 어디에도 없고, 그 값이 바뀌면 화면이 어떻게 달라지는지만 자동 재생 또는 08 의 클릭으로 보여줍니다. 카톡 입력중 표시처럼 이미 눈에 익은 이 표시도 뜯어보면 결국 인덱스·경과 시간·진폭 같은 값 하나를 계산해 화면에 다시 쓰는 원리로 움직이며, 실제 서비스에 붙일 때는 이 계산이 시작·끝나는 자리에 진짜 입력 이벤트 신호를 얹으면 됩니다.

실측 한눈에

항목 초점 누적면적 % 강도 평균 움직인 프레임
01 점 3개 바운스 인덱스 → 딜레이 0.225 60.4 15/23
02 말풍선 모핑 합산 너비 → 보간 폭 4.594 191.1 13/23
03 다중 사용자 겹침 인원 수 → 라벨 폭 실측 0.337 105.7 6/23
04 아바타 펄스 동기화 지속 시간 → 박동 주기 2.16 55.9 19/23
05 읽음 표시 병합 시간 차 → 병합 판정 3.026 78.3 9/23
06 그룹 채팅 순환 잔여 시간 → 폭 축소 0.329 156.8 23/23
07 음성 입력 파형 진폭 배열 → 막대 높이 1.029 187.9 23/23
08 표시 끄기 토글 상태 값 → 투명도 보간 6.372 80.5 11/23
09 키보드 바 힌트 키보드 높이 값 → 위치 11.546 106.9 12/23

01·03·06 은 점 세 개나 얇은 막대처럼 원래 몸집이 작은 요소를 움직이는 화면이라 누적면적이 1% 밑으로 잡히고, 09 는 하단 전체가 함께 밀려 올라가는 화면이라 11.5%대로 가장 큽니다. 03·05·08·09 는 인원·상태가 바뀌는 시점 사이에 값이 그대로 머무는 정지 구간이 섞여 있어 움직인 프레임 수가 상대적으로 적게 잡힌 것이지, 계산이 도중에 멈춘 결함은 아닙니다.

타이핑 인디케이터의 해부 — 아홉 화면이 계산하는 것

값을 실측해 치수로 바꾸는 축

01·02·03 은 무언가의 값을 구해 그 값을 화면의 치수로 바꿉니다. 01 은 점의 순서(index) 값에 고정 간격을 곱해 각 점의 애니메이션 시작 시점(--delay)을 다시 구하고, 02 는 점 세 개의 너비 합에서 말풍선 하나의 너비까지 보간 값(--w)을 구하며, 03 은 동시 입력자 수만큼 달라지는 라벨 텍스트의 실제 렌더 폭을 getBoundingClientRect() 로 재 배지 너비(--bw)에 반영합니다.

경과 시간을 기준 삼는 축

04·05·06 은 시간이 얼마나 흘렀는지를 기준으로 값을 다시 구합니다. 04 는 입력이 지속된 눈금(tick) 수에 감속 계수를 곱해 박동 주기를 늘리고, 05 는 표시가 사라진 시각과 메시지가 도착한 시각의 차를 재 병합 여부를 가르며, 06 은 다음 입력자로 넘어가기까지 남은 시간의 비율만큼 막대 폭을 줄입니다.

값을 비교해 갈래를 나누는 축

07·08·09 는 값 하나를 기준과 견주거나 배열에서 차례로 읽어 화면을 가릅니다. 07 은 미리 정한 진폭 배열을 인덱스 순서로 읽어 막대마다 다른 높이를 그리고, 08 은 켜짐·꺼짐 상태 값에 따라 목표 투명도를 고르며, 09 는 가상 키보드가 차지한 높이 값을 기준으로 표시와 키보드를 함께 옮깁니다.

화면별 코드

01점 3개 바운스 — 순서를 인덱스로 계산해 튀는 기본형

1:1 채팅방 하단에 흔히 붙는 기본형으로, 점 세 개가 튀어 오르는 시작 시점을 점의 순서 값으로 다시 구합니다.

인덱스 값에 간격을 곱해 지연 시점을 되구하는 계산

dots.forEach() 는 각 점의 data-i 값을 읽어 i * DOT_STAGGER_MS 값을 --delay 커스텀 프로퍼티에 반영하고, 이 값이 그대로 animation-delay 로 쓰여 튀어 오르는 시작 시점을 벌립니다. 페이지가 열리는 순간 한 번만 계산해 CSS @keyframes 에 넘길 뿐, 이후로는 별도 자바스크립트 개입이 없습니다.

(function () {
  var DOT_STAGGER_MS = 120;
  var dots = document.querySelectorAll('.dot');
  if (!dots.length) return;
  dots.forEach(function (dot) {
    var i = Number(dot.dataset.i || 0);
    dot.style.setProperty('--delay', (i * DOT_STAGGER_MS) + 'ms');
  });
})();
점 3개 바운스 — 순서를 인덱스로 계산해 튀는 기본형
새 창에서 열기

01 · 점 3개 바운스 — 순서를 인덱스로 계산해 튀는 기본형 — 측정 누적면적 0.225% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

animation-delaysetPropertyaria-live

02말풍선 모핑 — 점 세 개가 하나의 말풍선 크기로 합쳐지는 전환

챗봇이 아닌 실사용자끼리의 메신저 화면에서, 입력 표시가 끝난 상태가 되면 점 세 개가 차지하던 자리가 메시지 말풍선 크기로 넘어갑니다.

합산 너비를 말풍선 너비로 보간하는 계산

apply(t) 는 주기 시작 지점(MORPH_START)부터 MORPH_MS 동안 점 너비 합(DOT_W)에서 말풍선 너비(MSG_W)까지를 easeOut 곡선으로 보간해 --w 값을 다시 쓰고, 보간이 끝나는 지점(p >= 1)에 맞춰 점과 메시지의 투명도를 맞바꿉니다. 화면이 prefers-reduced-motion 을 감지한 상태가 되면 보간을 건너뛰고 원래 너비 값에서 멈춥니다.

function easeOut(p) { return 1 - Math.pow(1 - p, 3); }

function apply(t) {
  var inMorph = t >= MORPH_START && t < REVERT_AT;
  var p = Math.min(Math.max((t - MORPH_START) / MORPH_MS, 0), 1);
  var eased = easeOut(p);
  var w = inMorph ? DOT_W + (MSG_W - DOT_W) * eased : DOT_W;
  bubble.style.setProperty('--w', w.toFixed(1));
  var done = inMorph && p >= 1;
  dots.style.opacity = done ? '0' : '1';
  msg.style.opacity = done ? '1' : '0';
}
말풍선 모핑 — 점 세 개가 하나의 말풍선 크기로 합쳐지는 전환
새 창에서 열기

02 · 말풍선 모핑 — 점 세 개가 하나의 말풍선 크기로 합쳐지는 전환 — 측정 누적면적 4.594% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setPropertyrequestAnimationFrameprefers-reduced-motion

03다중 사용자 겹침 — 동시 입력자 수를 이름표 폭으로 계산하는 줄

그룹 채팅방 상단에서 동시에 입력 중인 사람이 둘 이상인 상태가 되면 이름을 나열하는 대신 '외 N명' 배지 하나로 정리됩니다.

라벨 텍스트의 실측 폭으로 배지 너비를 되구하는 계산

widthFor(n) 은 화면 밖에 둔 측정용 요소에 '+n' 문구를 넣고 getBoundingClientRect().width 로 실제 렌더 폭을 재고, apply(t) 는 그 폭 값 사이를 COUNTS 순서대로 보간해 --bw 값과 배지 문구를 함께 바꿉니다. 인원 수가 늘어도 문구 길이만큼만 배지가 넓어지는 것은 이 실측 단계 때문입니다.

  function widthFor(n) {
    measure.textContent = '+' + n;
    return measure.getBoundingClientRect().width;
  }

  var widths = COUNTS.map(widthFor);
  var CYCLE_MS = HOLD_MS * COUNTS.length;

  function apply(t) {
    var phase = Math.floor(t / HOLD_MS) % COUNTS.length;
    var next = (phase + 1) % COUNTS.length;
    var phaseT = t % HOLD_MS;
    var p = Math.min(phaseT / MORPH_MS, 1);
    var w = widths[phase] + (widths[next] - widths[phase]) * p;
    badge.style.setProperty('--bw', w.toFixed(1));
    badge.textContent = '+' + COUNTS[phase];
  }
다중 사용자 겹침 — 동시 입력자 수를 이름표 폭으로 계산하는 줄
새 창에서 열기

03 · 다중 사용자 겹침 — 동시 입력자 수를 이름표 폭으로 계산하는 줄 — 측정 누적면적 0.337% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRectsetPropertyrequestAnimationFrame

04아바타 펄스 동기화 — 입력 지속 시간으로 박동 주기를 다시 구하는 원

화상회의 채팅 사이드바처럼 입력 지속 시간이 눈에 잘 안 띄는 자리에서, 입력이 길어질수록 아바타 테두리의 박동이 눈에 띄게 느려지는 상태가 됩니다.

지속 눈금 수에 감속 계수를 곱해 박동 주기를 되구하는 계산

step() 은 150ms 마다 한 번씩 tick 값을 늘리며 BASE_PERIOD_MS + tick * PULSE_SLOWDOWN_MS_PER_SEC 값으로 --period 를 다시 쓰고, tick 이 MAX_TICKS 를 넘어 0으로 되돌아가는 상태가 되면 박동 주기도 원래 값으로 돌아갑니다. 주기 값이 CSS 지속 시간이 아니라 커스텀 프로퍼티로 들어가 있어 스크립트 쪽 계산만 바뀌어도 박동 속도가 곧바로 반영됩니다.

  var tick = 0;
  ring.style.setProperty('--period', BASE_PERIOD_MS + 'ms');

  function step() {
    tick = (tick + 1) % (MAX_TICKS + 1);
    var typing = tick > 0;
    var period = BASE_PERIOD_MS + tick * PULSE_SLOWDOWN_MS_PER_SEC;
    ring.style.setProperty('--period', period + 'ms');
    ring.classList.toggle('is-typing', typing);
    status.textContent = typing ? '입력 중' : '대기';
  }
아바타 펄스 동기화 — 입력 지속 시간으로 박동 주기를 다시 구하는 원
새 창에서 열기

04 · 아바타 펄스 동기화 — 입력 지속 시간으로 박동 주기를 다시 구하는 원 — 측정 누적면적 2.16% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setPropertyclassList.togglesetInterval

05읽음 표시 병합 — 사라진 시간 차로 합쳐지는 시점을 구하는 라벨

1:1 채팅의 메시지 목록 하단에서, 입력 표시가 사라진 시점과 메시지가 도착한 시점이 가까운 상태가 되면 두 표시가 한 자리로 합쳐집니다.

두 시각의 차를 기준값과 비교해 병합 여부를 가르는 계산

표시가 사라지는 순간의 Date.now() 값을 vanishAt 에 담아 두고, 메시지가 도착하는 시점의 Date.now() 값과의 차(gap)를 MERGE_GAP_MS 와 비교해 그 값이 작은 상태가 되면 is-merged 클래스를 붙입니다. 두 타이머(timer1·timer2)는 새 주기가 시작될 때마다 clearTimeout 으로 먼저 정리해 이전 값이 겹쳐 남지 않게 합니다.

  function runCycle() {
    dots.style.opacity = '1';
    msgRow.style.opacity = '0';
    receipt.classList.remove('is-merged');
    timer1 = setTimeout(function () {
      dots.style.opacity = '0';
      var vanishAt = Date.now();
      timer2 = setTimeout(function () {
        var arrivedAt = Date.now();
        var gap = arrivedAt - vanishAt;
        var merged = gap < MERGE_GAP_MS;
        msgRow.style.opacity = '1';
        receipt.classList.toggle('is-merged', merged);
        live.textContent = merged ? '합쳐진 표시' : '별도 표시';
      }, ARRIVE_DELAY_MS);
    }, VANISH_AT);
  }
읽음 표시 병합 — 사라진 시간 차로 합쳐지는 시점을 구하는 라벨
새 창에서 열기

05 · 읽음 표시 병합 — 사라진 시간 차로 합쳐지는 시점을 구하는 라벨 — 측정 누적면적 3.026% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setTimeoutclassList.togglearia-live

06그룹 채팅 순환 — 입력자가 바뀔 때마다 남은 시간으로 폭을 다시 그리는 라벨

커뮤니티 단체 채팅방처럼 입력자가 자주 바뀌는 자리에서, 다음 사람으로 넘어가기 전 남은 시간만큼 이름표 폭이 함께 줄어드는 상태가 됩니다.

남은 시간 비율을 막대 폭으로 되구하는 계산

apply(t) 는 HOLD_MS 를 기준으로 지금이 몇 번째 이름 구간인지(idx)를 구하고, 그 구간 안에서 남은 비율(remain)을 scaleX() 값으로 바꿔 막대가 시간에 맞춰 줄어들게 합니다. 구간이 끝나 다음 이름으로 넘어가는 상태가 되면 막대 폭도 다시 1로 돌아가 같은 계산을 되풀이합니다.

  var NAMES = ['A', 'B', 'C'];
  var HOLD_MS = 640;
  var CYCLE_MS = HOLD_MS * NAMES.length;

  function apply(t) {
    var idx = Math.floor(t / HOLD_MS) % NAMES.length;
    var phaseT = t % HOLD_MS;
    var remain = 1 - phaseT / HOLD_MS;
    who.textContent = NAMES[idx];
    fill.style.transform = 'scaleX(' + remain.toFixed(3) + ')';
  }
그룹 채팅 순환 — 입력자가 바뀔 때마다 남은 시간으로 폭을 다시 그리는 라벨
새 창에서 열기

06 · 그룹 채팅 순환 — 입력자가 바뀔 때마다 남은 시간으로 폭을 다시 그리는 라벨 — 측정 누적면적 0.329% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFrametransform-originscaleX(

07음성 입력 파형 — 진폭 배열 값으로 막대 높이를 다시 그리는 표시

음성 메시지 녹음 화면에서, 녹음 중인 상태가 되면 막대마다 높이가 다른 파형이 계속 다시 그려집니다.

진폭 배열을 인덱스 순서로 읽어 막대 높이를 되구하는 계산

tick() 은 80ms 마다 미리 정해 둔 AMPLITUDES 배열을 idx 기준으로 순서대로 읽어 막대마다 scaleY() 값을 다시 매기고, idx 가 배열 끝에 닿으면 나머지 연산(%)으로 다시 처음 값부터 읽습니다. 실제 마이크 입력이나 오디오 API 호출은 어디에도 없고 고정된 값 배열만 순회할 뿐입니다.

  var AMPLITUDE_TICK_MS = 80;
  var AMPLITUDES = [.25, .55, .82, .38, .68, .92, .30, .60, .78, .42, .58, .88, .34, .64, .48, .70];

  var idx = 0;
  function tick() {
    bars.forEach(function (bar, i) {
      var v = AMPLITUDES[(idx + i) % AMPLITUDES.length];
      bar.style.transform = 'scaleY(' + v.toFixed(2) + ')';
    });
    idx = (idx + 1) % AMPLITUDES.length;
  }
음성 입력 파형 — 진폭 배열 값으로 막대 높이를 다시 그리는 표시
새 창에서 열기

07 · 음성 입력 파형 — 진폭 배열 값으로 막대 높이를 다시 그리는 표시 — 측정 누적면적 1.029% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setIntervaltransform-originscaleY(

08표시 끄기 토글 — 상태 값만큼 투명도를 보간하는 스위치

알림 최소화 설정이 있는 채팅 앱처럼, 음소거 버튼을 누르면 입력 표시 카드의 투명도가 상태 값만큼 보간되어 사라지거나 나타납니다.

상태 값을 목표 투명도로 바꾸는 계산

apply() 는 muted 값이 참인 상태가 되면 카드 투명도를 OFF_OPACITY 로, 거짓인 상태가 되면 1로 맞추고 aria-pressed 값도 함께 바꾸며, 실제 전환 구간은 CSS transition 이 그 사이를 보간합니다. 아홉 화면 가운데 클릭 리스너가 붙은 것은 이 항목 하나뿐이고, 나머지 화면은 같은 apply() 계산을 타이머가 대신 불러 줍니다.

  function apply() {
    card.style.opacity = muted ? String(OFF_OPACITY) : '1';
    badge.hidden = !muted;
    btn.setAttribute('aria-pressed', String(muted));
    live.textContent = muted ? '표시 꺼짐' : '표시 켜짐';
  }

  btn.addEventListener('click', function () {
    muted = !muted;
    apply();
  });
표시 끄기 토글 — 상태 값만큼 투명도를 보간하는 스위치
새 창에서 열기

08 · 표시 끄기 토글 — 상태 값만큼 투명도를 보간하는 스위치 — 측정 누적면적 6.372% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

addEventListeneraria-pressedopacity

09키보드 바 힌트 — 가상 키보드 높이 값으로 위치를 다시 잡는 표시

모바일 채팅 앱에서 가상 키보드가 열린 상태가 되면 입력 표시가 키보드 바로 위까지 함께 따라 올라갑니다.

키보드 높이 값을 위치 값으로 되구하는 계산

heightAt(t) 는 열림·닫힘 구간마다 ease() 곡선으로 키보드 높이(KB_H)를 0부터 다시 구하고, apply(h) 는 그 값을 표시와 키보드 양쪽의 translateY() 에 반영해 둘을 같은 속도로 움직입니다. top·height 같은 레이아웃 속성은 건드리지 않고 transform 값만 다시 계산할 뿐입니다.

  function heightAt(t) {
    if (t < OPEN_START) return 0;
    if (t < OPEN_START + OPEN_MS) {
      return KB_H * ease((t - OPEN_START) / OPEN_MS);
    }
    if (t < CLOSE_START) return KB_H;
    if (t < CLOSE_START + CLOSE_MS) {
      return KB_H * (1 - ease((t - CLOSE_START) / CLOSE_MS));
    }
    return 0;
  }

  function apply(h) {
    keyboard.style.transform = 'translateY(' + (KB_H - h) + 'px)';
    indicator.style.transform = 'translateY(' + (-h) + 'px)';
  }
키보드 바 힌트 — 가상 키보드 높이 값으로 위치를 다시 잡는 표시
새 창에서 열기

09 · 키보드 바 힌트 — 가상 키보드 높이 값으로 위치를 다시 잡는 표시 — 측정 누적면적 11.546% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateY(requestAnimationFrametransform

값이 화면을 바꾸는 곳 — 경과 시간·참여자 수·진폭

경과 시간 — 지속·잔여·차이 값을 다시 재는 곳

04 는 입력이 지속된 눈금 수로 박동 주기를 늘리고, 05 는 표시가 사라진 시점과 메시지 도착 시점의 차로 병합 여부를 가르며, 06 은 다음 사람으로 넘어가기까지 남은 시간의 비율로 막대 폭을 줄입니다. 세 화면 모두 "지금까지 얼마나 지났는가" 라는 한 값을 서로 다른 결과로 바꿔 쓰는 셈입니다.

참여자 수 — 인원 값을 라벨 폭으로 바꾸는 곳

03 은 동시 입력자가 둘 이상인 상태가 되면 이름을 하나하나 나열하는 대신 앞선 이름과 나머지 인원 수만 세어 '외 N명' 문구의 실제 렌더 폭을 배지 너비에 반영합니다. 인원이 늘어도 문구 길이만큼만 배지가 넓어지는 것은 이 실측 계산 덕분입니다.

진폭 — 배열 값을 순회해 높이로 바꾸는 곳

07 은 실제 마이크 입력이 아니라 미리 정한 진폭 값 배열을 인덱스 순서로 읽어 막대마다 다른 높이를 매기고, 배열 끝에 닿으면 나머지 연산으로 처음 값부터 다시 읽습니다. 값 자체는 고정돼 있지만 읽는 위치가 매 눈금마다 하나씩 밀려 화면에서는 파형처럼 보입니다.

어디서 깨지는가 — 다중 사용자 겹침·재연결·저사양 기기

다중 사용자 겹침 — 인원이 늘어날수록 실측이 잦아진다

03 은 인원 수가 바뀔 때마다 getBoundingClientRect() 로 폭을 다시 재는데, 실제 그룹 채팅에서는 여러 사람이 거의 동시에 입력을 시작·종료하면 이 실측이 매우 짧은 간격으로 겹쳐 일어날 수 있습니다. 데모의 COUNTS 배열은 2·3·4 세 값만 순서대로 도는 고정 시나리오라 이런 겹침 빈도까지 재현하지는 않습니다.

재연결 — 시간 차 비교가 실제 지연과 같지 않다

05 가 비교하는 gap 값은 setTimeout 으로 정해 둔 고정 지연이라 항상 같은 패턴으로 병합 여부가 갈리는데, yb2bq6qt 압축 파일 안의 원본 소스를 열어 보면 이 값이 실제 네트워크 재연결 지연과는 무관하게 짜여 있다는 것을 바로 확인할 수 있습니다. 실제 서비스에서는 이 비교 기준을 재연결 뒤 실측한 지연 값으로 바꿔 넣어야 합니다.

저사양 기기 — 진폭 갱신 주기가 촘촘하면 프레임이 밀린다

07 은 AMPLITUDE_TICK_MS 값(80ms)마다 setInterval 을 다시 불러 막대 값을 갱신하는데, 이 간격이 기기 성능보다 촘촘하면 실제로는 갱신이 밀려 파형이 매끄러운 대신 뚝뚝 끊겨 보일 수 있습니다. 변형 표의 세 번째 항목처럼 이 값을 늘리면 계산 빈도는 줄지만 파형 특유의 매끄러운 느낌도 함께 옅어집니다.

변형 세 가지와 접근성

변형 바꾸는 값 바뀌는 느낌
점 딜레이 간격 01 DOT_STAGGER_MS 120ms → 260ms 간격을 120ms 로 두면 세 점이 거의 동시에 튀어 바운스가 뭉쳐 보이고, 260ms 로 늘리면 점 사이 간격이 벌어져 물결이 느긋하게 흐르는 대신 전체 주기가 늘어져 답답하게 느껴질 수 있다
아바타 펄스 감속 계수 04 PULSE_SLOWDOWN_MS_PER_SEC 40ms → 120ms 계수를 40ms 로 두면 오래 입력해도 박동이 거의 느려지지 않아 지속 시간 정보가 안 느껴지고, 120ms 로 올리면 몇 초 만에 박동이 눈에 띄게 늘어져 '한참 입력 중' 이라는 인상이 분명해진다
진폭 갱신 주기 07 AMPLITUDE_TICK_MS 80ms → 220ms 주기를 80ms 로 두면 막대가 매끄럽게 이어져 실제 파형처럼 보이지만 계산이 잦고, 220ms 로 늘리면 막대가 뚝뚝 끊겨 움직여 저사양 기기 흉내에는 맞지만 파형 느낌은 옅어진다

접근성

아홉 화면 모두 prefers-reduced-motion 값을 확인해, 그 값이 켜진 상태가 되면 반복 재생을 시작하지 않고 정지된 값 하나만 그려 둡니다. 01·02·03·04·05·06·07·08 은 role="status" aria-live="polite" 자리를 두어 눈으로 안 보고도 상태 변화를 알 수 있게 했고, 08 은 여기에 더해 button 요소와 aria-pressed 속성을 그대로 써서 키보드 포커스와 Enter·Space 로도 같은 전환을 볼 수 있습니다. 09 는 표시 위치만 옮길 뿐 별도의 안내 문구는 두지 않았습니다.

FAQ

이 데모는 실제 메신저 앱의 타이핑 인디케이터와 똑같이 동작하나요?

아니요. 카톡 채팅 입력중 표시처럼 이름은 익숙해도 아홉 화면 모두 실제 메신저 서버나 다른 사람의 실제 타자 신호 없이 인덱스·경과 시간·진폭 배열 같은 값을 계산해 화면만 바꾸는 재현이고, 특정 메신저 앱의 내부 동작 방식을 그대로 옮긴 것은 아닙니다. 실제 서비스에 쓰려면 이 계산이 시작·끝나는 자리에 진짜 입력 이벤트 신호를 얹어야 합니다.

아홉 화면 중 실제로 눌러서 조작할 수 있는 화면은 어떤 건가요?

08 표시 끄기 토글 하나뿐입니다. 나머지 여덟 화면은 setInterval·requestAnimationFrame 이 정해진 주기를 따라 값을 자동으로 다시 계산하며, 클릭이나 입력이 없어도 화면이 계속 바뀝니다.

그룹 채팅에서 여러 명이 동시에 입력하면 실제로도 이렇게 보이나요?

03 과 06 은 인원 수·순서가 정해진 값을 순서대로 도는 고정 시나리오를 보여줄 뿐이고, 실제 그룹 채팅에서 입력자가 겹치거나 순서 없이 나타나고 사라지는 빈도는 서비스와 그 순간의 접속 상태마다 다르게 나타납니다. 데모의 COUNTS·NAMES 값을 바꾸면 다른 인원 패턴도 확인할 수 있습니다.

더 읽을거리

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

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