작가의 글을 더 이상 구독하지 않고,
새 글 알림도 받아볼 수 없습니다.
앱 ∙ 웹 사이트 레퍼런스 어디서 찾을까?
앱 ∙ 웹 사이트 레퍼런스, 디자인 시스템, 컬러 확인 확장 프로그램
by
Feb 08. 2025
앱 ∙ 웹 레퍼런스 사이트, 디자인 시스템 참고 사이트, 웹 사이트의 컬러, 폰트 확인 크롬 확장 프로그램을 공유합니다.
앱 ∙ 웹 사이트 레퍼런스
WWIT
- 국내 UI/UX 모바일 패턴
유저스푼 UX Pattern Archive(UPA)
- 국내 UX 패턴
ui bowl
- 유아이볼(유료) 국내 UI/UX 패턴 모음
Designus
- 국내 앱/웹 레퍼런스 모음
Dnas
- 국내 및 해외 앱 레퍼런스 (유료 월 구독, 계정당 15회 무료 보기)
- UI 디자인 요소 가이드
GDWEB
- 지디웹, 국내 웹사이트 레퍼런스
GDWEB, 무료 이미지 나눔
- 대학생, 취업 준비생은 이미지 저작권 제약 없이 개인 포트폴리오 제작, 상업적 이용도 가능
- 사회적 기업 및 사회복지를 목적으로 하는 비영리 기관도 저작권 제약 없이 자유롭게 사용
Korea Web Design
- 국내 웹 레퍼런스
dbdic
- 카테고리별 웹디자인 벤치마킹 모음
Mobbin
- 모빈(유료) 해외 앱/웹 레퍼런스 모음
- 프로덕트의 세부를 볼 수 있는 장점
https://mobbin.com/browse/ios/apps
abtest.design
- A/B 테스트 사례
Product Hunt
- 전세계에서 출시한 제품을 공유하고 발견할 수 있는 커뮤니티
- 최신 인기 있는 테크 스타트업 제품 확인
- 테크 스타트업계의 글로벌 빌보드 차트로 여겨짐
Refero
- 해외 UI/UX 패턴/요소 모음
Design Spells
- 마이크로 인터렉션 모음
출처: uxstorage_
Awwwards
- 해외 웹 사이트
FWA
- 인터랙티브 웹 어워드
Siteinspire
- 해외 웹 사이트
https://www.siteinspire.com/
Ecomm.Design
- 해외 이커머스 웹 사이트 디자인
HOVERSTAT.ES
- 감각적인 해외 웹 사이트
Webflow 커뮤니티
- 해외 웹 사이트
S5 Style
- 일본 미니멀 웹 디자인 쇼케이스
MUUUUU
- 일본 감성 웹 디자인 갤러리
Bratus
- 베트남의 브랜딩 및 전략적 디자인 에이전시 Bratus의 웹사이트
SaaS 레퍼런스
SaaS UI design
- 해외 SaaS UIUX 디자인
SaaS Interface
- 해외 SaaS UIUX 디자인 사례
SaaS Landing page
- 해외 SaaS 랜딩 페이지 디자인
SaaS Landing Page
- 해외 SaaS 회사가 만든 About Us 페이지
AppSumo
- 해외 비즈니스 소프트웨어와 앱을 제공하는 판매 사이트
랜딩 페이지 레퍼런스
One Page Love
- 해외 랜딩페이지 모음
Landingfolio
- 해외 랜딩 페이지 모음
LANDING GALLERY
- 랜딩 페이지 디자인 모음
UX Tips
- 해외 랜딩 페이지 UX 팁
디자인 트렌드
서핏
- 인스퍼레이션 콘텐츠
Muzli - Design inspiration hub
- 뮤즐리 디자인 인스퍼레이션 크롬 확장 프로그램
드리블
핀터레스트
Behance
UI8
- 디자인 트렌드
https://ui8.net/
- 디자인 알고리즘 활용하여 트렌드 확인 추천
https://www.instagram.com/
Cosmos
- 디자인 인사이트 모음
Collect UI
- UI 디자인 챌린지
Typewolf
- 트렌디한 타이포그래피
디자인 시스템
KRDS (Korea Design System) 라이브러리
범정부UIUX 디자인 시스템 공식 피그마 리소스 채널
- KRDS(범정부UI/UX 디자인 시스템): 대한민국 정부의 디지털 서비스 전반에서 일관성, 사용성, 접근성을 보장하기 위해 설계된 공식 디자인 시스템
Gmarket Design System
LINE Design System
- LINE DESIGN의 원칙과 가치를 담은 LINE Design System (라인: 다양한 국가에서 19개 언어로 제공)
Wanted Design Library
Wanted Design System
CLASS101 - Product System Component
클래스101 프로덕트 시스템 컴포넌트
millie Design Library 2.0
밀리 디자인 라이브러리
SOLID 디자인 시스템
- 신한 은행 SOLID 디자인 시스템
11번가 디자인시스템
Google Material Design 3
Google Material Design 2
Apple 휴먼 인터페이스 가이드라인(HIG)
해외 디자인 시스템 70개 총정리
디자인시스템 관련 자료 모음집
Design Systems For Figma
- 전 세계의 피그마 디자인 시스템 모음
Design Systems
- 피그마 커뮤니티에 공개된 디자인 시스템 모음
Design Systems Repo
- 디자인 시스템 사례, 아티클, 툴 모음
Component Gallery
- 컴포넌트 갤러리, 모든 컴포넌트 자료 모음
Design System Hub
- 디자인 시스템 원본 파일, 문서 모음 플러그인
- Design System Hub
- 출처: 피그마 피디아
Sneak Peek
- 기업의 피그마 파일 에피소드 영상 모음
- 출처: 볼드 UX
디자이너를 위한 디자인 시스템 리소스
- 디자인 시스템 리소스 모음 (필수 가이드, 플러그, 도구 등)
Design System Checklist
- 디자인 시스템을 계획, 구축 및 발전시키는 데 도움이 되는 오픈소스 체크리스트
- 출처: 데일리 디자인 정보 공유 세션
Roadmap.sh
- 로드맵, 가이드 및 기타 교육 콘텐츠를 만드는 커뮤니티
- 단계별 가이드를 통해 디자인 시스템을 만드는 방법 로드맵
Free Figma Component Library
- 무료 피그마 컴포넌트 라이브러리
Wireframe Examples
- 와이어 프레임 예시 (일부 무료)
- 출처: 와이어 프레임 제작할 때 참고하기 좋은 서비스 2가지(요즘IT)
피그마 피디아
- UXUI 참고 사이트 및 아티클 모음
컬러, 폰트 확인 크롬 확장 프로그램
Extract Colors DevTool
- 웹페이지의 전체 컬러 팔레트 자동 추출
- HEX, RGB, CSS 변수 형태로 제공
- 컬러 피커 기능 제공
Web Color Palette Extractor
- 원클릭으로 웹사이트 컬러 추출
- HEX, RGB, HSL 코드 제공
- 추출한 컬러 팔레트 저장 및 PDF 내보내기 가능
ColorZilla
- 브라우저에서 직접 컬러 픽업 가능
- 웹페이지 색상 분석기 클릭
- 사용된 CSS 색상 보여짐
- 개별 색상 선택 > 컬러 핵사 코드, 사용된 부분 포커스 표시됨
WhatFont
- 폰트와 함께 컬러 정보도 제공
- 마우스 호버 시, 폰트 정보
- RGB 컬러 표시에 호버 시, 컬러 핵사 코드 조회 가능
CSS Peeper
- 전체 웹사이트의 컬러 팔레트 추출
더 보기
- UX/UI∙프로덕트 디자이너를 위한 학습 방법, 자료 모음