Whale 브라우져는 크로미움 엔진을 기반으로 하여 구동되기 때문에 기존의 크롬 확장프로그램들과 대부분 호환됩니다.
때문에 크롬 확장스트어에서 사용하던 앱 들을 웨일 브라우져에서 그대로 개발, 사용 할 수 있습니다.

V1.0.0 - Initial Release

처음 도전하는 웨일 확장프로그램.
사실 2018년에 있었던 네이버 웨일 콘테스트에 출전하였으나 보기좋게 서류전형에서 광탈한 쓰라린 기억이 있었다.

딱히 그것 때문은 아니지만 학교 스케쥴도 워낙 바쁘고 해서 한동안 익스텐션개발쪽은 신경도 못쓰고 있었는데, 올해부터 소속된 학회에서 스터디 그룹을 만들어서 제대로 확장프로그램을 만들고 서비스 해보고자 새롭게 시작하게 되었다.

스터디그룹을 이끌어 나가는 대표서 뭔가 먼저 공부하고 팀원들에게 설명해주고자 따로 연습삼아서 만들어 본게 이 Vibe 확장프로그램의 시작이다.

무엇보다 개발자를 위해서 따로 Document 가 잘 정리되어 있었고, 별도의 API를 제공해서 원하는 기능을 구현하기 쉬울 것 같아서 선택하게 되었다.

기본구성 : manifest.json

확장프로그램의 기본 구성은 manifest.json 파일과 index.html 이다. 이 두가지 파일 만 있으면 일단 기본적인 뼈대는 갖춰졌다고 할 수 있다.

manifest.json에는 확장프로그램으 기본적인 명세가 정의되어 있다. 이름, 버전, 아이콘, 실행시 로드할 첫 페이지, (Whale 브라우져의 경우) 사이드바에서 동작하는 액션 정의 등이 주 요소이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{

    "manifest_version": 2,
    "name": "VIBE for Sidebar",
    "version": "1.0.1",


    "description": "VIBE 뮤직플레이어 for 사이드바",
    "icons": {
        "120": "images/new_120x120.png"
    },

    "sidebar_action": {
        "default_page": "index.html",
        "default_title": "VIBE for Sidebar",
        "use_navigation_bar": false,
        "mobile_user_agent": true
    }
}

위 코드는 Vibe Extension의 1.0.1 버전의 manifest.json 이다.

최상단에 manifest 문서의 버전과 App name, App Version 을 적어준다. Whale 확장프로그램의 경우 manifest_version 값은 2로 적어준다.

App version의 경우 프로그램에 변경이 있을 경우 매 릴리즈마다 수동으로 직접 값을 변경해주어야 한다.

description 항목에는 간단한 앱 설명을 적어준다. 나중에 스토어에 업로드 되었을 때 한줄설명글에 해당한다.

store_title

icons 는 중괄호로 묶어서 여러 사이즈를 정의 할 수 있다. whale 확장프로그램은 120 * 120 으로 규격화된 아이콘만 업로드 가능하다.

Sidebar_action 섹션은 Whale 브라우저의 특화 기능인 사이드바에 삽입 될 확장프로그램의 액션을 정의하는 항목이다.
여기에서 다양한 사이드바 액션 관련 json 키를 찾아 볼 수 있다.

default_page의 경우 사이드바를 실행시켰을 때 처음 띄울 인트로 페이지를 정의한다. VIBE for Sidebar 의 경우 VIBE 사이트를 띄워주는것이 목표이기 때문에 index.html 속의 코드는 VIBE 메인 페이지로 리다이렉트 시켜주는 코드만이 들어있다.

default_title의 경우 사이드바에 커서를 올렸을 때 보여줄 이름값을 넣어준다.
side_title

use_navigation_bar 키는 default 값으로 True 를 갖는다. navigation_var는 아래 사진과 같이 뒤로가기, (default_page에서 정의된)홈으로 이동, 새 탭열기 등의 브라우져 액션을 수행한다. 네비게이션 바를 활성화 할 경우 콘텐츠 영역의 일부를 희생해야 한다. 이 앱의 경우에는 별도로 브라우저 액션을 컨트롤 할 필요가 없다고 판단하여 해당 값을 false 처리하였다.

navbar

마지막으로 mobile_user_agent 값을 True 로 주어 Vibe의 모바일 페이지가 뜨도록 하여 Sidebar 에 적합한 UI를 띄우도록 하였다.

개발문서를 확인해 보면 이 값에 따른 User Agent 값은 아래와 같이 나뉜다.

TRUE False
Mozilla/5.0 (Linux; Android 7.1.2; Nexus 6P Build/WHALE)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/65.0.3325.220 Whale/1.3.53.4
Mobile Safari/537.36 sidebar		 Mozilla/5.0 (Windows NT 6.1; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/65.0.3325.220 Whale/1.3.53.4
Safari/537.36 sidebar

manifest.json의 내용은 이정도가 전부이다.

사용자 피드백 : BETA 버전의 비운

앱 출시 후 가장 많이 들어왔던 피드백이 아직 VIBE에서 지원하지 않는 기능을 넣어달라는 부분이었다. 페이지 로드 후 별도의 JS 파일을 삽입하여 UI의 일부분을 변경할 수 있는 방법을 찾아 보았으나 웹 보안표준상 애초에 불가능한 부분이었다.

개발 과정에서 한가지 놓쳤던 부분이 대부분의 사용자들은 이 확장프로그램이 VIBE 팀에서 직접 개발해서 출시한, 소위 말하는 공식 앱 인줄 알고 설치한 사람들이 굉장히 많다는 점이었다.

주위에 있는 사람들 대부분이 개발자들이기 때문에 정말 일반적인 대중의 시선에서 이 앱을 사용할 때의 경험을 미쳐 고려하지 못했던 것 같다.

때문에 공식앱인줄 알고 사용하던 대부분의 사용자들은 스토어 평점란에다가 VIBE의 기능부족에 대한 원성을 쏟아냈던 것이다.

score
commentVIBE 시스템 자체의 기능 부재에 대한 원성. 대부분 기능추가 요구이다.

나 또한 해결해 주고 싶은 마음이 굴뚝같아서 Vibe 측에 url 쿼리로 별도로 구현할 수 있는 방법이 없는지 까지 물어보았을 정도다.

다행히 19년 5월 중으로 업데이트를 통해 해당 기능이 구현 될 예정이라고 한다. 이제 좀 한시름 놓을 수 있지 않을까 기대해본다.

Version 1.0.1 : Icon Change

버전 1.0.1 에서의 달라진 점은 메인 아이콘과 앱 네임의 변경이 전부이다.

사실 굳이 바꾸지 않아도 되는 부분인데 버전업을 한 이유는 네이버 웨일측에서 전달받은 메일 때문이다.
guide

메일의 요점은 공식적으로 배포하는 확장프로그램이 아닌 일반 개인개발자가 배포한 앱의 경우 공식앱과 혼동되지 않도록 구분되는 아이콘 또는 이름을 사용하라는 것이었다.

1.0.0 버전에서 내 확장프로그램은 VIBE 서비스의 이름과 아이콘을 그대로 가져다 사용하고 있었다. 아마 위에서 적었던 사용자들의 오해는 이 때문에 더 커진게 아닐까 싶기도 하다.

때문에 지금의 아이콘과 가이드에 맞는 이름으로 변경된 1.0.1 버전을 릴리즈하게 되었다.

아이콘은 기존 VIBE의 하트모양 비트 아이콘은 그대로 유지하되 음표모양의 꼬리를 붙여보았다.

icon_120x120{: .center} new_120x120{: .center}

이렇게 가이드에 맞게 변경하여 심사등록을 한지 일주일 즈음 지났을까, 첫번째 등록과는 다르게 계속 심사중에 머물러 있어서 직접 웨일 팀에 문의를 넣어 보았다.

사실 어디로 문의를 넣어야 할 지 고민하다가 우현히 찾게 된 트위터의 웨일 개발팀 공식 계정으로 직접 DM을 넣어서 답변을 받았다.
dm

개발팀과 직접 소통할 수 있는 채널이 있다는 점이 굉장히 만족스러웠다. 어떠한 이유에서 누락되었는지는 모르겠지만 문의를 넣고 바로 다음날 처리가 되었다는데 높은 점수를 주고 싶다.
사실 DM도 거의 늦은 밤에 넣었던 것이니 실제 처리에는 만 하루가 걸리지 않은 셈.

앞으로 계획

사실 이 부분이 가장 고민인 부분이다.
현재 이 앱의 주 기능은 사이드바에서 VIBE 모바일 페이지를 띄워주는 기능이 ‘전부’이다. 때문에 index.html 페이지도 meta 태그 한줄이 전부이다. 사용자들의 요청하는 기능들도 현재로썬 확장프로그램 선에서 개선할 방법이 없는 상태이며 조만간 VIBE 팀에서 공식적으로 해결해준다고 한다.

어찌보면 손 댈 필요 없이 잘 굴러가는게 가장 좋은 프로그램인것 같긴 하다만 뭔가 좀 더 기능이라도 추가해보고, 다듬어 보고 싶은게 사실이다.

중간고사가 끝난 지금 원래 확장프로그램을 개발하게 된 계기를 만들어 준 스터디를 다시 진행하고 있다. 지금은 학교 포털 사이트에서 사용 가능한 확장 프로그램을 만들고 있다. 일단 팀원들과 함께 의견을 나눠보고 앞으로 어떻게 해야할 지 좀 더 고민해 봐야겠다.

우선적으로 해야 할 일은 확장프로그램 레포지토리를 좀 다듬어야 할 것 같다.
개발 당시에는 중간고사 기간동안 틈틈히 머리식힐 겸 만들어 본 거라 Readme.md도 없고 릴리즈에만 치중했다. 기말고사 기간이 다가오기 전에 마음 단단히 먹고 Readme.md와 릴리즈 노트를 정리해서 커밋하는게 목표이다.

<참고>

19.12.22 추가

지난 12월을 기점으로 네이버 VIBE 측에서도 공식적으로 웨일스토어에 확장프로그램을 등록했다고 한다. 얼마 전 이런 메일이 날아들었다.

image

사실 잘 이해가 가지 않는 부분이었다.
내 확장프로그램은 지난 4월부터 꾸준이 운용해와 지금 현재 약 6000명의 사용자를 보유하고 있다. 스토어 페이지에도 적어놓았지만 메뉴얼을 읽지 않는 일반 유저의 특성 상 VIBE서비스의 모든 불편함을 내 앱에 성토한 결과 평점은 2점대 초반으로 곤두박질쳐 있었지만, 그래도 꽤나 고정적인 사용자를 보유하고 있는 것으로 판단되었다. 그런데 이제와서 공식앱이 출시되었으니 앱을 내리라는것은 상당히 억울하다는 느낌이 들었다. 직접 설치해보니 기능적으로 내 앱과 다른면을 찾을 수 없었다.

현업에 계시는 다양한 선배님들께도 의견을 구해보았지만, 역시 나와 비슷한 의견이 많았다.

하지만 몇 일간의 고민 끝에 결국 앱을 내리기로 결심했다.
먼저 VIBE 의 서비스를 나 또한 “이용” 한 것이기 때문에, 서비스 제공자의 요청이 결코 잘못된 것은 아니라고 결론내렸다. 또한 앱 평점에서 보았듯, 공식앱이 아닌데도 사용자들은 공식앱인줄 알고 혼동하여 내 앱에 다양한 피드백을 쏟아내고 있는 실정이었다. 이 또한 개발진 입장에서는 피드백 창구가 다원화되고, 제대로 수렴할 수 없기 때문에 문제였을 것이다.

그리고 가장 크게 다가온 것은, 한 선배님의 말씀이었는데,

개발자는 다운로드 수가 아닌 코드로 승부해야한다. 너가 개발자지, 운영진은 아니잖아?

라고 하셨다. 솔직히 6000이라는 다운로드 숫자가 아쉬웠던 것은 사실이다. 그런데 저 말씀을 듣고나니 비로소 복잡했던 마음을 정리할 수 있었다. 여러 상황적 요소를 고려했을 때, 불필요한 미련을 버리고 잘 짜여진 새로운 아이템으로 스토어에 출시하는게 개발자로써 맞다고 생각하게 되었다.

결국 며칠 전 웨일브라우저 팀에 앱을 내리겠다는 뜻을 전달했고, 앱을 미공개 처리했다.

잘 돌아가는 서비를 중단하는것은 안타까운 일이지만, 그래도 이번 일을 통해 큰 서비스를 운영하면서 다양한 경험을 할 수 있었다. (개발자의 예상을 뛰어넘는 유저와, 원작자의 문제제기)
이번 일을 경험삼아 더 좋은 아이디어로 앱을 출시해야겠다는 다짐을 해본다.

제가 등록한 앱은 “미공개” 상태이기 때문에 다음 링크로 직접 접속하시면 사용할 수 있습니다.
Vibe for Sidebar

image