auto-layout

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

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

오토 레이아웃 (새 탭에서 열림)

피그마의 새로운 오토 레이아웃은 디자이너가 캔버스 위에서 더 직관적으로 레이아웃을 조작할 수 있도록 사용자 경험을 근본적으로 재설계하는 데 집중했습니다. 속성 패널에 의존하던 기존 방식에서 벗어나 캔버스 내 직접 컨트롤과 시각적 피드백을 강화하여 디자인 프로세스의 속도와 몰입감을 높였습니다. 이를 통해 디자인 도구의 편리함과 프론트엔드 코드 수준의 정교한 레이아웃 제어 사이의 간극을 성공적으로 좁혔습니다. ### 캔버스 내 직접 조작(On-canvas Controls)을 통한 직관성 강화 * 속성 패널을 일일이 찾아가지 않고도 캔버스 위에서 패딩(Padding)과 간격(Spacing)을 직접 드래그하여 조절할 수 있는 인터랙티브 핸들을 도입했습니다. * 사용자가 마우스를 올렸을 때만 관련 컨트롤이 나타나도록 설계하여 캔버스의 시각적 복잡도를 최소화하고 디자인 작업 자체에 집중할 수 있게 했습니다. * 정확한 수치 입력이 필요한 경우를 위해 핸들을 클릭하면 즉시 입력창이 뜨는 하이브리드 인터페이스를 구축하여 정밀함과 속도를 동시에 잡았습니다. ### 개발 환경과의 정렬을 위한 기능 확장 * 그동안 오토 레이아웃에서 불가능했던 '음수 간격(Negative Spacing)'을 지원하여, 요소들이 자연스럽게 겹치는 스택 디자인을 오토 레이아웃 환경 내에서 유지할 수 있게 했습니다. * 프레임 내 특정 요소를 자유롭게 배치할 수 있는 '절대 위치(Absolute Position)' 기능을 추가하여, CSS의 `position: absolute`와 동일한 논리를 디자인 도구에 구현했습니다. * 개별 요소의 정렬(Alignment)과 분포(Distribution) 옵션을 시각적으로 시뮬레이션할 수 있는 컨트롤러를 제공하여 레이아웃의 변화를 실시간으로 체감하게 했습니다. ### 복잡한 구조를 지탱하는 성능 및 사용성 개선 * 수많은 중첩(Nesting)이 발생하는 오토 레이아웃의 특성을 고려하여, 복잡한 레이어 구조에서도 성능 저하 없이 매끄럽게 작동하도록 렌더링 엔진을 최적화했습니다. * 요소들의 쌓임 순서(Canvas Stacking)를 변경할 수 있는 옵션을 추가하여, 첫 번째 요소가 위로 올지 마지막 요소가 위로 올지 디자이너가 직접 결정할 수 있도록 세밀한 제어권을 부여했습니다. * 텍스트 베이스라인 정렬 기능을 고도화하여 서로 다른 크기의 폰트나 아이콘이 섞여 있는 경우에도 시각적인 정렬을 완벽하게 맞출 수 있도록 개선했습니다. 디자이너는 이제 툴의 기술적 제약 때문에 레이아웃을 수동으로 수정할 필요가 없으며, 실제 제품이 구현되는 논리와 동일한 방식으로 디자인을 구성할 수 있습니다. 새로운 오토 레이아웃의 기능을 적극적으로 활용하여 디자인 시스템의 유연성을 높이고, 개발자와의 소통 과정에서 발생할 수 있는 레이아웃 구현 오차를 사전에 방지하는 것을 권장합니다.