UI/UX
- UX(User Experience): 서비스 이용과정에서 사용자가 느끼는 경험
- UI(User Interface): 서비스 이용과정에서 사용자가 사용하는 그래픽 요소, 인터페이스
UI/UX Design
- UI/UX Design: 그래픽 요소 설계, 화면 레이아웃 설계, 서비스에 적합한 톤 고안, 서비스 이용 프로세스, 사용자 경험, 행동 설계
UI/UX Designer & Engineer 역할
- UX Designer: 서비스 사용자가 겪게 될 사용자 경험 설계 및 유지보수
- UX Engineer: 설계된 UI/UX 디자인을 실제 서비스에 사용 될 부품으로 구현 및 유지보수
Design System
- 서비스의 일관된 사용자 경험 제공
- 다양한 디바이스에 대응하는 재사용 가능한 UI 컴포넌트 및 가이드라인 제공
- 단일 앱이 아닌 웹, 모바일 등 서비스에 전체적으로 사용되는 시스템
- 서비스 규모가 커질수록 높은 가치
- 브랜드 정체성 확립
- 코드 작성 시간 절약, 가독성 향상
- UI 파편화 방지
- 중복을 제거하여 개발자들이 기능 개발에 집중 할 수 있도록하는 것을 목표로 함
Design System 작업 시 고려사항
- 이해하기 쉬운 가이드라인
- 편리한 탐색 (카테고리화)
- 브랜드 아이덴티티가 담겨있는지
- 다양한 디바이스 대응
- 유사 컴포넌트들 간의 통일성 유지
UI/UX 디자인 툴
- 스케치(Sketch): 디자인 프로토타이핑 툴
- 제플린(Zeplin): 실제 구현 시 필요한 디자인 속성 값 등을 공유
- 피그마(Figma): 협업에 특화된 툴, 리소스를 클라우드에 저장, 여러명 동시 편집 기능 제공
- 프레이머(Framer): 코드를 기반으로 디자인 결과물을 실시간으로 만들어 낼 수 있는 툴
기술
- React: UI 구현 라이브러리
- TypeScript: UI 컴포넌트 props를 타이핑하여 문서화, 컴포넌트 이용자가 사용시 필요한 정보들을 올바르게 제공하는지 확인 가능
- Jest: UI가 잘 만들어졌고 잘 동작하는지 테스트하는 테스트 코드를 작성하는 라이브러리
- Storybook: 컴포넌트 단위 개발 환경 제공
- Emotion: CSS in JS 라이브러리
- Framer-motion: React에서 애니메이션과 제스쳐를 쉽게 다룰 수 있도록 해주는 라이브러리
- SCSS: CSS pre-processor 스타일 nesting 가능
Deprecated