웹 작업에 바로 쓰는 무료 프론트엔드 도구
CSS clamp(), px ↔ rem, box-shadow, 색 대비(WCAG), OG 태그, 네이밍 컨벤션까지. 설치도 로그인도 없이 브라우저에서 바로 씁니다.
도구
CSS clamp() 생성기 CSS
뷰포트 범위와 최소·최대 크기를 입력하면 미디어쿼리 없이 반응하는 clamp() 값을 만들어 줍니다.
색상 대비 검사기 (WCAG) 색상
글자색과 배경색의 명도 대비를 계산해 WCAG AA·AAA 기준 통과 여부를 알려주고, 실패 시 통과하는 색을 추천합니다.
Open Graph / meta 태그 생성기 마크업
제목·설명·이미지·URL을 입력하면 SNS 공유용 Open Graph와 Twitter 카드 메타 태그를 만들고, 미리보기 카드로 결과를 보여줍니다.
px ↔ rem 변환기 CSS
px 값을 rem으로, rem 값을 px로 바꿔 줍니다. 기준 폰트 크기를 바꿔 계산할 수 있고, 자주 쓰는 값 대조표도 제공합니다.
box-shadow 생성기 CSS
그림자 레이어를 여러 겹 쌓아 자연스러운 box-shadow를 만들고, 실시간 미리보기와 함께 CSS 코드를 복사할 수 있습니다.
색 변환기 (HEX · RGB · HSL · OKLCH) 색상
색 하나를 넣으면 HEX, RGB, HSL, OKLCH 표기로 한 번에 바꿔 줍니다. 어느 형식으로 붙여넣어도 알아서 인식합니다.
CSS 그라디언트 생성기 CSS
색 정지점을 넣고 각도·유형을 조절해 linear·radial·conic 그라디언트를 만듭니다. 미리보기를 보며 CSS를 복사할 수 있습니다.
이미지 포맷 변환기 (PNG · JPG · WebP) 이미지
PNG, JPG, WebP 사이를 브라우저 안에서 바꿉니다. 파일이 서버로 올라가지 않아 사진을 그대로 두고 변환할 수 있습니다.
네이밍 컨벤션 변환기 생산성
변수·클래스 이름을 camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE 등으로 한 번에 변환합니다. 여러 줄 일괄 처리도 됩니다.
최근 글
- 클로드 아티팩트 사용법 — 만들기, 고치기, 내보내기, 공유까지
클로드 아티팩트가 무엇인지, 어떻게 만들고 고치는지, 워드·PDF·파워포인트로 내보내는 법과 링크로 공유하는 법을 정리했습니다. 2026년 9월에 바뀐 새 방식 기준이고, 공유 전에 확인할 것과 예전 아티팩트 처리도 함께 다룹니다.
- 클로드 지난 대화 찾기, 메모리, 시크릿 모드, 파일 업로드 한도 총정리
클로드 지난 대화 찾기, 메모리 확인과 끄기, 기록이 남지 않는 시크릿 모드, 맞춤 지침, 한국어 설정, 대화 공유와 공유 취소, 파일 업로드 한도, 답변 다시 받기까지 자주 묻는 설정 8가지를 정리했습니다.
- 클로드 요금제 차이 — 무료, Pro, Max 중 나한테 맞는 것 고르기
클로드 무료, Pro, Max 5x, Max 20x 요금제의 가격과 사용량, 쓸 수 있는 기능 차이를 정리했습니다. 어떤 사람에게 어떤 요금제가 맞는지, 결제 전에 알아 둘 것까지 처음 결제하는 분 기준으로 설명합니다.
- 클로드 사용량 제한 걸렸을 때 — 남은 양 확인하고 아껴 쓰는 법
클로드에서 "5-hour limit reached" 메시지가 떴다면 사용량 한도에 걸린 것입니다. 한도가 어떻게 계산되는지, 남은 양은 어디서 보는지, 걸렸을 때 할 수 있는 것과 덜 걸리게 쓰는 습관을 정리했습니다.
- 클로드 코드 스킬과 플러그인 — 메모로는 안 되는 것들
CLAUDE.md 메모가 길어지기 시작했다면 스킬과 플러그인을 볼 차례입니다. 메모로 되는 것과 안 되는 것을 가른 뒤, 스킬과 플러그인이 어떻게 다른지, 어디서 찾아 설치하는지를 처음 쓰는 분 기준으로 정리했습니다.