figma·2020년 9월 28일·3분 읽기큐레이션 요약

폰트가 깨질 때

폰트 폴백(font fallback)은 현재 글꼴에 필요한 글리프가 없을 때 다른 글꼴이나 대체 표시를 사용하는 컴퓨터 타이포그래피机制이다. 네모 상자, 깨진 이모지, 플랫폼마다 다르게 보이는 특수문자, 이모지 삽입 후 줄이 내려가는 현상 등은 대부분 이 메커니즘과 관련 있다. 이는 단순한 버그라기보다, 서로 다른 글꼴·문자 집합·운영체제가 텍스트를 처리하는 과정에서 발생하는 필연적인 결과다. ## 일상에서 나타나는 폰트 폴백 - 지원되지 않는 문자는 네모 상자, 물음표, 십자가가 들어간 상자 등으로 표시될 수 있다. - 발신자와 수신자의 환경에 설치된 글꼴이나 지원하는 문자 범위가 다르면 같은 이모지가 분해되거나 전혀 다른 모양으로 보인다. - 트위터 등에서 보이는 ‘특수 폰트’는 실제 글꼴을 바꾼 것이 아니라 유니코드의 다른 문자나 기호를 조합한 경우가 많다. - 이런 문자는 화면에서는 장식적으로 보일 수 있지만, 스크린 리더가 부자연스럽게 읽거나 다른 환경에서 빈 상자로 표시될 수 있다. - 이모지를 추가했을 때 줄 높이나 기준선이 변하는 것도 해당 글리프의 크기와 글꼴 메트릭이 기존 텍스트와 다르기 때문이다. - 카오모지나 결합 문자는 플랫폼·폰트별 지원 차이로 정렬과 모양이 달라질 수 있다. ## 글리프와 글꼴의 문자 범위 - 글리프는 글꼴이 실제로 그려내는 문자 모양을 뜻한다. 문자 자체와 글리프는 구분되지만, 글에서는 이해를 돕기 위해 대략적인 의미의 ‘문자’로 설명한다. - 서유럽권 글꼴도 대문자·소문자·숫자·문장 부호·악센트·기호 등을 포함해 수백 개의 글리프가 필요하다. - 중국어·일본어 글꼴은 수천 개의 한자를 포함해야 하므로 필요한 글리프 수가 훨씬 많다. - 합자(ligature), 숫자 스타일, 대체 글자 모양 같은 OpenType 기능을 지원하려면 기본 문자 외의 글리프도 추가해야 한다. - 라틴 문자만 지원하더라도 서유럽, 중부 유럽, 그리스어, 키릴 문자, 베트남어 등으로 범위를 넓히면 글리프 수가 계속 증가한다. - 모든 문자를 하나의 글꼴에 넣는 것은 현실적으로 어렵기 때문에 글꼴 제작자는 지원 범위를 선택해야 한다. ## `.notdef`: 글꼴이 모르는 문자의 표시 - 글꼴이 요청받은 문자를 포함하지 않을 때 사용하는 마지막 대체 글리프의 이름이 `.notdef`다. - 일반적으로 사각형, 십자가가 있는 상자, 물음표가 들어간 상자 등으로 표시된다. - `.notdef`는 특정 유니코드 문자가 아니라, 해당 글꼴 내부에서 “이 문자를 표현할 수 없다”는 사실을 나타내는 글리프다. - 화면에 네모가 표시되어도 내부의 텍스트 데이터가 네모 문자로 바뀌는 것은 아니다. - 따라서 텍스트를 복사하면 원래 문자가 유지되며, 나중에 해당 문자를 지원하는 글꼴로 바꾸면 제대로 표시될 수 있다. - 표시 모양과 크기는 글꼴 디자이너가 정하므로 글꼴마다 빈 사각형, 십자가, 장식된 상자 등 다양한 형태가 나타난다. ## 금속 활자와 디지털 글꼴의 차이 - 금속 활자 시대에는 글자와 글꼴의 활자가 물리적으로 결합되어 있어, 존재하지 않는 문자를 출력하려는 문제가 상대적으로 적었다. - 디지털 환경에서는 텍스트와 글꼴이 분리되어 있다. - 사용자는 다른 사람이 오래전에 작성한 텍스트나, 작성 당시 존재하지도 않았던 글꼴이 필요한 문자를 열 수 있다. - 이 때문에 글꼴은 자신이 표현할 수 없는 문자를 만났을 때 `.notdef` 같은 대체 수단으로 응답해야 한다. - 폰트 폴백은 이러한 디지털 텍스트 환경에서 서로 다른 문자 집합과 글꼴을 연결하는 핵심 장치다. ## 실용적인 결론 특수문자나 이모지를 사용할 때는 상대방의 운영체제와 글꼴 지원 여부가 다를 수 있음을 고려해야 한다. 장식용 유니코드 문자는 접근성과 호환성이 떨어질 수 있으므로 중요한 정보에는 일반 텍스트를 함께 제공하고, 디자인 작업에서는 여러 글꼴과 환경에서 폴백 결과를 확인하는 것이 좋다.

원문 읽기(새 탭에서 열림)

typographyscreen-readersunicodeopentype+3

figma·2019년 12월 17일·3분 읽기큐레이션 요약

Made in Figma, 201

2019년 Figma 사용 데이터를 보면 디자인은 더 개방적이고 협업적인 활동으로 발전했으며, 디자인 작업을 정량적으로 분석하려는 흐름도 커졌다. 사용자들은 차가운 계열의 색상과 Google Fonts를 선호했고, 데스크톱·모바일 등 다양한 화면 크기를 기준으로 작업했다. 또한 하나의 디자인 파일에 여러 직군이 참여하며, 파일은 개인 작업에서 협업 작업으로 확장되는 양상을 보였다. ## 분석의 배경과 방법 - Figma는 2019년 사용자들의 디자인 경향을 파악하기 위해 익명화된 제품 데이터를 분석했다. - 분석 대상에는 다음과 같은 항목이 포함됐다. - 자주 사용된 색상과 폰트 - 텍스트 스타일과 굵기 - 가장 많이 선택된 프레임 크기 - 하나의 파일에서 협업한 사용자 수와 작업 흐름 - 디자인 시스템 분석 기능의 등장으로 디자인 작업의 가치와 활용도를 수치로 평가할 가능성도 커졌다. ## 차가운 계열 색상의 선호 - 회색 계열을 제외하면 녹색과 파란색이 가장 많이 사용됐다. - 가장 많이 사용된 비회색 색상은 `#009688`이었다. - 그 뒤를 짙은 파란색인 `#455A64`, `#263238`이 이었다. - 이는 2019년 Pantone 올해의 색상인 Living Coral(`#FF6F61`)과는 대조적인 결과였다. ## Google Fonts 중심의 폰트 사용 - 가장 많이 사용된 폰트는 다음과 같았다. - Montserrat - Open Sans - Lato - 상위 10개 폰트 중 6개가 Google Fonts였다. - SF Pro Text, SF Pro Display, Proxima Nova처럼 기본 제공 폰트가 아닌 글꼴도 상위권에 포함됐다. - 시스템 폰트 중에서는 Helvetica보다 Arial의 사용량이 많았다. - Figma의 기본 폰트인 Roboto는 순위에서 제외됐지만, 이를 포함하면 상위 11개 폰트가 전체 폰트 사용량의 90%를 차지했다. - Font Awesome은 아이콘 폰트임에도 31위를 기록했다. - Times New Roman은 55위였고, 첫 번째 세리프 폰트인 Playfair Display는 22위에 올랐다. ## 굵은 글꼴과 텍스트 스타일 - 사용자는 이탤릭체보다 글꼴 굵기를 조정하는 경향이 훨씬 강했다. - 글꼴을 굵게 조정하는 작업은 이탤릭체 적용보다 13배 더 자주 발생했다. - Figma 파일의 약 3분의 1은 bold 또는 heavy 스타일을 사용했다. - 이는 가독성뿐 아니라 시각적 위계와 강조를 위해 굵은 글꼴이 널리 활용됐음을 보여준다. ## 프레임과 화면 크기 선택 - Figma는 디자인 시작점으로 사용할 수 있는 36개의 사전 정의 프레임을 제공했다. - 전체 파일의 33%가 이 프리셋 프레임 중 하나로 시작됐다. - 가장 인기 있는 프레임은 `1440 × 1024` 데스크톱 화면이었다. - 그 뒤를 iPhone X와 iPhone 8 프레임이 따랐다. - Windows 사용자가 macOS 사용자보다 훨씬 많다는 점을 고려하면, 실제 운영체제 점유율과 디자인 대상 기기의 우선순위가 반드시 일치하지는 않았다. ## 개인 작업에서 팀 협업으로의 확장 - Figma는 디자인을 더 개방적이고 협력적인 활동으로 만들겠다는 방향을 제품에 반영했다. - 대규모 조직의 파일을 기준으로 하면 파일당 평균 협업자 수는 6명이었다. - 협업자는 디자이너뿐 아니라 다음과 같은 직군을 포함할 수 있었다. - 개발자 - 제품 관리자 - 라이터 - 조직 내 다른 이해관계자 - 일반적인 파일은 처음에 한 명의 사용자가 독립적으로 작업하며 시작됐다. - 평균 19일이 지나면 첫 번째 협업자가 초대됐다. - 초대된 협업자는 리뷰, 댓글 작성, 공동 디자인 등의 방식으로 파일에 참여했다. ## 실용적인 시사점 - 디자인 시스템과 협업의 효과를 평가할 때 사용 빈도, 참여자 수, 파일의 변화 과정 같은 데이터를 활용할 수 있다. - 폰트와 색상 선택에서는 유행보다 브랜드 맥락과 가독성을 우선하되, 사용자가 익숙하게 접근할 수 있는 표준 리소스도 고려할 만하다. - 파일을 개인 작업물로 끝내지 않고 개발·기획·콘텐츠 담당자와 공유하면 디자인 의사결정 과정이 더 투명해질 수 있다.

원문 읽기(새 탭에서 열림)

typographyFigma디자인 시스템프로토타이핑+2

figma·2019년 10월 14일·3분 읽기큐레이션 요약

Figma 브랜드에 새로운 생

Figma의 브랜드 리프레시는 기존 정체성을 버리는 대신, 회사의 성장에 맞춰 확장하는 작업이었다. 핵심 방법은 여러 팀의 협업과 Figma 자체를 활용한 제작 과정이었으며, 브랜드를 더 유연하고 생동감 있게 만드는 데 초점을 맞췄다. 새로운 시각 언어는 호기심·활력·정직함·대담함이라는 성격을 바탕으로 일관성과 실험성을 함께 추구했다. ## 기존 브랜드 언어의 확장 - Figma는 새로운 브랜드를 처음부터 만들지 않고, 기존 브랜드의 강점과 가치관을 분석해 발전시켰다. - 초기 브랜드 가이드는 회사 규모가 작을 때 만들어졌기 때문에 블로그, 다양한 콘텐츠, 기업 고객 등 성장한 조직의 요구를 충분히 다루지 못했다. - 기존의 색상, 형태, 개념을 유지하면서도 새로운 활용 규칙과 가이드 문서를 추가했다. - 브랜드의 형태와 요소를 더 다양한 상황에 배치하고 활용해, 익숙함은 유지하면서 표현의 범위를 넓혔다. ## 브랜드 성격을 정의하는 네 가지 기준 브랜드를 하나의 인격체처럼 바라보며, 디자인과 커뮤니케이션의 방향을 정할 네 가지 성격을 정립했다. - **호기심 있는(Curious)**: 영리하고 장난기 있으며 상상력이 풍부하다. 당연하지 않은 가능성을 탐구한다. - **생동감 있는(Vibrant)**: 역동적이고 자신감 있으며 특정 주제에 깊이 몰입한다. - **정직한(Honest)**: 포용적이고 공감 능력이 있으며 approachable하다. 모든 것을 안다고 가장하지 않고 함께 해결한다. - **대담한(Bold)**: 강력하고 예상 밖이며 비순응적이다. 관습보다 자신에게 맞는 방식을 선택한다. - 이 기준은 소비자 대상 콘텐츠부터 엔터프라이즈 커뮤니케이션까지 폭넓게 적용될 수 있도록 설계됐다. ## 협업을 표현하는 도형과 일러스트 - 도형은 단순한 장식이 아니라 서로 대화하고 협력하거나 충돌하는 사람처럼 설정됐다. - 도형의 위치와 조합에 따라 조화로운 구성을 만들 수 있으며, 모든 도형이 서로 잘 어울리는 것은 아니라는 점도 반영했다. - 상황에 따라 일러스트의 추상화 수준을 조절했다. - 학습이나 명확한 안내가 필요한 장면에서는 단순하고 직관적인 일러스트를 사용한다. - 보다 개념적인 콘텐츠에서는 여러 도형을 조합해 풍부한 의미를 만든다. - 복잡한 결과물도 기본 도형에서 출발한다는 점을 보여 주며 디자인 과정을 쉽게 이해하도록 했다. - 완성되고 완벽한 결과만 보여 주는 대신, 최소 한 요소가 편집되거나 조작되는 상태를 표현했다. - 이러한 미완성의 모습은 디자인이 실제로는 messy하고 계속 변화하는 과정임을 강조하며, 사람들이 자신의 제작 과정을 공유하도록 장려한다. ## 개성이 드러나는 서체 선택 - 새로운 브랜드 서체로 Dinamo의 **Whyte**를 선택했다. - Whyte에는 일반 버전과 **inktrap** 버전이 있으며, Figma는 후자의 독특한 형태에 주목했다. - 잉크트랩은 금속 활판 인쇄에서 잉크가 번지는 것을 제어하기 위해 글자에 만든 홈에서 유래했다. - 작은 크기에서는 잘 보이지 않지만 확대하면 글자 모서리의 홈이 드러나며, 서체 자체에 일러스트적인 개성을 더한다. - 이 서체는 평범하고 절제된 인상과 비정형적이고 실험적인 인상을 동시에 전달해, Figma가 추구한 유연한 브랜드 성격과 맞았다. ## Figma로 Figma를 재설계하다 - 브랜드 리프레시 작업 전체를 Photoshop이나 Illustrator가 아닌 Figma에서 진행했다. - 기존 도구에 익숙했던 디자이너들은 Figma의 제약과 기능에 맞춰 새로운 제작 방식을 찾아야 했다. - 이 과정에서 도구의 특성이 새로운 아이디어를 발전시키는 계기가 됐다. - 여러 팀이 함께 작업하고 의견을 주고받는 협업 방식 자체가 브랜드 리프레시의 핵심 주제와 연결됐다. - 결과적으로 브랜드를 설명하는 시각 언어뿐 아니라, 브랜드를 만드는 과정도 Figma의 협업 철학을 보여 주게 됐다. 브랜드를 새로 만들 때는 기존 자산을 무조건 폐기하기보다, 핵심 정체성을 먼저 찾아 성장한 조직에 맞게 확장하는 접근이 효과적이다. 또한 성격을 구체적인 언어로 정의하고, 시각 요소와 제작 과정 모두에 그 기준을 적용하면 일관되면서도 유연한 브랜드를 만들 수 있다.

원문 읽기(새 탭에서 열림)

typographyFigmacollaborationillustration+3

figma·2019년 9월 4일·3분 읽기큐레이션 요약

OpenType을 향한

Figma는 로컬 폰트, Google Fonts, 조직 내 공유 폰트에 포함된 OpenType 기능을 지원하기 시작했다. 이를 통해 단순한 굵기·기울기 조절을 넘어 합자, 숫자 스타일, 대체 글리프, 장식 문자 등을 활용해 글자의 인상과 가독성을 세밀하게 조정할 수 있다. 글쓴이는 OpenType이 폰트마다 숨겨진 가능성을 제공하며, 기능을 무작정 적용하기보다 용도와 맥락에 맞게 사용해야 한다고 설명한다. ## 폰트에 숨겨진 또 다른 세계 - Warnock Pro를 계기로 글쓴이는 하나의 서체가 기본적인 글자 모양 외에도 다양한 변형을 포함한다는 사실을 발견했다. - OpenType 기능으로 다음과 같은 요소를 바꿀 수 있다. - **Old-style figures**: 본문 속 소문자와 어울리도록 높낮이와 형태를 조정한 숫자 - **Tabular figures**: 표나 데이터에서 숫자 폭을 일정하게 맞추는 숫자 - **Small caps**: 소문자와 대문자 사이의 형태로, 도입부나 강조에 사용 - **Swash와 대체 글리프**: 글자 끝의 장식적인 획이나 다른 문자 형태 - **Stylistic alternates**: 특정 글자의 대체 디자인 - **Ornaments**: 장식 기호와 문양 - **Ordinals와 fractions**: 서수와 분수에 적합한 글리프 - **Numero sign**: `№`와 같은 특수 기호 - 이러한 기능은 디자인 도구 안에 존재했지만, 당시에는 복잡한 메뉴와 낯선 기술 용어 뒤에 숨겨져 있어 발견하기 어려웠다. - 글쓴이는 기능의 목적을 완전히 이해하기 전부터 스와시, 장식 문자, 여러 숫자 스타일을 논문에 적용하며 OpenType의 매력에 빠졌다. ## OpenType 기능을 이해해 가는 과정 - 시간이 지나면서 폰트 제작사들은 PDF 설명서 대신 온라인 타입 견본 페이지를 통해 OpenType 기능을 소개하기 시작했다. - 폰트마다 제공하는 기능의 규모는 크게 달랐다. - 한 글자만 바꾸는 단일 기능을 제공하는 폰트 - 문자 전체를 변형해 서체가 전혀 다른 인상을 주는 수십 개의 기능을 제공하는 폰트 - 글쓴이는 점차 기능을 단순히 “켜 보는” 수준에서 벗어나, 각 기능이 어떤 문제를 해결하는지 이해하게 되었다. - 예를 들어 **discretionary ligatures**는 항상 적용하는 합자가 아니라, 필요할 때 선택적으로 사용하는 합자다. - **Tabular numbers**는 표처럼 숫자를 정렬해야 하는 상황에 적합하며, 본문용 숫자와 목적이 다르다. ## 맥락에 따른 숫자와 기호 선택 - Medium에서 글쓴이는 기사 본문과 인용문에 서로 다른 숫자 스타일을 적용하는 방식을 고민했다. - 본문에서는 숫자가 문장 속에 자연스럽게 섞이도록 눈에 띄지 않는 형태를 선택했다. - 반대로 큰 인용문이나 강조 영역에서는 제목처럼 강한 인상을 주는 숫자와 장식적인 앰퍼샌드를 사용했다. - 같은 폰트라도 OpenType 기능을 활용하면 콘텐츠의 역할에 맞춰 차분하거나 화려한 분위기를 만들 수 있다. - 따라서 특정 기능이 “더 좋은” 것이 아니라, 본문·표·제목·인용문 등 사용 위치에 따라 적절한 기능이 달라진다. ## 대문자 전용 조정과 디자인 완성도 - 많은 폰트에는 대문자로만 문장을 쓸 때를 위한 별도의 기호와 문장부호 세트가 포함되어 있다. - 대문자 환경에서는 일반적인 기호의 크기와 정렬이 어색해질 수 있으므로, 이를 보정한 글리프를 사용하면 전체적인 인상이 더 균형 잡힌다. - 이런 세부 조정은 글자 자체보다 기호와 문장부호의 간격, 높이, 정렬을 개선해 대문자 제목이나 포스터의 완성도를 높인다. ## Figma에서의 OpenType 지원 - Figma는 사용자가 사용하는 다양한 폰트의 OpenType 기능을 지원한다. - 로컬 폰트 - Google Fonts - 조직 내에서 공유된 폰트 - 사용자는 Figma의 인터페이스를 통해 다음 기능을 쉽게 탐색하고 적용할 수 있다. - 추가 합자 - 숫자 스타일 변경 - 대체 글자 형태 - 폰트에 포함된 각종 조정 기능 - 기존에는 전문적인 메뉴나 폰트 설명서를 찾아야 했던 기능을 디자인 작업 중에 직접 확인할 수 있게 된 것이 핵심 변화다. ## 실용적인 활용 방향 OpenType 기능은 장식 요소를 많이 넣는 도구라기보다, 글의 목적과 배치에 맞게 타이포그래피를 조정하는 수단이다. 본문에는 가독성이 좋은 숫자와 합자를 사용하고, 표에는 탭 숫자를 적용하며, 제목이나 포스터에는 대체 글리프와 장식 기능을 제한적으로 활용하는 것이 좋다. Figma에서는 폰트별 기능을 직접 비교해 보되, 효과가 눈에 띈다는 이유만으로 무작정 적용하지 않는 것이 중요하다.

원문 읽기(새 탭에서 열림)

typographyFigmaopentypefont-features+2

figma·2019년 8월 7일·3분 읽기큐레이션 요약

Inter의 탄생 | Figma 블

Inter는 컴퓨터 화면과 텍스트 중심의 사용자 인터페이스에서 읽기 쉽도록 설계된 오픈소스 서체다. Figma에서 작은 글씨에 Roboto의 한계를 느낀 Rasmus Andersson이 직접 개발했으며, 2017년 첫 글리프를 공개한 뒤 지속적으로 개선하고 있다. 글자는 단순히 만드는 데 그치지 않고, 다양한 문자 체계와 장기간의 조정이 필요한 5~10년 규모의 프로젝트라는 점이 핵심이다. ## UI용 서체로 시작한 배경 - Figma는 오랫동안 Google의 Roboto를 기본 서체로 사용했다. - Roboto는 제목과 본문을 모두 처리하도록 설계됐지만, Figma처럼 작은 텍스트가 많은 UI에서는 읽기 어려운 한계가 있었다. - Figma 팀은 한 달간 대안을 조사했지만 Roboto가 여전히 가장 적합하다고 판단했다. - 이 경험을 계기로 Rasmus Andersson은 특정 목적 없이 범용적으로 쓰이는 서체가 아니라, 컴퓨터 UI에만 집중한 서체를 만들기로 했다. - Inter는 2017년 8월 첫 글리프가 공개됐고, 이후 계속 업데이트되고 있다. ## 예상보다 훨씬 큰 서체 제작 작업 - Rasmus는 이전에 취미로 서체를 만들거나 Spotify에서 디스플레이용 서체를 제작한 경험은 있었지만, 본문용 대규모 서체는 처음이었다. - 처음에는 완성까지 약 1년이 걸릴 것으로 예상했다. - 그러나 실제로는 완성도 있게 발전시키는 데 5~10년이 걸릴 수 있는 장기 프로젝트임을 깨달았다. - 서체 제작은 글자 모양뿐 아니라 글자 간 간격, 크기 비율, 다양한 굵기와 언어 지원까지 함께 설계해야 하는 작업이다. ## 문자 체계별 설계의 복잡성 - 전 세계에는 널리 인정되는 문자 체계만 150개 이상 존재한다. - 라틴 문자 외에도 그리스 문자, 키릴 문자, 아랍 문자, 한글 등은 글자 구조와 조판 방식이 크게 다르다. - 대문자와 소문자의 개념, 글자 간 간격, 획의 구조가 문자 체계마다 다르기 때문에 하나의 서체 가족으로 모두 지원하는 데는 평생이 걸릴 수도 있다. - Rasmus는 자신에게 익숙한 라틴 문자부터 시작했고, 첫해에 가장 많이 사용되는 라틴 문자 약 200자를 구현했다. ## Roboto를 활용한 초기 확장 - 초기 Inter는 라틴 문자 외의 글자를 빠르게 확보하기 위해 Roboto의 글리프를 가져와 사용했다. - 오랫동안 키릴 문자의 일부와 그리스 문자의 상당수가 Roboto에서 비롯됐다. - 이 때문에 Inter는 한동안 이중 라이선스 방식으로 배포됐다. - 이후 프로젝트가 발전하면서 해당 글리프를 하나씩 Inter의 시각적 스타일에 맞게 다시 제작했다. - 기존 서체를 임시 기반으로 활용한 덕분에 처음부터 모든 문자를 직접 만들지 않고도 빠르게 범위를 넓힐 수 있었다. ## 소문자와 대문자의 비율 - Rasmus는 Roboto의 소문자 x-height와 대문자 높이의 비율을 특히 긍정적으로 평가했다. - 소문자 x와 대문자 X의 높이를 비교하면, 서체마다 대문자와 소문자의 상대적 크기가 크게 다르다. - Roboto는 소문자와 대문자의 크기 차이가 균형 잡혀 있어 작은 화면에서도 안정적인 인상을 준다. - 이러한 비율은 San Francisco, Akkurat, Graphik, Aeonik, Helvetica 등 여러 현대적 그로테스크 계열 서체에서도 공통적으로 나타난다. - Inter 역시 화면에서 텍스트가 또렷하고 일관되게 보이도록 이런 비율과 크기 관계를 중요하게 다뤘다. ## 서체는 지속적으로 발전하는 시스템 - Inter는 한 번 완성해 배포하는 고정된 결과물이 아니라, 새로운 글리프와 언어 지원을 추가하며 계속 다듬는 프로젝트다. - 라틴 문자로 시작하더라도 국제적인 서체가 되려면 그리스어, 키릴 문자 등 다양한 문자를 동일한 디자인 언어 안에 통합해야 한다. - 따라서 오픈소스 공개는 완성의 끝이 아니라, 더 많은 사용과 피드백을 통해 서체를 발전시키는 출발점으로 기능한다. UI나 제품용 서체를 선택할 때는 단순히 글자 모양만 비교하기보다 작은 크기에서의 가독성, 대문자·소문자 비율, 지원 언어, 라이선스와 장기 유지 가능성까지 함께 검토하는 것이 좋다. Inter의 사례는 좋은 UI 서체가 명확한 사용 목적과 지속적인 개선 과정을 통해 만들어진다는 점을 보여준다.

원문 읽기(새 탭에서 열림)

typographyFigma오픈 소스typeface-design+2

figma·2019년 4월 24일·3분 읽기큐레이션 요약

Figma의 줄 높이

Figma는 텍스트의 줄 높이를 글자 위아래에 균등하게 배분하고, 보다 현대적인 기준으로 측정하도록 변경했다. 이는 기존 파일에 자동 적용되지 않는 선택적 변경이며, 사용자가 원하는 시점에 업데이트할 수 있다. 이 글은 금속 활자부터 컴퓨터 글꼴, CSS까지 줄 높이와 수직 정렬이 발전해 온 과정을 설명하며 Figma의 변경 배경을 밝힌다. ## 금속 활자 시대의 줄 높이 - 초기 활자에서 폰트 크기는 글자 자체가 아니라 글자를 담는 납 블록의 높이를 의미했다. - 같은 16pt 폰트라도 실제 글자 크기, 기준선 위치, 위아래 여백은 서체마다 달랐다. - 조판공은 줄 사이에 얇은 납 조각을 끼워 행간을 추가했다. - 이 납 조각을 뜻하는 *leading*에서 오늘날의 줄 높이 개념이 유래했다. - 예를 들어 16pt 활자에 4pt 행간을 추가하면 전체 줄 높이는 20pt가 된다. - 당시에는 행간을 추가할 수만 있었고, 활자에 내장된 공간을 제거할 수는 없었다. ## 디지털 폰트가 가져온 자유와 혼란 - 컴퓨터에서는 폰트가 고정된 납 블록이 아니라 다양한 수치와 메트릭을 담은 파일로 바뀌었다. - Windows, Macintosh, OS/2 등 플랫폼마다 폰트 형식과 렌더링 방식이 달랐고, 버그와 호환성 문제도 발생했다. - 화면에서는 글자가 고정된 상자에 묶이지 않으므로 행간을 자유롭게 추가하거나 제거할 수 있게 됐다. - 폰트의 기본 줄 높이는 글자 크기와 무관하게 임의의 값으로 설정될 수 있었다. - 같은 글자 크기와 같은 줄 높이를 사용해도 폰트 내부의 ascent, descent, 기준선 위치가 달라 시각적 결과가 달라졌다. ## CSS와 폰트 메트릭의 복잡성 - 웹에서는 줄 높이를 단순히 글자 크기로만 결정하지 않고, 기준선과 인라인 박스를 기준으로 계산한다. - CSS의 줄 높이는 일반적으로 한 줄의 기준선에서 다음 줄 기준선까지의 거리로 이해할 수 있다. - 추가 공간인 “half-leading”을 글자 위와 아래에 나누어 배치하는 방식이 사용된다. - 그러나 폰트 파일에 들어 있는 여러 메트릭 값이 서로 다른 목적을 가져 브라우저와 운영체제마다 결과가 달라질 수 있었다. - 특히 OS/2 테이블의 ascent, descent, line gap 값은 폰트의 시각적 경계와 실제 줄 상자 크기를 일치시키지 못하는 경우가 있었다. ## Figma의 줄 높이 변경 - Figma는 추가 줄 높이를 글자 위와 아래에 분배하는 방식으로 변경했다. - 줄 높이를 글자 크기나 특정 플랫폼의 관행에만 의존하지 않고, 보다 현대적인 타이포그래피 및 웹 기준에 가깝게 측정한다. - 이를 통해 텍스트가 프레임 안에서 수직으로 배치되는 방식을 더 예측 가능하게 만들려 했다. - 변경 사항은 기존 파일에 강제로 적용되지 않는다. - 사용자는 기존 텍스트를 그대로 유지하거나, 필요할 때 새 줄 높이 동작으로 업데이트할 수 있다. ## 하나의 완벽한 기준을 만들기 어려운 이유 - Figma는 인쇄물 디자인, 웹 디자인, 제품 UI 등 서로 다른 목적에 사용된다. - 역사적인 조판 관습과 현대적인 CSS 동작이 항상 일치하지 않는다. - 폰트마다 내부 메트릭이 다르고, 같은 폰트도 플랫폼과 렌더링 엔진에 따라 다르게 보일 수 있다. - 따라서 Figma는 모든 상황에 하나의 절대적인 정답을 적용하기보다, 새로운 동작을 선택 사항으로 제공하는 방식을 택했다. 기존 디자인의 시각적 일관성이 중요하다면 파일을 즉시 변경하지 말고, 새 줄 높이 동작이 필요한 웹·제품 UI 작업부터 선택적으로 적용하는 것이 적절하다.

원문 읽기(새 탭에서 열림)

typographyFigmaCSSweb-design+2

figma·2018년 7월 25일·3분 읽기큐레이션 요약

Figma의 디자인 사전을 소개

디자인 업계는 예술·인쇄·출판의 역사에서 비롯된 전문 용어가 많아, 디자이너뿐 아니라 엔지니어·기획자·카피라이터·이해관계자에게도 협업 장벽이 될 수 있다. Figma는 구성원 간 원활한 소통을 돕기 위해 70개 용어로 시작한 오픈소스 **Design Dictionary**를 공개했다. 이 사전은 업계 변화에 맞춰 계속 확장되며, 커뮤니티의 제안으로 더욱 포괄적인 자료가 되는 것을 목표로 한다. ## 디자인 용어가 협업을 어렵게 만드는 이유 - 전문 산업에는 각 분야만의 고유한 언어가 있으며, 이는 전문가에게는 정밀한 소통 수단이 된다. - 반면 업계에 새로 들어온 사람에게는 전문 용어가 위압적이고 혼란스럽게 느껴질 수 있다. - 디자인은 사용성, 타이포그래피, 시각 요소 등 세부 개념이 많아 특히 복잡한 어휘 체계를 갖고 있다. - 디지털 인터페이스 제작에서는 조직의 여러 직군이 디자인에 관여한다. - 엔지니어는 디자인을 실제 코드로 구현한다. - 카피라이터나 편집자는 화면에 문구를 추가한다. - 제품 관리자는 전체 작업을 조율한다. - 이해관계자는 디자인을 검토하고 승인한다. - 이들이 같은 용어를 서로 다르게 이해하면 요구사항 전달과 의사결정이 어려워진다. ## Figma Design Dictionary의 목적 - 디자인 관련 기본 용어와 개념을 쉽게 찾아볼 수 있는 용어집이다. - 디자인을 처음 배우는 사람뿐 아니라 디자이너와 협업하는 비디자이너를 대상으로 한다. - Figma가 다양한 배경의 인재를 채용하면서 실제로 겪은 커뮤니케이션 문제에서 출발했다. - 비즈니스, 데이터 분석, 고객 지원, 엔지니어링 등 디자인 비전공자도 디자인 업무에 참여하면서 공통 언어의 필요성이 커졌다. - 용어를 통일해 직군 간 협업과 디자인 관련 논의를 더 명확하게 만드는 것이 핵심 목표다. ## 오픈소스와 커뮤니티 기반 확장 - 사전은 처음 70개 용어로 공개됐으며, 완성된 결과물이 아니라 지속적으로 발전하는 작업으로 소개됐다. - 디자인 업계의 변화와 새로운 개념에 맞춰 항목을 계속 추가할 계획이다. - Figma는 더 포괄적인 자료를 만들기 위해 커뮤니티의 참여를 요청했다. - 특히 다음과 같은 용어와 사용 사례에 대한 의견을 받으려 했다. - White Space - Stroke - Lorem Ipsum - 팀 내 협업을 방해하거나 자주 오해되는 표현 - 디자인 용어가 잘못 사용되는 상황 - 이용자는 사전 하단의 제안 링크를 통해 새로운 항목이나 수정 의견을 제출할 수 있다. ## 실용적인 활용 방법 - 디자인 협업을 시작할 때 팀에서 자주 사용하는 용어를 사전으로 확인하고 정의를 맞추는 것이 좋다. - 회의나 문서에서 모호한 용어가 나오면 개인의 해석에 의존하지 말고 공통 정의를 확인해야 한다. - 비디자이너 구성원의 온보딩 자료나 직군 간 협업 가이드에 용어집을 포함하면 커뮤니케이션 비용을 줄일 수 있다. - 조직에서 자주 혼동하는 표현은 자체 용어집에 추가하고, Figma처럼 지속적으로 갱신하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)

typographyFigma디자인 시스템사용자 경험+2

figma·2018년 5월 8일·2분 읽기큐레이션 요약

피그마 스타일 베타: 텍

Figma Styles 베타는 텍스트와 레이어 속성을 독립적인 스타일로 관리해 디자인 전반의 일관성과 유지보수성을 높이려는 기능이다. 텍스트 형식·색상·정렬 등을 분리해 조합할 수 있으며, 팀 라이브러리를 통해 최신 스타일을 공유하고 변경 사항을 동기화한다. 또한 하나의 텍스트 필드 안에서도 일부 문장에 서로 다른 스타일을 적용하면서 원본 스타일과의 연결을 유지하는 것이 핵심이다. ## 스타일 속성의 모듈화 - 기존 디자인 도구에서는 텍스트 스타일에 글꼴, 색상, 정렬 등이 함께 묶였다. - 예를 들어 제목·부제목·본문 3종에 색상 3개를 적용하면 최소 9개의 스타일이 필요했다. - Figma Styles는 다음 속성을 개별적으로 설정하고 조합할 수 있게 한다. - 텍스트 형식 - 채우기 및 색상 - 정렬 - 레이아웃 그리드 - 효과 - 선(stroke) - 링크 색상처럼 특정 색상만 바뀌는 경우, 해당 채우기 스타일 하나만 수정하면 이를 사용하는 모든 디자인에 변경 사항이 전파된다. ## 팀 라이브러리를 통한 일관성 관리 - 스타일은 팀 라이브러리에서 공유할 수 있다. - 팀원 모두가 최신 버전의 디자인 시스템을 사용할 수 있다. - 팀이 스타일을 활성화하면 변경 사항에 대한 알림을 받을 수 있다. - 개인 작업뿐 아니라 여러 디자이너가 참여하는 대규모 디자인 시스템 관리에도 적합하다. ## 텍스트 필드 내부의 부분 스타일 적용 - 기존 도구에서는 하나의 텍스트 필드에 단일 스타일만 적용되는 경우가 많았다. - 문장 일부를 링크로 만들거나, 특정 부분을 소제목처럼 표시하면 원래 텍스트 스타일과의 연결이 깨질 수 있었다. - Figma에서는 텍스트 일부를 선택해 서로 다른 텍스트 스타일이나 채우기 스타일을 적용할 수 있다. - 한 텍스트 필드 안에서 다음과 같은 구성이 가능하다. - 본문 중 일부를 링크 색상으로 표시 - 문장 일부를 소제목으로 지정 - 특정 구간에 별도의 서식 적용 - 부분적으로 다른 스타일을 적용해도 관련 스타일과의 연결이 유지되므로, 스타일 변경 시 해당 부분도 함께 업데이트된다. ## 베타 도입 방식과 기대 효과 - 이 기능은 2018년 5월 비공개 베타로 공개됐다. - 작은 팀부터 큰 팀 순서로 마이그레이션하며, 한 번 진행하면 되돌릴 수 없는 방식이었다. - 새로운 스타일 관리 방식에 적응이 필요하지만, 반복적인 수동 수정과 스타일 중복을 줄이는 것이 목적이다. - 개인 디자이너에게는 일상적인 편집 작업을 단순화하고, 팀에는 확장 가능한 디자인 시스템 운영을 제공한다. Figma Styles의 핵심 장점은 스타일을 세부 속성 단위로 분리하고, 그 연결 관계를 유지한다는 점이다. 디자인 시스템을 운영한다면 색상·타이포그래피·효과를 독립적으로 관리하고 팀 라이브러리에서 공유하는 방식이 변경 대응과 일관성 유지에 유리하다.

원문 읽기(새 탭에서 열림)

typographyFigma디자인 시스템사용자 경험+2

figma·2018년 4월 17일·3분 읽기큐레이션 요약

디자인 면접에서 포트폴

신입 디자이너의 포트폴리오 면접 발표는 작품의 완성도만큼이나 전달 방식이 중요하다. 발표자는 자신이 어떤 디자이너인지 명확히 소개하고, 가장 애정을 가진 프로젝트를 중심으로 문제·역할·해결 과정·성과를 간결하게 설명해야 한다. 또한 면접 회사의 브랜드를 무리하게 차용하기보다 자신의 역량과 디자인 사고를 정확히 보여주는 데 집중해야 한다. ## 발표의 시작은 천천히, 정체성은 분명하게 - 발표 초반에는 이름과 전문 분야를 먼저 소개한다. - 모든 디자인 분야를 잘한다고 포장하기보다 자신이 강점을 가진 영역을 명확히 말한다. - 타이포그래피 - UX/UI 디자인 - 커뮤니케이션 디자인 - 모션 그래픽 - 프런트엔드 개발 - 경험해 본 분야와 전문 분야를 구분해 설명하면 자신의 역량 범위를 더 신뢰감 있게 전달할 수 있다. - 경력이 많은 디자이너라면 여러 분야에 걸친 폭넓은 전문성을 강조해도 좋지만, 신입이라면 핵심 강점과 열정을 선명하게 보여주는 편이 효과적이다. ## 가장 오래 한 프로젝트보다 가장 좋아하는 프로젝트를 먼저 보여주기 - 신입 지원자는 규모가 크고 작업 시간이 긴 프로젝트를 먼저 제시하려는 경향이 있다. - 그러나 발표 초반에는 자신이 가장 즐겁게 작업했고 애정을 가진 프로젝트를 선택하는 것이 좋다. - 열정이 담긴 프로젝트는 발표자의 디자인 감각과 개성을 더 자연스럽게 드러낸다. - 작은 프로젝트라도 본인의 관점과 성향을 잘 보여준다면 복잡하고 장황한 프로젝트보다 인상적일 수 있다. ## 프로젝트는 “무엇을, 누가, 왜, 현재 어떻게 되었는가”로 설명하기 면접관에게 프로젝트의 모든 세부 과정을 전달하려 하기보다, 핵심 흐름만 남겨 이해하기 쉽게 구성해야 한다. - 간단한 프로젝트 소개 - 해결해야 했던 문제 - 프로젝트 목표 - 실제 실행 과정 - 최종 디자인 - 결과와 성공을 판단한 기준 ### 무엇을 만든 프로젝트인가 - 발표 자료에 긴 아티스트 스테이트먼트가 있더라도 면접관이 모두 읽는다고 기대하지 않는다. - 배경지식이 없는 사람도 이해할 수 있도록 프로젝트의 성격과 목적을 간단히 설명한다. ### 누가 어떤 역할을 맡았는가 - 팀 프로젝트에서는 자신의 기여 범위를 반드시 분명히 한다. - 담당한 업무와 의사결정에 참여한 부분을 설명해야 면접관이 실제 역량을 정확히 판단할 수 있다. - 역할을 밝히지 않으면 팀의 성과를 자신의 성과처럼 말하는 것으로 오해받거나, 반대로 본인의 기여가 제대로 드러나지 않을 수 있다. ### 왜 필요한 프로젝트였는가 - 대부분의 디자인 과제는 특정한 문제를 해결하기 위해 진행된다. - 사용자의 문제, 비즈니스 요구, 커뮤니케이션상의 제약 등 프로젝트가 시작된 이유를 구체적으로 제시한다. - 면접관이 디자인 과제의 맥락과 난점을 공감할 수 있도록 상황을 생생하게 설명한다. ### 현재 어떤 결과를 만들었는가 - 디자인이 실제로 어떻게 사용되었는지 설명한다. - 가입자 증가, 전환율, 사용량 등 측정 가능한 성과가 있다면 수치로 제시한다. - 결과물이 실제 채택되지 않았더라도, 채택되었다면 어떤 효과가 있었을지와 향후 가능성을 설명할 수 있다. - 기업은 마감 시점의 결과물뿐 아니라 디자인이 실제 환경에서 어떻게 살아갈 수 있는지도 보고 싶어 한다. ## 면접 회사의 브랜드를 과도하게 활용하지 않기 - 지원 회사의 브랜드를 발표 자료나 작품에 무리하게 적용하는 것은 신중해야 한다. - 회사의 브랜드 사용 지침을 정확히 모르면 의도치 않게 브랜드를 잘못 표현할 수 있다. - 면접관 중에는 해당 브랜드의 디자인 시스템과 컴포넌트를 직접 만든 디자이너가 있을 수 있다. - 회사를 만족시키려는 의도가 오히려 브랜드를 피상적으로 모방하거나 잘못 이해한 결과로 보일 수 있다. - 회사에 맞춘 준비보다 자신의 디자인 역량, 문제 해결 과정, 협업 기여도를 명확히 전달하는 데 집중하는 것이 안전하다. 발표를 준비할 때는 프로젝트 수를 늘리기보다 자신을 가장 잘 보여주는 작업을 선정하고, 각 프로젝트를 짧고 일관된 구조로 연습하는 것이 좋다. 특히 “내 역할은 무엇이었는가”, “어떤 문제를 해결했는가”, “그 결과 무엇이 달라졌는가”를 명확히 답할 수 있어야 한다.

원문 읽기(새 탭에서 열림)

typographyFigmaCSSHTML+3

figma·2017년 4월 26일·3분 읽기큐레이션 요약

에어비앤비 존 골

에어비앤비의 디자인 테크놀로지스트 젬 골드는 디자인을 결과물이 아니라 시스템과 프로세스의 산물로 바라본다. 그가 고른 다섯 권의 책은 디자인 시스템, 인간과 컴퓨터의 협업, 집중력, 명상, 함수형 프로그래밍에 대한 관점을 형성했다. 공통적으로 작은 구성 요소를 조합하고, 인간의 창의성을 확장하는 도구와 환경을 중시한다. ## 디자인을 생성하는 시스템으로 보기 — 《Designing Programmes》 - 칼 게르스트너의 책은 레이아웃·로고·타이포그래피를 개별 결과물이 아니라 일정한 규칙과 과정이 만들어내는 산출물로 설명한다. - 디자이너가 매번 최종 결과를 직접 만드는 대신, 사람이 조정할 수 있는 디자인 파이프라인과 시스템을 설계한다는 관점을 제시한다. - UI 디자인 시스템이 등장하기 전의 책이지만, 오늘날의 디자인 시스템과 자동화된 제작 도구에도 그대로 연결된다. - 젬 골드는 이 관점을 에어비앤비의 디자인 시스템과 디자인 자동화 작업에 적용하고 있다. ## 반응을 늦추는 습관 — 《10% Happier》 - 명상은 즉각적인 감정이나 직관에 따라 반응하기보다, 문제를 관찰하고 더 나은 대응을 선택하게 해준다. - 이 책은 명상 기법 안내서라기보다, 방송 중 신경 쇠약을 겪은 저널리스트 댄 해리스의 회고록에 가깝다. - 저자는 명상에 관한 여러 주장에 회의적인 태도를 유지하며, 종교적·초월적 설명보다 실제 경험과 검증 가능성을 중시한다. - 젬 골드는 이런 현실적이고 비판적인 태도가 디자인 의사결정에도 도움이 된다고 본다. ## 인간의 지능을 확장하는 컴퓨터 — 《The Dream Machine》 - J. C. R. 리클라이더가 주창한 ‘인간-컴퓨터 공생’과 컴퓨터의 상호작용적 활용을 다룬다. - 컴퓨터를 펀치카드를 입력하고 결과를 오래 기다리는 기계가 아니라, 인간의 사고력을 증폭하고 함께 탐구하는 도구로 바라본다. - IBM 중심의 정적이고 관료적인 컴퓨팅 비전에 맞서, 사람들이 즐겁게 사용할 수 있는 인터랙티브 컴퓨팅을 추구한 연구자들의 역사를 소개한다. - 젬 골드는 기존 관습에 도전하고 인간의 능력을 확장하는 기술을 만들려는 태도를 자신의 작업에도 이어가고 있다. ## 창의성을 위한 집중력 — 《Deep Work》 - 소셜 미디어는 작업 중 주의를 끊고, 사고와 상상력을 계속 초기화해 깊은 아이디어를 형성하기 어렵게 만든다. - 젬 골드는 한 달 동안 소셜 미디어를 끊고, 창작 작업을 위한 시간을 미리 일정에 배치했다. - 초기에는 확인 충동을 참기 어렵지만, 달리기나 독서처럼 창의성을 회복시키는 활동으로 주의를 전환할 수 있다. - 집중력은 단순히 방해 요소를 제거하는 것이 아니라, 창의적인 활동으로 삶의 빈자리를 채우는 습관과 관련된다. ## 작은 단위의 조합과 확장 — 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》 - 함수형 프로그래밍은 문제를 가능한 한 작은 단위로 나눈 뒤, 이 요소들을 조합하고 재배열하는 방식이다. - 짧고 무료로 읽을 수 있어 프로그래밍 입문자에게도 비교적 접근하기 쉽다. - 젬 골드는 이 사고방식이 디자인에도 직접 적용된다고 본다. - 큰 레이아웃이나 마케팅 페이지부터 시작해 쪼개는 대신, 가장 작은 디자인 프리미티브에서 출발해 점진적으로 구성 요소를 쌓아 올린다. - 이는 디자인 시스템에서 재사용성과 일관성을 확보하는 데 특히 유용하다. ## 실무에 적용할 점 - 디자인을 개별 시안이 아니라 규칙·구성 요소·자동화 과정이 결합된 시스템으로 설계한다. - 작은 프리미티브부터 시작해 복잡한 화면과 제품으로 확장한다. - 소셜 미디어와 즉각적인 반응을 줄여 깊이 있는 작업 시간을 확보한다. - 기술을 단순한 자동화 수단이 아니라 인간의 사고와 창의성을 강화하는 협업 도구로 활용한다.

원문 읽기(새 탭에서 열림)

typographyAI디자인 시스템React+2