도구 실전 매뉴얼 소개

105개 무료 IT 도구/디자인

무료 디자인 도구

그라디언트, 컬러 팔레트, 박스 섀도, 파비콘, 레이아웃 도구까지 — 디자이너와 프런트엔드 개발자를 위한 도구 모음입니다. 무료로, 즉시, 브라우저 안에서 안전하게 사용할 수 있습니다.

무료 도구 18개

🎨색상 팔레트

이미지에서 색상 팔레트를 추출하거나 프로젝트에 어울리는 조화로운 색상 구성을 생성합니다.

▫파비콘 생성기

텍스트, 이모지, 업로드로 파비콘을 만듭니다. 웹 및 모바일용 전체 크기로 내보냅니다.

🎯색상 변환기

HEX, RGB, HSL, CMYK 간에 색상을 실시간 미리보기와 함께 변환합니다.

사용자 지정 길이로 단락, 문장, 단어 형태의 플레이스홀더 텍스트를 생성합니다.

16:9화면 비율 계산기

잠금 모드, 일반 프리셋, 크기 조정 계산기로 화면 비율을 계산합니다.

Aa대비 검사기

WCAG 접근성 대비 검사기. AA/AAA 준수, 색상 제안, 실시간 UI 미리보기.

□플레이스홀더 이미지

색상, 텍스트, 패턴, 그라디언트로 사용자 지정 플레이스홀더 이미지를 생성합니다. PNG 및 SVG 내보내기.

◇SVG 편집기

SVG를 붙여넣어 렌더링 확인, 파일 크기 최적화, 색상 편집, SVG/PNG/data-URI로 내보내기.

✦CSS 애니메이션 빌더

CSS 애니메이션을 시각적으로 디자인합니다. 키프레임 편집기, 타이밍 곡선, 프리셋, CSS 출력.

🌈그라디언트 텍스트

텍스트에 CSS 그라디언트 효과를 적용합니다. 2~4개 색상 정지점, 방향 제어, 프리셋. CSS 복사.

▪Box Shadow 생성기

CSS box shadow를 시각적으로 디자인합니다. 다중 레이어, 인셋, 뉴모피즘과 글래스모피즘 프리셋.

🖥스크린샷 목업

스크린샷을 MacBook, iPhone, iPad, 브라우저 프레임 안에 배치합니다. 배경, 그림자, PNG 내보내기.

Tt타입 스케일 계산기

시각적 미리보기로 타이포그래피 스케일을 생성합니다. Material, Tailwind, Bootstrap 프리셋. CSS 내보내기.

⊟간격 계산기

일관된 간격 스케일을 생성합니다. 시각적 미리보기, 4px/8px 프리셋, CSS 커스텀 속성 내보내기.

◠Border Radius 생성기

시각적 border-radius 편집기. 모서리를 드래그하거나 값 입력. 프리셋: 알약, 원형, 블롭. CSS 출력.

◐CSS 필터 편집기

시각적 CSS 필터 편집기. 블러, 밝기, 대비, 색조 회전 등 실시간 미리보기.

📏픽셀 눈금자

화면 위 눈금자 오버레이. 드래그하여 픽셀 단위 거리 측정. 디자인의 간격을 확인합니다.

🖼랜덤 이미지

캔버스 패턴으로 사용자 지정 크기의 랜덤 플레이스홀더 사진을 생성합니다. PNG 다운로드.

다른 카테고리

에이전트 옵스 (10)코드 (39)시스템 관리 (9)생산성 (9)마케팅 (8)비즈니스 (8)전체 도구 105개 보기