뱅킹 앱의 홈 화면, 검색창, 설정 페이지 등 여러분이 사용하는 모든 화면은 누군가가 디자인한 것입니다. UI 디자인은 화면 배열 방식, 각 컨트롤의 모양, 터치 시 반응하는 방식을 결정하는 분야입니다.
UI 디자이너는 몇 가지 빌딩 블록을 사용하여 작업합니다. 레이아웃과 간격은 관련된 항목을 함께 그룹화합니다. 시각적 계층 구조는 가장 중요한 작업을 눈에 띄게 만듭니다. 타이포그래피와 색상은 의미와 브랜드를 담고 있습니다. 버튼, 입력, 카드, 메뉴 등의 구성 요소는 한 번 디자인된 후 재사용되므로 제품이 일관성을 갖습니다.
각 구성 요소에는 상태도 있습니다. 버튼에는 기본, 마우스 오버, 누름, 집중, 비활성화 및 로드 상태가 있으며 각 상태에는 디자인이 필요합니다. 상태를 생략하는 것은 모형에서는 디자인이 완성된 것처럼 보이지만 실제 제품에서는 깨진 것처럼 느껴지는 가장 일반적인 이유 중 하나입니다.
상호작용과 모션도 UI의 일부입니다. 마이크로 인터랙션이라고도 불리는 작은 응답은 탭이 작동했는지 확인하고, 진행 상황을 표시하거나, 항목이 어디로 갔는지 설명합니다. 빠르고 목적이 분명해야 하며 움직임 감소에 대한 시스템 설정을 존중해야 합니다.
오늘날 대부분의 UI 디자인은 Figma에서 이루어지며 Penpot, Sketch 및 Lunacy가 일반적인 대안으로 사용됩니다. 완성된 앱의 실제 데이터 및 입력에 반응해야 하는 인터페이스의 경우 디자이너는 대화형 도구도 사용합니다. 우리가 만드는 ExodeUI는 그 중 하나입니다. React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter에서 실행되는 하나의 열린 파일에 상태, 스프링 물리학 및 이벤트를 저장합니다.