스크롤이 입력이 되는 순간, 〈Banpo-Xism〉의 UI/UX 패턴 분석과 디자이너에게 시사하는 것
〈Banpo-Xism · 반포자이즘〉은 익숙한 인스타그램식 수직 스크롤로 시작해서, 광고를 누르는 단일 행동을 통해 사용자가 자기 디바이스의 모든 센서(카메라, 음성, 가속도, 자이로, 멀티 터치)를 차례로 활성화하는 멀티 디바이스 웹 작품이다. 이 글은 작품 안에서 작동하는 UI/UX 패턴 14가지를 정리하고, 그것이 UX 디자이너, 테크니컬 아티스트, 브랜드 경험 기획자에게 어떤 의미를 갖는지 본다. 작품은 banpo-xism.vercel.app에서 사전 체험 가능하고, 〈Living Geometry 2026〉 전시 현장에서는 미디어월·PC·다른 관람객의 핸드폰과 함께 합주로 작동한다.
친숙한 매체를 그대로 빌리고, 의미만 어긋나게 하기
진입은 인스타그램의 reels와 거의 같은 형태로 시작한다. 19×19 격자에 놓인 361개 아파트가 수직으로 한 장씩 넘어가고, 사용자는 익숙한 스크롤 제스처만으로 작품 안에 들어온다. 학습 비용이 거의 0이다. 그 친숙한 인터페이스 위에서 ‘위치(반포)와 브랜드(자이)’의 2차원 평면이라는 사회 비평이 전개된다. UI는 친숙하게 두고, 의미만 어긋나게 한다.
광고를 누르는 단일 동작이 진짜 진입점이다. 그 한 번의 탭 이후 카메라, 음성, 가속도, 자이로, 멀티 터치가 차례로 풀린다. ‘튜토리얼 페이지’ 없이 사용자가 매체 안에서 자기 디바이스의 능력을 발견한다. 매체에 대한 학습이 매체 안에서 일어난다.
차가운 매체 원칙, 즉 텍스트 제로 인터페이스
화면에는 매개변수 라벨이 없다. 차원 숫자도, ‘여기를 흔드세요’ 같은 안내도 없다. 모든 입력은 affordance와 광고 카피로만 학습된다. 작가는 이를 마샬 매클루언의 ‘차가운 매체(cold medium)’ 개념에 빗댄다. UX 디자인에서 textual onboarding을 최소화하려는 흐름이 도달할 수 있는 가장 끝의 형태에 가깝다.
ref 기반 제스처 스택, React state를 우회하는 직접 DOM 패턴
react-spring v10의 useIsomorphicLayoutEffect 버그(매 렌더마다 변환이 리셋되는 현상)를 회피하기 위해, 작품의 카메라 조작·코멘트 시트·플레인 제스처는 React state를 우회하고 직접 DOM에 ref로 transform을 쓴다. requestAnimationFrame으로 throttle하고, getBoundingClientRect 결과를 ref에 캐싱한다. 결과적으로 한 화면 안에 14가지 변형이 동시에 60fps로 작동한다. 라이브러리의 한계가 알려진 상황에서 어떻게 우회할지에 대한 실전적 디자인 패턴이다.
다중 사용자 입력을 합치는 두 가지 전략
입력의 결합 방식이 모달리티마다 다르다. 음성 RMS와 흔들기는 ‘벡터 합’으로 합쳐져 협력적 변형을 만든다. 동일한 평면을 여러 사용자가 동시에 같은 방향으로 누를 때 변형이 강해진다. 반대로 카메라 헤드 추적, 자이로 틸트, 손가락 스케이팅은 ‘마지막 활성 사용자가 이긴다(latest-wins)’로 결합된다. 사용자가 많아질수록 점유 경쟁이 자연스럽게 발생한다. 이 두 전략의 분기 자체가 작품의 비평적 표면이 된다.
마르코프 광고 네비게이션, 메뉴 없는 길 찾기
전체 27개의 ‘링크’ 사이의 이동은 메뉴가 아니라 가중치를 가진 마르코프 체인 광고로 이루어진다. 세 그룹(M↔D↔E) 사이의 가족별 가중치, 미방문 가족 강제 우선 필터, 최근 가족 회피, 충돌 방지 등이 작동한다. 5초가 지나도 사용자가 아무것도 누르지 않으면 햄버거 메뉴가 폴백으로 등장한다. ‘메뉴를 만들지 않으면서도 길을 잃지 않게 한다’는 IA 문제에 대한 한 가지 해법이다.
디자이너·기획자에게 시사하는 것
친숙한 매체의 표면(스크롤·광고·인스타그램 reels)은 그대로 두고 의미를 어긋나게 하는 전략은, 사용자 학습 비용을 거의 0으로 두면서도 매체 자체에 대한 비평을 가능하게 한다. 브랜드 경험에서 자주 사용되는 ‘튜토리얼 우선’ 패턴의 대안이 된다.
BYOD(Bring Your Own Device) 모델은 별도 키오스크나 전용 단말 없이 N명의 사용자가 동시에 합주하는 인터랙션을 가능하게 한다. 팝업 스토어, 플래그십, 컨퍼런스 부스 같은 환경에 직접 적용 가능한 모델이다.
단일 진실 원천(미디어월의 zustand store)에서 모든 클라이언트가 약 180ms 주기로 broadcast 받는 구조는, 멀티 디바이스 환경에서 ‘일관성’을 가장 단순하게 보장하는 방식이다. 분산 합의가 필요한 다른 시스템(공동 협업 도구, 가상 이벤트)에도 그대로 응용 가능한 아키텍처다.
When a Scroll Becomes an Input, A UI/UX Analysis of Banpo-Xism for Designers and Technical Artists
Banpo-Xism opens with the familiar vertical scroll of an Instagram reel and, through the single act of tapping an advertisement, leads visitors to discover the full sensor stack of their own phone (camera, voice, accelerometer, gyroscope, multi-touch). This article maps fourteen interaction patterns at work in the piece and what they imply for UX designers, technical artists, and brand experience teams. A preview of the work runs at banpo-xism.vercel.app; on site, it operates as an ensemble with the media wall, three PCs, and other visitors' phones at YDP Artsquare in Seoul.
Borrow a familiar surface, displace its meaning
Entry begins as an almost exact recreation of an Instagram reel. A 19 by 19 grid of 361 apartments scrolls vertically and the visitor enters the work using only the gestures they already know. Onboarding cost approaches zero. On top of that familiar interface a social critique unfolds, in which the value of a home is reduced to the two-dimensional plane of location and brand. The interface stays familiar; only the meaning is displaced.
The single act of tapping an ad is the real entry point. After that one tap the camera, microphone, accelerometer, gyroscope, and multi-touch are each unlocked. There is no tutorial page; visitors discover the capabilities of their own device inside the work. Learning about the medium happens within the medium.
A cold-medium principle, the zero-text interface
There are no parameter labels on screen, no dimension numbers, no instructions such as “shake here.” Every input is taught only by affordance and by the work's own advertising copy. The artist refers to McLuhan's notion of a cold medium. It is close to the furthest extent of textual-onboarding minimisation that contemporary UX practice has aimed at.
Ref-based gesture stack, bypassing React state
To work around a known react-spring v10 issue (transforms reset on every render through useIsomorphicLayoutEffect), the work's camera control, comment sheet, and plane gestures bypass React state and write transforms directly to DOM via refs. Pose updates are throttled with requestAnimationFrame; bounding rect lookups are cached on a ref. The result is fourteen simultaneous deformations running at 60fps on a single screen. A practical pattern for any UI that has to combine many gesture-driven transforms in parallel.
Two strategies for combining multi-user input
How inputs combine differs by modality. Voice RMS and shake combine as a vector sum, producing collaborative deformation. When several visitors push the same plane in the same direction at the same moment, the deformation grows. Camera-based head tracking, gyroscope tilt, and finger skating combine as latest-wins. As more visitors join, occupation contention emerges naturally. The choice between these two strategies is itself a critical surface of the work.
A Markov-chain ad navigation, finding paths without menus
Movement between the twenty-seven links is governed not by a menu but by weighted Markov-chain advertisements. Three groups (M↔D↔E) share family-level weights; an unvisited-family hard filter, a recent-family avoidance, and collision suppression all sit on top. After five seconds without an action a hamburger menu appears as a fallback. It is a single concrete answer to the IA problem of avoiding a menu while preventing visitors from getting lost.
What this implies for designers and brand teams
Borrowing a familiar surface (scroll, ads, Instagram reels) and displacing only the meaning makes it possible to keep onboarding cost near zero while still mounting a critique of the medium itself. It is an alternative to the tutorial-first pattern that dominates branded experiences.
A bring-your-own-device model lets N visitors play in ensemble at once without dedicated kiosks or hardware. The pattern transfers directly to pop-up stores, flagship retail, and conference booths.
A single source of truth (a zustand store on the media wall) broadcast to every client at roughly 180ms intervals is the simplest way to enforce consistency across many devices. The architecture transfers to other systems where distributed agreement is required, including collaborative tools and virtual events.
When a Scroll Becomes an Input, A UI/UX Analysis of Banpo-Xism for Designers and Technical Artists
Banpo-Xism opens with the familiar vertical scroll of an Instagram reel and, through the single act of tapping an advertisement, leads visitors to discover the full sensor stack of their own phone (camera, voice, accelerometer, gyroscope, multi-touch). This article maps fourteen interaction patterns at work in the piece and what they imply for UX designers, technical artists, and brand experience teams. A preview of the work runs at banpo-xism.vercel.app; on site, it operates as an ensemble with the media wall, three PCs, and other visitors' phones at YDP Artsquare in Seoul.
Borrow a familiar surface, displace its meaning
Entry begins as an almost exact recreation of an Instagram reel. A 19 by 19 grid of 361 apartments scrolls vertically and the visitor enters the work using only the gestures they already know. Onboarding cost approaches zero. On top of that familiar interface a social critique unfolds, in which the value of a home is reduced to the two-dimensional plane of location and brand. The interface stays familiar; only the meaning is displaced.
The single act of tapping an ad is the real entry point. After that one tap the camera, microphone, accelerometer, gyroscope, and multi-touch are each unlocked. There is no tutorial page; visitors discover the capabilities of their own device inside the work. Learning about the medium happens within the medium.
A cold-medium principle, the zero-text interface
There are no parameter labels on screen, no dimension numbers, no instructions such as “shake here.” Every input is taught only by affordance and by the work's own advertising copy. The artist refers to McLuhan's notion of a cold medium. It is close to the furthest extent of textual-onboarding minimisation that contemporary UX practice has aimed at.
Ref-based gesture stack, bypassing React state
To work around a known react-spring v10 issue (transforms reset on every render through useIsomorphicLayoutEffect), the work's camera control, comment sheet, and plane gestures bypass React state and write transforms directly to DOM via refs. Pose updates are throttled with requestAnimationFrame; bounding rect lookups are cached on a ref. The result is fourteen simultaneous deformations running at 60fps on a single screen. A practical pattern for any UI that has to combine many gesture-driven transforms in parallel.
Two strategies for combining multi-user input
How inputs combine differs by modality. Voice RMS and shake combine as a vector sum, producing collaborative deformation. When several visitors push the same plane in the same direction at the same moment, the deformation grows. Camera-based head tracking, gyroscope tilt, and finger skating combine as latest-wins. As more visitors join, occupation contention emerges naturally. The choice between these two strategies is itself a critical surface of the work.
A Markov-chain ad navigation, finding paths without menus
Movement between the twenty-seven links is governed not by a menu but by weighted Markov-chain advertisements. Three groups (M↔D↔E) share family-level weights; an unvisited-family hard filter, a recent-family avoidance, and collision suppression all sit on top. After five seconds without an action a hamburger menu appears as a fallback. It is a single concrete answer to the IA problem of avoiding a menu while preventing visitors from getting lost.
What this implies for designers and brand teams
Borrowing a familiar surface (scroll, ads, Instagram reels) and displacing only the meaning makes it possible to keep onboarding cost near zero while still mounting a critique of the medium itself. It is an alternative to the tutorial-first pattern that dominates branded experiences.
A bring-your-own-device model lets N visitors play in ensemble at once without dedicated kiosks or hardware. The pattern transfers directly to pop-up stores, flagship retail, and conference booths.
A single source of truth (a zustand store on the media wall) broadcast to every client at roughly 180ms intervals is the simplest way to enforce consistency across many devices. The architecture transfers to other systems where distributed agreement is required, including collaborative tools and virtual events.
Transit :: 3-min walk from Yeongdeungpo Station (Line 1 / KTX)
Bring :: Phone + earbuds. Preview banpo-xism.vercel.app before visiting
Suggested duration :: ~60–90 min
About the exhibition
Living Geometry 2026 is a media-art special exhibition curated and developed by the KAIST Experience Design Lab (XD Lab) within KAIST's Department of Industrial Design. It re-threads Yeongdeungpo's visible urban landscape, its invisible data, and the emotional strata behind them in a geometric language — recasting the city, beyond a stilled aggregate of concrete, as an organism in continual pulse. Seven works span single-channel video, interactive installation, and multi-device web art.
Title :: Living Geometry 2026 · 생동 기하학 (Living Geometry)
Dates :: May 1 – Jun 28, 2026
Hours :: Daily 10:00–18:00 (last entry 17:45)
Venue :: YDP Artsquare · Times Square B2F, 15 Yeongjung-ro, Yeongdeungpo-gu, Seoul