오래된 게임 하나가 웹의 작동 방식을 엉뚱한 각도에서 비춘다. 'Weball'은 반다이남코의 고전 '카타마리 다마시'의 조작 감각을 웹 브라우저로 옮긴 실험적인 장난감이다. 원래의 카타마리가 끈끈한 공을 굴려 압정과 연필부터 빌딩과 섬까지 닥치는 대로 말아 올려 덩치를 키우는 게임이었다면, Weball은 그 무대를 실제 웹페이지로 바꿔 놓았다. 화면에 뜬 사이트의 요소들을 공으로 굴려 모으고, 공이 커질수록 더 큰 덩어리를 삼키며 '인터넷을 정복한다'는 콘셉트다. 제작자는 최근 두 개의 레벨을 추가로 열었고, 원하는 아무 웹사이트에서나 플레이할 수 있도록 했다고 밝혔다.
이런 종류의 패러디성 웹 토이는 과거에도 여럿 있었다. 페이지의 DOM 요소를 물리 엔진에 묶어 무너뜨리거나 날려버리는 북마클릿, 자바스크립트 몇 줄로 만든 장난감들이 대표적이다. Weball이 이들과 같은 계보에 있으면서도 흥미로운 지점은, 임의의 사이트를 게임판으로 삼겠다는 야심을 내걸었다는 데 있다. 특정 페이지를 위해 공들여 만든 데모가 아니라, 사용자가 고른 아무 주소나 받아들여 그 구조물을 게임 오브젝트로 분해해야 하기 때문이다.
'자바스크립트 없이 로드된다'는 한 줄의 무게
정작 실무자가 눈여겨볼 대목은 게임성 자체가 아니라 제작자가 덧붙인 짧은 기술 메모다. Weball에서 페이지는 그 사이트의 자바스크립트 없이 로드된다. 즉 브라우저가 원래 받아오는 HTML과 스타일만으로 화면을 구성하고, 사이트가 실행하도록 설계한 스크립트는 돌아가지 않는다. 결과적으로 모든 것을 클라이언트 측에서 그려내는 사이트는 텅 빈 모습으로 나온다고 제작자는 설명한다. 굴릴 요소가 거의 남지 않으니 게임으로서도 심심해지는 셈이다.
이 한 줄은 오늘날 웹 아키텍처의 분기점을 그대로 드러낸다. 서버가 완성된 HTML을 내려주는 전통적 방식이나 서버사이드 렌더링(SSR) 기반 사이트는 스크립트가 꺼져 있어도 본문, 이미지, 링크 같은 실체가 그대로 존재한다. 반면 리액트, 뷰 같은 프레임워크로 뼈대만 내려주고 나머지를 브라우저에서 조립하는 클라이언트 사이드 렌더링(CSR) 사이트는, 자바스크립트가 멈추는 순간 거의 빈 깡통이 된다. Weball이 어떤 사이트에서는 풍성하게, 어떤 사이트에서는 황량하게 보이는 차이는 곧 그 사이트가 콘텐츠를 어디서 완성하느냐의 차이다.
게임이 드러내는 SEO와 접근성의 민낯
같은 현상은 검색엔진 크롤러, 스크린 리더, 링크 미리보기 봇이 사이트를 바라보는 방식과 본질적으로 겹친다. 자바스크립트를 실행하지 않거나 제한적으로만 실행하는 에이전트에게 CSR 위주 사이트는 Weball이 본 것과 똑같이 빈 화면이다. 구글이 렌더링 능력을 꾸준히 개선해 왔다고는 해도, 초기 HTML에 핵심 콘텐츠가 담겨 있는 편이 색인과 공유, 접근성 모두에서 유리하다는 원칙은 변하지 않았다. Weball은 의도치 않게 '스크립트 없이 당신의 사이트는 무엇으로 남는가'를 눈으로 확인시켜 주는 리트머스 시험지 역할을 한다.
물론 이 게임을 진단 도구로 과대평가할 필요는 없다. Weball이 스크립트를 걷어내는 구체적 방식, 요소를 게임 오브젝트로 바꾸는 처리 과정, 지원 범위에 대해 공개된 정보는 많지 않다. 어떤 사이트가 비어 보인다고 해서 그 사이트에 문제가 있다고 단정할 수도 없다. 사내 대시보드나 로그인 뒤편의 애플리케이션처럼 애초에 검색 노출이나 비(非)스크립트 환경을 염두에 둘 필요가 없는 서비스라면 CSR이 합리적인 선택이기 때문이다.
그럼에도 공개 콘텐츠를 다루는 웹을 만드는 사람이라면, 이 장난감이 던지는 질문은 유효하다. 자신의 사이트 주소를 Weball에 넣어 보고 무엇이 굴러다니고 무엇이 사라지는지 지켜보는 것만으로도, 렌더링 전략이 검색·공유·접근성에 남기는 흔적을 직관적으로 체감할 수 있다. 가볍게 시작된 웹 장난감이 결국 '내 페이지의 실체는 어디에 있는가'라는 꽤 묵직한 물음으로 이어진다는 점이, Weball이 단순한 시간 때우기 이상의 이야깃거리를 품은 이유다.