디자이너와 프론트엔드 개발자가 자주 쓰는 용어 총정리

그리드 (Grid)

웹 디자인의 레이아웃을 구성하는 가이드라인

디자이너는 12그리드를 기준으로 작업하는 경우가 많음

 

 

 

여백 (Space) / 마진 (Margin) / 패딩 (Padding)

여백을 의미. 디자이는 여백이라는 단어를 자주 쓰고 개발자는 margin/padding으로 해석

 

 

 

컴포넌트 (Component)

디자인 시스템에서 재사용 가능한 UI 단위를 의미

버튼, 인풋, 드롭다운 등

 

 

 

픽셀 퍼펙트

디자인 시안과 100% 똑같이 구현

 

 

 

반응형 (Responsive)

PC, 태블릿, 모바일 등 다양한 해상도에서 UI가 자연스럽게 잘 보이도록 구현한 것

 

 

 

스타일 가이드

디자인 시스템과 연결되는 개념. 색상, 폰트, 컴포넌트 규칙을 정의한 문서

 

 

 

웹 접근성

색맹 사용자도 볼 수 있는 색상 대비, 키보드 만으로 조작할 수 있는 UI 등을 고려하는 개념

 

 

 

 

 

 

 

Reference

디자이너와 프론트엔드 개발자가 자주 쓰는 용어 총정리