영감 · 33 개 도구

웹 디자인 자료: 블로그, 책, 강의

이 인덱스의 나머지를 더 유용하게 만들어주는 읽을거리입니다. 타이포그래피와 레이아웃을 다루는 실전 가이드, 인터랙티브한 CSS 튜토리얼, 접근성을 갖춘 컴포넌트 패턴, 그리고 지금도 챙겨 볼 만한 간행물까지. 대부분 무료이며, 유료 책과 강의는 몇 년이 지나도 사람들이 계속 추천하는 것들입니다.

정렬

refactoringui.com

Refactoring UI읽을거리더 나은 인터페이스를 디자인하고 구축하는 실전 전략이 가득한 가이드입니다.

practicaltypography.com

Practical Typography읽을거리타이포그래피의 규칙과 텍스트 배치 방법을 다루는 온라인 책입니다.

web.dev

web.dev읽을거리웹 성능과 최신 웹 표준에 맞춘 개발에 관한 실용적인 지침입니다.

inclusive-components.design

Inclusive Components읽을거리접근성 있는 인터페이스 컴포넌트를 만드는 방법을 알려 주는 패턴 라이브러리입니다.

joshwcomeau.com

Josh Comeau읽을거리CSS가 실제로 어떻게 작동하는지 풀어 주는 인터랙티브 튜토리얼과 글입니다.

design-books.com

Design Books읽을거리다루는 분야별로 정리한 필독 디자인 서적 디렉터리입니다.

learn-kernels.com

Learn Kernels읽을거리GPU 커널 프로그래밍을 작성하고 이해하도록 돕는 인터랙티브 가이드입니다.

designsystemchecklist.com

Design System Checklist읽을거리실무에 바로 쓸 수 있는 디자인 시스템에 필요한 요소를 꼼꼼히 담은 체크리스트입니다.

learn-ui.com

Learn UI읽을거리사용자 인터페이스 디자인의 실무적인 면을 가르쳐 주는 영상 강좌입니다.

designspells.com

Design Spells읽을거리일상 속 소프트웨어에 숨어 있는 섬세한 디자인 디테일을 해부한 모음입니다.

goodui.org

Good UI읽을거리실제 데이터에 근거한 UI 디자인 패턴을 모은 라이브러리입니다.

abduzeedo.com

Abduzeedo읽을거리꾸준히 시각적 영감을 전해 주는 데일리 디자인 블로그입니다.

uxdesign.cc

UX Collective읽을거리사용자 경험 디자인에 관한 비평적 에세이를 모은 큐레이션 매체입니다.

smashingmagazine.com

Smashing Magazine읽을거리웹 디자이너와 개발자를 위한 글과 가이드를 제공하는 믿을 만한 자료원입니다.

tympanus.net

Codrops읽을거리창의적인 프론트엔드 실험과 실습 튜토리얼을 함께 발행하는 블로그입니다.

muz.li

boxesandarrows.com

Boxes and Arrows읽을거리정보 설계의 실무와 그 이면의 아이디어를 오랜 세월 다뤄 온 저널입니다.

designernews.co

Designer News읽을거리디자이너들이 최신 소식을 발굴하고 토론하는 커뮤니티 기반 피드입니다.

webdesignerdepot.com

Web Designer Depot읽을거리웹 표준과 디자이너가 쓰는 도구를 다루는 디자인 매체입니다.

designmodo.com

Designmodo읽을거리웹 디자인에 관한 글과 실용적인 도구를 함께 제공하는 매체입니다.

99designs.com

99designs Discover읽을거리브랜딩과 그 이면의 창의적 사고를 탐구하는 디자인 블로그입니다.

interfaces.dev

Interfaces읽을거리디지털 인터페이스 디자인을 탐구하는 월간 디지털 매체입니다.

makingsoftware.com

Making Software읽을거리디자이너가 쓰는 도구가 결국 소프트웨어를 어떻게 빚어내는지 살피는 에세이입니다.

visualrambling.space

Visual Rambling읽을거리한 번에 하나의 아이디어씩 인터페이스 디자인을 파고드는 개인 비주얼 에세이입니다.

degreeless.design

Degreeless Design읽을거리제품 디자인을 제대로 익히려는 사람을 위해 엄선한 학습 로드맵입니다.

svg.guide

SVG Guide읽을거리디자이너와 개발자를 위한, SVG 마크업 작성과 애니메이션에 관한 가이드입니다.

animations.dev

Animations.dev읽을거리정말로 자연스럽게 느껴지는 웹 애니메이션을 만드는 법을 가르쳐 주는 강좌입니다.

ui-skills.com

UI Skills읽을거리AI의 도움을 받아 인터페이스를 디자인하는 기법을 다루는 강좌입니다.

aiforui.dev

AI for UI읽을거리인터페이스 디자인 과정에 AI 워크플로를 활용하는 법을 다루는 강좌입니다.

ui.land

UI Land읽을거리앞서가는 디자인 엔지니어들과 그들의 작업에 관해 나눈 인터뷰 시리즈입니다.

lawsofux.com

Laws of UX읽을거리인터페이스의 사용성이 어떻게 느껴지는지를 좌우하는 심리학 원칙을 모은 모음입니다.

userinterface.wiki

User Interface Wiki읽을거리인터페이스 디자인 가이드라인과 규칙을 한곳에 정리한 지식 베이스입니다.

shapeof.ai

The Shape of AI읽을거리AI 기반 인터페이스를 위한 디자인 패턴을 조명하는 패턴 라이브러리입니다.

웹 디자인 자료: 블로그, 책, 강의 자주 묻는 질문

2026년 UI 배우기 좋은 웹 디자인 자료 추천

Designeer는 Refactoring UI, Practical Typography, web.dev 등 라이브 미리보기를 제공하는 웹 디자인 학습 자료 33개를 정리했습니다. 인터페이스를 만드는 사람을 위한 타이포그래피, CSS, 접근성, UI 노하우를 다룬 블로그, 책, 강의를 아우릅니다.

UI와 웹 디자인 공부에 좋은 책 추천

Refactoring UI, Practical Typography 같은 명저는 디자이너와 개발자 모두에게 널리 추천되며, 많은 웹 디자인 자료는 온라인에서 무료로 읽을 수 있습니다. 모든 프로젝트에서 쓰게 될 레이아웃, 타이포그래피, 시각적 위계의 기본기를 가르쳐 줍니다.

프론트엔드와 접근성 무료로 배우는 곳은?

web.dev, Inclusive Components, Josh Comeau의 블로그 같은 무료 자료는 CSS, 접근성, 최신 프론트엔드 노하우를 깊이 있게 다룹니다. 블로그, 책, 강의를 섞어 활용하는 것이 웹 디자인과 UI 실력을 가장 빠르게 끌어올리는 방법입니다.