[퀵숙] 웨일 확장앱 만들어본 후기(+ 크롬 익스텐션)

난 원래 크롬 브라우저를 매우 애용했었다. 근데 웨일을 쓰는 친구가 강력 추천을 하길래 써보게 되었다. 생각보다 좋잖아?! 라는 생각에 웨일에 점점 익숙해지게 되었다. 그러던중, 웨일 확장앱 개발이라는 사이트를 우연히 발견하게 되었다.

 

뭘 만들어볼까.. 하다가 울학교 사이트 모아주는 확장앱이 있으면 좋겠다싶어서 만들었다. (난 이미 졸업했는데...ㅋ)

사실 학교 공지사항을 놓치거나 꿀정보가 담긴 사이트를 모르는 학생들이 워~~~~~낙 많아서... 필요한 것 같긴했다. 

 

웨일 개발자센터

웨일 개발자센터

소개에 보면, 크롬 브라우저의 익스텐션을 거의 그대로 가져와 웨일 확장앱으로 등록할 수 있다고 되어있다. 나는 웨일을 먼저 만들었기때문에, 크롬은 나중에 업로드하였다.

 

개발자 등록하기

웨일은 네이버 아이디만 있으면 개발자 등록을 할 수 있다. 하지만! 크롬은 개발자 등록을 하려면 돈을 내야한다! 5달러를 내야한다. 확장앱을 만들어야하니 어쩔 수 없다. 5달러를 결제하자

 

기능 구현하기

만들기로 결심하기전에 레퍼런스들을 좀 찾아봤는데 React나 Vue를 사용해서 만든 확장앱들도 적지않게 있었다. React를 사용해서 만들어볼까도 생각을 했지만 북마크와 동일한 기능만 제공하는 확장앱에 굳이? 라는 생각이 강력하게 들었다. 그래서 웹 프로그래밍을 처음 배우던 시절을 떠올리며 HTML, CSS, JavaScript로 만들기로 결정했다.

 

var element = document.getElementById(id);

정말 너무 오랜만에 보는 코드였다. 웹 API를 사용해서 개발하려니까 정말 지옥같았다. 하지만 간단하게 개발하는 것을 목표로 뒀으니까! 만들고나니 이 기능을 구현하는게 문제가 아니었다. 확장앱들의 가장 핵심은 manifest.json 바로 이 파일이었다.

 

Manifest.json

확장앱을 만들 때 필수인 파일은 manifest.json 이거 하나뿐이다. 처음 개발할 때는 이게 무슨 소린지 이해를 못했다. 웨일 매니페스트 설명서 를 읽어보았지만 어려웠다. 디버깅 방법도 모르니 어떻게 테스트하는지도 모르겠고, 뭐가 필수인지도 모르겠고 혼돈이었다.(디버깅 방법은 밑에 작성할 것이다.) 

 

내가 만든 확장앱은 다음과 같은 구조를 띄고있다.

{
  "manifest_version": 2,	// 고정
  "name": "퀵숙 Quick Sookmyung",	// 확장앱 이름
  "version": "1.0.0",		// 확장앱 버전 (업데이트 시 수정하면 된다)
  "description": "숙명여자대학교 학생들이 필요한 모든 웹사이트를 모았습니다.", // 확장앱 설명
  "icons": {
    "16": "",
    "48": "",
    "128": ""	// 확장앱 사이트에 등록할 아이콘 경로
  },
  // 확장앱 개발시 작성
  "browser_action": {
    "default_popup": "./popup/index.html",	// 아이콘 클릭시 보여지는 화면
    "default_icon": {
      "16": ""	// 브라우저 툴팁에서 보여질 확장앱 아이콘 경로
    }
  },
  // 권한
  "permissions": [
    "<all_urls>"
  ]
}

 

아이콘

- 16x16 icon: 익스텐션 페이지의 favicon으로 보여짐

- 48x48 icon: 익스텐션 관리 페이지 (whale://extensions 혹은 chrome://extensions)에 보여질 아이콘

- 128x128 icon: 확장앱 스토어, 설치할 때 사용되는 아이콘

 

broswer_action

웨일, 크롬 브라우저 툴팁 (주소창 바로 오른쪽)에 표시된다. 아이콘을 클릭했을 때, 보여지는 화면에 대한 정의를 할 수 있다. 

 

permissions

권한!! 확장앱 페이지에서 브라우저 API를 사용하기 위해서는 각 API마다 필요한 권한을 정의하는 곳이다. 위의 예시를 보면 <all_urls> 라고 되어있는데 가이드를 보면, 가급적 <all_urls> 혹은 http://*/* 등 지나치게 범위가 넓은 대상을 호스트 권한에 추가하지 않는 것을 강력히 권합니다. 라고되어있다. 웨일에서는 확장앱 심사를 통과했는데, 크롬은 뭔가 심사 절차가 까다로워보여서 저렇게 적지는 않았다.

 

디버깅 해보기

이렇게 만들고나면 내가 만든 앱이 잘 동작하는지 테스트를 해봐야한다. 웨일의 경우 주소창에 whale://extensions, 크롬의 경우 주소창에 chrome://extensions 를 입력해보자.

 

위와 같은 화면을 볼 수 있는데, 왼쪽이 개발용, 오른쪽은 실제 확장앱스토어에서 다운받은 확장앱이다. 새로운 앱을 등록하는 방법은 하단에 압축해제 된 확장앱 설치 버튼을 누른 후, 개발중인 폴더를 선택해주면 된다.

팝업창에서 우클릭하면, 위와 같이 개발자도구를 켤 수 있다. 사실 이렇게 하지않아도, manifest.json에 정의한 browser_action의 default_popup에 적힌 html파일을 그냥 열어서 테스트해도 된다.

 

확장앱 심사

제일 중요한 부분이다. 확장앱을 만들었으면 심사를 받아야한다. 웨일은 확장앱을 한 번에 승인 받았는데 크롬에서는 그렇지 못했다. 심지어 두 번이나 거부당했다. 가이드를 제대로 읽지않은 내 잘못이긴 하다. 수정할 때마다 심사를 받아야한다. 크롬에 수정된 버전 심사를 맡겨놓고 틀린 부분을 발견해서 리뷰가 완료되지 않은 상태에서 다시 심사를 등록하려고했던 적이 있었다. 근데 UI가 익숙하지 않아서 이것저것 누르다가 아예 확장앱을 스토어에서 내려버린 적도 있었다. 

 

경험상 웨일은 1~2일이면 승인이 나는 것 같고, 크롬은 2~3일정도 걸리는 것 같다. 

 

느낀점

확장앱을 만드는데에는 얼마 안걸렸다. 2시간도 안걸렸던 것 같다. (진짜 너무 간단해서 이걸 공개해도 되나 고민했지만... 누군가 더 멋지게 바꿔줄 것을 기대하며 일단 오픈해두었다.) 근데 manifest 가이드 읽어보고, 디버깅 하는 방법 알아내고, 심사 기다리는 시간이 엄청 오래걸렸다. 그래도 한 번쯤은 해볼만한 토이프로젝트인 것 같다! 학교 학생이면 편하게 PR 날릴 수 있도록 기여 방법에 대한 문서도 작성해두고 레포도 오픈해두긴 했는데.. 숙대생은 안나타나고 타학교 학생이 PR을 먼저 날려줬다.

 

(혹시나 이 글을 읽고 있는 숙대생이 있다면 아이디어가 있으면 언제든지, 얼마든지 PR 날려주세요 :) )

 

결론: 가이드를 차근차근 읽어보자!

 

퀵숙 QuickSookmyung 홍보

웨일 확장앱 스토어에서 다운받기: bit.ly/quicksook-whale

크롬 확장앱 스토어에서 다운받기: bit.ly/quicksook-chrome

퀵숙 QuickSookmyung 공식 레포: https://github.com/seohyun0120/Quick-Sook

seohyun0120/Quick-Sook

스토어에 리뷰, 별점을 남겨주시면 정말 힘이 될 것 같습니다 :) GitHub star도 눌러주시면 thx!