generator.html

---
layout: default
title: 폰트 이미지 생성기
---

<style>
  #generator { display: flex; justify-content: space-between; gap: 1rem; }
  .canvas-wrap { flex: 1; display: flex; justify-content: center; align-items: center; }
  #image { max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]) { width: 10rem; }
  .form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .form > div { display: flex; align-items: center; gap: .5rem; position: relative; }
  .btns { margin: 0; }
  .form .outline-use,
  .form .shadow-use { display: none; }
</style>

<p class="noscript">폰트 이미지 생성기는 JavaScript를 사용합니다. JavaScript를 사용 설정해 주세요.</p>

<div id="generator">
  <form class="form">
    <div>
      <label for="font">폰트:</label>
      <select id="font">
        {% for font in site.fonts %}
          <option value="{{ font.name | replace: " ", "-" }}" {% if font.style == "Monospaced" %} hidden{% elsif font.name == "Galmuri11" %}selected{% endif %}>{{ font.name }}</option>
        {% endfor %}
        <option value="bdf">파일 선택 (BDF)</option>
      </select>
    </div>
    <div>
      <label for="charset">문자 집합:</label>
      <select id="charset">
        <option value="set2350" selected>한글 음절 2350자</option>
        <option value="set2355">한글 음절 2355자</option>
        <option value="set2780">한글 음절 2780자</option>
        <option value="set4358">한글 음절 4358자</option>
        <option value="set11172">한글 음절 11172자</option>
        <option value="setKanji6355sjis">일본 한자 6355자 (Shift_JIS 순서)</option>
        <option value="setKanji6355unicode">일본 한자 6355자 (Unicode 순서)</option>
      </select>
    </div>
    <div><label for="x-offset">오프셋:</label><input id="x-offset" type="number" value="0">, <input id="y-offset" type="number" value="0"></div>
    <div><label for="tile-width">타일 크기:</label><input id="tile-width" type="number" value="16"> × <input id="tile-height" type="number" value="16"></div>
    <div><label for="tile-column">열 수:</label><input id="tile-column" type="number" value="32"></div>
    <div>
      <label for="foreground">전경색:</label>
      <input id="foreground" type="text" value="#63cf63">
      <button type="button" class="btn outline palette" onclick="palette(this)">팔레트 (TLP)</button>
    </div>
    <div>
      <label for="background">배경색:</label>
      <input id="background" type="text" value="#000">
      <button type="button" class="btn outline palette" onclick="palette(this)">팔레트 (TLP)</button>
    </div>
    <div><input type="checkbox" id="outline-use"><label for="outline-use">외곽선</label></div>
    <div class="outline-use">
      <label for="outline-color">외곽선 색:</label>
      <input id="outline-color" type="text" value="#3933ff">
      <button type="button" class="btn outline palette" onclick="palette(this)">팔레트 (TLP)</button>
    </div>
    <div class="outline-use">
      <label for="outline-type">외곽선 유형:</label>
      <select id="outline-type">
        <option value="sharp" selected>모서리 유지</option>
        <option value="smooth">모서리 깎기</option>
      </select>
    </div>
    <div><input type="checkbox" id="shadow-use"><label for="shadow-use">그림자</label></div>
    <div class="shadow-use">
      <label for="shadow-color">그림자 색:</label>
      <input id="shadow-color" type="text" value="#3933ff">
      <button type="button" class="btn outline palette" onclick="palette(this)">팔레트 (TLP)</button>
    </div>
    <div class="shadow-use">
      <label for="shadow-pos">그림자 위치:</label>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr);">
        <input type="checkbox" name="shadow" value="-1 -1" id="shadow-topleft">
        <input type="checkbox" name="shadow" value="0 -1" id="shadow-top">
        <input type="checkbox" name="shadow" value="1 -1" id="shadow-topright">
        <input type="checkbox" name="shadow" value="-1 0" id="shadow-left">
        <input type="checkbox" disabled>
        <input type="checkbox" name="shadow" value="1 0" id="shadow-right">
        <input type="checkbox" name="shadow" value="-1 1" id="shadow-bottomleft">
        <input type="checkbox" name="shadow" value="0 1" id="shadow-bottom">
        <input type="checkbox" name="shadow" value="1 1" id="shadow-bottomright">
      </div>
    </div>
    <div class="btns">
      <button type="button" id="load" class="btn">만들기</button>
      <a id="download" class="btn outline" download style="display: none;">다운로드</a>
    </div>
    <small>‘다운로드’를 누르기 전에 먼저 ‘만들기’를 눌러 주세요.</small>
  </form>
  <div class="canvas-wrap"><canvas id="image"></canvas></div>
</div>

<h2>문자 집합</h2>

<ul>
  <li>한글 음절 2350자: <a href="https://www.unicode.org/Public/MAPPINGS/OBSOLETE/EASTASIA/KSC/KSX1001.TXT" class="new" target="_blank" rel="noreferrer noopener" aria-label="KS X 1001 (새 탭에서 열림)">KS X 1001</a>의 모든 한글 음절.</li>
  <li>한글 음절 2355자: KS X 1001의 모든 한글 음절에 뢔, 쌰, 쎼, 쓔, 쬬 5자가 추가된 집합.</li>
  <li>한글 음절 2780자: <a href="https://raw.githubusercontent.com/adobe-type-tools/Adobe-KR/master/Adobe-KR-9.pdf" class="new" target="_blank" rel="noreferrer noopener" aria-label="Adobe-KR-0 (새 탭에서 열림)">Adobe-KR-0</a>의 모든 한글 음절. KS X 1001의 2350자를 포함합니다.</li>
  <li>한글 음절 4358자: Adobe-KR-0과 <a href="https://raw.githubusercontent.com/adobe-type-tools/Adobe-KR/master/Adobe-KR-9.pdf" class="new" target="_blank" rel="noreferrer noopener" aria-label="Adobe-KR-1 (새 탭에서 열림)">Adobe-KR-1</a>의 모든 한글 음절. KS X 1001, KS X 1002, <a href="https://www.unicode.org/L2/L2018/18011-info-kps9566-2011.pdf" class="new" target="_blank" rel="noreferrer noopener" aria-label="KPS 9566 (새 탭에서 열림)">KPS 9566</a>, <a href="https://ccjktype.fonts.adobe.com/wp-content/uploads/2014/12/gb12052-uni.txt" class="new" target="_blank" rel="noreferrer noopener" aria-label="GB/T 12052 (새 탭에서 열림)">GB/T 12052</a>의 모든 한글 음절을 포함합니다.</li>
  <li>한글 음절 11172자: 현대 한글의 모든 음절.</li>
  <li>일본 한자 6355자: <a href="https://www.unicode.org/Public/MAPPINGS/OBSOLETE/EASTASIA/JIS/SHIFTJIS.TXT" class="new" target="_blank" rel="noreferrer noopener" aria-label="Shift_JIS (새 탭에서 열림)">Shift_JIS</a>의 모든 한자.</li>
</ul>

<p>Galmuri7은 한글 음절 11172자를 지원하지 않습니다.</p>

<p>Galmuri11 Bold 및 Galmuri11 Condensed는 한자를 지원하지 않습니다.</p>

<h2>외곽선 및 그림자 유형</h2>

<h3>외곽선</h3>

<table>
  <tbody>
    <tr>
      <td><div class="sample outline-sharp">한</div></td>
      <td><div class="sample outline-smooth">한</div></td>
    </tr>
    <tr>
      <th>모서리 유지</th>
      <th>모서리 깎기</th>
    </tr>
  </tbody>
</table>

<h3>그림자</h3>

<table>
  <tbody>
    <tr>
      <td><div class="sample shadow-topleft">한</div></td>
      <td><div class="sample shadow-top">한</div></td>
      <td><div class="sample shadow-topright">한</div></td>
    </tr>
    <tr>
      <td><div class="sample shadow-left">한</div></td>
      <td><div class="sample"></div></td>
      <td><div class="sample shadow-right">한</div></td>
    <tr>
    </tr>
      <td><div class="sample shadow-bottomleft">한</div></td>
      <td><div class="sample shadow-bottom">한</div></td>
      <td><div class="sample shadow-bottomright">한</div></td>
    </tr>
  </tbody>
</table>

<p>그림자는 여러 개를 결합할 수 있으며 외곽선과 같이 사용할 수 있습니다.</p>

<script src="./assets/bdf.js"></script>
<script src="./assets/charsets.js?ver=2"></script>
<script src="./assets/palettes.js"></script>
<script>
  const id = s => document.getElementById(s),
        ctx = id('image').getContext('2d'),
        reader = new FileReader(),
        fontUpload = document.createElement('input'),
        outline = document.querySelectorAll('.outline-use'),
        outlineSharp = [[0, 1], [0, -1], [1, 0], [-1, 0], [1, 1], [-1, -1], [1, -1], [-1, 1]],
        outlineSmooth = [[0, 1], [0, -1], [1, 0], [-1, 0]],
        shadow = document.querySelectorAll('.shadow-use'),
        shadowPos = document.querySelectorAll('[name="shadow"]')

  fontUpload.type = 'file'
  fontUpload.accept = '.bdf'

  id('load').addEventListener('click', function() {
    let font = id('font').value,
        charset = id('charset').value,
        xOffset = parseInt(id('x-offset').value),
        yOffset = parseInt(id('y-offset').value),
        tileWidth = parseInt(id('tile-width').value),
        tileHeight = parseInt(id('tile-height').value),
        tileColumn = parseInt(id('tile-column').value),
        foreground = id('foreground').value,
        background = id('background').value,
        outlineColor = id('outline-color').value,
        outlineType = id('outline-type').value,
        shadowColor = id('shadow-color').value,
        regex = new RegExp('.{1,' + tileColumn + '}', 'g'),
        set = charsets[charset].match(regex)

    ctx.reset()

    id('image').width = tileWidth * tileColumn
    id('image').height = tileHeight * set.length
    id('image').style.aspectRatio = id('image').width / id('image').height

    switch (font) {
      {% for font in site.fonts %}
        case '{{ font.name | replace: " ", "-" }}':
          fetch('./galmuri/dist/{{ font.name | replace: " ", "-" }}.bdf').then(data => data.text()).then(text => {
            let bdf = new BDF(text)
            let w = bdf.glyphs[44032] ? bdf.glyphs[44032].deviceWidthX : bdf.glyphs[12288].deviceWidthX
            for (let i = 0; i < set.length; i++) {
              ctx.fillStyle = background
              ctx.fillRect(0, i * tileHeight, set[i].length * tileWidth, tileHeight)
              if (id('outline-use').checked) {
                switch (outlineType) {
                  case 'sharp':
                    if (id('shadow-use').checked) {
                      let shadowTemp = []
                      shadowPos.forEach(e => {
                        if (e.checked) {
                          let arr = []
                          switch (e.id) {
                            case 'shadow-topleft': arr = [[-1, -1], [0, -1], [1, -1], [-1, 0], [-1, 1]]; break
                            case 'shadow-top': arr = [[0, -1], [1, -1], [2, -1]]; break
                            case 'shadow-topright': arr = [[1, -1], [2, -1], [3, -1], [3, 0], [3, 1]]; break
                            case 'shadow-left': arr = [[-1, 0], [-1, 1], [-1, 2]]; break
                            case 'shadow-right': arr = [[3, 0], [3, 1], [3, 2]]; break
                            case 'shadow-bottomleft': arr = [[-1, 1], [-1, 2], [-1, 3], [0, 3], [1, 3]]; break
                            case 'shadow-bottom': arr = [[0, 3], [1, 3], [2, 3]]; break
                            case 'shadow-bottomright': arr = [[3, 1], [3, 2], [1, 3], [2, 3], [3, 3]]; break
                          }
                          shadowTemp.push(...arr)
                        }
                      })
                      for (let j = 0; j < shadowTemp.length; j++) {
                        bdf.drawText(set[i], id('image'), {
                          colour: shadowColor,
                          x: xOffset + shadowTemp[j][0],
                          y: (i * tileHeight + yOffset) + shadowTemp[j][1],
                          kerningBias: tileWidth - w
                        })
                      }
                    }
                    for (let j = 0; j < outlineSharp.length; j++) {
                      bdf.drawText(set[i], id('image'), {
                        colour: outlineColor,
                        x: xOffset + (outlineSharp[j][0] + 1),
                        y: (i * tileHeight + yOffset) + (outlineSharp[j][1] + 1),
                        kerningBias: tileWidth - w
                      })
                    }
                    break
                  case 'smooth':
                    if (id('shadow-use').checked) {
                      let shadowTemp = []
                      shadowPos.forEach(e => {
                        if (e.checked) {
                          let arr = []
                          switch (e.id) {
                            case 'shadow-topleft': arr = [[0, 0], [0, -1], [-1, 0]]; break
                            case 'shadow-top': arr = [[0, -1], [1, -1], [2, -1]]; break
                            case 'shadow-topright': arr = [[2, -1], [2, 0], [3, 0]]; break
                            case 'shadow-left': arr = [[-1, 0], [-1, 1], [-1, 2]]; break
                            case 'shadow-right': arr = [[3, 0], [3, 1], [3, 2]]; break
                            case 'shadow-bottomleft': arr = [[-1, 2], [0, 2], [0, 3]]; break
                            case 'shadow-bottom': arr = [[0, 3], [1, 3], [2, 3]]; break
                            case 'shadow-bottomright': arr = [[3, 2], [2, 3], [2, 2]]; break
                          }
                          shadowTemp.push(...arr)
                        }
                      })
                      for (let j = 0; j < shadowTemp.length; j++) {
                        bdf.drawText(set[i], id('image'), {
                          colour: shadowColor,
                          x: xOffset + shadowTemp[j][0],
                          y: (i * tileHeight + yOffset) + shadowTemp[j][1],
                          kerningBias: tileWidth - w
                        })
                      }
                    }
                    for (let j = 0; j < outlineSmooth.length; j++) {
                      bdf.drawText(set[i], id('image'), {
                        colour: outlineColor,
                        x: xOffset + (outlineSmooth[j][0] + 1),
                        y: (i * tileHeight + yOffset) + (outlineSmooth[j][1] + 1),
                        kerningBias: tileWidth - w
                      })
                    }
                    break
                }
                bdf.drawText(set[i], id('image'), {
                  colour: foreground,
                  x: xOffset + 1,
                  y: (i * tileHeight + yOffset) + 1,
                  kerningBias: tileWidth - w
                })
              } else {
                if (id('shadow-use').checked) {
                  let shadowTemp = []
                  shadowPos.forEach(e => {
                    if (e.checked) {
                      let arr = e.value.split(' ')
                      shadowTemp.push([Number(arr[0]), Number(arr[1])])
                    }
                  })
                  for (let j = 0; j < shadowTemp.length; j++) {
                    bdf.drawText(set[i], id('image'), {
                      colour: shadowColor,
                      x: xOffset + shadowTemp[j][0],
                      y: (i * tileHeight + yOffset) + shadowTemp[j][1],
                      kerningBias: tileWidth - w
                    })
                  }
                }
                bdf.drawText(set[i], id('image'), {
                  colour: foreground,
                  x: xOffset,
                  y: i * tileHeight + yOffset,
                  kerningBias: tileWidth - w
                })
              }
            }
          })
          break
      {% endfor %}
      case 'bdf':
        if (fontUpload.files[0]) {
          reader.onload = function() {
            let bdf = new BDF(reader.result)
            let w = bdf.glyphs[44032] ? bdf.glyphs[44032].deviceWidthX : bdf.glyphs[12288].deviceWidthX
            for (let i = 0; i < set.length; i++) {
              ctx.fillStyle = background
              ctx.fillRect(0, i * tileHeight, set[i].length * tileWidth, tileHeight)
              if (id('outline-use').checked) {
                switch (outlineType) {
                  case 'sharp':
                    if (id('shadow-use').checked) {
                      switch (shadowType) {
                        case 'sharp':
                          for (let j = 0; j < shadowSharpOutlineSharp.length; j++) {
                            bdf.drawText(set[i], id('image'), {
                              colour: shadowColor,
                              x: xOffset + (shadowSharpOutlineSharp[j][0] + 2),
                              y: (i * tileHeight + yOffset) + (shadowSharpOutlineSharp[j][1] + 2),
                              kerningBias: tileWidth - w
                            })
                          }
                          break
                        case 'smooth':
                          for (let j = 0; j < shadowSmoothOutlineSharp.length; j++) {
                            bdf.drawText(set[i], id('image'), {
                              colour: shadowColor,
                              x: xOffset + (shadowSmoothOutlineSharp[j][0] + 2),
                              y: (i * tileHeight + yOffset) + (shadowSmoothOutlineSharp[j][1] + 2),
                              kerningBias: tileWidth - w
                            })
                          }
                          break
                      }
                    }
                    for (let j = 0; j < outlineSharp.length; j++) {
                      bdf.drawText(set[i], id('image'), {
                        colour: outlineColor,
                        x: xOffset + (outlineSharp[j][0] + 1),
                        y: (i * tileHeight + yOffset) + (outlineSharp[j][1] + 1),
                        kerningBias: tileWidth - w
                      })
                    }
                    break
                  case 'smooth':
                    if (id('shadow-use').checked) {
                      switch (shadowType) {
                        case 'sharp':
                          for (let j = 0; j < shadowSharpOutlineSmooth.length; j++) {
                            bdf.drawText(set[i], id('image'), {
                              colour: shadowColor,
                              x: xOffset + (shadowSharpOutlineSmooth[j][0] + 2),
                              y: (i * tileHeight + yOffset) + (shadowSharpOutlineSmooth[j][1] + 2),
                              kerningBias: tileWidth - w
                            })
                          }
                          break
                        case 'smooth':
                          for (let j = 0; j < shadowSmoothOutlineSmooth.length; j++) {
                            bdf.drawText(set[i], id('image'), {
                              colour: shadowColor,
                              x: xOffset + (shadowSmoothOutlineSmooth[j][0] + 2),
                              y: (i * tileHeight + yOffset) + (shadowSmoothOutlineSmooth[j][1] + 2),
                              kerningBias: tileWidth - w
                            })
                          }
                          break
                      }
                    }
                    for (let j = 0; j < outlineSmooth.length; j++) {
                      bdf.drawText(set[i], id('image'), {
                        colour: outlineColor,
                        x: xOffset + (outlineSmooth[j][0] + 1),
                        y: (i * tileHeight + yOffset) + (outlineSmooth[j][1] + 1),
                        kerningBias: tileWidth - w
                      })
                    }
                    break
                }
                bdf.drawText(set[i], id('image'), {
                  colour: foreground,
                  x: xOffset + 1,
                  y: (i * tileHeight + yOffset) + 1,
                  kerningBias: tileWidth - w
                })
              } else {
                if (id('shadow-use').checked) {
                  switch (shadowType) {
                    case 'sharp':
                      for (let j = 0; j < shadowSharp.length; j++) {
                        bdf.drawText(set[i], id('image'), {
                          colour: shadowColor,
                          x: xOffset + shadowSharp[j][0],
                          y: (i * tileHeight + yOffset) + shadowSharp[j][1],
                          kerningBias: tileWidth - w
                        })
                      }
                      break
                    case 'smooth':
                      for (let j = 0; j < shadowSmooth.length; j++) {
                        bdf.drawText(set[i], id('image'), {
                          colour: shadowColor,
                          x: xOffset + shadowSmooth[j][0],
                          y: (i * tileHeight + yOffset) + shadowSmooth[j][1],
                          kerningBias: tileWidth - w
                        })
                      }
                      break
                  }
                }
                bdf.drawText(set[i], id('image'), {
                  colour: foreground,
                  x: xOffset,
                  y: i * tileHeight + yOffset,
                  kerningBias: tileWidth - w
                })
              }
            }
          }
          reader.readAsText(fontUpload.files[0])
        }
        break
    }

    id('download').style.display = 'block'
  })

  id('download').addEventListener('click', (e) => {
    e.target.href = id('image').toDataURL()
  })

  id('outline-use').addEventListener('change', function() {
    if (this.checked) {
      outline.forEach(e => e.style.display = 'flex')
    } else {
      outline.forEach(e => e.style.display = '')
    }
  })

  id('shadow-use').addEventListener('change', function() {
    if (this.checked) {
      shadow.forEach(e => e.style.display = 'flex')
    } else {
      shadow.forEach(e => e.style.display = '')
    }
  })

  let paletteWindow = document.createElement('div')
  paletteWindow.id = 'palette'
  let paletteGrid = document.createElement('div')
  paletteGrid.classList.add('palette-grid')

  tlp.forEach(e => {
    let tlpItem = document.createElement('div')
    tlpItem.style.backgroundColor = '#' + e
    tlpItem.addEventListener('click', function() {
      this.parentElement.parentElement.parentElement.getElementsByTagName('input')[0].value = '#' + e
    })
    paletteGrid.append(tlpItem)
  })

  paletteWindow.append(paletteGrid)

  function palette(e) {
    if (id('palette')) {
      if (e.nextElementSibling) {
        id('palette').remove()
      } else {
        id('palette').remove()
        e.after(paletteWindow)
      }
    } else {
      e.after(paletteWindow)
    }
  }

  id('font').addEventListener('change', function() {
    if (this.value == 'bdf') {
      fontUpload.click()
    }
  })
</script>