디자인 시스템, 스타일 가이드, 컴포넌트 라이브러리, 디자인 시스템의 차이, 구글과 애플의 디자인 시스템
디자인 시스템, 스타일 가이드, 컴포넌트 라이브러리, 디자인 시스템의 차이, 구글과 애플의 디자인 시스템 1. 디자인 시스템 디자인 시스템은 재사용 가능한 컴포넌트(UI 요소)와 패턴을 정의하여, 전체 디자인에 일관성 있게 적용할 수 있도록 만든 가이드라인이나 규칙을 의미함 즉, 여러 곳에 공통적으로 사용할 디자인에 대해 어떻게 디자인해야 하고, 사용해야 하는지 가이드라인이나 규칙을 정해 놓는 것 디자인 시스템은 주로 디지털 디자인에서 사용됨 디자이너의 역할이 단순한 스타일을 창조하는 역할에서 비즈니스 문제를 해결하는 역할로 바뀌며 디자인 조직의 규모도 커지고, 디자인 시스템이 대두됨 디자인 시스템 장점 커뮤니케이션 효율화 콤팩트한 UI 구축 가능 일관성 있는 UX 제공 궁극적으로 새로운 디자인을 만드는..
2024. 4. 6.
터치 스크린 제스처 종류, 1 배수 디자인, 입력 방식과 물리적 거리가 디자인에 끼치는 영향
터치 스크린 제스처 종류, 1 배수 디자인, 입력 방식과 물리적 거리가 디자인에 끼치는 영향 1. 터치 스크린 제스처 종류 Flick(≒ Swipe) Flick는 한 손가락으로 빠르게 선을 긋는 제스처 ex) 농구공 던지기 게임 Swipe는 손가락을 직선 방향으로 움직여 화면 미는 제스처 ex) 사진을 옆으로 넘기며 볼 때 사용 Flick와 Swipe는 각각의 제스처를 추상적으로 범주화한 것으로 대부분의 앱 서비스가 Flick와 Swipe를 구분하지 않고 사용함 즉, 앱 개발자가 제스처를 시작하는 지점, 거리, 속도를 자의적으로 규정해 명명했을 뿐임 Pinch 핀치, Spread 스프레드 두 손가락을 이용해 확대, 축소할 때 사용하는 제스처 Pinch는 안쪽으로 모으는 제스처, Spread는 바깥쪽으로 ..
2024. 4. 6.
웹 사이트 디자인에 필요한 그리드 시스템, 박스 모델, 폰트 단위, 툴 별 행간 차이, Proportional 폰트, Monospace 폰트
웹 사이트 디자인에 필요한 그리드 시스템, 박스 모델, 폰트 단위, 툴 별 행간 차이, Proportional 폰트, Monospace 폰트 1. 그리드 시스템 그리드 시스템(Grid System) 정적인 인쇄 영역과 달리 다양한 스크린 크기에 대응하기 위한 규칙을 만들기 위해 사용 Column(컬럼) 실제로 콘텐츠를 포함하는 부분 컬럼의 너비는 콘텐츠가 스크린 크기에 맞춰질 수 있도록 고정값이 아닌 백분율로 결정 Gutter(거터) 컬럼과 컬럼 사이의 공간 거터의 너비는 브레이크포인트(반응형에 의해 레이아웃이 바뀌는 포인트)에 따라 결정 Margin(마진) 콘텐츠의 왼쪽 및 오른쪽 가장자리 사이의 공간(양쪽 여백) 반응형 웹에서는 일반적으로 12 컬럼 그리드 시스템을 사용 1, 2, 3, 4, 6 컬럼..
2024. 4. 5.
