docs: add korean translations

README.ko-KR.md

@@ -34,9 +34,9 @@
 - ⚡️ Pinia 스토어를 활용한 글로벌 상태 관리
 - ⚡️ GitHub 커뮤니티와 공식 문서를 통한 프로젝트 기술지원
 
-## [문서 (설치 및 시작하기)](https://vutron.cdget.com/installation-and-build/getting-started)
+## [문서 (설치 및 시작하기)](https://vutron.cdget.com/ko/installation-and-build/getting-started)
 
-자세한 설치 방법이나 기본적인 템플릿 사용 방법에 대한 전체 문서를 참고하려면 다음 문서 페이지를 방문하세요: https://vutron.cdget.com/installation-and-build/getting-started
+자세한 설치 방법이나 기본적인 템플릿 사용 방법에 대한 전체 문서를 참고하려면 다음 문서 페이지를 방문하세요: https://vutron.cdget.com/ko/installation-and-build/getting-started
 
 ## 기여
 

docs/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "vitepress": "^1.3.2",
+    "vitepress-i18n": "^1.0.1",
     "vitepress-sidebar": "^1.24.1",
     "vue": "^3.4.36"
   }

docs/src/.vitepress/config.mts

@@ -1,37 +1,95 @@
 import { generateSidebar } from 'vitepress-sidebar'
-import { name, description, repository } from '../../../package.json'
+import { name, repository, homepage } from '../../../package.json'
 import { defineConfig } from 'vitepress'
+import { generateI18nLocale, generateI18nSearch } from 'vitepress-i18n'
 
 const capitalizeFirst = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+const defaultLocale: string = 'en'
+const editLinkPattern = 'https://github.com/jooy2/vutron/edit/master/docs/:path'
+
+const defineSupportLocales = [
+  { label: defaultLocale, translateLocale: defaultLocale },
+  { label: 'ko', translateLocale: 'ko' }
+]
 
 export default defineConfig({
   title: capitalizeFirst(name),
-  description,
+  lastUpdated: true,
   outDir: '../dist',
   head: [
     ['link', { rel: 'icon', href: '/logo.png' }],
     ['link', { rel: 'shortcut icon', href: '/favicon.ico' }]
   ],
   cleanUrls: true,
+  metaChunk: true,
+  rewrites: {
+    'en/:rest*': ':rest*'
+  },
+  sitemap: {
+    hostname: homepage
+  },
   themeConfig: {
     logo: { src: '/icon.png', width: 24, height: 24 },
-    search: {
+    search: generateI18nSearch({
+      defineLocales: defineSupportLocales,
+      rootLocale: defaultLocale,
       provider: 'local'
-    },
-    sidebar: generateSidebar({
-      documentRootPath: 'src',
-      collapsed: false,
-      useTitleFromFileHeading: true,
-      useTitleFromFrontmatter: true,
-      sortMenusByFrontmatterOrder: true,
-      hyphenToSpace: true,
-      capitalizeEachWords: true,
-      manualSortFileNameByPriority: [
-        'installation-and-build',
-        'project-structures',
-        'electron-how-to'
-      ]
     }),
+    sidebar: generateSidebar([
+      ...[defaultLocale, 'ko'].map((lang) => {
+        return {
+          collapsed: false,
+          useTitleFromFileHeading: true,
+          useTitleFromFrontmatter: true,
+          sortMenusByFrontmatterOrder: true,
+          hyphenToSpace: true,
+          capitalizeEachWords: true,
+          manualSortFileNameByPriority: [
+            'installation-and-build',
+            'project-structures',
+            'electron-how-to'
+          ],
+          documentRootPath: `/src/${lang}`,
+          resolvePath: defaultLocale === lang ? '/' : `/${lang}/`,
+          ...(defaultLocale === lang ? {} : { basePath: `/${lang}/` })
+        }
+      })
+    ]),
     socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }]
-  }
+  },
+  locales: generateI18nLocale({
+    defineLocales: defineSupportLocales,
+    rootLocale: defaultLocale,
+    editLinkPattern: editLinkPattern,
+    label: {
+      en: 'English',
+      ko: '한국어'
+    },
+    lang: {
+      en: 'en-US',
+      ko: 'ko-KR'
+    },
+    description: {
+      en: 'Vutron is a preconfigured template for developing Electron cross-platform desktop apps. It uses Vue 3 and allows you to build a fast development environment with little effort.',
+      ko: 'Vutron은 Electron 크로스 플랫폼 데스크톱 앱 개발을 위해 미리 구성된 템플릿입니다. Vue 3을 사용하며 적은 노력으로 빠른 개발 환경을 구축할 수 있습니다.'
+    },
+    themeConfig: {
+      en: {
+        nav: [
+          {
+            text: 'Getting Started',
+            link: '/installation-and-build/getting-started'
+          }
+        ]
+      },
+      ko: {
+        nav: [
+          {
+            text: '시작하기',
+            link: '/ko/installation-and-build/getting-started'
+          }
+        ]
+      }
+    }
+  })
 })

docs/src/ko/electron-how-to/main-and-renderer-process.md

@@ -0,0 +1,25 @@
+# 메인과 렌더러 프로세스
+
+**Vutron** 애플리케이션은 메인(Main) 프로세스와 렌더러(Renderer) 프로세스로 코드가 나뉩니다.
+
+**Main**은 `src/main`의 코드로 주로 Electron이 처리하는 프로세스 코드입니다. **렌더러**는 `src/renderer`의 코드로 주로 Vue와 같은 프론트엔드 렌더링 프로세스를 위한 코드입니다.
+
+일반적으로 **Node.js** 스크립트는 렌더러 프로세스에서 실행할 수 없습니다. 예를 들어 Node.js에서 사용하는 API를 포함하는 모듈이나 `path` 또는 `net`, `os` 또는 `crypto`와 같은 **Node.js**의 네이티브 모듈이 있습니다.
+
+사전 로드 스크립트는 렌더러가 로드되기 전에 실행됩니다. 이는 보안상의 이유로 렌더러 영역에서 Node.js 스크립트의 실행을 분리하고 격리하기 위해 메인 프로세스에 대한 브릿지를 생성합니다.
+
+안전한 스크립트 실행을 위해 메인 프로세스에서 노드 스크립트를 실행하고 렌더러는 메시징을 통해 실행 결과를 수신하는 것이 좋습니다. 이는 **IPC 통신**을 통해 구현할 수 있습니다.
+
+이에 대한 자세한 내용은 다음 문서를 참조하세요: https://www.electronjs.org/docs/latest/tutorial/ipc
+
+### 렌더러에서 Node.js를 실행하는 방법은 무엇인가요?
+
+보안 문제를 건너뛰고 렌더러에서 Node.js 스크립트를 사용하려면 `vite.config.ts` 파일에서 `nodeIntegration`을 `true`로 설정해야 합니다.
+
+```javascript
+rendererPlugin({
+  nodeIntegration: true
+})
+```
+
+이에 대한 자세한 내용은 다음 문서를 참조하세요: https://github.com/electron-vite/vite-plugin-electron-renderer

docs/src/ko/electron-how-to/preload-script.md

@@ -0,0 +1,24 @@
+# 프리로드 스크립트
+
+Electron.js의 프리로드 스크립트는 메인 프로세스와 렌더러 프로세스 간의 통신을 위해 설계된 보안 영역입니다. 일반적으로 **[IPC 통신](https://www.electronjs.org/docs/latest/tutorial/ipc)**에 사용됩니다.
+
+자세한 내용은 다음 문서를 참고하세요: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
+
+최신 버전의 Electron과의 호환성 및 보안을 위해 이전 버전의 `electron/remote` 모듈은 사용하지 않는 것이 좋습니다. 시스템 이벤트나 노드 스크립트를 활용하려면 렌더러가 아닌 메인 프로세스에서 사용하는 것이 좋습니다.
+
+Vutron의 프리로드 스크립트는 `src/preload` 폴더에 있습니다. 새 IPC 통신 채널을 생성하려면 다음 변수에 채널 이름을 추가하여 통신을 허용하도록 화이트리스트에 추가합니다.
+
+- `mainAvailChannels`: 메인에서 렌더러로 이벤트를 전송합니다. (`window.mainApi.send('channelName')`)
+- `rendererAvailChannels`: 렌더러에서 메인으로 이벤트를 전송합니다. (`mainWindow.webContents.send('channelName')`)
+
+렌더러에서 메인으로 이벤트를 전송할 때는 `ipcRenderer.send` 대신 `window.mainApi` 객체에 액세스합니다. `mainApi`는 Vutron 템플릿에서 설정한 이름이며 변경할 수 있습니다.
+
+다음은 mainApi에서 지원되는 함수입니다:
+
+- `send`: 메인으로 이벤트를 보냅니다.
+- `on`: 메인에서 보낸 이벤트를 수신할 리스너입니다.
+- `once`: 메인에서 보낸 이벤트를 수신할 리스너입니다. (하나의 호출만 처리)
+- `off`: 이벤트 리스너를 제거합니다.
+- `invoke`: 메인에 이벤트를 보내고 비동기적으로 데이터를 수신할 수 있는 함수입니다.
+
+이를 변경하고 수정하려면 `src/preload/index.ts`에서 `exposeInMainWorld`를 수정해야 합니다.

docs/src/ko/index.md

@@ -0,0 +1,32 @@
+---
+layout: home
+
+title: Vutron
+titleTemplate: Vite + Vue 3 + Electron용 빠른 시작 템플릿
+
+hero:
+  name: Vutron
+  text: Vite + Vue 3 + Electron용 빠른 시작 템플릿
+  tagline: <strong>Vutron</strong>은 Electron 크로스 플랫폼 데스크톱 앱 개발을 위해 미리 구성된 템플릿입니다. Vue 3을 사용하며 적은 노력으로 빠른 개발 환경을 구축할 수 있습니다.
+  actions:
+    - theme: brand
+      text: 시작하기
+      link: /ko/installation-and-build/getting-started
+    - theme: alt
+      text: GitHub
+      link: https://github.com/jooy2/vutron
+  image:
+    src: /icon.png
+    alt: Vue
+
+features:
+  - icon: <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.03628 7.87818C4.75336 5.83955 6.15592 3.95466 8.16899 3.66815L33.6838 0.0367403C35.6969 -0.24977 37.5581 1.1706 37.841 3.20923L42.9637 40.1218C43.2466 42.1604 41.8441 44.0453 39.831 44.3319L14.3162 47.9633C12.3031 48.2498 10.4419 46.8294 10.159 44.7908L5.03628 7.87818Z" fill="url(#paint0_linear_1287_1214)"/><path d="M6.85877 7.6188C6.71731 6.59948 7.41859 5.65703 8.42512 5.51378L33.9399 1.88237C34.9465 1.73911 35.8771 2.4493 36.0186 3.46861L41.1412 40.3812C41.2827 41.4005 40.5814 42.343 39.5749 42.4862L14.0601 46.1176C13.0535 46.2609 12.1229 45.5507 11.9814 44.5314L6.85877 7.6188Z" fill="white"/><path d="M33.1857 14.9195L25.8505 34.1576C25.6991 34.5547 25.1763 34.63 24.9177 34.2919L12.3343 17.8339C12.0526 17.4655 12.3217 16.9339 12.7806 16.9524L22.9053 17.3607C22.9698 17.3633 23.0344 17.3541 23.0956 17.3337L32.5088 14.1992C32.9431 14.0546 33.3503 14.4878 33.1857 14.9195Z" fill="url(#paint1_linear_1287_1214)"/><path d="M27.0251 12.5756L19.9352 15.0427C19.8187 15.0832 19.7444 15.1986 19.7546 15.3231L20.3916 23.063C20.4066 23.2453 20.5904 23.3628 20.7588 23.2977L22.7226 22.5392C22.9064 22.4682 23.1021 22.6138 23.0905 22.8128L22.9102 25.8903C22.8982 26.0974 23.1093 26.2436 23.295 26.1567L24.4948 25.5953C24.6808 25.5084 24.892 25.6549 24.8795 25.8624L24.5855 30.6979C24.5671 31.0004 24.9759 31.1067 25.1013 30.8321L25.185 30.6487L29.4298 17.8014C29.5008 17.5863 29.2968 17.3809 29.0847 17.454L27.0519 18.1547C26.8609 18.2205 26.6675 18.0586 26.6954 17.8561L27.3823 12.8739C27.4103 12.6712 27.2163 12.5091 27.0251 12.5756Z" fill="url(#paint2_linear_1287_1214)"/><defs><linearGradient id="paint0_linear_1287_1214" x1="6.48163" y1="1.9759" x2="39.05" y2="48.2064" gradientUnits="userSpaceOnUse"><stop stop-color="#49C7FF"/><stop offset="1" stop-color="#BD36FF"/></linearGradient><linearGradient id="paint1_linear_1287_1214" x1="11.8848" y1="16.4266" x2="26.7246" y2="31.4177" gradientUnits="userSpaceOnUse"><stop stop-color="#41D1FF"/><stop offset="1" stop-color="#BD34FE"/></linearGradient><linearGradient id="paint2_linear_1287_1214" x1="21.8138" y1="13.7046" x2="26.2464" y2="28.8069" gradientUnits="userSpaceOnUse"><stop stop-color="#FFEA83"/><stop offset="0.0833333" stop-color="#FFDD35"/><stop offset="1" stop-color="#FFA800"/></linearGradient></defs></svg>
+    title: 강력한 웹 애플리케이션 개발 템플릿
+    details: Vutron은 크로스 플랫폼, 다국어, 레이아웃 및 테마, 스타일 프레임워크를 지원합니다.
+  - icon: <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 80 80" width="160px" height="160px"><path fill="#424e5c" d="M4.5 6.5H75.5V73.5H4.5z"/><path fill="#afc5d8" d="M75,7v66H5V7H75 M76,6H4v68h72V6L76,6z"/><path fill="#afc5d8" d="M4 6H76V18H4z"/><path fill="#bae0bd" d="M25.6 43H54.400000000000006V45H25.6z" transform="rotate(-69.666 39.998 43.999)"/><path fill="#bae0bd" d="M27.9 54.4L16 44 27.9 33.6 29.2 35.1 19 44 29.2 52.9zM52.2 54.5L50.9 53 61 44.1 50.9 35.1 52.2 33.6 64 44.1z"/></svg>
+    title: 핫 리로드를 통한 빠른 개발
+    details: 개발자를 위한 최대 기능 지원으로 초기 프로젝트 설정 시간을 단축하세요.
+  - icon: <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="64px" height="64px"><circle cx="16" cy="17" r="5" fill="#ed0049"/><path fill="#ed0049" d="M23,31H9v0c0-3.866,3.134-7,7-7h0C19.866,24,23,27.134,23,31L23,31z"/><path fill="#0f518c" d="M19,4c0-1.657-1.343-3-3-3s-3,1.343-3,3c0,0.885,0.391,1.672,1,2.222V10h4V6.222 C18.609,5.672,19,4.885,19,4z"/><path fill="#0f518c" d="M7.061,8.318c-1.171-1.171-3.071-1.171-4.243,0s-1.171,3.071,0,4.243 c0.626,0.626,1.459,0.906,2.278,0.864l2.672,2.672l2.828-2.828l-2.672-2.672C7.967,9.777,7.686,8.944,7.061,8.318z"/><path fill="#0f518c" d="M24.879,8.318c1.171-1.171,3.071-1.171,4.243,0s1.171,3.071,0,4.243 c-0.626,0.626-1.459,0.906-2.278,0.864l-2.672,2.672l-2.828-2.828l2.672-2.672C23.972,9.777,24.253,8.944,24.879,8.318z"/><path fill="#0f518c" d="M24.879,27.218c1.171,1.171,3.071,1.171,4.243,0c1.171-1.171,1.171-3.071,0-4.243 c-0.626-0.626-1.459-0.906-2.278-0.864l-2.672-2.672l-2.828,2.828l2.672,2.672C23.972,25.759,24.253,26.592,24.879,27.218z"/><g><path fill="#0f518c" d="M7.061,27.218c-1.171,1.171-3.071,1.171-4.243,0c-1.171-1.171-1.171-3.071,0-4.243 c0.626-0.626,1.459-0.906,2.278-0.864l2.672-2.672l2.828,2.828L7.925,24.94C7.967,25.759,7.686,26.592,7.061,27.218z"/></g></svg>
+    title: 안정적인 유지 관리 지원
+    details: 실제 사용 사례도 많고 기술 지원도 신속하게 제공합니다.
+---

docs/src/ko/installation-and-build/automated-testing.md

@@ -0,0 +1,23 @@
+---
+order: 4
+---
+
+# 자동화 테스트
+
+**Vutron**에는 자동화된 테스트가 포함되어 있습니다. 테스트 프레임워크는 Microsoft의 **[Playwright](https://playwright.dev)** 모듈을 사용합니다.
+
+**Playwright**는 웹 애플리케이션 테스트에 최적화되어 있으며 **Electron** 프레임워크를 완벽하게 지원합니다. 설치가 간단하고, 별도의 설정 없이 바로 테스트를 시작할 수 있으며, 크로스 플랫폼을 지원합니다. 여기에서 **Playwright**에 대해 자세히 알아보세요: https://github.com/microsoft/playwright
+
+이 템플릿에는 템플릿 메인 화면에 대한 매우 간단한 실행 및 동작 테스트만 구현되어 있습니다. 고급 테스트는 애플리케이션의 범위에 따라 달라집니다.
+
+현재 테스트 사양 파일은 `tests` 디렉터리에, 테스트 결과 파일은 `tests/results`에 있습니다. (기본 제공 테스트 사양 파일은 별도의 결과 파일을 생성하지 않습니다.)
+
+Playwright 설정은 프로젝트 루트에 있는 `playwright.config.ts`이며, 이에 대한 자세한 내용은 다음 문서를 참조하세요: https://playwright.dev/docs/test-configuration
+
+모든 구성이 완료되면 다음 명령어로 테스트를 실행할 수 있습니다.
+
+```shell
+$ npm run test
+```
+
+테스트를 실행하기 전에 빌드 디렉터리(`dist`)를 비우고 테스트용 패키지를 컴파일합니다.

docs/src/ko/installation-and-build/build-configuration.md

@@ -0,0 +1,84 @@
+---
+order: 2
+---
+
+# 빌드 구성
+
+모듈 설치가 완료되면 아래 명령어를 사용하여 플랫폼 패키지를 간단하게 빌드할 수 있습니다.
+
+```shell
+# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:all
+```
+
+빌드된 패키지는 `release/{version}` 위치에서 찾을 수 있습니다.
+
+자세한 내용은 다음 문서를 참조하세요: https://webpack.electron.build/dependency-management#installing-native-node-modules
+
+## 멀티플랫폼 빌드를 하려면 어떻게 해야 하나요?
+
+각 OS에 대한 패키지를 만들려면 동일한 OS에서 빌드해야 합니다. 예를 들어 macOS용 패키지는 macOS 컴퓨터에서 빌드해야 합니다.
+
+하지만 하나의 OS에서 Windows, macOS, Linux용 패키지를 한 번에 빌드할 수 있습니다. 하지만 이를 위해서는 약간의 준비가 필요할 수 있습니다.
+
+하나의 플랫폼에서 여러 플랫폼을 동시에 구축하려는 경우 **macOS**를 권장합니다. 몇 가지 간단한 설정만으로 구성할 수 있기 때문입니다.
+
+다음 명령어를 사용하여 한 번에 여러 플랫폼 빌드를 수행할 수 있습니다. 또는 위의 개별 빌드 명령어를 통해 원하는 OS에 대해서만 빌드를 수행할 수도 있습니다.
+
+```shell
+$ npm run build:all
+```
+
+Linux 빌드에는 `multipass` 구성이 필요할 수 있습니다. 다음 링크를 통해 `multipass`에 대해 자세히 알아보세요: https://multipass.run
+
+멀티플랫폼 빌드에 대해 자세히 알아보려면 다음 문서를 참조하세요: https://electron.build/multi-platform-build
+
+## 개발 파일을 제외하여 번들 크기 줄이기
+
+빌드 시점에 필요하지 않은 파일은 `buildAssets/builder/config.ts`의 파일 속성에 파일 패턴을 추가하여 제외할 수 있습니다. 이렇게 하면 번들 용량을 절약할 수 있습니다.
+
+아래는 불필요한 `node_modules` 파일 패턴으로 번들을 추가로 절약할 수 있는 예시입니다. 프로젝트에 따라 아래 규칙을 사용하면 문제가 발생할 수 있으므로 사용 전에 검토하시기 바랍니다.
+
+```json
+[
+  "!**/.*",
+  "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+  "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+  "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+  "!**/node_modules/**/node-v*-x64{,/**/*}",
+  "!**/node_modules/bluebird/js/browser{,/**/*}",
+  "!**/node_modules/bluebird/js/browser{,/**/*}",
+  "!**/node_modules/source-map/dist{,/**/*}",
+  "!**/node_modules/lodash/fp{,/**/*}",
+  "!**/node_modules/async/!(dist|package.json)",
+  "!**/node_modules/async/internal{,/**/*}",
+  "!**/node_modules/ajv/dist{,/**/*}",
+  "!**/node_modules/ajv/scripts{,/**/*}",
+  "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+  "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+  "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+  "!**/node_modules/source-map-support/browser-source-map-support.js",
+  "!**/node_modules/json-schema/!(package.json|lib)"
+]
+```
+
+## 네이티브 노드 모듈을 사용하는 프로젝트의 빌드 설정
+
+**네이티브 노드 모듈**을 사용하는 프로젝트의 경우, `package.json`에 다음 스크립트를 추가하세요: 종속성을 설치할 때 `electron-builder`가 리빌드가 필요한 모듈을 처리합니다.
+
+```json
+{
+  "scripts": {
+    "postinstall": "electron-builder install-app-deps"
+  }
+}
+```