@jjlmoya/utils-games-development 1.54.0 → 1.56.0

package/src/tool/pixelArtPaletteSwapper/i18n/it.ts

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'cambia-tavolozza-pixel-art',
+  title: 'Cambia Tavolozza per Pixel Art',
+  description: 'Riduci sprite e fogli di sprite alle tavolozze di console classiche o a una lista personalizzata di colori esadecimali nel browser.',
+  ui: {
+    uploadTitle: 'Trascina uno sprite o foglio di sprite',
+    uploadHint: 'PNG, JPEG o WebP elaborati direttamente sul tuo dispositivo',
+    chooseImage: 'Scegli immagine',
+    replaceImage: 'Sostituisci immagine',
+    paletteTitle: 'Scegli tavolozza',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'Ispirata al NES',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Colori personalizzati',
+    customPaletteHint: 'Separa i valori esadecimali con virgole, spazi o a capo.',
+    applyCustomPalette: 'Applica tavolozza',
+    resetCustomPalette: 'Ripristina',
+    sourcePreview: 'Originale',
+    resultPreview: 'Risultato ridotto',
+    waitingForImage: 'In attesa di un immagine',
+    uploadToPreview: 'Carica un immagine per la prima vista',
+    resultEmpty: 'Le versioni originale e ridotta appariranno affiancate.',
+    downloadPng: 'Scarica PNG',
+    downloadDisabled: 'Carica un immagine per abilitare l esportazione.',
+    colorCount: 'Colori originali',
+    mappedCount: 'Colori usati',
+    imageSize: 'Dimensione immagine',
+    paletteCount: 'colori tavolozza',
+    preserveAlpha: 'Conserva trasparenza',
+    zoomLabel: 'Zoom',
+    processing: 'Mappatura pixel in corso',
+    invalidPalette: 'Aggiungi almeno un colore esadecimale valido',
+    invalidImage: 'Scegli un immagine PNG, JPEG o WebP',
+    readyStatus: 'Pronto',
+    dropActive: 'Rilascia per caricare',
+    mappedSummary: 'Mappati {source} colori originali in {mapped} colori tavolozza',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Trasforma uno Sprite a Colori in una Tavolozza Retro Deliberata',
+    },
+    {
+      type: 'paragraph',
+      html: 'Una tavolozza limitata è molto più di una restrizione tecnica. Dona a uno sprite un vocabolario cromatico coerente, fa percepire gli elementi di una scena come appartenenti al medesimo mondo e suggerisce il carattere visivo di una specifica console o architettura fantasy. Questo strumento di cambio tavolozza nel browser ti consente di confrontare l immagine originale con una versione ridotta mentre sperimenti con Game Boy, ispirate al NES, PICO-8, Commodore 64, DawnBringer 16 e tavolozze personalizzate.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Come Funziona la Mappatura al Colore Più Vicino',
+    },
+    {
+      type: 'paragraph',
+      html: 'Lo strumento legge i canali rosso, verde e blu di ogni pixel visibile e confronta quel colore con ciascun valore presente nella tavolozza selezionata. Sceglie l elemento della tavolozza con la minore distanza RGB al quadrato e scrive il colore sostitutivo in un nuovo buffer di canvas. Il canale alfa viene mantenuto separato, in modo che i pixel trasparenti rimangano tali e i bordi parzialmente trasparenti conservino la loro opacità originale quando l opzione Conserva trasparenza è attiva.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Riduzione tavolozza',
+          description: 'Ogni colore originale viene sostituito dal campione disponibile più vicino.',
+          points: [
+            'Veloce e prevedibile per sprite, icone, elementi di mappa e interfacce',
+            'Conserva accuratamente le dimensioni e le posizioni originali dei pixel',
+            'Rende semplice la verifica e il controllo di un budget cromatico stabilito',
+          ],
+        },
+        {
+          title: 'Cambio tavolozza (Palette Swapping)',
+          description: 'La stessa illustrazione può essere rimappata su un altro insieme di colori scelto con cura.',
+          points: [
+            'Utile per costumi alternativi, variazioni di ambientazione e stati di danno',
+            'Le liste esadecimali personalizzate permettono di adeguarla alla propria direzione artistica',
+            'Il file PNG scaricato è subito pronto per essere reimportato nel tuo editor',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Scegliere una Tavolozza per la Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Tavolozza', 'Colori', 'Uso consigliato', 'Aspetti da valutare'],
+      rows: [
+        ['Game Boy', '4', 'Stile monocromatico portatile e studi di valori ben definiti', 'La gamma ristretta di valori può fondere materiali con tonalità simili'],
+        ['Ispirata al NES', '16', 'Sprite arcade ben marcati, personaggi e elementi di mappa', 'I colori molto luminosi possono sovrastare i dettagli più piccoli'],
+        ['PICO-8', '16', 'Pixel art moderna con accenti cromatici saturi', 'Le tonalità molto sature richiedono un contrasto intenzionale'],
+        ['Commodore 64', '16', 'Scene retro morbide ed estetica da computer classico', 'Il basso contrasto trae vantaggio da sagome ben definite'],
+        ['DawnBringer 16', '16', 'Tavolozza versatile e selezionata a mano per pixel art generale', 'Le rampe di colore richiedono comunque una direzione della luce chiara'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Flusso di Lavoro Pratico per Fogli Sprite',
+    },
+    {
+      type: 'paragraph',
+      html: 'Inizia con l immagine di origine più grande che riesci a modificare comodamente, quindi carica lo sprite o il foglio sprite esportato qui. Seleziona una preimpostazione per definire lo stile oppure incolla una lista personalizzata da una libreria di colori. Ispeziona le due tele a un livello di zoom più elevato per verificare se si sono persi dettagli del volto, contorni uniti o punti di luce che non si staccano più dal colore di base. Se il risultato appare poco definito, prova una tavolozza con stacchi di valore più marcati o aggiungi un colore di accento deliberato alla lista.',
+    },
+    {
+      type: 'tip',
+      title: 'Mantenere una Tavolozza Intenzionale',
+      html: 'Una lista di colori più ampia non è automaticamente migliore. Inizia con 4-16 colori, assegna a ogni colore un ruolo preciso e riserva i valori più luminosi per i punti focali o i punti di luce più importanti. L algoritmo del colore più vicino conserva la posizione dei pixel, ma non può decidere quali colori debbano guidare la gerarchia visiva del tuo sprite.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Lista di Controllo per l Esportazione in Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Prima di Importare il File PNG Ridotto',
+      html: 'Controlla il risultato al 100% di scala e alle dimensioni finali all interno del gioco, conferma che i bordi trasparenti siano puliti, verifica che le sagome principali rimangano ben leggibili e conserva il file sorgente originale accanto al file esportato per poter modificare la tavolozza senza dover ricominciare da capo.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Quantizzazione del colore',
+          definition: 'Il processo di riduzione di un ampio insieme di colori originali a un insieme più piccolo e definito.',
+        },
+        {
+          term: 'Rampa di colore',
+          definition: 'Una sequenza ordinata di toni scuri, medi e chiari utilizzata per ombreggiare una superficie o un materiale.',
+        },
+        {
+          term: 'Tavolozza indicizzata',
+          definition: 'Una tabella di colori compatta in cui i pixel fanno riferimento a indici di una lista condivisa anziché memorizzare ogni volta i colori completi.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Lo strumento carica le mie immagini su un server?',
+      answer: 'No. L immagine viene decodificata in una tela nel tuo browser, mappata localmente in JavaScript ed esportata direttamente come PNG. Lo strumento non richiede alcun passaggio di caricamento esterno.',
+    },
+    {
+      question: 'Posso usare una mia tavolozza personalizzata?',
+      answer: 'Sì. Incolla valori esadecimali a 6 o 3 cifre nel campo Colori personalizzati, separati da virgole, spazi o a capo, quindi seleziona Applica tavolozza.',
+    },
+    {
+      question: 'La dimensione del mio sprite viene modificata?',
+      answer: 'No. Il file scaricato mantiene la larghezza, l altezza, le posizioni dei pixel e i valori alfa originali quando l opzione Conserva trasparenza è attiva.',
+    },
+    {
+      question: 'Quale algoritmo viene utilizzato?',
+      answer: 'Ogni pixel visibile viene assegnato al colore più vicino nella tavolozza selezionata utilizzando la distanza euclidea al quadrato nello spazio RGB. È un metodo rapido, deterministico e facile da previsualizzare, che non applica dithering o correzione cromatica percettiva Lab.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Carica uno sprite',
+      text: 'Trascina uno sprite o foglio sprite PNG, JPEG o WebP nell area di lavoro, oppure usa il pulsante Scegli immagine.',
+    },
+    {
+      name: 'Scegli una tavolozza',
+      text: 'Seleziona una preimpostazione classica o inserisci i tuoi colori esadecimali. Il risultato si aggiorna immediatamente.',
+    },
+    {
+      name: 'Confronta ed esporta',
+      text: 'Ispeziona la tela originale e quella con la tavolozza ridotta, regola lo zoom e scarica il risultato in formato PNG.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Cambia Tavolozza per Pixel Art',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Lo strumento carica le mie immagini su un server?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'No. L immagine viene elaborata localmente nel browser ed esportata direttamente in PNG.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Posso usare una mia tavolozza personalizzata?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Sì. Inserisci i codici esadecimali nel campo Colori personalizzati e applica la tavolozza.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Come ridurre uno sprite a una tavolozza retro',
+      step: [
+        { '@type': 'HowToStep', name: 'Carica uno sprite', text: 'Trascina un file nell area di lavoro.' },
+        { '@type': 'HowToStep', name: 'Scegli una tavolozza', text: 'Seleziona una preimpostazione o inserisci i tuoi colori.' },
+        { '@type': 'HowToStep', name: 'Confronta ed esporta', text: 'Ispeziona il risultato e scarica il file PNG.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};

package/src/tool/pixelArtPaletteSwapper/i18n/ja.ts

@@ -0,0 +1,225 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: 'ドット絵パレットスワッパー',
+  description: 'スプライトやスプライトシートをクラシックなゲーム機のパレットやカスタムカラーにブラウザ上で変換。',
+  ui: {
+    uploadTitle: 'スプライトをドラッグ＆ドロップ',
+    uploadHint: 'PNG、JPEG、WebPをローカル環境で処理します',
+    chooseImage: '画像を選択',
+    replaceImage: '画像を差し替え',
+    paletteTitle: 'パレットを選択',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES風',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'カスタムカラー',
+    customPaletteHint: 'Hexカラーコードをカンマ、スペース、改行で区切って入力。',
+    applyCustomPalette: 'パレットを適用',
+    resetCustomPalette: 'リセット',
+    sourcePreview: 'オリジナル',
+    resultPreview: '変換結果',
+    waitingForImage: '画像を選択してください',
+    uploadToPreview: '画像をアップロードするとプレビューが表示されます',
+    resultEmpty: '元の画像と減色後の画像が左右に並んで表示されます。',
+    downloadPng: 'PNGをダウンロード',
+    downloadDisabled: '画像をアップロードしてエクスポートを有効化。',
+    colorCount: '元の色数',
+    mappedCount: '使用色数',
+    imageSize: '画像サイズ',
+    paletteCount: 'パレット色数',
+    preserveAlpha: '透過を維持',
+    zoomLabel: 'ズーム',
+    processing: 'ピクセルを減色中',
+    invalidPalette: '有効なHexカラーコードを入力してください',
+    invalidImage: 'PNG、JPEG、WebP形式の画像を選択してください',
+    readyStatus: '準備完了',
+    dropActive: 'ドロップして読み込み',
+    mappedSummary: '{source}色の元画像を{mapped}色のパレットに変換しました',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'ドット絵をレトロゲーム機のカラーパレットに即座に変換',
+    },
+    {
+      type: 'paragraph',
+      html: '限られた色数はドット絵にレトロゲーム独特の魅力を与えます。Game Boy、NES、PICO-8などのパレットに一括変換できます。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '減色処理の仕組み',
+    },
+    {
+      type: 'paragraph',
+      html: '各ピクセルのRGB値を解析し、選択されたパレットの中で最も近い色に置き換えます。透明度も保持されます。',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'パレット制限',
+          description: '元の色を最も近いパレット色へ変換。',
+          points: [
+            'スプライトやタイルセットに最適',
+            '元の解像度とピクセル位置を維持',
+            '使用色数を簡単に管理',
+          ],
+        },
+        {
+          title: 'パレットスワップ',
+          description: '色違いバージョンを簡単に作成。',
+          points: [
+            '2Pカラーや属性違いのキャラ作成に',
+            '独自のHexカラーリストにも対応',
+            '即座にPNGとして書き出し可能',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'レトロパレット比較',
+    },
+    {
+      type: 'table',
+      headers: ['パレット', '色数', '特徴', '注意点'],
+      rows: [
+        ['Game Boy', '4', 'モノクロ携帯ゲーム機風', '明暗差が少ないとディテールが潰れやすい'],
+        ['NES風', '16', 'アーケード風の鮮やかな発色', '彩度の高い色の扱いに注意'],
+        ['PICO-8', '16', '現代的なポピュラーカラー', '鮮やかな色のコントラストを考慮'],
+        ['Commodore 64', '16', 'シックなレトロPCテイスト', '明確なシルエット作りが効果的'],
+        ['DawnBringer 16', '16', '汎用性の高い人気パレット', '光源の意識が必要'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'スプライトシートの作業フロー',
+    },
+    {
+      type: 'paragraph',
+      html: '画像を読み込み、ズーム機能を使って拡大しながら細部の潰れがないか確認してください。',
+    },
+    {
+      type: 'tip',
+      title: '色数えらびのコツ',
+      html: '最初は4〜16色程度に抑えると統一感が出やすくなります。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '書き出し前のチェックリスト',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'ゲームへの組み込み前に',
+      html: '原寸サイズで表示を確認し、透過部分に余計なピクセルが入っていないかチェックしましょう。',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'カラー減色（Quantization）',
+          definition: '多くの色で描かれた画像を限られた色数に変換する処理。',
+        },
+        {
+          term: 'パレットランプ（Ramp）',
+          definition: '陰影をつけるために段階的に並べられた同系色の系列。',
+        },
+        {
+          term: 'インデックスカラー',
+          definition: '各ピクセルがカラーテーブルの番号を参照する形式。',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '画像はサーバーに送信されますか？',
+      answer: 'いいえ。すべての処理はお使いのブラウザ上でローカルに行われます。',
+    },
+    {
+      question: '自作のパレットを使用できますか？',
+      answer: 'はい。Hexコードを入力して「パレットを適用」をクリックしてください。',
+    },
+  ],
+  howTo: [
+    {
+      name: '画像をロード',
+      text: 'PNG、JPEG、WebP画像をドラッグ＆ドロップします。',
+    },
+    {
+      name: 'パレットを選択',
+      text: 'プリセットを選択するか、カスタムコードを入力します。',
+    },
+    {
+      name: 'エクスポート',
+      text: '変換後のPNGファイルをダウンロードします。',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'ドット絵パレットスワッパー',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '画像はサーバーに送信されますか？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'いいえ。すべての処理はお使いのブラウザ上でローカルに行われます。',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '自作のパレットを使用できますか？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'はい。Hexコードを入力して「パレットを適用」をクリックしてください。',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'ドット絵をレトロパレットに変換する方法',
+      step: [
+        { '@type': 'HowToStep', name: '画像をロード', text: '画像をドラッグ＆ドロップします。' },
+        { '@type': 'HowToStep', name: 'パレットを選択', text: 'プリセットを選択するかカスタムコードを入力します。' },
+        { '@type': 'HowToStep', name: 'エクスポート', text: '変換後のPNGファイルをダウンロードします。' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};

package/src/tool/pixelArtPaletteSwapper/i18n/ko.ts

@@ -0,0 +1,225 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: '도트 그래픽 팔레트 스왑 도구',
+  description: '스프라이트와 스프라이트 시트의 색상을 레트로 콘솔 팔레트나 사용자 지정 Hex 색상으로 브라우저에서 직접 변경하세요.',
+  ui: {
+    uploadTitle: '스프라이트 파일 드래그 앤 드롭',
+    uploadHint: 'PNG, JPEG, WebP 파일이 브라우저에서 안전하게 처리됩니다',
+    chooseImage: '이미지 선택',
+    replaceImage: '이미지 교체',
+    paletteTitle: '팔레트 선택',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES 스타일',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: '사용자 지정 색상',
+    customPaletteHint: 'Hex 색상 코드를 쉼표, 공백 또는 줄바꿈으로 구분하여 입력하세요.',
+    applyCustomPalette: '팔레트 적용',
+    resetCustomPalette: '초기화',
+    sourcePreview: '원본',
+    resultPreview: '변환 결과',
+    waitingForImage: '이미지 대기 중',
+    uploadToPreview: '이미지를 업로드하면 미리보기가 표시됩니다',
+    resultEmpty: '원본과 색상이 변환된 이미지가 나란히 표시됩니다.',
+    downloadPng: 'PNG 다운로드',
+    downloadDisabled: '내보내기를 활성화하려면 이미지를 업로드하세요.',
+    colorCount: '원본 색상 수',
+    mappedCount: '사용된 색상 수',
+    imageSize: '이미지 크기',
+    paletteCount: '팔레트 색상 수',
+    preserveAlpha: '투명도 유지',
+    zoomLabel: '확대',
+    processing: '픽셀 색상 변환 중',
+    invalidPalette: '올바른 Hex 색상 코드를 1개 이상 입력하세요',
+    invalidImage: 'PNG, JPEG 또는 WebP 이미지를 선택하세요',
+    readyStatus: '준비 완료',
+    dropActive: '파일을 놓아 업로드',
+    mappedSummary: '{source}개의 원본 색상을 {mapped}개의 팔레트 색상으로 변환했습니다',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '도트 그래픽을 레트로 감성의 팔레트로 즉시 변환',
+    },
+    {
+      type: 'paragraph',
+      html: '제한된 색상 수 팔레트는 도트 그래픽에 독특한 레트로 분위기를 더해줍니다. Game Boy, NES, PICO-8 팔레트로 손쉽게 변환해 보세요.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '색상 변환 알고리즘 작동 방식',
+    },
+    {
+      type: 'paragraph',
+      html: '각 픽셀의 RGB 값을 분석하여 선택한 팔레트에서 가장 가까운 색상으로 대체하며 투명도 채널은 그대로 유지됩니다.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: '팔레트 제한',
+          description: '원본 색상을 가장 가까운 팔레트 색으로 변경.',
+          points: [
+            '스프라이트 및 타일셋 작업에 최적화',
+            '원본 해상도와 픽셀 위치 유지',
+            '색상 수 관리가 용이함',
+          ],
+        },
+        {
+          title: '팔레트 스왑',
+          description: '동일 디자인의 다양한 색상 버전 생성.',
+          points: [
+            '2P 컬러 및 속성 변경 캐릭터 제작에 유용',
+            '사용자 지정 Hex 코드 지원',
+            '즉시 PNG 파일로 내보내기 가능',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '레트로 콘솔 팔레트 비교',
+    },
+    {
+      type: 'table',
+      headers: ['팔레트', '색상 수', '추천 용도', '주의할 점'],
+      rows: [
+        ['Game Boy', '4', '흑백 휴대용 게임기 느낌', '명암 차가 적으면 디테일이 뭉개질 수 있음'],
+        ['NES 스타일', '16', '아케이드풍 도트 그래픽', '채도가 높은 색상의 균형 필요'],
+        ['PICO-8', '16', '트렌디하고 선명한 아기자기한 스타일', '강렬한 색상 간의 대비 고려'],
+        ['Commodore 64', '16', '고전 PC 게임 감성', '명확한 실루엣 표현이 효과적'],
+        ['DawnBringer 16', '16', '범용성 높은 세련된 팔레트', '명확한 광원 표현이 필요함'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '스프라이트 시트 작업 흐름',
+    },
+    {
+      type: 'paragraph',
+      html: '이미지를 불러온 후 확대 기능을 사용하여 픽셀 디테일이나 경계선이 뭉개지지 않았는지 확인하세요.',
+    },
+    {
+      type: 'tip',
+      title: '색상 구성 팁',
+      html: '4개에서 16개 사이의 색상을 사용하는 것이 깔끔한 디테일을 유지하는 데 좋습니다.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '내보내기 전 체크리스트',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: '게임 적용 전 확인',
+      html: '100% 원본 비율에서 외곽선과 투명 배경 부분이 깨끗한지 점검하세요.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: '색상 양자화 (Quantization)',
+          definition: '많은 수의 색상을 제한된 색상 집합으로 줄이는 과정.',
+        },
+        {
+          term: '팔레트 램프 (Ramp)',
+          definition: '음영을 표현하기 위해 음영 단계별로 정리된 색상 계열.',
+        },
+        {
+          term: '인덱스 팔레트',
+          definition: '픽셀이 직접 색상 코드를 갖는 대신 색상표 번호를 참조하는 방식.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '이미지가 서버로 전송되나요?',
+      answer: '아니요. 모든 작업은 사용자의 브라우저 내부에서 안전하게 진행됩니다.',
+    },
+    {
+      question: '원하는 팔레트를 직접 입력할 수 있나요?',
+      answer: '네. Hex 색상 코드를 입력하고 「팔레트 적용」을 클릭하세요.',
+    },
+  ],
+  howTo: [
+    {
+      name: '이미지 불러오기',
+      text: 'PNG, JPEG 또는 WebP 이미지를 드래그 앤 드롭합니다.',
+    },
+    {
+      name: '팔레트 선택',
+      text: '프리셋을 선택하거나 직접 Hex 코드를 입력합니다.',
+    },
+    {
+      name: '내보내기',
+      text: '색상이 변환된 PNG 이미지를 다운로드합니다.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: '도트 그래픽 팔레트 스왑 도구',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '이미지가 서버로 전송되나요?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '아니요. 모든 작업은 사용자의 브라우저 내부에서 안전하게 진행됩니다.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '원하는 팔레트를 직접 입력할 수 있나요?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '네. Hex 색상 코드를 입력하고 「팔레트 적용」을 클릭하세요.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: '도트 그래픽 색상 변환 방법',
+      step: [
+        { '@type': 'HowToStep', name: '이미지 불러오기', text: '이미지를 드래그 앤 드롭합니다.' },
+        { '@type': 'HowToStep', name: '팔레트 선택', text: '프리셋을 선택하거나 직접 Hex 코드를 입력합니다.' },
+        { '@type': 'HowToStep', name: '내보내기', text: '색상이 변환된 PNG 이미지를 다운로드합니다.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};