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

무료 온라인 Skillshare 클래스로

디자인 포트폴리오는 첫 제품 디자이너 직무를 얻기 위해 자신의 역량과 가능성을 보여주는 가장 중요한 수단이다. 좋은 포트폴리오는 완성된 결과물만 나열하지 않고, 프로젝트의 과정·배운 점·성과와 지원자의 성장 가능성까지 전달해야 한다. 글은 Figma와 Skillshare의 무료 강의를 통해 포트폴리오 제작부터 면접 발표, 피드백과 개선까지 익힐 수 있다고 소개한다. ## 포트폴리오가 중요한 이유 - 제품 디자이너 채용에서는 다양한 역할과 전문 분야를 이해하고 자신의 강점을 표현해야 한다. - 제품 디자인은 다음과 같은 영역이 결합된 분야다. - 사용자 리서치 - UX 설계 - 프로토타이핑 - 사용자 테스트 - 비주얼 디자인 - 소규모 기업이나 스타트업에서는 디자이너가 여러 역할을 동시에 수행할 수 있다. - 대기업에서는 리서치, UX, UI 등 전문 역할이 분리될 수 있으므로 자신의 관심 분야와 강점을 파악하는 것이 중요하다. ## 완성도보다 과정과 성장 가능성 강조 - 신입 디자이너는 경험 부족이나 자신감 결여 때문에 스스로를 낮게 평가하기 쉽다. - 하지만 변화가 빠른 디자인 업계에서는 새로운 도구와 방법을 배우고 적응하는 능력도 중요한 역량이다. - 포트폴리오에는 단순히 polished된 최종 결과물만 보여주기보다 다음 내용을 포함해야 한다. - 문제를 어떻게 정의했는가 - 어떤 조사와 의사결정을 거쳤는가 - 어떤 시도와 반복을 했는가 - 무엇을 배웠는가 - 프로젝트가 어떤 결과를 냈는가 - 이를 통해 현재의 기술뿐 아니라 배우고 성장하려는 태도까지 전달할 수 있다. ## Skillshare 강의에서 다루는 내용 - 포트폴리오에 포함해야 할 정보와 프로젝트를 선정하는 방법 - 지원자의 역량을 효과적으로 보여주는 시각적 구성 방법 - 프로젝트를 사례 연구(case study) 형식으로 정리하고 발표하는 방법 - 온라인 활동부터 실제 면접까지 지원 과정 전체에서 일관된 이야기를 전달하는 방법 - Figma를 활용해 포트폴리오를 반복 수정하고 동료 또는 멘토와 협업하는 방법 - Figma 프로젝트 링크를 공유해 커뮤니티에서 실제 피드백을 받는 방법 ## 포트폴리오를 개선하는 협업 방식 - Figma에서는 멘토를 프로젝트에 초대해 포트폴리오 구성과 디자인에 대한 피드백을 받을 수 있다. - 다른 수강생들과 작업물을 공유하면 실제 지원자 관점에서 개선점을 확인할 수 있다. - 피드백을 반영해 포트폴리오를 반복적으로 수정하는 과정 자체가 디자인 프로세스의 좋은 사례가 된다. ## 실용적인 적용 방법 포트폴리오를 만들 때는 최종 화면보다 문제 해결 과정과 의사결정의 근거를 중심에 두는 것이 좋다. 각 프로젝트를 문제, 역할, 과정, 결과, 배운 점의 순서로 정리하고, Figma에서 멘토나 동료의 피드백을 받아 여러 차례 개선하면 신입 디자이너로서의 실력과 성장 가능성을 더 설득력 있게 보여줄 수 있다.

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

프로토타이핑Figma사용자 경험프로덕트 디자인+4

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

피그마 기능 하

Figma의 Observation Mode는 다른 사용자의 화면을 실시간으로 따라 보며 작업 과정을 관찰하는 기능이다. 파일을 공유한 상태라면 보기 전용 권한을 가진 사람도 상대방의 아바타를 클릭해 화면과 커서 움직임을 그대로 확인할 수 있다. 이를 통해 디자인 리뷰, 고객 피드백, 사용자 테스트를 별도 화면 공유 도구 없이 진행할 수 있다는 것이 글의 결론이다. ## Observation Mode의 작동 방식 - 같은 Figma 파일을 여러 사람이 보고 있을 때 우측 상단에 참여자의 얼굴 아이콘이 표시된다. - 특정 사용자의 아바타를 클릭하면 그 사용자가 보고 있는 화면으로 자신의 화면이 전환된다. - 상대방이: - 프레임의 텍스트를 수정하거나 - 특정 오브젝트를 클릭하거나 - 화면을 확대·이동하는 과정까지 실시간으로 확인할 수 있다. - 일반적인 화면 공유처럼 상대방의 작업 흐름을 그대로 관찰하는 방식이다. ## 공유 권한과 주의점 - 해당 파일이나 프로젝트의 공유가 활성화되어 있어야 사용할 수 있다. - 편집 권한이 없어도, 즉 보기 전용 사용자도 Observation Mode를 사용할 수 있다. - 따라서 디자인 URL을 공유할 때는 다른 사람이 자신의 화면을 관찰할 수 있다는 점을 고려해야 한다. - 기능의 접근성이 높은 만큼 민감한 작업이나 공개를 원하지 않는 화면에서는 공유 설정을 주의해야 한다. ## 디자인 리뷰와 고객 피드백 - 디자이너가 직접 화면을 설명하거나 별도의 화면 공유를 설정하지 않아도 리뷰어가 작업 과정을 따라갈 수 있다. - 고객이 디자인을 실제로 어떻게 탐색하고 어떤 부분에서 멈추는지 확인할 수 있다. - 단순히 완성된 결과물에 대한 의견을 듣는 것보다, 사용자가 화면을 이해하고 이동하는 과정을 관찰할 수 있다는 장점이 있다. - 디자인 크리틱이나 클라이언트 피드백 세션에서 특히 유용하다. ## 실시간 사용자 테스트 - 사용자가 Figma 프로토타입을 탐색하는 동안 아바타를 클릭해 행동을 실시간으로 관찰할 수 있다. - 테스트가 끝난 뒤 기억에 의존해 의견을 수집하는 대신, 사용자가: - 어느 화면에서 망설이는지 - 어떤 요소를 클릭하려 하는지 - 어디에서 이동에 어려움을 겪는지 를 직접 확인할 수 있다. - 이를 통해 사용자의 문제 지점과 주저하는 순간을 더 정확히 파악할 수 있다. - 글에서는 사용자들도 Observation Mode를 사용자 테스트에 활용할 수 있는지에 관심을 보였다고 소개한다. ## 활용 방식에 대한 사용자 의견 - Figma는 기능 사용법만 설명하기보다 사용자들의 트위터 게시물을 통해 다양한 활용 사례를 소개했다. - 사용자들에게 다음과 같은 경험과 팁을 공유해 달라고 요청했다. - 가장 좋아하는 활용 사례 - 함께 사용하는 대상 - 처음 사용하는 사람을 위한 팁 - 이는 Observation Mode가 단순한 협업 기능을 넘어 디자인 리뷰, 고객 인터뷰, 사용자 조사 등 여러 상황에 적용될 수 있음을 보여준다. 실제로 활용할 때는 사용자 테스트나 리뷰 전에 파일 공유 범위를 확인하고, 관찰 대상에게 실시간 관찰 사실을 알리는 것이 좋다. 특히 프로토타입 테스트에서는 사용자의 클릭 위치와 망설임을 별도로 기록하면 디자인 개선에 더 직접적으로 활용할 수 있다.

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

프로토타이핑Figmareal-time-collaborationuser-testing+2

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

Kiwi.com이 Figma에서 프로젝트

Kiwi.com은 여러 도구를 조합한 Sketch 중심 workflow에서 발생하는 동기화 문제를 해결하기 위해 모바일 디자인 시스템을 Figma로 옮기기 시작했다. 소규모 디자인팀과 약 20명의 협업자가 함께 작업하는 환경에서는 디자인, 프로토타입, 개발 전달, 버전 관리가 하나의 협업 공간에서 연결되는 것이 중요하다고 판단했다. 이 글은 Figma 도입 배경과 디자인 라이브러리·컴포넌트·프로젝트 구조를 정리하는 방식을 소개한다. ## Kiwi.com의 디자인 환경과 과제 - 모바일 디자인팀은 디자이너 2명으로 구성되어 있지만, 약 20명이 다양한 방식으로 디자인에 참여한다. - 디자인 시안에 댓글을 남기는 사람 - 카피를 수정하는 사람 - 여러 플랫폼을 아우르는 기능을 설계하는 사람 - 기존 프런트엔드 디자인과 디자인 시스템인 **Orbit**는 Sketch를 기반으로 운영되고 있었다. - 그러나 Orbit의 모바일 버전은 시각적으로 차이가 커서, 별도의 모바일 디자인 시스템을 Figma에서 시험하게 되었다. ## Sketch 기반 도구 조합의 동기화 문제 - 기존 workflow에서는 목적별로 여러 도구를 사용했다. - **Sketch**: 디자인 제작 - **Zeplin**: 개발자 핸드오프 - **Abstract**: 버전 관리 - **Marvel**: 정적 프로토타입 제작 - **Dropbox Paper**: 디자인 이미지 공유 - 도구가 분리되어 있어 최신 상태가 서로 달라질 수 있었다. - 프로토타입이 최신 테스트 버전을 반영하지 못함 - 작업자가 Abstract에 커밋하는 것을 잊음 - 승인된 최종 시안이 Zeplin에 업데이트되지 않음 - 문서에 첨부된 PNG가 몇 주 전 버전으로 남아 있음 - 각 도구는 독립적으로 작동하기 때문에, 팀이 수동으로 상태를 맞추지 않으면 디자인 산출물이 쉽게 불일치한다. ## Figma를 선택한 이유 - Figma 도입의 핵심 기대 효과는 디자인 파일, 협업, 프로토타입, 버전 이력을 한 환경에서 연결하는 것이었다. - 여러 도구 사이에서 최신 파일을 확인하고 전달하는 관리 비용을 줄일 수 있다. - 다수의 참여자가 디자인 과정에 관여하는 Kiwi.com의 환경에서는 중앙화된 협업 방식이 특히 유용하다. - 저자는 초기에는 브라우저 기반 도구인 Figma의 가치에 회의적이었지만, 실제 팀의 협업 문제를 경험하면서 Figma 도입의 필요성을 재평가하게 되었다. ## 글에서 다루는 디자인 시스템 운영 범위 - 글은 단순한 Figma 사용 후기가 아니라 다음 운영 주제를 함께 다룬다. - 모바일 디자인 시스템을 Figma로 구축한 이유 - Figma 업데이트 이후 달라진 작업 방식 - 디자인 라이브러리 컴포넌트의 설계 원칙 - 컴포넌트와 프로젝트 파일의 구조화 - 버전 이력 관리와 파일 정리 - 특히 여러 사람이 컴포넌트를 재사용하는 환경에서 일관성을 유지하고, 최신 디자인 자산을 쉽게 찾도록 구성하는 방법에 초점을 둔다. 여러 협업자가 디자인에 참여하고 도구별 최신 상태를 수동으로 맞추고 있다면, Figma처럼 디자인·프로토타입·협업을 한 공간에 통합하는 방식을 검토할 만하다. 다만 도구를 바꾸는 것만으로 문제가 해결되지는 않으므로, 컴포넌트 명명 규칙과 파일 구조, 버전 관리 원칙을 함께 정립하는 것이 중요하다.

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

프로토타이핑Figma디자인 시스템sketch+2

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

피그마 3.0 (!)

Figma 3.0은 데스크톱 중심의 파편화된 디자인 작업을 웹 기반 협업 환경으로 통합하려는 업데이트다. 프로토타이핑, 디자인 시스템 관리, 대규모 조직 운영 기능을 강화해 InVision 같은 별도 도구와 반복적인 파일 동기화·내보내기 작업을 줄이는 것이 핵심이다. 디자인과 프로토타입, 댓글, 개발자 전달을 하나의 최신 상태로 연결해 팀 전체의 작업 효율을 높이려 한다. ## 웹 기반 디자인 워크플로 통합 - 데스크톱 기반 작업에서는 다음과 같은 문제가 발생한다. - 어떤 프로토타입에 이해관계자의 댓글이 있는지 확인하기 어렵다. - 스타일 가이드가 최신 상태인지 보장하기 어렵다. - 팀원들이 같은 디자인 버전을 보고 있는지 관리해야 한다. - Figma는 디자인 파일과 프로토타입, 댓글, 공유 기능을 웹에서 연결해 별도 앱 간 전환을 줄이려 한다. - 결과적으로 중복 도구와 구독 비용을 줄이고, 팀의 작업 흐름을 Figma 중심으로 통합하는 것이 목표다. ## 프로토타이핑 기능 강화 Figma 3.0은 디자인 파일에서 바로 동작하는 프로토타입 기능을 강화했다. - **디바이스 프레임** - iPhone, Android, Apple Watch 등 다양한 기기 프레임을 적용할 수 있다. - 디자인이 실제 기기에서 어느 정도 크기로 보이는지 팀원들이 쉽게 이해할 수 있다. - **고정 오브젝트** - 상태 표시줄, 헤더, 푸터, 버튼 등을 화면의 위·아래·측면에 고정할 수 있다. - 제약 조건과 함께 사용해 스크롤 중에도 특정 요소가 유지되도록 만들 수 있다. - 배경 블러와 블렌딩 모드를 적용하면 고정 요소의 시각적 완성도를 높일 수 있다. - **스크롤 가능한 영역** - 프레임 내부의 개별 도형이나 영역에 스크롤 동작을 설정할 수 있다. - 부모 프레임 자체가 스크롤되는 중첩 구조도 지원한다. - 이미지 캐러셀, 세로 목록, 가로·세로 어느 방향으로든 스크롤하는 화면을 구현할 수 있다. - **화면 전환** - dissolve, slide, push 등의 전환 효과를 제공한다. - 네이티브 모바일 앱과 유사한 움직임을 구현해 프로토타입의 완성도를 높인다. ## 디자인과 프로토타입의 실시간 연결 - 디자인의 색상이나 글꼴 크기를 수정하면 프로토타입에도 실시간으로 반영된다. - 디자인 파일과 댓글이 분리되지 않아, 피드백을 확인하기 위해 다른 앱이나 탭으로 이동할 필요가 줄어든다. - 모바일 브라우저에서 프로토타입을 열고 휴대폰을 리모컨처럼 사용해 발표할 수 있다. - 프로토타입이 디자인과 직접 연결되어 있어 화면을 별도로 내보내거나 버전을 동기화하는 관리 작업이 필요 없다. - 다만 Figma는 모든 프로토타이핑 요구를 대체한다고 단정하지 않고, 다른 도구와의 연동을 위해 API 개발도 함께 추진한다. ## Figma Styles와 디자인 시스템 - Figma Styles를 모든 사용자에게 공개했다. - 텍스트와 레이어 속성을 스타일로 정의해 회사 전체에서 일관된 디자인 요소를 관리할 수 있다. - 새로운 Team Library 기능과 결합하면 색상, 글꼴, 효과 등 디자인 시스템의 구성 요소를 팀 단위로 공유하고 유지할 수 있다. - 스타일 기능은 비공개 베타와 사용자 조사를 거쳐 개발되었으며, 여러 팀이 동일한 디자인 기준을 적용하는 것을 목표로 한다. ## Organization 요금제 - 대규모 조직을 위한 새로운 Organization 등급을 미리 공개했다. - 조직 규모가 커질수록 필요한 디자인 관리와 운영 체계를 확장하는 데 초점을 둔다. - Figma는 이를 Styles, Team Library, 개발자 전달, 댓글, 공유 컴포넌트와 함께 기업용 디자인 운영 기반으로 제시한다. ## 실용적인 결론 Figma 3.0은 디자인 파일을 단순히 편집하는 도구에서 프로토타이핑과 디자인 시스템, 협업을 함께 처리하는 플랫폼으로 확장한 업데이트다. 팀이 여러 버전의 파일과 별도 프로토타이핑 도구를 관리하고 있다면, Figma의 실시간 연결·공유·스타일 라이브러리를 활용해 작업 단계를 줄이는 것을 검토할 만하다.

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

프로토타이핑Figma디자인 시스템API+3

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

Sketch 사용자의 Figma 전환기 | 피

Figma는 Sketch의 기능을 대체하는 수준을 넘어, 실시간 협업과 웹 기반 작업 환경을 통해 디자인 프로세스 자체를 더 빠르고 단순하게 만든다는 것이 글의 핵심 주장이다. 자동 저장·공유, 프로토타이핑, 개발자 핸드오프, 버전 관리 등을 하나의 도구에 통합해 팀 간 동기화 비용을 줄인다. 특히 여러 지역에 분산된 제품 팀이라면 Sketch 중심의 기존 워크플로보다 Figma가 더 효율적이라는 결론이다. ## 웹 기반 실시간 협업 도구 - Figma는 브라우저에서 작동하는 디자인 도구이며, Sketch와 유사한 인터페이스와 기능을 제공한다. - 오프라인 작업을 위한 네이티브 앱도 지원한다. - 실시간으로 여러 명이 하나의 파일에서 작업할 수 있고, 서로의 커서와 변경 사항을 즉시 확인할 수 있다. - 파일이 클라우드의 공유 공간에 자동 저장되므로 별도의 저장·파일 정리 과정이 줄어든다. - 하나의 URL이 최신 디자인의 기준점이 되어 PNG 업로드, 파일 동기화, 링크 관리가 필요하지 않다. ## Sketch 생태계를 대체하는 통합 기능 글에서는 Figma가 Sketch뿐 아니라 Abstract, InVision, Craft, LiveShare, Freehand, Zeplin, Dropbox의 역할까지 상당 부분 통합한다고 설명한다. - **프로토타이핑**: 화면을 연결해 클릭 가능한 프로토타입을 만들 수 있다. - **댓글 기능**: 링크를 가진 사용자가 디자인의 특정 위치에 댓글을 남길 수 있으며, 사용자를 태그하거나 댓글을 해결 상태로 표시할 수 있다. Slack 연동도 가능하다. - **개발자 핸드오프**: 개발자가 URL을 통해 치수와 스타일을 확인하고 아이콘·이미지를 다운로드할 수 있다. - **버전 관리**: 모든 협업자의 변경 이력이 저장되며, 과거 버전으로 되돌리거나 해당 시점에서 새 작업을 시작할 수 있다. - **멀티플레이어 협업**: 여러 사람이 동시에 디자인을 수정하고 의견을 교환할 수 있다. - **화면 공유와 팔로우**: 특정 사용자의 아바타를 선택해 그 사람이 보고 있는 화면과 커서 움직임을 따라갈 수 있다. - **컴포넌트와 제약 조건**: Sketch의 심볼과 리사이징 기능에 해당하지만 더 유연하고 직관적으로 사용할 수 있다. - **팀 라이브러리**: 여러 프로젝트에서 컴포넌트 컬렉션을 공유하고 업데이트할 수 있다. - Dropbox Paper 문서에 Figma 프로젝트를 삽입할 수도 있다. ## 동기화 비용을 없애 더 빠르게 반복하기 - 디자인 리뷰 중에 수정하고, 수정 결과에 대한 피드백을 즉시 받을 수 있다. - 기존에는 디자인 파일 수정 후 InVision에 화면을 다시 업로드하거나, 프로토타입 순서를 재정렬하거나, 공유 링크를 다시 전달해야 했다. - Figma에서는 모든 참여자가 같은 파일을 보므로 이런 업로드·동기화·공유 과정이 사라진다. - 시간대가 다른 팀원이 작업물을 커밋하거나 업로드할 때까지 기다릴 필요가 없다. - 플러그인 업데이트로 기존 워크플로가 깨지는 문제도 줄어든다. - 결과적으로 디자인 반복 주기가 며칠 단위에서 몇 분 단위로 단축될 수 있다. ## 더 개방적이고 원활한 디자인 프로세스 - 디자인 파일 자체가 리뷰와 토론이 이루어지는 공동 작업 공간이 된다. - 디자이너뿐 아니라 개발자, 기획자 등 링크를 받은 팀원이 같은 화면에서 디자인을 확인하고 의견을 남길 수 있다. - 별도의 파일 전달이나 발표용 이미지 제작 없이 최신 상태의 디자인을 공유할 수 있다. - 실시간 협업과 댓글 기능은 원격·분산 팀이 디자인 논의에 참여하기 쉽게 만든다. ## 실용적인 결론 Sketch의 기존 기능과 플러그인에 크게 의존하는 팀이라도, Figma는 프로토타이핑부터 핸드오프·버전 관리·협업까지 하나의 환경에서 제공한다. 특히 여러 지역에 흩어진 팀이나 디자인 리뷰와 개발자 커뮤니케이션이 잦은 조직이라면, Figma 도입으로 파일 동기화와 반복적인 공유 작업을 우선 줄여볼 만하다.

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

프로토타이핑Figma디자인 시스템real-time-collaboration+3

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년 2월 26일·3분 읽기큐레이션 요약

피그마 프로토타이

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

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

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

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

Figma로부터 사랑을 담아:

Figma는 디자인 협업을 효율화하기 위해 파일 정렬 기능과 `@멘션` 기능을 추가했다. 파일을 최근 수정일뿐 아니라 생성일과 이름순으로 정렬할 수 있게 되었고, 댓글에서 특정 팀원을 멘션하면 이메일과 Figma 알림으로 즉시 전달된다. 이를 통해 필요한 파일과 피드백을 더 빠르게 찾고, 비동기 협업에서 담당자에게 정확히 의견을 전달할 수 있다. ## 파일 정렬로 작업 흐름 정리 - 기존 Figma의 파일 목록은 대부분 **최근 수정일(Last Modified)** 기준으로 자동 정렬됐다. - 최근 작업한 파일을 찾는 데는 유용하지만, 오래된 파일이나 특정 프로젝트의 파일을 찾을 때는 한계가 있었다. - 새로 다음 정렬 기준을 선택할 수 있게 되었다. - 파일 생성일 - 파일 이름 알파벳순 - 기존의 최근 수정일 기준 - 파일이 많아질수록 원하는 디자인 파일을 탐색하는 시간이 줄어들고, 작업 공간을 체계적으로 관리할 수 있다. ## `@멘션`을 통한 대상 지정형 협업 - 디자인 협업은 실시간으로만 이루어지지 않고, 댓글을 통한 비동기 방식으로도 자주 진행된다. - 다음과 같은 상황에서 특정 사람에게 직접 알림을 보낼 수 있다. - 디자이너가 PM에게 특정 화면의 피드백을 요청할 때 - 엔지니어가 프로토타입 구현 중 질문이 생겼을 때 - 카피 에디터가 문구 수정 완료 사실을 디자이너에게 알릴 때 - 사용자는 댓글에 `@`와 팀원의 이름을 입력해 해당 사용자를 멘션할 수 있다. - 멘션된 사용자는 다음 두 방식으로 알림을 받는다. - Figma 내부 알림 - 댓글 내용이 포함된 이메일 - 댓글을 찾으라고 문서 링크만 보내거나, 문서 안에서 직접 댓글을 찾아보라고 안내할 필요가 없어졌다. ## 댓글 알림과 이메일 답장 - 기존에는 특정 사용자를 위한 댓글을 작성해도 상대방에게 이를 원활하게 알릴 방법이 부족했다. - `@멘션`은 댓글의 수신 대상을 명확히 해 “어떤 댓글에 집중해야 하는지” 쉽게 알려준다. - 댓글 알림 이메일에 직접 답장하면, 답변이 Figma의 해당 댓글 스레드에 새 댓글로 추가된다. - 따라서 간단한 피드백이나 답변을 위해 Figma를 다시 열지 않아도 협업을 이어갈 수 있다. ## 사용자 요청을 반영한 기능 개선 - 두 기능 모두 Figma 사용자들이 오랫동안 요청해 온 기능이었다. - 작은 기능이지만 파일 탐색과 피드백 전달이라는 반복적인 작업을 줄여 디자인 업무 시간을 절약하는 데 목적이 있다. - Figma는 사용자들의 지속적인 피드백과 기능 요청이 제품 개선의 중요한 동력이라고 강조했다. 실무에서는 파일 수가 많은 프로젝트에 생성일·이름순 정렬을 활용하고, 특정 담당자의 확인이 필요한 댓글에는 항상 `@멘션`을 사용하는 것이 효과적이다.

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

프로토타이핑Figma사용자 경험real-time-collaboration+3

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

웹 디자이너 없는 웹

Xfive는 전담 디자이너가 없는 웹 개발 회사였지만, Figma를 활용해 낡고 복잡해진 홈페이지를 직접 redesign했다. 브라우저 기반 협업과 실시간 댓글 기능으로 마케팅·영업·개발 등 여러 이해관계자의 피드백을 한곳에서 관리했으며, 개발자는 별도 도구 없이 디자인 사양과 코드를 확인할 수 있었다. 이 경험을 통해 Figma가 디자인 제작부터 검토, 프로토타이핑, 개발자 인계까지 연결하는 효과적인 협업 플랫폼임을 확인했다. ## 리디자인이 필요했던 배경 - Xfive는 2006년 설립된 웹 개발 회사로, 크라쿠프·멜버른·샌프란시스코에 사무실을 두고 있다. - 일반적으로 고객이 제공한 디자인을 구현하는 방식이어서 사내에 디자이너를 두지 않았다. - 리브랜딩과 신규 웹사이트 출시 이후 회사는 성장했지만, 홈페이지와 일부 주요 영역은 그대로 남아 있었다. - Customers와 Work 섹션이 outdated 상태였고, 다음과 같은 구조적 문제가 있었다. - 혼란스러운 전역 내비게이션 - 서로 경쟁하는 지나치게 많은 CTA - 탐색과 유지보수가 어려운 다수의 랜딩 페이지 ## 디자이너가 아닌 직원의 Figma 활용 - 콘텐츠 제작자인 Lubos Kmetko가 Figma를 시험적으로 사용한 뒤 홈페이지 리디자인을 맡았다. - 전문 디자이너는 아니었지만 Figma를 이용하면 직접 시안을 만들 수 있다고 판단했다. - 홈페이지, Customers 영역, Work 섹션을 새로 설계하면서 내비게이션과 CTA, 랜딩 페이지 구조를 단순화했다. - 중요한 조건은 다양한 부서가 디자인을 검토하고 의견을 제출할 수 있어야 한다는 점이었다. ## 브라우저 기반 프로토타이핑과 협업 - Lubos는 완성한 각 페이지의 목업을 링크로 공유했다. - 마케팅, 영업, 제작, 편집, 개발팀은 물론 COO까지 브라우저에서 디자인을 열고 댓글을 남길 수 있었다. - Figma의 Comments 기능을 통해 다음 작업을 한 공간에서 처리했다. - 디자인에 대한 의견 교환 - 사용자 인터랙션 설명 - 피드백을 반영한 실시간 수정 - 변경 내역과 최신 버전 동기화 - 별도의 파일 다운로드나 프로그램 설치 없이 참여할 수 있어 비디자이너도 구체적인 피드백을 제공하기 쉬웠다. - 모든 피드백이 디자인 파일과 함께 보존되어, 이메일이나 분산된 문서보다 검토 과정의 추적성이 높아졌다. ## 디자이너-개발자 인계 간소화 - 시안이 승인된 뒤에도 이메일이나 Box로 파일을 주고받지 않고 Figma 링크를 사용했다. - 개발자는 브라우저에서 디자인 파일을 열어 별도 도구 없이 사양을 확인했다. - Code Mode를 통해 다음 정보를 확인하거나 내보낼 수 있었다. - 요소의 크기 - 색상 - 패딩 등 간격 - CSS - iOS 및 Android 코드 - 이를 통해 버전 관리 문제와 구현 과정의 추측을 줄이고, 더 빠르고 정확하게 개발할 수 있었다. - Figma는 Photoshop의 디자인 기능과 Google Docs의 협업 방식을 결합하면서도 상대적으로 가볍고 단순한 도구로 평가됐다. ## 클라이언트 프로젝트로의 확장 - Xfive는 이번 리디자인을 Figma를 실제 고객 프로젝트에 적용하기 위한 시험대로 삼았다. - 향후에는 기능성 프로토타입을 팀원과 고객에게 공유하고 실시간으로 협업할 수 있다고 보았다. - PDF나 JPEG를 이메일에 첨부해 디자인 아이디어를 전달하던 기존 방식에서 벗어나: - 프로토타입 공유 - 구현 세부사항 논의 - 개발자 인계 를 하나의 플랫폼에서 처리하려 했다. 전담 디자이너가 없는 조직이라도 브라우저 기반 도구와 명확한 협업 프로세스를 갖추면 웹 리디자인을 진행할 수 있다. 특히 Figma는 디자인 검토부터 개발 사양 확인까지 연결하므로, 여러 부서와 외부 고객이 함께 참여하는 프로젝트에 유용한 선택지다.

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

프로토타이핑Figma사용자 경험Android+4

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월 6일·3분 읽기큐레이션 요약

더 많은 시간, 더 많은

Unfold는 Figma를 도입해 디자인 파일 버전 충돌, 피드백 분산, 개발자 핸드오프 문제를 크게 줄였다. 클라우드 기반 협업과 브라우저 접근성 덕분에 커뮤니케이션에 쓰는 시간이 약 30% 감소했고, 더 빠르게 프로젝트를 진행하며 더 많은 고객을 맡을 수 있게 됐다. 이 글은 에이전시 업무를 하나의 협업 플랫폼으로 통합하는 것이 시간과 비용 절감으로 이어진다는 점을 보여준다. ## 여러 버전과 협업 문제의 해소 - Unfold는 디자이너, 개발자, 마케터, 프로젝트 매니저, 고객 등 다양한 관계자가 참여하는 프로젝트를 진행했다. - 서로 다른 컴퓨터와 운영체제, 각기 다른 디자인 도구를 사용하면서 파일 덮어쓰기와 버전 충돌이 자주 발생했다. - 문제를 해결하기 위해 여러 플러그인을 조합했지만, 단순한 작업에도 복잡한 도구 체계가 필요했다. - Figma는 클라우드에서 작동하므로 모든 사람이 같은 최신 파일에 접근할 수 있고, URL 하나만 공유하면 협업이 가능했다. - Unfold는 버전 관리와 피드백 과정이 단순해지면서 커뮤니케이션에 소요되는 시간이 최소 30% 줄었다고 평가했다. ## 하나의 공간으로 통합된 디자인 프로세스 - Figma는 디자인, 프로토타이핑, 피드백, 개발자 전달을 한 플랫폼 안에서 처리한다. - 기존 Sketch 파일은 Figma의 Sketch importer로 가져올 수 있어 기존 프로젝트를 이전하기 쉬웠다. - 새로운 프로젝트에서는 Figma의 multiplayer 기능을 활용해 팀과 고객이 하나의 문서에서 동시에 아이디어를 스케치했다. - 여러 사람이 실시간으로 참여할 수 있어 초기 브레인스토밍 속도가 빨라졌다. - 무드 보드에는 색상 팔레트, 글꼴 후보, 시각적 레퍼런스를 함께 배치할 수 있었다. - 웹에서 이미지를 문서로 바로 드래그 앤 드롭할 수 있어 파일을 저장하고 다시 업로드하는 과정이 사라졌다. ## 문맥을 유지하는 피드백 - 디자인 파일은 항상 같은 URL에서 최신 상태로 공유됐다. - 디자이너가 파일을 내보내거나 고객에게 새 버전을 업로드할 필요가 없었다. - 고객은 Figma의 댓글 기능으로 원하는 시점에 피드백을 남길 수 있었다. - 댓글이 관련 디자인 프레임에 고정되므로 Slack이나 이메일에 흩어진 피드백보다 맥락을 파악하기 쉬웠다. - 고객 입장에서도 “모든 작업이 한곳에 있다”는 점이 Figma 도입을 설득하는 간단한 장점이 됐다. ## 개발자 핸드오프의 간소화 - 기존에는 Mac을 사용하지 않는 고객의 개발자에게 별도 도구나 구독을 요구해야 했다. - 디자인 파일을 PSD로 변환하기 위해 Illustrator를 거치면서 레이어가 손상되는 문제도 발생했다. - Figma에서는 운영체제와 관계없이 브라우저로 디자인을 확인할 수 있다. - 개발자는 코드 모드에서 에셋과 CSS, Android, iOS 관련 정보를 확인하거나 내보낼 수 있다. - 클라우드의 최신 디자인과 개발자에게 제공되는 정보가 자동으로 연결되어 별도의 동기화가 필요 없다. - 개발자는 보기 전용 권한만으로도 필요한 정보를 확인할 수 있어 고객의 추가 비용 부담도 줄었다. ## 더 많은 프로젝트를 맡을 수 있게 된 효과 - Figma 도입 후 Unfold는 전체 프로세스의 마찰과 반복 작업이 줄어 프로젝트를 더 빨리 완료할 수 있었다. - 작업 흐름이 자연스러워져 팀원들이 도구 자체보다 디자인과 문제 해결에 집중할 수 있었다. - 시간 절약뿐 아니라 협업 경험이 편해진 점도 생산성 향상의 중요한 요인으로 작용했다. - 결과적으로 같은 인력으로 더 많은 업무를 수용할 수 있다는 자신감을 얻었다. 에이전시처럼 내부 팀과 외부 고객, 개발자가 동시에 참여하는 환경에서는 파일 형식보다 **접근성, 단일 최신본, 문맥 기반 피드백, 개발자용 정보 제공**이 중요하다. 따라서 협업 도구를 선택할 때는 개별 기능보다 전체 업무 흐름을 얼마나 하나로 연결하고 반복 커뮤니케이션을 줄이는지 평가하는 것이 좋다.

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

프로토타이핑FigmaAndroidiOS+4

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

떠오르는 UI/UX

실리콘밸리에 집중된 시각에서 벗어나면 전 세계 곳곳에서 UI/UX 디자인 커뮤니티가 빠르게 성장하고 있다. 컨퍼런스, 밋업, 원격 근무, 교육 프로그램이 차세대 디자이너와 국제적 네트워크를 형성하는 기반이 된다. 글은 상파울루, 선전, 리가, 리마 등 신흥 디자인 도시를 소개하며, 디자이너가 새로운 환경에서 커뮤니티와 기회를 발견할 수 있다고 주장한다. ## 세계 각지로 확산되는 UI/UX 커뮤니티 - 기술·제품 디자인 산업은 실리콘밸리에 지나치게 집중되는 경향이 있다. - 실제로는 전 세계 여러 도시에서 디자인 커뮤니티와 기술 생태계가 성장하고 있다. - 성장의 배경에는 다음 요소가 있다. - 디자인 컨퍼런스와 밋업 증가 - 원격 근무와 디지털 노마드 확산 - 차세대 디자이너를 육성하는 교육 프로그램 - 글은 Meetup.com과 UNESCO 창의도시 목록 등을 활용해 신흥 디자인 중심지를 조사했다. - 새로운 도시를 찾는 졸업생, 국제 커뮤니티를 원하는 디자이너, 원격 프리랜서에게 이러한 지역이 기회가 될 수 있다고 설명한다. ## 상파울루: 다문화 환경과 실무 중심 커뮤니티 - 높은 교육 수준의 중산층과 다양한 인구 구성이 기술·디자인 생태계의 기반이 되고 있다. - 일본계 인구가 일본 외 지역 중 가장 많고, 라틴아메리카 최대 규모의 공개적 LGBTQ 커뮤니티가 있는 도시로 소개된다. - `Design Thinking para Startups` 밋업에는 약 5,263명이 참여하며 다음과 같은 주제를 다룬다. - 디자인 스프린트 - 가치 제안 디자인(Value Proposition Design) - `Front UX`는 디자이너와 개발자의 협업 및 워크플로 개선에 초점을 둔 대규모 커뮤니티다. - 현지 UX/UI 컨설팅 회사인 Key Ideas는 Nestlé, Samsung, Colgate 등을 고객으로 보유해 실무 기회를 제공한다. ## 선전: 제조업 도시에서 디지털 디자인 중심지로 - 선전은 1980년 인구 3만 명의 어촌에서 출발했지만, 중국의 특별경제구역 지정 이후 급격히 성장했다. - 37년 만에 인구가 약 1,100만 명으로 증가하며 중국의 대표적인 디자인·기술 도시가 됐다. - 2017년 기준 약 6,000개의 디자인 회사가 10만 명을 고용하고 있었다. - 디지털화가 일상생활에 미치는 영향이 큰 도시로 평가되며, 다양한 디자인 분야가 함께 발전하고 있다. - UNESCO가 인정한 문화 중심지이기도 하며, 향후 기술 산업과 혁신에서 실리콘밸리와 같은 역할을 할 도시로 전망된다. ## 리가: 역사적 도시 안에서 성장하는 UX 네트워크 - 고딕 양식의 구시가지와 현대적인 창작자 커뮤니티가 공존하는 도시다. - 매년 열리는 `UX Riga` 컨퍼런스는 다음 규모로 운영된다. - 3일간 진행 - 국제 연사 14명 - 워크숍 8개 - 참가자 약 450명 - 워크숍 주제에는 사회적 영향력을 UX에 적용하는 방법과 실용적인 UX 기법이 포함된다. - `UX/UI Riga` 밋업에는 667명의 디자이너가 참여하며 다음 주제를 논의한다. - 전자상거래와 UX의 접점 - 실용적인 프로토타이핑 - 리가에 기반을 둔 DigiPulse는 세계 최초의 디지털 암호화폐 금고로 소개되며, 도시의 기술 스타트업 역량을 보여주는 사례로 제시된다. ## 리마: 라틴아메리카의 잠재적 디자인 도시 - 리마는 멕시코시티와 상파울루에 이어 아메리카 대륙에서 세 번째로 큰 대도시권으로 소개된다. - 해안 도시의 특성과 스페인 바로크·식민지 건축이 독특한 시각적 환경을 만든다. - 제공된 글 일부에서는 리마의 UX/UI 커뮤니티와 구체적인 사례 설명이 이어지기 전에 내용이 중단된다. ## 실용적인 시사점 UI/UX 디자이너는 실리콘밸리만을 유일한 기회로 볼 필요가 없다. 밋업 참여자 수, 정기 컨퍼런스, 교육 프로그램, 현지 기업과 스타트업 생태계를 기준으로 도시를 탐색하면 자신의 경력 단계와 관심 분야에 맞는 국제적 커뮤니티를 찾을 수 있다.

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

프로토타이핑사용자 경험design-thinkingdigital-design+4

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

피그마 페이지를 소개합니다

Figma Pages는 하나의 파일 안에서 브레인스토밍, 와이어프레임, 최종 디자인 등을 여러 페이지로 나누어 관리할 수 있게 해주는 기능이다. 디자인 단계나 플랫폼별 작업을 분리하면서도 파일을 벗어나지 않고 탐색·편집할 수 있어 정리와 협업이 쉬워진다. 다만 페이지를 버전 관리 용도로 사용해 대형 파일을 반복 복제하면 성능이 저하될 수 있으므로, 버전 관리는 별도의 Version History를 사용해야 한다. ### 디자인 단계를 분리하는 페이지 구성 - 브레인스토밍, 와이어프레이밍, 픽셀 단위의 최종 작업을 각각 다른 페이지에 배치할 수 있다. - 초기 단계의 자유로운 스케치와 최종 결과물을 분리해 파일 내 혼란을 줄인다. - 여러 작업 단계를 하나의 파일에서 관리하므로 문서를 오가며 작업할 필요가 없다. ### 플랫폼과 요소별 분류 - 모바일 앱을 제작할 때 iOS 화면과 Android 화면을 별도 페이지에 구성할 수 있다. - 복잡한 인터페이스에서는 공유 컴포넌트, 아이콘 등 특정 요소를 별도 페이지에 모아 관리할 수 있다. - 하나의 파일에서 여러 프로토타입을 제작해야 할 때 프로토타입별로 페이지를 나눌 수 있다. ### 페이지 관리 방식 - 디자인 파일의 왼쪽 패널에서 페이지를 추가·전환·삭제할 수 있다. - 페이지 메뉴는 조작이 끝나면 자동으로 접히며, 패널을 Control-click하면 열린 상태로 고정할 수 있다. - 컴포넌트를 다른 페이지로 옮기려면 마우스 오른쪽 버튼을 클릭한 뒤 **Move to Page**를 선택하면 된다. - Sketch 파일을 가져올 때는 Sketch에서 구성한 페이지와 심볼 구조가 Figma에도 동일한 방식으로 import된다. - 페이지 수에는 제한이 없다. ### 썸네일과 파일 탐색 - 브라우저에서 파일을 쉽게 훑어볼 수 있도록 대표 썸네일에 사용할 페이지를 설정할 수 있다. - 왼쪽 패널에서 원하는 페이지를 첫 번째에 배치하면 해당 페이지가 파일 썸네일에 활용된다. ### 공유 시 개인정보와 접근 범위 - 특정 페이지만 공유하더라도, 공유받은 사람은 그 페이지가 포함된 파일의 나머지 내용도 볼 수 있다. - 따라서 페이지를 보안 경계나 접근 권한 분리 수단으로 사용해서는 안 된다. - 민감한 디자인을 분리해야 한다면 별도의 Figma 파일을 만들어야 한다. ### 버전 관리와 성능 주의사항 - 페이지를 버전 관리 목적으로 추가로 만드는 것은 권장되지 않는다. - Figma에는 별도의 Version History 기능이 있으므로 이전 버전 확인과 복원에는 이를 사용해야 한다. - 큰 디자인 파일을 여러 페이지에 반복 복제하면 파일 용량과 렌더링 부담이 커져 성능이 저하될 수 있다. 실무에서는 페이지를 작업 단계, 플랫폼, 디자인 요소, 프로토타입 단위로 나누고, 접근 권한 분리와 버전 관리는 각각 별도 파일과 Version History로 처리하는 것이 적절하다.

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

프로토타이핑Figma사용자 경험version-control+2

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