배지/버튼 제작기이란?
배지/버튼 메이커는 텍스트, 색상, 모양을 선택해 맞춤형 배지와 실드를 만드는 도구입니다. 라벨과 값을 입력하고 스타일을 골라 PNG 또는 SVG로 다운로드하세요.
shields.io 스타일 배지(회색 라벨과 컬러 값으로 나뉜 알약 모양)를 인라인 SVG로 생성합니다. flat, flat-square, rounded, pill, for-the-badge 다섯 가지 모양 중에서 고르고, 양쪽 절반의 색은 물론 라벨과 값의 글자 색도 각각 16진수로 지정할 수 있습니다. GitHub, npm, Docker, Python, Node.js 같은 기술 로고를 한 번에 넣으면 해당 브랜드 컬러도 자동으로 적용됩니다. 배지를 클릭 가능한 URL로 감싸고, README용 Markdown이나 이메일·웹 페이지용 HTML로 복사하거나, 선명한 SVG와 3배 해상도 PNG로 내려받을 수 있습니다. 여러 배지를 목록에 추가해 모든 Markdown을 한 번에 복사하거나 .md 파일로 저장할 수도 있습니다. 글자 길이에 맞춰 너비가 자동으로 늘어나 'Build / Passing'과 'License / Apache 2.0' 모두 따로 손대지 않아도 균형 있게 보입니다.
사용 방법
- 배지 텍스트를 입력하세요 — 라벨(왼쪽)과 값(오른쪽)을 선택합니다. 예: "Version"과 "2.0".
- 라벨과 값 배경의 색을 고르고, 모양을 선택한 뒤, 필요하면 왼쪽에 기술 로고를 추가합니다.
- 배지가 실시간으로 바뀌는 것을 보면서 PNG나 SVG로 내려받거나, Markdown 또는 HTML로 복사해 README나 페이지에 붙여 넣습니다.
사용 시기
- CI 연동 없이 GitHub README에 빌드·버전·커버리지 배지 붙이기.
- 랜딩 페이지의 기능 줄이나 요금제에 'Beta', 'New', 'Pro' 태그 달기.
- 포트폴리오나 PDF 이력서에서 기술 스택 칩을 강조하기.
결과
프로젝트 상태 배지 만들기: 라벨 "Build"는 회색, 값 "Passing"은 초록색, 플랫 스타일. GitHub 리포에서 볼 수 있는 상태 배지가 완성됩니다.
자주 묻는 질문
- shields.io 대신 PNG로 호스팅해도 배지가 잘 보이나요?
- 네. 내려받은 SVG와 PNG는 자체 완결형 파일이고 어떤 서버에도 요청하지 않습니다. shields.io 대비 단점은 실시간 데이터가 없다는 점입니다. 'version 1.2' 배지는 다시 생성하기 전까지 1.2 그대로입니다.
- flat, rounded, pill 스타일은 어떻게 다른가요?
- flat은 살짝 그라데이션이 깔린 직각 모서리, flat-square는 같은 모양에 그라데이션이 없는 버전, rounded는 4px 곡률, pill은 양 끝이 완전한 반원, for-the-badge는 README에서 자주 보는 굵고 키가 크며 전부 대문자인 스타일입니다. 주변 UI에 잘 어울리는 것을 고르세요.
- 기본 초록+회색 대신 브랜드 컬러로 바꿀 수 있나요?
- 네 — 라벨 색, 값 색, 그리고 양쪽 절반마다 별도의 글자 색이 모두 HEX 피커입니다. 어두운 라벨에 밝은 글자, 선명한 값을 조합하면 대비가 높아집니다. 미리보기는 입력 즉시 갱신됩니다.
- SVG와 PNG 중 무엇을 골라야 하나요?
- GitHub README, 웹사이트처럼 확대될 수 있는 곳에는 SVG(항상 선명). SVG를 렌더링하지 않는 곳, 예컨대 Word 문서, Slack 메시지, 일부 캡처 도구에 붙일 때는 PNG.
- 왜 PNG가 SVG보다 용량이 큰가요?
- 고해상도 디스플레이에서도 선명하게 보이도록 PNG는 화면 크기의 3배 해상도로 렌더링됩니다. 보통 배지 SVG는 1KB 미만, PNG는 5~15KB 정도입니다. 용량이 중요하면 SVG, 호환성이 중요하면 PNG.