본문 바로가기

Design/Resources

[Tools] 편리한 Web 제작! 최신 온라인 도구 36가지 모음

728x90

 

안녕하세요. UI / UX디자이너 챕입니다.

Web 제작 시 어렵다고 생각했던 일이나 귀찮은 작업을 버튼 한 번으로 완료할 수 있다면 얼마나 좋을까요?

이번 포스팅에선 날마다 진화를 거듭하고 있는 Web 제작에 도움이 되는 유용한 최신 온라인 도구를 소개해드립니다.

디자인 제작 시간 단축에 딱 맞는 도구에서부터 원격으로 재택근무 시 편리한 새로운 기능과 서비스를 갖춘 독특한 도구들이 포함됩니다.

 

카테고리 별로 구성해두었으니, 목적에 맞는 도구를 찾아 사용해보세요.


목차

  1. Web 제작에 편리한 도구
  2. 색상 도구
  3. 디자인 도구
  4. 일러스트 라이브러리
  5. 프로토 타입 도구
  6. 아이콘 도구
  7. 코라 원격 워크 도구
  8. 재밌고 크리에이티브한 도구

Web 제작의 효율성, 생산성 향상! 화제의 최신 온라인 도구 정리

 

1. Web 제작에 편리한 도구

daisyUI

Tailwind CSS 프레임 워크를 지원하는 무료 컴포넌트 사이트입니다. 모든 UI 컴포넌트가 갖추어져 있을 뿐 아니라 우측 상단 버튼으로 라이트, 다크 모드, 레트로 등의 색상 테마를 전환 할 수 있습니다.

 

 

 

 

CSS Hell

너무 일반적인 CSS의 실수를 모범답과 함께 설명 해주는 잔기술 테크닉으로 정기적으로 업데이트되고 있습니다.

 

 

 

 

Learn CSS

CSS를 기초부터 마스터! 팟캐스트 음성으로 강의를 들으면서 배울 수 있습니다.

 

 

 

Screen Sizes

iPhone과 iPad, Apple 시계, Apple TV 등 모든 Apple 장치의 화면 크기와 상세 스펙을 정리해 확인할 수 있는 치트 시트입니다.

 

 

 

 

Calendso

예약 달력을 만들 수있는 오픈 소스 온라인 도구. 데모는 여기에서 확인 가능합니다.

 

 

 

 

Fluid Typography

창 크기에 맞게 문자 텍스트를 조절하여 작성하면 어떤 화면에서도 아름답게 볼 수 있습니다.

 

 

mmm α

드래그 앤 드롭으로 이미지를 콜라주하여 웹 사이트를 만들 수 있는 간단한 도구. 오른쪽 하단의 아이콘을 클릭하면 현재 페이지를 편집해 볼 수 있습니다.

 

 

 

 

 

 

Frontend Practice

프론트 엔드 엔지니어의 스킬 업을 목표로 매회 나오는 표제 웹 사이트를 눌러 확인해보세요.

 

 

 

 

 

2. 색상 도구

Gradient King

100 여종의 아름다운 CSS 그라데이션을 모은 라이브러리에서 원하는 그라데이션을 선택하면 CSS를 복사 - 붙여 넣기 할 수 있습니다.

 

 

 

 

Tail Blend

CSS mix-blend-mode속성을 실시간으로 미리 볼 수 있는 온라인 도구입니다. 취향에 맞게 색상이나 이미지 등을 변경할 수 있습니다.

 

 

 

 

CSS Color Gradient Generator

배경 화면 및 UI 요소에 유용한 CSS 컬러 그라데이션을 만들 수 있는 도구입니다. 완성 된 색상은 그래도 CSS로 복사됩니다.

 

 

 

 

Easing Gradients

더 매끄러운 그라데이션 색상을 위해 혼합 방법을 조정할 수있는 도구입니다. 이미지 위에 문자를 얹을 때 유용하게 사용할 수 있습니다.

 

 

 

 

Glassmorphism CSS Geneartor

글라스 모드 필터 효과를 쉽게 만들 수 있는 알고리즘 CSS입니다. 클릭 하나로 완성 된 CSS 코드를 복사 - 붙여 넣기 할 수 있습니다.

 

 

 

Boring Avatars

사용자 이름과 선택한 색상으로 임의의 SVG 모양을 자동으로 생성할 수 있는 JavaScript React 라이브러리.

 

 

 

 

3. 디자인 도구

Free Mockup Generator

데스크톱과 태블릿, 스마트폰을 사용한 3D 목업을 온라인에서 무료로 만들 수 있습니다.

 

 

 

 

Market

저작권 걱정 없는 CC0라이선스로 자유롭게 이용할 수 있는 3D 모델과 텍스처, HDRIS 등을 모은 라이브러리. threejs에서 바로 사용할 수 있는 스타터 소재도 볼 수 있습니다.

 

 

 

 

Triangula

알고리즘을 이용해 이미지를 다각형 아트로 표현해주는 도구입니다. 데모는 여기 에서 적용해 볼 수 있습니다. (이미지 사이즈는 최대 800px까지 권장됩니다.)

 

 

 

 

Make your photo 16 × 9

사진을 업로드하면 수직 사진에서도 16 × 9로 조정 해주는 편리한 도구입니다.

 

 

 

 

Social Image Generator

콘텐츠 기사에 맞춰 소셜 미디어 용 이미지를 자동으로 생성하는 WordPress 플러그인.

 

 

 

 

Uncut

유니크하고 모던한 서체 카탈로그입니다. 산세리프와 세리프, 모노 스페이스, 디스플레이 서체 중에 선택해 다운로드 할 수 있습니다.

 

 

 

 

 

4. 일러스트 라이브러리

Animated Illustrations

100개 이상의 애니메이션 된 일러스트를 Lottie 위한 JSON 파일, PNG 또는 After Effect 파일 형식으로 다운로드할 수 있는 서비스. 무료 버전에서는 PNG 파일만 다운로드 가능합니다.

 

 

 

 

Storyset

일러스트의 색상을 사용자가 정의하거나 애니메이션을 추가할 수 있는 무료 온라인 도구입니다. Figma 용 플러그인도 공개되어 있습니다.

 

 

 

 

This is Tech

비즈니스와 기술, 암호화폐, 과학 분야를 현대적이고 세련된 일러스트로 표현한 라이브러리. 무료 데모 버전에서는 PNG 파일 형식을 다운로드할 수 있습니다.

 

 

 

 

 

5. 프로토 타입 도구

FlowBite - Tailwind Figma Design Kit (Free Edition)

2020년 말부터 급속히 인기가 확산되고 있는 Tailwind CSS를 지원하는 디자인을 Figma로 만들 수 있는 키트.

 

 

 

 

6. 아이콘 도구

Iconic

인터페이스 용 24x24px 미니 SVG 아이콘 190개 이상을 갖춘 무료 라이브러리. 새로운 아이콘이 매주 추가됩니다.

 

 

 

 

Iconoir

현재 900개 이상의 SVG 아이콘을 갖춘 세계 최대 규모의 오픈 소스 라이브러리. 원하는 아이콘을 클릭하면 바로 다운로드 됩니다. 모든 아이콘은 MIT 라이선스로 소스코드 공개 필요없이 개인용, 상업용 무료로 사용이 가능합니다. 

 

 

 

 

7. 코웍 원격 작업 도구

Coscreen

팀 내에서 화면 공유뿐만 아니라 모든 데스크톱 응용 프로그램의 실시간 공동 작업이 가능한 툴입니다.  화상 채팅도 가능하고, 무료 플랜도 준비되어 있습니다.

 

 

 

8. 재밌고 크리에이티브한 도구

3D 자동차 시뮬레이터

Google지도 위를 자동차 경주처럼 자유롭게 돌아다닐 수 있는 서비스입니다. 위치를 지정하면 전 세계 어디서나 달릴 수 있습니다.

 

 

 

 

Generated Photos

설정 항목을 클릭하여 가공의 인물 표정을 만들 수 있는 툴입니다. 미래의 모습이나 성형한 모습을 시뮬레이션 해 볼 수도 있겠네요. 

 

 

 

margin-margin-revoulution CSS

아래에서 다가오는 margin 방향을 타이밍에 맞춰 누르는 온라인 게임. 화살표 키를 눌러 시작해보세요.

 

 

Direct Share

파일 크기의 제한 없이 파일을 전송할 수 있는 무료 온라인 서비스. 파일은 타사 서버에 업로드되는 것은 아니라 최종 사용자에게 직접 전송됩니다.

 

 

 

Scan the World

피라미드와 다비드 상 등 세계의 모든 귀중한 조각과 문화 공예품을 그대로 3D 프린트할 수 있도록 데이터를 무료로 제공하는 사이트입니다. 사용자가 실제로 만든 작품도 볼 수 있습니다.

 

 

 

 

PINTR

얼굴이 찍힌 사진을 업로드하면 라인 하나로 그려진 그림을 SVG로 변환 해주는 툴입니다.

 

 

 

 

Next Full Moon Calendar

다음 보름달이 언제인지 가르쳐주는 달의 정보로 가득한 미디어 사이트입니다.

 

 

 

 

Facebook Cover Photo Maker

Facebook 커버 사진을 쉽게 만들 수 있는 온라인 도구입니다. 이미지 업로드 및 문자 텍스트 추가, 스티커와 로고의 추가도 가능합니다.

 

 

 

 

Acid Banger

알고리즘에 의해 랜덤한 소리를 자동으로 브라우저에서 생성하는 도구입니다. BPM이나 멜로디 등 세세한 설정도 가능합니다.

 

 

마지막으로 재밌고 유용한 온라인 툴 정리는 여기까지입니다.