소개

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 코드를 복사할 수 있습니다.
• 네이밍 컨벤션 변환기 — 변수·클래스 이름을 camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE 등으로 한 번에 변환합니다. 여러 줄 일괄 처리도 됩니다.

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

운영 방식

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

운영자

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

문의

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