오늘은 프론트엔드 개발자로서 꼭 알아야하는 UI/UX 지식에 대해 학습해볼 것이다.
UI 란?
User Interface , 사용자 인터페이스
사람들이 컴퓨터와 상호 작용하는 시스템을 의미함
화면상의 그래픽 요소 외에도 키보드,마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI라고 볼 수 있음
GUI 란?
사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말함
ex) 운영체제의 화면 , 애플리케이션의 화면
프론트엔드 개발자로서 UI는 대부분 GUI 를 의미함
UX 란?
User Experience , 사용자 경험
사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험
즉 제품, 서비스 그 자체에 대한 경험은 물론 홍보, 접근성,사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 함
UX와 UI의 관계
UX는 UI를 포함함
좋은 UX가 좋은 UI를 의미하거나 , 좋은 UI가 항상 좋은 UX를 보장하지는 않음
UI 디자인
UI 레이아웃
그리드 시스템 (Grid System)
그리드는 수직, 수평으로 분할된 격자무늬를 뜻하며 , 말 그대로 화면을 격자로 나눈 다음 격자에 맞춰 콘텐츠를 배치하는 방법임
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘
컬럼 그리드 시스템을 사용하며 Margin,Column,Gutter 세가지 요소로 구성함
1. Margin
화면 양쪽 여백을 의미함. 너비는 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고 , vw, % 같은 상대 단위를 사용하여 유동성을 주어도 좋음.
2. Column
콘텐츠가 위치하게 될 , 세로로 나누어진 영역임 . 컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개 , 태블릿에서 8개 , PC에서는 12개의 컬럼으로 나눔. Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋음
3. Gutter
Column 사이의 공간으로 ,콘텐츠를 구분하는데 도움을 줌 . Gutter의 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고 , 넓을수록 각 콘텐츠가 독립적인 느낌을 줌
다만 너무 좁으면 콘텐츠를 구분하기 힘들어지고 답답한 느낌을 줌. 너무 넓으면 콘텐츠가 따로 노는 느낌을 주면서 UI가 어수선해짐 . 따라서 Gutter 는 아무리 넓어도 컬럼 너비보다는 작게 설정해야함 .
