Skip to content
On this page

๐Ÿš€ Lyri ร— Brian Studio โ€” PWA ์„ค์น˜ ๋งˆ์Šคํ„ฐ ํ”Œ๋žœ

Homepage Build Log ๊ธฐ๋ก์šฉ (2025)


1. VitePress์— PWA ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜

bash
npm install vitepress-plugin-pwa --save-dev

์„ค์น˜ ํ›„ docs/.vitepress/config.ts ์— ์•„๋ž˜ ์ฝ”๋“œ ์ถ”๊ฐ€:

ts
import { defineConfig } from 'vitepress'
import { pwa } from 'vitepress-plugin-pwa'

export default defineConfig({
  title: 'Lyri ร— Brian Studio',
  description: 'AI ร— Music ร— Overlay ร— Dev',

  // ๐Ÿ”ฅ PWA ์„ค์ •
  vite: {
    plugins: [
      pwa({
        outDir: './docs/.vitepress/dist',
        manifest: {
          name: 'Lyri ร— Brian Studio',
          short_name: 'Lyri Studio',
          description: 'AI ร— Music ร— Overlay ร— Dev',
          theme_color: '#6bc48e',
          background_color: '#ffffff',
          display: 'standalone',
          start_url: '/',
          icons: [
            {
              src: '/pwa/icon-192.png',
              sizes: '192x192',
              type: 'image/png'
            },
            {
              src: '/pwa/icon-512.png',
              sizes: '512x512',
              type: 'image/png'
            }
          ]
        }
      })
    ]
  }
})

2. PWA ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€ ์ค€๋น„

PWA ์•„์ด์ฝ˜์„ ์•„๋ž˜ ๊ฒฝ๋กœ์— ์ถ”๊ฐ€:

docs/
 โ””โ”€ .vitepress/
     โ””โ”€ public/
         โ””โ”€ pwa/
            โ”œโ”€ icon-192.png
            โ”œโ”€ icon-512.png
            โ””โ”€ splash.png (์˜ต์…˜)

3. Service Worker ์„ค์ •

๊ธฐ๋ณธ ์ž๋™ ์ƒ์„ฑ์œผ๋กœ ์ถฉ๋ถ„ํ•˜์ง€๋งŒ, ํ•„์š” ์‹œ ์บ์‹œ ์ „๋žต ์„ค์ •:

ts
pwa({
  registerType: 'autoUpdate',
  workbox: {
    globPatterns: ['**/*.{js,css,html,svg,png,ico}']
  }
})

4. GitHub Actions โ€” ๋ฐฐํฌ

ํ˜„์žฌ deploy.yml์€ dist ํด๋”๋ฅผ ๊ทธ๋Œ€๋กœ gh-pages๋กœ ์˜ฌ๋ฆฌ๋ฏ€๋กœ ์ˆ˜์ • ํ•„์š” ์—†์Œ.
PWA ํŒŒ์ผ(SW, manifest ๋“ฑ)์€ ์ž๋™ ํฌํ•จ๋จ.


5. ์„ค์น˜ ํ…Œ์ŠคํŠธ

๐Ÿ“ฑ iOS

Safari โ†’ ๊ณต์œ  โ†’ ํ™ˆ ํ™”๋ฉด์— ์ถ”๊ฐ€ โ†’ ์•ฑ์œผ๋กœ ์„ค์น˜๋จ.

๐Ÿค– Android

Chrome โ†’ ๋ฉ”๋‰ด โ†’ โ€œ์•ฑ ์„ค์น˜โ€ โ†’ ์›ํ„ฐ์น˜ ์„ค์น˜.


โœจ PWA ์ ์šฉ ํ›„ ๊ธฐ๋Œ€ ํšจ๊ณผ

  • ์˜คํ”„๋ผ์ธ ๋ฌธ์„œ ๋ณด๊ธฐ
  • ๋ชจ๋ฐ”์ผ ์•ฑ ์•„์ด์ฝ˜ ์ƒ์„ฑ
  • ์ „์ฒดํ™”๋ฉด UI
  • ๋น ๋ฅธ ๋กœ๋”ฉ
  • Overlay Docs / Academy / Homepage ์ž๋ฃŒ๋ฅผ ์•ฑ์œผ๋กœ ํœด๋Œ€ ๊ฐ€๋Šฅ

๋ฆฌ๋ฆฌ ๋ฉ”๋ชจ ๐Ÿฅ„

PWA ์ ์šฉ์€ โ€œ์›น์‚ฌ์ดํŠธ โ†’ ์•ฑโ€์œผ๋กœ ์ง„ํ™”ํ•˜๋Š” ์ง€์ .
Lyri ร— Brian Studio์˜ ์™„์ „ํ•œ ๋…๋ฆฝ ํ”Œ๋žซํผํ™” ์ฒซ๊ฑธ์Œ์ด๋‹ค.