font-design

2 개의 포스트

figma

우리만의 서체: Figma Sans 제작 (새 탭에서 열림)

Figma는 제품과 사용자층이 확장되면서 기존 브랜드와 서체를 함께 재정비했고, 그 결과 Grilli Type과 협업해 맞춤 서체인 Figma Sans를 만들었다. Figma Sans는 디스플레이와 본문 모두에서 잘 작동하고, 디자이너뿐 아니라 개발자·제품 관리자·초보 사용자까지 아우르는 유연성과 가독성을 목표로 했다. 제작 과정에서는 유행을 따르기보다 Figma만의 “주관 있는(opinionated)” 성격을 서체에 담는 데 집중했다. ## 브랜드 확장에 맞춘 서체 재설계 - 기존 서체인 **Whyte**는 2019년부터 Figma의 브랜드를 대표했으며, 특유의 인트랩(inktrap) 스타일을 갖고 있었다. - Figma가 다양한 제품 제작 도구를 제공하고 커뮤니티도 확장되면서, 기존 서체만으로는 새로운 브랜드 방향을 충분히 표현하기 어려워졌다. - 색상 팔레트, 일러스트레이션, 패턴, 모션 등 시각 아이덴티티 전반을 바꾸는 과정에서 서체도 핵심 요소로 재검토됐다. - 새로운 브랜드는 강렬한 색상과 더 복잡하고 추상화된 형태를 사용했기 때문에, 이를 보완하면서도 과도하게 튀지 않는 서체가 필요했다. ## 현대적 그로테스크 서체를 선택한 이유 - Figma 팀은 여러 스타일을 검토한 끝에 **현대적인 그로테스크 계열 산세리프**를 적합한 방향으로 판단했다. - 그로테스크는 19세기 초부터 등장한 산세리프 서체 양식으로, 장식이 적고 구조가 명확한 것이 특징이다. - Figma Sans에는 다음과 같은 조건이 요구됐다. - 다양한 굵기와 옵티컬 사이즈 지원 - 마케팅용 대형 제목과 본문 텍스트 모두에서 높은 성능 - Help Center 같은 긴 글을 읽는 화면에서도 가독성 확보 - 디자이너뿐 아니라 개발자, 제품 관리자, 신규 사용자도 편하게 사용할 수 있는 폭넓은 인상 - 단순히 개성적인 서체가 아니라, 여러 제품과 사용 환경에 적용할 수 있는 실용성이 중요했다. ## 기성 서체 대신 맞춤 서체를 선택 - Figma 팀은 Commercial Type의 **Marr Sans**, RP Digital Type Foundry의 **Agipo** 등 다양한 기성 서체를 검토했다. - 그러나 브랜드의 개성과 기능적 요구를 동시에 충족하는 서체를 찾기 어려웠다. - 이에 따라 Figma는 외부 서체를 선택하는 대신, 요구사항을 함께 정리하고 브랜드에 맞게 설계할 수 있는 맞춤 서체 제작을 결정했다. - 협업 파트너로는 그래픽 디자인과 서체 제작에서 강한 개성을 보여온 스위스·미국 기반의 **Grilli Type**을 선택했다. - Grilli Type은 일반적인 유행이나 역사적 서체의 복제보다, 흥미로운 개념적 틀을 바탕으로 독자적인 서체를 만드는 접근을 중시했다. ## “주관 있는” 서체라는 방향 설정 - Grilli Type은 Figma의 요구사항을 정리하기 위해 무드보드를 만들고, 다양한 시각적 아이디어가 어떻게 연결되는지 탐색했다. - 프로젝트의 중심 질문은 브랜드 설명에서 말하는 핵심 긴장감이 무엇인지 찾는 것이었다. - 그 과정에서 **“opinionated”**, 즉 자신이 누구인지와 무엇을 원하는지 분명히 아는 태도가 중요한 키워드로 자리 잡았다. - Figma Sans는 장식이나 불필요한 요소를 덧붙이기보다, 단순하고 명확하지만 확실한 인상을 주는 방향으로 발전했다. ## 두 가지 초기 방향을 결합한 설계 - Grilli Type은 초기 단계에서 서로 다른 두 가지 디자인 방향을 제시했다. - 하나는 보다 직관적이고 단순한 방향 - 다른 하나는 훨씬 실험적이고 과감한 방향 - 두 안 중 하나를 그대로 선택하기보다, 각각이 어떤 가능성을 열어주는지 논의하는 데 초점을 맞췄다. - 최종적으로는 첫 번째 방향의 단순화된 형태를 기본으로 삼고, 두 번째 방향의 독특한 특징을 일부 결합했다. - 참고 자료로는 다음과 같은 역사적 사례가 활용됐다. - 1925년 『Typographische Mitteilungen』의 타이포그래피 - 1960년대 Karl Gerstner의 프로그램적 디자인 - 전화번호부용으로 설계된 Matthew Carter의 **Bell Centennial** - 이를 통해 Figma Sans는 읽기 쉬운 구조와 브랜드 고유의 개성을 동시에 추구했다. ## 실용적인 결론 Figma Sans의 제작 과정은 브랜드용 서체가 단순히 새로운 글꼴을 만드는 작업이 아니라, 브랜드의 사용자·제품·시각 언어를 하나의 시스템으로 정리하는 과정임을 보여준다. 특히 여러 화면과 사용자층을 고려해야 한다면, 개성만 강조하기보다 본문 가독성, 다양한 굵기, 적용 범위까지 함께 설계하는 것이 중요하다.

figma

lli Type으로 본격적인 (새 탭에서 열림)

가변 폰트는 하나의 파일로 다양한 굵기·기울기·광학 크기 등을 조정할 수 있어, 타이포그래피의 정밀도와 표현력을 높이는 표준 기술이다. Grilli Type의 Thierry Blancpain은 가변 폰트가 디자이너와 개발자의 협업을 단순화하고, 웹을 더 역동적이고 읽기 쉬운 경험으로 만드는 핵심 도구라고 설명한다. 특히 디자인 도구에서 가변 폰트를 직접 지원해야 실제 구현 과정의 간극과 불필요한 우회 작업을 줄일 수 있다고 강조한다. ## 폰트 크기 변화와 가독성의 문제 - 명함에서 광고판으로, 모바일에서 데스크톱으로 글자 크기가 커지면 글자 사이의 공간감과 비율도 달라진다. - 특정 크기에서 읽기 쉬웠던 문장이 다른 크기에서는 형태가 무너지고 가독성이 떨어질 수 있다. - 크기와 가독성을 유지하려면 다음 요소를 세밀하게 조정해야 한다. - **커닝(kerning):** 개별 글자 사이의 간격 - **트래킹(tracking):** 글자 묶음 전체의 간격 - 굵기와 스타일별로 별도 파일을 사용하면 에셋과 코드가 늘어나고, 다운로드 용량·관리 복잡성·오류 가능성이 커진다. ## 하나의 파일로 여러 표현을 만드는 가변 폰트 - 가변 폰트는 여러 스타일을 각각 저장하는 대신, 하나의 폰트 파일 안에 다양한 표현 범위를 담는다. - 디자이너는 축(axis)을 조절해 다음과 같은 속성을 연속적으로 변경할 수 있다. - 굵기(weight) - 기울기나 경사(slant) - 광학 크기(optical size) - 그 밖의 폰트 제작자가 정의한 형태적 특성 - 굵기와 광학 크기를 동시에 조절하는 등 기존 정적 폰트보다 정밀한 타이포그래피 설계가 가능하다. - 하나의 파일을 여러 도구와 환경에서 사용할 수 있어, 애플리케이션별 폰트 버전을 따로 준비해야 하는 문제도 줄어든다. ## 현대적인 디자인 표준과 도구 지원 - Blancpain은 가변 폰트가 새로운 표준 형식이므로, Figma 같은 주요 디자인 도구가 이를 지원하는 것이 중요하다고 말한다. - 도구가 표준 형식을 지원하지 않으면 디자이너와 개발자는 별도 변환이나 우회 방법을 찾아야 한다. - Grilli Type은 과거 Figma에서 가변 폰트를 사용할 수 없을 때도 가변 폰트 기반 웹사이트를 제작했지만, 디자이너와 개발자가 분리된 조직에서는 이런 방식이 현실적으로 어렵다고 설명한다. - Figma에서 디자인 단계부터 가변 폰트를 사용하면 최종 코드 구현까지 동일한 타이포그래피 의도를 유지하기 쉬워진다. ## 디자이너와 개발자의 협업 개선 - 개발자에게는 폰트 패밀리 전체를 하나의 파일로 관리할 수 있다는 점이 큰 장점이다. - 파일 업데이트가 단순해진다. - 코드와 에셋 관리가 깔끔해진다. - 여러 폰트 파일을 조합할 때 생기는 관리 오류가 줄어든다. - 디자이너는 원하는 굵기나 광학 크기를 세밀하게 선택할 수 있다. - 가변 폰트는 디자이너에게 표현의 자유를, 개발자에게는 구현과 유지보수의 효율성을 제공한다. - 따라서 두 직군이 서로 다른 도구와 파일을 사용하며 생기는 간극을 줄여준다. ## 웹 타이포그래피의 동적 표현 - 가변 폰트는 웹에서 글자를 단순한 정보 전달 수단이 아니라 시각적 표현 요소로 활용하게 한다. - 예를 들어 마우스 오버 시 일반 굵기에서 굵은 글씨로 자연스럽게 전환하는 효과를 만들 수 있다. - `GT Maru Mega`처럼 매우 개성적인 서체도 작은 크기에서 사용할 수 있도록 형태와 광학 특성을 조정할 수 있다. - 폰트 축을 애니메이션과 결합하면 정적인 웹사이트보다 더 생동감 있고 상호작용적인 경험을 제공할 수 있다. - Blancpain은 웹 경험이 점점 더 움직임을 포함하는 방향으로 발전할 것이라고 전망한다. ## 실용적인 결론 가변 폰트는 파일 수를 줄이는 기술을 넘어, 반응형 화면에 맞는 가독성과 정밀한 타이포그래피, 인터랙션까지 함께 구현하는 방법이다. 디자이너와 개발자는 가능한 한 디자인 단계부터 동일한 가변 폰트를 사용하고, 굵기·광학 크기·기울기 축을 화면 크기와 사용자 상호작용에 맞춰 활용하는 것이 좋다.