Appearance
๐ 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์ ์์ ํ ๋
๋ฆฝ ํ๋ซํผํ ์ฒซ๊ฑธ์์ด๋ค.