디자인 개발

디자인 시스템, 플랫폼 가이드라인, 인터랙션 구현

디자인 시스템과 플랫폼 가이드라인, 인터랙션 구현에 필요한 자료를 모았습니다.

디자인과 개발이 만나는 자리에서 쓰는 자료를 모았습니다. 디자이너가 코드를 다 알 필요는 없지만, 개발자가 무엇을 기준으로 구현하는지 알면 시안을 넘긴 뒤 오가는 질문이 크게 줄어듭니다.

마지막으로 고친 날 2026. 10. 14 · 업데이트 기록 · 이 분야 안내

디자인 시스템 13

KRDS 디지털정부서비스 UI/UXkrds.go.kr
한국 디지털 정부서비스 UI/UX 가이드라인. 공공 프로젝트 필수 참고.
Material Design 3m3.material.io
구글 머티리얼 디자인 가이드라인과 컴포넌트.
Apple HIGdeveloper.apple.com
iOS·macOS 등 애플 플랫폼 휴먼 인터페이스 가이드라인.
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
여러 디자인 시스템의 동일 컴포넌트를 비교해 볼 수 있는 갤러리.
Zeroheightzeroheight.com
디자인 시스템 문서화 플랫폼.
Supernovasupernova.io
디자인 토큰 관리와 코드 동기화.
Zeplinzeplin.io
디자인-개발 핸드오프 툴.

컴포넌트 · 프레임워크 6

shadcn/uiui.shadcn.com
복사해서 쓰는 React 컴포넌트. 최근 웹 UI의 기본값처럼 쓰입니다.
Tailwind CSStailwindcss.com
유틸리티 클래스 기반 CSS 프레임워크.
Radix UIradix-ui.com
접근성이 보장된 헤드리스 UI 컴포넌트.
Storybookstorybook.js.org
UI 컴포넌트를 독립적으로 개발·문서화하는 툴.
Bootstrapgetbootstrap.com
가장 오래 쓰인 CSS 프레임워크. 반응형 그리드와 컴포넌트.
Uiverseuiverse.io
커뮤니티가 만든 오픈소스 CSS 버튼·로더·카드 모음.

애니메이션 · 인터랙션 9

Codropstympanus.net
고급 웹 인터랙션·애니메이션 데모와 튜토리얼.
CodePencodepen.io
프론트엔드 코드 스니펫 공유 플레이그라운드.
GSAPgsap.com
웹 애니메이션 라이브러리의 표준.
Motionmotion.dev
React·JS용 모던 애니메이션 라이브러리(구 Framer Motion).
Shadersshaders.com
웹용 셰이더 효과를 에디터로 디자인하고 컴포넌트로 바로 가져다 쓰는 플랫폼. 제작은 무료, 실서비스 적용은 유료.
Three.jsthreejs.org
웹 3D 라이브러리. 예제 갤러리가 인스피레이션이 됩니다.
Easings.neteasings.net
이징 함수 치트시트.
cubic-bezier.comcubic-bezier.com
CSS 베지어 이징 커브 시각 편집기.
Animistaanimista.net
CSS 애니메이션을 눌러보며 골라 코드 복사.

문서 · 접근성 · 실습 6

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
여러 기기 화면을 동시에 보며 반응형을 확인하는 브라우저.
Frontend Mentorfrontendmentor.io
디자인 시안을 코드로 구현하며 배우는 실습 플랫폼.

디자인 개발, 이렇게 고릅니다

디자인 시스템을 참고할 때

새로 디자인 시스템을 만든다면 처음부터 다 만들기보다 잘 만든 시스템을 먼저 읽어 보세요. 공공 프로젝트라면 KRDS를 따라야 하는 경우가 많고, 앱이라면 플랫폼 가이드인 Material Design 3와 Apple HIG가 기준이 됩니다. 문서를 어떻게 쓰는지 배우고 싶다면 Atlassian과 Shopify Polaris가 좋은 교과서입니다.

버튼이나 탭 같은 컴포넌트 하나를 두고 다른 회사들은 어떻게 했는지 비교하고 싶다면 Component Gallery가 가장 빠릅니다.

개발자와 같은 말을 쓰고 싶을 때

요즘 웹 서비스는 shadcn/ui와 Tailwind CSS로 만드는 경우가 많습니다. 개발 팀이 이걸 쓴다면 시안도 이 컴포넌트 구조에 맞춰 잡는 편이 구현이 빠르고 결과물도 시안과 가까워집니다. 컴포넌트를 어떻게 쪼갤지 고민된다면 Storybook으로 정리된 사례를 찾아보세요.

움직임을 정할 때

"부드럽게 움직이게 해 주세요"라고만 쓰면 사람마다 다르게 해석합니다. Easings.net이나 cubic-bezier.com에서 이징 곡선을 골라 값으로 넘기면 오해가 줄어듭니다. 화려한 인터랙션 아이디어는 Codrops와 CodePen에 많습니다.

넘기기 전에 확인할 것

색 대비와 글자 크기 같은 접근성 기준은 WCAG 2.2 Quick Reference에서, 특정 CSS 기능을 브라우저가 지원하는지는 Can I Use에서 확인할 수 있습니다. 반응형 화면은 Responsively로 여러 기기 크기를 한꺼번에 띄워 보면 빠뜨린 화면을 찾기 쉽습니다.