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

3. 아이콘

함축적인 의미를 갖고 있는 그래픽 요소. 텍스트를 대체 가능함.

아이콘 제작시 고려해야 할 핵심

• 직관적인 아이콘
• 통일된 스타일 아이콘
• 단순한 아이콘
• 아이콘 규격 및 시각 보정

3.1. 직관적인 아이콘

의미를 누구나 직관적으로 알 수 있어야 함.

지나치게 단순화 하거나 디자이너 본인만 아는 아이콘은 사용하면 안됨.

 

3.2. 통일된 스타일 아이콘

본인만의 스타일이나 규격이 있어야 함. 두께, 라운딩, 크기, 스타일 등을 통일할 것.

 

- 아이콘 스타일 종류

Outline: 단색 테두리만 그려진 아이콘

Solid: 단색으로 채워진 아이콘

Filled Line: 검정 테두리가 있고, 다양한 색으로 채워진 아이콘

Flat: 단순한 그림 같이 테두리 없이 채색된 아이콘

Glassmorphism: 유리의 질감과 투명도를 가진 듯한 아이콘

그래픽으로 활용되는것이 아닌 UI의 기능으로만 사용된다면 Outline, Solid 두 종류가 적합함.

같은 스타일이라도, 두께에 따라 느낌이 다름. 1~2px정도 사용.

 

3.3. 단순한 아이콘

복잡하게 만들면 작게 봤을때 형태 파악이 안됨.

 

3.4. 아이콘 규격 및 시각 보정

24x24 사이즈 기준, 잘리지 않는 '안전한 영역'은 중앙 20x20 영역임.

아이콘 모양에 따라 같은 24x24 사각형에 들어가도 면적이 달라짐.

그래서 정사각형은 18x18, 원형은 20x20, 직육면체는 20x16 또는 16x20 정도 규격을 기준으로 작업하는 것이 균형감있게 만들기 좋음.

 

✓ 아이콘 체크리스트

아이콘이 직관적인가?

24 사이즈에서도 잘 읽히는 형태인가?

전체적으로 스타일은 통일되어 보이나?

규격은 잘 만춰 제작했나?

 

4. 타이포그래피

Type+Graphy, 활자의 서체나 글자 배치 등의 구성 및 표현을 의미함.

타이포그래피의 요소에는

• 서체 종류(제목용&본문용, 고딕, 명조, 손글씨)
• 서체 크기와 두께
• 텍스트 컬러

가 있으며, 이러한 것들은 가독성, 앱의 분위기 등에 영향을 미침.

 

✓ OS별 전용 서체

iOS >> San Francisco, New York체 사용

Android >> Roboto, Noto Sans체 사용

 

✓ 타이포그래피가 중요한 이유

위계 구조의 표현

정보 전달을 위한 가독성

유효성 검사에 충족된 크기, 대비 활용 >> 접근성 향상

 

✓ 위계 구조의 표현

- 제목

행간이 너무 넓으면 벙벙해보임.

140% 정도가 제일 적절. 120% 까지도 허용.

- 본문

긴 글을 행간이 좁으면 가독성이 떨어짐.

180% 정도가 제일 적절. 200% 까지도 허용.

 

✓ 유효성 검사 (접근성)

배경과 글씨의 색상 대비가 AAA등급은 넘는 것이 좋음.

	큰 텍스트 기준	본문 기준
AA등급	3 : 1	4.5 : 1
AAA등급	4.5 : 1	7 : 1

 

✓ 폰트 사이즈

국문 최소 폰트 사이즈는 12.

12, 14, 16, 18 이 주로 사용됨.

 

✓ 가독성 체크리스트

• 25~30cm 떨어진 거리에서도 잘 읽히는가?
• 콘텐츠 내 정보의 위계 구조가 쉽게 읽히는가?
• 서체 종류를 너무 다양하게 사용하진 않는가?
• 폰트 컬러와 배경의 대비가 충분한가?
• 읽어야 할 글 주변에 시선을 빼앗는 요소는 없는가?
• 움직임 여부, 주변광 조건 등 다양한 상황에서도 충분히 읽히는가?

✓ 다국어 지원

다국어 지원하는 앱 UI작업 시 다양한 국가의 문화를 이해해야 함.

언어마다 단어의 길이가 다 다름 >> 가장 긴 단어를 기준으로 작성.

아랍어 >> 좌우가 완전히 반대임.

나라별 표준 서체가 있음.

 

5. 그래픽

단순히 꾸밈요소를 넘어 여러 역할을 함.

• 시선 유도
• 위계 구조 및 그룹핑
• 보조 설명

✓ 섹션에 따른 그래픽 차이

• 배너 - 주로 광고. 컨텐츠 디자이너가 운영.
• 카테고리 - 사진 누끼, 또는 그래픽
• 컨텐츠 - 사용자가 직접 올리는 경우도 많음.

✓ UI 내 그래픽 종류

• 사진 이미지
  • 라이프 스타일 - 실제 사용하는듯한 사실적 묘사가 특징.
  • 스튜디오 촬영 - 제품에 집중한 이미지.
  • 배경 제거(누끼)
• 그래픽
  • 2D - 주로 시스템 아이콘에 문구와 함께 사용.
  • 3D - 상황 설명에 유리한 오브젝트로 UI 완성도를 높일때 사용.
• 영상
  • 촬영 영상 - 사진보다 많은 정보를 줄 때 사용.
  • 3D 영상 - 직접 찍을 수 없는 효과나 상황을 극대화해서 표현할 때 사용.
  • 모션 그래픽 - 제한된 영역에서 시각적 이목을 끌때 사용.
  • 움짤(gif)

✓ 이미지 퀄리티에 따른 분위기 차이

유튜브 같은 사용자 참여 플랫폼의 경우, 사용자가 업로드하는 제작물(UGC, User Generated Contents)의 퀄리티에 따라 전체적인 분위기가 달라짐.

그러한 이미지의 퀄리티 보장이 어렵다면, UI 내 이미지 영역을 좁게 가져갈 수도 있음. (ex. 네이버 블로그 글 목록)

반대로, 보장이 된다면 크게 가져가도 됨. (ex. 오늘의 집 인테리어 사진)

또는, 전문가가 이미지 생성을 돕는 전략도 있음. (ex. 에어비앤비 숙소 사진 포토그래퍼)

 

이미지를 자체 제작하는 경우, 퀄리티는 보장된다는 장점이 있으나, 모든 컨텐츠에 대해 제작 시간과 비용이 들어감.

 

✓ UI 변경

기존의 레거시 컨텐츠들에 대해 들어갈 비용을 고려(컨텐츠 운영 관점)해야 함.

 

✓ 스탠다드

업계 표준은 가장 유저가 많은 서비스를 따라가는 경우가 많음.

이미 그러한 표준 규격이 어느 정도 정해진 상황이라면 따라가는 것이 좋음.