MultiKit
사용 방법
- 이미지를 상자에 놓거나 선택합니다.
- 위쪽 글자와 아래쪽 글자를 입력합니다. 자동으로 대문자가 되고 가운데 정렬되며, 길면 이미지에 맞게 크기가 줄어듭니다.
- 원하면 글자 색과 테두리 색을 바꾸고, Impact(기기에 있을 때의 고전 밈 글꼴)와 평범한 굵은 글꼴 중 고릅니다.
- "내려받기"를 누르거나 이미지를 오른쪽 클릭(휴대폰은 길게 누르기)해서 저장하세요.
예시
위쪽 글자 "WHEN THE CODE", 아래쪽 글자 "FINALLY WORKS"인 이미지
→ 두 줄 모두 검은 테두리의 굵은 흰 글자로 들어간 이미지위에 한 줄, 아래에 한 줄인 고전 밈 배치입니다.
작은 이미지에 긴 위쪽 글자
→ 두 줄로 줄바꿈되고 크기에 맞게 줄어듦글자가 잘리거나 이미지 밖으로 나가는 일은 없습니다.
아래쪽 글자만 입력, 위쪽은 비움
→ 아래쪽 캡션만 그려짐빈 칸은 아무것도 그리지 않아 한 줄만 필요한 밈에 맞습니다.
계산 방식
이미지는 원본 크기로 캔버스에 그리고, 각 캡션은 브라우저에서 이미지에 맞춥니다. 시작 크기로 글자 너비를 재어 이미지 너비(작은 여백 제외)보다 넓은 줄이 없도록 필요한 만큼 줄을 나누고, 나뉜 글자가 너비와 높이 한도에 맞을 때까지, 또는 최소 크기에 이를 때까지 크기를 조금씩 줄입니다. 그런 다음 가운데 정렬로 그리는데, 먼저 테두리 색으로 굵은 선을 그리고 그 위에 글자 색을 채우는 고전 밈 방식입니다.
줄바꿈과 맞추기 로직은 가짜의 예측 가능한 글자 너비 측정으로 테스트하고, 실제 측정(CanvasRenderingContext2D.measureText)과 그리기는 실제 브라우저에서 페이지를 통해 확인합니다.
출처
자주 묻는 질문
- 글자가 왜 대문자로 바뀌나요?
- 고전 밈 스타일입니다. 입력한 대소문자를 그대로 유지할지 페이지가 판단할 필요가 없도록 어떻게 입력하든 대문자로 보여 줍니다.
- Impact가 왜 휴대폰에서 다르게 보이나요?
- Impact는 윈도우와 맥에는 있지만 보통 휴대폰에는 없는 글꼴이고, 아무것도 내려받지 않으므로 브라우저는 기기에 실제로 설치된 글꼴만 쓸 수 있습니다. 없는 기기에서는 시스템의 굵은 글꼴로 대신하며 읽기에는 문제없지만 모양이 조금 다릅니다.
- GIF도 쓸 수 있나요?
- 놓을 수는 있지만 첫 프레임만 씁니다. 이미지는 애니메이션으로 유지되지 않고 평범한 캔버스에 한 번만 그려지기 때문입니다.
- 글자 길이 제한이 있나요?
- 한 줄에 120자까지입니다. 길면 더 많은 줄로 나뉘고 더 줄어들어서, 아주 긴 캡션은 작게 나올 수 있습니다.
- 내 이미지가 업로드되나요?
- 아니요. 이미지와 글자는 브라우저에서 함께 그려지며 어디로도 전송되지 않습니다.
관련 도구
버전 기록
- 1.0.1 — 검색 제목에서 도구의 핵심 작업과 무료·온라인 사용 여부를 더 분명하게 안내합니다.
- 1.0.0 — 첫 공개.