[Frontend 기술 면접 대비] 시리즈는 Frontend 개발자로 취업하기 위해 내 프로젝트 경험과 지식들을 정리한 내용이다.
질문: UI 혹은 UX를 위해 사용해본 라이브러리가 있는가?
1. UI & UX 란?
UI: User Interface(사용자 인터페이스). 입력, 출력 등 사용자와 컴퓨터가 상호작용하는 시스템.
UX: User Experience(사용자 경험). 사용자가 서비스를 이용하면서 느끼는 직간접적인 경험.
- 즉 사용자가 서비스를 이용하면서 사용하는 모든 상호작용 시스템과 그로 인한 경험을 통틀어 말함.
- UI는 디자인, 폰트, 색깔 등 시각적인 것들을 주로 의미함.
- UX는 사용자가 서비스를 이용하면서 만족감을 느끼도록 하는 것들을 주로 의미함.
함께 보면 좋은 글
2. UI 라이브러리
프로젝트에 사용해봤던 라이브러리들과 그 경험들을 정리했다.
React
- React 공식 홈페이지에 따르면 React는 UI 라이브러리이다.
- React와 라이브러리에 대한 자세한 내용은 다음 포스트에서 다룬다.
Material UI
- 다양한 컴포넌트를 지원하고 커스텀도 자유로운 편이다.
- 래퍼런스도 많고 서드파티 라이브러리와 연동할 수 있다.
JavaScript와TypeScript모두 지원한다.- 디자인이 세련됐고 사용법이 어렵지 않다.
- 가끔 홈페이지 Docs 대로 작동하지 않는 컴포넌트가 있다.
- 일반적인
jsx문법과 다르게 작성해야 하는 부분이 있어서 혼동될 때가 있다.
Bootstrap-Vue
- Bootstrap 기반으로 만들어진 Vue용 라이브러리이다.
- 스타일링이 빠르고 쉽다.
- 커스텀이 어렵다.
- 중간에 버전이 업데이트되어 만들어놨던 컴포넌트들이 작동하지 않았다.
- 래퍼런스가 그다지 많지 않다.
Vue Carousel 3D
- VueJs로 3D Carousel을 구현하기 위해 사용한 라이브러리이다.
- 커스텀이 굉장히 어렵다.
- 적용도 어렵다. 최적화가 안된 느낌? 굉장히 무겁다.
3. 경험 정리
프로젝트에 주로 React를 사용했는데 React기반 Material UI를 자주 사용했다. 해당 라이브러리는 디자인이 세련되고 심플해 사용자들이 페이지에 만족감을 느낄 수 있게 해준다. 또, 각 컴포넌트의 용도 별로 적절하게 디자인되어 있어 사용하는데 혼동이 없다. 커스텀이 자유롭고 래퍼런스도 많아서 컴포넌트를 개발하고 수정하는 데 생기는 어려움을 쉽고 빠르게 해결할 수 있는 장점이 있었다.
Hans Jo