박스히어로 Electron 개발기 — 1
프론트엔드 생태계는 나날이 더 풍족해지고 있다.
웹 개발의 토대가 되는 HTML5와 CSS 그리고 JAVASCRIPT은 새로운 스펙이 더해지고 있고, 그 토대 위에서 여러가지 문제들을 해결하기 위한 새로운 도구들이 매일같이 등장하고 있다. (동시에 과거의 것들은 레거시라 명명되어 도태되어 간다.)
그런데 우리는 그 모든 기술들을 하나같이 맘 편히 프로덕션에 적용하지 못 한다. 이유는 말 할 것도 없이 더이상 성장하지 않는(피터팬) 브라우저 IE 때문이다.
2015년 마이크로소프트는 IE를 대체하기 위해 Edge라는 이름의 새 인터넷 브라우저를 출시하였다.
2020년 1월에는 크로뮴 기반으로 새롭게 업데이트가 되어, 구글 크롬과 같은 심장을 공유하게 되었다.
당시 많은 개발자들은 아마 ‘이제 곧 IE지옥을 벗어나겠구나’ 라고 생각하였을 것이다.
하지만 생각보다도 사람들은 익숙한 것에서 쉽게 벗어나지 못 하고 있고, 여전히 우리 서비스를 이용하는 고객님들 중 무시할 수 없는 수(약 11%, 21년 2월 기준)가 IE를 이용하고 있는것이 현실이다.
박스히어로는 IE11까지를 지원한다. 성능적인 부분에서 조금 더딘 부분이 있거나 실사용에 지장이 없는 사소한 스타일 버그가 있을 지언정 거의 99%의 기능이 IE11에서도 깨짐없이 잘 지원되고 있다.
우리는 누구든 쉽게 사용할 수 있는 편리한 재고관리 솔루션을 제공하는 것을 목표로 하고 있다. 당연히 개발자가 이용하는 서비스가 아니기 때문에 브라우저를 잘 못 선택했다고 화면을 깨트리거나 기능을 막아버릴 수는 없는 것이다.
생각보다 개발자가 아닌 보통 사람들은 인터넷 익스플로러나 크롬이나 똑같은 도구로 생각한다.
그들 입장에서는 크롬이든 사파리든 인터넷 익스플로러든 결국 웹 서핑을 하기 위한 프로그램이라는 점에서 똑같은데, 굳이 번거롭게 새로운 프로그램을 설치할 필요를 못 느낄 수 있다.
또, 크롬이 인터넷 익스플로러보다 빠르고 좋은 것은 대강 알더라도, 여전히 일부 정부 민원 서비스나 금융 서비스가 제대로 동작하지 않아 불가피하게 인터넷 익스플로러를 사용하는 경우도 꽤 있을 것이다.
그래서 이런 분들을 위해 데스크탑용 전용 접속기를 만들기로 하였다.
새로운 웹 브라우저를 설치하는 개념이 아닌 재고관리 프로그램을 컴퓨터에 설치하는 것이 되니까 거부감이 상대적으로 덜할 것이기도 하고, 클릭 한 번으로 쾌적한 환경에서 박스히어로를 이용할 수 있는 편의성도 생길 것이기 때문이다.
또한 박스히어로의 경우 제품의 바코드 혹은 qrcode 라벨을 원하는 포맷으로 생성해 출력할 수 있도록 돕는 라벨 인쇄 기능이 있는데, 서버에서 PDF로 생성해 내려주는 라벨들을 PDF 뷰어가 내장된 모던 브라우저가 아니면 미리보기하거나 출력하기가 어려워 이런 문제들도 동시에 해결하고자 하였다.
그렇다고 데스크탑앱 하나를 새로 뚝딱 만들어내기에는 소요되어야 하는 자원들이 엄청날 것이기 때문에, 현재 서비스중인 웹앱을 최대한 그대로 감싸서 보여주는 형태의 하이브리드 앱을 제공하기로 하였다.
웹에서 사용되는 기술을 이용해 데스크탑앱을 만들어내는 도구는 여러개가 있지만, 우리는 그 중에서 가장 널리 알려진 Electron을 사용하기로 하였다.
그냥 Electron 앱 안에 iframe을 넣듯이 우리 서비스를 끼워넣기만 하면 되니까 아주 간단한 작업이 될 것이라 예상하였다.
아주 간단한 컨셉이었지만, 막상 작업을 하다보니 최초 예상과는 달리 이것저것 크고 자잘한 문제들이 많았다. 주니어 개발자로서 일렉트론 개발을 처음 시도하는 부분이라 더욱 고충이 많았던 것 같다.
마침 회사 기술 블로그에 박스히어로 일렉트론 앱과 관련된 내용을 정리해보라는 이야기가 있었다.
일렉트론 전문가 분들께는 굉장히 부족한 내용이 될 수 도 있지만, 나와 비슷한 상황에서 시작하실 초보 개발자 분들에게 작게나마 도움이 되지 않을까 기대하며 글쓰기를 시작해보려고 한다.
이어지는 포스트는 아래에 링크를 첨부할 예정이다. 필요한 내용이 있다면 많은 참고가 되길 바라겠다.
