UI를 디자인할 때 필요한 개념인 UI 디자인 패턴과 UI 레이아웃 구성법을 알고있어야 한다.
UI 디자인 패턴은 화면에 배치할 수 있는 자주 쓰이는 컴포넌트를 말하고, UI 레이아웃 구성법은 이 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 방법론이다.
UI 디자인 패턴
은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다. 쉽게 말하자면 UI 컴포넌트 라고 할 수 있다.
자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 쉬워지고, 개발자들과 디자이너, PM과의 의사소통이 원할해져 협업 효율이 높아진다.
Modal은 기존에 있던 화면 위에 오버레이 되는 창을 뜻한다.
Toggle은 On/Off를 설정하는 방식처럼 켜고 끌 수 있는 스위치를 의미한다.
색상, 스위치의 위치 등의 시각적인 효과를 주어 사용자가 직관적으로 파악할 수 있게 해야한다.
Tab은 콘텐츠를 분리해서 보여주고 싶을 때 사용한다.
Tag는 콘텐츠를 설명하는 키워드를 사용하여 라벨을 붙이는 역할을 한다.
Autocomplete는 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것을 의미한다.
Accordion은 접었다 폈다 할 수 있는 컴포넌트로 사용자가 섹션을 펼쳐 컨텐츠를 확인하고, 필요하지 않으면 축소할 수 있는 인터페이스다.
Carousel은 이미지나 카드와 같은 콘텐츠를 회전목마처럼 돌아가면서 콘텐츠를 표시해주는 인터페이스다.
Pagination은 한 페이지에 띄우기엔 정보가 너무 많을 경우에, 책처럼 번호를 붙여 페이지를 구분해주는 인터페이스다.
Infinite Scroll과 Continuous Scroll은 같은 말이며 둘 다 무한으로 스크롤을 내릴 수 있는 것을 의미한다.
GNB(Global Navigation Bar)
는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴를 의미하고, LNB(Local Navigation Bar)
는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 뜻한다.
위 예시에서는 탭 형식으로 최상단에 위치한 메뉴가 GNB, 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴가 LNB다.
레이아웃
은 테스트와 이미지 정보, 기능적 요소 등 여러 가지 구성 요소를 시각적, 기능적 계획에 맞춰 특정한 공간에 효과적으로 배치하는 것을 의미한다.
UI 레이아웃을 구성하는 방법인 그리드 시스템을 사용할 수 있다.
그리드(grid)
는 수직, 수평으로 분할된 격자무늬를 뜻하며, 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다.
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하며, Column, Gutter, Margin라는 세 가지 요소로 구성된다.
Column은 콘텐츠가 위치하게 될 세로로 나누어진 영역이다.
컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.
이미지 속 화면 크기의 구분선을 break point
라고 하며, 내가 만들고자 하는 UI가 어디에 속하는 지 파악하고 컬럼 개수를 지정해야 한다.
기기 마다 화면의 크기가 조금씩 다르고 브라우저의 크기를 사용자 마음대로 조정할 수 있어, Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.
Gutter는 Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 준다.
Gutter의 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 줄 수 있어 이 간격을 잘 정해야한다. 주의할 점은 Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정해야한다는 것이다.
Margin은 화면 양쪽의 여백을 의미한다.
너비를 px
같은 절대 단위를 사용해서 고정 값으로 사용해도 되지만, vw
, %
같은 상대 단위를 사용하여 유동성을 주는 것이 좋다.
네이버에서도 컬럼 그리드 시스템을 사용한다. 화면이 12개의 컬럼으로 나누어져 있고 컬럼에 맞춰서 콘텐츠가 배열되어 있음을 알 수 있다.
Reference
CODESTATES (SEB_FE_43)
ui-patterns.com
UI 디자이너를 위한 32가지 사용자 인터페이스 요소
m2.material.io
시은님 화이팅 💗 본받고 갑니다 블로그 정리 킹왕짱 ......