Merge branch 'develop'

* develop: (26 commits)
  피드백 경로 추가
  피드백 페이지 만들기
  빌드 코드 정리
  지표 코드 추가
  사전 선택 동작 튜닝 (드래그 + 더블클릭)
  의존 모듈 정의하기
  애널리틱스 코드 추가
  글자크기 옵션 추가
  단어 선택 옵션 적용하기
  옵션 페이지 및 단어 선택 옵션 추가
  팝업에서 검색 버튼 클릭 시 사전 노출   - 사전 결과가 프레임으로 추가되는 방식   - 엔터를 입력하면 다시 갱신됨
  팝업 설정 버튼 크기 조절
  팝업 마크업 추가
  웹폰트 변경
  오디오 듣기, 사전 전환 등 기존 기능 복원하기
  뷰 로드 사용성 개선
  드래그로 사전 선택할 수 있게 하기
  유효한 단어인지 확인하기 (영어만, 3단어 이내)
  사전 렌더링 후에 iframe 크기 자동 조절하기
  백그라운드에서 iframe 으로 사전 데이터 보내기 사전 iframe 렌더링하기
  ...

Gruntfile.coffee

@@ -4,139 +4,106 @@ module.exports = (grunt) ->
 
     # 익스텐션의 매니페스트 파일
     # `package.json`은 빌드에서 사용하지 않는다.
-    manifest: grunt.file.readJSON "src/manifest.json"
+    manifest: grunt.file.readJSON 'src/manifest.json'
 
     clean:
-      build: ["build", "src/js", "src/css", "release"]
+      build: ['build', 'src/js', 'src/css', 'release']
 
-    # 커피스크립트를 `src/js`로 컴파일한다.
     coffee:
       build:
         files: [
             expand: true
-            cwd: "src/coffee"
-            src: ["**/*.coffee"]
-            dest: "src/js"
-            ext: ".js"
+            cwd: 'src/coffee'
+            src: ['**/*.coffee']
+            dest: 'src/js'
+            ext: '.js'
         ]
 
     less:
       develop:
         files: [
             expand: true
-            cwd: "src/less"
-            src: ["*.less"]
-            dest: "src/css"
-            ext: ".css"
+            cwd: 'src/less'
+            src: ['*.less']
+            dest: 'src/css'
+            ext: '.css'
         ]
 
     copy:
       # 이미지와 CSS 파일을 빌드 디렉토리로 복사한다.
       build:
         files: [
             expand: true
-            cwd: "src/img"
-            src: ["*.jpg", "*.png", "*.gif"]
-            dest: "build/img"
+            cwd: 'src'
+            src: ['*.html', '*.json']
+            dest: 'build'
           ,
             expand: true
-            cwd: "src/css"
-            src: ["*.css"]
-            dest: "build/css"
+            cwd: 'src/img'
+            src: ['*.jpg', '*.png', '*.gif']
+            dest: 'build/img'
           ,
             expand: true
-            cwd: "src/font"
-            src: ["*.woff"]
-            dest: "build/font"
+            cwd: 'src/css'
+            src: ['*.css']
+            dest: 'build/css'
+          ,
+            expand: true
+            cwd: 'src/font'
+            src: ['*.woff', '*.woff2']
+            dest: 'build/font'
+          ,
+            expand: true
+            cwd: 'src/js'
+            src: ['**/*.js']
+            dest: 'build/js'
+          ,
+            expand: true
+            cwd: 'src/vendor'
+            src: ['*.js']
+            dest: 'build/vendor'
         ]
 
-    # requirejs의 상세한 옵션은 아래 링크를 참고한다.
-    # https://github.com/jrburke/r.js/blob/master/build/example.build.js
-    requirejs:
-      options:
-        baseUrl: "src/vendor"
-        paths:
-          # `require` 라이브러리도 압축 코드에 포함한다.
-          requireLib: "require"
-        mainConfigFile: "src/js/require_config.js"
-
-      cscript:
-        options:
-          # 컨텐트 스크립트의 뷰어는 비동기로 로드되기 때문에 의존 목록에 포함되지 않는다.
-          # 명시적으로 include에 추가한다.
-          include: ["requireLib", "cscript/viewer/viewer"]
-          name: "cscript/cscript_main"
-          out: "build/js/cscript.min.js"
-
-      bg:
-        options:
-          include: "requireLib"
-          name: "bg/bg_main"
-          out: "build/js/bg.min.js"
-
-    "string-replace":
-      # 매니페스트 파일의 스크립트 목록 부분을 압축한 스크립트로 대체한다.
-      # 컨텐트 스크립트는 "js"로 목록이 구성되어 있고,
-      # 백그라운드 스크립트는 "scripts"로 구성되어 있다.
-      build:
-        options:
-          replacements: [
-              # cscript
-              pattern: /"js"[^\]]+]/
-              replacement: "\"js\": [\"js/cscript.min.js\"]"
-            ,
-              # bg
-              pattern: /"scripts"[^\]]+]/
-              replacement: "\"scripts\": [\"js/bg.min.js\"]"
-          ]
-
-        files:
-          "build/manifest.json": "src/manifest.json"
-
     compress:
       # 빌드 디렉토리를 압축한 후 현재 버전을 붙여 `zip` 파일을 생성한다.
       # 웹 스토어에는 압축한 파일로 등록한다.
       release:
         options:
-          archive: "release/naver_endic_<%= manifest.version %>.zip"
+          archive: 'release/naver_endic_<%= manifest.version %>.zip'
 
         files: [
           expand: true
-          cwd: "build"
-          src: ["**"]
-          dest: "./"
+          cwd: 'build'
+          src: ['**']
+          dest: './'
         ]
 
 
   # NPM 태스크 로드
   grunt.loadNpmTasks task for task in [
-    "grunt-contrib-clean"
-    "grunt-contrib-copy"
-    "grunt-contrib-requirejs"
-    "grunt-string-replace"
-    "grunt-contrib-less"
-    "grunt-contrib-compress"
-    "grunt-contrib-coffee"
+    'grunt-contrib-clean'
+    'grunt-contrib-copy'
+    'grunt-contrib-less'
+    'grunt-contrib-coffee'
+    'grunt-contrib-compress'
   ]
 
 
   # 태스크 등록
-  grunt.registerTask "default", [
-    "coffee"
-    "less"
+  grunt.registerTask 'default', [
+    'coffee'
+    'less'
   ]
 
   # 빌드 디렉토리로 스크립트를 압축한다.
-  grunt.registerTask "build", [
-    "clean"
-    "default"
-    "copy"
-    "requirejs"
-    "string-replace"
+  grunt.registerTask 'build', [
+    'clean'
+    'default'
+    'copy'
   ]
 
   # 빌드 후 서비스 배포를 위한 `zip` 파일을 생성한다.
-  grunt.registerTask "release", [
-    "build"
-    "compress"
+  grunt.registerTask 'release', [
+    'build'
+    'compress'
   ]

TODO.md

@@ -0,0 +1,48 @@
+## TODO
+
+설정 정보에 이후 개선 내용에 대한 슬라이드 추가하기
+
+창이 열려있는 상태에서 렌더링 시 창 크기 변경하기
+
+페이스북 페이지 임베드하기
+단축키 입력 시 사전 동작하게 하기 (백그라운드로 메시지 보내기)
+단어장 페이지 만들기
+  - 꿀벌 단어장
+  - 사전 익스텐션에서 단어장으로 보내기
+  - 특정 페이지에 들어갔을 때, 내가 찾았던 단어를 하이라이트해서 보여주는 아이디어
+
+
+## DOING
+개선 내용에 대한 엑셀 파일을 설정 페이지에 추가하기
+  - https://docs.google.com/spreadsheets/d/19eSjHMtyF_RsF8EYa655SPjYB8EQFplfmPA_dozfIB0/edit#gid=0
+  - 앵귤러에서 선택해서 컨트롤러를 변경하는 방법에 대해 알아봐야 함
+
+
+## Complete
+더블클릭 시 백그라운드로 메시지 보내기
+백그라운드에서 프레임으로 보내서 사전 iframe 띄우기
+일단 선택한 단어를 iframe 에 출력하기
+배경 클릭 시 iframe 닫기
+백그라운드에서 사전 데이터 요청/파싱하기
+백그라운드에서 iframe 으로 사전 데이터 보내기
+사전 iframe 렌더링하기
+사전 렌더링 후에 iframe 크기 자동 조절하기
+유효한 단어인지 확인하기 (영어만, 3단어 이내)
+드래그로 사전 선택할 수 있게 하기
+오디오 듣기, 사전 전환 등 기존 기능 복원하기
+뷰 로드 시 요청이 2번 나가는 것 개선하기
+웹폰트 로드하기
+웹폰트 워닝 제거하기
+팝업에서 마크업 추가
+팝업에서 검색 버튼 클릭 시 사전 노출
+- 사전 결과가 프레임으로 추가되는 방식
+- 엔터를 입력하면 다시 갱신됨
+옵션 페이지 만들기
+사전 글자 크기 설정하기
+애널리틱스 추가하기
+의존 모듈 정의하기
+애널리틱스에 분석이 필요한 데이터가 무엇인지 정의하기
+더블클릭과 마우스 드래그를 명확하게 나누기
+지표 코드 추가하기
+사용하지 않는 파일 정리하기
+빌드 코드 정리하기

package.json

@@ -14,8 +14,6 @@
     "grunt": "~0.4.2",
     "grunt-contrib-less": "~0.8.3",
     "grunt-contrib-compress": "~0.5.3",
-    "grunt-contrib-requirejs": "~0.4.1",
-    "grunt-string-replace": "~0.2.7",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-coffee": "~0.8.0"

src/coffee/background/analyticsTracker.coffee

@@ -0,0 +1,48 @@
+###
+애널리틱스 수집 모듈
+
+모든 애널리틱스 지표는 백그라운드에서 처리한다.
+뷰어나 다른 모듈에서는 바로 수집하는 대신 백그라운드로 메시지를 보낸다.
+###
+@define 'analyticsTracker', ($$constant, $$uuid, $$storage, $$message) ->
+
+  whenTrackingRequested = $$message.createListenerToExtension 'A:trackingRequested'
+
+  startTracking = (clientId) ->
+    # @ga_debug = true
+    # `
+    # (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    # (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    # m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    # })(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');
+    # `
+
+    `
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    `
+    @ga 'create', $$constant.ANALYTICS_ID,
+      'storage': 'none'
+      'clientId': clientId
+    @ga 'set', 'forceSSL', true # 익스텐션은 모두 SSL로 보내야 한다.
+    @ga 'set', 'checkProtocolTask', null # 프로토콜 체킹 없이 보낸다.
+    @ga 'send', 'pageview', useBeacon: true
+
+  # 이벤트를 전송한다.
+  # @param {String} eventString 이벤트 문자열 '카테고리:액션:레이블'
+  track = (eventString) ->
+    [category, action, label] = eventString.split(':')
+    @ga 'send', 'event', category, action, label, useBeacon: true 
+
+  $$storage.get('clientId')
+    .then (clientId) ->
+      return clientId if clientId
+
+      $$storage.set('clientId', $$uuid.generateGuid()).then () ->
+        $$storage.get('clientId')
+
+    .then (clientId) ->
+      startTracking clientId
+      whenTrackingRequested track

src/coffee/background/background.coffee

@@ -0,0 +1,40 @@
+###
+각 프레임과의 메시지 수신을 담당한다.
+###
+@define 'background', ($$message, $$wordSearcher) ->
+  #--------------------
+  # Functions
+  #--------------------
+  whenWordSelected = $$message.createListenerToTab 'T:wordSelected'
+  whenOutsideClicked = $$message.createListenerToTab 'T:outsideClicked'
+  whenViewerInitialized = $$message.createListenerToTab 'T:viewerInitialized'
+  whenViewerRendered = $$message.createListenerToTab 'T:viewerRendered'
+  whenDicTypeToggled = $$message.createListenerToTab 'T:dicTypeToggled'
+
+  whenDicTypeToggledOnPopup = $$message.createListenerToPopup 'P:dicTypeToggled'
+  whenQuerySubmitted = $$message.createListenerToPopup 'P:querySubmitted'
+
+  sendWordSearched = $$message.createSenderToTab 'B:wordSearched'
+  sendOutsideClicked = $$message.createSenderToTab 'B:outsideClicked'
+  sendViewerRendered = $$message.createSenderToTab 'B:viewerRendered'
+
+  sendWordSearchedToPopup = $$message.createSenderToPopup 'P:wordSearched'
+
+  #--------------------
+  # Main Tasks
+  #--------------------
+  whenViewerRendered sendViewerRendered
+  whenOutsideClicked sendOutsideClicked
+
+  whenWordSelected (word) ->
+    $$wordSearcher.searchWord(word, sendWordSearched)
+  whenDicTypeToggled (isEE) ->
+    $$wordSearcher.toggleDicType(isEE, sendWordSearched)
+
+  whenViewerInitialized ->
+    $$wordSearcher.searchWordWithRecentQuery(sendWordSearched)
+
+  whenQuerySubmitted (word) ->
+    $$wordSearcher.searchWord(word, sendWordSearchedToPopup)  
+  whenDicTypeToggledOnPopup (isEE) ->
+    $$wordSearcher.toggleDicType(isEE, sendWordSearchedToPopup)