docs: add korean translations

2024-09-05 09:40:35 +09:00
1 parent 43d8aac5cb
commit b64b66a6fe
@@ -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
 ## 기여
@@ -10,6 +10,7 @@
      "license": "MIT",
      "dependencies": {
        "vitepress": "^1.3.2",
        "vitepress-i18n": "^1.0.1",
        "vitepress-sidebar": "^1.24.1",
        "vue": "^3.4.36"
      },
@@ -1675,6 +1676,14 @@
        }
      }
    },
    "node_modules/vitepress-i18n": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/vitepress-i18n/-/vitepress-i18n-1.0.1.tgz",
      "integrity": "sha512-b7NbvTaLRIkYUkbDQPOzP4bwtUDIuZCRykhhyWSjcbNmzb/uoUoLFb0bpeFbD4Gkv7jZ5ELnYdtrMoBaHq7IuQ==",
      "engines": {
        "node": ">=18.0.0"
      }
    },
    "node_modules/vitepress-sidebar": {
      "version": "1.24.1",
      "resolved": "https://registry.npmjs.org/vitepress-sidebar/-/vitepress-sidebar-1.24.1.tgz",
@@ -14,6 +14,7 @@
  },
  "dependencies": {
    "vitepress": "^1.3.2",
    "vitepress-i18n": "^1.0.1",
    "vitepress-sidebar": "^1.24.1",
    "vue": "^3.4.36"
  }
@@ -1,25 +1,43 @@
 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({
+    sidebar: generateSidebar([
-      documentRootPath: 'src',
+      ...[defaultLocale, 'ko'].map((lang) => {
        return {
          collapsed: false,
          useTitleFromFileHeading: true,
          useTitleFromFrontmatter: true,
@@ -30,8 +48,48 @@ export default defineConfig({
            'installation-and-build',
            'project-structures',
            'electron-how-to'
-      ]
+          ],
-    }),
+          documentRootPath: `/src/${lang}`,
-    socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }]
+          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'
          }
        ]
      }
    }
  })
 })
@@ -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
@@ -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`를 수정해야 합니다.
@@ -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: 실제 사용 사례도 많고 기술 지원도 신속하게 제공합니다.
 ---
@@ -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`)를 비우고 테스트용 패키지를 컴파일합니다.
@@ -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"
  }
 }
 ```
@@ -0,0 +1,58 @@
 ---
 order: 1
 ---
 # 시작하기
 ## 프로젝트 복제하기
 ### 방법 1: `npm init` (권장)
 npm 명령만으로 리포지토리를 쉽게 복제할 수 있습니다.
 ```shell
 $ npm init vutron
 ```
 위의 방법은 프로젝트에 불필요한 문서와 '.github' 관련 파일을 만들지 않습니다.
 ### 방법 2: 템플릿 사용
 **[이 템플릿 사용](https://github.com/jooy2/vutron/generate)** 버튼을 클릭하면 나만의 프로젝트를 즉시 만들 수 있습니다.
 이 방법을 사용하면 GitHub에 리포지토리가 즉시 생성되지만 프로젝트를 로컬에 복제해야 사용할 수 있습니다.
 ### 방법 3: 리포지토리 복제
 아래 명령어를 사용하여 이 리포지토리를 복제합니다. 이 방법은 Vutron 리포지토리에 직접 기여하는 경우에 적합합니다.
 ```shell
 $ git clone https://github.com/jooy2/vutron <PROJECT_NAME>
 ```
 ## 설치하기
 프로젝트를 복제한 후 터미널에서 다음 명령을 실행합니다:
 ```shell
 # via npm
 $ npm i
 # via yarn (https://yarnpkg.com)
 $ yarn install
 # via pnpm (https://pnpm.io)
 $ pnpm i
 ```
 ## 개발 환경에서 실행
 개발 환경의 애플리케이션은 **[Vite](https://vitejs.dev)** 환경에서 실행됩니다.
 ```shell
 $ npm run dev
 ```
 명령줄 명령을 실행한 후에도 애플리케이션이 나타나지 않는다면 다른 앱에서 기본 포트를 사용하고 있는지 확인해야 할 수 있습니다.
 Vite는 기본적으로 포트 `5173`을 사용합니다.
@@ -0,0 +1,36 @@
 ---
 order: 5
 ---
 # 로컬 문서 관리
 `Vutron`의 문서는 `VitePress` 뷰어를 통해 로컬 환경에서 볼 수 있습니다.
 이 함수는 전체 프로젝트가 복제된 경우에만 작동합니다. `npm init vutron`으로 프로젝트를 생성한 경우 `docs` 폴더는 포함되지 않습니다.
 ## Installation
 아래 지침의 모든 작업은 `docs` 폴더에서 수행해야 합니다.
 ```shell
 $ cd docs
 ```
 다음 명령을 사용하여 관련 패키지를 설치합니다:
 ```shell
 # via npm
 $ npm i
 # via yarn (https://yarnpkg.com)
 $ yarn install
 # via pnpm (https://pnpm.io)
 $ pnpm i
 ```
 아래 명령을 통해 문서가 호스팅되는 로컬 서버를 실행할 수 있습니다.
 ```shell
 $ npm run dev
 ```
@@ -0,0 +1,39 @@
 ---
 title: NPM Scripts
 order: 3
 ---
 # Npm 스크립트
 > $ npm run %SCRIPT_NAME%
 ## 일반
 | Script Name | Description |
 | --- | --- |
 | `dev` | Start Electron as a development environment |
 | `dev:debug` | Start Electron as a development environment (with vite debug) |
 | `dev:debug:force` | Start Electron as a development environment (with vite debug + clean vite cache) |
 | `build:pre` | Commands commonly run at build time. This script does not need to be run separately. |
 | `build` | Build the package for the current operating system. |
 | `build:all` | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
 | `build:dir` | `electron-builder` directory build |
 | `build:mac` | Build preconfigured packages for macOS |
 | `build:linux` | Build preconfigured packages for Linux |
 | `build:win` | Build preconfigured packages for Windows |
 | `lint` | ESLint code inspection. It does not modify the code. |
 | `lint:fix` | ESLint code inspection. Use auto-fix to fix your code. |
 | `format` | Prettier code inspection. It does not modify the code. |
 | `format:fix` | Prettier code inspection. Use auto-fix to fix your code. |
 | `test` | Build a package for testing and run tests against the test specification file. |
 | `test:linux` | Build a package for testing and run tests against the test specification file. (for linux ci only) |
 ## 문서용
 프로젝트 문서에 기여하는 경우에만 사용됩니다. `docs` 디렉토리 위치에서 실행해야 합니다.
 | Script Name | Description                                                        |
 | ----------- | ------------------------------------------------------------------ |
 | `dev`       | Start the local document server. (For development)                 |
 | `build`     | Build a local document server. Used only for GitHub page builders. |
 | `serve`     | Start the local document server.                                   |
@@ -0,0 +1,15 @@
 # 기타 프로젝트
 ## React로 만든 전자 템플릿을 찾고 계신가요?
 Vite + React + Material-UI + Electron으로 구성된 'Retron' 프로젝트도 확인해 보세요.
 https://github.com/jooy2/retron
 ## (사용 중단) Webpack 5 컴파일러로 `Vutron`을 찾고 계신가요?
 Vite 컴파일러를 사용하여 프로젝트 및 번들 크기를 줄이고 개발 환경과 빌드 속도를 개선한다는 목표를 달성했습니다.
 Webpack 5 컴파일러를 사용하는 기존 **Vutron**은 아래 리포지토리로 분리되었으며 곧 지원이 종료될 예정입니다.
 https://github.com/jooy2/vutron-webpack
@@ -0,0 +1,32 @@
 ---
 order: 2
 ---
 # 사전 구성된 구성 요소
 ## 웹 앱 프레임워크
 - [Vite](https://vitejs.dev)
 - [Electron](https://www.electronjs.org)
 - [Electron Builder](https://www.electron.build)
 ## 개발 도움말 도구
 - [TypeScript](https://www.typescriptlang.org)
 - [ESLint](https://eslint.org)
 - [Prettier](https://prettier.io)
 ## 프론트엔드 프레임워크 (Vue)
 - [Vue](https://vuejs.org)
 - [Vue-i18n](https://kazupon.github.io/vue-i18n)
 - [Vue-router](https://router.vuejs.org)
 - [Pinia](https://pinia.vuejs.org)
 ## 디자인 프레임워크
 - [Vuetify](https://vuetifyjs.com)
 ## 테스트
 - [Playwright](https://playwright.dev)
@@ -0,0 +1,73 @@
 ---
 order: 1
 ---
 # 프로젝트 구조
 ```
 /
 ├─ .github - GitHub 파일들 (Vutron 프로젝트 기여에만 사용)
 │  └─ ISSUE_TEMPLATE/
 │  └─ resources/ - README.md 등에 사용되는 GitHub 리소스
 │  └─ workflows/ - GitHub 워크플로우 정의
 │  └─ dependabot.yml
 │  └─ FUNDING.yml
 ├─ .vscode - Visual Studio Code IDE에서 사용하는 일반적인 프로젝트 구성 파일
 ├─ buildAssets/ - Electron 빌드에 사용되는 패키지 리소스(아이콘, 로고 등) 파일
 │  └─ builder/
 │  │  │  └─ config.ts - `electron-builder` 동적 구성 파일
 │  └─ icons/
 ├─ dist/ - 패키지 빌드에 사용되는 출력 디렉토리
 ├─ docs/ - 프로젝트 문서(선택적으로 활성화)
 │  └─ .vitepress/
 │  │  │  └─ config.mts - 문서 호스팅에 사용되는 VitePress 구성 파일
 │  └─ public/ - VitePress 문서 페이지의 루트 리소스 디렉토리
 ├─ node_modules/
 ├─ src/
 │  ├─ main/ - 메인(Electron) 프로세스 소스 코드
 │  │  ├─ utils/ - 메인 프로세스 유틸리티
 │  │  │  └─ Constants.ts - 메인 글로벌 정의
 │  │  │  └─ Menus.ts - 메인 글로벌 메뉴 정의
 │  │  └─ index.ts - 메인 프로세스 진입점
 │  │  └─ IPCs.ts - 메인 프로세스 IPC 핸들러 정의
 │  │  └─ MainRunner.ts - 메인 프로세스 메인 윈도우 프로세스
 │  ├─ preload/ - 프리로드 (Electron-Vue 커뮤니케이션 브릿지) 프로세스
 │  │  └─ index.ts
 │  ├─ renderer/ - 렌더러 (Vue) 프로세스 소스 코드
 │  │  ├─ components/ - Vue 컴포넌트 콜렉션
 │  │  │  └─ layout/ - 레이아웃 컴포넌트
 │  │  ├─ locales/ - Vue i18n 언어 리소스 파일
 │  │  ├─ plugins/ - Vue 플러그인 정의
 │  │  ├─ public/ - Vue 정적 리소스
 │  │  │  └─ images/
 │  │  ├─ router/ - Vue 라우팅 정의
 │  │  ├─ screens/ - Vue 화면 컴포넌트
 │  │  │  └─ ErrorScreen.vue - 렌더링 프로세스 및 라우팅 오류 발생 시 표시되는 화면
 │  │  │  └─ MainScreen.vue
 │  │  │  └─ SecondScreen.vue - 샘플 화면
 │  │  ├─ store/ - Pinia 스토어 (글로벌 상태 관리) 정의
 │  │  ├─ utils/ - 렌더러 프로세스 유틸리티
 │  │  ├─ App.vue - Vue 앱 루트 컴포넌트
 │  │  ├─ index.html - Electron 렌더러 프로세스에 의해 로드된 루트 정적 인덱스
 │  └─ └─ main.ts - 렌더러 프로세스 엔트리 포인트Renderer process entry point
 ├─ tests/ - 애플리케이션 테스트 구성
 │  ├─ results/ - PlayWright 테스트 결과 파일 및 스크린샷 저장 위치
 │  ├─ specs/ - PlayWright 테스트 사양 파일
 │  ├─ fixtures.ts - 공통 실행 API 테스트
 │  └─ testUtil.ts - 테스트 유틸리티
 ├─ .editorconfig - IDE용 에디터 권장 구성 파일
 ├─ .eslintignore - ESLint에서 무시할 파일 목록
 ├─ .eslintrc.json - ESLint 규칙 구성
 ├─ .gitignore - Git에 업로드하지 않을 파일 목록
 ├─ .prettierignore - Prettier 파일 서식을 비활성화할 파일 목록
 ├─ .prettierrc - Prettier 규칙 설정
 ├─ CODE_OF_CONDUCT.md - GitHub에서만 사용되는 파일
 ├─ LICENSE - 프로젝트 라이선스 파일
 ├─ package.json - Node.js 패키지 구성
 ├─ package-lock.json
 ├─ playwright.config.ts - Playwright 테스트 규칙 구성
 ├─ tsconfig.json - TypeScript 설정
 ├─ tsconfig.node.json - TypeScript 설정
 ├─ vite.config.mts - Vite 컴파일러 빌드 설정
 └─ README.md - GitHub에서만 사용되는 파일
 ```