웹 폰트, 아이콘, 권장 그리드 시스템 수치값(TIL 6일차)

오늘은 ui 관련 강의를 듣는 날!! 

몇몇은 알고 몇몇은 계속 배워도 까먹고 몇몇은 아예 몰랐던 것들....

몰랐던 부분과 잘 암기해야할 부분만 따로 메모해둔다🖊️

1. OS별 시스템 폰트

 1-1. IOS 시스템 폰트

• Apple SD Gothic Neo (한글)
• SF Pro (영문, 숫자)
• New York (세리프)

 1-2. Android 시스템 폰트

• Noto Sans (한글)
• Roboto (영문, 숫자)

폰트 사진

시스템 폰트를 이용해서 디자인을 하게 된다면, IOS와 Andrioid를 한 벌로 작업하는 것이기 때문에 두 OS를 대응하기 위한 폰트를 정할 때는 논의가 필요하다. 폰트의 자간이나 행간이 조금씩 달라서 레이아웃이 흐트러질 수 있기 때문이다!

 

 

2.웹 폰트

웹 폰트는 웹 페이지에서 사용 가능한 폰트를 온라인에서 다운로드하여 쓸 수 있는 폰트(설치하지 않아도 됨)를 말하고,

대표적인 웹폰트로 프리텐다드, 스포카 한 산스, 슈트가 있다.

 

프리텐다드는 너무 유명하고, 스포카 한 산스도 들어본 적이 있다. 그런데 슈트 폰트는 처음 들어보는 폰트라서 웹사이트에 들어가서 자세히 살펴보기로 했다. (주소: Sun – SUIT)

 

읽어보니 본고딕(noto sans)에서

❶ 그로테스크 계열의 영문자나 숫자가 한글과 어울리지 않음

❷  어긋난 중앙 정렬

❸  넓은 자간

을 해결하려고 만드신 폰트라고 한다.

 

(여기서 그로테스크란 산세리프의 일종으로, 세리프 서체의 영향이 남아있는게 특징이다. 처음에 등장한 것은 1816년 영국 캐즐론활자주조소로, 초기 산세리프는 굵기나 모양 등이 고르지 않고 불안정한 모습을 보였기 때문에 그로테스크라는 이름이 붙었다고 한다. -출처: 그로테스크산세리프양식 – 타이포그래피 사전)

 

한눈에 보려고 캡쳐함!

 

기하학적인 영문자 숫자가 특징이고, 글자의 위 아래 공간이 같아서 디자인 요소를 만들 때 조금 더 편하다.

본고딕의 자간을 -4.8%로 설정한 상태가 기본 베이스인게 눈에 띈다. 기타 특수문자와 중앙정렬인 것도 매우 좋은 점인듯.

 

 

3.용도별 폰트 사이즈

용도	폰트 사이즈
Title 제목	18-32
Body 본문	14-18
Caption, Label 캡션, 레이블	10-12
Minimal size 최소 사이즈	IOS:11 / Android:12 / Web:14

 

타이틀 24 본문 16 버튼 라벨 12... 이런 식으로 (폰트 크기 차이를 위해 1.5~2배의 차이를 둘 수 있음)

10 이하는 지양한다!

 

4.행간

행간은 보통 타이틀, 서브 타이틀에는 1.2-1.5배를 설정하고, 본문에는 1.6-2.0배를 설정한다.

 

❶ 본문 행간의 여백이 가장 작음

❷ 서브 타이틀<->본문 간 행간은 본문 행간보다 큼

❸ 타이틀<->서브 타이틀 간 행간은 서브 타이틀<->본문 간 행간보다 큼

 

4.시각 보정 (아이콘)

❶ 삼각형의 무게 중심 ❷ 원과 사각형의 면적으로 시각 보정

 

1번의 경우 삼각형의 무게 중심으로 도형은 가운데에 정렬되어있으나 보는 사람의 입장에서는 왼쪽으로 치우쳐 있기 때문에 오른쪽으로 이동시켜야한다.

2번의 경우 위아래 높이를 맞춰준다면 원의 면적이 작아져서 시각적으로 원이 작아보이기 때문에, 원의 지름에 1.12배를 적용시켜야 사각형과 같아진다.

+)아이콘을 만들 때 최종 사이즈는 아이콘 프레임으로 계산해서 아이콘 크기는 소수점이어도 괜찮!

 

❶트림 영역  ❷라이브 영역  ❸패딩

❶ 트림 영역: 일반적으로 24X24, 아이콘의 실제 사이즈

❷ 라이브 영역: 실질 작업 공간, 24 기준 20

❸ 패딩: 아이콘 리사이징 시 잘리지 않기 위해 준 패딩

4가지 유형 키 라인

+)⭐다 만들고 컨스트레인츠 스케일 꼭 걸어주기! 안 그러면 리사이징 안 됨

 

5.그리드 시스템

  5-1. 컬럼

  Mobile : 2~6 (4컬럼을 주로 사용)

  Tablet : 6~12 (6~8컬럼을 주로 사용)

  Desktop : 12~16 (12컬럼을 주로 사용)

  5-2. 거터 (컬럼 간격)

  Mobile : 8~16

  Tablet : 16~24

  Desktop : 24~32

  5-3. 마진 (화면 좌우)

  Mobile : 16~20

  Tablet : 20-36

  Desktop : 24~36

  http://gridcalculator.dk/ <-컨테이너 크기에 따라서 컬럼, 마진, 거터값을 계산해줌

  5-4. 브레이크 포인트

  mobile : 0~599

  tablet : 600~1024

  Desktop : 1024~

 

---이후 숙제 진행

 

❶ 직관적인 디자인 사례 조사

1) 대비 높은 색상 조합 -배달의 민족

   : 굉장히 쨍한 색의 민트색 색상과 검정색으로 대비를 확실히 해서 시각적으로 강렬하게 다가왔다.

2) 간단한 레이아웃 -29cm

  : 언뜻 보면 복잡해 보이지만 버튼과 카드 형식이 연속되어서, 홈 화면에 보이는 상품이 많지만 레이아웃을 간단하게 해서 복잡도를 떨어뜨리는 효과가 있는 것 같다.

 

❷ 일관된 디자인

1)  다양한 디바이스 간의 일관성 -카카오톡

   : 카카오톡을 휴대폰 뿐만 아니라 pc에서 굉장히 자주 쓰는 편인데, ui 요소와 형태가 모바일과 거의 유사하면서도 pc버전은 네비게이션 서랍이 옆에 있어서 편리하다.

 

우측 화면은 테마를 적용한 걸 스샷한 것(^.^)

 

 

2)  디자인 시스템 -라인

   : 라인의 ui 디자인 시스템 사이트( LINE Design System for Global Family Service)를 살펴보면, 다양한 컴포넌트들이 경우에 따라 디자인의 변화가 세세하게 정해져 있어서 일관된 디자인을 유지할 수 있음을 알 수 있다.

 

❸ 가독성을 고려한 디자인

 

1) 여백 활용 -스타벅스

  :제품 이미지가 많이 나오는데, 이 이미지를 크게 보여주는 대신에 여백을 줘서 화면이 너무 답답해보이지 않게 구성한 것 같다.

2) 콘텐츠 그룹화 -카카오페이

  :금융 앱이라서 다양한 서비스가 존재하는데, 카드 형식으로 콘텐츠들을 묶어서 자주 쓰는 기능과 금융 뉴스 등의 콘텐츠를 확실하게 나눠놓았다.