소개

Burny Tools은(는) 웹 작업에서 반복해서 필요한 프론트엔드 계산·변환을 빠르게 처리할 수 있도록 만든 도구 모음입니다. 값을 입력하면 바로 결과가 나오고, 결과를 복사해 바로 코드에 붙여 넣을 수 있게 하는 것을 목표로 합니다.

제공하는 것

현재 다음 도구를 운영하고 있습니다.

CSS clamp() 생성기 — 뷰포트 범위와 최소·최대 크기를 입력하면 미디어쿼리 없이 반응하는 clamp() 값을 만들어 줍니다.
색상 대비 검사기 (WCAG) — 글자색과 배경색의 명도 대비를 계산해 WCAG AA·AAA 기준 통과 여부를 알려주고, 실패 시 통과하는 색을 추천합니다.
Open Graph / meta 태그 생성기 — 제목·설명·이미지·URL을 입력하면 SNS 공유용 Open Graph와 Twitter 카드 메타 태그를 만들고, 미리보기 카드로 결과를 보여줍니다.
px ↔ rem 변환기 — px 값을 rem으로, rem 값을 px로 바꿔 줍니다. 기준 폰트 크기를 바꿔 계산할 수 있고, 자주 쓰는 값 대조표도 제공합니다.
box-shadow 생성기 — 그림자 레이어를 여러 겹 쌓아 자연스러운 box-shadow를 만들고, 실시간 미리보기와 함께 CSS 코드를 복사할 수 있습니다.
색 변환기 (HEX · RGB · HSL · OKLCH) — 색 하나를 넣으면 HEX, RGB, HSL, OKLCH 표기로 한 번에 바꿔 줍니다. 어느 형식으로 붙여넣어도 알아서 인식합니다.
CSS 그라디언트 생성기 — 색 정지점을 넣고 각도·유형을 조절해 linear·radial·conic 그라디언트를 만듭니다. 미리보기를 보며 CSS를 복사할 수 있습니다.
이미지 포맷 변환기 (PNG · JPG · WebP) — PNG, JPG, WebP 사이를 브라우저 안에서 바꿉니다. 파일이 서버로 올라가지 않아 사진을 그대로 두고 변환할 수 있습니다.
네이밍 컨벤션 변환기 — 변수·클래스 이름을 camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE 등으로 한 번에 변환합니다. 여러 줄 일괄 처리도 됩니다.

각 도구 페이지에는 그 기능을 언제, 왜 쓰는지 설명하는 내용을 함께 두고,블로그에서 관련 개념과 실무 팁을 더 자세히 다룹니다.

클로드에서는 클로드 코드처럼 클로드 도구를 처음 쓰는 분을 위해 설치부터 기본 설정까지 차례로 정리합니다.

운영 방식

모든 도구는 브라우저 안에서만 동작합니다. 입력한 값은 서버로 전송되거나 저장되지 않습니다. 사이트는 정적 페이지로 배포되며 회원가입 없이 이용할 수 있습니다.

운영자

웹 퍼블리싱과 UI 디자인을 하는 Burny가 개인적으로 만들고 운영합니다. 실무에서 직접 쓰려고 만든 도구들을 정리해 공개하고 있습니다.

문의

오류 제보, 도구 제안, 기타 문의는shskse5@gmail.com로 보내주세요.문의 페이지에도 같은 내용이 있습니다.