코인 시세 1초만에 보는 크롬 확장 프로그램 만들기

요즘 한국엔 주식, 코인 거래가 정말로 이슈이다. 그냥 이슈가 아니라, 주식 안하는 사람들을 바보 취급하는 그런 이상한 분위기가 형성됐다.

나는 작년 4월부터 주식을 처음으로 시작했다. 그 때부터 한국에 삼성전자를 필두로 주식 열풍이 불기 시작했기 때문이다.

개인적으로 1년 가까이 주식을 하면서 느낀 점은, 시드가 작으면 하나 마나라는 생각이 들었다. 등락폭 제한이 있는 한국 시장은 더더욱 그렇다.

그래도 적금보다 낫지라고 생각할 수도 있지만, 어디까지나 내가 산 주식이 상승하고 있을 때 얘기이다. 죄다 파란 불이면 그 심리적 압박감으로 인한 스트레스는 정말 크다.

그 때문인지 나는 자연스럽게 등락폭 제한이 없는 미국 시장과 가상 화폐쪽에 관심이 갔다. 시드가 적더라도 등락이 자유로워서 시장에 잘 적응한다면, 시드가 적어도 한국 시장보다는 좀 더 크게 시드를 불릴 수 있지 않을까 하는 생각 때문이었다. 물론 어디까지나 매매를 잘 한다면이다.

근데 왜 크롬 확장 프로그램일까?

아무튼 주식이나 코인을 사놓고 딱히 관심 없는 사람이 아니라면, 대부분 하루에 한 번 이상 내가 산 자산의 가격을 보게 되있다. 올랐는지 떨어졌는지 궁금하니까.

심지어 코인은 더 자주 보게 된다. 코인은 장이 24시간 열려있고, 초 단위로 가격 변동이 심하기 때문이다.

여기서 내가 크롬 확장 프로그램을 만들게 된 이유가 등장한다. 회사에서 핸드폰 켜서 시세 보는게 너무 번거롭다. 그렇다고 홈페이지 들어가서 차트 보는 것도 눈치 보이고. 근데 브라우저에서 단축키 눌러서 내가 보고 싶은 시세가 딱 뜨면 좋지 않을까? 라는 생각이 들었다.

아마 필요한 직장인들이 굉장히 많을 것이라고 감히 추측해본다.

그래서 크롬 확장 프로그램 마켓에 대해 좀 알아봤는데, 생각보다 조건이 너무 괜찮다.

일단 앱을 등록하려면 개발자 등록을 해야되는데, 등록비로 5불을 낸다. 최초 1번만 내면 된다. 정말 혜자스럽다. 한 번만 등록하면, 갱신없이 평생 무한으로 즐길 수 있다!

그리고 웹 개발자들에게 익숙한 HTML, CSS, Javascript로 앱을 개발할 수 있다. 너무 좋다. 인 앱 결제 또한 외부 결제를 써도 상관없다.

그렇다면 기획을 해보자

일단 내가 당장 필요한 기능은 이러하다.

• 브라우저 사용 중에 단축키를 누르면 바로 팝업이 떠서 코인 시세가 실시간으로 보인다.
• 팝업이 굉장히 작아야 한다. 지나가다는 사람이 내 모니터를 봐도, 뭐 하는지 잘 모를 정도의 사이즈여야 한다.
• 내 시스템 테마에 맞춰 다크 모드면 어둡게, 라이트면 밝은 테마로 나온다.

당장은 아니지만 만약 이 앱을 사용하는 사람들이 많아진다면, 몇몇 거래소 API를 통합해서 거래까지 가능하도록 만들 수도 있다.

아무튼 나는 이 앱을 트레이딩을 도와주는 인공지능(?) 느낌으로 발전시키고 싶었다. 아이언맨의 자비스처럼 말이다. 그래서 이름을 브리아나로 정했다. 그리고 조금 더 있어보이려면 기업명이 필요하기 때문에, 기업명은 브리아나 랩스로 정했다.

디자인

간단하게 기획은 마무리 했으니, 이번엔 디자인을 할 차례다.

기획 단계에서 앱 이름을 정했고, 컨셉이 나왔으니 지금 단계에서는 두 가지만 준비하면 된다.

1. 로고
2. 메인 컬러 (Primary color)

로고는 일반적인 경우라면 일러스트레이터에서 대충 볼드한 폰트 중에 마음에 드는거 골라서 BRIANA 이런식으로 글자로만 구성해도 무방하다. 하지만 확장 프로그램 앱들은 보통 심볼 형태의 로고를 가지고 있다. 이유는 브라우저 확장 프로그램 탭에서 4x4px 정도로 아주 작게 표시되기 때문에, 심볼 형태의 로고가 있는게 브랜드 노출 측면에서 더 유리하다.

근데 나는 디자이너가 아니기 때문에 로고를 직접 만들긴 어렵다. 하지만 요즘은 머신러닝 기능을 활용해 로고를 만들어주는 서비스들이 정말 많다.

나는 옛날부터 애용하고 있는 Looka.com이라는 서비스를 이용해 로고를 만들었다. 마음에 드는 로고 레이아웃과 색, 브랜드 이름 등 몇 가지 input만 넣어주면, 인공지능이 무한으로 로고를 만들어준다. 무한으로 만드는 것 까지는 무료이고, 이후 구독제 혹은 1회성 결제로 구매하면 어디서든 상업적으로 이용 가능하다.

비슷한 서비스들이 정말 많아서 그 동안 이것저것 다 사용해봤는데, 퀄리티는 여기가 가장 좋았다.

메인 컬러는 파란색이나 빨간색 계통으로 하고 싶었다. 보통 파란색은 B2B 서비스에서 많이 쓰는 색이다. 신뢰도를 주는 색이기 때문이다.

하지만 나는 최종적으로 주홍색을 선택했다. 이유는 브리아나가 인공지능의 느낌을 가지고 있고, 사람 이름을 쓰고 있기 때문에 파란색 계통을 쓰면 너무 차가운 인상을 줄 것 같았다.

심볼을 구성하는 데 시간을 꽤 많이 썼다. 브리아나라는 이름을 가진 인공지능을 심볼로 형상화 하기가 좀 많이 까다로웠기 때문이다.

아까 자비스를 잠깐 언급했는데, 영화에서도 자비스는 목소리만 나오지 어떠한 시각화된 형태로써 등장하지 않기 때문이다. 물론 어벤져스2에서 잠깐 신경망처럼 시각화되어서 보이긴 하는데, 심볼을 만들 때 딱히 도움이 되진 않았다.

결과적으로 내가 최종적인 심볼을 선택할 때, iOS의 Siri가 도움이 되었다. 아이폰 유저들은 알겠지만, 시리를 호출하면 화면 아래에 곡선 파동들이 요동친다.

하지만 시리는 좀 형태가 복잡하다. 시리를 참고하되 좀 심플한 버전으로 만들어보고 싶었고, 이것저것 많이 구성해보다가 결과적으로 매우 마음에 드는 심볼을 찾았다. 그렇게 해서 나온 최종 결과물은 이렇다.

확장 프로그램 개발

나는 이번 프로젝트의 프론트엔드를 Vue.js + Typescript로 구성했고, 스타일링은 Tailwind CSS를 사용했다. 그리고 마지막으로 개발을 위한 개발 서버 오픈과, 패키지 배포를 위한 번들링으로 Parcel을 이용했다.

확장 프로그램은 기본적으로 HTML 페이지 1개만 필요하기 때문에, React나 Vue같은 SPA 구조를 가진 프레임워크에 매우 잘 어울린다. 이유는 SPA의 라우팅 시스템이 앱을 확장성있게 개발하기 매우 편하기 때문이다.

프론트엔드에서 타입스크립트는 아직까지는 프로덕션 레벨의 Vue에는 적용하긴 이르다고 생각해서 사용하고 싶지 않았는데, 개발 단계에서 chrome 객체의 타입 체킹이 절실했기 때문에 어쩔 수 없이 사용했다. 타입스크립트와 함께 @types/chrome 패키지를 설치하면 개발 단계에서 많은 도움을 받을 수 있다.

초기 버전의 브리아나는 확장 프로그램을 열었을 때 내가 미리 지정한 코인 목록이 보이고, 가격이 실시간으로 보여져야 하기 때문에 간단한 데이터베이스와 거래소에서 제공하는 웹소켓 API가 필요하다.

확장 프로그램에서만 사용하는 chrome 객체에는 브라우저에 로그인한 사용자 계정마다 데이터를 저장시키는 storage 기능이 있고, 실시간 가격 정보는 업비트에서 제공하는 웹소켓 API를 통해 가져올 수 있었다.

스토리지는 클라우드에 저장되기 때문에 같은 계정으로만 로그인하면 어떤 디바이스에서도 완벽하게 동기화된다.

이 앱을 개발하는데 이틀 정도 걸렸다. 확장 프로그램 자체가 딱 필요한 기능 1개만을 위해서 만들기 때문에 금방 개발할 수 있었다.

마켓에 등록하기

앱을 만들어 놓고 사용자의 입장에서 사용해보니까 이거 진짜 너무 유용한 툴이다. 내가 산 코인들 목록 넣어두고 그냥 보고싶을 때 단축키로 탁 보고 바로 끄면 되니까 세상 편할 수가 없었다. 눈치도 안보인다.

하지만 이 좋은 툴을 나만 쓰긴 아깝기 때문에, 앱을 무료로 마켓에 배포하고 싶었다. 그래서 기꺼이 내 돈 5불을 내고 개발자 등록을 한 뒤 배포를 위한 준비를 시작했다.

마켓에 등록하기 위해서 최소 이정도는 준비가 되어야 한다.

1. 웹사이트
2. 앱 로고
3. 앱 스크린샷 최소 1장
4. 민감함 정보를 다루는 기능을 쓸 때, 왜 써야 하는지 기술하기
5. 개인정보처리방침 URL

웹사이트는 사실 Github 리파지토리 링크를 넣는걸로도 충분하지만, 나는 브리아나를 좀 있어보이게 하고 싶어서 브리아나를 소개하는 한 장 짜리 웹사이트를 만들었다.

Godaddy에서 brianalabs.com 도메인을 구입했고, 이후 트래픽 분석을 위해 Google analytics 까지만 적용했다.

이 웹사이트도 하루만에 만들었고, Github를 이용해 무료로 호스팅했다. 여기을 눌러서 웹사이트를 볼 수 있다.

앱 로고와 스크린샷도 이미 만들어두었기 때문에 어렵지 않게 해결했다.

사실 심사를 한 번 넣었는데, 개인정보처리방침이 없어서 빠꾸를 한 번 먹었다. 아직은 브리아나가 개인정보를 수집하진 않는데도 거절하더라. 앱 기능과 관계없이 그냥 무조건 있어야 하는 듯 싶다.

2번 만에 심사가 통과됐고, 브리아나라고 검색하면 이제 누구든지 코인 시세를 빠르게 확인할 수 있다! 😎

설치를 하고 나면 브라우저 오른쪽 상단에 브리아나 로고가 보여지면서 단축키를 누르거나, 심볼을 누르면 시세를 확인할 수 있다. 그럼 다들 성투하시길!

앞으로의 브리아나

사실 지금도 시세를 알아보는 부분에선 충분히 가치있지만, 트레이딩에 더 도움이 되려면 차트가 보이는 기능도 있어야 할거고, 장기적으로 매매도 되야 할 것이다.

그리고 사용자 풀로 봤을 땐 주식을 보고 싶어하는 사람들이 훨씬 많을 것이다. 주식까지 코인과 통합해서 보여줄 수 있다면, 엄청나게 많은 잠재 고객들이 존재한다.

사용자에게 고려한 더 강력한 기능을 제공하려면 창과 텍스트 사이즈를 조절하는 기능도 필요할 거고, 거래량이나 호가를 보는 등 더 많은 데이터를 보여주는 기능도 필요하다.

그리고 매매 기능이나 강력한 알림 기능을 만들어서 수익을 창출할 수 있다면 작은 팀을 꾸릴 수도 있다.

아무튼 확실한 건 나는 지금 이 트레이딩 시장에 빠져들고 있다. 투기가 아닌 올바른 투자를 위해 앞으로 몇 년이고 계속 브리아나를 개발하며 이 시장을 공부할거고, 매매도 많이 할 것이다.

참고

• https://looka.com
• https://godaddy.com
• https://brianalabs.com