웹&앱 컬러 테마, 폰트 정하는 방법

웹이나 앱을 디자인 할 때, 컬러 테마와 폰트를 정해서 디자인 가이드를 수립한 뒤에 디자인을 하는 것이 효율적입니다.

 

컬러 테마를 정할 때는 서비스의 정체성을 잘 드러내야하고, 가독성이 좋아아하고, 컴포넌트 구조를 잘 드러내주어야 합니다.

 

폰트를 정할때도 기준선, 자간과 줄간격 등을 설정하여 가독성을 살리고 일관된 규칙을 주는 것이 좋습니다.

 

 

앱을 제작하는 경우라면, iOS에서 제공(권장)하는 시스템 색상을 참고하시는게 좋습니다.

 

구글 머티리얼 디자인은 따로 색상에 제한은 두지는 않지만, 기본 색상을 기준으로 일정 수치로 베리에이션 하는 것을 권장하고 있습니다.

 

구글 머티리얼 디자인 컬러 시스템이 자세하고도 이해하기 쉽게 나와있기 때문에, 이를 기반으로 해서 소개해드리도록 하겠습니다.

 

 

 

 

1. 컬러 테마에서 설정해야할 색상

 

기본 색상과 그 변화

 

기본 색상은 서비스의 테마에 맞는 색상으로, 화면과 구성 요소에서 가장 많이 사용되는 색상입니다.

 

구글 머티리얼 디자인에 따르면 기본 색상의 밝기에서 100정도의 명암값을 조절하거나 채도나 색상을 달리해서 변화를 줄 수 있습니다.

 

 

보조 색상과 그 변화

 

보조 색상은 꼭 설정해야하는 것은 아닙니다.

 

그러나 기본 색상에 대조되는 색상을 사용해서, 다음과 같은 UI 구성 요소를 구분하기가 편리합니다.

 

• 시스템 바 등의 강조해야할 UI
• 스위치나 슬라이더 플로팅 버튼등의 컨트롤 UI
• 진행률 링크 헤드라인 등의 기타 UI

 

기본색상과 마찬가지로 명암과 채도 색상을 달리해서 변화를 줄 수 있습니다. 이 밖에 포인트 색상 등을 설정할 수 있습니다.

 

 

2. 컬러 시스템 만들기

 

컬러 테마는 아래와 같이 가장 중요한 것부터 설정해나가도록 합니다.

 

• 기본 색상, 보조 색상 정하기
• 면적, 용도에 따른 색상 정하기
• 포인트, 위치에 따른 색상 정하기

 

색상을 선택할 때는 머티리얼 디자인 컬러 툴 페이지에서 기본색과 강조색을 정하면, 이에 어울리는 변화된 색이 자동으로 설정됩니다.

또한 구글이 제시하는 색상 접근성 표준을 준수하면서 조절할 수 있습니다.

 

 

---- 2022.05.23 업데이트

 

색상 배색에 대해서 어려움을 느끼신다면, 색조합 사이트를 이용해서 기본적인 색 배색 원리를 확인해보세요.

 

색 배색을 쉽고 효과적으로하는 방법

 

 

 

3. 타이포 그래피 시스템(폰트)

 

폰트의 종류

 

폰트는 크게 세리프와 산세리프 폰트로 나뉩니다.

 

 

폰트의 기본 종류와 용도에 대해서는 다음 글의 앞부분에 간단히 설명해놓았으니 참고해 보시기 바랍니다.

 

피그마 무료 폰트 템플릿 추천

 

따라서 두 종류의 폰트 중에서 주로 사용할 폰트를 선택하고, 그 종류의 폰트 안에서 정보의 중요도에 따라 두께나 세부 디자인을 달리할 수 있습니다.

웹이나 모바일에서는 가독성 때문에 가급적이면 산세리프를 사용합니다.

 

그러나 콘셉트에 따라 세리프를 쓰기도 하는데, 이 경우에는 정보 전달보다는 장식의 목적으로 사용합니다. 그리고 폰트 자체로 삽입하기보다는 이미지로 만들어서 삽입하는 경향이 있습니다.

참고로 프랑스어로 산스는 없음이라는 뜻입니다. 그러므로 산세리프는 글자 끝부분 장식인 세리프가 없다는 뜻이 됩니다.

 

 

모바일 운영체제의 기본 시스템 폰트

 

앱을 만드는데 부득이하게 시스템 폰트를 사용해야 할 때, 다음과 같이 각 운영 체제에서 제공하는 폰트를 사용하는 게 좋습니다.

 

• 안드로이드 : 로보토
• iOS : 산프란시스코

 

 

깨지지 않는 폰트

다국적 언어를 사용하는 경우에 노토 산스 폰트를 추천합니다. 노토는 노 모얼 토푸라고, 두부같이 깨졌던 폰트를 더이상 깨지지 않게 만든 다국적 언어를 위해 고안된 폰트이기 때문입니다.

 

한국어의 경우에도 Noto-Sans KR이라는 폰트로 사용할 수 있습니다. 깔끔한 산세리프 폰트 종류로, 개인적으로 가장 즐겨 쓰는 폰트이기도 합니다.

 

 

그 밖에 고려할 점

 

이 밖에 폰트를 정렬할 때는 기준선(베이스라인)이라는 것이 있습니다. 한글은 네모박스 안에 글자가 모두 들어가니 문제가 없습니다.

 

하지만 영문의 경우는 소문자와 대문자의 높이가 서로 다르므로, 소문자 x의 윗선을 기준선으로 삼습니다.

 

또한 폰트를 사용할 때는 글자와 글자 사이의 자간, 줄과 줄 사이의 줄 간격 등도 설정하여 일관된 규칙을 잡고 작업하시는 것을 추천드립니다.

 

 

 

디자인 작업의 기본이자 시작인 해상도와 아트보드 크기 설정, 그리드 시스템에 대해서도 알아보세요.

 

안드로이드 iOS 모바일 해상도 기준

 

기기별 그리드 시스템 만드는 방법

 

 

이상으로 웹&앱의 컬러 테마, 폰트 정하는 방법 등을 알아보았습니다. 읽어주셔서 감사합니다.