슬기로운 아이티센 생활 | 셔틀 서비스

ITCEN의 사내 신입 교육 과정에서 임직원의 출퇴근 불편을 풀어 보려고 만든 셔틀버스 관리 서비스입니다.

어떤 문제가 있었나

기존 셔틀 운영에서는 실시간 위치를 확인하기 어려워 대기 시간이 길어졌고, 외부인의 무단 탑승도 통제하기 어려웠습니다. 그래서 실시간 위치 조회, QR 기반 인증, 공지 및 문의 기능을 중심으로 서비스를 설계했습니다.

맡은 일

저는 팀 내 유일한 프론트엔드 개발자로 참여해 UI/UX 설계와 전체 화면 구현을 담당했습니다. 특히 지도 기반의 실시간 셔틀 위치 표시, 노선 선택 인터페이스, 혼잡도 시각화 등 사용자가 정보를 직관적으로 이해하도록 인터페이스를 구성했습니다.

실시간 위치는 WebSocket으로 받은 데이터를 클라이언트에서 지도에 반영하는 방식으로 구현했습니다. 계속 갱신되는 데이터가 자연스럽게 보이도록 상태 관리와 렌더링 흐름을 다듬었습니다.

AI 챗봇으로 시간표를 물어보게

사용자 편의를 위해 Perplexity API로 AI 챗봇을 붙였습니다. 셔틀 시간표 데이터와 연동해 가장 빨리 탈 수 있는 셔틀, 정류장 위치, 소요 시간을 자연어로 물어보게 했고 회사와 계열사 정보 검색도 함께 넣었습니다.

혼자서 프론트를 감당한 방법

백엔드 개발자들과 협업하는 구조에서 프론트엔드를 혼자 맡아야 했기 때문에 Cursor AI를 적극적으로 썼습니다. 반복적인 코드 작성과 구조 설계에 드는 시간을 줄여, 인력이 한쪽으로 기운 상황에서도 일정을 밀리지 않고 끝냈습니다.

서비스가 친근해 보이도록 Runway AI로 본사 마스코트 캐릭터 애니메이션을 만들어 넣었습니다. 기능만 있는 서비스에 감성적인 요소를 더하고 싶었습니다.

PWA를 제안해 적용하기까지

실제 사용 환경이 모바일 중심이라 PWA 도입을 제안하고 적용했습니다. 별도 설치 없이 홈 화면에 추가해 앱처럼 쓰도록 구현하고, 인앱 설치를 유도하는 UI도 설계했습니다.

남은 것

이 프로젝트는 신입 교육 과정에서 진행된 11개 프로젝트 중 유일하게 본사 상용화 검토 단계까지 갔습니다. 실사용을 고려한 설계와 완성도를 인정받은 경험이었습니다. 실시간 데이터를 다루는 UI 설계, 사용자 경험 중심의 개발, AI 도구로 생산성을 끌어올리는 방법을 여기서 익혔습니다.