UX & UI
화면을 단순한 느낌이나 심미적인 부분만 고려하지 않고 체계적인 설계를 통해 기획해야 한다.
UX (User Experience)
유저와 가장 가까이에 있는 분야, 데이터를 기반으로 유저를 조사하고 분석해서 개발자, 디자이너가 이해할 수 있게 소통하는 것
유저가 느끼는 느낌, 태도, 행동을 디자인 한다.
좋은 UX를 설계하기 위해서는 사람들의 마음과 생각을 이해하고 정리해서 제품에 녹여내야 한다.
유저 리서치, 데이터 설계 및 정제, 유저 시나리오, 프로토타입 설계가 필요하다.
(직무 : UX Researcher, User Researcher)
UI (User Interface)
유저에게 보여지는 화면을 디자인
UX를 고려한 디자인을 반영, 이 과정에서 기능 개선이나 추가가 필요한 경우 front-end 개발자와 많이 소통한다.
(직무 : Product Designer, Interaction Designer)
interface
서로 다른 두개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점
사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템
ex. CLI나 GUI를 사용해서 컴퓨터를 조작
UI 디자인은 잘 되었으나 UX를 고려하지 않은 예시
Can't Unsee
A game where you need to pick the design that is most correct. Test your attention to details!
cantunsee.space
학문으로서의 UX & UI
GUI : 유저가 보는 일반적인 시각적인 디자인
UI : 유저가 보거나 듣는 등 비시각적인 부분까지 포함한 디자인
UX : 유저가 겪는 모든 경험(컴퓨터와 관련이 없는 부분까지도 포함)
HCI (Human Computer Interface) : 인간과 컴퓨터 사이의 상호작용에 대한 학문
Prototyping
Software prototyping
애플리케이션 프로토타입을 만드는 것
개발중인 소프트웨어 프로그램의 완성되기 전 버전을 만드는 것
한번에 완성 버전이 나올 수 없기 때문에 중간마다 현재 상태를 체크하는 과정
Figma
협업에 중점을 두면서 UI/UX 설계에 초점을 맞춤
웹 기반 시스템을 가짐
실시간으로 팀원들이 협업할 수 있는 기능을 제공
직관적이고 다양한 디자인 툴 제공
figma 사용자들이 만든 다양한 플러그인 존재
'Front-end > Vue.js' 카테고리의 다른 글
router 주소 이동 (선언적, 프로그래밍적) / Dynamic Route Matching / lazy-loading / Navigation Guard (전역 가드, 라우트 가드, 컴포넌트 가드) (0) | 2022.11.09 |
---|---|
Routing , Vue Routing 시작하기 (0) | 2022.11.09 |
Vuex를 사용한 Todo 프로젝트 만들기 / Local Storage, vuex-persistedstate (0) | 2022.11.07 |
Lifecycle Hooks - created, mounted, updated, destroyed (0) | 2022.11.07 |
Vuex state management - store : state, actions, mutations, getters (0) | 2022.11.07 |