디자인 시스템·개발 참고 사이트 33곳
디자인 시스템과 플랫폼 가이드라인, 인터랙션 구현에 필요한 자료를 모았습니다.
- Material Design 3m3.material.io
구글 머티리얼 디자인 가이드라인과 컴포넌트.
- Apple HIGdeveloper.apple.com
iOS·macOS 등 애플 플랫폼 휴먼 인터페이스 가이드라인.
- KRDS 디지털정부서비스 UI/UXkrds.go.kr
한국 디지털 정부서비스 UI/UX 가이드라인. 공공 프로젝트 필수 참고.
- LINE Design Systemdesignsystem.line.me
라인의 공개 디자인 시스템.
- Atlassian Design Systematlassian.design
문서화가 잘 된 디자인 시스템의 교과서.
- Shopify Polarisshopify.dev
쇼피파이 디자인 시스템. 콘텐츠 가이드가 특히 좋습니다.
- IBM Carboncarbondesignsystem.com
IBM의 오픈소스 디자인 시스템.
- Ant Designant.design
엔터프라이즈 UI 디자인 언어와 React 컴포넌트.
- Design Systems Repodesignsystemsrepo.com
공개된 디자인 시스템 모음.
- Component Gallerycomponent.gallery
여러 디자인 시스템의 동일 컴포넌트를 비교해 볼 수 있는 갤러리.
- shadcn/uiui.shadcn.com
복사해서 쓰는 React 컴포넌트. 최근 웹 UI의 기본값처럼 쓰입니다.
- Tailwind CSStailwindcss.com
유틸리티 클래스 기반 CSS 프레임워크.
- Radix UIradix-ui.com
접근성이 보장된 헤드리스 UI 컴포넌트.
- Storybookstorybook.js.org
UI 컴포넌트를 독립적으로 개발·문서화하는 툴.
- Zeroheightzeroheight.com
디자인 시스템 문서화 플랫폼.
- Supernovasupernova.io
디자인 토큰 관리와 코드 동기화.
- Zeplinzeplin.io
디자인-개발 핸드오프 툴.
- Codropstympanus.net
고급 웹 인터랙션·애니메이션 데모와 튜토리얼.
- CodePencodepen.io
프론트엔드 코드 스니펫 공유 플레이그라운드.
- GSAPgsap.com
웹 애니메이션 라이브러리의 표준.
- Motionmotion.dev
React·JS용 모던 애니메이션 라이브러리(구 Framer Motion).
- Three.jsthreejs.org
웹 3D 라이브러리. 예제 갤러리가 인스피레이션이 됩니다.
- Easings.neteasings.net
이징 함수 치트시트.
- cubic-bezier.comcubic-bezier.com
CSS 베지어 이징 커브 시각 편집기.
- Animistaanimista.net
CSS 애니메이션을 눌러보며 골라 코드 복사.
- MDN Web Docsdeveloper.mozilla.org
HTML·CSS·JS 공식 레퍼런스 문서.
- CSS-Trickscss-tricks.com
CSS 기법 아티클과 가이드.
- Can I Usecaniuse.com
브라우저별 CSS·JS 기능 지원 여부 확인.
- WCAG 2.2 Quick Referencew3.org
웹 접근성 지침 빠른 참조.
- Responsivelyresponsively.app
여러 기기 화면을 동시에 보며 반응형을 확인하는 브라우저.
- Bootstrapgetbootstrap.com
가장 오래 쓰인 CSS 프레임워크. 반응형 그리드와 컴포넌트.
- Frontend Mentorfrontendmentor.io
디자인 시안을 코드로 구현하며 배우는 실습 플랫폼.
- Uiverseuiverse.io
커뮤니티가 만든 오픈소스 CSS 버튼·로더·카드 모음.