diff --git a/docs-translations/ko-KR/api/browser-window.md b/docs-translations/ko-KR/api/browser-window.md
index 8eb841e5196d..f1826952b9dc 100644
--- a/docs-translations/ko-KR/api/browser-window.md
+++ b/docs-translations/ko-KR/api/browser-window.md
@@ -6,22 +6,61 @@
```javascript
// 메인 프로세스에서
-const {BrowserWindow} = require('electron');
+const {BrowserWindow} = require('electron')
// 또는 렌더러 프로세스에서
-const {BrowserWindow} = require('electron').remote;
+const {BrowserWindow} = require('electron').remote
-let win = new BrowserWindow({width: 800, height: 600, show: false});
+let win = new BrowserWindow({width: 800, height: 600})
win.on('closed', () => {
win = null;
-});
+})
win.loadURL('https://github.com');
-win.show();
```
-또한 [Frameless Window](frameless-window.md) API를 사용하여 창 테두리가 없는 윈도우
-창을 생성할 수 있습니다.
+## Frameless 윈도우
+
+Frameless 윈도우를 만들거나 일정한 모양의 투명한 윈도우를 만드려면,
+[Frameless 윈도우](frameless-window.md) API를 사용할 수 있습니다.
+
+## 우아하게 윈도우 표시하기
+
+윈도우에서 페이지를 로딩할 때, 사용자는 페이지가 로드되는 모습을 볼 것입니다.
+네이티브 어플리케이션으로써 좋지 않은 경험입니다. 윈도우가 시각적인 깜빡임 없이
+표시되도록 만드려면, 서로 다른 상황을 위해 두 가지 방법이 있습니다.
+
+### `ready-to-show` 이벤트 사용하기
+
+페이지가 로딩되는 동안, `ready-to-show` 이벤트가 랜더러 프로세스가 랜더링이 완료되었을
+때 처음으로 발생합니다. 이 이벤트 이후로 윈도우를 표시하면 시각적인 깜빡임 없이 표시할
+수 있습니다.
+
+```javascript
+let win = new BrowserWindow({show: false})
+win.once('ready-to-show', () => {
+ win.show()
+})
+```
+
+이 이벤트는 보통 `did-finish-load` 이벤트 이후에 발생하지만, 페이지가 너무 많은 외부
+리소스를 가지고 있다면, `did-finish-load` 이벤트가 발생하기 이전에 발생할 수도
+있습니다.
+
+### `backgroundColor` 설정하기
+
+복잡한 어플리케이션에선, `ready-to-show` 이벤트가 너무 늦게 발생할 수 있습니다.
+이는 사용자가 어플리케이션이 느리다고 생각할 수 있습니다. 이러한 경우 어플리케이션
+윈도우를 바로 보이도록 하고 어플리케이션의 배경과 가까운 배경색을 `backgroundColor`을
+통해 설정합니다:
+
+```javascript
+let win = new BrowserWindow({backgroundColor: '#2e2c29'})
+win.loadURL('https://github.com')
+```
+
+참고로 `ready-to-show` 이벤트를 사용하더라도 어플리케이션을 네이티브 느낌이 나도록
+하기 위해 `backgroundColor`도 같이 설정하는 것을 권장합니다.
## Class: BrowserWindow
@@ -270,6 +309,11 @@ window.onbeforeunload = (e) => {
윈도우가 숨겨진 상태일 때 발생하는 이벤트입니다.
+### Event: 'ready-to-show'
+
+웹 페이지가 완전히 랜더링되어 윈도우가 시각적인 깜빡임없이 컨텐츠를 보여줄 수 있을 때
+발생하는 이벤트입니다.
+
### Event: 'maximize'
윈도우가 최대화됐을 때 발생하는 이벤트입니다.
diff --git a/docs-translations/ko-KR/api/frameless-window.md b/docs-translations/ko-KR/api/frameless-window.md
index 87255e7977e1..dd6305574a73 100644
--- a/docs-translations/ko-KR/api/frameless-window.md
+++ b/docs-translations/ko-KR/api/frameless-window.md
@@ -1,15 +1,15 @@
-# Frameless Window
+# Frameless 윈도우
> 툴바, 테두리, 시각적인 "chrome" 없이 윈도우를 엽니다.
-Frameless Window는 [창 테두리](https://developer.mozilla.org/ko/docs/Glossary/Chrome)가
+Frameless 윈도우는 [창 테두리](https://developer.mozilla.org/ko/docs/Glossary/Chrome)가
없는 윈도우를 말합니다. 이 기능은 윈도우의 일부분인 툴바와 같이 웹 페이지의 일부분이
아닌 부분을 보이지 않도록 합니다. [`BrowserWindow`](browser-window.md) 클래스의
옵션에서 설정할 수 있습니다.
-## Frameless Window 만들기
+## Frameless 윈도우 만들기
-Frameless Window를 만드려면 [BrowserWindow](browser-window.md) 객체의
+Frameless 윈도우를 만드려면 [BrowserWindow](browser-window.md) 객체의
`options` 객체에서 `frame` 옵션을 `false`로 지정하면 됩니다:
```javascript
@@ -30,7 +30,7 @@ let win = new BrowserWindow({titleBarStyle: 'hidden'})
## 투명한 창 만들기
-Frameless Window 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로
+Frameless 윈도우 창의 배경을 투명하게 만들고 싶다면 `transparent` 옵션을 `true`로
바꿔주기만 하면됩니다:
```javascript
@@ -66,7 +66,7 @@ win.setIgnoreMouseEvents(true)
## 드래그 가능 위치 지정
-기본적으로 Frameless Window는 드래그 할 수 없습니다. 애플리케이션의 CSS에서 특정
+기본적으로 Frameless 윈도우는 드래그 할 수 없습니다. 애플리케이션의 CSS에서 특정
범위를 `-webkit-app-region: drag`로 지정하면 OS의 기본 타이틀 바 처럼 드래그 되도록
할 수 있습니다. 그리고 `-webkit-app-region: no-drag`를 지정해서 드래그 불가능 영역을
만들 수도 있습니다. 현재 사각형 형태의 범위만 지원합니다.
@@ -93,7 +93,7 @@ button {
## 텍스트 선택
-Frameless Window에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
+Frameless 윈도우에서 텍스트가 선택되는 드래그 동작은 혼란을 야기할 수 있습니다. 예를
들어 타이틀 바를 드래그 할 때 타이틀 바의 텍스트를 실수로 선택할 수 있습니다. 이를
방지하기 위해 다음과 같이 드래그 영역의 텍스트 선택 기능을 비활성화해야 할 필요가
있습니다:
diff --git a/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md b/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md
index 00d9b9d9e5cc..22aec05af500 100644
--- a/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md
+++ b/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md
@@ -166,6 +166,29 @@ electron-osx-sign YourApp.app YourApp.app/Contents/Resources/app/node_modules/na
엄격하게 제한되어 있습니다. 자세한 내용은 [앱 샌드박싱][app-sandboxing] 문서를
참고하세요.
+### 추가적인 권한
+
+Mac 앱 스토어 빌드를 위해 앱에서 사용하는 Electron API에 따라 `parent.plist` 파일에
+추가적인 기능에 대한 권한을 추가해야 할 수도 있습니다.
+
+#### dialog.showOpenDialog
+
+```xml
+com.apple.security.files.user-selected.read-only
+
+```
+
+자세한 내용은 [User-Selected 파일 접근 활성화 문서][user-selected]를 참고하세요.
+
+#### dialog.showSaveDialog
+
+```xml
+com.apple.security.files.user-selected.read-write
+
+```
+
+자세한 내용은 [User-Selected 파일 접근 활성화 문서][user-selected]를 참고하세요.
+
## Electron에서 사용하는 암호화 알고리즘
국가와 살고 있는 지역에 따라, 맥 앱스토어는 제출한 애플리케이션에서 사용하는 암호화
@@ -214,3 +237,4 @@ ERN의 승인을 얻는 방법은, 다음 글을 참고하는 것이 좋습니
[app-sandboxing]: https://developer.apple.com/app-sandboxing/
[ern-tutorial]: https://carouselapps.com/2015/12/15/legally-submit-app-apples-app-store-uses-encryption-obtain-ern/
[temporary-exception]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/AppSandboxTemporaryExceptionEntitlements.html
+[user-selected]: https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html#//apple_ref/doc/uid/TP40011195-CH4-SW6]
diff --git a/docs-translations/ko-KR/tutorial/using-native-node-modules.md b/docs-translations/ko-KR/tutorial/using-native-node-modules.md
index 156319aaec4b..fb503679c04b 100644
--- a/docs-translations/ko-KR/tutorial/using-native-node-modules.md
+++ b/docs-translations/ko-KR/tutorial/using-native-node-modules.md
@@ -1,69 +1,91 @@
-# 네이티브 node 모듈 사용하기
+# 네이티브 Node 모듈 사용하기
-Electron에선 node.js 네이티브 모듈이 지원됩니다. 하지만 Electron은 공식 node.js의
-V8 엔진과는 다른 V8 버전을 사용합니다. 이러한 이유로 네이티브 모듈을 사용하기 위해선
-Electron의 V8 버전에 맞춰 네이티브 모듈을 다시 빌드하고 헤더를 변경해야 합니다.
-
-## 네이티브 node 모듈 호환성
-
-네이티브 모듈은 node.js가 새로운 V8 버전을 사용함으로 인해 작동하지 않을 수 있습니다.
-사용하는 네이티브 모듈이 Electron에 맞춰 작동할 수 있도록 하려면 Electron에서 사용하는
-node.js의 버전을 확인할 필요가 있습니다. Electron에서 사용하는 node 버전은
-[releases](https://github.com/electron/electron/releases)에서 확인할 수 있으며
-`process.version`을 출력하여 버전을 확인할 수도 있습니다.
-([시작하기](./quick-start.md)의
-예시를 참고하세요)
-
-혹시 직접 만든 네이티브 모듈이 있다면 [NAN](https://github.com/nodejs/nan/) 모듈을
-사용하는 것을 고려해보는 것이 좋습니다. 이 모듈은 다중 버전의 node.js를 지원하기 쉽게
-만들어 줍니다. 이를 통해 오래된 모듈을 새 버전의 node.js에 맞게 포팅 할 수 있습니다.
-Electron도 이 모듈을 통해 포팅된 네이티브 모듈을 사용할 수 있습니다.
+Electron에선 네이티브 Node 모듈을 지원합니다. 하지만 Electron이 시스템에 설치된
+Node의 버전과 전혀 다른 V8 버전을 사용하고 있을 가능성이 높은 관계로, 네이티브 모듈을
+빌드할 때 Electron의 헤더를 수동으로 지정해 주어야 합니다.
## 네이티브 모듈을 설치하는 방법
-네이티브 모듈을 설치하는 방법은 세 가지 종류가 있습니다.
+네이티브 모듈을 설치하는 방법에는 세 가지 방법이 있습니다:
-### 쉬운 방법
+### `npm` 사용하기
-[`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를
-사용하면 빠르고 간단하게 네이티브 모듈을 다시 빌드할 수 있습니다.
+몇 가지 환경 변수를 설치하는 것으로, 직접적으로 `npm`을 모듈을 설치하는데 사용할 수
+있습니다.
-다음 예시는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브
-모듈을 빌드합니다:
+다음 예시는 Electron에 대한 모든 종속성을 설치하는 예시입니다:
-```sh
+```bash
+# Electron의 버전.
+export npm_config_target=1.2.3
+# Electron의 아키텍쳐, ia32 또는 x64가 될 수 있습니다.
+export npm_config_arch=x64
+# Electron에 대한 헤더 다운로드 링크.
+export npm_config_disturl=https://atom.io/download/atom-shell
+# node-pre-gyp에 Electron을 빌드한다는 것을 알려줍니다.
+export npm_config_runtime=electron
+# node-pre-gyp에 소스 코드로부터 모듈을 빌드한다는 것을 알려줍니다.
+export npm_config_build_from_source=true
+# 모든 종속성을 설치하고 캐시를 ~/.electron-gyp에 저장합니다.
+HOME=~/.electron-gyp npm install
+```
+
+### 모듈을 설치하고 Electron을 위해 다시 빌드하기
+
+다른 Node 프로젝트와 같이 모듈을 설치하는 것을 선택할 수도 있습니다. 그리고
+[`electron-rebuild`][electron-rebuild] 패키지와 함께 Electron에 대해 모듈을 다시
+빌드할 수 있습니다. 이 모듈은 Electron의 버전을 가져올 수 있고 헤더를 다운로드 하거나
+네이티브 모듈을 빌드하는 등의 작업을 자동으로 실행할 수 있습니다.
+
+다음 예시는 `electron-rebuild`을 설치하고 자동으로 모듈을 빌드하는 예시입니다:
+
+```bash
npm install --save-dev electron-rebuild
-# 필요한 네이티브 모듈을 `npm install`로 설치한 후 다음 명령을 실행하세요:
+# "npm install"을 실행할 때마다 다음 명령을 실행하세요:
./node_modules/.bin/electron-rebuild
# Windows에서 문제가 발생하면 다음 명령을 대신 실행하세요:
.\node_modules\.bin\electron-rebuild.cmd
```
-### `npm`을 이용한 방법
+**역자주:** `npm script`의 `postinstall`을 사용하면 이 작업을 자동화 할 수 있습니다.
-또한 `npm`을 통해 설치할 수도 있습니다.
-환경변수가 필요한 것을 제외하고 일반 Node 모듈을 설치하는 방법과 완전히 똑같습니다:
+### Electron을 위해 직접적으로 빌드하기
+
+현재 본인이 네이티브 모듈을 개발하고 있는 개발자이고 Electron에 대해 실험하고 싶다면,
+직접적으로 모듈을 Electron에 대해 다시 빌드하고 싶을 것입니다. `node-gyp`를 통해
+직접적으로 Electron에 대해 빌드할 수 있습니다.
```bash
-export npm_config_disturl=https://atom.io/download/atom-shell
-export npm_config_target=0.33.1
-export npm_config_arch=x64
-export npm_config_runtime=electron
-HOME=~/.electron-gyp npm install module-name
-```
-
-### `node-gyp`를 이용한 방법
-
-Node 모듈을 `node-gyp`를 사용하여 Electron을 타겟으로 빌드할 때는 `node-gyp`에 헤더
-다운로드 주소와 버전을 알려주어야 합니다:
-
-```bash
-$ cd /path-to-module/
-$ HOME=~/.electron-gyp node-gyp rebuild --target=0.29.1 --arch=x64 --dist-url=https://atom.io/download/atom-shell
+cd /path-to-module/
+HOME=~/.electron-gyp node-gyp rebuild --target=1.2.3 --arch=x64 --dist-url=https://atom.io/download/atom-shell
```
`HOME=~/.electron-gyp`은 변경할 헤더의 위치를 찾습니다. `--target=0.29.1`은
Electron의 버전입니다. `--dist-url=...`은 헤더를 다운로드 하는 주소입니다.
`--arch=x64`는 64비트 시스템을 타겟으로 빌드 한다는 것을 `node-gyp`에게 알려줍니다.
+
+## 문제 해결
+
+네이티브 모듈을 설치했는데 잘 작동하지 않았다면, 다음 몇 가지를 확인해봐야 합니다:
+
+* 모듈의 아키텍쳐가 Electron의 아키텍쳐와 일치합니다. (ia32 또는 x64)
+* Electron을 업그레이드한 후, 보통은 모듈을 다시 빌드해야 합니다.
+* 문제가 의심된다면, 먼저 `electron-rebuild`를 실행하세요.
+
+## 모듈이 `node-pre-gyp`에 의존합니다
+
+[`node-pre-gyp` 툴][node-pre-gyp]은 미리 빌드된 바이너리와 함께 네이티브 Node 모듈을
+배치하는 방법을 제공하며 수 많은 유명한 모듈들이 이를 사용합니다.
+
+보통 이 모듈은 Electron과 함께 잘 작동하지만, Electron이 Node보다 새로운 V8 버전을
+사용할 때, 만약 ABI가 변경되었다면, 때때로 안 좋은 일이 일어납니다. 그래서 일반적으론
+언제나 네이티브 모듈의 소스 코드를 가져와서 빌드하는 것을 권장합니다.
+
+`npm`을 통한 방법을 따르고 있다면, 기본적으로 이 소스를 받아와서 빌드합니다. 만약
+그렇지 않다면, `npm`에 `--build-from-source`를 전달해 주어야 합니다. 아니면
+`npm_config_build_from_source`를 환경 변수에 설정하는 방법도 있습니다.
+
+[electron-rebuild]: https://github.com/paulcbetts/electron-rebuild
+[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp
diff --git a/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md b/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md
index e813491435b6..bfe16a85cf42 100644
--- a/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md
+++ b/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md
@@ -13,18 +13,30 @@ Electron은 Pepper 플래시 플러그인을 지원합니다. Electron에서 Pep
## Electron 스위치 추가
플러그인을 사용하려면 Electron 커맨드 라인에 `--ppapi-flash-path` 와
-`ppapi-flash-version` 플래그를 `app`의 `ready` 이벤트가 발생하기 전에 추가해야
+`--ppapi-flash-version` 플래그를 `app`의 `ready` 이벤트가 발생하기 전에 추가해야
합니다. 그리고 `browser-window`에 `plugins` 옵션을 활성화해야 합니다.
+예를 들면:
+
```javascript
-// 플래시 플러그인의 위치를 설정합니다.
-// Windows의 경우, /path/to/pepflashplayer.dll 또는 main.js에 존재하는 경우 pepflashplayer.dll
-// OS X의 경우, /path/to/PepperFlashPlayer.plugin
-// Linux의 경우, /path/to/libpepflashplayer.so
-app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so');
+// 플래시 플러그인의 위치를 설정합니다. main.js와 위치가 같다고 가정할 때:
+let pluginName
+switch (process.platform) {
+ case 'win32':
+ pluginName = 'pepflashplayer.dll'
+ break
+ case 'darwin':
+ pluginName = 'PepperFlashPlayer.plugin'
+ break
+ case 'linux':
+ pluginName = 'libpepflashplayer.so'
+ break
+}
+
+app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))
// 선택적인으로 플래시 플레이어의 버전을 설정합니다. 예시로는, v17.0.0.169
-app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169');
+app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')
app.on('ready', () => {
win = new BrowserWindow({
@@ -33,14 +45,15 @@ app.on('ready', () => {
webPreferences: {
plugins: true
}
- });
- win.loadURL(`file://${__dirname}/index.html`);
+ })
+ win.loadURL(`file://${__dirname}/index.html`)
// 이외의 코드
});
```
-`app.getPath('pepperFlashSystemPlugin')` 형태로 호출하면 시스템에 설치된 Pepper
-Flash 플러그인의 경로를 가져올 수도 있습니다.
+직접 플러그인을 삽입하는 대신 시스템의 Pepper Flash 플러그인을 사용할 수도 있습니다.
+시스템상의 플러그인의 경로는 `app.getPath('pepperFlashSystemPlugin')`로 불러올 수
+있습니다.
## `` 태그를 이용하여 플러그인을 활성화
@@ -59,3 +72,6 @@ Flash 플러그인의 경로를 가져올 수도 있습니다.
Pepper 플래시 플러그인의 구조는 Electron과 일치해야 합니다. Windows에서 자주
발생하는 문제는 32비트 버전의 플래시 플레이어를 64비트 버전의 Electron에서 사용하는
것입니다.
+
+Windows에선 `--ppapi-flash-path`로 전달되는 경로의 분리자로 `\`를 사용해야 합니다.
+POSIX-스타일 경로는 작동하지 않을 것입니다.