링크 하나로 보는 셔틀 노선 안내 웹

셔틀 노선을 웹 링크로 알려 주는 서비스입니다. 학부모와 학생은 앱을 깔거나 가입하지 않고 받은 링크만 열면 노선을 봅니다.

가져갈 것

이 기록에서 다른 일에도 옮겨 쓸 수 있는 두 가지입니다.

코드를 AI에게 맡기기 전에 화면 기준부터 정합니다. 이 기록에서는 주요 화면의 기준을 Figma에서, 관리자웹의 기준을 화면 규칙 문서로 먼저 정했습니다.
화면 흐름은 문서로만 넘기지 않고 동작하는 화면으로 먼저 만들어 보며 확정합니다.

학원은 바뀐 노선을 매번 다시 알려야 하고 학부모는 버스 위치를 운전 중인 기사에게 묻습니다.

노선 정보를 모아 둔 곳이 없습니다. 노선을 바꾸면 학원은 안내문을 새로 만들어 일일이 다시 돌립니다.
버스가 지금 어디쯤인지는 운전하는 기사만 압니다. 그래서 학부모의 확인 전화가 운전 중인 기사에게 걸려 옵니다.
이미 나와 있는 차량 위치 서비스는 시작하려면 준비할 것이 많습니다. 차량에 달 단말기를 사서 설치하거나 학부모가 전용 앱을 깔고 가입해야 합니다.

받는 사람의 설치와 가입을 없애고 안내는 링크 하나로 보내기로 했습니다.

운영 담당은 관리자웹 한 곳에서 노선과 정류장, 차량 정보를 고칩니다. 고친 내용은 학부모·학생용 안내 웹에 곧바로 보이게 했습니다. 안내 링크는 문자로 보내도 되고 QR로 찍게 하거나 학원 홈페이지에 걸어 둬도 됩니다.

첫 출시에 넣을 기능은 비슷한 서비스를 비교해 골랐습니다. 대부분이 갖춘 기능은 기본으로 넣고 비교한 서비스에 빠져 있던 기능은 추가 항목으로 따로 묶었습니다.

차량에 위치 단말기를 다는 방식과 학부모 전용 앱을 까는 방식은 쓰지 않았습니다. 둘 다 쓰기 전에 구매·설치나 가입이 필요해 문제 03이 그대로 남습니다.

화면 흐름은 문서로만 넘기지 않고 동작하는 화면으로 먼저 만들어 보며 확정했습니다.

운영 담당이 관리자웹에 노선을 올리고 링크를 보내면, 학부모와 학생은 그 링크로 노선을 봅니다.

실제 화면 대신 흐름을 세 묶음으로 줄여 그린 그림입니다. A사는 회사 이름을 가린 표기입니다.

코드를 AI에게 맡기기 전에 기준부터 정했습니다. 주요 화면의 기준은 디자인 도구 Figma에서 확정했고 관리자웹에는 화면 규칙 문서를 따로 두었습니다.

관리자웹과 안내 웹의 화면·기본 기능 코드를 AI 코딩 도구로 작성했고, 서버 연동은 백엔드 담당이 맡았습니다.

공개 배포까지 했지만 잰 숫자는 아직 없습니다.

실시간 위치 연동과 실서비스 시작이 남아 있습니다.

실시간 위치는 기사용 앱의 위치 정보를 연동한 뒤 제공할 예정입니다. 실서비스를 시작하면 이 페이지의 상태와 확인 칸을 고쳐 적습니다.