[UI/UX] 1. 디자인 공통 요소 (1)

이번 장에서는 UI 디자이너라면 알아야하는 UI 공통 요소에 대해 배운다.

• 레이아웃
• 컬러
• 아이콘
• 타이포그래피
• 그래픽

외에도, 썸존, 터치타깃, 제스처, 네비게이션, 상태 등이 있다.

1. 레이아웃 & 그리드 시스템

• 레이아웃(Layout) : 화면 크기, 텍스트, 이미지, 여백 등 다양한 구성 요소를 고려해 앱 내에 정보를 시각적으로 배치하는 것.
• 그리드 시스템(Grid System) : 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 의미함. 그리드를 활용하면 시각적 통일성을 줄 수 있음. + 그리드(Grid) : 격자무늬, 격자판

모바일 앱의 경우, 반응형 웹과는 달리 스마트폰의 작은 화면에 맞춰 단조로운 레이아웃을 사용하게 됨. >> 대체로 4, 6단 그리드

 

1단 레이아웃 예시) 유튜브, 인스타 그램 = 나누지 않고 한 줄로 쭉 내리면서 봄.

2단 레이아웃 예시) 핀터레스트, 오늘의집 둘러보기 = 왼쪽과 오른쪽, 가운데 선 기준으로 두 줄로 나누어져 있음.

3단 레이아웃 예시) 네이버 웹툰, 무신사 검색결과 = 세 줄로 나누어져 있어서 이미지 중심 컨텐츠 여럿 나열할때 유용.

 

✓ 그리드 시스템에 맞게 레이아웃을 구성해야하는 이유

시각적으로 일관된 배치, 작업 시간 단축, 예측 가능한 화면 구성(예측가능한 익숙한 구성은 UX의 향상으로 이어짐)

 

✓ 레이아웃을 위한 그리드 시스템 구성 요소

• 칼럼(Column): 화면을 몇 단으로 쪼갤 것인가 (분리의 단위)
• 거터(Gutter): 칼럼 사이 간격 (국룰은 16)
• 마진(Margin): 컨텐츠 영역 제외 좌우 영역 (국룰은 16 or 20)

어떤 해상도든 칼럼 수, 거터, 마진은 유지하는 것이 좋음. >> 시각적 통일성 증가.

좁은 화면의 단점을 해결하는 레이아웃 = 가로 스크롤 >> 자를때 뒤에 내용이 더 있는지 없는지 알기 힘든것이 아닌, 있는것을 확실히 알 수 있게 잘라야 함.

 

2. 컬러

컬러가 중요한 이유

• 우선 순위를 색으로 표현 가능함
• 상황을 색으로 표현 가능함(성공, 경고, 에러 등)
• 접근성을 높이는 역할을 함(가독성 등)

✓ 좋은 컬러보다 사용 비율!

메인 색상은 오히려 조금 노출시키는게 좋음.

컬러 황금 비율 = 기본색상 70 + 보조색상 25 + 주제 색상 5

컬러를 많이 사용할 수록 지루해하고 뇌리에 기억시키기 어려움.

ex) 스타벅스 매장 내 초록색 비율

 

앱에서도 똑같이 적용되어, 메인 색상을 한 화면에 하나 정도, 제일 중요한 기능 정도에 부여하는 것이 좋음.

ex) 앱 아이콘, 앱 내 구매하기 버튼 등

 

✓ 컬러 구성

• 주색(Primary Color): UI에서 가장 메인으로 사용되는 색상으로, 화면 내 클릭을 유도하는 버튼에 많이 사용됨. 주로 브랜드 고유 아이덴티티 색상을 사용함.
• 보조색(Secondary Color): 메인컬러보다 덜 중요한 요소에서 사용되며, UI 컨텐츠에서 사용함. 일반적으로 1~5개 정도의 보조 색이 있는데 너무 많은 컬러를 사용하지 않도록 주의.
• 중성색(Neutrals): 흰색~검은색까지 회색 음영을 포함. 배경, 텍스트 등에 사용되며 UI의 대부분에 사용됨. 텍스트에 활용될 때는 대비를 통한 접근성을 고려해 사용해야 함.
• 시맨틱 컬러(Semantic Color, 시스템 컬러): 목적을 전달하는 컬러. 성공, 경고, 에러, 정보의 상황에 따른 4가지 색이 있음.
• 확장 팔레트(Expanded palettes): 다양한 사용 사례를 충족하기 위한 확장형 색상 팔레트. 주색과 보조색에 톤을 추가해 결합해 사용함.

Material Design Guideline 의 Color System에서 컬러와 사용방법 등을 확인 가능. 색상을 직접 조절해 만들기도 가능함.

https://m2.material.io/design/color/the-color-system.html

Material Design

 

✓ 컬러 사용시 주의할 점

인터렉션이 가능한 요소인가?

불필요한 꾸밈 요소(그림자, 테두리 등)는 없는가?

위계 구조에 맞게 사용했는가?

    + 두 개의(또는 그 이상) 다른 버튼이 있을 때, 같은 색상 보단 위계에 맞게 다른 컬러를 사용하는 것이 더 좋음.

컨텐츠의 집중도를 떨어뜨리고 있지 않은가?

    + 너무 많은 컬러는 집중도가 떨어지고, 지루함, 피로도를 느낄 수 있음.

 

✓ 그 외 체크리스트

컬러 시스템이 잘 갖춰져 있는가?

컬러를 목적에 맞게 잘 사용했는가?

황금비율을 감안했는가?

한 화면에 Primary 컬러가 한 군데에만 사용되었는가?