허브 · 도구 122개 · 섹션 3개

UI·웹 디자인 영감

빈 캔버스를 열기 전에 여기서 시작하세요. 실제 웹사이트와 랜딩 페이지 갤러리, 인터페이스를 디자인할 때 쓰는 도구들, 그리고 좋은 인터페이스가 작동하는 이유를 설명하는 읽을거리를 모았습니다.

01 / 03

웹사이트 디자인 영감 갤러리

78섹션 열기

60fps preview

60fps갤러리UI 애니메이션을 연구하기 좋도록 움직이는 인터페이스를 담은 화면 녹화 영상을 영감용으로 모아 둔 컬렉션.

Awwwards갤러리매일 뛰어난 웹 디자인과 프런트엔드 완성도를 선정해 소개하는 어워드 프로그램이자 갤러리.

Cosmos preview

Cosmos갤러리이미지와 레퍼런스를 모아 창의적인 영감 보드를 만들 수 있는 비주얼 무드보드 공간.

Curated Design preview

Curated Design갤러리원하는 스타일로 둘러볼 수 있도록 웹사이트 영감을 미적 스타일별로 분류해 모은 갤러리.

Layers preview

Layers갤러리디자이너들이 자신의 작업물을 공개적으로 올리고 공유하며 피드백과 영감을 주고받는 플랫폼.

minimal.gallery

Minimal Gallery preview

Minimal Gallery갤러리절제된 디자인 영감을 찾는 이들을 위해 미니멀하고 담백한 웹사이트를 모아 둔 컬렉션.

Mobbin preview

Mobbin갤러리실제 출시된 제품의 모바일·웹 앱 화면과 사용자 흐름을 검색할 수 있는 라이브러리.

Saaspo preview

Saaspo갤러리마케팅과 제품 디자인 영감을 위해 엄선한 SaaS 랜딩 페이지 갤러리.

SEESAW preview

SEESAW갤러리한 블록씩 살펴볼 수 있도록 페이지 섹션별로 정리한 웹사이트 디자인 영감.

Supahero preview

Supahero갤러리랜딩 페이지를 디자인할 때 참고할 수 있도록 엄선한 웹사이트 히어로 섹션 모음.

Imageory preview

Imageory갤러리창의적 영감을 위해 이미지와 그 뒤에 쓰인 프롬프트를 함께 보여 주는 비주얼 갤러리.

backgrounds.supply

Backgrounds Supply preview

Backgrounds Supply갤러리다음 프로젝트에 바로 적용할 수 있도록 직접 제작한 웹사이트 배경 모음.

backgrounds.venust.ai

Venust Backgrounds preview

Venust Backgrounds갤러리제작에 사용된 원본 프롬프트가 함께 제공되는 무료 AI 생성 웹사이트 배경.

Details preview

Details갤러리디테일을 공부할 수 있도록 선도적인 디지털 제품의 마이크로 인터랙션을 가까이에서 뜯어보는 자료.

Sombra preview

Sombra갤러리어두운 팔레트를 중심으로 디자인하는 이들을 위한 다크 모드 웹사이트 인터페이스 쇼케이스.

Dribbble preview

Dribbble갤러리디자이너들이 샷과 콘셉트를 올려 작업을 공유하고 영감을 얻는 글로벌 커뮤니티.

Behance preview

Behance갤러리다양한 디자인 분야의 창의적인 포트폴리오를 공개하고 둘러볼 수 있는 Adobe의 플랫폼.

Recent Design preview

Recent Design갤러리꾸준한 디자인 영감을 얻을 수 있도록 매주 수상작급 웹사이트를 새로 선정해 소개하는 서비스.

navbar.design preview

navbar.design갤러리사이트 메뉴를 디자인할 때 참고할 수 있도록 엄선한 내비게이션 바 패턴 모음.

footer.design preview

footer.design갤러리마무리 섹션에 대한 영감을 주는 창의적인 웹사이트 푸터를 선별해 모은 모음.

Land-book preview

Land-book갤러리자신의 분야에 맞는 디자인을 찾아볼 수 있도록 산업별로 정리한 방대한 랜딩 페이지 갤러리.

Collect UI preview

Collect UI갤러리진행 중인 디자인 챌린지에서 모은, 컴포넌트별로 태그된 매일의 UI 디자인 영감.

siteinspire.com

SiteInspire preview

SiteInspire갤러리스타일과 주제별로 필터링할 수 있는, 정교하게 다듬어진 웹 디자인을 오랫동안 소개해 온 쇼케이스.

Lapa Ninja preview

Lapa Ninja갤러리레이아웃 영감을 얻기 위해 둘러볼 수 있도록 선별한 반응형 랜딩 페이지 모음.

UX Archive preview

UX Archive갤러리UX 참고용으로 화면 단위로 캡처한 모바일 온보딩 흐름을 모아 둔 아카이브.

Screenlane preview

Screenlane갤러리여러 앱의 UI 영감을 위해 인터페이스 화면을 검색할 수 있는 갤러리.

Flowbase preview

Flowbase갤러리사이트 레이아웃을 만들 때 쓸 수 있는 프리미엄 UI 컴포넌트와 인터랙션 패턴을 제공하는 소스.

Hover States preview

Hover States갤러리사이트가 모션과 호버를 어떻게 다루는지 공부할 수 있도록 독창적이고 인터랙티브한 웹 디자인을 모은 쇼케이스.

SaaSFrame preview

SaaSFrame갤러리랜딩 페이지 디자인 영감으로 삼을 수 있도록 수백 개의 SaaS 마케팅 페이지 스크린샷을 모아 둔 자료.

landingfolio.com

Landingfolio preview

Landingfolio갤러리레이아웃과 마케팅 영감을 위해 둘러볼 수 있는 방대한 랜딩 페이지 디자인 라이브러리.

Pttrns preview

Pttrns갤러리앱이 흔한 화면들을 어떻게 처리하는지 참고할 수 있는 모바일 UI 패턴 디렉터리.

onepagelove.com

One Page Love preview

One Page Love갤러리원페이지 사이트를 만드는 이들을 위한 싱글 페이지 웹사이트 디자인 쇼케이스.

designspiration.com

Designspiration preview

Designspiration갤러리영감을 불어넣어 줄 비주얼 아트와 디자인 이미지를 찾아볼 수 있는 검색 플랫폼.

bestwebsite.gallery

Best Website Gallery preview

Best Website Gallery갤러리뛰어난 웹 디자인의 레퍼런스로 삼을 수 있도록 탁월한 웹사이트를 엄선해 모아 둔 아카이브.

theinspirationgrid.com

Inspiration Grid preview

Inspiration Grid갤러리여러 분야에 걸친 창의적인 비주얼 디자인과 작업을 조명하는 온라인 매거진.

Scrnshts preview

Scrnshts갤러리모바일 앱을 마케팅할 때 영감을 얻을 수 있도록 엄선한 App Store 스크린샷 디자인 모음.

Are.na preview

Are.na갤러리비주얼 북마크를 하고 리서치를 공유 보드로 정리할 수 있는 협업 플랫폼.

Appinspo preview

Appinspo갤러리UI와 인터페이스 영감을 위해 검증을 거친 모바일 앱 디자인 갤러리.

darkmodedesign.com

Dark Mode Design preview

Dark Mode Design갤러리더 어두운 인터페이스 디자인에 대한 영감을 주는, 다크 모드 웹사이트에 특화된 쇼케이스.

Pinterest preview

Pinterest갤러리모든 주제에 걸친 창의적인 아이디어를 저장하고 찾아볼 수 있는 비주얼 디스커버리 플랫폼.

navbar.gallery preview

navbar.gallery갤러리사이트 메뉴를 디자인할 때 참고할 수 있도록 현대적인 내비게이션 바만 집중적으로 모은 갤러리.

posts.design preview

posts.design갤러리게시물과 피드 레이아웃에 대한 영감을 위해 엄선한 소셜 미디어 그래픽 디자인 아카이브.

loadmo.re preview

loadmo.re갤러리참신하고 한계를 넘어서는 영감을 주는 실험적인 모바일 웹사이트 디자인 갤러리.

inspora.design preview

inspora.design갤러리모던한 영감을 얻기 위해 둘러볼 수 있는 현대적인 비주얼 웹 디자인 아카이브.

cta.gallery preview

cta.gallery갤러리전환에 초점을 맞춘 영감을 위해 엄선한 콜 투 액션 버튼과 배너 모음.

desengs.com preview

desengs.com갤러리디자인 엔지니어링 포트폴리오와 그것을 만든 사람들의 뒷이야기를 모은 디렉터리.

isthereanytool.app

isthereanytool preview

isthereanytool갤러리디자인, 제작, AI 작업을 위한 잘 알려지지 않은 도구를 발굴해 소개하는 디렉터리.

designeng.tools

designeng.tools preview

designeng.tools갤러리디자인 엔지니어링 도구와 리소스, 영감을 한곳에 모아 둔 엄선된 허브.

bestdesignsonx.com

bestdesignsonx.com preview

bestdesignsonx.com갤러리X에서 가져온 디자인 지향 크리에이터와 돋보이는 게시물을 엄선해 모은 피드.

designbookmark.com

Design Bookmark preview

Design Bookmark갤러리한곳에서 찾을 수 있도록 유용한 디자인 리소스와 링크를 북마크해 둔 디렉터리.

rebrand.gallery

Rebrand Gallery preview

Rebrand Gallery갤러리아이덴티티가 어떻게 발전하는지 살펴볼 수 있도록 브랜드 리디자인을 전후로 보여 주는 갤러리.

curations.supply

Curations preview

Curations갤러리프로젝트에 둘러보고 가져다 쓸 수 있도록 엄선한 디지털 디자인 에셋 라이브러리.

Landing Love preview

Landing Love갤러리모션 영감을 위해 애니메이션별로 정리한, 보는 재미가 있는 랜딩 페이지 모음.

Motionimo preview

Motionimo갤러리애니메이션과 움직임을 공부할 수 있는 방대한 모션 디자인 클립 라이브러리.

before.click preview

before.click갤러리App Store 마케팅 영감을 위해 전환율이 높은 앱 스크린샷 콘셉트를 모은 쇼케이스.

Swiped preview

Swiped갤러리여러 소셜 플랫폼에서 모은 돋보이는 디자인 게시물 모음.

Landdding preview

Landdding갤러리레이아웃과 마케팅 영감을 위해 매일 업데이트되는 창의적인 랜딩 페이지 카탈로그.

designengineer.tools

designengineer.tools preview

designengineer.tools갤러리디자인 엔지니어의 업무에 맞춘 필수 도구를 한데 모은 모음.

Insposite preview

Insposite갤러리영감이 필요할 때 둘러볼 수 있는 디자인 레퍼런스와 도구 디렉터리.

loader-buttons.appllama.io

Loader Buttons preview

Loader Buttons갤러리마이크로 인터랙션 아이디어를 참고할 수 있는 25가지 로딩 버튼 애니메이션 갤러리.

What Ships preview

What Ships갤러리X의 게시물에서 모은 돋보이는 제품 출시 데모 영상 모음.

GreatStuff preview

GreatStuff갤러리좋은 도구를 더 빨리 찾을 수 있도록 창의적인 도구를 꼼꼼히 검증해 모아 둔 아카이브.

Great Apps preview

Great Apps갤러리눈여겨볼 만한 뛰어난 iOS 앱을 매주 선정해 소개하는 갤러리.

curated.domains

Curated Domains preview

Curated Domains갤러리네이밍과 브랜딩 영감을 위해 창의적인 최상위 도메인을 사용하는 브랜드를 모은 모음.

Sections.wtf preview

Sections.wtf갤러리블록 단위로 참고할 수 있도록 실제 웹사이트 섹션과 히어로 레이아웃을 모은 갤러리.

Browse.cool preview

Browse.cool갤러리뛰어난 촉각적 감각과 인터랙션을 기준으로 선정한 웹사이트 모음.

Folios Gallery preview

Folios Gallery갤러리영감을 얻기 위해 살펴볼 수 있도록 뛰어난 디자이너 포트폴리오를 선별한 디렉터리.

wwwtf.site preview

wwwtf.site갤러리탐험해 볼 만한, 기발하고 실험적인 인터랙티브 웹의 구석구석을 모은 갤러리.

Early preview

Early갤러리눈여겨볼 만한 초기 단계의 소프트웨어 제품을 발굴해 소개하는 디스커버리 플랫폼.

openalternative.co

OpenAlternative preview

OpenAlternative갤러리인기 있는 SaaS 도구를 그에 상응하는 오픈 소스 대안과 짝지어 주는 디렉터리.

everywhere.tools

Everywhere Tools preview

Everywhere Tools갤러리직접 손으로 하는 디자인과 제작 작업을 위한 오픈 소스 창작 도구 모음.

gallery.jessyin.world

Jessy In's Gallery preview

Jessy In's Gallery갤러리참여자들이 디자인 영감을 불어넣을 색다른 비주얼을 모으는 공유 무드보드.

wallofportfolios.in

Wall of Portfolios preview

Wall of Portfolios갤러리영감을 얻기 위해 둘러볼 수 있는 디자인 엔지니어링·제품 포트폴리오 쇼케이스 월.

Detail Design preview

Detail Design갤러리여러 소프트웨어 인터페이스에서 발견되는 정교하게 다듬어진 마이크로 인터랙션을 기록한 아카이브.

betwnstudios.com

Betwn Studios preview

Betwn Studios갤러리SaaS 제품을 위한 현대적인 웹 경험을 디자인하고 구축하는 스튜디오.

saaslandingpage.com

SaaS Landing Page preview

SaaS Landing Page갤러리영감을 얻기 위해 살펴볼 만한 돋보이는 SaaS 랜딩 페이지를 엄선한 쇼케이스.

bestsaaswebdesigns.com

Best SaaS Web Designs preview

Best SaaS Web Designs갤러리디자인 영감으로 삼을 수 있도록 엄선한 SaaS 웹사이트 디자인 갤러리.

A1 preview

A1갤러리다음 프로젝트의 영감으로 삼을 수 있도록 모아 둔 웹사이트 디자인 갤러리.

02 / 03

인터페이스 디자인 도구와 UI 랩

11섹션 열기

Figma preview

Figma인터페이스 디자인팀과 함께 인터페이스를 디자인하고 프로토타이핑하는 협업 플랫폼입니다.

Framer preview

Framer인터페이스 디자인웹사이트를 디자인한 뒤 바로 웹에 게시할 수 있는 비주얼 캔버스입니다.

make.design preview

make.design인터페이스 디자인작성한 프롬프트를 완성도 높은 인터페이스 디자인으로 바꿔 주는 AI 생성기입니다.

Penpot preview

Penpot인터페이스 디자인SVG를 기반으로 설계되어 브라우저에서 동작하는 오픈소스 웹 디자인 플랫폼입니다.

Spline preview

Spline인터페이스 디자인인터랙티브 장면을 위한 물리 엔진을 내장한 브라우저 기반 3D 디자인 소프트웨어입니다.

interfacecraft.dev

Interface Craft preview

Interface Craft인터페이스 디자인현대 디지털 인터페이스에 담긴 장인정신을 탐구하는 아티클 모음입니다.

UI Labs preview

UI Labs인터페이스 디자인애니메이션 UI 컴포넌트를 분해해 어떻게 만들어졌는지 보여 주는 실험실입니다.

UIWTF preview

UIWTF인터페이스 디자인웹의 한계를 밀어붙이는 실험적인 인터페이스 패턴을 선보이는 쇼케이스입니다.

Lab01 preview

Lab01인터페이스 디자인한 디자인 스튜디오가 공개한 정교한 인터페이스 실험 모음입니다.

design.dev preview

design.dev인터페이스 디자인디자인 토큰과 시스템을 구축하고 관리하는 AI 기반 에디터입니다.

UI Playbook preview

UI Playbook인터페이스 디자인UI 컴포넌트를 디자인할 때 거치게 되는 일반적인 상태들을 정리한 가이드입니다.

03 / 03

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

33섹션 열기

refactoringui.com

Refactoring UI preview

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

practicaltypography.com

Practical Typography preview

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

web.dev preview

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

inclusive-components.design

Inclusive Components preview

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

joshwcomeau.com

Josh Comeau preview

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

design-books.com

Design Books preview

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

learn-kernels.com

Learn Kernels preview

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

designsystemchecklist.com

Design System Checklist preview

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

Learn UI preview

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

designspells.com

Design Spells preview

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

Good UI preview

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

Abduzeedo preview

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

UX Collective preview

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

smashingmagazine.com

Smashing Magazine preview

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

Codrops preview

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

Muzli preview

Muzli읽을거리최신 디자인 트렌드를 하나의 피드로 엮어 주는 데일리 다이제스트입니다.

boxesandarrows.com

Boxes and Arrows preview

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

designernews.co

designernews.co

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

webdesignerdepot.com

Web Designer Depot preview

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

Designmodo preview

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

99designs Discover preview

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

Interfaces preview

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

makingsoftware.com

Making Software preview

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

visualrambling.space

Visual Rambling preview

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

degreeless.design

Degreeless Design preview

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

SVG Guide preview

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

Animations.dev preview

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

UI Skills preview

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

AI for UI preview

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

UI Land preview

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

Laws of UX preview

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

userinterface.wiki

User Interface Wiki preview

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

The Shape of AI preview

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

UI·웹 디자인 영감 사이트 (122) — Designeer