이정준

ITCEN의 사내 신입 교육 과정에서 임직원의 출퇴근 불편을 해결하기 위한 셔틀버스 관리 서비스를 개발한 프로젝트입니다.

기존 셔틀 운영에서는 셔틀의 실시간 위치를 확인하기 어려워 불필요한 대기 시간이 발생하고, 외부인의 무단 탑승을 통제하기 어렵다는 문제가 있었습니다. 이를 해결하기 위해 실시간 위치 조회, QR 기반 인증, 공지 및 문의 기능을 중심으로 서비스를 설계했습니다.

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

실시간 위치 기능은 WebSocket을 통해 전달되는 데이터를 클라이언트에서 수신하여 지도에 반영하는 방식으로 구현했으며, 지속적으로 갱신되는 데이터를 자연스럽게 표현하기 위해 상태 관리와 렌더링 흐름을 최적화했습니다.

또한 사용자 편의성을 높이기 위해 Perplexity API를 활용한 AI 챗봇 기능을 추가했습니다. 셔틀 시간표 데이터와 연동하여 사용자가 가장 빠르게 탑승할 수 있는 셔틀 정보, 정류장 위치, 소요 시간 등을 자연어 기반으로 조회할 수 있도록 구현했으며, 회사 및 계열사 관련 정보 검색 기능도 함께 제공했습니다.

백엔드 개발자들과 협업하는 구조 속에서 프론트엔드 개발을 단독으로 담당해야 했기 때문에, Cursor AI를 적극적으로 활용하여 반복적인 코드 작성과 구조 설계에 드는 시간을 줄이고 개발 생산성을 높였습니다. 이를 통해 인력 불균형 상황에서도 일정 지연 없이 프로젝트를 안정적으로 완수할 수 있었습니다.

또한 서비스의 친숙함을 높이기 위해 Runway AI를 활용하여 본사 마스코트 캐릭터 애니메이션을 제작하고 어플리케이션에 적용했습니다. 기능 중심의 서비스에 감성적인 요소를 더해 사용자 경험을 확장하고자 했습니다.

실제 사용 환경이 모바일 중심이라는 점을 고려하여 PWA 도입을 제안하고 적용했습니다. 사용자가 별도의 앱 설치 없이 홈 화면에 추가하여 앱처럼 사용할 수 있도록 구현하고, 인앱 설치를 유도하는 UI를 설계하여 사용성을 개선했습니다.

이 프로젝트는 신입 교육 과정에서 진행된 11개 프로젝트 중 유일하게 본사 상용화 검토 단계까지 이어졌으며, 실사용을 고려한 서비스 설계와 완성도를 인정받은 경험이었습니다. 이를 통해 실시간 데이터 기반 UI 설계, 사용자 경험 중심 개발, AI 도구를 활용한 개발 생산성 향상에 대한 역량을 강화할 수 있었습니다.

인턴으로서 참여한 첫 프로젝트입니다. 프로젝트의 목표는 Figma의 특정 레이어를 지도상의 원하는 위치에 배치하고, 해당 위치의 위경도 좌표를 저장할 수 있는 Figma 플러그인을 개발하는 것이었습니다.

Figma 플러그인의 기본 뼈대는 Figma Plugin API의 공식 문서를 참고하여 구성하였으며, 코드 유지보수성 향상을 위해 React를, 타입 안전성 확보를 위해 TypeScript를 도입하였습니다.

다만 Figma 플러그인 환경에서 React와 TypeScript를 함께 사용하려면 Webpack 번들러의 복잡한 설정이 필요했습니다. 이를 해결하기 위해 Figma + Webpack + TypeScript + React 조합이 미리 구성된 보일러플레이트를 활용하여, 별도의 환경 설정 없이 개발에 집중할 수 있었습니다.
UI는 구글의 Material Design 가이드라인을 기반으로 한 MUI(Material UI) 라이브러리를 활용하여 React 컴포넌트와 일관된 스타일로 구성하였습니다.

지도 구현에는 초기에 Leaflet을 사용하였으나, Polygon 드래그·회전·리사이즈 등 커스텀 인터랙션 구현에 한계가 있었습니다. 사수와의 논의를 통해 더 다양한 커스텀 기능을 지원하는 OpenLayers로 교체하였고, 이를 통해 필요한 인터랙션을 모두 구현할 수 있었습니다.
또한 지도를 직접 드래그하며 원하는 지역을 찾는 방식이 비효율적이라는 판단 하에, OpenStreetMap 기반의 지오코딩 API인 Nominatim을 연동하여 주소 검색 기능을 추가하였습니다.

이 플러그인의 핵심 기능인 위경도 좌표 변환을 구현하는 과정에서, OpenLayers가 내부적으로 사용하는 EPSG:3857(Web Mercator) 좌표계와 위경도 표현에 쓰이는 EPSG:4326(WGS84) 좌표계의 차이를 처음에는 인지하지 못해 좌표 변환 오류를 경험하였습니다. 이를 계기로 두 좌표계의 개념과 변환 방식을 직접 공부하며 문제를 해결할 수 있었습니다.
지도 라이브러리와 좌표계라는 생소한 개념을 실무에서 직접 부딪히며 익힐 수 있었던 의미 있는 프로젝트였습니다.

Music Diary는 사용자의 감정과 선호도에 맞는 음악을 추천하는 웹 애플리케이션입니다. Next.js를 기반으로 하여, 사용자가 작성한 일기를 분석하고 그에 맞는 음악을 추천하는 기능 및 감정 히스토리를 정리해주는 기능을 제공합니다.

Next.js 기술을 채택한 이유는, 웹 개발자로서 사용할 수 있는 기술 스택을 확장하고, SSR을 통한 SEO 최적화 및 백엔드 서버를 따로 구축하지 않아도 된다는 장점, 그리고 이미지를 포함한 각종 최적화를, 뛰어난 개발자 경험(DX)과 함께 제공하기 때문입니다.
데이터 저장을 위해서는 ORM 중 하나인 Prisma를 사용하여 JS 코드 상에서 MySQL 데이터베이스에 쉽고 효율적으로 접근하였으며, NextAuth.js를 사용하여 소셜 로그인을 매우 간편하게 구현할 수 있었습니다.
또한 비동기 작업 처리를 위해 Next.js의 새로운 기능인 Server Actions를 사용해보았으며, 최신 데이터를 자동적으로 받아 오는 React Query를 통해 클라이언트의 다이나믹한 상태를 훨씬 쉽게 작업할 수 있다는 것을 알게 되었습니다.

사용자가 작성한 일기 내용으로부터 감정을 분석하기 위해서 Naver CLOVA API를 사용했지만 해당 API는 감정을 (긍정, 부정, 중립) 이렇게 세 단계로만 분석해주는 한계가 있었습니다. 그래서 일기 내용에서 가장 많이 등장하는 단어들에게 가중치 부여한 후 나열해서, 관련된 내용의 가사를 가지는 음악을 추천하는 방식을 시도해보았으나, 단순히 등장하는 단어의 개수로 음악을 추천받기에는 뜬금 없는 음악을 추천해주고 있었습니다. 비용이 들긴 하지만 어쩔 수 없이 일기 내용과 관련된 음악을 추천받기에는 OpenAI의 API를 사용하는 것이 가장 적합할 것 같다는 생각이 들어서 OpenAI API를 사용하여 음악 추천 및 약 일주일 간의 일기 내용을 장문으로 정리해주는 기능을 추가하였습니다. 첨언하자면, 일주일 간의 일기 내용은 생각보다 많은 문자를 포함하고 있어서, 한 번의 API 호출로 0.15달러 이상이 소비되는 것을 보고, 이 어플리케이션은 상업적인 한계점을 가지고 있다고 생각하였습니다.

또한 Tailwind CSS 유틸리티 클래스를 활용하여 반응형 디자인을 구현한 상태라서, React Native의 WebView를 사용하면 웹 기반의 앱을 스마트폰의 앱으로 배포할 수 있는 것을 알게 되어 실제로 앱 배포를 하려고 했으나, 구글의 플레이스토어에서 개발자 계정을 심사받는 과정이 생각보다 까다롭다는 사실을 알게되었습니다. 계정 심사를 모두 받은 이후에는 다시 한 번 앱 배포를 시도해보고자 합니다.