🖥FrontEnd/UI & UX 2

TIL) 와이어프레임과 프로토타입 공통점, 차이점

와이어프레임(wireframe) = 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다. (스켈레톤) 3가지 레벨의 피델리티(fidelity) 1. Lo-Fi Wireframe (아이디어를 구체화 시키며 큰 그림을 잡을 때 좋다.) 2. Mid-Fi Wireframe (해당 페이지가 어떻게 작동하게 될 지 예상할 수 있다.) 3. Hi-Fi Wireframe (Hi-Fi한 수준까지 만드는 경우는 거의 없다.) 프로토타입(prototype) = 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적 ➥ 프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능!! 3가지 레벨의 피델리티(fidelity) 1. ..

TIL) UX와 UI, UI 디자인 패턴 종류, UI 레이아웃 구성법, 그리드 시스템

UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. * 화면상의 그래픽 뿐만 아니라, 키보드, 마우스도 UI이다! GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 요즘에는 스마트폰과 컴퓨터뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등 화면과의 상호 작용을 통해 사용하는 기기들을 어렵지 않게 찾아볼 수 있다. 이처럼 현대 사회에서는 그래픽 UI, 즉, GUI(Graphical User Interface)가 굉장히 중요한 역할을 한다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보..