게이트웨이

Gateway

목적지 없는 버스, 잠깐의 휴식

베타개발 아이작브릿지웹모바일 웹(홈 화면 설치)
게이트웨이 랜딩 첫 화면

게이트웨이는 터미널 대합실에서 무료 표를 받고 버스에 앉으면, 목적지 없이 창밖이 흐르는 웹 서비스입니다. 같은 버스에 탄 사람들은 같은 순간에 같은 풍경을 보고, 30분마다 휴게소에 내려 걷고 쉽니다. 설치도 채팅도 없이 링크 하나로, 바쁜 하루 사이 잠깐 쉬어 가고 싶은 사람을 위해 만들었습니다.

이런 분이 씁니다

휴대폰이나 컴퓨터 브라우저로 10분이든 한 시간이든 잠깐 쉬어 가고 싶은 일반 이용자

풀어낸 문제

짧은 틈에 쉬려 해도 손에 잡히는 건 할 일과 알림이 많은 앱입니다. 게이트웨이는 설치와 채팅 없이 링크 하나로, 다른 사람과 같은 버스에 조용히 앉아 있는 시간을 줍니다.

아이작브릿지 개발 범위

three.js로 그린 3D 터미널 대합실과 버스 안, 버스 한 대를 서버 방 하나로 나눈 실시간 동승(Cloudflare Workers와 Durable Objects), 출발 시각으로 계산해 모두가 같은 창밖을 보는 구조, 휴게소, 라디오, 지갑과 마일리지, 구글 로그인, 4개 언어 화면, 라디오 관리자 화면

만든 기술

three.jsTypeScriptViteCloudflare WorkersDurable ObjectsSupabase(PostgreSQL)HyperdrivePlaywrightVitest

어떻게 만들었나

01

표 한 장으로 시작하는 휴식

게이트웨이는 3D로 그린 터미널 대합실에서 시작합니다. 화면을 누르면 걷고, 의자를 누르면 앉고, 매표소에서 하루 한 장 무료 표를 받습니다. 전광판에서 1호차부터 10호차를 고르고 좌석표에서 빈자리를 골라 게이트로 걸어 나가면 탑승입니다.

대합실에는 단골 손님들이 하루 일과대로 움직이고, 매점과 기념품 가게, 창가 커피숍에서 시간을 보낼 수도 있습니다. 사람이 많아지면 대합실 2, 3이 저절로 열립니다.

전광판과 좌석표가 보이는 3D 터미널 대합실
02

모두가 같은 창밖을 봅니다

버스는 1호차부터 10호차까지 4분 간격으로 늘 달립니다. 버스 한 대를 서버의 방 하나로 나누고 출발 시각으로 위치를 계산해, 같은 버스에 탄 사람은 같은 순간에 같은 풍경을 봅니다. 100km 노선에는 도심과 들판, 대관령, 동해, 다도해 같은 장소 20곳이 이어집니다.

낮과 밤은 한국 시각을 따르고, 비 다섯 가지와 눈 세 가지가 창에 부딪혀 맺히고 녹습니다. 유리 천장을 열면 밤하늘의 별이 보입니다.

함박눈이 내리는 창밖 풍경과 버스 라디오 카드
03

30분마다 서는 테마 휴게소

버스는 30분을 달리고 10분 동안 휴게소에 섭니다. 판타지 휴게소 여섯 곳이 있고, 버스마다 다른 곳에 섭니다. 내려서 광장을 둘러보고, 직원과 손님이 저마다 움직이는 건물 사이를 걷고, 기념사진을 찍습니다.

휴게소마다 소리와 상품이 다르고, 스탬프를 모으면 마일리지가 쌓입니다. 내리면 탄 거리만큼 마일리지 정산 카드를 받습니다.

여섯 곳의 판타지 휴게소 광장 모음
04

함께 듣는 버스 라디오

같은 버스는 같은 곡을 같은 순간에 듣습니다. 게이트웨이 라디오가 기본으로 흐르고, 좋아하는 유튜브 노래를 신청하거나 나 혼자 듣기 목록에 담을 수 있습니다. 운영자는 관리자 화면에서 라디오 곡을 넣고 고치고 숨깁니다.

데이터는 Supabase에, 실시간 동승은 Cloudflare Workers와 Durable Objects 위에서 돌아가며, 동시 5,000명 시험에서 오류가 없었습니다. 생방송 DJ 라디오는 만들어 두었지만 지금은 보류 중입니다.

버스 창밖과 라디오 카드, 생방송 안내가 보이는 화면

이렇게 쓰입니다

  1. 01

    링크 열기

    설치 없이 휴대폰이나 컴퓨터 브라우저로 들어옵니다.

  2. 02

    무료 표 받기

    대합실 매표소에서 하루 한 장 무료 표를 받습니다.

  3. 03

    자리 고르기

    전광판에서 버스를, 좌석표에서 빈자리를 골라 탑승합니다.

  4. 04

    창밖과 라디오

    같은 버스 사람들과 같은 풍경을 보고 같은 곡을 듣습니다.

  5. 05

    휴게소 산책

    30분마다 휴게소에 내려 걷고 먹고 사진을 찍습니다.

  6. 06

    마일리지

    내리면 탄 거리만큼 마일리지가 쌓입니다.

주요 기능

  • 01

    함께 타는 버스

    같은 버스에 탄 사람들은 같은 순간에 같은 창밖을 보고, 옆자리에 누가 앉아 있는지 보입니다.

  • 02

    창밖과 날씨

    스무 곳의 풍경이 이어지고, 낮과 밤은 한국 시각을 따르며 비와 눈이 창에 맺혔다 녹습니다.

  • 03

    3D 터미널 대합실

    걷고 앉고 매점과 커피숍을 둘러보며, 사람이 많아지면 대합실이 저절로 늘어납니다.

  • 04

    테마 휴게소

    버스는 30분마다 휴게소에 서고, 내려서 걷고 먹고 사진을 찍을 수 있습니다.

  • 05

    버스 라디오

    같은 버스는 같은 곡을 함께 듣고, 좋아하는 유튜브 노래를 담아 혼자 들을 수도 있습니다.

  • 06

    말 대신 선물

    채팅 없이 인사, 선물, 친구 맺기, 편지로 다른 승객과 마음을 주고받습니다.

  • 07

    마일리지

    버스에서 내리면 탄 거리만큼 마일리지가 쌓이고, 등급과 휴게소 스탬프가 더해집니다.

  • 08

    라디오 관리자

    운영자는 관리자 화면에서 라디오 곡을 넣고 고치고 숨깁니다.

화면으로 보기

게이트웨이 랜딩 첫 화면
랜딩 · 목적지 없는 버스, 잠깐의 휴식
3D 터미널 대합실
터미널 대합실 · 전광판과 좌석표
판타지 휴게소 모음
테마 휴게소 여섯 곳
밤에 장대비가 내리는 창밖
날씨 · 밤의 장대비
함박눈이 내리는 창밖
날씨 · 함박눈
유리 천장 너머 밤하늘의 별
유리 천장 · 밤하늘의 별
겨울 창밖 영상 모음
창밖 영상 · 겨울 세트
버스 라디오와 생방송 안내
버스 라디오
대합실 매점과 기념품 가게
대합실 · 매점과 기념품 가게
휴대폰으로 본 휴게소
휴대폰 · 휴게소 광장
휴대폰으로 본 소나기 내리는 창밖
휴대폰 · 소나기
라디오 곡을 관리하는 관리자 화면
관리자 · 라디오 곡 관리
생방송 책상 관리자 화면
관리자 · 생방송 책상(보류 중)
다음 프로젝트MARBL Works→

비슷한 일을 소프트웨어로 풀고 싶다면, 지금의 상황부터 알려 주세요.

프로젝트 문의하기