무료 온라인 디자인 도구
그라데이션, 색상 대비, 레이아웃, SVG, 텔레프롬프터, 퓨즈비즈 도안 — 디자이너와 프런트엔드 개발자를 위한 필수 도구를 등록 없이 바로 사용하세요.
CSS 그라데이션 생성기
linear / radial 그라데이션 CSS를 시각적으로 만들고 실시간 미리보기
도구 열기 →색상 대비 검사기
WCAG 공식으로 텍스트와 배경의 대비비를 계산하고 AA / AAA 판정
도구 열기 →CSS 레이아웃 생성기
Flexbox / Grid 속성을 시각적으로 설정하고 실시간 데모와 CSS 생성
도구 열기 →SVG 경로 편집기
path d에 이동 / 확대·축소 / 회전을 적용하고 SVG를 즉시 출력
도구 열기 →SVG 코드 편집기
SVG 소스를 검증·미리보기·최적화하고 크기 통계 제공
도구 열기 →온라인 텔레프롬프터
전체 화면에서 일정 속도로 스크롤되는 텔레프롬프터, 미러와 속도 조절 지원
도구 열기 →퓨즈비즈 도안 생성기
사진을 퓨즈비즈 도안으로 변환, Artkal / MARD / Perler 색상 코드 매핑
도구 열기 →이 디자인 도구를 선택해야 하는 이유
완전 로컬 실행
그라데이션 계산, 대비 검사, SVG 해석, 텔레프롬프터 스크롤이 모두 브라우저 안에서 실행됩니다. 디자인 내용은 서버로 전송되지 않습니다.
수정 즉시 반영
입력과 결과가 실시간으로 연동됩니다. 색상 스톱, 레이아웃 속성, 변환 값을 바꾸면 미리보기와 생성된 코드가 즉시 새로 고쳐져 바로 복사해 쓸 수 있습니다.
표준 준수 출력
대비는 WCAG 상대 휘도 공식을 따르고, 그라데이션과 레이아웃은 표준 CSS를, SVG는 엄격한 XML 검증을 통과한 결과를 출력해 바로 붙여 넣을 수 있습니다.
자주 묻는 질문
이 디자인 도구는 무료인가요?
네. 모든 도구가 영구 무료이며 회원가입도 이용 횟수 제한도 없습니다. 사이트는 광고로 운영됩니다.
디자인이나 대본이 업로드되나요?
아니요. 그라데이션 생성, 대비 계산, SVG 해석, 텔레프롬프터 스크롤은 모두 브라우저 안의 JavaScript로 실행되며 서버로 전송되지 않습니다.
생성된 CSS / SVG를 바로 프로젝트에 쓸 수 있나요?
네. 그라데이션과 레이아웃은 유효한 CSS 선언이고, SVG는 네임스페이스를 유지한 채 XML 검증을 통과했으므로 스타일시트, 인라인 스타일, 아이콘 파일에 바로 붙여 넣을 수 있습니다.
디자인 도구는 모두 브라우저 안에서 실행됩니다.