슬라이더로 배우는 UI·UX 디자인 기초
여백·정렬·색·타이포그래피부터 컴포넌트·모션까지, 78개 개념을 직접 조작하며 눈으로 익히세요. 디자인이 두려운 개발자와 프론트엔드 입문자를 위한 무료 학습 사이트입니다. 왼쪽에서 개념을 검색하거나 골라 시작하세요.
바로 만져볼 수 있는 개념들
여백Padding & Margin여백은 요소 테두리 안쪽(패딩)과 바깥쪽(마진)에 두는 빈 공간으로, 레이아웃에서 가장 자주 조절하는 값입니다.위계Hierarchy위계는 화면 속 요소들의 중요도 순서를 크기·굵기·색·간격의 차이로 눈에 보이게 드러내 시선의 순서를 잡아 주는 것입니다.대비 · 접근성Contrast Ratio대비는 글자와 배경 사이의 밝기 차이를 하나의 비율로 나타낸 값으로, 가독성과 접근성을 가늠하는 기준입니다.근접성Proximity근접성은 서로 가까이 놓인 요소를 눈이 자연스럽게 한 덩어리로 묶어 인식하는 성질로, 게슈탈트 네 원칙 중 하나입니다.버튼 해부Button Anatomy버튼 해부는 버튼을 라벨, 컨테이너, 여백, 모서리 반경이라는 부품으로 나눠 하나씩 조절하는 관점으로, 어떤 버튼이든 원하는 인상과 크기로 다듬게 해 줍니다.트랜지션 & 이징Transition & Easing트랜지션 & 이징은 값이 A에서 B로 바뀔 때, 그 변화를 시간에 걸쳐 어떤 속도의 곡선으로 이어 줄지 정하는 장치입니다.
이렇게 배워요
- 개념마다 슬라이더·토글을 직접 움직여 값이 화면을 어떻게 바꾸는지 눈으로 확인합니다.
- 정의·왜 중요한가·흔한 실수·실무 팁·관련 개념까지, 한 개념을 깊이 있게 다룹니다.
- 배운 개념은 컴포저에서 하나의 디자인 시스템으로 조립해 볼 수 있습니다.