폰트 추가하기

이 도구에 새로운 폰트를 추가하려면 edit-here.js 파일을 열어 fonts 배열을 수정하세요. 폰트 파일은 반드시 fonts 폴더에 저장해야 하며, name은 드롭다운에 표시될 이름이고, url은 폰트 파일의 상대 경로입니다. woff 형식의 폰트 파일 사용을 권장합니다.

const fonts = [
  {
    name: "폰트 이름",
    url: "fonts/폰트파일.woff"
  },
  {
    name: "다른 폰트",
    url: "fonts/다른폰트.woff"
  }
];

예시 텍스트 변경하기

페이지 로드 시 표시되는 기본 텍스트를 변경하려면 edit-here.js 파일의 sampleText 변수를 수정하세요. 이 텍스트는 폰트의 실제 사용 예시를 보여주는 데 사용되므로, 폰트의 특징을 잘 드러낼 수 있는 텍스트를 선택하는 것이 좋습니다.

const sampleText = `원하는 텍스트를 입력하세요.
여러 줄로 작성할 수 있으며,
특수문자나 숫자도 포함할 수 있습니다.`;

초기 설정 변경하기

initialSettings 객체를 수정하여 페이지가 처음 로드될 때의 기본값을 설정할 수 있습니다. textDirection은 "0"이 가로쓰기, "1"이 세로쓰기입니다. fontSize는 픽셀 단위의 숫자, letterSpacing은 자간 값(음수 가능), lineHeight는 행간 배율입니다.

const initialSettings = {
  textDirection: "0",  // "0": 가로쓰기, "1": 세로쓰기
  fontSize: 30,        // 픽셀 단위 (15-45 사이 권장)
  letterSpacing: 0,   // 자간 (-100 ~ 100)
  lineHeight: 1.5     // 행간 배율 (1.0 ~ 2.0)
};

글리프 카테고리 설정하기

글리프 보기 섹션에 표시될 문자 카테고리를 관리하려면 glyphs 객체를 수정하세요. 각 카테고리는 고유한 키 이름을 가지며, title은 카테고리 제목, characters는 해당 카테고리에 포함될 문자들의 배열입니다. 한글, 영문, 숫자, 특수문자 등으로 구분하여 설정할 수 있습니다.

const glyphs = {
  hangul: {
    title: "한글",
    characters: ["가", "나", "다", "라", "마"]
  },
  english: {
    title: "영문",
    characters: ["A", "B", "C", "D", "E"]
  },
  numbers: {
    title: "숫자",
    characters: ["0", "1", "2", "3", "4", "5"]
  }
};

도구 사용 방법

상단의 컨트롤 패널을 사용하여 폰트를 실시간으로 미리볼 수 있습니다. 폰트 선택 드롭다운에서 원하는 폰트를 선택하고, 쓰기 방향 토글로 가로쓰기/세로쓰기를 전환할 수 있습니다. 글자 크기, 글자 사이(자간), 글줄 사이(행간) 슬라이더를 조정하여 타이포그래피를 세밀하게 조정할 수 있습니다. 텍스트 에디터 영역을 클릭하여 직접 텍스트를 입력하거나 수정할 수도 있습니다.

글리프 보기 사용법

글리프 보기 섹션에서는 폰트에 포함된 모든 문자를 카테고리별로 확인할 수 있습니다. 왼쪽의 미리보기 영역에 마우스를 올리면 해당 문자가 크게 표시되며, 오른쪽의 문자 목록에서 원하는 문자를 클릭하면 텍스트 에디터에 자동으로 삽입됩니다. 좌우 화살표 버튼을 사용하여 다른 카테고리로 이동할 수 있습니다.