디자인 아틀라스
EN
↝ 모션

스플릿 플랩

Split-flap display

공항·기차역 전광판처럼 각 칸의 글자판이 위아래로 탈칵거리며 넘어가 목표 글자에 도달하는 효과. 칸마다 넘어가는 속도가 조금씩 달라 도착 시점이 물결처럼 엇갈립니다.

다른 이름: Departure boardFlip boardSolari board
···
html
<div class="board" id="board"></div>
css
.board{display:flex;gap:4px}
.cell{position:relative;width:clamp(20px,7vmin,36px);height:clamp(28px,9.5vmin,50px);border-radius:4px;overflow:hidden;
  background:#1c1c22;display:grid;place-items:center;color:#eee;
  font:700 clamp(15px,5.6vmin,26px)/1 ui-monospace,monospace;transition:transform .07s linear}
.cell::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#000;opacity:.55}
js
const board = document.getElementById('board');
const WORDS = ['DESIGN', 'ATLAS-'];
const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ-';
const cells = [...WORDS[0]].map((ch, i) => {
  const c = document.createElement('div');
  c.className = 'cell';
  c.textContent = ch;
  board.appendChild(c);
  return c;
});

function flap(el, target, delay) {
  setTimeout(() => {
    let steps = 3 + Math.floor(Math.random() * 3);
    let i = 0;
    function tick() {
      const isFinal = i >= steps;
      el.style.transform = 'rotateX(-90deg)';
      setTimeout(() => {
        el.textContent = isFinal ? target : LETTERS[Math.floor(Math.random() * LETTERS.length)];
        el.style.transform = 'rotateX(0deg)';
        i++;
        if (!isFinal) setTimeout(tick, 65);
      }, 65);
    }
    tick();
  }, delay);
}

let wi = 1;
function run() {
  const word = WORDS[wi % WORDS.length];
  cells.forEach((c, i) => flap(c, word[i], i * 110));
  wi++;
}
setInterval(run, 2600);

실물 스플릿 플랩 보드는 글자판이 반으로 접힌 물리적 카드 여러 장을 원통에 감아두고, 한 장씩 아래로 넘기며 다음 글자를 보여줍니다. 화면에서는 이걸 "칸(cell) 하나가 짧은 시간 안에 여러 글자를 빠르게 훑고 목표 글자에서 멈추는" 반복으로 흉내 냅니다 — 칸마다 현재 글자에서 목표 글자까지 임의의 몇 글자를 더 거치게 하고, 한 글자씩 넘길 때마다 살짝 회전하는 듯한 전환(짧은 rotateX 또는 위아래 슬라이드)을 넣습니다.

실물 보드의 특징적인 느낌은 칸마다 정지 시점이 다르다는 것입니다 — 왼쪽 칸부터 순서대로 멈추거나, 아예 무작위로 멈춰서 "아직 계산 중"이라는 인상을 줍니다. 칸의 시작 딜레이를 인덱스에 비례하게 주면 왼쪽에서 오른쪽으로 훑듯 정착하는 느낌이 나고, 완전히 무작위로 주면 기계식 보드 특유의 부산스러운 느낌이 강해집니다.

디지털 시대에는 물리적 제약이 없는데도 이 효과를 쓰는 이유는 순수하게 "정보가 갱신되고 있다"는 신뢰감과 향수(레트로) 때문입니다 — 값이 바뀔 때마다 매번 완전히 새로 훑게 하면 과할 수 있으니, 실제로 바뀌는 칸만 플랩시키고 나머지는 가만히 두는 절제가 필요합니다.

언제 쓰나

실시간으로 갱신되는 숫자·상태(대시보드, 순위표)에 신뢰감 있는 변화를 주고 싶을 때 씁니다. 자주 갱신되는 값이면 매번 풀 애니메이션을 재생하지 말고 바뀐 칸만 플랩시키세요.