Softonic

README 배지 생성기

단계 1 / 2 Markdown
결과

라벨, 메시지, 색상을 입력하면 이 생성기가 정적 shields.io 배지, 즉 README 제목 아래에서 흔히 보이는 그 납작한 작은 알약 모양의 표식(build | passing, license | MIT, version | 1.4.0)을 만들어 줍니다. 실시간 미리 보기를 보여 주고, 붙여넣을 수 있도록 Markdown과 HTML을 모두 제공합니다. Shields.io는 오픈소스 프로젝트에서 사실상 표준으로 자리 잡은 배지 서비스입니다. URL 형식은 단순하지만 외우기 번거롭기 때문에, 작은 그래픽 인터페이스가 새 저장소를 세팅할 때 몇 분을 절약해 줍니다.

배지 만드는 방법

  1. 1

    라벨과 메시지 입력

    라벨은 왼쪽 절반(회색), 메시지는 오른쪽 절반입니다. 배지에 표시할 내용을 입력하세요: `build` / `passing`, `coverage` / `98%`, `license` / `MIT`.

  2. 2

    색상 선택

    이름이 지정된 색상(brightgreen, blue, red, orange)이나 `#ff0000` 같은 16진수 코드를 사용할 수 있습니다. 배지의 오른쪽 절반을 채웁니다.

  3. 3

    스타일 지정

    스타일(`flat`, `flat-square`, `for-the-badge`, `plastic`, `social`)을 선택하고, 필요하면 simple-icons 슬러그(github, npm, docker)로 로고를 지정하세요.

  4. 4

    Markdown 또는 HTML 복사

    README에 붙여넣으세요. 선택적으로 링크 URL을 추가하면 배지를 클릭할 수 있게 됩니다. Shields.io는 요청 시 SVG를 렌더링합니다.

자주 쓰는 배지 레시피

이 도구는 정적 badge/label-message-color 형식을 만듭니다. 실시간 데이터를 표시하는 배지(빌드 상태, 버전, 다운로드 수)가 필요하면 아래 shields.io URL 패턴 중 하나를 복사해 README에 바로 붙여넣으세요.

목적 shields.io URL 패턴
npm 버전 https://img.shields.io/npm/v/{package}
npm 다운로드 https://img.shields.io/npm/dm/{package}
GitHub 스타 수 https://img.shields.io/github/stars/{owner}/{repo}
GitHub 최신 커밋 https://img.shields.io/github/last-commit/{owner}/{repo}
GitHub 워크플로 상태 https://img.shields.io/github/actions/workflow/status/{owner}/{repo}/{workflow.yml}
라이선스 https://img.shields.io/github/license/{owner}/{repo}
PyPI 버전 https://img.shields.io/pypi/v/{package}
Docker 풀 수 https://img.shields.io/docker/pulls/{org}/{image}
Codecov 커버리지 https://img.shields.io/codecov/c/github/{owner}/{repo}
정적 라벨 https://img.shields.io/badge/{label}-{message}-{color}

배지 스타일 비교

  • flat, 고전적인 둥근 직사각형. 기본값입니다.
  • flat-square, 각진 모서리로 조금 더 현대적인 느낌입니다.
  • for-the-badge, 전부 대문자인 블록체로 최대한 눈에 띕니다.
  • plastic, 그라디언트와 안쪽 그림자가 있는 옛날식 스타일입니다.
  • social, 둥근 모서리와 차분한 색조로 GitHub 자체의 스타/포크 버튼과 어울립니다.

배지를 사용해야 할 때

  • 빌드 + 커버리지, 프로젝트가 실제로 유지보수되고 있음을 방문자에게 보여 줍니다.
  • 버전 + 다운로드 수, 실제로 사용되고 있음을 보여 줍니다.
  • 라이선스, 기여나 사용을 고려하는 사람에게 주는 법적 신호입니다.
  • 문서 링크, 외부 문서 사이트 또는 rustdoc.rs.
  • 채팅 / 지원, Discord, Matrix, GitHub Discussions 링크.

배지를 사용하지 말아야 할 때

  • 결코 업데이트되지 않는 겉치레 지표. 스타가 0인 저장소에 “스타” 배지를 달면 프로젝트가 죽은 것처럼 보입니다.
  • 가능한 모든 지표. 배지 5개는 이야기를 전하지만, 15개는 아무것도 말해 주지 않습니다.
  • 중복된 정보. 라이선스와 “MIT”를 두 번 쓰거나, 버전을 배지와 본문 첫 줄에 모두 표시하는 경우입니다.
  • 사용하지 않는 서비스의 배지. 커버리지 보고를 설정하지 않았다면 Codecov를 추가하지 마세요. 깨진 배지는 배지가 없는 것보다 나쁩니다.

캐싱과 신뢰성

Shields.io는 요청을 적극적으로 캐시합니다. 업데이트가 느린 배지는 보통 캐시 무효화(?v=2 추가)나 몇 분이면 충분합니다. shields.io가 다운되면 GitHub은 그래픽 없이 “shields”라는 글자를 표시하지만, 금방 복구됩니다.

자주 묻는 질문

아니요. Shields.io는 무료이며 기부금으로 운영됩니다. 사용량이 매우 많은 사용자에게는 직접 호스팅하거나 프로젝트를 후원하도록 권장합니다.

네. Shields는 오픈소스이므로 자체 도메인에서 실행할 수 있습니다. 다만 대부분의 프로젝트에는 그럴 필요가 없습니다. 무료 서비스도 충분히 안정적입니다.

캐싱 때문입니다. ?cacheSeconds=60 또는 ?v=anything을 추가해 강제로 갱신하세요. 반영까지 몇 분이 걸릴 수 있습니다.

네, ?logo=github(또는 임의의 simple-icons 슬러그)을 추가하세요. 아이콘 색상은 ?logoColor=white로 조정합니다.

아니요. 모든 작업은 브라우저에서 이루어지며, URL은 복사할 수 있도록 클라이언트 측에서 생성됩니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다