Interaction Story for Makers
1995년 넷스케이프 회의실에서 버튼을 누른 동료가 외쳤습니다. “잠깐만, 경고창이 바로 뜨네?” 그렇게 JavaScript가 문서를 살아 움직이게 했습니다. 몇 년 뒤 Outlook Web Access를 만들던 팀은 “새로고침 없이 메일을 보여주자”라며 XMLHttpRequest를 감쌌죠.
2005년엔 제품 매니저들이 회의실에서 구글 지도를 돌려보며 “이게 진짜 웹이야?” 하고 놀랐고, Node.js를 본 개발자들은 “이제 서버도 같은 언어로 짤 수 있겠다”고 밤새 데모를 만들어 올렸습니다. React와 Service Worker는 “컴포넌트로 조립하고, 인터넷이 끊겨도 동작하게 하자”는 새로운 습관을 남겼습니다.
오늘날 WebAssembly와 WebGPU 팀은 “설치 없이 게임과 AI를 돌릴 수 있다”고 자신 있게 말합니다. 아래 연대를 눌러 당시 엔지니어가 어떤 문제를 붙잡고 있었는지, 그리고 어떤 말로 서로를 설득했는지 가볍게 들어보세요.
연대기 버튼을 누르면 같은 화면에서 자세한 이야기를 읽을 수 있습니다.
1990s
브라우저에 JavaScript가 들어오고 XMLHttpRequest가 더해지자, 개발자들은 폼 검증과 데이터 갱신을 즉시 처리하는 실험에 뛰어들었습니다.
2000s
Ajax 열풍이 일어나고 Node.js가 등장하면서 “브라우저와 서버를 같은 언어로 돌리자”는 목소리가 커졌습니다.
2010s
React가 상태 중심 UI를 보여주고 Service Worker가 오프라인 경험을 가능하게 하며, 웹앱이 네이티브 앱과 맞붙기 시작했습니다.
2020s
WebAssembly와 WebGPU가 안정화되자, 팀들은 “브라우저만 열면 게임과 AI가 돌아간다”고 실시간 협업 도구를 데모하기 시작했습니다.
JavaScript, SPA, WebAssembly를 다룬 대표 문서입니다. 기술 변화가 사용자 경험을 어떻게 바꿨는지 비교해 보세요.
1995
“브라우저가 입력을 바로 처리하네?” 넷스케이프에 스크립트 언어가 들어오면서 폼 검증과 인터랙션이 즉시 가능해졌습니다.
넷스케이프 사무실에서 브렌던 아이크는 10일 만에 Mocha 프로토타입을 완성했습니다. 내부 데모에서 버튼을 클릭하자 경고창이 뜨는 모습을 본 동료는 “브라우저가 사용자 입력을 바로 처리하네!”라고 놀랐습니다.
곧 출시된 Navigator 2.0에서 폼 유효성 검사가 동작하자, 웹 마스터들은 “서버까지 가지 않아도 즉시 메시지를 보여줄 수 있다.”며 가능성을 탐색했습니다.
JavaScript는 동적으로 DOM을 조작하고, 이벤트 루프로 사용자 입력을 처리하는 언어로 자리 잡았습니다. 이 사건 이후 브라우저는 단순한 문서 뷰어를 넘어 상호작용 플랫폼이 되기 시작했습니다.
1996
“버튼이 춤을 추네!” Flash 플레이어가 배포되자 웹사이트는 음악과 모션으로 사용자 시선을 붙잡았습니다.
1996년 Macromedia는 FutureSplash를 인수해 Flash 1.0을 공개했습니다. 에이전시 디자이너 윤아는 마우스를 올리면 반응하는 네비게이션을 만들어 보여 주며 “GIF로는 못 하던 일이 가능해졌어요.”라고 말했습니다.
브랜드 사이트와 뮤직비디오 프로모션이 Flash를 채택했고, 방송국은 “로딩 바가 끝나면 풀 화면 애니메이션이 펼쳐진다”고 홍보했습니다. 사용자들은 처음으로 브라우저에서 풀 모션 인터랙션을 경험했습니다.
Flash는 벡터 그래픽, 타임라인 애니메이션, ActionScript 스크립트를 제공하면서 웹 인터랙션을 시각적으로 표현할 수 있게 했습니다. 표준 기반이 아니었지만 “브라우저 안에서 앱처럼 움직인다”는 기대를 키워, 이후 캔버스, SVG, WebGL 같은 표준 기술 개발에 자극을 주었습니다.
1999
Outlook Web Access 팀이 “리로드 없이 메일을 갱신하자”라며 붙인 XMLHttpRequest가 비동기 웹의 문을 열었습니다.
IE 팀은 Outlook Web Access에 빠른 메일 목록을 제공하기 위해 ActiveX 기반 XMLHttpRequest를 도입했습니다. 기업 고객이 “새로고침 없이 메일이 도착하네!”라고 반응하자, 개발 문서가 급히 배포됐습니다.
모질라와 Safari도 비슷한 기능을 구현하며 API를 정비했고, 이 기능이 표준 논의로 이어졌습니다.
XMLHttpRequest는 비동기 네트워크 요청을 가능하게 해 SPA의 전조가 되었습니다. 이후 Fetch API로 확장되며 브라우저가 서버와 실시간 대화하는 기반이 되었습니다.
2005
“이제 웹도 앱이다.” Ajax라는 이름이 붙자 구글 지도와 지메일이 웹앱의 상징이 되었습니다.
A List Apart의 글이 공개되자, 제품 매니저들은 회의실에서 구글 지도를 돌려 보였습니다. 지도 화면이 부드럽게 이동하는 모습을 본 임원은 “웹에서도 데스크톱 앱 같은 경험이 가능하군.”이라고 감탄했습니다.
스타트업 팀은 즉시 Ajax 프레임워크를 찾아보고, 개발자 모임에서는 비동기 요청과 DOM 업데이트 패턴이 활발히 공유되었습니다.
Ajax는 비동기 요청, DOM 조작, JSON 데이터 교환을 한 묶음으로 소개했습니다. 이 용어 덕분에 경영진과 개발자가 같은 언어로 미래 웹앱을 논의할 수 있게 되었습니다.
2006
존 레식은 “한 줄이면 됩니다.”라고 말하며 $("#menu li") 데모를 선보였고, 전 세계 개발자가 같은 API를 쓰기 시작했습니다.
2006년 BarCamp에서 레식은 슬라이드 대신 브라우저 콘솔을 열어 `$("#todo li").addClass("done")`를 실행했습니다. 관객은 “브라우저마다 다르게 동작하던 작업이 한 번에 끝나네!”라며 환호했습니다.
곧이어 플러그인 생태계가 폭발하며 슬라이더, 모달, Ajax 래퍼가 공유되었습니다. 디자이너와 개발자는 같은 API로 이벤트와 애니메이션을 다뤘습니다.
jQuery는 CSS 선택자 기반 DOM 조작, 체이닝, Ajax 헬퍼를 제공해 브라우저 호환성을 숨겼습니다. 프론트엔드는 인터랙션 구현 속도를 크게 높였고, 백엔드는 REST/JSON 응답으로 데이터를 제공하며 협업 구조를 단순화했습니다.
2009
“서버도 자바스크립트로 돌릴 수 있네.” Node.js 발표가 이벤트 루프 기반 서버 열풍을 불러왔습니다.
JSConf에서 달은 실시간 채팅 데모를 보여주며 “동시 연결을 수만 개까지 처리할 수 있다.”고 설명했습니다. 발표 후 개발자들은 노트북을 펼쳐 `npm install`을 입력했고, 즉시 헬로월드 서버가 실행되는 것을 보고 환호했습니다.
몇 달 뒤 GitHub에 수많은 웹소켓 예제가 올라오며, 스타트업이 실시간 앱을 Node.js로 구축하기 시작했습니다.
Node.js는 V8 엔진과 이벤트 루프를 재사용해 서버에서도 JavaScript를 활용하도록 했습니다. 프런트와 백엔드 로직을 하나의 언어로 다루게 되면서, 인터랙션 개발 사이클이 빨라졌습니다.
2011
IETF가 WebSocket을 승인하자 제품팀은 “폴링 없이 채팅이 된다!”며 대화형 서비스를 본격화했습니다.
2011년, HTML5 표준화 회의장에서 이안 히콘은 브라우저-서버 간 양방향 소켓 데모를 보여주었습니다. 콘솔에 “Hello”를 치자 서버가 즉시 답했고, 참석자들은 “이제 롱 폴링을 버려도 되겠네요.”라고 말했다.
트레이딩, 게임, 고객 지원 챗봇이 WebSocket으로 실시간 알림을 구현했고, 기업용 메신저는 기존 폴링 코드에서 벗어나 서버 부하를 크게 줄였습니다.
WebSocket은 하나의 TCP 연결에서 양방향 메시지를 주고받아 지연을 줄였습니다. 프론트엔드는 이벤트 기반 상태 업데이트를 구현하고, 백엔드는 메시지 브로커와 연계해 실시간 시스템을 구축했습니다. 이는 이후 GraphQL Subscriptions, WebRTC 같은 스트리밍 기술의 토대를 닦았습니다.
2013
“UI를 함수처럼 생각해 보자.” React가 컴포넌트와 가상 DOM 개념을 대중화했습니다.
JSConf EU 발표에서 조던 워클르는 “UI를 함수처럼 생각해 보세요.”라고 소개했습니다. 데모에서 버튼을 눌러도 DOM을 직접 건드리지 않고 화면이 갱신되자, 관중석에서 “와!” 하는 탄성이 나왔습니다.
곧바로 GitHub에 React 저장소가 올라오고, 초기 사용자는 TodoMVC를 구현해 블로그에 공유했습니다.
React는 Virtual DOM과 단방향 데이터 흐름을 기반으로 컴포넌트 패턴을 정착시켰습니다. UI를 상태 기반으로 관리하면서 대형 인터랙션을 유지하기 쉬워졌고, 이후 수많은 프레임워크가 비슷한 철학을 채택했습니다.
2014
“브라우저를 꺼도 알림이 온다.” Service Worker 초안이 오프라인 웹앱의 핵심으로 떠올랐습니다.
크롬 개발자 서밋에서 팀은 푸시 알림을 시연했습니다. 브라우저를 닫아도 알림이 도착하자 관객들은 박수를 쳤습니다. PWA라는 개념이 곧 등장했고, 개발자들은 매니페스트와 캐시 전략을 학습하기 시작했습니다.
신문사 웹팀은 지하철에서 기사 읽기를 돕기 위해 오프라인 캐시를 도입했습니다. 독자는 “기사가 로딩되지 않아 답답했던 일이 줄었어요.”라고 피드백했습니다.
Service Worker는 백그라운드에서 네트워크 요청을 가로채고 캐시를 제어할 수 있게 했습니다. 네이티브 앱에서만 가능했던 오프라인과 푸시 경험이 웹으로 들어오며, 브라우저 상호작용의 범위가 크게 넓어졌습니다.
2020
“설치 없이 3D 모델링이 돼?” WebAssembly 1.0 권고가 나오자 고성능 앱이 웹으로 옮겨오기 시작했습니다.
오토데스크 엔지니어는 C++ 코드베이스를 WebAssembly로 컴파일하고, 브라우저에서 3D 모델링을 시연했습니다. 관객은 “로컬 앱과 차이가 없어요.”라며 놀랐습니다.
교육 스타트업은 피아노 튜터 앱을 WebAssembly로 옮겨, 저사양 기기에서도 음성 분석을 수행하게 했습니다.
WebAssembly는 빠른 로딩과 네이티브에 가까운 성능을 제공해, 브라우저가 고성능 애플리케이션 플랫폼으로 도약하는 기반이 되었습니다. 다양한 언어가 웹 런타임을 목표로 삼게 되었습니다.
2021
Chrome 94가 WebCodecs를 도입하자 “브라우저에서 직접 인코더를 돌리자”는 실시간 미디어 실험이 폭발했습니다.
2021년 Google I/O 세션에서 엔지니어 사라는 WebCodecs로 웹캠 피드를 8ms 안에 처리하는 데모를 보여주었습니다. 참가자들은 “이제 스트리밍 앱이 데스크톱 앱과 같은 속도를 내네!”라고 놀랐습니다.
협업 화이트보드, 클라우드 게임, 비디오 편집 SaaS가 WebCodecs를 도입해 저지연 영상 전송과 AR 필터를 구현했습니다. 기존 WebRTC 파이프라인에 새로운 가속 옵션이 더해졌습니다.
WebCodecs는 디코더·인코더에 직접 접근하게 해 GPU 가속과 하드웨어 코덱을 활용할 수 있게 했습니다. 프론트엔드는 영상·음성 처리 지연을 줄였고, 백엔드는 가벼운 바이트스트림을 제공하며 협업 도구와 미디어 서비스의 품질을 높였습니다.
2023
“드라이버 설치 없이 120fps가 나오네.” 안정화된 WebGPU가 웹에서 게임과 AI를 실행하는 길을 열었습니다.
게임 스튜디오 실험실에서 개발자들은 WebGPU 데모를 실행하고, 3D 장면이 초당 120프레임으로 돌아가는 것을 확인했습니다. “드라이버 설치 없이도 이 정도면 충분하네요.”라는 말이 나왔습니다.
AI 스타트업은 브라우저에서 직접 모델을 실행해, 사용자가 파일을 업로드하지 않아도 실시간 추론 결과를 볼 수 있게 했습니다.
WebGPU는 낮은 수준의 GPU API를 제공해 웹에서도 고성능 그래픽과 병렬 계산을 가능하게 했습니다. 이는 브라우저 상호작용을 새로운 층위로 끌어올리며, 실시간 협업과 시뮬레이션 서비스에 큰 변화를 주고 있습니다.
