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

#FigmaTip 라운드

FigmaTip Roundup 7.0은 디자인 커뮤니티가 공유한 Figma 단축키와 작업 팁을 모은 글이다. 주요 내용은 컴포넌트를 활용해 대칭 도형을 만들고, 선택한 레이어로 빠르게 확대하며, 프레임 외곽선을 사용해 복잡한 화면을 명확하게 확인하는 방법이다. 작은 기능과 단축키를 익히면 반복 작업과 캔버스 탐색을 크게 줄일 수 있다. ## 컴포넌트로 대칭 도형 만들기 - 꽃병, 플라스크처럼 좌우 대칭이 필요한 도형은 한쪽 윤곽만 먼저 그린다. - 한쪽 윤곽을 컴포넌트로 만든다. - 단축키: `⌥⌘K` - 컴포넌트를 복제한다. - 단축키: `⌘D` - 복제한 요소를 수평 반전한다. - 단축키: `⇧H` - 반전된 복제본을 원본의 반대편으로 이동해 대칭 형태를 구성한다. - 원본 컴포넌트를 수정하면 연결된 인스턴스에도 변경 사항을 적용할 수 있어, 양쪽 형태를 일관되게 관리할 수 있다. - 단순히 좌우를 복사하는 것보다 컴포넌트 기반으로 작업하면 이후 모양을 수정하거나 변형하기 쉽다. ## 스페이스바로 선택 영역 고정하기 - 스페이스바를 누르면 선택한 객체의 경계(bounds)를 고정할 수 있다. - 객체를 이동하거나 조정할 때 선택 영역이 변해 작업 기준이 흔들리는 상황을 줄이는 데 유용하다. - 정밀한 배치나 크기 조정처럼 선택 영역을 일정하게 유지해야 하는 작업에 활용할 수 있다. ## 선택한 레이어로 정밀하게 확대하기 - 레이어 패널에서 원하는 레이어를 선택한 뒤, “Keyboard Zooms Into Selection” 기능을 사용하면 해당 객체를 화면 중앙에 가깝게 확대할 수 있다. - 캔버스에서 직접 객체를 찾을 필요 없이 레이어 목록에서 선택한 요소를 즉시 확인할 수 있다. - 복잡한 화면이나 작은 요소를 편집할 때 유용하며, 캔버스를 여러 번 확대·축소하는 시간을 줄여준다. ## 프레임 외곽선으로 구조 확인하기 - “Frame Outlines” 기능을 사용하면 프레임의 외곽선을 표시할 수 있다. - 내부 콘텐츠가 많거나 프레임 배경과 요소가 비슷한 경우에도 프레임의 경계를 쉽게 식별할 수 있다. - 중첩된 프레임과 레이아웃 구조를 파악하고, 요소가 어느 프레임에 속하는지 확인하는 데 도움이 된다. Figma에서 반복적으로 사용하는 작업은 단축키와 컴포넌트로 표준화하는 것이 좋다. 특히 대칭 도형은 한쪽만 제작한 뒤 컴포넌트와 수평 반전을 조합하고, 복잡한 파일에서는 레이어 선택 후 선택 영역 확대와 프레임 외곽선 표시를 함께 사용하면 작업 속도와 정확도를 높일 수 있다.

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

사용자 인터페이스Figmakeyboard-shortcutscomponents+1

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

피그마 프로토타이

Figma는 프로토타입에 **디졸브, 슬라이드, 푸시 전환 효과**를 추가해 디자인의 움직임과 사용감을 더 현실적으로 표현할 수 있게 했다. 이를 통해 디자이너와 개발자·마케터·고객 등 이해관계자가 정적인 화면뿐 아니라 앱의 실제 흐름과 감각까지 더 정확히 공유할 수 있다. 전환 시간과 이징을 조절하고 미리보기로 결과를 확인할 수 있어, 반복적인 커뮤니케이션과 수정도 줄일 수 있다는 것이 글의 결론이다. ## 전환 효과로 프로토타입의 완성도 향상 - 프레임 사이에 다음과 같은 전환 효과를 적용할 수 있다. - **Dissolve**: 한 화면이 다른 화면으로 자연스럽게 녹아드는 효과 - **Slide**: 한 프레임이 특정 방향으로 밀려나며 다음 프레임이 나타나는 효과 - **Push**: 다음 화면이 이전 화면을 밀어내며 전환되는 효과 - 애니메이션 지속 시간을 밀리초 단위로 설정할 수 있다. - 전환의 이징을 조절해 애니메이션이 시작이나 끝에서 더 빠르거나 느려지도록 만들 수 있다. - 툴바의 미리보기 상자에서 프레임 간 전환을 즉시 확인할 수 있다. - iOS 앱과 같은 자연스러운 화면 이동을 재현해 제품의 사용감을 더 잘 전달할 수 있다. ## 프로토타입이 필요한 이유 - 오늘날 제품 디자인은 디자이너만의 작업이 아니라 개발자, 마케터, 프로젝트 관리자 등 여러 역할의 협업으로 완성된다. - 고충실도 프로토타입은 제품이 개발되기 전에 화면과 사용자 흐름을 공유하는 공통 언어 역할을 한다. - 화면 사이의 애니메이션은 앱의 인상을 크게 바꾸므로, 이를 생략하면 이해관계자 사이에 반복적인 설명과 수정이 발생할 수 있다. - 전환 효과를 포함하면 정적인 목업만으로는 전달하기 어려운 제품의 분위기와 상호작용을 구체적으로 보여줄 수 있다. ## Figma 프로토타이핑의 장점 - **실시간으로 동기화되는 디자인** - 웹 기반 플랫폼이므로 디자인 프레임을 수정하면 프로토타입에도 자동으로 반영된다. - 디자인을 다시 내보내거나 프로토타입을 별도로 갱신할 필요가 없다. - **모바일 프레젠테이션** - Android와 iOS 스마트폰의 웹 브라우저에서 프로토타입을 탐색할 수 있다. - 고객 미팅에서 휴대폰으로 발표를 진행하거나, 참석자들이 각자의 노트북에서 디자인 흐름을 따라갈 수 있다. - 관찰 모드에서는 이해관계자가 발표자의 프로토타입을 함께 확인할 수 있다. - **컴포넌트와 프로토타이핑의 결합** - 컴포넌트에 한 번 내비게이션을 설정하면 모든 인스턴스에 해당 동작이 적용된다. - 예를 들어 공통 홈 버튼에 홈 화면 이동을 연결하면 여러 화면에서 동일한 동작을 반복 설정하지 않아도 된다. - 반복 요소가 많은 프로토타입을 빠르게 제작하고 수정할 수 있다. ## 사용자 피드백을 반영한 기능 확장 - 전환 기능은 Figma 2.0에서 프로토타이핑이 처음 공개된 이후 커뮤니티가 지속적으로 요청한 기능이었다. - Spectrum과 Twitter 등을 통한 사용자 피드백이 기능 개발에 반영되었다. - Figma는 앞으로도 소프트웨어 개발 과정에 참여하는 다양한 사람들의 요구를 충족하도록 프로토타이핑 기능을 확장하겠다고 밝혔다. 실무에서는 화면 연결만 구현하는 데 그치지 말고, 실제 제품의 전환 방향·속도·이징까지 함께 설정하는 것이 좋다. 특히 컴포넌트와 전환 효과를 조합하면 반복 작업을 줄이면서도 개발 전에 제품의 인터랙션을 더 정확하게 검증할 수 있다.

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

사용자 인터페이스Figma사용자 경험프로토타이핑+2

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

피그마 팁 모

이 글은 Figma 커뮤니티에서 공유된 유용한 디자인 팁과 기능 활용법을 모은 **FigmaTip Roundup 6.0**이다. 머티리얼 디자인 시스템 활용, 그룹 내 선과 채우기 색상 조정, 스퀴클(squircle)을 이용한 부드러운 모서리 등 작업 속도와 정밀도를 높이는 기능을 소개한다. 공통적으로 Figma의 재사용 가능한 시스템과 세밀한 편집 기능을 활용하면 디자인 프로세스를 더 효율적으로 만들 수 있다는 점을 강조한다. ## 머티리얼 디자인 시스템으로 작업 속도 향상 - 사용자가 제작한 Figma용 **Material Design System**을 소개한다. - 버전 1.3에는 표를 빠르게 제작할 수 있는 **테이블 생성기(table constructor)**가 통합되어 있다. - 머티리얼 디자인 기반의 UI를 만들 때 구성 요소를 처음부터 제작하지 않고 시스템을 활용할 수 있다. - 반복적으로 사용되는 UI 요소와 패턴을 미리 갖춰두면 디자인 프로세스를 가속할 수 있다. ## 그룹 안에서 선과 채우기 색상 পৃথ পৃথ로 조정 - 선(stroke)과 채우기(fill)가 함께 포함된 그룹에서도 두 속성을 독립적으로 변경할 수 있다. - 그룹의 선 색상을 바꾸면 선이 있는 객체의 선 색상만 변경된다. - 채우기만 있고 선이 없는 객체의 색상은 영향을 받지 않는다. - 복잡한 아이콘이나 일러스트를 그룹 단위로 관리하면서도 특정 시각 속성만 정밀하게 수정할 수 있다. - 다른 디자인 도구에서는 그룹 전체의 색상이 함께 바뀔 수 있는 상황을 피할 수 있다는 점이 장점이다. ## 스퀴클로 더 부드러운 모서리 만들기 - Figma의 새로운 기능으로 **스퀴클(squircle)** 형태의 모서리를 소개한다. - 스퀴클은 일반적인 원형 모서리보다 곡선이 자연스럽게 이어지는 형태다. - 카드, 버튼, 앱 아이콘처럼 둥근 모서리가 중요한 UI 요소에 적용하면 더 부드럽고 세련된 인상을 줄 수 있다. - 기존의 단순한 코너 반경 조정과 달리, 모서리 곡률을 시각적으로 더 자연스럽게 표현하는 데 활용할 수 있다. 실무에서는 머티리얼 디자인 시스템을 라이브러리로 활용하고, 그룹 편집 시 선과 채우기를 구분해 수정하며, 제품의 시각적 스타일에 맞춰 스퀴클 모서리를 선택하면 작업 속도와 완성도를 함께 높일 수 있다.

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

사용자 인터페이스Figma디자인 시스템vector-graphics+1

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

#FigmaTip 라운

이 글은 Figma 디자인 커뮤니티에서 공유된 유용한 단축 동작과 작업 팁을 모은 #FigmaTip Roundup이다. 별도 기능을 의식하지 않아도 자연스럽게 사용할 수 있는 직관적인 상호작용부터, 이미지 가져오기·중첩 레이어 탐색·균등 간격 배치처럼 반복 작업을 줄여 주는 기능까지 소개한다. 핵심은 Figma의 숨은 조작법을 익히면 디자인 작업을 더 빠르고 정밀하게 할 수 있다는 점이다. ## 폴더를 드래그해 이미지 일괄 가져오기 - 데스크톱의 폴더를 Figma 작업 화면으로 직접 드래그하면 폴더 안의 이미지 세트를 한 번에 가져올 수 있다. - 이미지를 하나씩 업로드하는 대신 여러 이미지나 에셋을 빠르게 배치할 때 유용하다. - 이미지가 많은 시안, 갤러리, 카드 목록 등을 구성할 때 작업 시간을 줄일 수 있다. ## Ctrl + 우클릭으로 중첩 레이어 탐색 - 오브젝트 위에서 **Ctrl 키를 누른 채 우클릭**하면 해당 위치에 포함된 중첩 레이어 목록을 확인할 수 있다. - 팝업에 표시된 레이어를 선택해 부모 오브젝트 안쪽의 특정 요소로 바로 이동할 수 있다. - 복잡한 컴포넌트나 여러 프레임이 겹쳐 있는 화면에서 원하는 레이어를 반복 클릭하지 않고 정확하게 선택할 수 있다. ## 빨간 가이드라인으로 동일한 간격 맞추기 - 오브젝트를 이동할 때 나타나는 빨간색 가이드라인을 이용하면 주변 요소와의 간격을 빠르게 동일하게 맞출 수 있다. - 먼저 가이드라인에 맞춰 요소를 배치한 뒤, 여러 요소를 선택해 **Distribute** 기능을 사용하면 일정한 간격의 열(column) 그리드를 만들 수 있다. - 수작업으로 좌표와 간격을 계산하지 않아도 정렬과 반복 레이아웃을 정밀하게 구성할 수 있다. ## 실용적인 활용 - 이미지가 많은 화면은 폴더 단위로 가져온 뒤, 가이드라인과 Distribute 기능으로 정렬한다. - 레이어 구조가 복잡할수록 Ctrl + 우클릭 탐색을 활용하면 선택 오류를 줄일 수 있다. - Figma의 단축키와 자동 가이드를 적극적으로 사용하면 반복적인 배치·선택 작업을 크게 단순화할 수 있다.

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

사용자 인터페이스Figmadesktop-applicationsgrid-layout+1

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

Figma가 이 버클

UC 버클리의 HCI 수업 CS 160은 디지털 제품 디자인을 가르치면서, 기존 디자인 도구와 환경의 한계를 Figma로 해결했다. Figma는 운영체제 제약과 높은 학습 곡선을 낮추고, 학생들이 수업에서 배운 사용성 원칙을 곧바로 팀 프로젝트에 적용하도록 도왔다. 특히 실시간 공동 편집과 맥락 기반 피드백은 디자인 경험이 적은 컴퓨터과학 전공자도 프로젝트에 적극 참여하게 만들었다. ## 디지털 디자인 교육의 현실과 CS 160 - 대학 교육은 빠르게 성장한 디지털 디자인 산업을 충분히 따라가지 못하고 있었다. - UC 버클리의 CS 160은 컴퓨터과학 전공자에게 사용성 및 인간-컴퓨터 상호작용의 원리를 가르치는 드문 디지털 제품 디자인 수업이었다. - 학생들은 3~4명씩 팀을 이루어 매 학기 주제에 맞는 Android 앱을 제작했다. - 의료, 선거 등 다양한 주제가 사용됐다. - 매주 수업에서 배운 내용을 프로젝트에 반영했다. - 수강 수요가 높아 정원이 기존 100명에서 두 배로 늘어난 적도 있었다. ## 기존 도구와 운영 방식의 문제 - 학생들이 Linux, Windows, macOS 등 서로 다른 컴퓨터를 사용했고, 개인 노트북이 없는 경우도 있었다. - 특정 소프트웨어가 작동하지 않는 학생을 위해 컴퓨터실을 마련했지만 효과적인 해결책이 되지 못했다. - Photoshop 등 Adobe 도구는 기능이 많고 학습 곡선이 가팔라 디자인 경험이 없는 학생에게 부담이 컸다. - 조교들은 디자인 원리보다 Photoshop 사용법을 가르치는 데 더 많은 시간을 써야 했다. - 결과적으로 일부 프로젝트에서는: - 디자인 경험과 적절한 컴퓨터를 가진 학생만 와이어프레임과 프로토타이핑을 담당하고 - 나머지 학생은 사용자 테스트나 코딩을 맡는 식으로 역할이 분리됐다. - 피드백도 이메일 등으로 일괄 전달해야 해서, 어떤 디자인 요소를 지칭하는지 학생들이 이해하기 어려웠다. ## 한 시간 만에 익힌 Figma Figma는 수업의 기술적·교육적 문제를 동시에 해결하는 도구로 선택됐다. - 학생에게 무료로 제공됐다. - 운영체제와 컴퓨터 종류에 관계없이 사용할 수 있었다. - 인터페이스가 단순해 디자인 도구 경험이 없는 학생도 빠르게 배울 수 있었다. - 디자인 화면에 직접 댓글을 달아 구체적인 위치에 피드백을 남길 수 있었다. - 버전 관리 기능으로 교사가 작업 진행 상황을 확인할 수 있었다. - 여러 학생이 하나의 디자인 파일을 동시에 편집할 수 있었다. - 프로토타이핑 기능이 내장되어 별도 도구 없이 발표용 결과물을 제작할 수 있었다. 컴퓨터과학 전공자인 Ryan Kapur는 디자인 도구 경험이 없었지만 약 한 시간 만에 Figma를 익혔다. 덕분에 도구 사용법에 시간을 빼앗기지 않고 Nielsen의 10가지 사용성 휴리스틱과 같은 수업 개념에 집중할 수 있었다. ## 수업 내용과 프로젝트의 직접적인 연결 - 학생들은 수업에서 배운 사용성 원칙을 즉시 팀 프로젝트에 적용했다. - Ryan의 팀은 의료를 주제로 알코올 의존자가 가까운 Alcoholics Anonymous 모임을 찾을 수 있는 앱을 제작했다. - Figma의 직관적인 사용성 덕분에 팀원들은 주당 약 한 시간의 대면 시간만으로도: - 새로운 기능을 브레인스토밍하고 - 화면을 설계하며 - 프로토타입을 제작할 수 있었다. - 이론을 실제 디자인에 반복적으로 적용하면서 사용성 개념을 더 깊이 이해하게 됐다. ## 실시간 협업으로 달라진 팀 프로젝트 - 여러 학생이 같은 파일을 동시에 편집할 수 있어 한 공간에서 함께 디자인할 수 있었다. - 팀원들은 서로의 작업 과정을 실시간으로 확인하고, 파일 안에서 아이디어를 논의할 수 있었다. - 마감 직전에도 여러 명이 동시에 수정할 수 있어 협업 효율이 높아졌다. - 파일을 덮어쓰거나 잘못 저장할 걱정 없이 수업 밖에서도 작업할 수 있었다. - 디자인 경험이 없는 학생도 파일에 직접 참여할 수 있어 역할이 특정 학생에게만 집중되지 않았다. - 교사는 디자인의 정확한 위치에 댓글을 남길 수 있어 피드백의 전달력과 이해도가 향상됐다. ## 교육적 의미 - Figma는 단순히 디자인 제작 도구가 아니라 컴퓨터과학과 디자인을 연결하는 협업 환경으로 활용됐다. - 도구 학습에 드는 시간을 줄여 수업의 초점을 사용성, 문제 정의, 사용자 경험에 맞출 수 있었다. - 실시간 공동 작업은 서로 다른 전공과 역량을 가진 학생들이 함께 문제를 해결하도록 도왔다. - 이 사례는 교육용 디자인 도구가 접근성, 협업성, 피드백 기능을 갖춰야 학습 효과를 높일 수 있음을 보여준다. 실무적으로는 디자인 수업이나 팀 프로젝트에서 특정 운영체제나 고가의 전문 소프트웨어를 전제로 하기보다, 누구나 빠르게 접근하고 동시에 작업할 수 있는 협업 도구를 선택하는 것이 효과적이다. 도구 자체보다 학생들이 사용성 원칙을 실제 결과물에 반복 적용하고, 교사의 피드백을 디자인 맥락 안에서 즉시 반영할 수 있는 환경을 만드는 것이 중요하다.

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

사용자 인터페이스Figma사용자 경험프로토타이핑+4

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

Stitch Fix, Figma 협

Stitch Fix는 빠르게 변화하는 웹·서비스 문제를 해결하기 위해 디자인 스프린트를 활용하고, 그 전 과정을 Figma에서 협업하며 진행했다. Figma의 브라우저 기반 환경과 실시간 공동 편집, 댓글, 공유 컴포넌트 덕분에 부서 간 파일 전달과 설치 과정이 사라지고 하나의 최신 디자인을 기준으로 빠르게 의사결정할 수 있었다. 그 결과 팀은 반복 작업보다 사용자 경험과 같은 고차원적인 문제에 집중할 수 있었다. ### 디자인 스프린트와 Figma 도입 - Stitch Fix는 성장하는 사용자 기반과 빠르게 변하는 웹 환경에 대응하기 위해 디자인 스프린트를 운영했다. - 디자인 스프린트는 해커톤과 유사하게 짧은 기간 안에 아이디어를 검증하고 문제를 해결하는 방식이다. - 디자이너, 엔지니어, 마케터, 프로젝트 매니저가 함께 아이디어를 내고 화이트보딩과 테스트를 거쳐 프로토타입을 제작했다. - Head of Product Design Ellen Beldner는 Figma가 부서 간 협업을 가능하게 해 어려운 문제를 함께 해결할 수 있었다고 평가했다. ### 브라우저 기반 협업으로 프로토타이핑 가속 - Figma는 브라우저에서 실행되므로 별도의 소프트웨어를 구매하거나 설치할 필요가 없다. - PC를 사용하는 프로젝트 매니저와 Mac을 선호하는 디자이너가 동일한 URL로 같은 파일에 접근할 수 있다. - Sketch 파일을 주고받거나, 별도 프로토타이핑·개발 전달 도구로 파일을 내보내는 과정이 줄어든다. - Stitch Fix는 Figma가 Sketch, InVision, Zeplin의 역할을 하나의 플랫폼으로 통합한다고 보았다. - 팀 전체가 동일한 파일을 사용하므로 최신 버전이 무엇인지 확인하는 데 드는 혼란도 줄어든다. ### 실시간 피드백과 공동 편집 - 초기 프로토타이핑 단계에서는 기능 구현 난이도나 사용자 흐름의 연쇄적인 문제를 빠르게 발견하고 수정해야 한다. - 기존 방식에서는 한 사람의 컴퓨터 주변에 모이거나 파일을 내보내 이메일로 전달해야 했다. - Figma의 Multiplayer 기능을 사용하면 여러 사람이 같은 파일을 동시에 보고 편집할 수 있다. - 팀원은 문제가 있는 화면으로 바로 이동해 의견을 말하거나, 댓글을 남기거나, 파일 안에 직접 간단한 목업을 그려 제안할 수 있다. - 한 디자이너가 여러 아이디어를 제시했을 때, Ellen은 각각에 댓글과 수정 예시를 남겼고 디자이너는 같은 URL에 다시 접속해 피드백을 확인할 수 있었다. - 별도의 리뷰 미팅이나 화면 공유 세션을 잡지 않아도 상세한 비평과 수정 작업을 이어갈 수 있었다. - 여러 버전의 파일이 분리되는 대신 하나의 원본에서 작업하므로 프로젝트 관리상의 혼란과 버전 불일치가 줄어든다. ### 공유 컴포넌트로 반복 작업 제거 - 디자인 스프린트에서는 같은 아이콘이나 UI 요소를 여러 화면에 반복해서 배치하는 작업이 시간 낭비가 될 수 있다. - Figma의 공유 컴포넌트는 UI 요소를 재사용 가능한 인스턴스로 관리한다. - 마스터 컴포넌트를 수정하면 해당 컴포넌트를 사용하는 모든 인스턴스에 변경 사항이 반영된다. - Stitch Fix는 카드 기반 디자인 시스템을 프로토타이핑하면서 사용자별로 어떤 카드 조합이 효과적인지 빠르게 실험했다. - 한쪽에서는 컴포넌트를 수정하고, 다른 팀원은 이미 만들어진 인스턴스를 활용해 내비게이션 등 다른 영역을 동시에 작업할 수 있었다. - 반복적인 복사·수정 대신 사용자 경험과 제품 구조 같은 높은 수준의 문제에 더 많은 시간을 투자할 수 있었다. ### 실용적인 적용 방향 - 짧은 기간에 여러 부서가 함께 프로토타입을 만들어야 한다면 브라우저 기반 단일 작업 공간을 사용하는 것이 효과적이다. - 실시간 편집, 댓글, 공유 컴포넌트를 적극 활용하면 리뷰 회의와 파일 전달을 줄이고 의사결정을 앞당길 수 있다. - 디자인 시스템의 핵심 UI 요소를 컴포넌트화하면 스프린트 중에도 일관성을 유지하면서 다양한 조합을 빠르게 검증할 수 있다.

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

사용자 인터페이스Figma디자인 시스템사용자 경험+4

figma·2017년 12월 11일·2분 읽기큐레이션 요약

#FigmaTip Roundup

이 글은 Figma 디자인 커뮤니티에서 공유된 짧고 실용적인 팁을 모은 네 번째 라운드업이다. 마스크, 심벌, 제약 조건, 아웃라인 모드처럼 기본 기능을 활용하면 이미지 편집과 반복 패턴 제작, 반응형 레이아웃 확인을 더 효율적으로 할 수 있다고 소개한다. 각 팁은 설명보다 실제 사용 사례와 짧은 시각 자료 중심으로 전달된다. ## 마스크로 이미지 자르기 - Figma의 마스크 기능을 사용하면 이미지나 그래픽을 원하는 형태로 잘라낼 수 있다. - 사각형에 한정하지 않고 다양한 도형을 마스크로 활용해 독특한 이미지 크롭을 만들 수 있다. - 이미지 자체를 파괴적으로 편집하지 않고 표시 영역만 조정하므로, 이후에도 위치와 크기를 수정하기 쉽다. ## 심벌로 반복 패턴 만들기 - 동일한 요소를 여러 번 배치해야 할 때 심벌을 활용하면 작업을 단순화할 수 있다. - 심벌 하나를 수정하면 연결된 인스턴스에 변경 사항을 반영할 수 있어 반복 요소 관리에 유리하다. - 심벌을 반복 배치하고 회전·이동·조합하면 장식용 패턴이나 재미있는 그래픽을 만들 수 있다. - 단순한 UI 컴포넌트뿐 아니라 창의적인 시각 디자인에도 심벌을 사용할 수 있음을 보여준다. ## 제약 조건으로 프레임 크기 조정하기 - 프레임 내부 요소에 제약 조건을 설정하면 부모 프레임의 크기가 바뀔 때 요소가 어떻게 반응할지 지정할 수 있다. - 요소를 왼쪽·오른쪽·위·아래에 고정하거나, 가로·세로 방향으로 늘어나도록 설정할 수 있다. - 다양한 화면 크기를 고려한 레이아웃을 만들 때 유용하며, 프레임 크기를 직접 조정하면서 반응 방식을 확인할 수 있다. - 원문에서는 이 팁을 소개하는 트위터 임베드가 정상적으로 표시되지 않는다. ## Command + Y로 아웃라인 모드 확인하기 - `Command + Y` 단축키로 아웃라인 모드를 전환할 수 있다. - 아웃라인 모드에서는 채우기와 시각적 스타일보다 객체의 경계와 구조를 중심으로 확인할 수 있다. - 복잡한 아이콘이나 화면 구성에서 겹친 요소, 벡터 경로, 레이어 구조를 점검할 때 도움이 된다. - 일반 보기와 아웃라인 보기를 오가며 아이콘 구성과 레이아웃을 검토할 수 있다. 실무에서는 마스크를 이미지 편집에, 심벌을 반복 요소 관리에, 제약 조건을 반응형 레이아웃 설계에, 아웃라인 모드를 구조 검수에 적용하면 좋다. Figma의 기본 기능도 조합 방식에 따라 단순한 편집을 넘어 효율적인 시스템과 창의적인 그래픽 제작에 활용할 수 있다.

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

사용자 인터페이스Figmadesign-toolsgraphic-design+4

figma·2017년 10월 25일·2분 읽기큐레이션 요약

그마, 이제 제

Figma는 UI 디자이너와 프런트엔드 개발자 간 협업을 개선하기 위해 Zeplin과의 연동을 지원한다고 발표했습니다. 디자이너는 Figma의 프레임을 Zeplin으로 내보내 개발자 중심의 방식으로 공유할 수 있으며, 기존 업무 흐름을 유지하면서 두 서비스를 seamless하게 사용할 수 있습니다. 다만 원본 디자인이 변경되면 Zeplin으로 다시 내보내야 합니다. ## Figma와 Zeplin 연동의 목적 - 팀마다 디자인·프로토타이핑·개발 방식이 다르다는 점을 고려해 다양한 협업 시스템을 지원합니다. - Zeplin은 UI 디자이너와 프런트엔드 개발자 간 핸드오프에 특화된 도구입니다. - 개발자에게 디자인 데이터를 직관적으로 제공해 구현 과정의 이해와 협업을 돕습니다. - Figma 사용자의 요청이 많았던 기능으로, Zeplin을 중심으로 작업하던 팀도 Figma를 도입하기 쉬워졌습니다. ## Figma와 Zeplin의 역할 차이 - Figma는 디자인 제작과 협업, 프로토타이핑을 위한 플랫폼입니다. - Zeplin은 개발자 경험에 초점을 맞춘 핸드오프 도구입니다. - Figma의 코드 모드와 달리, Zeplin으로 내보낸 디자인은 자동으로 최신 상태가 되지 않습니다. - Figma에서 디자인을 수정한 경우 변경 사항을 반영하려면 Zeplin으로 다시 내보내야 합니다. ## 연동 설정 및 사용 방법 - Zeplin을 설치하고 프로젝트를 생성합니다. 실험용 프로젝트도 사용할 수 있습니다. - Figma의 왼쪽 상단 메뉴에서 **Integrations > Zeplin**을 선택해 연동을 활성화합니다. - Figma에서 개발자에게 전달할 프레임을 만듭니다. - 해당 프레임을 선택한 뒤 **Export > Export to Zeplin**을 실행합니다. - 자동으로 열린 Zeplin 앱에서 **Import**를 선택합니다. - 이후 Zeplin에서 Figma 디자인을 확인하고 개발 핸드오프에 활용할 수 있습니다. ## 협업 생태계 확장 - 디자인 도구와 개발 도구 간 통합은 팀의 업무 전환 비용을 줄이고 협업 흐름을 매끄럽게 만듭니다. - Figma는 Zeplin 같은 외부 파트너와의 연동을 통해 플랫폼 생태계를 확장하려고 합니다. - 글에서는 새로운 협업 도구와 파트너십 제안을 계속 환영한다고 밝힙니다. 실무에서는 Figma를 디자인의 원본으로 관리하고, 변경이 완료된 시점에 프레임을 Zeplin으로 재내보내는 운영 방식을 권장합니다. 이를 통해 Zeplin에 전달된 화면이 실제 디자인과 불일치하는 문제를 줄일 수 있습니다.

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

사용자 인터페이스Figma프로토타이핑front-end-development+2

figma·2017년 10월 15일·2분 읽기큐레이션 요약

놓치셨을 분들을

Figma는 창립 1주년을 기념해 월요일부터 토요일까지 매일 새로운 기능을 공개하는 `#6DaysofShipping` 이벤트를 진행했다. 고급 사용자를 위한 기능부터 초보자를 위한 단축키 안내까지 다양한 수준의 기능을 연속적으로 선보이며, 빠른 제품 개발과 사용자 커뮤니티의 기대감을 강조했다. 이 글은 해당 주간에 공개된 기능과 사용법을 간단히 정리한 회고다. ## 6일간 이어진 기능 출시 이벤트 - Figma 팀은 제품 출시 속도에 대한 사용자들의 관심과 기대에 호응해 6일 연속 기능을 공개했다. - 이벤트는 월요일부터 토요일까지 매일 하나의 기능을 소개하는 방식으로 진행됐다. - 주요 대상은 다음처럼 다양했다. - 중첩 인스턴스 교체 같은 파워 유저용 기능 - 키보드 단축키 목록처럼 입문자에게 유용한 기능 - 서로 성격이 다른 기능을 한 주에 묶어 공개함으로써 다양한 사용자에게 새로운 기능을 제공했다. ## 드래그로 속성값을 조절하는 Scrubbable Inputs - 속성 패널의 숫자 값을 직접 입력하는 대신, 마우스로 드래그해 빠르게 변경할 수 있다. - `Option` 키를 누른 상태에서 값을 클릭하고 드래그하면 값이 조절된다. - 커서를 위쪽으로 움직이면 값의 변화 속도를 더 빠르게 할 수 있다. - 반복적으로 크기, 위치, 간격 등의 값을 바꿔야 하는 디자인 탐색 과정에서 특히 유용하다. - 정확한 숫자를 매번 입력하기보다 시각적으로 결과를 확인하며 여러 대안을 빠르게 비교할 수 있다. ## 모서리 반경을 빠르게 조정하는 단축 동작 - 사각형의 모서리 반경을 별도의 입력 과정 없이 직접 조절할 수 있다. - 도형에 마우스를 올린 뒤 모서리 조절 핸들을 클릭하고 드래그하면 원하는 둥근 정도를 설정할 수 있다. - `Alt` 키를 누른 상태에서 드래그하면 네 모서리를 한꺼번에 바꾸는 대신 특정 모서리 하나만 조절할 수 있다. - 따라서 전체적으로 둥근 카드뿐 아니라 한쪽 모서리만 둥근 형태도 빠르게 만들 수 있다. - 디자인 시안을 수정할 때 속성 패널과 캔버스 사이를 오갈 필요가 줄어든다. ## 파워 유저와 초보자를 함께 고려한 기능 구성 - 이번 출시 주간은 하나의 큰 기능에 집중하기보다 작업 속도와 접근성을 높이는 여러 기능을 폭넓게 다뤘다. - 중첩 인스턴스 교체처럼 컴포넌트 기반 작업을 강화하는 기능과 키보드 단축키 안내를 함께 제공했다. - Figma는 기능 자체뿐 아니라 사용자가 기능을 발견하고 익히는 과정도 중요하게 보고 있었다. - 매일 새로운 내용을 공개하는 형식은 사용자들이 다음 출시를 기대하게 만들고 커뮤니티의 참여를 유도했다. 실무에서는 숫자 값을 반복해서 수정할 때 Scrubbable Inputs를 사용하고, 모서리 형태를 조정할 때 드래그와 `Alt` 조합을 활용하면 디자인 탐색 속도를 높일 수 있다. 또한 새로운 기능을 한꺼번에 익히기보다 단축키와 캔버스 직접 조작 기능부터 작업 흐름에 조금씩 적용하는 것이 효과적이다.

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

사용자 인터페이스Figmadesign-toolskeyboard-shortcuts+1

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

이번 트위터 논란은

디자인 시스템은 아직 업계에서 하나의 고정된 정의로 합의되지 않은 개념이다. Airbnb의 Karri Saarinen은 이를 제품 전체의 디자인을 규정하는 “공유되고 통합된 원칙과 패턴의 집합”으로 설명하며, 규모가 큰 장기 프로젝트일수록 일관성과 제약이 필요하다고 주장한다. 글은 Saarinen의 트위터 논쟁을 통해 디자인 시스템의 의미와 범위가 여러 디자이너의 관점 속에서 형성되고 있음을 보여준다. ## 디자인 시스템 정의가 분명하지 않은 이유 - 디자이너마다 디자인 시스템을 다르게 이해한다. - UI 컴포넌트와 스타일 가이드의 모음으로 보는 관점 - 제품의 디자인 원칙과 패턴을 포함하는 체계로 보는 관점 - 조직 전체의 협업 방식과 의사결정 기준까지 포함하는 관점 - 2017년 당시에도 디자인 시스템은 비교적 새로운 개념이었으며, 업계 리더들조차 범위와 핵심 요소를 계속 정립하는 단계였다. - 따라서 디자인 시스템은 단순한 시각적 규칙집이라기보다, 제품을 일관되게 설계하기 위한 여러 원칙과 패턴의 통합된 체계로 논의되고 있다. ## 규모가 커질수록 필요한 제약과 일관성 - Saarinen은 대규모·장기 프로젝트가 성공하려면 디자인 시스템이 필요하다고 설명했다. - 여러 팀과 플랫폼이 동시에 제품을 개발할 때 디자인 시스템은 다음을 돕는다. - 화면과 기능 간 시각적 일관성 유지 - 반복적인 디자인 의사결정 감소 - 팀 간 협업 기준 통일 - 제품이 확장될 때 디자인 품질 유지 - 여기서 제약은 창의성을 제한하기 위한 것이 아니라, 팀이 매번 기본 요소를 새로 결정하지 않고 중요한 문제에 집중하게 하는 장치로 볼 수 있다. ## Airbnb의 디자인 시스템 구축 방향 - Saarinen은 Airbnb의 디자인 시스템을 만들면서 제품의 전반적인 경험을 하나의 언어로 통합하려 했다. - 그가 제시한 주요 원칙은 다음과 같다. - **Unified**: 제품 경험이 서로 연결되고 통일되어야 함 - **Universal**: 다양한 상황과 사용자에게 적용될 수 있어야 함 - **Iconic**: Airbnb만의 분명하고 기억에 남는 정체성을 가져야 함 - **Conversational**: 사용자와 자연스럽게 소통하는 경험을 제공해야 함 - 이 접근은 디자인 시스템을 색상, 버튼, 아이콘 같은 시각 요소의 목록으로 한정하지 않고, 제품이 사용자에게 전달하는 태도와 경험까지 포함한다. ## 트위터 논쟁이 보여준 관점의 다양성 - Saarinen이 자신의 최신 정의를 공개하면서 다른 디자인 리더들과 공개적인 논의가 시작됐다. - 그의 정의는 디자인 시스템을 다음과 같이 본다. - 제품 전체 디자인을 규정하는 원칙과 패턴 - 여러 팀이 공유하고 함께 사용하는 통합된 기준 - 개별 화면이 아니라 제품 전반의 경험을 다루는 구조 - Facebook의 제품 디자이너 Sean Blanton을 비롯한 업계 인사들의 반응은 디자인 시스템의 범위를 둘러싼 의견 차이를 드러냈다. - 글은 이 논쟁을 통해 정답 하나를 제시하기보다, 디자인 시스템의 핵심이 무엇인지 업계가 실시간으로 조정하고 구체화하는 과정을 보여준다. ## 디자인 시스템은 완성된 산출물이 아닌 evolving한 체계 - 디자인 시스템은 한 번 만들어 배포하면 끝나는 문서나 라이브러리가 아니다. - 제품, 조직, 플랫폼이 변하면 원칙과 패턴도 함께 조정되어야 한다. - 중요한 것은 특정 구성 요소의 개수보다 다음과 같은 통합성이다. - 디자인 원칙과 실제 UI 패턴의 연결 - 디자이너와 개발자가 공유하는 언어 - 여러 제품 영역에 걸친 일관된 사용자 경험 - 조직이 성장해도 유지되는 의사결정 기준 실무에서는 디자인 시스템을 단순한 컴포넌트 라이브러리로 시작하되, 색상·타이포그래피·레이아웃 같은 시각 규칙뿐 아니라 제품 원칙과 사용자 경험의 방향까지 함께 정의하는 것이 좋다. 또한 조직과 제품의 규모에 맞춰 범위를 정하고, 실제 팀의 사용과 피드백을 반영하며 지속적으로 발전시켜야 한다.

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

사용자 인터페이스디자인 시스템프로덕트 디자인design-patterns+4

figma·2017년 6월 25일·2분 읽기큐레이션 요약

피그마 가이드 출시 |

Figma는 사용자 요청이 많았던 Guides 기능을 도입해 디자인 요소를 정렬하고 배치할 수 있도록 했다. Guides는 자를 기준으로 빠르게 생성·이동할 수 있으며, 프레임 단위로 관리하거나 픽셀 단위로 조정할 수 있다. Layout Grids보다 간편하게 사용할 수 있는 보조선이라는 점이 핵심이다. ## Guides의 목적과 특징 - Guides는 디자인 요소의 위치를 맞추기 위한 가로·세로 기준선이다. - Layout Grids보다 생성과 조작이 빠르다. - 2017년 출시 당시 6개월 동안 약 100건의 사용자 요청이 접수될 정도로 수요가 높았다. - Figma는 이 기능을 인턴 Shirley Miao와 엔지니어 Kenrick Rilee가 함께 개발했다고 소개한다. ## Guides 표시와 생성 - 메인 메뉴에서 **View → Show rulers**를 선택해 자를 표시한다. - 캔버스 상단의 가로 자 또는 왼쪽의 세로 자 위에 마우스를 올리면 오프셋 값이 표시된다. - 원하는 위치의 자를 클릭하면 해당 위치에 Guide가 생성된다. - 자의 여러 위치를 클릭해 여러 개의 Guides를 한 번에 만들 수 있다. ## Guides 이동과 삭제 - 생성된 Guide는 얇은 빨간 선으로 표시된다. - Guide를 드래그해 다른 오프셋으로 이동할 수 있다. - 삭제하려면 Guide를 선택한 뒤 Delete 키를 누르거나 화면 바깥으로 드래그한다. - 자 보기 기능을 끄면 Guides도 화면에서 사라진다. - 실수로 위치를 변경한 경우 `Command + Z`로 되돌릴 수 있다. - 화살표 키를 사용하면 Guide를 픽셀 단위로 미세 조정할 수 있다. ## 프레임 수준의 Guides - Guide를 프레임 안으로 드래그하면 해당 프레임에 종속된 프레임 수준 Guide가 된다. - 이를 활용하면 전체 캔버스에 Guides가 과도하게 표시되는 것을 줄일 수 있다. - 프레임 수준 Guides는 최상위 프레임에서만 작동한다. - Guides가 포함된 프레임을 다른 프레임 안으로 이동하면 해당 Guides는 사라진다. ## 실용적인 활용 - 자를 켠 뒤 주요 콘텐츠의 좌우 여백이나 상하 정렬 기준을 Guide로 표시하면 배치를 일관되게 유지할 수 있다. - 여러 화면이나 컴포넌트의 공통 정렬선을 빠르게 확인할 때 유용하다. - 세밀한 간격 조정에는 화살표 키와 실행 취소 기능을 함께 활용하는 것이 좋다. - 복잡한 캔버스에서는 프레임 수준 Guides를 사용해 화면별 기준선을 관리하는 것을 추천한다.

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

사용자 인터페이스Figmalayout-gridsdesign-editor+1

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

한 디자이너가 내

Pivotal의 디자이너와 개발자 간 인수인계는 디자인 파일을 이미지로 내보내고 프로젝트 카드에 반복 업로드하는 방식이라 비효율과 오류가 많았다. Figma를 도입한 뒤에는 최신 디자인을 링크 하나로 공유하고 디자인 위에 직접 댓글을 남길 수 있어, Colby는 프로젝트마다 약 이틀의 문서 관리 시간을 절약했다. 또한 맥락이 포함된 실시간 리뷰가 가능해져 협업과 결과물의 품질에도 긍정적인 영향을 주었다. ### 반복적인 이미지 내보내기와 업로드의 문제 - Colby는 디자인 프레임을 이미지로 export한 뒤 Pivotal Tracker의 개발 카드에 업로드했다. - 프로젝트마다 이 작업을 15~20회 반복해야 했다. - 프로젝트 하나에 수백 개의 카드가 있어 최신 카드를 찾는 데도 많은 시간이 들었다. - 이미지를 업데이트하지 않고 잊어버리면 개발자가 오래된 디자인을 기준으로 작업할 수 있었다. - 이 과정은 디자이너뿐 아니라 개발자의 시간도 낭비하고, 잘못된 구현으로 이어질 위험이 있었다. ### 브라우저 기반 디자인 공유 - Figma 파일은 브라우저에서 관리되므로 별도 프로그램 설치 없이 접근할 수 있었다. - 링크를 공유하면 모든 협업자가 동일한 최신 파일을 확인할 수 있었다. - 디자인이 변경되어도 개발 카드를 매번 이미지로 갱신할 필요가 없었다. - Colby는 카드를 처음 만들 때 Figma 링크만 추가하면 되었고, 프로젝트마다 약 이틀의 작업 시간을 절약했다. - Figma는 단순한 디자인 제작 도구를 넘어 파일 공유와 변경 관리까지 지원하는 “디자인 관리 도구”로 활용되었다. ### 디자인 위에 남기는 맥락 있는 댓글 - 기존 디자인 리뷰에서는 엔지니어들이 포스트잇에 의견을 적고 차례로 구두 공유했다. - 포스트잇은 어떤 디자인 요소에 대한 의견인지 맥락이 분리되어 이해하기 어려웠다. - Figma에서는 댓글을 특정 프레임이나 디자인 영역에 직접 연결할 수 있었다. - 리뷰 참여자는 의견이 적용되는 위치를 즉시 확인할 수 있어 피드백이 더 명확해졌다. - 결과적으로 주간 디자인 리뷰가 더 짧고 효율적으로 진행되었다. ### 실시간 협업과 리뷰 조정 - 엔지니어가 파일을 검토하는 동안 Colby는 각자의 커서와 활동을 실시간으로 확인할 수 있었다. - 특정 컴포넌트처럼 이미 스타일 가이드로 정해진 부분에 리뷰가 집중되면, Colby가 피드백 방향을 조정할 수 있었다. - 리뷰를 받는 디자이너가 어떤 영역에 피드백을 원하는지 직접 안내할 수 있었다. - 디자이너와 개발자가 같은 파일을 보며 의견을 주고받아 정보 전달의 누락을 줄였다. ### 협업 품질 향상 - Figma는 디자인에서 개발로 넘어가는 인수인계 과정의 반복적인 관리 작업을 줄였다. - 팀은 파일 버전과 피드백을 추적하는 데 쓰던 시간을 제품의 완성도에 더 투자할 수 있었다. - Pivotal은 개발자와 디자이너를 포함한 다양한 구성원의 의견이 더 나은 제품을 만든다고 보았고, Figma가 이를 지원한다고 평가했다. 실무에서는 디자인 파일을 이미지로 복사해 전달하기보다 최신 원본 링크를 단일 기준으로 삼고, 피드백은 해당 디자인 요소에 직접 남기는 방식이 효과적이다. 이를 위해 프로젝트 관리 카드에 Figma 링크와 버전 규칙을 명확히 기록하면 오래된 시안으로 작업하는 문제를 줄일 수 있다.

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

사용자 인터페이스Figma디자인 시스템design-collaboration+2

figma·2017년 5월 25일원문

워크플로에서 컨스트레인 (새 탭에서 열림)

Figma의 '제약 사항(Constraints)' 기능은 다양한 화면 크기에 대응해야 하는 현대 디자이너들의 작업을 효율적으로 만들어주는 강력한 도구입니다. 이 기능을 활용하면 요소가 상위 프레임의 크기 변화에 따라 어떻게 반응할지 정의할 수 있어, 반복적인 수작업 없이도 유연한 반응형 디자인을 완성할 수 있습니다. 결과적으로 디자이너는 한 번의 설계로 PC부터 모바일까지 모든 해상도에서 의도한 레이아웃을 유지하는 견고한 인터페이스를 구축할 수 있습니다. **버튼의 고정 위치 설정** * 모바일 UI에서 자주 쓰이는 '플로팅 액션 버튼(FAB)'과 같은 요소를 프레임의 특정 위치에 고정할 수 있습니다. * 제약 사항을 'Bottom'과 'Right'로 설정하면 화면 크기가 늘어나거나 줄어들더라도 버튼이 지정된 구석 위치를 이탈하지 않고 유지됩니다. **컴포넌트와 제약 사항의 결합** * Figma의 컴포넌트(반복되는 디자인 단위) 기능과 제약 사항을 함께 사용하면 디자인 시스템 운영 효율이 극대화됩니다. * 주요 요소에 제약 사항을 설정한 뒤 이를 컴포넌트로 만들고 다양한 기기 크기의 프레임에 복제하면, 원본의 색상이나 텍스트 스타일을 한 번만 수정해도 모든 해상도의 인스턴스에 즉시 반영됩니다. **그리드와 연동한 반응형 레이아웃** * 제약 사항을 'Stretch(늘리기)' 타입의 레이아웃 그리드와 결합하면 하단 내비게이션 바와 같은 복잡한 요소도 정교하게 제어할 수 있습니다. * 내비게이션 바 프레임에 'Left & Right' 및 'Bottom' 제약을 설정하고, 각 아이콘을 그리드 열 내부에 배치한 뒤 'Center'로 설정하면 화면 너비 변화에 맞춰 아이콘 간격이 자동으로 균등하게 조절됩니다. **유연한 테이블 셀 설계** * 텍스트와 아바타가 포함된 그룹은 'Center-Left'로, 우측의 버튼 그룹은 'Center-Right'로 제약 사항을 다르게 부여하여 테이블 셀을 구성합니다. * 이렇게 설계된 셀은 프레임 너비가 어떻게 변하든 각 정보가 좌우 끝단에 밀착되어 정돈된 형태를 유지하므로, 정보 밀도가 높은 목록형 UI를 설계할 때 매우 유용합니다. **일러스트레이션의 창의적 활용** * 제약 사항은 UI 요소뿐만 아니라 일러스트레이션이나 드로잉에도 적용하여 재미있는 시각 효과를 줄 수 있습니다. * 수평 또는 수직 제약을 활용해 이미지를 의도적으로 늘리거나 줄임으로써, 프레임 크기 변화에 따라 캐릭터의 형태가 변하는 위트 있는 디자인을 연출할 수 있습니다. 효율적인 워크플로우를 위해 단순히 요소를 배치하는 것에 그치지 말고, 초기 설계 단계부터 제약 사항을 고려하는 습관을 들이는 것이 좋습니다. 특히 컴포넌트와 레이아웃 그리드를 제약 사항과 유기적으로 연결하여 사용한다면, 복잡한 디자인 시스템도 훨씬 유연하고 일관성 있게 관리할 수 있습니다.

사용자 인터페이스Figma반응형 디자인components+3

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

해커톤이 테크 디

해커톤은 디자이너를 기술 업계로 유입시키는 효과적인 통로가 될 수 있지만, 기존 개발자 중심 문화 때문에 디자이너들이 애초에 자신을 위한 행사라고 느끼지 못한다. Hack@Brown의 사례는 브랜딩 개선, 디자인 전용 시상, 적극적인 참가자 모집과 기업 멘토링을 통해 이 장벽을 낮출 수 있음을 보여준다. 따라서 디자이너 부족 문제를 해결하려면 해커톤 주최자뿐 아니라 기술 기업도 직접 디자이너를 찾아가고 성장 경로를 제시해야 한다. ## 디자이너에게 해커톤이 필요한 이유 - 해커톤은 짧은 시간 안에 팀을 구성하고 아이디어를 제품으로 발전시키는 행사다. - 디자이너는 해커톤에서 다음과 같은 경험을 얻을 수 있다. - 엔지니어와 협업 - 제품 아이디어 구상과 빠른 반복 - 화면과 플랫폼 제약을 고려한 디자인 - 이론적으로는 기술 업계의 디자이너 채용을 위한 자연스러운 인재 발굴 경로가 될 수 있다. - 그러나 실제 해커톤은 개발자 중심의 분위기와 이미지가 강해, 디자이너들이 자신은 어울리지 않는다고 생각하기 쉽다. ## Hack@Brown의 디자이너 유치 전략 - Brown University의 Hack@Brown은 약 500명이 참여하는 대학 해커톤으로, 디자인 전공 학생을 적극적으로 끌어들이는 모델을 제시했다. - RISD 학생들 중에는 코딩을 못하면 참여할 수 없거나, 기술 기업에서 일하는 것을 “매도”처럼 여기는 인식이 있었다. - 주최 측은 이를 바꾸기 위해: - 행사 브랜딩을 더 전문적이고 디자인 친화적으로 개편 - UX·UI 분야를 위한 별도 상금 마련 - 전국 디자인 동아리에 직접 연락 - 참가자의 프로비던스 왕복 교통비 지원 - 디자인 전공자를 운영진에 더 많이 포함 - 그 결과 디자인 참가자는 2013년 15~20명에서 2017년 100명 이상으로 증가했고, 전체 참가자의 약 20%를 차지했다. ## 기술 업계로 가는 보이지 않는 경로 - 엔지니어에게는 학습 방법과 취업으로 이어지는 비교적 명확한 경로가 있지만, 기술 업계의 제품 디자이너가 되는 과정은 덜 정립되어 있다. - 디자이너가 해커톤에 참여하더라도 개발자 채용 부스만 보이면 자신이 환영받지 못한다고 느낄 수 있다. - 한 참가자는 행사장이 엔지니어 중심이라는 인상을 받자 곧바로 떠나기도 했다. - 따라서 기업이 디자이너가 있는 곳으로 직접 찾아가야 한다는 주장이 제기된다. - 제품 디자이너가 될 가능성이 있는 학생을 발굴 - 현업 디자이너를 멘토로 파견 - 참가자에게 직무와 채용 경로를 설명 - Hack@Brown 운영자였던 Atty Eleti도 행사에서 현업 디자이너를 만나 자신의 진로를 엔지니어에서 디자이너로 전환했다. 잠재력을 알아보고 격려해 주는 한 번의 만남이 진로 형성에 결정적일 수 있다는 사례다. ## 해커톤에서 채용으로 이어지는 퍼널 - Hack@Brown은 단순한 행사 참여를 넘어 기업과 학생을 연결하는 채용 퍼널로 발전했다. - Facebook 등 기술 기업은 행사에 멘토를 보내 잠재력 있는 학생을 만나고, 이후 후속 통화나 캠퍼스 방문으로 관계를 이어갔다. - 당시 기술 기업들은 디자이너 채용을 크게 늘리고 있었다. - Facebook의 디자이너 채용 목표가 과거보다 크게 증가 - LinkedIn과 Dropbox는 엔지니어 4~5명당 디자이너 1명 수준의 채용 비율을 목표로 설정 - IBM과 GE도 디자이너 대규모 채용을 추진 - 해커톤 참가자 상당수는 기술·제품 디자인 업계 진입에 불안을 느꼈지만, 기업 입장에서는 아직 발굴되지 않은 인재가 풍부한 공간이었다. 해커톤이 디자이너 부족 문제의 만능 해결책은 아니지만, 행사를 개발자만의 공간이 아니라 디자이너와 엔지니어가 함께 제품을 만드는 공간으로 설계한다면 강력한 인재 발굴 경로가 될 수 있다. 주최자는 디자인 친화적인 환경을 만들고, 기업은 현업 디자이너를 파견해 참가자에게 구체적인 진로와 채용 기회를 보여주는 것이 좋다.

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

사용자 인터페이스Figma사용자 경험프로덕트 디자인+2

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

스냅챗은 논란의

Snapchat의 성공은 전통적인 사용성 원칙을 따랐기 때문이 아니라, 오히려 복잡하고 숨겨진 UI를 통해 독특한 문화와 참여 방식을 만들었기 때문이라는 글이다. 직관성 대신 친구에게 기능을 배우고 공유하게 만드는 ‘공유 가능한 UI’를 택했으며, 카메라 중심 화면과 제스처 기반 탐색으로 모바일 소셜 앱의 새로운 방향을 제시했다. 다만 이러한 성공이 의도적인 전략인지 우연히 형성된 결과인지는 명확하지 않다. ## 전통적인 사용성 원칙을 거스른 UI - Snapchat은 사용자가 앱을 쉽게 이해하도록 만드는 일반적인 디자인 원칙을 따르지 않았다. - Stories 메뉴는 세로와 가로로 모두 스크롤되며, 화면마다 기능 배치와 탐색 방식이 일관되지 않았다. - 앱 전체를 아우르는 보편적인 내비게이션 바가 없고, 기능이 여러 화면과 제스처 속에 분산되어 있었다. - 이런 구조는 사용성을 떨어뜨리지만, 디자인의 목표가 항상 ‘가장 쉽게 이해되는 화면’을 만드는 데 있는 것은 아니라는 점을 보여준다. - Bobby Goodlatte는 디자인이란 픽셀이나 미적 완성도보다 문제 해결에 관한 것이며, 때로는 덜 다듬어진 공간이 더 적절한 해결책이 될 수 있다고 설명한다. ## 숨겨진 기능이 만든 사용자 문화 - Snapchat의 일부 기능은 화면에 명확히 드러나지 않아 다른 사용자에게 배워야 했다. - 라이브 영상 통화나 필터 기능처럼 숨겨진 기능을 친구가 직접 알려주면서 사용자 사이에 일종의 ‘부족 지식(tr ial knowledge)’이 형성됐다. - 앱 사용법을 아는 사람과 모르는 사람 사이에 경계가 생기면서, Snapchat은 부모 세대가 쉽게 접근하기 어려운 젊은 사용자만의 공간이 되었다. - 복잡하고 정돈되지 않은 인터페이스가 오히려 젊은 세대의 혼란스럽고 비정형적인 일상과 잘 맞는다는 해석도 제시된다. ## 카메라 중심 설계와 모바일 UX의 혁신 - Snapchat은 앱을 실행하면 피드가 아니라 카메라가 먼저 열리도록 설계한 최초의 대형 소셜 앱 중 하나였다. - 이 선택은 다른 사람의 콘텐츠를 소비하는 데서 벗어나, 사용자가 직접 사진과 영상을 만들도록 유도했다. - 화면을 스와이프해 앱의 다른 영역으로 이동하는 다차원적 탐색은 기존 메뉴 버튼보다 모바일 환경에 더 자연스러울 수 있었다. - 더블 탭, 스와이프, 길게 누르기 같은 터치 동작을 독자적인 명령어처럼 활용했다. - 이미지 위에서 필터를 바로 끌어오는 방식도 기존 앱의 썸네일 목록 중심 필터 UI와 달랐다. - 카메라를 열자마자 재미있고 창의적인 행동을 제안한다는 점이 Snapchat의 핵심 차별점이었다. ## ‘직관적인 UI’에서 ‘공유 가능한 UI’로 - Greylock의 Josh Elman은 Snapchat의 접근을 ‘공유 가능한 UI(shareable UI)’라고 설명한다. - 모든 제품이 처음부터 직관적일 필요는 없으며, Facebook이나 Excel도 처음 사용하는 사람에게는 즉시 이해되지 않았다는 논리다. - 중요한 것은 사용자가 혼자 메뉴를 헤매지 않고, 친구에게 기능을 묻고 사용법을 공유할 만큼 강력하고 매력적인 제품을 만드는 것이다. - 특히 소셜 앱에서는 기능을 알려주는 행위 자체가 사용자 간 관계와 참여를 강화할 수 있다. - Snapchat의 필터처럼 누군가 직접 보여줘야 알 수 있는 기능은 단순한 사용법이 아니라 사용자 확산 방식으로 작동했다. ## 의도된 전략인가, 우연한 성공인가 - 인터뷰에 참여한 디자이너들은 Snapchat의 성공을 완전히 계획된 디자인 전략으로 보지는 않았다. - 일부는 여러 가지 서투른 디자인이 우연히 하나의 앱에 모였고, 이후 젊은 세대의 취향에 맞았다고 평가했다. - 반대로 결과적으로는 기존 디자인 규칙을 깨면서 새로운 사용 행태와 모바일 소셜 경험을 만들어냈다. - Snapchat의 사례는 좋은 디자인이 반드시 정돈되고 예측 가능하며 즉시 이해 가능한 디자인과 같지는 않다는 점을 보여준다. 제품을 설계할 때는 무조건 직관성을 극대화하기보다, 사용자가 친구에게 알려주고 싶을 만큼 강력한 기능과 문화를 만들 수 있는지도 고려할 만하다. 다만 숨겨진 UI는 제품의 핵심 기능까지 가리지 않도록 설계해야 하며, Snapchat의 성공을 그대로 모방하기보다는 타깃 사용자와 서비스 목적에 맞게 적용해야 한다.

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

사용자 인터페이스사용자 경험interaction-designmobile-design+3