모든 개발자가 저장해 둘 만한 디자인 자료

디자이너가 없는 프로젝트는 아주 많습니다. 그렇다고 인터페이스가 사고처럼 보여도 되는 것은 아닙니다.

이 도구들은 보통 어긋나는 결정들을 덮습니다. 색, 대비, 여백, 이미지, 그리고 글자 크기의 단계.

Realtime Colors

아무것도 알려주지 않는 네모 다섯 개 대신 실제 레이아웃 위에서 팔레트를 시험합니다.

realtimecolors.com

Coolors

팔레트를 빠르게 만들고 고정한 뒤 CSS 변수로 내보냅니다.

coolors.co

접근성

WebAIM Contrast Checker

여기서 2분이면 어떤 점검에서도 떨어지는 회색 위 회색 글씨를 막을 수 있습니다.

webaim.org/resources/contrastchecker

타이포그래피

Type Scale

일관된 제목 단계를 만들어 글자 크기가 즉흥적으로 정해지지 않게 합니다.

typescale.com

일러스트

unDraw

무료 일러스트를 내려받기 전에 브랜드 색으로 바꿀 수 있습니다.

undraw.co

이미지

Squoosh

브라우저에서 압축하고, 화질 손실을 받아들이기 전에 눈으로 확인합니다.

squoosh.app

배경

Haikei

히어로 영역에 쓸 SVG 형태, 물결, 그러데이션을 몇 번의 클릭으로 만듭니다.

haikei.app

디자인 도구

Figma

직접 그리지 않더라도, 진짜 디자이너가 보낸 파일을 열려면 필요합니다.

figma.com

둘만 쓴다면 대비 검사기와 타입 스케일을 고르세요. 사용자가 실제로 알아채는 문제를 고쳐줍니다.

고르는 것에서 끝나지 않고, 만들어야 한다면?

웹 앱, API, 인프라, 인터페이스. 바르셀로나 기반 프리랜서, 어디에 있는 클라이언트든 환영합니다.

연락하기


코멘트

Leave a Reply

Your email address will not be published. Required fields are marked *