도구 · 디자인
디자인 도구
CSS 레이아웃·SVG 최적화·색상 변환·팔레트 등 디자이너·개발자 필수 도구 가이드. 13개 무료 도구를 인기순으로 정리했습니다.
AI 영상 모션 비주얼라이저
AI 영상 도구에 지시할 때 쓰는 카메라 무빙·이징·모션 타이포·전환·룩 용어를 움직이는 데모로 확인하고 프롬프트를 조합해 복사합니다.
SVG 최적화
Figma·Illustrator에서 내보낸 SVG의 불필요한 메타데이터를 제거합니다.
색상 변환기
HEX, RGB, HSL, HSV 색상 코드를 상호 변환합니다.
타입 스케일 생성기
황금비·Perfect Fourth 등 수학적 비율로 타이포그래피 스케일을 생성합니다.
색상 팔레트 생성기
기준 색상에서 보색, 유사색, 트라이아드 배색 팔레트를 자동으로 생성합니다.
그라디언트 생성기
Linear·Radial 그라디언트를 시각적으로 만들고 CSS 코드를 복사합니다.
컬러 대비 체크
전경색과 배경색의 대비율을 WCAG AA/AAA 기준으로 검사합니다.
OG 이미지 생성기
제목·배경·로고를 입력하면 1200×630 오픈그래프(OG) 이미지를 즉시 만들어 PNG로 다운로드합니다. 카카오톡·페이스북·X 링크 카드 미리보기 제공.
CSS 박스 쉐도우 생성기
슬라이더로 그림자 위치·흐림·크기·색상을 조절하면 box-shadow CSS 코드를 즉시 생성합니다.
이미지 리사이저
이미지 크기와 용량을 브라우저에서 바로 줄입니다. 비율 고정·SNS 사전 설정·WebP/PNG/JPG 출력 지원.
CSS 레이아웃 생성기
Flexbox와 Grid 옵션을 설정하면 CSS 코드를 즉시 생성합니다.
Favicon 생성기
텍스트나 이모지를 입력하면 16·32·180·192px PNG Favicon을 즉시 생성하고 다운로드합니다.
이미지 포맷 변환기
PNG·JPG·WebP 이미지를 브라우저에서 바로 변환하고 다운로드합니다.