
UI/UX
A2Z Presenter 개발
외부 방문객 대상 발표 시 자율주행차량 관제 사이트, 홍보영상, PPT를 매번 수동으로 전환해야 하는 불편함을 개선하기 위해 제작한 내부 발표 프로그램입니다. React + Vite 기반으로 화면을 구성하고 Electron으로 패키징하여 macOS와 Windows에서 모두 실행 가능한 프로스플랫폼 앱으로 개발했습니다. Codex와 Antigravity를 활용해 바이브 코딩 방식으로 구현했으며, 발표자가 하나의 프로그램 안에서 여러 콘텐츠를 보여줄 수 있도록 사용 흐름을 설계했습니다.

이전 직장이었던 오토노머스에이투지에서 제가 맡은 업무 중 하나가 대외 발표 시 발표PC 조작이었습니다.
관제실에서 임원들의 발표 화면을 직접 조작하며 몇 가지 문제점을 발견했습니다. 발표 자료를 보여주다가 Alt+Tab으로 유튜브 영상을 열고, 다시 관제 사이트와 PowerPoint로 이동하는 과정을 매번 수동으로 반복해야 했습니다.
이 과정에서 발표와 관계없는 화면이 방문객에게 노출되는 경우도 있었습니다. 발표자가 전달할 내용보다 다음에 열어야 할 프로그램과 화면 전환 순서를 더 신경 써야 하는 환경이었습니다.
발표자는 설명에 집중하고, 화면 전환은 하나의 프로그램 안에서 끝낼 수 없을까?
PDF 뷰어에서 시작된 작은 실험
처음부터 완성된 프로그램을 계획했던 것은 아닙니다. 매번 PowerPoint를 실행하는 불편을 줄이기 위해 발표 자료를 PDF로 변환하고, 브라우저 안에서 PDF와 관제 사이트를 전환할 수 있는 간단한 HTML 뷰어를 먼저 제작했습니다.
실제 발표에 사용하면서 요구사항은 점차 확장됐습니다. 홍보 영상을 재생해야 했고, 방문객 환영 문구나 기념 촬영용 이미지를 띄워야 했으며, 여러 관제 시스템을 동시에 설명해야 하는 상황도 생겼습니다. 필요한 기능을 하나씩 추가하면서 웹페이지보다 독립적인 데스크톱 앱이 적합하다고 판단했습니다.

다섯 가지 콘텐츠를 하나의 발표 흐름으로
발표 중 사용하는 콘텐츠를 WEB, PDF, IMG, VIDEO, PPT의 다섯 가지 뷰어로 정리했습니다. 발표자는 프로그램을 벗어나지 않고 필요한 콘텐츠로 이동할 수 있으며, 자주 사용하는 관제 시스템과 영상은 바로가기 버튼으로 실행할 수 있습니다.
WEB: 차량·라이다 등 주요 관제 시스템 접속 및 다중 화면 표시
PDF: 발표 자료 불러오기와 페이지 전환
IMG: 웰컴보드와 기념 촬영용 이미지 표시
VIDEO: 자주 사용하는 홍보 영상 바로가기
PPT: PowerPoint와 발표자 도구 자동 실행
각 뷰어는 Ctrl과 숫자키 조합으로 전환할 수 있도록 했습니다. 발표 중 마우스 이동을 최소화해 화면을 빠르게 바꿀 수 있으며, 실제 사용자들로부터 가장 편리한 기능 중 하나라는 피드백을 받았습니다.
조작은 쉽게, 거슬리지는 않게
A2Z Presenter의 인터페이스는 그 자체가 돋보이기보다 발표 콘텐츠를 방해하지 않아야 했습니다. 이에 장식적인 요소를 최소화하고, 뷰어 전환에 필요한 탭과 주요 기능만 남긴 미니멀한 화면을 구성했습니다.
왼쪽의 뷰어 탭은 필요할 때 접을 수 있도록 하고, 분할 설정과 파일 초기화 같은 보조 기능은 화면 가장자리에 마우스를 가져갔을 때만 나타나도록 설계했습니다. 발표 중에는 콘텐츠가 화면 전체를 사용하고, 조작이 필요한 순간에만 컨트롤이 노출됩니다.

초광폭 관제 화면에 맞춘 설계
발표가 진행되는 관제실은 일반적인 16:9 모니터가 아닌 하나의 초광폭 화면을 사용합니다. 여러 관제 시스템을 함께 설명할 수 있도록 웹뷰어는 최대 3분할, 비디오 뷰어는 2분할 화면을 지원하도록 구성했습니다.
각 영역의 크기는 발표 내용에 맞게 직접 조절할 수 있으며, 한번 설정한 분할 비율과 레이아웃은 프로그램을 종료한 후에도 유지됩니다. 비슷한 구성의 발표가 반복된다는 사용 환경을 반영해 매번 같은 화면을 다시 준비하는 과정을 줄였습니다.
일반적인 16:9 PDF를 초광폭 화면에 표시할 때 생기는 양옆의 빈 공간에는 A2Z 로고가 자동으로 나타나도록 했습니다. 단순한 검은 여백 대신 브랜드 요소를 활용해 방문객에게 보이는 발표 화면의 완성도를 높였습니다.



구현의 한계를 확인하고 현실에 맞게 개선하다
초기에는 PowerPoint 파일까지 프로그램 내부에서 보여줄 수 있는 자체 PPT 뷰어를 구현하려 했습니다. LibreOffice를 활용해 파일을 변환하고 재생하는 방법을 검토했지만, Microsoft Office에서 제작한 자료를 불러오면 레이아웃이 달라지거나 애니메이션이 정상적으로 재생되지 않는 호환성 문제가 발생했습니다.
발표 자료의 시각적 완성도와 애니메이션을 그대로 유지하려면 자체 뷰어 구현을 고집하는 것이 적절하지 않다고 판단했습니다. 이에 목표를 ‘프로그램 내부에서 PPT를 재생하는 것’에서 ‘PowerPoint 발표를 가장 빠르게 시작하는 것’으로 다시 정의했습니다.
PPT 뷰어 탭에서 .pptx 파일을 선택하면 Microsoft PowerPoint를 실행하고 발표자 도구까지 자동으로 연결하도록 구현했습니다. 또한 발표 도중 PowerPoint가 종료되는 상황에 대비해 최근 선택한 파일을 기억하고 다시 실행할 수 있도록 했습니다.

AI를 활용해 아이디어를 실제 제품으로
개발 경험이 많지 않았지만, 어릴 때부터 컴퓨터에 관심이 있던 덕에 쌓인 기초 프로그래밍에 대한 지식과 AI를 사용하여 아이디어를 실제 제품으로 구체화시켰습니다.
구현하고자 하는 기능과 사용 흐름을 자연어로 구체화하며 Codex를 활용해 React와 Vite 기반의 화면을 개발했습니다. 이후에 Electron으로 패키징해 macOS와 Windows에서 모두 실행할 수 있는 데스크톱 앱으로 확장했습니다.
초기 UI 역시 ‘발표 콘텐츠를 방해하지 않는 미니멀한 인터페이스’라는 방향을 기준으로 AI를 활용해 빠르게 구성했습니다. 이후 실제 사용 화면을 검토하며 마음에 들지 않는 부분과 세부 동작을 직접 수정했습니다. Antigravity를 IDE로 활용해 코드를 확인하고, 필요한 부분은 직접 조정하며 기능을 완성했습니다.
AI가 만들어준 결과물을 그대로 사용하는 데 그치지 않고, 요구사항을 정의하고 결과를 검토하며 오류를 수정하는 과정을 반복했습니다. 이를 통해 아이디어 단계에 머물던 업무 개선안을 실제로 사용할 수 있는 제품으로 발전시켰습니다.

실제 사용 환경에서 검증하다
개발은 macOS에서 진행했지만 실제 관제실은 Windows 환경이었기 때문에 두 운영체제에서 모두 실행할 수 있어야 했습니다. macOS용 설치 파일과 Windows용 실행 파일을 각각 제작하고, Windows PC를 별도로 대여해 기능과 패키징 결과를 반복적으로 테스트했습니다.
초기에는 Windows 환경에서 일부 오류가 발견됐지만 실제 PC에서 원인을 확인하고 수정한 뒤 다시 빌드했습니다. 이후 부서 구성원들에게 프로그램을 비공개로 배포해 실제 발표 흐름에 따라 사용하도록 하고, 기능 추가 요청과 사용 의견을 반영했습니다.
개인 프로젝트에서 공식 발표 도구로
처음에는 반복되는 불편을 줄이기 위해 개인적으로 시작한 프로젝트였습니다. 하지만 기능을 확장하고 실제 발표에서 사용할 수 있을 정도로 완성한 뒤 사내에 공식적으로 보고했고, 관제실 발표 프로그램으로 채택됐습니다.
프로그램 사용 방법과 설치 과정, 각 뷰어의 기능, 단축키를 정리한 23페이지 분량의 매뉴얼도 함께 제작했습니다. 덕분에 기존처럼 특정 부서가 모든 발표 화면을 전담하지 않아도, 앱과 매뉴얼만 있으면 다른 부서의 구성원도 관제실 발표를 지원할 수 있게 됐습니다.
프로젝트를 마무리하며
A2Z Presenter는 실무에서 직접 경험한 작은 불편을 문제로 정의하고, 실제 조직에서 사용할 수 있는 제품으로 전환한 프로젝트입니다. 사용 상황에 따라 기능을 확장하고, 구현이 어려운 부분은 목적을 다시 정의해 현실적인 해결책을 선택했습니다.
무엇보다 코딩 경험이 많지 않더라도 문제와 아이디어를 구체적으로 설명하고, AI가 만든 결과를 검토·수정하며 반복한다면 실무에 활용할 수 있는 프로그램까지 완성할 수 있다는 가능성을 확인했습니다. 기획과 디자인에 머물지 않고 AI를 활용해 개발, 테스트, 배포와 운영 문서 제작까지 완수했다는 점에서 가장 의미 있는 경험으로 남았습니다.