Skip to content
Role
기획 · UX · 프론트엔드 (1인)
Team
1인
Period
2026.05 – 2026.06
Tools
Next.js, TypeScript, Supabase, Leaflet, Tailwind, Figma

멀미 지표를 실시간으로 보는 웹 관제

Glide Console

글라이드 콘솔 라이브 화면 – 자치구 점수, 지도 레이어 전환, 실시간 이벤트

요약

글라이드가 재는 멀미 지표를 지도 위에 올린 관제 화면이다. 서울 25개 자치구의 Glide Score, 진행 중인 주행, 방금 일어난 이벤트를 한 화면에 놓았다. 실험에서는 사람이 뒤에서 시나리오를 재현하는 도구로 썼다.

25개
자치구 실시간 점수

TOPIS 교통 · Tmap 도로 기반

6종
지도 레이어

히트맵 · 자치구 · 실시간 도로 · 돌발 · 신호등 · 횡단보도

27,763
지도에 올린 OSM 지점

신호등 6,793 · 횡단보도 20,970

라이브: glide-saas.vercel.app · 본편: Glide

무엇을 보여주는가

  • 자치구 점수 – 서울 전체 가중 평균을 0~100으로 보여준다. 높을수록 안전하다. 25개 구를 안전 · 주의 · 위험 · 매우 위험으로 나눠 분포를 함께 놓았다.
  • 위험 상위 5개 – 지금 가장 흔들리는 구를 순서대로 세운다. 어디를 피해 경로를 잡을지 결정하는 화면이다.
  • 활성 운행 – 라이브 · 시뮬 · 게임 · 대기 네 가지 상태로 나눈 현재 주행 수.
  • 실시간 이벤트 – 급제동, 급회전, 회복 조치, 경로 비교 요청이 시각과 함께 흐른다. 참가자 코드(P-001)로 묶여 나중에 세션 단위로 되짚을 수 있다.

지도

지도는 레이어 여섯 장을 겹친다. 멀미 밀도 히트맵, 자치구 폴리곤, 실시간 도로 속도, 돌발 상황, 신호등, 횡단보도.

  1. undefined전부 켜도 끊기지 않게 – SVG 대신 캔버스

  2. undefined지도는 어둡게, 패널은 밝게

데이터

Supabase 한 곳에 일곱 개 표를 둔다. 참가자, 세션, 이벤트, 멀미 지수 시계열, 햅틱 발동 기록, 차량 위치, 자치구 점수.

세션은 라이브 · 시뮬 · 게임 · 대기 중 하나의 모드를 갖는다. 같은 화면으로 실차 데이터와 시뮬레이션을 모두 재현하기 위해서다. 보드가 없어도 가짜 센서 값으로 같은 화면이 돈다.

다시 살린 기록

배포한 지 넉 달 만에 화면이 비었다. 세 가지가 겹쳐 있었다.

  • 데이터베이스가 사라졌다 – 무료 플랜에서 오래 쉬던 프로젝트가 삭제됐다. 주소가 응답하지 않는 것이 아니라 이름 자체가 사라져 있었다. 스키마를 레포에 남겨 둔 덕에 새 프로젝트에 그대로 다시 올렸다.
  • 지도 공급자가 정책을 바꿨다 – 키 없이 쓰던 타일에 "API KEY REQUIRED" 워터마크가 찍히기 시작했다. 키가 필요 없는 다른 타일로 갈아탔다.
  • 조건 하나가 뒤집혀 있었다 – 자치구 패널이 늘 0이던 이유는 데이터가 아니라 if (!cancelled || !data) return; 한 줄이었다. 정상 응답에서도 항상 빠져나가고 있었다.