본문으로 건너뛰기
Toolars
둘러보기

디자인 / 비주얼 시스템 랩

디자인 / 도구

실시간 미리보기로 CSS와 색상 시스템을 프로토타이핑하고 코드를 바로 복사해요.

간격 게이지, 컬러 칩, cubic-bezier 스트립, 그림자 샘플로 구성한 모듈형 스타일 견본

디자인

핵심 도구 17개. 실시간 시각 피드백과 바로 복사할 수 있는 결과로 CSS와 색상 시스템을 만들어요.

전체 17개 중 17개 표시

디자인 워크플로 / 시각적 판단을 쓸 수 있는 규칙으로 바꿔요.

시스템을 조율하고 출력을 명확하게 유지해요.

기하 설정

측정 가능한 값으로 간격, 모서리 반경, 패턴, 형태를 제어해요.

맞는 도구 열기

코드 가져가기

디자인을 다시 만들지 않고 생성된 CSS와 토큰을 복사해요.

맞는 도구 열기

집중 작업을 위해 설계 / 설정 없이도 쓸 수 있는 결과.

설계부터 브라우저 우선.

브라우저 우선

작업을 바로 열어요. 패키지 설치도 계정도 필요 없어요.

보이는 처리

모든 단계에서 입력, 결과, 상태, 실행 방식을 확인해요.

바로 내보내기

다듬을 필요 없이 유용한 결과를 복사하거나 저장해요.

관련 카테고리

다른 집중 컬렉션으로 작업을 이어 가요.

확장 프로그램 / 개발 중

디자인, 브라우저 바로 가기 하나로.

Chrome과 Firefox 바로 가기는 준비 중이에요. 지금은 웹 카탈로그를 이용하고 출시 계획을 확인해요.

Chrome / 개발 중Firefox / 개발 중

시스템 디자인 노트

모든 시각적 선택을 재현 가능하게 만들어요.

의도적 제약 사용

무작위 값 대신 간격, 스케일, 기하 규칙에서 시작해요.

맥락 속에서 대비 확인

색이 쓰일 배경과 글자 크기 기준으로 판단해요.

생성된 CSS 읽기

프로덕션에 넣기 전에 값과 브라우저 지원을 확인해요.

시작하기 전에 궁금한 점?

어떤 디자인 도구가 로컬에서 실행되나요?
모든 카드에 실행 방식 라벨이 붙어요. 로컬 도구는 입력을 브라우저 안에 두고, 클라우드·하이브리드 도구는 외부 처리를 시작 전에 안내해요.
디자인 변환을 하면 원본이 바뀌나요?
Toolars는 브라우저의 별도 사본을 다뤄요. 직접 내려받아 덮어쓰지 않는 한 원본 파일이나 텍스트는 그대로예요.
도구를 저장할 수 있나요?
네. 게스트 즐겨찾기는 이 브라우저에 저장되고, 로그인 기능이 갖춰지면 계정에서 동기화할 수 있어요.
잘못된 결과는 어떻게 신고하나요?
각 도구 페이지에 신고 창이 있어요. 전송되는 피드백은 직접 입력한 메시지와 선택한 페이지 정보뿐이에요.

필요한 디자인 유틸리티가 없나요?

입력값, 변환 내용, 기대하는 결과를 알려 주세요.

도구 요청하기