figma2023년 3월 5일

메이커를 만나다: 마 (새 탭에서 열림)

Figma의 디자인 매니저 마르신 위치하리(Marcin Wichary)는 150년의 키보드 역사를 다룬 저서 'Shift Happens'를 집필하며, 소프트웨어 개발 방법론인 '프로토타이핑'을 도서 제작 공정에 도입했습니다. 그는 단순히 글을 쓰는 것에 그치지 않고 직접 플러그인을 개발하고 빈티지 하드웨어를 복원하는 등 기술적 탐구를 병행했으며, Figma를 활용해 디자인과 피드백 과정을 혁신적으로 효율화했습니다. 이 프로젝트는 일상의 도구를 깊이 있게 탐구하는 제작자(Maker)의 태도와 현대적인 디자인 도구가 전통적인 출판 방식에 어떻게 새로운 흐름을 만들 수 있는지를 보여줍니다. #### 프로토타입 중심의 제작 방식 - 소프트웨어 개발과 유사하게 '생각하고, 구축하고, 사용해보고, 다시 개선하는' 프로토타이핑 사이클을 반복하며 책을 디자인했습니다. - 원고가 완성되기 전부터 사진을 배치하기 시작했으며, 텍스트와 이미지가 인쇄 프로그램에 자동으로 흐르도록 전용 플러그인과 소프트웨어를 직접 작성했습니다. - 오탈자를 점검하기 전인 초기 원고 단계에서 이미 주문형 인쇄(Print-on-demand)로 프로토타입을 제작하여 실제 물리적인 느낌과 레이아웃의 한계를 테스트했습니다. - 검정색 배경, 선명한 색상, 세밀한 디테일이 포함된 사진 등 '엣지 케이스(Edge cases)'에 해당하는 페이지들을 미리 인쇄해 봄으로써 잠재적인 인쇄 사고를 방지했습니다. #### 기술적 호기심과 제작의 즐거움 - 집필 과정의 번아웃을 방지하기 위해 빈티지 키보드를 역공학하여 현대 컴퓨터에 연결하거나, 피아노를 타자기로 개조하는 등 실험적인 '장난감' 프로젝트를 병행했습니다. - 80년대 키보드에서 주로 쓰였으나 디지털 폰트로 존재하지 않던 'Gorton' 서체를 Figma와 Glyphs를 활용해 직접 복원 및 디자인했습니다. - 타자기 시뮬레이터와 미니 게임 등을 제작하며 프로젝트에 대한 흥미를 유지했고, 이 과정에서 Figma의 폰트 UI 버그를 발견해 본업인 제품 개선에 기여하기도 했습니다. #### Figma를 활용한 디자인 시스템과 협업 - Figma의 오토 레이아웃(Auto Layout)과 플러그인을 활용해 복잡한 도서 레이아웃 작업을 자동화하고 관리했습니다. - 전 세계에 흩어져 있는 3D 렌더러 및 동료들과 Figma 공유 URL을 통해 실시간으로 소통하며, 캔버스 위에 직접 스케치하거나 댓글을 남기는 방식으로 피드백 루프를 단축했습니다. - 무드보드 제작부터 킥스타터 캠페인, 뉴스레터 디자인까지 모든 자산을 Figma에서 관리하며, 공식적인 디자인 시스템 없이도 일관성을 유지할 수 있는 환경을 구축했습니다. #### 피드백 수집의 혁신 - 전통적인 워드 프로세서 방식의 편집에서 벗어나, 지인들이 비밀 URL을 통해 이모지나 짧은 반응을 남길 수 있는 전용 피드백 앱을 직접 개발했습니다. - 피드백을 받는 과정을 하나의 '게임'처럼 만들어 참여자들에게 즐거움을 주는 동시에, 제작자 자신도 글쓰기에서 잠시 벗어나 개발자로서의 뇌를 환기하는 창구로 활용했습니다. 마르신 위치하리의 사례처럼 본업에서 사용하는 기술(소프트웨어 프로토타이핑, 플러그인 개발)을 개인적인 창작 프로젝트에 이식해 보세요. 과정을 세분화하고 각 단계마다 눈에 보이는 결과물을 만들어내는 방식은 거대한 프로젝트를 완수하는 데 실질적인 도움이 됩니다.

glyphsfigmaprototypingtypography+4

figma2020년 9월 28일

폰트가 깨질 때 (새 탭에서 열림)

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

glyphstypographyscreen-readersunicode+3