typography

25 개의 포스트

figma

여름 캠페인의 해부: (새 탭에서 열림)

Instacart는 1990년대의 향수를 자극하는 간식과 디자인을 활용해 “Summer Like It’s 1999” 캠페인을 진행했다. 1999년 가격으로 Bagel Bites, Capri-Sun, Otter Pops 등을 판매하고, 뉴욕에서 Third Eye Blind 무료 콘서트를 열어 온라인과 오프라인을 연결했다. 캠페인의 성공 요인은 여러 팀과 파트너가 Figma를 중심으로 실시간 협업하며 일관된 디자인 시스템을 구축한 데 있었다. ## 1990년대 향수를 되살린 캠페인 - 버터플라이 클립, 초커, 헐렁한 청바지, 버킷햇 등 당시 유행을 현대적으로 재해석했다. - “단순하고 carefree했던 시절”에 대한 향수를 캠페인의 정서적 기반으로 삼았다. - 대표적인 1990년대 간식을 당시 가격으로 제공해 과거의 여름 경험을 재현했다. - 앱 아이콘과 스플래시 화면부터 TV 광고, 옥외 광고, 콘서트까지 수십 개의 접점을 하나의 캠페인으로 연결했다. ## 브랜드와 복고풍 사이의 균형 - Instacart의 자체 브랜드 정체성을 유지하면서도 1990년대 분위기를 강하게 표현하는 것이 핵심 과제였다. - 청키한 타이포그래피, 선명한 색상, 피시 아이 렌즈 사진을 주요 시각 요소로 사용했다. - 팀은 다양한 1990년대 디자인 자료를 폭넓게 탐색한 뒤, 브랜드와 캠페인을 연결하는 핵심 요소만 추려냈다. - 크리에이티브 스튜디오는 타이포그래피, 색상, 일러스트레이션, 사진, 로고와 락업 표현을 매일 논의하며 방향을 조정했다. ## 확장 가능한 디자인 툴킷 - 캠페인 툴킷에는 다음 요소가 체계적으로 정리됐다. - 기본 및 보조 색상 팔레트 - 일러스트레이션 스타일 - 타이포그래피와 문구 배치 - 제품 패키지 표현 방식 - 사진 및 질감 활용법 - 로고와 캠페인 락업 규칙 - 툴킷은 단순한 가이드 문서가 아니라 내부 팀과 외부 파트너가 계속 활용하는 ‘살아 있는 파일’로 운영됐다. - 캠페인 진행 중 새로운 요구사항이 생겨도 기존 규칙 안에서 자유롭게 변형할 수 있었다. - Venmo 파트너십 광고처럼 예상하지 못한 확장 프로젝트도 기존의 글꼴, 일러스트, 사진 지침을 활용해 빠르게 제작할 수 있었다. ## Figma를 중심으로 한 협업 방식 - 브랜드, 퍼포먼스, 커머셜 마케팅, 앱 제작팀이 Figma를 공동 작업 공간으로 사용했다. - 마케터도 파일에 직접 접근해 작업 진행 상황을 확인하고, 제작 중간에 의견을 제시할 수 있었다. - 완성물을 마지막에 전달하는 방식 대신, 작업 과정의 ‘중간 상태’를 공유하며 지속적으로 수정했다. - 다양한 팀과 외부 이해관계자가 빠르게 움직이는 캠페인에서는 개방성과 유연성이 중요하다는 점을 보여준다. - Figma는 디자인 제작 도구이자 캠페인의 일관성을 유지하는 단일 기준점 역할을 했다. ## 세밀하게 설계한 사진 브리프 - 사진 브리프는 무엇을 촬영할지뿐 아니라 어떤 방식으로 촬영할지도 구체적으로 규정했다. - 캠페인의 핵심 CPG 제품이 사진 속에서 어떻게 보여야 하는지 명확히 지정했다. - 여러 이해관계자의 검토를 거쳐야 했기 때문에 제품 노출 방식과 촬영 구도가 세밀하게 정의됐다. - 사진 위에 일러스트레이션, 타이포그래피, 질감을 추가해 모든 소재가 동일한 캠페인처럼 보이도록 설계했다. - 낮은 앵글, 피시 아이 효과, 햇살이 느껴지는 야외 공간 등을 활용해 1990년대의 과장되고 낙관적인 분위기를 표현했다. ## 실용적인 시사점 대규모 캠페인에서는 완성된 결과물을 일방적으로 전달하기보다, 모든 팀이 접근할 수 있는 공유 툴킷과 실시간 리뷰 구조를 마련하는 것이 효과적이다. 특히 복고풍처럼 강한 스타일을 활용할 때는 시각적 요소를 무작정 늘리기보다 브랜드와 연결되는 핵심 규칙을 먼저 정하고, 그 안에서 다양한 실행물을 확장하는 방식이 유용하다.

figma

Config 2025의 비 (새 탭에서 열림)

Figma는 Config 2025의 브랜드를 고정된 스타일이 아니라 다양한 매체와 상황에 유연하게 적용되는 시각 시스템으로 설계했다. 기본 도형에서 출발한 애니메이션 글리프와 컴포넌트 라이브러리를 활용해 컨퍼런스의 주제인 창작, 표현, 변화, 적응성을 표현했다. 그 결과 무대 화면부터 공간 장식, 소셜 콘텐츠, 배지와 굿즈까지 일관되면서도 확장 가능한 몰입형 경험을 구축했다. ## 대규모 행사를 위한 유연한 브랜드 시스템 - Config는 샌프란시스코와 런던에서 1만 명 이상이 참석하고, 온라인으로 수만 명이 시청하는 대형 사용자 컨퍼런스다. - Brand Studio 팀은 행사 시작 약 10개월 전부터 시각 아이덴티티 개발에 착수했다. - 브랜드 작업 범위는 다음과 같이 넓었다. - 메인 스테이지 화면 - 디지털 콘텐츠와 소셜 미디어 - 행사장 공간 경험 - 참석자 배지 - 굿즈와 각종 인쇄물 - 행사가 진행되며 요구사항과 제약이 달라질 수 있으므로, 처음부터 여러 환경에 대응할 수 있는 시스템을 만드는 것이 중요했다. ## 기본 도형에서 출발한 글리프 콘셉트 - Figma 브랜드의 핵심인 형태, 글리프, 프리미티브를 Config의 시각 언어로 확장했다. - 초기 단계에서는 무드보드나 구체적인 스타일보다 콘셉트 자체를 먼저 탐색했다. - 실행 방식을 지나치게 일찍 제한하면 결과물이 뻔하고 평면적으로 보일 수 있기 때문에, 콘셉트는 명확히 하되 표현 방식은 열어두었다. - 시각 콘셉트는 소셜 게시물, 대형 디지털 스크린, 실제 공간 설치물 등 서로 다른 크기와 매체에 적용될 수 있어야 했다. ## ‘늘어나고 흔들리는’ 글리프의 구조 - 각 글리프는 내부 요소와 외부 요소로 구성되며, 두 요소가 서로 반응하도록 설계됐다. - 글리프와 구성 요소의 변화는 창작 과정에서 나타나는 역동성, 변화, 적응성을 상징한다. - 정적인 그래픽에 그치지 않고 움직임을 통해 시각적 에너지를 강화했다. - 하나의 글리프가 움직이면 주변에 파동을 일으킨다. - 파동은 전체 구성을 변화시키며 연쇄적인 움직임을 만든다. - 이 구조 덕분에 같은 시각 언어를 사용하면서도 각 화면과 공간에서 서로 다른 조합과 움직임을 구현할 수 있었다. ## 컴포넌트 기반의 협업과 확장 - 팀은 Figma 안에서 글리프 라이브러리를 만들었다. - 글리프를 컴포넌트로 제작해 파트너와 외부 제작업체가 쉽게 재사용하고 수정할 수 있도록 했다. - 컴포넌트 기반 시스템의 장점은 다음과 같다. - 여러 표면과 매체에 빠르게 적용 가능 - 구성 요소를 교체하거나 커스터마이즈하기 쉬움 - 행사 전체의 시각적 일관성 유지 - 새로운 요구사항이 생겨도 기존 시스템 안에서 대응 가능 ## 제품 출시와 연결된 창작의 메시지 - Config 2025에서는 Figma Draw와 Figma Sites 등 사용자의 창의적 표현을 확장하는 제품 출시가 예정되어 있었다. - 이에 따라 시각 콘셉트도 단순한 장식보다 “더 자유롭고 예상 밖의 방식으로 자신을 표현한다”는 메시지에 초점을 맞췄다. - 글리프의 유기적인 움직임과 다양한 조합은 제품이 사용자의 창작 가능성을 넓힌다는 의미와 연결됐다. ## 새 Figma 브랜드 요소의 적용 - Config 2025는 Figma가 최근 진행한 브랜드 리프레시의 색상 체계와 새 서체인 Figma Sans를 활용할 수 있는 시점에 진행됐다. - 기존 브랜드 요소를 그대로 복사한 것이 아니라 Config의 행사 목적과 분위기에 맞게 변형해 사용했다. - 이를 통해 Config만의 표현력을 확보하면서도 Figma 전체 브랜드와의 연결성을 유지했다. Config처럼 규모가 크고 여러 채널에서 동시에 운영되는 행사는 처음부터 완성된 이미지 하나를 만드는 것보다, 재조합과 변형이 가능한 디자인 시스템을 구축하는 편이 효과적이다. 명확한 콘셉트, 컴포넌트화된 자산, 애니메이션 규칙을 함께 설계하면 행사 규모가 커져도 일관성과 창의성을 동시에 유지할 수 있다.

figma

Figma의 디자인과 크 (새 탭에서 열림)

Figma의 『Practice』는 좋은 결과물이 반복적인 연습, 실패, 관찰, 정교함을 통해 만들어진다는 생각을 담은 Config 2025의 세 번째 잡지다. 이 책은 기술적 숙련을 전통적 장인정신과 연결하면서도, 새로운 도구와 기술에 맞춰 craft가 계속 변화한다고 말한다. 중요한 것은 단순히 “작동하는가”가 아니라 “어떻게 작동하는가”이다. ## 『Practice』의 주제와 제작 배경 - 책의 중심 주제는 의도를 가지고 무언가를 만드는 **craft**다. - 숙련에는 다음과 같은 과정이 필요하다고 설명한다. - 반복적인 시도와 연습 - 실패를 통한 학습 - 더 뛰어난 사람에게 배우기 - 위험을 감수하고 새로운 방식 시도하기 - 세부 사항을 관찰하고 정밀하게 다듬기 - Figma CEO Dylan Field는 결과의 기능 여부뿐 아니라 구현 방식과 과정이 중요하다고 강조한다. - 책에는 디자인, 기술, 창작 도구, 제작자의 태도에 관한 인터뷰와 에세이가 포함됐다. ## 전통과 현대 기술의 결합 - 디자인 스튜디오 Other Means는 윌리엄 모리스와 Kelmscott Press의 장인적 책 제작 방식에서 영감을 얻었다. - Kelmscott Press가 추구한 “본질적인 품질과 예술적 취향”을 현대적인 편집 디자인으로 재해석했다. - 이니셜 대문자, 플뢰롱, 장식 테두리, 드롭캡 같은 전통적 조판 요소를 현대적으로 활용했다. - 서체 디자이너 Kia Tasbihgou가 만든 드롭캡은 역사적인 타이포그래피 전통을 반영한다. - 화면, 픽셀, 데이터 중심으로 작업하는 현대 디자이너들도 다른 분야의 장인들과 인내, 관찰, 의도성이라는 공통 기반을 공유한다고 본다. ## 책을 넘어선 서체와 디지털 경험 - 『Practice』의 드롭캡 디자인을 확장해 하나의 완전한 서체를 제작했다. - 책에서 사용한 독특한 문자를 알파벳 전체로 발전시켜 타입페이스로 공개했다. - Figma Sites를 활용해 서체 견본 페이지를 만들고, 온라인에서 서체를 감상하고 내려받을 수 있도록 했다. - 이는 책의 물리적 디자인을 디지털 환경으로 확장한 사례다. ## 장인정신의 네 가지 관점 책은 craft를 다음 네 가지 관점에서 다룬다. - **적응(Adaptation)**: 변화하는 기술과 환경에 맞춰 제작 방식과 도구를 조정하는 과정 - **반복(Iteration)**: 시도와 실패를 거듭하며 결과를 개선하는 과정 - **적용(Application)**: 익힌 기술과 원칙을 실제 문제와 다양한 분야에 적용하는 방식 - **가치(Value)**: 정성과 숙련이 결과물의 품질과 의미를 어떻게 높이는지에 대한 고찰 『Practice』는 디지털 도구가 발전하더라도 숙련과 판단, 세부 사항에 대한 관심은 여전히 중요하다고 말한다. 새로운 기술을 활용하되 결과만 빠르게 얻는 데 그치지 말고, 반복과 관찰을 통해 작업의 완성도와 작동 방식을 함께 다듬는 태도가 실용적인 교훈이다.

figma

장인 정신을 정의하는 (새 탭에서 열림)

이 글은 디자인 커뮤니티 구성원들이 고른 24개의 사물을 통해 ‘공예적 완성도(craft)’의 의미를 탐구한다. 훌륭한 결과물은 우연히 만들어지는 것이 아니라, 무엇을 다듬고 무엇을 남겨둘지 의도적으로 결정하는 과정에서 나온다는 것이 핵심 주장이다. 장인정신은 복잡함이나 완벽함 자체가 아니라, 제약 속에서도 목적에 맞는 선택을 끝까지 밀어붙이는 태도에 가깝다. ## 공예는 의도적인 선택의 결과 - 소개된 사례들은 정교한 물건뿐 아니라 정원 설계, 포스터, 게임기, 악기처럼 서로 매우 다르다. - 공통점은 결과물 자체보다 제작자가 내린 선택에 있다. - 무엇을 더 다듬을지 - 무엇을 날것으로 남길지 - 언제 더 발전시키고 언제 멈출지 - 여러 세대를 이어갈 물건이든 잠깐의 즐거움을 위한 작품이든, 좋은 craft는 우연이 아니라 의식적인 제작 과정에서 탄생한다. - 이 사례들은 Figma의 디자인·스토리 팀이 만든 디자인과 공예에 관한 책 **《Practice》**에서 발췌되었으며, 2025년 Config에서 인쇄판이 공개됐다. ## 정원 설계: 경험을 만드는 작업 - 조경가 **피트 아우돌프(Piet Oudolf)**의 정원 설계는 식물 배치도 이상의 의미를 지닌다. - 그는 자유롭게 그린 도식과 색상 노드, 식물 약어를 활용해 빠르고 유연하게 아이디어를 발전시킨다. - 하지만 이러한 자유로움은 식물 각각의 특성과 전체 정원 안에서의 관계를 깊이 이해하고 있기 때문에 가능하다. - 완성된 정원을 사실적으로 렌더링하지 않는 이유는 이미지가 실제 정원을 경험하는 순간을 완전히 전달할 수 없기 때문이다. - 공예는 결과물을 보여주는 데 그치지 않고, 사용자가 실제로 겪게 될 경험을 설계하는 일이라는 점을 보여준다. ## 카탈로그 디자인: 규칙과 변주의 균형 - 라디슬라프 수트나르(Ladislav Sutnar)의 **《Catalog Design Progress》**는 산업용 카탈로그를 시각적으로 혁신한 사례다. - 기본적으로는 엄격한 타이포그래피와 레이아웃 규칙을 따르지만, 개별 제품에 맞게 변형할 여지를 남겼다. - 일관된 시스템과 창의적인 변주가 함께 작동하면서, 실용적인 카탈로그가 예술적이고 조직적인 템플릿으로 발전했다. - craft는 무조건 자유롭게 만드는 것이 아니라, 명확한 규칙 안에서 목적에 맞는 차이를 만들어내는 능력이기도 하다. ## 러시아 구성주의 포스터: 한 번의 선택을 위한 정밀함 - 러시아 구성주의 포스터는 강한 그래픽 줄무늬, 제한된 색상, 기하학적 형태와 사실적인 인물 표현을 충돌시킨다. - 단순해 보이는 구성일수록 작은 실수도 숨길 곳이 없기 때문에 높은 정밀도가 요구된다. - 석판화 방식으로 제작되어 결과를 확인한 뒤 무한히 수정하기 어려웠고, 처음부터 각 요소를 신중하게 결정해야 했다. - 따라서 이 작품에서 craft는 다음과 같은 태도로 나타난다. - 구도와 형태를 철저히 연마하기 - 제한된 요소를 정확히 통제하기 - 한 번의 시도에서도 의도한 결과를 만들어낼 수 있을 만큼 기술을 쌓기 ## Playdate: 제약을 창의성으로 바꾸기 - Panic과 Teenage Engineering이 만든 휴대용 게임기 **Playdate**는 1비트 화면과 작은 프로세서라는 기술적 제약을 갖는다. - 고사양 그래픽을 사용할 수 없다는 한계가 오히려 개발자들이 새로운 게임 구조와 표현 방식을 고민하게 만든다. - 작은 흑백 화면, 선명한 노란색 본체, 시즌 단위 게임 제공, 독특한 크랭크 조작부가 제품의 정체성을 형성한다. - 이 사례는 craft가 기능을 계속 추가하는 것이 아니라, 제한된 요소를 선택하고 그것을 탁월하게 구현하는 것임을 보여준다. ## Marble Machine: 제작 과정 자체를 작품으로 만들기 - Wintergatan의 **Marble Machine**은 구슬과 기계 장치를 이용해 음악을 연주하는 인간 동력 악기다. - 룸버그 장치와 오르골을 결합한 듯한 복잡한 구조가 음악을 만들어내며, 결과뿐 아니라 작동 과정 자체가 감상의 대상이 된다. - 연주자와 관객이 음악 생산 과정에 적극적으로 참여하게 만든다는 점에서, 수동적인 음악 소비와 대비된다. - 아름다운 결과물뿐 아니라 그것을 만들어내는 움직임과 메커니즘까지 설계하는 것이 craft의 일부로 제시된다. ## 실용적인 시사점 - 좋은 작업을 만들려면 기능이나 장식을 무작정 늘리기보다 핵심 경험을 먼저 정의해야 한다. - 제약은 제거해야 할 장애물이 아니라, 독창적인 해결책을 끌어내는 설계 조건이 될 수 있다. - 명확한 규칙을 세운 뒤 필요한 부분에만 변주를 허용하면 일관성과 개성을 함께 확보할 수 있다. - 완성도는 마지막에 덧붙이는 polish보다, 초기 단계에서 내리는 의도적인 선택과 반복적인 연습에서 비롯된다.

figma

Figma에서 디자인 시스템 워 (새 탭에서 열림)

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다. ## 모드와 컬렉션을 안전하게 재정렬 - 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다. - 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다. - 재정렬해도 모드 ID와 연결 정보가 유지된다. - 기본 모드도 간단히 변경할 수 있다. - 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다. ## 작업 흐름을 개선하는 9가지 업데이트 - 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다. - 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다. - 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다. - 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다. - 변수 모달의 헤더 전체를 드래그할 수 있다. - 변수 변경 사항이 자동 저장된다. - 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다. - 편집 버튼 정렬이 개선됐다. - 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다. ## 색상 팔레트와 색상 토큰 만들기 - **CSS color-mix()** - CSS의 `color-mix()`를 활용해 색상 팔레트와 그라디언트를 생성한다. - **Colorbox** - 전체 색상 램프를 빠르게 만든다. - **The Genome Color Tool** - WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다. - 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다. - 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다. ## 타이포그래피와 변수 문서화 - **Peppercorn** - 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다. - **Print Variables** - 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다. - **Auto Documentation** - 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다. - **Variables and Styles List** - 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다. - 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다. ## 컴포넌트 구조와 스펙 정리 - **Propstar** - 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다. - **Specs** - 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다. - **Similayer** - 특정 레이어나 속성을 기준으로 요소를 필터링한다. - **Style Finder** - 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다. - 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다. ## 변수와 디자인 토큰을 코드로 연결 - **CTRL Var** - 변수를 일괄적으로 이름 변경할 수 있다. - **Export Import Variables** - Figma 안팎으로 변수를 가져오고 내보낸다. - **Handoff** - CSS 변수를 즉시 복사해 개발 전달을 단순화한다. - **Variables Converter** - Figma 변수를 코드 형식으로 변환한다. - **Shaper** - 토큰 아키텍처를 관리하고 CSS 코드를 생성한다. - 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다. ## 디자인 시스템 구축 단계별 접근 - **기초 설계** - 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다. - **문서화** - 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다. - **구현과 핸드오프** - 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다. - Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다. 실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.

figma

좋은 동료들과 함께 (새 탭에서 열림)

뉴스 미디어 기업들은 디지털 전환과 구독 경쟁에 대응하기 위해 앱, 서체, 브랜드를 재설계하고 있으며, 이 과정에서 Figma를 협업과 프로토타이핑의 중심 도구로 활용한다. The New York Times 사례는 여러 콘텐츠 제품을 하나의 생태계로 연결하면서도 각 섹션의 정체성을 유지한 앱을 구축한 경우다. Figma는 편집자·디자이너·엔지니어·경영진이 비동기적으로 같은 화면과 프로토타입을 검토하게 해, 저널리즘의 형식 자체를 함께 설계하도록 돕는다. ## 디지털 시대의 뉴스 디자인 과제 - 신문사들은 웹과 모바일 중심으로 사업을 전환하고 새로운 콘텐츠 형식을 실험하고 있다. - 광고 시장의 불확실성으로 구독 모델이 중요해졌지만, 온라인 뉴스 이용자는 비용을 지불하는 데 상대적으로 소극적이다. - 따라서 기존 독자뿐 아니라 새로운 독자와 관계를 형성하고, 디지털 환경에서 뉴스의 정확성·명확성·접근성을 유지해야 한다. - 앱 개편, 서체 개발, 웹사이트 출시처럼 큰 변화에는 다양한 직군의 긴밀한 협업이 필요하다. ## The New York Times의 제품 생태계 중심 앱 개편 - 2024년 10월 개편된 앱은 뉴스뿐 아니라 Games, Cooking, Audio, Wirecutter, The Athletic 등 여러 제품을 하나의 구독 생태계로 연결한다. - 사용자는 앱을 열면 최신 뉴스가 모이는 **Today** 섹션을 먼저 보게 된다. - 상단 내비게이션을 통해 다른 제품과 콘텐츠 영역으로 이동할 수 있으며, 각 영역은 독립적인 홈 화면을 제공한다. - 핵심 전략은 모든 콘텐츠를 하나의 피드에 섞는 ‘슈퍼 앱’이 아니라, 저널리즘을 중심에 두고 각 제품이 고유한 방식으로 확장되는 구조다. ## 섹션별 시각적 정체성 - 각 콘텐츠 영역은 서로 다른 편집 목적과 독자 경험에 맞춰 시각 언어를 갖는다. - Lifestyle은 이미지와 제목을 겹쳐 배치한 그리드형 구성을 사용한다. - The Times가 “poster”라고 부르는 시각 중심 컴포넌트를 활용해 콘텐츠의 주목도를 높인다. - Opinion은 일반 뉴스와 다른 스타일의 제목 표현을 사용해 의견·관점 중심 콘텐츠라는 특성을 드러낸다. - 결과적으로 앱 전체의 일관성을 유지하면서도 각 제품과 섹션의 개성을 구분했다. ## Figma를 활용한 비동기 협업 - 편집자, 엔지니어, 디자이너, 고위 경영진, 스토리텔링 그룹이 하나의 Figma 파일에서 작업했다. - 스토리텔링 그룹은 뉴스룸과 협업해 이미지·텍스트·비디오·오디오를 조합한 다양한 기사 형식을 설계한다. - 팀원들은 화상회의나 화면 공유 없이 Figma에 들어가 작업물을 확인하고 의견을 교환할 수 있었다. - 디자이너는 기존처럼 발표용 덱을 반복해서 만드는 대신, Figma 안에서 직접 프로토타입을 공유했다. - 이를 통해 제품의 화면뿐 아니라 “저널리즘을 어떤 형태로 전달할 것인가”까지 함께 탐색할 수 있었다. ## 다른 미디어 기업의 사례 - 글은 The New York Times 외에도 The Economist의 디지털 친화적 서체 개발 사례를 다룬다. - The Minnesota Star Tribune은 Figma를 활용해 브랜드를 변화시킨 사례로 소개된다. - 세 사례 모두 변화하는 미디어 환경에서 디자인 시스템, 협업, 새로운 콘텐츠 형식이 경쟁력의 핵심이라는 점을 보여준다. ## 실용적인 시사점 - 대규모 디지털 제품을 개편할 때는 콘텐츠·디자인·개발·경영진이 같은 프로토타입을 기준으로 논의하는 것이 효과적이다. - 전체 브랜드의 일관성을 유지하되, 콘텐츠 유형별로 차별화된 시각적 정체성을 설계해야 한다. - Figma 같은 협업 도구를 단순한 화면 제작 도구가 아니라 편집 구조와 콘텐츠 전달 방식을 실험하는 공동 작업 공간으로 활용할 수 있다.

figma

새로운 시대를 위한 웹 (새 탭에서 열림)

Figma는 2024년 브랜드 리프레시를 계기로 figma.com의 웹 디자인 시스템을 전면 점검했다. 기존 시스템은 유사한 컴포넌트가 지나치게 많고, 색상과 타이포그래피가 확장된 브랜드와 다양한 콘텐츠를 충분히 지원하지 못했다. 사용 현황을 데이터로 분석해 컴포넌트를 단순화하고, 일관된 디자인 원칙과 재사용 가능한 템플릿을 마련함으로써 더 유연하고 미래 지향적인 웹 시스템을 구축했다. ## 브랜드와 웹 시스템을 함께 재정비한 배경 - 2020년의 figma.com은 새로운 디자인 도구를 소개하는 데 초점이 맞춰져 있었다. - 2024년의 Figma는 여러 제품 팀을 위한 플랫폼으로 확장되었고, 웹사이트 역시 제품 생태계와 다양한 사용자 요구를 보여줘야 했다. - 기존 시스템에는 다음과 같은 문제가 있었다. - 서로 조금씩만 다른 컴포넌트가 많아 적절한 컴포넌트를 선택하기 어려움 - 변화하는 브랜드 색상 팔레트를 수용할 만큼 색상 체계가 유연하지 않음 - 다양한 콘텐츠 유형을 지원하기에 타이포그래피 체계가 충분히 최적화되지 않음 - Figma Sans와 새로운 색상·일러스트레이션 스타일을 도입한 브랜드 리프레시는 웹 디자인 시스템을 재설계하는 계기가 되었다. ## 컴포넌트 사용 현황을 데이터로 감사 - Web Experience 팀은 스크립트를 작성해 컴포넌트가 다음과 같이 어떻게 사용되는지 분석했다. - 어떤 컴포넌트가 사용되는가 - 각 컴포넌트가 얼마나 자주 사용되는가 - 어떤 페이지에서 사용되는가 - 이 분석을 통해 실제 사용량과 필요성을 기준으로 컴포넌트 구조를 단순화할 수 있었다. - 디자인 시스템을 직관이나 선호만으로 관리하지 않고, 실제 페이지와 팀의 사용 패턴을 근거로 개선한 점이 핵심이다. ## Flex 컴포넌트의 48개 변형을 24개로 축소 - 가장 널리 사용되던 기본 구성 요소인 ‘Flex’ 컴포넌트는 옵션이 추가되면서 48개 변형까지 늘어나 있었다. - 사용 사례를 조사한 결과, 기능을 유지하면서도 변형 수를 24개로 줄일 수 있었다. - 중복되거나 활용도가 낮은 선택지를 제거해 속성 패널을 더 집중된 형태로 만들었다. - 예를 들어 가운데 정렬 텍스트 옵션을 없애고, 웹 시스템 전체에서 왼쪽 정렬을 기본값으로 정했다. - 그 결과: - 디자이너와 콘텐츠 제작자가 선택해야 할 옵션이 줄어듦 - 컴포넌트 사용법이 쉬워짐 - 웹페이지 전반의 시각적 일관성이 높아짐 - 새로운 브랜드 언어와도 더 잘 맞게 됨 ## 템플릿과 조합 가능한 빌딩 블록 - 단순히 기존 컴포넌트를 줄이는 데 그치지 않고, 자주 쓰는 페이지 레이아웃을 템플릿으로 만들었다. - 여러 방식으로 조합할 수 있는 “building block” 컴포넌트 세트도 구축했다. - 이를 통해 팀은: - 일반적인 페이지 구조를 더 빠르게 만들고 - 필요한 구성 요소를 조합해 다양한 페이지를 제작하며 - 별도의 커스텀 작업 없이도 Figma 브랜드에 맞는 결과물을 만들 수 있게 되었다. - 컴포넌트 선택지를 무작정 늘리는 대신, 검증된 핵심 요소와 조합 방식을 제공하는 접근이다. ## 실용적인 시사점 - 디자인 시스템을 정기적으로 감사하고 실제 사용 데이터를 확인해야 한다. - 유사한 변형이 계속 늘어난다면 기능을 유지하면서 옵션을 통합할 수 있는지 검토할 필요가 있다. - 명확한 기본값과 일관된 원칙을 정하면 사용자의 선택 부담을 줄일 수 있다. - 공통 레이아웃 템플릿과 조합형 컴포넌트를 함께 제공하면 확장성과 제작 속도를 모두 높일 수 있다.

figma

Figma on Figma: 최신 (새 탭에서 열림)

Figma는 디자이너 중심 도구에서 개발자·PM·제품팀 전체가 사용하는 생태계로 확장한 현실을 반영해 브랜드의 시각 언어를 재정비했다. 정적인 커서와 굵은 검은 윤곽선 중심의 기존 표현 대신, 공동 창작과 다양한 역할을 상징하는 프리미티브·색상·타이포그래피·모션을 도입했다. 새 브랜드는 누구나 아이디어를 현실로 만들 수 있는 협업 공간으로서의 Figma를 표현한다. ### 디자이너 도구에서 제품 개발 생태계로 - 지난 10년 동안 Figma는 순수한 디자인 도구에서 개발자, 제품 관리자, 전체 제품팀을 지원하는 플랫폼으로 성장했다. - 기존 브랜드는 벡터 그래픽의 문법에 가까웠다. - 정적인 마우스 커서 - 굵은 검은 외곽선 - 디자인 작업 자체에 초점을 둔 시각 표현 - 새로운 정체성은 아이디어 구상부터 개발, 협업, 완성까지 여러 사람이 참여하는 제품 제작 과정을 담는 데 초점을 맞췄다. ### 새 시각 언어를 구성하는 네 가지 기반 - **다목적 프리미티브** - 공동 창작에 참여하는 다양한 사람과 역할을 상징한다. - 특정 직군이나 작업 단계에 종속되지 않는 기본 형태로 활용된다. - **동적인 구성** - 만들고, 조정하고, 협업하는 다양한 작업 방식을 표현한다. - 정적인 결과물보다 제작 과정의 움직임과 상호작용을 강조한다. - **확장된 색상 팔레트** - 더 생생하고 폭넓은 색을 사용한다. - 색상 변수를 활용해 다양한 매체와 상황에 쉽게 적용할 수 있도록 설계했다. - **통합된 모션 원칙** - 창작 과정에서 발생하는 행동과 흐름을 애니메이션으로 표현한다. - 브랜드의 움직임이 단순 장식이 아니라 작업 과정과 연결되도록 했다. ### Figma 전용 서체 체계 - Figma는 Grilli Type과 협업해 독자적인 그로테스크 서체인 **Figma Sans**를 제작했다. - 브랜드에는 다음 네 가지 서체가 포함된다. - **Figma Sans**: 일반적인 브랜드 커뮤니케이션과 본문 - **Figma Sans Condensed**: 더 압축된 인상과 공간 효율이 필요한 표현 - **Figma Mono**: 개발, 코드, 정밀한 제작 작업을 연상시키는 표현 - **Figma Hand**: 브레인스토밍과 팀 협업처럼 인간적인 분위기를 전달 - 서로 다른 서체를 조합해 디자인, 엔지니어링, 협업 등 다양한 역할과 작업 방식을 표현한다. ### 샌드박스에서 시작한 탐색 - Figma Brand Studio는 사람들이 Figma를 사용하는 전 과정을 살펴보며 탐색을 시작했다. - 브레인스토밍 - 초기 아이디어 구상 - 요소 검사 - 최종 결과물의 세부 조정 - 팀은 여러 활동이 하나의 공유 공간에서 동시에 이루어지는 모습에 주목했다. - 이 개념은 사람들이 같은 공간에서 각자 놀고 만들며 상호작용하는 **parallel play**와 연결됐다. - Figma 캔버스를 사람들이 함께 만들고 실험하는 장소로 보고, 놀이터에서 시각적 영감을 얻었다. - Isamu Noguchi의 놀이터와 조경 작품 - Mitsuru Senda의 다채로운 패널형 놀이터 - 정교한 타일 작업과 인프라 구조 - 초기에는 놀이터의 형태를 직접적으로 차용했지만, 최종적으로는 이를 단순한 모방이 아니라 공동 창작과 실험을 상징하는 추상적 시각 언어로 발전시켰다. ### 실용적인 시사점 브랜드 리뉴얼은 로고나 색상만 바꾸는 작업이 아니라, 사용자의 역할과 제품이 지원하는 행동 범위를 다시 정의하는 과정이다. 특히 제품이 여러 직군의 협업 도구로 성장했다면, 시각 체계도 결과물뿐 아니라 아이디어 구상·소통·개발·수정 같은 전체 제작 흐름을 표현하도록 확장하는 것이 효과적이다.

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

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

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을 통해 이모지나 짧은 반응을 남길 수 있는 전용 피드백 앱을 직접 개발했습니다. - 피드백을 받는 과정을 하나의 '게임'처럼 만들어 참여자들에게 즐거움을 주는 동시에, 제작자 자신도 글쓰기에서 잠시 벗어나 개발자로서의 뇌를 환기하는 창구로 활용했습니다. 마르신 위치하리의 사례처럼 본업에서 사용하는 기술(소프트웨어 프로토타이핑, 플러그인 개발)을 개인적인 창작 프로젝트에 이식해 보세요. 과정을 세분화하고 각 단계마다 눈에 보이는 결과물을 만들어내는 방식은 거대한 프로젝트를 완수하는 데 실질적인 도움이 됩니다.

figma

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

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

figma

이모지의 힘 | 피그마 블로그 (새 탭에서 열림)

이 글은 이모지가 단순한 장식이 아니라 디지털 환경에서 감정, 의도, 말투, 몸짓을 보완하는 커뮤니케이션 수단이라고 설명합니다. 유니코드 이모지 소위원회는 한 번 추가된 문자를 되돌릴 수 없기 때문에, 특정 사물보다 다양한 맥락에서 활용 가능한 보편적이고 표현력 높은 이모지를 우선합니다. 이모지의 의미는 고정된 것이 아니라 사용 맥락과 문화에 따라 다층적으로 형성됩니다. ## 디지털 소통에서 이모지의 역할 - 대면 대화에서 자연스럽게 전달되는 요소를 보완합니다. - 말의 리듬과 속도 - 목소리의 크기와 억양 - 시선, 표정, 몸짓 - 감정과 대화의 의도 - 같은 이모지라도 어떤 문장에 붙이는지, 문장 앞뒤 어디에 배치하는지에 따라 의미가 달라집니다. - 사용 경험이 쌓일수록 이모지는 별도의 학습 없이도 자연스럽게 사용하는 표현 수단이 됩니다. - 온라인 활동이 늘어날수록 대면 소통과 디지털 소통 사이의 간극을 줄이는 역할이 커지고 있습니다. ## 이모지는 새로운 개념보다 오래된 인간 표현을 디지털화한다 - 이모지는 완전히 새로운 개념을 만들어내기보다, 문자와 시각 표현에 이미 존재하던 생각과 감정을 코드화합니다. - 사랑, 욕망, 유머, 종교성, 고통 같은 개념은 역사와 문학, 광고, 타투 등 다양한 맥락에서 오래전부터 사용되어 왔습니다. - 하나의 이모지가 하나의 뜻만 갖는 것은 아닙니다. - 예를 들어 ‘불타는 하트’는 종교적 의미, 속쓰림, 열정이나 욕망 등을 모두 나타낼 수 있습니다. - 따라서 이모지의 실제 의미는 사전적 정의보다 사람들이 어떤 상황에서 어떻게 사용하는지에 의해 결정됩니다. - 사람들이 자신이 이모지를 사용한다고 생각하는 방식과 실제 사용 방식 사이에는 차이가 있을 수 있습니다. ## 유니코드 표준과 이모지의 지속 가능성 - 유니코드 컨소시엄은 세계의 문자와 언어를 디지털 환경에서 호환되도록 만드는 표준화 기관입니다. - 이모지 소위원회는 새로운 이모지를 선정하고, 각 플랫폼에서 interoperable하게 표시되도록 인코딩합니다. - 유니코드에 코드 포인트가 추가되면 사실상 삭제하거나 되돌릴 수 없습니다. - 일반적인 소프트웨어처럼 출시 후 폐기하거나 수정하는 방식이 어렵습니다. - 한 번의 결정이 장기간 유지되므로 신중한 검토가 필요합니다. - 빠르게 변하는 온라인 커뮤니케이션과, 장기적 안정성을 중시하는 표준화 절차 사이의 균형이 중요합니다. - 유니코드는 새로운 유행을 즉시 만드는 체계라기보다, 이미 사회에 존재하는 표현을 안정적으로 디지털화하는 체계에 가깝습니다. ## 새로운 이모지 선정 기준 - 이모지는 이미 3,500개 이상 존재하며, 저장 공간과 시스템 복잡성 측면에서 무한히 늘리기 어렵습니다. - 과거의 구체적인 사물 중심 접근에서 벗어나 인간의 감정과 관계를 강화하는 표현을 더 중요하게 보고 있습니다. - 선정 가능성이 높은 이모지는 다음과 같은 특징을 가집니다. - 전 세계적으로 의미가 통하는 개념 - 감정, 의도, 몸짓 등 인간 표현의 기본 요소를 나타내는 개념 - 여러 상황에서 유연하게 사용할 수 있는 상징적 표현 - 기존 이모지와 결합해 새로운 의미를 만들어내는 표현 - 특정 대상에 지나치게 한정되지 않는 넓은 개념 - 반대로 특정 품종이나 매우 구체적인 사물을 추가하면 유사한 항목을 계속 요구하게 됩니다. - 예를 들어 골든 리트리버를 추가하면 푸들 등 다른 품종도 추가해야 한다는 문제가 생깁니다. - 중요하거나 인기 있는 제안이라도 기존 이모지로 이미 표현 가능하거나 지나치게 구체적이면 채택되지 않을 수 있습니다. 이모지를 사용할 때는 단순히 그림의 사전적 의미에 의존하기보다 문맥, 배치, 상대방과의 관계를 함께 고려하는 것이 좋습니다. 새로운 이모지도 구체적인 대상을 하나씩 늘리기보다는 여러 감정과 상황을 표현하고 기존 문자와 조합할 수 있는 보편적인 기호가 더 오래 유용할 가능성이 큽니다.

figma

Figma의 새로운 소식: (새 탭에서 열림)

2022년 3월 Figma 업데이트의 핵심 주제는 다양한 환경에서 더 자유롭고 포괄적으로 협업할 수 있도록 접근성과 유연성을 높이는 것이었다. FigJam의 iPad 지원, 아랍어·히브리어·우르두어 등 오른쪽에서 왼쪽으로 쓰는 언어 지원, 모든 글꼴에서의 위·아래 첨자 처리, Slack 알림 연동이 추가됐다. 이를 통해 장소와 기기, 언어, 협업 방식의 제약을 줄였다. ## FigJam iPad 앱으로 아이디어 발상 확장 - FigJam을 iPad에서 사용할 수 있게 됐다. - 브라우저 알림이나 여러 탭의 방해 없이 아이디어를 스케치하고 정리할 수 있다. - 장소에 관계없이 다음 작업을 수행할 수 있다. - 아이디어 스케치 - 브레인스토밍과 구상 - 보드에 주석 추가 - iPad에서 작업한 내용을 데스크톱에서 이어서 편집할 수 있어 기기 간 작업 흐름이 자연스럽게 연결된다. - Figma 앱스토어에서 이용 가능하다. ## 오른쪽에서 왼쪽으로 쓰는 언어 지원 - Figma와 FigJam이 RTL(right-to-left) 텍스트를 지원한다. - 지원 대상에는 다음과 같은 언어가 포함된다. - 아랍어 - 히브리어 - 우르두어 - 글로벌 사용자가 자신의 문자 방향에 맞춰 디자인하고 협업할 수 있게 됐다. - 국제적인 제품과 콘텐츠를 설계할 때 언어 방향 때문에 발생하던 제약을 줄였다. ## 모든 글꼴에서 위·아래 첨자 사용 - 기존에는 선택한 글꼴이 위 첨자나 아래 첨자 글리프를 제공하지 않으면 해당 문자를 사용하기 어려웠다. - 이제 Figma가 글꼴에 해당 글리프가 없을 때 합성 글리프(synthetic 또는 faux glyph)를 자동으로 생성한다. - 합성 글리프는 현재 글꼴의 스타일에 맞춰 다음과 같이 조정된다. - 글자 크기 축소 - 기준선 위 또는 아래로 위치 이동 - 주변 글자와 어울리도록 배치 - 따라서 별도의 특수 글꼴을 찾지 않아도 수식, 각주, 단위 표기 등에 위·아래 첨자를 사용할 수 있다. ## Slack을 통한 Figma 협업 알림 - 새로운 Slack 앱 연동을 통해 Figma 파일, 팀, 프로젝트의 변경 사항을 Slack에서 확인할 수 있다. - 알림 수신 방식은 다음과 같이 선택할 수 있다. - 실시간 알림 - 시간별 요약 - 일일 요약 - 활용 예시는 다음과 같다. - 프로젝트별 Slack 채널에 여러 Figma 파일을 연결 - 누군가 파일에 댓글을 남겼을 때 프로젝트 구성원에게 알림 - 협업자가 많은 파일을 위한 전용 알림 채널 운영 - 별도로 Figma를 열지 않아도 팀의 진행 상황을 공유할 수 있어 하이브리드 근무 환경에 적합하다. ## 실용적인 활용 iPad 사용자는 이동 중에도 FigJam에서 아이디어를 기록하고 데스크톱에서 구체화할 수 있다. 다국어 제품을 만드는 팀은 RTL 지원을 활용해 실제 사용자 환경에 가까운 화면을 설계하고, Slack 연동을 설정하면 댓글과 협업 진행 상황을 팀 채널에서 지속적으로 공유할 수 있다.

figma

30가지 업데이트: Figma의 최 (새 탭에서 열림)

Figma는 2021년 7월, 디자이너의 작업 흐름을 개선하기 위한 30가지 기능 업데이트와 버그 수정을 공개했다. 벡터·텍스트·이미지 편집부터 키보드 단축키, 브라우저 호환성, 레이어 탐색까지 작은 사용성 개선을 폭넓게 적용해 아이디어와 디자인 사이의 불필요한 클릭과 중단을 줄이는 것이 핵심이다. 전체 변경 사항은 Figma Community 파일과 ‘What’s New’ 페이지에서 확인할 수 있다. ## 벡터와 드로잉 편집 개선 - 스트로크 패널을 재설계해 벡터 객체의 속성을 더 쉽게 조정할 수 있게 했다. - 선의 끝 모양(end cap)을 설정할 수 있어 화살표를 만들거나 FigJam에서 복사한 커넥터의 스트로크를 세밀하게 조정할 수 있다. - 펜 도구와 연필 도구가 이전에 사용한 스트로크 설정을 기억한다. - 연필 도구를 사용하기 전에 스트로크 속성을 지정할 수 있어 실제 펜으로 그리는 것처럼 작업할 수 있다. - 객체에 두 번째 Fill을 추가할 때 기본값이 그라디언트가 아닌 단색으로 적용된다. - 새 눈금자를 만들면 자동으로 선택되어 키보드로 이동하거나 즉시 삭제할 수 있다. ## 이미지와 내보내기 기능 - 브라우저에서도 ‘Copy as PNG’를 사용할 수 있게 됐다. - macOS: `⌘+Shift+C` - Windows: `Ctrl+Shift+C` - 이미지 크기를 조정할 때 `⌘` 또는 `Ctrl`을 누르면 현재 위치에서 즉시 크롭할 수 있다. - 이미지 조정 슬라이더는 별도로 클릭하지 않아도 바로 드래그할 수 있다. - 텍스트 내보내기에 바운딩 박스를 포함하는 옵션이 추가됐다. - Plugin API에는 이에 대응하는 `use_absolute_bounds` 설정이 추가됐다. - 기존 ‘Contents only’ 내보내기 옵션의 이름이 ‘Ignore overlapping layers’로 변경됐다. ## 텍스트와 글꼴 처리 - 누락된 글꼴이 포함된 텍스트를 복사·붙여넣기하면 전역 누락 글꼴 아이콘이 활성화된다. - 누락 글꼴 대화상자를 재설계해 영향을 받는 레이어를 클릭으로 바로 확인할 수 있다. - 서로 다른 스타일이 섞인 텍스트 노드에서 ‘+’ 옵션을 제거해 새 스타일이나 색상으로 쉽게 덮어쓸 수 있게 했다. - 파일 이름 변경 시 선택된 텍스트의 배경 영역 높이를 정상적으로 조정했다. - 텍스트 편집 중 이미지를 붙여넣으면 붙여넣기를 무시하지 않고 텍스트 편집을 종료한 뒤 이미지를 삽입한다. - 텍스트 편집 중에도 상단 정렬 등 위치 조정 버튼을 사용할 수 있다. ## 단축키와 편집 조작 - 혼합된 값이 있는 속성에 수학 연산을 입력해 크기나 위치 등을 조정할 수 있다. - 새 환경 설정이 열어 둔 모든 탭에 자동 동기화되어 새로고침할 필요가 없다. - 선택 단축키를 사용할 때 레이어 패널이 선택된 레이어를 자동으로 찾아 스크롤한다. - `Z`로 확대할 때 다른 공동 작업자에게 선택 영역 사각형이 표시되지 않는다. - 중간 마우스 버튼으로 선택한 링크를 열 수 있다. - 파일 이동 대화상자는 바깥 영역 클릭이나 `Esc` 키로 닫을 수 있다. ## FigJam 및 협업 개선 - FigJam의 스티키를 텍스트로 복사하면 FigJam에서 배치된 순서와 일치하도록 정렬된다. - 링크 위를 이동할 때 링크 팝업이 작업을 방해하지 않도록 동작을 조정했다. - 레이어 패널의 아이콘이 실제 객체 상태를 더 빠르게 반영한다. - 커서의 손 모양을 덜 방해되도록 개선했다. - 상단 메뉴 진입 영역을 넓혀 펼침 화살표를 더 쉽게 클릭할 수 있게 했다. ## 브라우저와 인터페이스 안정성 - Safari 브라우저에서도 `⌥` 키를 누른 채 마우스를 움직여 필드 값을 조정하는 스크러빙이 작동한다. - Safari에서 우클릭 메뉴가 너무 빨리 닫히지 않도록 수정했다. - 프레임 프리셋에 호버 상태를 추가해 클릭 가능한 항목임을 명확히 했다. - 그리드 속성 행의 드래그 핸들 표시 문제를 해결했다. - View Only 모드에서 툴바 드롭다운이 열리지 않던 문제를 수정했다. - 새로 만든 눈금자와 선택된 레이어를 더 쉽게 조작할 수 있도록 관련 탐색 동작을 개선했다. 이번 업데이트는 대규모 신규 기능보다 반복적인 작업에서 발생하는 작은 불편을 줄이는 데 초점을 맞췄다. Figma 사용자는 단축키, 브라우저 기능, 글꼴·레이어 탐색 개선을 적극 활용하고, 전체 변경 사항은 Figma Community의 업데이트 파일에서 확인하는 것이 좋다.

figma

로빈 캐너와의 Q (새 탭에서 열림)

Robyn Kanner의 인터뷰는 디자인을 특정 직함이나 완벽한 결과물로 한정하지 말고, 끊임없이 만들고 협업하며 현재의 문제를 해결하는 태도를 강조한다. 그녀는 Biden-Harris 캠페인의 크리에이티브 디렉터로서 JoeBiden.com부터 캠페인 전용기까지 모든 작업을 하나의 Figma 파일에서 제작한 경험을 소개했다. 디자인의 성취는 개인의 명성보다 공동의 목표를 이루는 데 있으며, 그녀에게 가장 큰 성과는 Joe Biden의 당선을 도운 것이다. ## Biden-Harris 캠페인과 대규모 협업 - 2020년 미국 대선에서 Biden-Harris 디자인팀의 크리에이티브 디렉터로 활동했다. - 웹사이트인 JoeBiden.com부터 캠페인 전용기 디자인까지 다양한 결과물을 제작했다. - 캠페인 전체 작업을 하나의 Figma 파일에서 진행하며 협업과 통합된 디자인 작업 방식을 보여줬다. - 그녀가 꼽은 커리어 최대 성취는 “Joe Biden의 당선을 도운 것”이었다. - 좋은 팀은 어려운 일을 함께 겪으며 서로를 지지할 때 만들어진다고 설명했다. - 좋은 협업자는 주변 사람들이 기여할 수 있도록 공간을 만들어주는 사람이라고 답했다. ## 디자인을 대하는 태도 - 창작 과정을 한 단어로 표현하면 “끈질김(Relentless)”이라고 답했다. - 완벽한 디자인은 없으며, 디자인 자체를 두려워할 필요도 없다고 말했다. - 다른 사람의 디자인을 부러워하거나 대신 만들고 싶어 하기보다 각자의 경로를 존중해야 한다고 강조했다. - 디자인은 과거의 평가보다 지금 필요한 것을 만드는 행위이며, 이를 “NOW”라고 표현했다. - 젊은 디자이너에게 특정 직함에 자신을 가두지 말고, 단순히 무언가를 만들라고 조언했다. ## 도구보다 중요한 사회적 관점 - 디자인 업계에서 과대평가된 것으로 “코드”를, 과소평가된 것으로 “사회학”을 꼽았다. - 이는 디자인을 구현 기술만의 문제가 아니라 사람과 사회, 맥락을 이해하는 활동으로 본다는 의미다. - 가장 좋은 디자인은 색상이나 형식만으로 결정되지 않고, 그것이 사용되는 환경과 사람들의 행동을 고려해야 한다. - 그녀가 선호하는 UI 폰트는 Decimal과 Mercury이며, 색상 표현 방식은 Hex·RGB·HSL 모두를 사용한다고 답했다. - 디자인에서 타이포그래피와 색상 중 하나만 고르기보다 둘 다 중요하게 본다. ## 제약을 넘어서는 창작 - 최근 작업에서 Safari의 애니메이션 처리 방식 때문에 제약을 느꼈다고 말했다. - 도구가 애니메이션 구현을 제한하는 상황을 아쉬워하며, 창작자가 기술적 환경에 의해 제한되지 않기를 바라는 태도를 드러냈다. - 언젠가 화성에 그라디언트를 적용해보고 싶다는 답변은 현실적 제약을 넘어서는 상상력을 상징한다. - 가장 좋아하는 Figma 기능으로는 “모두”를 꼽았으며, 특히 Shift+H 단축키를 언급했다. - Figma가 창작 방식을 혁신했다고 평가하며, 기능 자체보다 자유롭게 만들고 협업할 수 있는 환경을 중요하게 봤다. ## 개인적 취향과 창작자의 인간적인 면 - 1990년대의 미학을 되살릴 수 있다면 웹이나 Apple 디자인보다 음악가 Jeff Buckley를 선택하겠다고 답했다. - 최상의 창작 상태는 이른 아침이나 늦은 밤이라고 말했다. - 디자인 비평에 초대하고 싶은 사람으로 농구선수 Michael Jordan을 꼽았다. - 캠페인 기간 동안 긴 하루를 마친 뒤 긴장을 풀기 위해 게임 *Madden*을 즐겼다고 소개했다. - 최근 인터넷에서 좋아한 콘텐츠로 BROCKHAMPTON의 “BUZZCUT”을 언급했다. - 디자인 관련 소셜미디어 담론, 특히 Design Twitter에는 큰 관심이 없다고 선을 그었다. ## 실용적인 시사점 디자이너는 직함이나 특정 도구에 자신을 한정하기보다 문제를 해결하기 위해 직접 만들고, 협업 과정에서 다른 사람의 참여 공간을 확보해야 한다. 또한 시각적 완성도뿐 아니라 사회적 맥락과 사용자의 현실을 이해하고, 기술적 제약을 비판적으로 바라보는 태도가 중요하다.