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

오버레이를 소개합니다 |

Figma는 정적인 화면을 연결하는 기존 프로토타이핑의 한계를 보완하기 위해 Overlays 기능을 출시했다. 이를 통해 모달, 사이드바, 팝오버, 드롭다운처럼 기존 콘텐츠 위에 표시되는 요소를 유연하게 표현하고, 여러 오버레이를 겹쳐 상호작용할 수 있다. 결과적으로 반복적이고 번거로운 프로토타입 제작 과정을 단순화하고 실제 인터페이스에 가까운 사용자 흐름을 구현할 수 있게 됐다. ## 오버레이의 기본 동작 - 두 프레임을 연결한 뒤 속성 패널에서 목적지 프레임을 오버레이로 설정할 수 있다. - 오버레이의 표시 위치와 등장 방식을 설정할 수 있다. - 디바이스 기준 상대 위치를 지원해 모달이나 액션 시트를 자연스럽게 배치할 수 있다. - 툴팁이나 드롭다운처럼 특정 객체를 기준으로 표시해야 하는 요소는 오버레이 위치를 수동으로 조정할 수 있다. ## 여러 오버레이의 중첩 - 하나의 화면 위에 여러 오버레이를 연속해서 표시할 수 있다. - 다단계 구매 과정, 확인 대화상자 등 복잡한 상호작용 흐름을 표현하는 데 적합하다. - 여러 오버레이를 설정하는 방식도 단일 오버레이와 동일해 추가 학습 부담이 적다. ## 오버레이 내부 상호작용 - 오버레이 위의 요소에도 상호작용을 연결할 수 있다. - 프레임을 교체하는 ‘Swap’ 동작을 사용하면 전체 화면을 전환하지 않고 오버레이 내부 상태만 바꿀 수 있다. - 이를 활용해 버튼 호버, 선택 상태, 단계별 콘텐츠 변화 같은 인터랙션을 구현할 수 있다. - Swap은 오버레이를 자동으로 닫지 않으므로, 오버레이를 유지한 채 내용을 갱신하는 흐름에 유용하다. ## 연결 방식과 단축키 - 오버레이 연결을 드래그하는 동안 캔버스에서 바로 Back 또는 Close를 선택할 수 있다. - 레이어 패널에서 별도로 옵션을 찾지 않아도 되므로 연결 작업이 간결해졌다. - 목적지 프레임 위에서 Option 키를 누르면 Swap 연결을 빠르게 선택할 수 있다. - Swap 링크를 활용한 Back 동작은 Swap 연결을 건너뛰고, 마지막으로 Navigate를 사용했던 프레임으로 돌아가도록 구성할 수 있다. ## 기존 프로토타이핑 기능과의 결합 - Overlays는 기존의 인터랙션, 화면 전환, 전환 효과, 디바이스 프레임, 고정 객체, 고급 스크롤 기능과 함께 사용할 수 있다. - 단순히 화면 간 이동만 보여주는 것이 아니라 실제 제품의 메뉴, 팝업, 확인창, 상태 변화까지 하나의 프로토타입에서 재현할 수 있다. - 사용자 테스트나 이해관계자 검토에서 실제 사용 흐름에 가까운 경험을 제공한다. 실무에서는 모달·드롭다운·툴팁처럼 화면 위에 나타나는 요소를 별도 페이지로 복제하기보다 Overlays로 구성하는 것이 효율적이다. 오버레이 내부 상태 변화에는 Swap을 사용하고, 사용자가 흐름을 되돌아가야 할 때는 의도에 맞게 Back 또는 Close를 구분해 설정하는 것이 좋다.

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

사용자 인터페이스Figma프로토타이핑interaction-design+2

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

Figma에서 페이지를

Figma의 Pages는 하나의 파일 안에서 작업을 목적별로 나누어 정리하는 유연한 구조다. 글은 플랫폼, 기능, 디자인 단계, 원자적 디자인 방법론에 따라 Pages를 구성하는 네 가지 방식을 소개하며, 팀 규모와 프로젝트 특성에 맞는 체계를 선택하라고 제안한다. 적절히 나누면 협업, 프로토타이핑, 검색, 개발자 전달이 쉬워진다. ## Pages를 활용한 파일 구조화 - Figma 파일의 왼쪽 탭에 여러 Pages를 만들어 디자인을 분류할 수 있다. - 조직 방식에는 정답이 없으며 회사, 팀, 개인의 작업 방식에 따라 달라진다. - 디자인 파일을 무작정 한 곳에 쌓기보다 작업 목적에 맞게 구분하면 정리보다 디자인 자체에 집중할 수 있다. ## 플랫폼 또는 화면 크기별 구성 - Android, iOS, 데스크톱처럼 여러 플랫폼을 지원하는 제품에 적합하다. - 플랫폼별로 Page를 나누면 각 환경의 프레임 프리셋과 제약 조건을 적용하기 쉽다. - 각 Page에 독립적인 프로토타입을 구성할 수 있어 플랫폼별 사용자 테스트가 간편하다. - 반응형 디자인을 플랫폼별로 비교하고 관리하기에도 유리하다. ## 앱 기능별 구성 - 여러 디자이너가 다양한 기능을 동시에 개발하는 대규모 앱에 적합하다. - 프로필, 홈 화면 등 제품의 주요 기능을 각각 별도의 Page로 분리한다. - 담당 디자이너는 특정 기능에 집중하면서도 다른 Page를 참고해 전체 제품과의 일관성을 유지할 수 있다. - 기능별로 별도의 프로토타입을 만들어 특정 사용자 흐름만 독립적으로 테스트할 수 있다. ## 디자인 프로세스 단계별 구성 - 아이디어부터 최종 결과물까지 작업 진행 상태를 명확히 보여줄 수 있다. - 예를 들어 다음과 같이 Page를 구성할 수 있다. - 썸네일 → 와이어프레임 → 디자인 → 아카이브 - 문서·리서치 → 작업 중인 시안 → 리뷰 준비 - 사이트맵 → 와이어프레임 → 목업 → QA → 마케팅용 스크린샷 - `Done` Page에 완료된 디자인을 모으면 개발자는 실제로 구현해야 할 결과물을 쉽게 확인할 수 있다. - 초기 아이디어와 브레인스토밍을 별도 Page에 두면 완성도 높은 화면이 작업 중인 시안에 묻히지 않는다. - 팀이 복잡한 체계를 원하지 않는다면 단순히 “진행 중”과 “완료” 정도로 나누는 방식도 가능하다. ## Atomic Design 방법론에 따른 구성 - 디자인 시스템을 원자적 디자인 방식으로 운영할 때 적합하다. - 구성 요소의 계층에 따라 Page를 분리한다. - Atoms: 타이포그래피, 아이콘 등 기본 요소 - Molecules: 버튼 등 조합된 컴포넌트 - Organisms: 전체 페이지처럼 복잡한 구성 - Team Library에서 Page 이름을 기준으로 컴포넌트를 찾기 쉬워진다. - 레이어 이름에 컴포넌트 유형을 반복해서 넣지 않아도 된다. - 예: `button-selected`, `button-hovered` 대신 `selected`, `hovered`처럼 상태만 이름에 표시 - 결과적으로 레이어 패널이 단순해지고 컴포넌트 검색과 관리가 쉬워진다. 프로젝트의 핵심 기준을 먼저 정한 뒤 Pages를 구성하는 것이 좋다. 여러 플랫폼을 지원하면 플랫폼별로, 협업 규모가 크면 기능별로, 개발 전달이 중요하면 프로세스 단계별로 나누고, 디자인 시스템 중심이라면 Atomic Design 구조를 적용하면 된다.

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

사용자 인터페이스Figma디자인 시스템프로토타이핑+2

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

스마트 셀렉션 소개

Figma의 Smart Selection은 여러 객체의 간격, 위치, 크기를 한 번에 조정해 반복적인 디자인 작업을 줄이는 기능이다. 세 개 이상의 객체가 일정한 간격으로 선택되면 캔버스 위에서 직접 조작할 수 있으며, Tidy Up을 사용하면 흐트러진 객체도 균일하게 정렬된다. 이를 통해 디자이너는 수작업보다 탐색과 창의적인 결정에 더 집중할 수 있다. ## 반복적인 디자인 작업의 자동화 - 리스트나 아이콘 그룹의 간격을 바꾸려면 기존에는 각 객체를 개별적으로 이동하고 크기를 조정해야 했다. - 예를 들어 리스트 항목의 높이를 변경할 때 여러 번의 크기 조정과 이동 작업이 필요했다. - Smart Selection은 컴퓨터의 반복·재사용 능력을 디자인 작업에 적용해 이런 “잡일”을 줄이는 것을 목표로 한다. ## 캔버스에서 작동하는 Smart Selection - 세 개 이상의 객체 또는 그룹을 선택하고, 객체 사이의 간격이 일정하면 자동으로 활성화된다. - 별도의 도구나 새로운 객체 유형을 배울 필요 없이 기존 캔버스 조작 방식 안에서 사용할 수 있다. - 선택한 객체 전체의 다음 속성을 한 번에 조정할 수 있다. - 객체 사이의 간격 - 객체의 위치와 배열 - 선택한 객체의 크기 ## 핸들을 이용한 직접 조작 - 객체 사이에 표시되는 분홍색 핸들을 드래그하면 전체 객체의 간격을 동시에 조정할 수 있다. - 분홍색 링을 드래그하면 객체의 순서와 배치를 빠르게 재배열할 수 있다. - 하나 이상의 객체에 있는 분홍색 링을 클릭하면 해당 객체를 대상으로 지정할 수 있다. - 지정한 객체의 가장자리를 드래그하면 여러 객체의 크기를 함께 변경할 수 있다. ## Tidy Up으로 균일하게 정렬하기 - Tidy Up은 정렬되지 않은 객체들을 서로 가깝게 배치하면서 간격을 동일하게 맞춰준다. - 기존의 단순한 “분배” 기능보다 객체 간 간격을 항상 균일하게 유지하는 점이 특징이다. - 표, 툴바, 화면 플로우처럼 여러 요소를 일정한 간격으로 배치해야 하는 작업에 유용하다. - 예를 들어 20개의 화면을 직접 정렬하면 19개의 간격을 일일이 확인해야 하지만, Tidy Up을 사용하면 한 번의 실행으로 정리할 수 있다. - 단축키: - macOS: `⌥⌘T` - 기타 플랫폼: `Ctrl+Alt+T` ## 향후 확장 - Figma는 Smart Selection에 2차원 그리드 지원을 추가할 계획이라고 밝혔다. - 사용자의 실제 활용 사례와 피드백을 바탕으로 기능을 발전시키려 했다. Smart Selection은 여러 객체를 반복적으로 맞추고 이동해야 하는 디자인 작업에서 특히 효과적이다. 먼저 객체를 대략 배치한 뒤 Tidy Up으로 간격을 정리하고, Smart Selection 핸들로 세부 조정을 진행하면 작업 시간을 줄일 수 있다.

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

사용자 인터페이스Figmadesign-toolsinteraction-design+2

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

피그마 기능 하이라이트

Figma의 컴포넌트 오버라이드는 디자인 시스템의 일관성을 유지하면서도 각 인스턴스를 상황에 맞게 수정할 수 있게 해준다. 인스턴스를 분리하지 않고 색상, 텍스트, 스타일 등을 변경할 수 있으며, 원본 컴포넌트가 업데이트되면 수정되지 않은 속성은 계속 상속된다. 따라서 반복되는 UI를 효율적으로 관리하면서도 다양한 상태와 콘텐츠를 표현할 수 있다. ## 디자인 시스템에서 유연성과 일관성의 균형 - 리스트, 아바타, 상태 표시줄처럼 여러 곳에서 반복되는 기본 컴포넌트는 일관된 디자인을 유지해야 한다. - 동시에 리스트의 텍스트, 상태 표시줄의 색상처럼 사용 맥락에 따라 달라지는 부분도 필요하다. - 모든 변형을 처음부터 새로 만들면 작업량이 늘고 디자인 시스템과의 연결도 끊어진다. - 오버라이드는 원본 컴포넌트의 구조는 유지하면서 인스턴스별 차이만 적용하는 방식이다. ## 컴포넌트 오버라이드의 작동 방식 - 인스턴스를 원본 컴포넌트에서 분리하지 않고 속성을 재정의할 수 있다. - 원본 컴포넌트를 수정하면 각 인스턴스는 오버라이드되지 않은 변경 사항을 계속 상속한다. - 인스턴스별로 변경 가능한 속성에는 다음이 포함된다. - 색상과 채우기 - 텍스트와 텍스트 정렬 - 글꼴 및 스타일 - 선의 추가, 삭제, 수정 - 불투명도와 블렌드 모드 - 그림자와 블러 같은 효과 - 요소의 표시·숨김 상태 ## 실제 활용 사례 - **정보 목록 만들기** - 하나의 셀 컴포넌트를 만든 뒤 각 인스턴스의 텍스트를 오버라이드한다. - 할 일 목록이나 대시보드 테이블처럼 서로 다른 데이터를 일관된 형태로 표현할 수 있다. - **버튼 상태 표현하기** - 하나의 버튼 컴포넌트를 기반으로 기본, 호버, 클릭, 비활성 상태를 만든다. - 배경색, 텍스트 불투명도, 그림자 등을 상태별로 변경할 수 있다. - **주소록 아바타 구성하기** - 원형 컴포넌트의 채우기를 각 인물의 사진으로 교체한다. - 아바타의 공통 형태는 유지하면서 이미지 콘텐츠만 다르게 적용할 수 있다. ## 오버라이드를 활용한 케일리도스코프 - 하나의 일러스트를 프레임에 그리고 컴포넌트로 변환한다. - 인스턴스를 복제해 오른쪽에 배치한 뒤 수평 반전한다. - 다시 복제해 아래쪽에 배치하고 수직 반전한다. - 남은 공간에 인스턴스를 하나 더 배치해 2×2 형태를 만든다. - 왼쪽 위의 원본 컴포넌트 안에서 그림을 수정하면 연결된 인스턴스들이 함께 바뀌며 대칭 패턴이 만들어진다. 컴포넌트 오버라이드는 공통 구조와 스타일은 원본에 맡기고, 콘텐츠와 상태처럼 달라져야 하는 부분만 인스턴스에서 수정하는 데 적합하다. 반복 UI를 컴포넌트로 만든 뒤 필요한 속성만 오버라이드하면, 유지보수성과 디자인의 다양성을 함께 확보할 수 있다.

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

사용자 인터페이스Figma디자인 시스템프로토타이핑+1

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

#FigmaTip 모음

이 글은 Figma 커뮤니티에서 공유된 실용적인 작업 팁을 모아, 반복적인 디자인 작업을 키보드 단축키와 컴포넌트 기능으로 더 빠르게 처리하는 방법을 소개한다. 여러 프레임 정렬, 좌우 반전 컴포넌트 제작, 오브젝트 이동 간격 조정 등을 활용하면 레이아웃 편집과 컴포넌트 관리의 효율을 높일 수 있다는 것이 핵심이다. ### 여러 프레임을 빠르게 정렬하기 - 여러 오브젝트나 프레임을 선택한 뒤 다음 단축키를 사용할 수 있다. - `Cmd + \``: 세로 방향으로 간격을 정리하는 **Pack Vertical** - `Cmd + Shift + \``: 가로 방향으로 간격을 정리하는 **Pack Horizontal** - 정렬 관련 단축키와 함께 사용하면 여러 요소의 배치 방향과 간격을 한 번에 조정할 수 있다. - 반복적으로 카드, 화면, 섹션 등을 배열할 때 마우스로 직접 이동하는 것보다 효율적이다. ### 변경 사항을 반영하는 좌우 반전 컴포넌트 만들기 - 기존 컴포넌트를 `Option` 키를 누른 채 드래그해 새로운 빈 컴포넌트 안에 배치한다. - 새 인스턴스를 선택하고 `Shift + H`를 눌러 좌우로 뒤집는다. - 이렇게 만든 반전 컴포넌트는 원본과 연결되어 있으므로 원본 컴포넌트의 변경 사항이 반영된다. - 좌우 대칭이 필요한 아이콘, 캐릭터, 방향성 UI 요소를 별도로 다시 만들지 않고 관리할 수 있다. ### “Nudge Amount”로 이동 간격 조정하기 - 방향키로 오브젝트를 이동할 때 적용되는 기본 이동 간격을 **Nudge Amount** 설정으로 바꿀 수 있다. - 작은 간격 조정에는 세밀한 값을, 큰 레이아웃 이동에는 더 큰 값을 설정해 작업 목적에 맞게 사용할 수 있다. - 반복적으로 일정한 간격을 맞추거나 픽셀 단위로 요소를 배치할 때 유용하다. - 정렬 및 간격 조정 기능과 함께 사용하면 디자인 시스템의 간격 규칙을 유지하기 쉽다. 실무에서는 자주 사용하는 정렬 단축키와 Nudge Amount 설정을 자신의 작업 방식에 맞게 지정하고, 좌우 변형이 필요한 요소는 반전 컴포넌트로 관리하는 것이 좋다.

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

사용자 인터페이스Figma디자인 시스템keyboard-shortcuts+1

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

한 디자이너가 더 윤리

Cat Noone은 접근성을 제품 개발의 마지막 점검이 아니라 초기 설계 원칙으로 삼아야 한다고 주장한다. 그녀는 의료 정보 공유 앱 Iris Health, 색각 이상 접근성 도구 Stark, 자폐 아동용 의사소통 앱 Lyra를 통해 소외되기 쉬운 사용자도 제품의 기본 사용자로 고려해야 한다는 점을 보여준다. 접근성을 높이는 일은 디자인을 제한하는 것이 아니라 더 많은 사람에게 제품을 열어 주는 방법이다. ## 접근성을 처음부터 고려해야 하는 이유 - 장애가 있는 사용자 중 상당수가 온라인 서비스를 이용하므로, 접근성을 무시하면 잠재 사용자층의 약 10%를 놓칠 수 있다. - 접근성을 “UI를 나쁘게 만드는 제약”으로 보는 인식을 비판한다. - 제품 기획 단계부터 신체적·인지적·감각적 특성이 다른 사용자들을 조사하고, 각 집단에 맞게 UI와 기능을 조정해야 한다. - “전형적인 사용자”라는 가정 자체가 기술 업계의 사각지대를 만들 수 있다. ## Iris Health: 위급 상황에서 의료 정보를 전달하는 서비스 - 해외 체류 중 사고가 발생하면 가족이나 의료진이 사용자의 알레르기, 복용 약, 혈액형, 당뇨 여부 등을 알기 어렵다는 문제에서 출발했다. - 사용자가 병원에 있는 것으로 감지되면 안부를 확인하고, 10분 안에 응답이 없을 경우 등록된 비상 연락처에 문자 메시지를 보낸다. - iPhone 잠금 화면에 의료 카드가 표시되어 의료진이 이름, 약물, 알레르기, 장기 기증 여부 등의 정보를 빠르게 확인할 수 있다. - 만성질환자뿐 아니라 해외 거주자, 응급 상황에서 의사 표현이 어려운 사람에게도 유용하도록 설계됐다. - **교훈:** 사용자의 상황을 여러 각도에서 상상하고, 다양한 사용자 집단이 실제로 서비스를 어떻게 사용할지 충분히 검토해야 한다. ## Stark: 색각 이상과 대비를 확인하는 디자인 도구 - 의료 앱을 만들면서 접근성을 지원하는 디자인 도구가 부족하다는 문제를 발견해 개발했다. - Sketch에서 레이어를 선택해 다양한 색각 이상 유형을 시뮬레이션할 수 있다. - 텍스트와 배경색의 대비 비율을 확인해 색상 조합이 읽기 어려운지 판단할 수 있다. - Twitter, ESPN, Palantir, Dropbox, Microsoft 등의 팀에서도 사용됐다. - 접근성 검사를 별도 업무로 미루지 말고 디자인 워크플로에 기본 기능처럼 포함해야 한다. - Stark 외에도 Contrast, W3C 접근성 체크리스트 등을 활용해 표준 준수 여부와 개선점을 점검할 수 있다. - 시각과 촉각을 함께 고려한 Braille Neue 같은 서체도 접근성을 확장하는 사례로 소개된다. ## Lyra: 자폐 아동을 위한 기호-음성 의사소통 앱 - 대학 시절 다양한 특수 필요를 가진 아동들과 일한 경험을 바탕으로 시작됐다. - 비언어적 자폐 아동이 기호를 선택해 음성으로 의사를 표현할 수 있도록 돕는다. - 1985년부터 사용된 라미네이트 카드와 벨크로 방식의 의사소통 도구를 디지털 환경에 맞게 현대화하려는 프로젝트다. - 기존 방식은 아동이 디지털 세계에 참여하는 데 한계가 있으므로, 더 편리하고 자연스러운 의사소통 수단을 제공하려 한다. - 개발팀은 당시 베타 버전 출시를 준비하고 있었다. - **교훈:** 접근성 디자인을 제대로 만들려면 관련 사용자와 문제 영역을 스스로 학습해야 하며, Microsoft의 Inclusive Design 가이드 같은 자료부터 참고할 수 있다. 제품을 만들 때 접근성을 출시 직전의 검수 항목으로 두기보다, 사용자 조사·정보 구조·시각 디자인·개발 도구에 기본값으로 포함하는 것이 좋다. 특히 실제 장애 사용자와 함께 테스트하고, 색상 대비·키보드 사용·의사소통 방식 등 구체적인 사용 조건을 반복적으로 검증해야 한다.

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

사용자 인터페이스접근성sketchinclusive-design+3

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

#FigmaTip 모

이 글은 Figma 커뮤니티에서 공유된 작지만 유용한 작업 팁을 모은 8번째 #FigmaTip 모음이다. 프로젝트를 시각적으로 정리하는 방법과 레이어·객체를 키보드로 빠르게 탐색하는 단축키를 소개해, Figma 작업 흐름을 더 빠르고 직관적으로 만드는 데 초점을 둔다. ## 프로젝트 썸네일을 직접 디자인하기 - 프로젝트의 첫 페이지에 프레임 하나만 배치한다. - 프레임 크기를 `620×320`으로 설정한다. - 큰 텍스트와 시각적으로 눈에 띄는 디자인을 넣어 프로젝트 대표 이미지를 만든다. - 캔버스 색상과 프레임 색상을 동일하게 설정하면, 프로젝트 목록에서 하나의 완성된 썸네일처럼 보인다. - 프로젝트가 많을 때 목록에서 작업물을 빠르게 식별할 수 있고, 단순한 기본 썸네일보다 개성을 부여할 수 있다. ## 레이어 패널을 빠르게 탐색하기 - 글에는 레이어 패널을 확대·탐색하는 단축키 팁을 소개하는 섹션이 포함되어 있다. - 다만 제공된 본문에서는 해당 Twitter 게시물의 내용이 로드되지 않아 구체적인 단축키 목록은 확인되지 않는다. - 이 팁의 목적은 마우스로 레이어를 일일이 찾기보다 키보드 중심으로 레이어 구조를 빠르게 이동하는 데 있다. ## 선택과 레이어 순서를 단축키로 제어하기 - `Tab` / `Shift + Tab` - 같은 계층에 있는 형제 레이어를 앞뒤로 선택한다. - `Return` / `Shift + Return` - 선택한 그룹이나 프레임 안으로 들어가거나 빠져나온다. - `Cmd + ]` / `Cmd + [` - 선택한 레이어를 한 단계 위·아래로 이동한다. - `Option + Cmd + ]` / `Option + Cmd + [` - 선택한 레이어를 레이어 목록의 맨 위 또는 맨 아래로 이동한다. - 이러한 단축키를 익히면 레이어 패널을 계속 클릭하지 않고도 객체 선택, 그룹 탐색, 앞뒤 순서 변경을 빠르게 처리할 수 있다. Figma를 자주 사용한다면 먼저 레이어 선택과 순서 변경 단축키를 익히고, 프로젝트마다 대표 썸네일용 프레임을 만들어 보길 권한다. 작은 시각적 정리와 키보드 중심의 조작만으로도 파일 탐색성과 편집 속도를 함께 개선할 수 있다.

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

사용자 인터페이스Figma사용자 경험keyboard-shortcuts

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

Virta Health가 제2형 당

Virta Health는 제2형 당뇨병을 약물이나 수술 없이 치료하는 과정에서 디자인을 핵심 역량으로 삼고, Figma를 협업의 중심 도구로 활용했다. Figma의 실시간 협업, 컴포넌트, 공유 기능은 의료 서비스의 일관성과 안전성을 높였으며, 디자이너뿐 아니라 의사·마케터·개발자도 제품 제작에 참여하게 했다. 그 결과 의사결정과 피드백이 빨라지고, 디자인 및 콘텐츠 제작 주기도 단축됐다. ## 의료 서비스에서 디자인이 중요한 이유 - 건강관리 제품은 사용자의 행동 변화와 치료 결과에 직접 영향을 미치므로 일반적인 제품보다 설계의 책임이 크다. - Virta Health는 제2형 당뇨병과 만성 대사질환을 약물·수술 없이 치료하는 서비스를 제공한다. - 회사는 2025년까지 1억 명의 당뇨병을 역전시키겠다는 목표를 세웠다. - 소개된 성과에 따르면: - 1년 후 인슐린 사용자의 94%가 사용량을 줄이거나 중단했다. - 1년 후 환자의 60%가 제2형 당뇨병을 역전했다. - Virta의 UX 책임자 David Hatch는 디자인의 목표를 “다양한 사람들이 건강한 행동 변화를 이룰 수 있도록 돕는 것”이라고 설명한다. ## 실시간 협업으로 형성된 디자인 문화 - Virta의 디자인팀은 디자이너뿐 아니라 마케터, 개발자, 의사 등 전사 구성원과 연결되는 협업 허브 역할을 한다. - 팀은 초기부터 웹 기반 협업 도구인 Figma를 사용해 회사의 디자인 작업을 구축했다. - 모든 파일이 최신 상태로 유지되고 한곳에 모여 있어 새로 합류한 디자이너도 첫날부터 작업에 참여할 수 있었다. - 브라우저에서 어디서나 파일에 접근하고 댓글을 남길 수 있어 데스크톱 환경에 종속되지 않았다. - Slack에 Figma 링크를 공유하면 팀원들이 즉시 캔버스에 들어와 복제·수정·개선할 수 있었다. - 이러한 실시간 협업은 기존 도구보다 빠른 피드백과 높은 투명성을 제공했고, Virta의 디자인 문화를 발전시켰다. ## 일관된 디자인과 컴포넌트 시스템 - 의료 앱에서는 환자가 문제를 겪을 때 의사와 빠르고 예측 가능하게 소통해야 하므로, 사용자 흐름의 일관성이 특히 중요하다. - 한 화면에서 익숙한 방식이 다른 화면에서는 다르게 작동하면 사용성이 떨어지고 혼란이 생길 수 있다. - Virta는 반복적으로 사용하는 UI 요소를 Figma 컴포넌트로 만들어 디자인을 쉽게 복제했다. - 컴포넌트 하나에 데스크톱과 모바일 대응 방식을 함께 설계해 반응형 UI를 구축했다. - 시각적 컴포넌트 라이브러리는 다음과 같은 계층 구조로 발전했다. - 기본이 되는 구조적 컴포넌트 - 기본 컴포넌트를 조합한 중첩 컴포넌트 - 여러 화면에서 재사용되는 UI 패턴 - 컴포넌트를 사용하면 새로운 화면을 만들 때도 기존 패턴이 자동으로 유지되어, 디자이너가 실수로 일관성을 깨뜨릴 가능성이 줄어든다. - Virta는 이러한 구조적 컴포넌트 중심의 원칙을 코드에도 적용해 디자인과 구현 단계의 일관성을 높이려 했다. ## 비디자이너의 참여 확대 - Figma 파일은 Slack을 통해 공유되며, 마케터는 문구를 수정하고 의사는 프로토타입에 피드백을 남기며 개발자는 구현에 필요한 정보를 확인한다. - VirtaHealth.com 재출시 프로젝트는 아이디어 구상부터 개발자 전달까지 전체 과정이 Figma 안에서 진행됐다. - 제품팀, 마케팅팀, 경영진, 개발자가 같은 화면을 보면서 프로젝트 진행 상황을 실시간으로 확인할 수 있었다. - 마케팅팀은 직접 카피를 수정하고, 디자이너와 함께 결과물을 빠르게 조정할 수 있었다. - 첫 페이지를 한 달 만에 공개할 수 있었던 배경에는 이러한 투명한 협업 방식이 있었다. - Figma를 사용하면서 말로 설명하기보다 실제 시안을 보여주며 논의하는 비중이 늘었고, 최신 정보에 기반한 피드백과 반복 작업이 가능해졌다. ## 템플릿을 통한 셀프 서비스 모델 - Virta의 UX 디자이너들은 마케팅팀이 직접 사용할 수 있는 템플릿 파일을 제공했다. - 템플릿 대상에는 다음이 포함됐다. - 소셜 미디어 이미지 - 랜딩 페이지 - 마케팅 홍보물 - 마케터는 템플릿을 복제해 필요한 콘텐츠를 직접 만들고, 추가적인 일러스트나 수정이 필요할 때 디자이너를 댓글로 호출했다. - 이 방식은 디자인팀과 마케팅팀 사이의 반복적인 요청·수정 사이클을 최소 두 번 이상 줄였다. - 결과적으로 작업 기간이 수주 단축됐고, 비디자이너도 자신의 콘텐츠 제작 과정에 직접 참여할 수 있었다. Virta Health의 사례는 의료 서비스처럼 오류 비용이 큰 분야에서 디자인 시스템과 협업 도구가 단순한 생산성 개선을 넘어 서비스의 일관성·접근성·안전성에 기여할 수 있음을 보여준다. 특히 공유 가능한 컴포넌트 라이브러리와 역할별 템플릿을 구축하면 디자인팀의 병목을 줄이면서도 전체 조직의 제작 속도를 높일 수 있다.

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

사용자 인터페이스Figma디자인 시스템프로토타이핑+2

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