디자인·개발

Coolors는 이미지에서 색을 추출하는 기능, 대비 검사, 그라디언트, 공유 팔레트 라이브러리를 갖춘 색상 팔레트 생성 도구입니다.

Iconoir는 24×24 그리드의 SVG 아이콘 1,600개 이상을 제공하는 오픈 소스 아이콘 라이브러리로, MIT 라이선스이며 가입이 필요 없습니다. 전용 사이트에서 아이콘을 둘러보고 내려받을 수 있습니다.

Open Peeps는 Pablo Stanley가 손으로 그린 CC0 라이선스 일러스트 라이브러리로, 팔, 다리, 헤어스타일, 옷, 표정, 포즈를 섞어 캐릭터를 만들 수 있습니다.

Accessibility Insights for Web은 Chrome과 Microsoft Edge 확장 프로그램으로 동작하는 Microsoft의 도구로, 빠른 점검용 FastPass와 WCAG 2.1 AA 단계별 평가용 Assessment를 제공합니다.

Carrd는 프로필, 홍보 페이지, 랜딩 페이지 같은 한 페이지짜리 모바일 친화 사이트를 코드 없이 만들고 게시하는 서비스로, 계정당 최대 3개 사이트까지 무료로 시작할 수 있습니다.

iconmonstr는 316개 컬렉션에 4,784개가 넘는 무료 아이콘을 모아 둔 아이콘 사이트로, 검색할 수 있으며 라이선스 계약에 동의한 뒤 내려받습니다.

Jitter는 무료 템플릿이나 빈 캔버스에서 애니메이션을 만들고 결과를 동영상, GIF, Lottie로 내보내는 웹 기반 모션 디자인 도구입니다.

ManyPixels 갤러리는 다섯 가지 스타일과 17개 카테고리로 2만 개가 넘는 무료 일러스트를 제공하며, 출처 표시 없는 상업적 사용을 허용하는 라이선스의 일러스트 갤러리입니다.

Mockuuups Studio는 디자인을 수천 개의 기기 및 인쇄물 목업 위에 끌어다 놓아 보여 주는 목업 편집기로, 브라우저와 데스크톱 앱에서 쓸 수 있고 Figma, Sketch, Penpot, Adobe Express 플러그인으로도 사용할 수 있습니다.

Moqups는 웹사이트, 앱, 대시보드를 위한 와이어프레임, 목업, 인터랙티브 프로토타입, 다이어그램을 만드는 클라우드 기반 디자인 도구입니다.

Notepad++는 Windows용 무료 소스 코드 편집기로 메모장을 대신해 쓸 수 있으며, Scintilla 구성 요소를 기반으로 하고 GPL 라이선스를 따릅니다.

알아둘 점: 컴퓨터에 설치해야 합니다.

Rive는 상태 머신으로 인터랙티브 애니메이션과 인터페이스를 디자인하는 도구로, 브라우저 에디터와 데스크톱 앱을 제공하며 결과물은 iOS, Android, 웹, Flutter, React, 게임 엔진 같은 런타임에서 실행됩니다.

Spline은 브라우저와 Mac·Windows 데스크톱 앱에서 실시간 협업으로 3D 장면을 만들고, 인터랙션과 애니메이션을 추가해 웹, React 등의 형식으로 내보내는 3D 디자인 도구입니다.

Storyset는 Freepik Company의 일러스트 사이트로, 편집 가능하고 애니메이션이 있는 일러스트를 제공하며 무료 사용은 출처 표시를 조건으로 합니다.

The Noun Project는 창작자들이 만든 벡터 아이콘과 사진을 모은 대규모 라이브러리로, SVG와 PNG로 내려받을 수 있으며 무료 다운로드와 유료 로열티 프리 라이선스를 제공합니다.

unDraw는 브랜드에 맞게 색을 즉시 바꿀 수 있는 무료 SVG 일러스트를 제공하며, 출처 표시 없이 상업적, 비상업적 사용을 허용하는 라이선스의 일러스트 사이트입니다.

Visual Studio Code는 Windows, macOS, Linux와 브라우저(vscode.dev)에서 동작하는 Microsoft의 코드 편집기로, 확장 프로그램, Git, 통합 터미널, 디버깅을 제공합니다.

알아둘 점: 컴퓨터에 설치해야 합니다.

Zed는 Zed Industries가 Rust로 만든 코드 편집기로, 속도와 사람 및 AI와의 협업을 목표로 설계되었으며 macOS, Windows, Linux에서 실행됩니다.

알아둘 점: 컴퓨터에 설치해야 합니다.

Adobe Color는 색상환에서 조화 규칙으로 팔레트를 만들고, 이미지에서 팔레트와 그라디언트를 추출하며, 대비 검사와 색각 이상 시뮬레이션을 제공하는 Adobe 도구입니다.

Awwwards는 수상한 웹사이트를 카테고리와 기술별로 보여 주는 웹 디자인 어워드 및 영감 갤러리이며, 둘러보기는 무료이고 Pro 멤버십은 제출과 프로필 혜택을 제공합니다.

Color Hunt는 디자이너와 아티스트가 색, 분위기, 테마별로 준비된 색상 팔레트를 둘러보고 최신순, 인기순, 무작위로 정렬할 수 있는 팔레트 탐색 사이트입니다.

Dribbble은 디자이너가 작업을 공유하고, 최고의 디자이너와 그들의 작업을 발견할 수 있으며, 기업이 창의적인 인재를 찾는 디자인 플랫폼입니다.

Figma는 하나의 캔버스에서 인터페이스를 디자인하고 프로토타입을 만들며, 팀과 함께 작업하고, Dev Mode로 디자인을 코드로 바꿀 수 있는 디자인 도구로, figma.com과 데스크톱 앱으로 사용합니다.

Fontjoy는 딥러닝으로 글꼴 조합을 제안하고, 생성, 잠금, 편집 버튼으로 조합을 직접 바꿀 수 있으며, Google Fonts 라이브러리를 원본으로 삼는 웹 도구입니다.

Google Fonts는 fonts.google.com에서 제공되는 Google의 글꼴 컬렉션으로, 대부분 SIL Open Font License로, 일부는 Apache 2와 Ubuntu Font License로 배포됩니다.

Google Sites는 Google Workspace와 연동되는 Google의 도구로, 팀, 프로젝트, 행사 사이트를 끌어다 놓기로 코드 없이 만들 수 있습니다.

Leonardo는 목표 대비 비율로 색상 스케일과 적응형 테마를 만들어 주는, 접근성을 처음부터 고려한 Adobe의 오픈 소스 색상 도구입니다.

LottieFiles는 무료 및 프리미엄 기성 애니메이션 800,000개 이상을 갖춘 라이브러리, 웹 기반 Lottie Creator 에디터, Lottie와 dotLottie 형식을 제공하는 모션 디자인 플랫폼입니다.

Mobbin은 모바일·웹 앱 화면, 온보딩과 결제 같은 처음부터 끝까지의 플로우, 인터페이스 패턴, 웹사이트 섹션을 모아 놓은 디자인 레퍼런스 라이브러리이며, 무료 계정은 제한적으로 이용할 수 있습니다.

PageSpeed Insights는 페이지 주소를 모바일과 데스크톱 기준으로 분석하고, 실제 사용자 현장 데이터와 Lighthouse 실험실 데이터를 함께 보여 줍니다.

Penpot은 인터페이스 디자인, 와이어프레임, 인터랙티브 프로토타입을 위한 오픈 소스 디자인 플랫폼입니다. 클라우드에서 쓰거나 직접 서버에 설치할 수 있으며, SVG, CSS, HTML, JSON 같은 개방형 표준으로 동작합니다.

Phosphor Icons는 인터페이스, 다이어그램, 발표 자료용 MIT 라이선스 아이콘 패밀리로, 1,248개 아이콘과 여섯 가지 굵기(Thin, Light, Regular, Bold, Fill, Duotone)를 제공합니다.

Placeit은 Envato의 웹 기반 디자인 도구로, 의류, 디지털 기기, 인쇄, 주문형 인쇄 제품용 목업과 함께 로고 메이커, 디자인 템플릿, 영상 도구를 제공하며 무제한 다운로드는 구독으로 이용할 수 있습니다.

Rotato는 자신의 앱이나 웹 디자인을 30개가 넘는 기성 3D 기기 화면에 올려 애니메이션 영상이나 이미지로 만들어 주는 목업 생성기로, macOS 앱과 공개 베타 상태의 웹 버전이 있습니다.

알아둘 점: 컴퓨터에 설치해야 합니다.

Shots.so는 제품 스크린샷을 기기 프레임, 배경, 애니메이션 모션과 함께 프레젠테이션 이미지나 짧은 영상으로 바꿔 주는 웹 기반 목업 앱입니다.

Squarespace는 템플릿, 끌어다 놓기 편집기, AI 사이트 빌더로 코드 없이 웹사이트를 만들 수 있는 플랫폼으로, 호스팅, 도메인, 커머스 도구를 한곳에 모았습니다.

Sublime Text는 Sublime HQ가 Windows, macOS, Linux용으로 만든 유료 텍스트 편집기로, 코드, 마크업, 글쓰기에서의 성능을 내세우며 Python 3.8 API로 플러그인을 지원합니다.

알아둘 점: 컴퓨터에 설치해야 합니다.

Uizard는 텍스트 프롬프트로 여러 화면으로 이루어진 편집 가능한 프로토타입을 생성하고, 스크린샷과 손으로 그린 스케치를 편집 가능한 디자인으로 바꿔 주는 AI 기반 인터페이스 디자인 도구입니다.

WAVE는 접근성과 WCAG 오류를 웹페이지 위에 아이콘으로 표시하는 WebAIM의 도구로, 온라인 도구와 브라우저 확장 프로그램으로 제공됩니다.

Webflow는 코드를 쓰지 않고 시각적으로 사이트를 설계하고 CMS, 호스팅, 전자상거래 기능과 함께 게시할 수 있는 웹사이트 제작 플랫폼입니다.

WhatTheFont는 MyFonts의 글꼴 식별 도구로, 이미지 속 글자와 비슷한 글꼴을 데이터베이스에서 찾아 글자 미리보기가 있는 일치 목록을 보여 줍니다.