🏆 Badgefy
아름다운 배지를 쉽게 생성하세요
GitHub, README, 문서에 사용할 수 있는 다양한 스타일의 배지
일반 뱃지 생성기
커스텀 뱃지를 생성하세요
3/15
6/15
직접 입력하거나, “아이콘 선택” 버튼을 클릭하여 인기 아이콘을 선택할 수 있습니다.
라벨과 값을 입력하세요
코드를 생성하려면 라벨과 값을 입력하세요뱃지란 뭐죠?
뱃지는 프로젝트나 문서에서 상태, 버전, 라이선스 등의 정보를 시각적으로 표현하는 작은 이미지입니다. GitHub의 README 파일이나 웹사이트에서 자주 볼 수 있습니다.
이 도구를 사용하면 원하는 텍스트와 색상으로 커스텀 뱃지를 만들고, HTML, Markdown, 또는 Embed URL 형식으로 코드를 생성할 수 있습니다.
사용법
• 일반 뱃지: 라벨과 값을 입력하여 커스텀 뱃지를 생성할 수 있습니다. HTML, Markdown, Embed URL 형식으로 코드를 생성할 수 있습니다.
• 카운터 뱃지: 로그인 후 생성한 카운터를 선택하여 실시간 카운터 값을 표시하는 뱃지를 만들 수 있습니다. 카운터는 여기에서 생성할 수 있습니다.
• HTML: 웹사이트에 img 태그로 삽입할 수 있는 코드입니다.
• Markdown: GitHub README, 문서 등에서 사용할 수 있는 마크다운 형식입니다.
• Embed URL: Notion 등에서 이미지 URL로 삽입할 수 있는 링크입니다.
• 자주쓰는 뱃지: 자주 사용하는 뱃지 템플릿을 선택하여 빠르게 생성할 수 있습니다.
나랏말싸미 미국에달아 문자와로 서르 사맛디 아니할쎄 !!!
서버에서 만든 SVG 뱃지가 클라이언트로 이동하면 브라우저의 폰트 설정을 따릅니다.
이 때문에 클라이언트의 폰트가 설치된 환경에 따라 뱃지의 텍스트 너비가 다르게 표시될 수 있으며, 이는 뱃지 레이아웃이 틀어지는 주된 원인이 됩니다.
이러한 문제를 해결하기 위해, '개발자의 도구함' 에서는 자체적으로 한국 웹 환경의 표준인 '맑은 고딕'(Malgun Gothic) 폰트 11,172개의 정확한 완성형 문자 너비 값을 모두 미리 측정하여 패키지(han-span)를 제작하였고, Badgefy에서 사용합니다.
카운터를 포함한 뱃지와 자신만의 뱃지SET 을 미리 제작해서 사용할 수 있습니다.
많이 사용해 주셨으면 좋겠어요 ❤️
완성형 문자가 아닌경우에는 뱃지의 레이아웃을 벗어날 수 있습니다.