지금 써보러 갑니다 블로그와 페이스북 페이지를 통해 소개한 컬러 관련 서비스 35개를 노션으로 정리해 공유한 적 있는데요! 이후 오랜만에 컬러 및 폰트 관련 정보를 제공받을 수 있는 서비스를 발견해 소개하고자 합니다. (이전에 소개한 35개 서비스 리스트는 이 곳을 통해 확인해주세요!)

Colors and Fonts

앞서 소개했던 컬러 관련 서비스들은 컬러 조합을 제공해주거나 그라데이션을 직접 조합할 수 있는 환경을 각각 제공해주는 경우가 많았어요. 하지만 오늘 소개할 ‘Colors and Fonts‘는 이 둘은 물론 폰트 조합까지도 확인 할 수 있고, 이를 피그마와 스케치용 플러그인으로도 제공해줍니다.

Color Palettes

먼저 컬러 팔레트 화면을 살펴볼게요. 따뜻한 톤과 차가운 톤 두 가지에 따라 다섯가지 색상을 하나의 세트로 확인 할 수 있어요. 위 이미지는 따뜻한 컬러 모음으로 원하는 컬러를 클릭하면 컬러값이 바로 복사되어 다른 곳에서 활용할 수 있습니다.

반대로 차가운 컬러 모음을 볼게요. 다섯개를 한 번에 쓸 경우는 많지 않겠지만 톤에 따라 직접 세부 컬러를 정하기 어려운 경우 이런 모음이 큰 도움이 될 수 있어 저는 이미 몇 가지 값을 저장해두었습니다. 마찬가지로 하나를 클릭하면 ‘27496d’ 이와 같이 복사 후 활용이 가능해요. 컬러조합은 각 5개씩 총 10개 세트가 제공되고 있는데, 플러그인을 활용할 경우 더 많은 조합을 확인할 수 있습니다.

Gradients

다음은 그라데이션이에요. 컬러 조합과 마찬가지로 따뜻한, 차가운 테마로 확인할 수 있고 원하는 내용을 클릭하면 ‘cf583a – ffd5ab’와 같이 컬러값을 복사할 수 있어요. 그라데이션도 각 5개씩 총 10개를 웹상에서 먼저 볼 수 있고, 플러그인에서 확인해보니 훨씬 많은 수의 내용을 볼 수 있었습니다.

Font Pairings

컬러, 그라데이션과 함께 확인할 수 있는 정보는 ‘폰트’입니다. 두 가지 폰트를 어떻게 조합하면 좋을지에 대한 정보를 얻을 수 있어요. 영문 기준이긴 하지만, 타이틀과 본문 등에 각기 다른 폰트를 활용할 때 유용하게 활용할 수 있습니다. 폰트를 얻을 수 있는 링크도 제공되어 폰트 상세 정보를 바로 확인할 수도 있어요.

현재 10개의 폰트 조합을 확인할 수 있으며, 플러그인에서는 별도로 제공되지 않습니다.

Figma Plugin

스케치와 피그마 플러그인이 제공되지만 저는 피그마를 주로 활용하고 있어 피그마 플러그인을 확인해봤는데요.

앞서 말씀드렸던 것처럼 웹상에서 확인 가능한 것보다 훨씬 많은 그라데이션과 컬러조합을 확인 할 수 있습니다. 피그마에서 바로 활용할 수 있으니 컬러값을 복사하는 등의 과정도 줄일 수 있고요. 컬러값을 조금씩 변형에 입맛에 맞게 쓸 수도 있습니다. 백지보다 이렇게 출발하는게 훨씬 빠르니까요!

이렇듯 컬러 및 폰트 조합과 그라데이션 정보를 웹 또는 플러그인으로 다양하게 확인할 수 있는 ‘Colors and Fonts‘는 이 곳을 통해 더 자세히 확인해보실 수 있어요!