무료 도구
UI 디자인을 위한 무료 도구.
Codex로 디자인할 때 매일 하는 일을 돕는 작은 무료 도구들입니다. 이미지 준비, 색상 고르기, 명도 대비 확인, DESIGN.md 작성까지. 모두 브라우저에서 실행되며, 업로드도 회원가입도 필요 없습니다.
도구
- 이미지 변환기: PNG, JPG, WebP여러 이미지를 한 번에 PNG, JPG, WebP로 변환하고 파일 크기를 비교하세요.
- 이미지에서 색상 팔레트 추출어떤 이미지든 주요 색상을 많이 쓰인 순서대로 HEX 코드로 뽑아 줍니다.
- WCAG 2.2 명도 대비 검사기텍스트 색상과 배경 색상이 AA, AAA 기준을 통과하는지 확인하세요.
- DESIGN.md 생성기색상, 폰트, 간격을 Codex용 DESIGN.md로 만들어 줍니다.
- 색상 팔레트 생성기색상 하나로 조화로운 5색을 만들고, 마음에 드는 색을 잠근 뒤 HEX, Tailwind, DESIGN.md로 복사하세요.
- Tailwind 색상 팔레트 생성기색상 하나를 OKLCH로 계산한 50~950 스케일로 만들어 Tailwind v4 @theme 블록으로 받으세요.
- OKLCH 색상 변환기HEX, rgb(), hsl() 색상을 OKLCH로(또는 반대로) 변환하고, sRGB 밖이면 경고합니다.
- shadcn 테마 생성기색상 하나로 라이트·다크 shadcn/ui 테마 전체를 만들고, 실시간 프리뷰로 확인하세요.
도구를 함께 쓰는 방법
- 레퍼런스에서 색상을 추출하세요. 마음에 드는 사진, 스크린샷, 목업에서 팔레트 도구로 색상을 뽑습니다.
- 텍스트가 잘 읽히는지 확인하세요. 그 색상들 위에서 명도 대비 검사기로 확인합니다.
- 전부 DESIGN.md에 담으세요. 생성기로 만들어 두면 Codex가 모든 화면에서 같은 색상, 타이포그래피, 간격을 씁니다.
- 이미지를 변환하세요. 완성된 페이지에 들어갈 이미지를 WebP로 바꾸면 더 빨리 로드됩니다.