기차역 '드르륵' 정보판을 웹으로 살렸어요 — 스플릿 플랩 만드는 법

어떤 프로젝트냐면요

옛날 기차역이나 공항에 가면 출발/도착 정보판이 '드르륵' 소리를 내면서 글자가 촤르륵 넘어가던 거 기억나세요? 그 정보판을 웹에서 똑같이 재현해서, 그 위에 기술 뉴스 헤드라인을 띄워주는 재미있는 프로젝트가 나왔어요. 화면 가득 채워진 검은 패널에서 글자 하나하나가 알파벳을 빠르게 넘기다가 제목으로 착착 맞춰지는 모습이, 보고만 있어도 묘하게 기분이 좋아지는 그런 작품이에요.

이 디스플레이가 원래 뭐냐면요

이 물건의 정식 이름은 '스플릿 플랩 디스플레이(split-flap display)'예요. 글자가 적힌 작은 플랩(날개) 수십 장을 축에 끼워두고, 모터로 좌르륵 넘겨서 원하는 글자에서 멈추는 기계식 표시판이에요. 이탈리아 회사가 만든 'Solari' 보드가 워낙 유명해서 '솔라리 보드'라고도 불러요. 1960년대부터 전 세계 기차역과 공항을 책임졌는데, 요즘은 전자 디스플레이에 밀려서 점점 사라지는 추세예요. 그래서 오히려 이 '드르륵' 하는 아날로그 감성에 향수를 느끼는 사람이 많아졌고, 그걸 웹과 인테리어 소품으로 되살리는 게 하나의 유행이 됐어요.

웹에서는 어떻게 만드냐면요

웹에서 이걸 흉내 내는 핵심은 CSS의 3D 변형(transform)이에요. 글자 칸 하나를 위아래 두 쪽으로 나눠서 생각해요. 글자가 바뀔 때 위쪽 절반이 아래로 '탁' 접히면서 넘어가는 것처럼 보이게 만드는 거예요. 이때 rotateX라는 속성으로 칸을 가로축 기준으로 회전시키고, transform-origin(회전의 중심축)을 칸 가운데에 둬서 마치 경첩처럼 접히게 해요. 그리고 자바스크립트가 '목표 글자에 도달할 때까지 알파벳을 A, B, C... 순서로 빠르게 넘겨라' 하고 각 칸의 타이밍을 조절해요. 칸마다 멈추는 시점을 살짝씩 다르게 주면, 우리가 실제 정보판에서 보던 '촤르륵 물결치며 맞춰지는' 그 느낌이 살아나요. 진짜 기계의 '드르륵' 소리까지 효과음으로 넣으면 몰입감이 확 올라가고요.

이런 게 왜 인기일까요

요즘 프론트엔드 트렌드 중에 '레트로 UI'와 '마이크로 인터랙션'이라는 흐름이 있어요. 마이크로 인터랙션이 뭐냐면, 버튼을 누르거나 숫자가 바뀔 때 슬쩍 들어가는 작고 섬세한 움직임이에요. 이게 별것 아닌 것 같아도 사용자가 '오 신경 썼네' 하고 느끼게 만드는 디테일이거든요. 스플릿 플랩 효과는 숫자 카운터, 가격 표시, 대시보드 같은 데 넣으면 밋밋한 화면을 단숨에 멋지게 바꿔줘요. 실제로 이 효과만 모아둔 오픈소스 라이브러리도 여럿 있어서, 꼭 바닥부터 만들 필요도 없어요.

한국 개발자에게는요

이런 프로젝트는 두 가지 면에서 써먹기 좋아요. 첫째, 포트폴리오용으로 딱이에요. 화려한 기능보다 '디테일을 챙길 줄 안다'는 인상을 주거든요. 면접관이나 동료가 봤을 때 기억에 남는 작은 무기가 돼요. 둘째, 사내 대시보드나 전광판, 행사장 디스플레이처럼 '보여주기용 화면'에 활용하기 좋아요. 똑같은 숫자라도 스플릿 플랩으로 넘어가면 사람들이 한 번 더 쳐다보게 되니까요. CSS transform과 애니메이션 타이밍을 연습하는 학습 과제로도 더없이 좋은 소재예요.

마무리

정리하면, 사라져 가는 기계식 정보판의 감성을 CSS 3D 변형과 약간의 자바스크립트로 되살린 아기자기한 프로젝트예요. 기능은 단순해도 '어떻게 보여줄까'를 고민하게 만든다는 점에서 배울 게 많고요. 여러분이라면 이 스플릿 플랩 효과를 어떤 화면에 넣어보고 싶으세요? 한 번쯤 직접 만들어보고 싶은 UI 효과가 있다면 같이 이야기해 봐요.