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

목업 그 이상: 여정

디자인은 화면 목업을 만드는 일에 그치지 않고, 제품 경험·조직 프로세스·문화·커뮤니티를 함께 설계하는 활동이다. Segment는 디자이너뿐 아니라 리서처, PM, 엔지니어, 고객 성공 담당자 등과 Figma에서 공동 작업하며 고객 여정, 데이터 구조, 디자인 시스템, 조직 문화를 함께 만들어갔다. 이런 협업 산출물은 팀의 공통 기준이자 의사결정과 온보딩을 돕는 자료로 활용됐다. ## 고객 여정 공동 설계 - 디자이너와 UX 리서처가 고객의 전체 경험을 여정 지도로 정리했다. - 발견과 가입부터 제품의 대규모 도입까지, 고객 등급별 경험을 단계적으로 매핑했다. - 각 단계에 분석 데이터를 보완하고, 고객 사례를 클릭해 볼 수 있는 인터랙티브 프로토타입을 제작했다. - 완성된 파일은 Segment 구성원이 고객 경험을 확인할 때 참고하는 단일 기준점이 됐다. - 신규 구성원이 제품과 고객을 이해하는 온보딩 자료로도 활용됐다. ## 데이터 아키텍처 다이어그램 - 디자이너, 리서처, 고객 성공 관리자, 인프라 엔지니어가 함께 Segment의 데이터 흐름을 시각화했다. - 데이터가 플랫폼을 통과하며 어떻게 변환·보강·정제되는지 표현했다. - 복잡한 데이터 구조를 여러 직군이 공유할 수 있는 공통 언어로 바꿨다. - 다이어그램은 향후 제품을 설계할 때 활용하는 기반 자료가 됐다. - 현재 강점과 개선이 필요한 영역을 드러내 제품 전략과 우선순위 설정을 지원했다. ## 디자인 시스템 회고와 로드맵 수립 - 오픈소스 디자인 시스템인 Evergreen은 디자인 외의 여러 팀도 사용하므로, 엔지니어링 등 협업 부서의 피드백이 중요했다. - 원격 근무 상황에서 디자이너와 엔지니어가 Figma 파일에 가상 포스트잇을 작성했다. - 디자인 시스템의 문제점과 개선 기회를 함께 도출했다. - 회고 결과는 다음 분기 OKR의 틀을 만드는 데 활용됐다. - 단순한 피드백 수집을 넘어 디자인 시스템의 향후 로드맵을 공동 설계하는 계기가 됐다. ## 원격 환경에서 커뮤니티 만들기 - 공동 설계는 제품이나 업무 산출물뿐 아니라 소속감과 유대감을 만드는 데도 활용됐다. - 국제 여성의 날을 맞아 EPD 조직의 여성 구성원들에게 보낼 감사 카드를 Figma에서 함께 작성했다. - 동료에게 전하고 싶은 메시지와 서로에게 배우고 싶은 점을 공동으로 표현했다. - 대면 축하가 어려운 원격 환경에서 생일 카드 등 가상 이벤트에도 같은 방식을 적용했다. - 협업 도구를 조직문화와 관계 형성을 위한 공간으로 확장했다. ## 목업을 넘어선 공동 설계 - 공동 설계의 대상은 인터페이스뿐 아니라 고객 경험, 데이터 구조, 프로세스, 전략, 문화까지 포함할 수 있다. - 다양한 직군을 초기 단계부터 참여시키면 각자의 전문 지식이 결과물에 반영된다. - 시각화된 문서는 팀의 공통 기준점이 되어 커뮤니케이션 비용을 줄인다. - 원격 환경에서도 실시간 협업 도구를 활용하면 회고, 브레인스토밍, 축하와 같은 활동을 지속할 수 있다. 팀의 문제를 해결할 때 화면 설계만 생각하기보다, 어떤 경험과 관계를 함께 만들지 정의하고 관련된 사람들을 공동 설계 과정에 참여시키는 것이 효과적이다. Figma 같은 협업 공간을 공통 문서이자 토론의 장으로 활용하면 산출물의 재사용성과 조직 전체의 이해도를 높일 수 있다.

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

Figma디자인 시스템사용자 경험프로토타이핑+3

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

메이커 위크

Figma의 Maker Week는 일상 업무를 벗어나 전 직원이 자유롭게 협업하는 사내 프로젝트 주간으로, 원격근무 상황에서도 전통을 이어가기 위해 온라인 중심으로 재설계되었다. 2020년 행사는 결과물의 완성도보다 함께 만드는 과정과 서로 돕는 경험을 중시했으며, “서로를 돕는 방법”을 주제로 삼았다. 이를 위해 감정을 표현하는 ‘무드 캐릭터’, Figma 기반 놀이 파일, Zoom 배경 등 새로운 시각적·디지털 장치를 활용했다. ## Maker Week의 목적과 조직 문화 - Maker Week는 1년에 두 번, 구성원들이 평소 업무와 무관한 프로젝트를 탐색하는 기간이다. - 엔지니어와 디자이너 중심의 해커톤과 달리 모든 팀과 직군이 참여한다. - 비필수 회의를 줄이고 채용 인터뷰를 잠시 중단해, 평소 함께 일하지 않는 동료들과 협업할 시간을 만든다. - 프로젝트의 목적은 반드시 완성된 제품을 출시하는 것이 아니라 새로운 방식으로 연결되고 시도하는 데 있다. - 원격근무로 조직 구성원 간 연결이 어려워진 상황에서 회사 문화를 유지하는 장치로서 중요성이 커졌다. ## 결과보다 과정을 중시한 방향 - 2020년 Maker Week는 특히 “무언가를 출시해야 한다”는 부담을 내려놓는 데 초점을 맞췄다. - 완성도 높은 결과물이나 생산성보다 함께 일하는 과정과 협업 경험을 기념하고자 했다. - 구성원 모두가 적극적으로 무언가를 만들 여력이 있다고 가정하지 않고, 참여 수준과 감정 상태의 차이를 존중했다. - 짧은 시간 안에도 부담 없이 무언가를 만들어 볼 수 있도록 활동의 진입 장벽을 낮췄다. ## “서로를 돕는 방법”이라는 주제 - 이전에는 참가자들이 Figma와 관련된 무엇이든 자유롭게 만들었지만, 이번에는 프로젝트를 이끌 공통의 방향이 필요했다. - 주변의 어려운 현실을 반영하면서도 Maker Week의 창작 정신을 유지하기 위해 “How to help one another”라는 주제를 정했다. - 주제는 디자인팀의 창작 방향을 정하는 데 유용한 제약과 기준이 되었다. - 명확한 주제가 없을 때보다 아이디어를 더 깊이 탐색하고 일관된 시각 언어를 만들기 쉬워졌다. ## 감정을 표현할 수 있는 창작 환경 - 원격근무로 인해 구성원들이 느끼는 거리감과 다양한 감정을 표현할 수 있는 출구를 제공하려 했다. - 직접 마주칠 일이 줄어든 상황이 오히려 더 솔직하게 감정을 공유할 수 있는 기회가 될 수 있다고 보았다. - 기쁨, 불안, 혼란, 상충하는 감정 등 어떤 상태든 받아들이는 분위기를 만들었다. - 창작 활동을 생산성 향상의 수단이 아니라 서로의 상태를 이해하고 연결하는 방법으로 활용했다. ## 무드 캐릭터와 Figma 플레이그라운드 - Figma 안에 구성원 모두가 사용할 수 있는 공유 놀이 파일을 제작했다. - 참가자들은 여러 그래픽 요소를 조합해 자신의 감정이나 기분을 나타내는 ‘무드 캐릭터’를 만들었다. - 캐릭터에 이름을 붙이고 동료들과 공유함으로써 말로 설명하기 어려운 감정을 시각적으로 전달할 수 있었다. - 캐릭터는 디자이너들의 책상 주변에 있는 일상적인 물건을 모티브로 삼았다. - 집과 책상처럼 원격근무 중 실제로 머무는 공간의 사물을 활용해, 당시의 생활 환경과 감정을 자연스럽게 반영했다. - 복잡한 결과물을 며칠씩 제작하지 않아도 누구나 직접 만든 무언가를 얻을 수 있도록 설계했다. ## 사무실 전통을 온라인 경험으로 전환 - 과거 Maker Week의 분위기는 사무실 포스터, 오프라인 킥오프 아침 식사 등 물리적 공간에 크게 의존했다. - 전면 원격근무로 기존 방식을 사용할 수 없게 되면서 새로운 온라인 접점을 마련했다. - 대표적인 예로 구성원들이 화상회의에서 사용할 수 있는 맞춤형 Zoom 배경을 제작했다. - 외부 행사나 제품 출시 때 주로 사용하던 시각적 브랜딩을 내부 행사에도 적용해, 한 주 전체의 분위기와 참여 의욕을 높였다. 원격 환경에서 사내 행사를 성공적으로 운영하려면 결과물의 양보다 참여 부담을 낮추고, 구성원이 자신의 상태를 표현하며 서로 연결될 수 있는 구조를 만드는 것이 중요하다. 공통 주제, 재사용 가능한 창작 도구, 가벼운 온라인 활동을 결합하면 물리적 공간 없이도 조직 문화를 이어갈 수 있다.

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

Figmagraphic-designremote-workzoom

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

팀이 즐겨 사용하는 도구에

Figma는 팀이 사용하는 외부 도구에 비공개 디자인 파일을 실시간으로 임베드할 수 있는 기능을 출시했다. 이를 통해 디자이너와 개발자는 요구사항, 프로젝트 작업, 문서 안에서 최신 디자인을 직접 확인할 수 있으며, 스크린샷을 반복해서 갱신하거나 파일을 찾는 수고를 줄일 수 있다. Notion, Dropbox Paper, Jira, Trello, Storybook 등 다양한 협업 도구와 내부 문서 사이트에서 활용할 수 있다. ## 비공개 Figma 파일 임베드의 등장 - 기존에는 외부 도구에 공개 Figma 파일만 임베드할 수 있었다. - 실제 협업에 필요한 디자인은 조직 내부 정보이거나 아직 공개할 수 없는 경우가 많아 비공개 임베드 지원 요구가 컸다. - 이제 팀 전용 도구에서도 비공개 Figma 파일을 임베드해 권한을 유지한 채 디자인을 공유할 수 있다. - 임베드된 파일은 원본 변경 사항을 자동으로 반영하므로 별도의 스크린샷 교체가 필요 없다. ## 제품 사양과 요구사항 - Dropbox Paper, Coda, Notion 같은 문서 도구의 제품 요구사항 문서에 최신 디자인을 함께 삽입할 수 있다. - 개발자는 요구사항과 목업, 사용자 여정, 아이디어 보드를 같은 문서 안에서 맥락에 맞게 확인할 수 있다. - 스크린샷 대신 실제 Figma 파일을 사용하므로 문서와 디자인 사이의 불일치가 줄어든다. - Coda에서는 제품 요구사항과 로드맵 템플릿에 Figma 파일을 삽입하는 방식이 소개됐다. ## 프로젝트 및 작업 관리 - Jira와 Trello의 이슈, 작업 카드, 스프린트 관리 화면에 관련 디자인을 직접 추가할 수 있다. - 디자이너와 개발자가 작업 항목 안에서 최신 시안을 확인해 구현 방향을 맞출 수 있다. - 이를 통해 디자인 파일을 별도로 검색하거나 올바른 버전을 확인하는 시간이 줄어든다. - Jira에서는 Figma for Jira 앱을, Trello에서는 Figma Power-Up을 사용할 수 있다. ## 문서화와 단일 기준점 - Storybook에서 UI 컴포넌트 참고 자료로 비공개 Figma 파일을 임베드할 수 있다. - 사내 문서 사이트는 Figma Live Embed Kit을 이용해 비공개 임베드를 지원할 수 있다. - 디자인을 문서에 직접 연결하면 문서와 디자인이 항상 최신 상태를 유지한다. - 팀은 Figma 파일을 제품 UI와 컴포넌트에 대한 신뢰할 수 있는 단일 기준점으로 활용할 수 있다. ## 프로토타입 임베드 개선 - Figma는 프로토타입에서 툴바와 푸터를 숨기는 기능도 추가했다. - 이 설정은 다른 도구에 프로토타입을 임베드할 때도 유지된다. - Maze 같은 사용자 테스트 도구에 프로토타입을 삽입할 때 불필요한 Figma UI를 제거할 수 있다. 비공개 임베드는 디자인을 문서, 작업 관리, 개발 문서에 직접 연결해 협업 비용을 낮추는 기능이다. 팀은 스크린샷보다 실시간 Figma 임베드를 우선 사용하고, 제품 사양과 이슈, 컴포넌트 문서에 원본 디자인을 연결해 최신 상태를 유지하는 것이 좋다.

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

Figmajirastorybooknotion+4

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

집에서 디자인 영감 찾기 |

집에 머무는 동안의 창의적 영감은 디자인 사례만 찾기보다, 직접 무언가를 해보고 일상과 다른 분야를 탐색하는 데서 얻을 수 있다. Figma 디자인팀은 취미, 사진, 온라인 커뮤니티, 음악·영화 등 다양한 경험이 창의적 사고를 자극한다고 말한다. 중요한 것은 영감을 억지로 찾기보다 즐거운 활동과 새로운 연결을 통해 창작의 흐름을 회복하는 것이다. ## 생각을 줄이고 직접 해보기 - 창의성이 막힐수록 문제를 계속 분석하기보다 전혀 다른 활동에 몰입하는 것이 도움이 된다. - 식물 수집, 가구 배치, 그림 그리기, 글쓰기처럼 작고 단순한 취미도 새로운 자극이 될 수 있다. - 컴퓨터과학, 음악, 게임처럼 디자인과 직접 관련 없는 주제를 공부하는 것도 사고의 폭을 넓힌다. - 그림을 스티커로 제작하는 등 개인 프로젝트는 업무와 별개로 성취감과 창작 에너지를 제공한다. - 결과물의 완성도보다 즐겁게 지속할 수 있는 활동인지가 중요하다. ## 사진과 기억을 통한 가상 탈출 - 여행, 전시, 건축, 라이브 음악을 직접 경험하기 어려운 상황에서는 과거의 기억이 대안이 될 수 있다. - 카메라 롤을 다시 살펴보면 다른 장소와 시간에 대한 기억이 되살아나며 정서적으로 재충전할 수 있다. - 사진은 단순한 기록을 넘어 새로운 시각적 관점과 아이디어를 제공한다. - 현재의 환경에서 벗어날 수 없을 때, 과거의 경험을 돌아보는 것만으로도 창작의 관점을 전환할 수 있다. ## 온라인 커뮤니티와 함께 영감 찾기 - 물리적으로 만날 수 없을 때 소셜 미디어, Figma Community, 온라인 아티클과 영상이 영감과 연결의 통로가 된다. - Are.na는 다른 북마크 서비스보다 협업적이며, 여러 사람이 자료와 핀을 자유롭게 추가할 수 있다는 점이 장점으로 소개된다. - Instagram과 Twitter에서는 특정 계정을 구독하거나, 흥미로운 디자이너를 따라가며 연쇄적으로 새로운 창작자를 발견할 수 있다. - 온라인 영감 탐색은 혼자 자료를 소비하는 데 그치지 않고, 다른 사람과 공유하고 함께 큐레이션할 때 더 풍부해진다. ## 디자인 바깥의 분야에서 연결 만들기 - 디자인 결과물만 계속 보면 비슷한 스타일과 해결 방식에 갇힐 수 있다. - 음악, 영화, TV 프로그램, 요리처럼 디자인과 거리가 있는 분야는 서로 다른 개념을 연결하도록 사고를 자극한다. - 특히 혁신이나 문제 해결을 다루지만 디자인을 직접 다루지 않는 콘텐츠가 새로운 시각을 줄 수 있다. - 다른 사람의 특정 디자인 사례를 그대로 참고하면 결과물이 모방에 가까워지거나 사고가 좁아질 위험이 있다. - 대신 인접 분야나 비슷하지만 다른 문제를 해결한 사례를 참고하면, 기존 디자인의 해법을 복사하지 않고 문제 해결 방식만 배울 수 있다. ## 실천을 위한 추천 창의성이 막혔다면 먼저 20~30분 동안 그림, 정리, 산책, 사진 감상처럼 부담 없는 활동을 해보는 것이 좋다. 이후 디자인과 무관한 콘텐츠를 접하거나 온라인 커뮤니티에서 새로운 자료를 탐색하면, 억지로 답을 찾기보다 자연스럽게 새로운 연결과 아이디어를 발견할 수 있다.

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

Figma사용자 경험slackvisual-design+3

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

페어 디자인하는 방법

디자인 페어링은 두 명의 디자이너가 같은 문제를 동시에 해결하는 협업 방식이다. 즉각적인 피드백과 다양한 아이디어를 통해 디자인 품질을 높이고, 오류·엣지 케이스를 조기에 발견하며, 결과적으로 작업 시간과 커뮤니케이션 비용을 줄일 수 있다. 글은 역할과 진행 방식을 명확히 정하고 짧은 실험부터 시작하면 상사에게도 투자 가치를 설득할 수 있다고 주장한다. ## 디자인 페어링의 정의 - 두 사람이 같은 디자인 문제를 같은 시간에 함께 해결한다. - 회원가입 플로우에서 한 명은 계정 생성, 다른 한 명은 온보딩을 맡는 방식은 ‘분업’이지 페어링이 아니다. - 페어링에서는 하나의 문제를 함께 탐색하고, 아이디어를 만들고, 의사결정을 내린다. ## 다양한 페어링 방식 - **Generator–Synthesizer 방식** - 한 사람이 많은 아이디어를 생성하고, 다른 사람이 이를 UX 흐름이나 구조로 정리한다. - **Lead–Support 방식** - 숙련된 디자이너가 주도하고 다른 디자이너가 지원하며, 주니어 디자이너의 성장을 돕는다. - **스크린 공유 방식** - 페어 프로그래밍처럼 한 화면을 보며 실시간으로 작업하고 의견을 교환한다. ## 드라이버와 내비게이터 역할 - **드라이버** - Figma 파일, 키보드, 마우스를 조작하며 실제 디자인을 만든다. - 버튼 위치나 보조 문구 추가 같은 판단의 근거를 소리 내어 설명한다. - **내비게이터** - 직접 조작하지 않고 작업을 관찰하며 질문을 던진다. - 기존 제품 패턴, 사용자 혼란, 접근성, 엣지 케이스 등을 즉시 검토한다. - 결과물을 비판하기보다 향후 디자인 리뷰나 출시 후 발견될 문제를 미리 제기한다. - 일정 시간이 지나면 두 사람이 역할을 교대해 서로 다른 관점에서 작업한다. ## 효과적인 진행 방법 - 해결할 문제와 목표를 시작 전에 합의한다. - 짧은 스케치나 레퍼런스 탐색으로 문제 인식을 맞춘다. - 페어링 시간을 10분, 하루, 일주일 등 상황에 맞게 정한다. - 대화와 사고가 많아 피로할 수 있으므로 중간에 휴식한다. - 즉시 거절하기보다 아이디어를 발전시키는 즉흥극의 원칙을 따른다. - 누군가 지켜보는 상황이 어색할 수 있으므로 실수를 자연스럽게 받아들이는 분위기를 만든다. - 종료 후 짧은 회고를 진행해 잘된 점과 개선할 점을 확인한다. ## 상사를 설득할 수 있는 투자 가치 - 작업 중 즉각적인 피드백을 받아 나중에 별도 리뷰할 필요가 줄어든다. - Slack이나 이메일 같은 방해 요소가 줄어든다. - 지식과 맥락이 실시간으로 공유되어 팀 전체의 역량이 빠르게 확산된다. - 문서 작성과 별도 컨텍스트 공유 회의가 감소한다. - 두 사람이 함께 아이디어를 생성하므로 더 많은 가능성을 탐색할 수 있다. - 오류, 버그, 엣지 케이스를 조기에 발견한다. - 디자인 파일의 구조와 정리가 더 일관된다. - 의사결정에 대한 자신감과 팀 사기가 높아진다. 처음부터 장기간 도입하기보다 명확한 문제를 정해 짧은 세션으로 시험해 보는 것이 좋다. 작업 속도뿐 아니라 재작업, 회의, 문서화, 출시 후 수정 비용까지 함께 비교하면 디자인 페어링의 효과를 더 설득력 있게 평가할 수 있다.

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

Figma사용자 경험sketchdesign-critique+2

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

피그마 내부: 프로

피그마의 제품 디자인 팀은 디자인 품질과 일관성을 유지하는 수평적 팀 문화와, 실제 제품을 출시하는 수직적 제품 팀 문화를 함께 운영한다. 이 글은 제품 개발 프로세스가 아니라 디자인 팀 자체의 회의 주기, 의식, 관계 형성 방식을 소개하며, 팀의 규모와 상황에 맞게 선택적으로 적용해야 한다고 강조한다. 특히 코로나19 상황에서는 생산성보다 구성원의 정신적 여유와 연결감을 우선해야 한다고 말한다. ## 디자인 팀과 제품 팀의 이중 구조 - 디자이너는 동시에 두 문화에 속한다. - **수평적 디자인 팀**: 디자인 원칙과 품질 기준을 통일하고, 디자인 역량과 공예적 완성도를 높인다. - **수직적 제품 팀**: 특정 제품 영역에 집중해 엔지니어·PM과 협업하고 실제 기능과 개선 사항을 출시한다. - 회사가 작을 때는 디자이너들이 긴밀하게 협력하며 업무를 분배한다. - 회사가 성장하면 디자이너들이 제품 영역별 워킹 그룹에 배치되면서 두 팀 정체성 사이에 긴장이 생길 수 있다. - 피그마는 제품 디자이너가 10명인 중간 규모 단계에서, 제품 팀과의 관계에는 더 집중하고 디자인 팀 프로세스는 일관성과 연결을 담당하도록 조정하고 있다. ## 프로세스를 적용할 때의 전제 - 글에서 다루는 대상은 **제품 팀 전체의 프로세스가 아니라 디자인 팀의 프로세스**다. - 제품 로드맵, PM과 디자이너의 관계, 제품별 협업 방식은 별도의 프로세스로 구분한다. - 모든 조직에 동일한 방식을 적용하기보다 팀의 규모, 성장 단계, 구성원 관계에 맞춰 조정해야 한다. - 디자인 팀 프로세스는 제품 팀의 목표를 대신하는 것이 아니라, 디자인 조직 전체의 기준과 소속감을 보완하는 역할을 한다. ## 코로나19와 팀 문화 - 팬데믹 기간에는 개인적 상황과 정신 건강이 업무 생산성에 직접적인 영향을 준다. - 리더는 평상시 생산성의 100%를 기대하기보다, 일시적으로 60% 수준까지 떨어질 수 있음을 인정하고 휴식과 정신 건강을 위한 휴가를 권장했다. - 원격 근무는 자연스러운 사회적 연결을 약화시키므로, 정기적인 협업과 팀 활동이 공동체 의식을 유지하는 데 도움이 된다. - 다만 위기 상황에서 프로세스를 급격히 바꾸기보다, 팀이 변화할 준비가 되어 있는지 먼저 판단해야 한다. - 피그마가 소개하는 방식은 원격 환경에서만 유효한 것이 아니라, 대면 조직에도 적용할 수 있는 일반적인 운영 원칙을 포함한다. ## 주간 프로세스: 월요일 워밍업 - **참여자**: 제품 디자이너를 중심으로 하며, 필요에 따라 리서치와 브랜드 담당자도 참여한다. - **시간**: 매주 월요일 오전 9시 30분부터 10시까지, 30분간 진행한다. - **목적**: 무거운 업무 논의보다 가볍고 즐거운 활동으로 한 주를 함께 시작하는 것이다. - 회의는 네 부분으로 구성되며, 제공된 글에서는 첫 번째 항목인 **주말 업데이트**까지 설명되어 있다. - **주말 업데이트(5~10분)**: 구성원들이 주말에 무엇을 했는지 공유하며 자연스럽게 대화를 시작한다. - 이런 짧은 모임은 업무 진행 상황을 점검하기보다, 서로의 일상과 상태를 이해하고 한 주의 분위기를 여는 데 초점을 둔다. ## 적용을 위한 시사점 - 디자인 조직은 제품 스쿼드에 흡수되지 않도록 별도의 연결 장치를 유지하는 것이 좋다. - 정기적인 가벼운 모임, 리뷰, 회고 등을 통해 품질 기준과 팀 소속감을 함께 관리할 수 있다. - 다만 팀의 규모와 상황에 따라 빈도와 형식을 조정하고, 특히 원격·위기 상황에서는 생산성보다 구성원의 지속 가능성을 우선해야 한다. ※ 제공된 본문은 ‘월요일 워밍업’의 주말 업데이트 설명 중간에서 끝나 있어, 이후의 주간 프로세스와 월간·분기별 활동, 8가지 운영 팁은 포함하지 않았습니다.

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

Figma프로덕트 디자인user-researchremote-collaboration+1

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

Figma의 시리즈 D 라운드

Figma는 2020년 4월, a16z의 피터 레빈과 마크 앤드리슨이 주도한 5,000만 달러 규모의 Series D 투자를 유치했다고 발표했다. 코로나19로 재택근무가 확산되면서 Figma는 인터페이스 디자인을 넘어 화이트보딩, 다이어그램, 슬라이드 제작 등 다양한 협업 도구로 활용되고 있었다. 확보한 자금은 핵심 디자인·프로토타이핑 플랫폼의 성능과 안정성을 강화하고, 시각적 커뮤니케이션과 창작을 위한 새로운 제품을 개발하는 데 사용될 예정이다. ## Series D 투자 유치 - Figma는 총 5,000만 달러의 Series D 투자를 유치했다. - 투자는 a16z의 피터 레빈과 마크 앤드리슨이 주도했다. - 기존 투자자인 Index, Greylock, KPCB, Sequoia, Founders Fund도 참여했다. - Durable Capital의 헨리 엘렌보겐과 여러 엔젤 투자자도 새롭게 투자자로 합류했다. ## 코로나19와 Figma 사용 확대 - 재택근무로 집과 직장의 경계가 흐려지면서 Figma의 사용량이 크게 증가했다. - 기존의 인터페이스 디자인과 프로토타이핑 외에도 다음과 같은 작업에 활용됐다. - 시각적 화이트보딩 - 다이어그램 작성 - 프레젠테이션 제작 - 온라인 환경에 맞춘 새로운 활용 사례도 등장했다. - 가상 디자인 스프린트 - 도시 설계 및 시각화 - Minecraft 스킨 제작 - 이는 Figma가 전문 디자이너만을 위한 도구가 아니라, 다양한 사용자가 시각적으로 생각하고 협업하는 플랫폼으로 확장되고 있음을 보여준다. ## 투자금의 활용 방향 - 핵심 디자인 및 프로토타이핑 플랫폼에 대한 투자를 확대한다. - 팀이 함께 작업할 수 있는 환경의 성능과 신뢰성을 강화한다. - Figma를 더욱 강력하고 안정적인 협업 도구로 발전시킨다. - 디자이너뿐 아니라 비디자이너까지 포함한 전 세계 커뮤니티를 지원한다. - 시각적 커뮤니케이션과 창작을 위한 새로운 용도의 전용 제품을 개발한다. ## Figma의 장기 비전 - Figma의 비전은 디자인을 모든 사람이 이용할 수 있도록 만드는 것이다. - 웹 기반 디자인 도구를 바탕으로 협업과 접근성을 확대하려 한다. - 디자인을 특정 직군의 전문 업무가 아니라, 아이디어를 표현하고 공유하는 보편적인 커뮤니케이션 방식으로 확장하려는 방향이 드러난다. - 회사는 이러한 목표를 추진하기 위해 추가 인재를 채용한다고 밝혔다. 이번 발표는 Figma가 단순한 디자인 소프트웨어를 넘어, 원격 협업과 시각적 사고를 지원하는 범용 창작 플랫폼으로 성장하려는 전략을 보여준다. 사용자라면 디자인 작업뿐 아니라 브레인스토밍, 문서 시각화, 발표 자료 제작 등 다양한 협업 용도로 Figma를 활용해볼 수 있다.

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

Figma프로토타이핑collaborative-designweb-design+2

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

새로운 Zeplin 연동

Figma는 Zeplin과의 통합을 네이티브 플러그인으로 전면 재구축해 디자인과 개발 간 핸드오프를 개선했다. 사용자는 Figma에서 프레임·컴포넌트·색상 스타일·텍스트 스타일을 몇 번의 클릭만으로 Zeplin에 내보낼 수 있으며, 개발자는 정확한 스펙·에셋·코드 스니펫을 자동으로 생성할 수 있다. 새 통합은 대형 파일 처리 성능과 해상도 문제를 해결하고, 향후 Figma 컴포넌트 변경 사항을 Zeplin에 자동 반영하는 기능도 검토한다. ## Figma와 Zeplin 통합의 배경 - Zeplin은 디자인 결과물을 개발자와 제품 팀에 전달하는 협업 및 핸드오프 도구다. - Figma의 기존 Zeplin 통합은 Figma가 공식 출시되기 전부터 제공됐다. - 기존 통합을 통해 매달 30만 개 이상의 Figma 파일이 Zeplin으로 내보내졌다. - 재택근무 확산으로 온라인 협업 수요가 커지면서 사용량이 추가로 30~40% 증가했다. ## 네이티브 플러그인으로 재설계 - 두 번째 버전에서는 내보내기 경험과 성능 문제를 개선하는 데 초점을 맞췄다. - Figma용 네이티브 플러그인으로 다시 구축해 다음을 가능하게 했다. - 더욱 매끄러운 사용자 workflow - 통합 기능의 유지보수 간소화 - 새로운 기능을 추가하기 쉬운 구조 - 대용량 Figma 파일과 프레임을 내보낼 때 발생하던 성능 저하와 해상도 문제도 개선됐다. ## Figma에서 Zeplin으로 내보내는 디자인 요소 - 사용자는 Figma에서 다음 요소를 몇 번의 클릭으로 Zeplin에 export할 수 있다. - 프레임 - 컴포넌트 - 색상 스타일 - 텍스트 스타일 - 디자인 요소가 Zeplin으로 전달되면 개발자와 제품 팀은 이를 기반으로 작업할 수 있다. - 내보낸 에셋은 Zeplin의 스타일 가이드에서도 직접 확인할 수 있다. ## 개발자 핸드오프 기능 - Zeplin은 전달받은 디자인을 바탕으로 다음 정보를 자동 생성한다. - 정확한 디자인 스펙 - 필요한 이미지 및 기타 에셋 - 개발에 활용할 수 있는 코드 스니펫 - 이를 통해 디자인 파일을 직접 분석하거나 치수를 수동으로 확인하는 부담을 줄인다. - Figma에서 만든 디자인과 실제 개발 결과물 사이의 커뮤니케이션을 표준화하는 역할을 한다. ## 웹 기반 Figma의 확장 가능성 - Figma가 웹에서 동작한다는 점은 다른 디자인 도구와 차별화되는 장점으로 제시됐다. - 웹 기반 구조를 활용하면 Figma의 변경 사항을 외부 서비스와 더 긴밀하게 연결할 수 있다. - 향후 Figma 컴포넌트가 수정되면 해당 변경 사항을 Zeplin에 자동으로 전송하는 기능이 검토되고 있다. - 이 기능이 구현되면 매번 수동으로 다시 export하지 않아도 디자인과 개발 사양을 최신 상태로 유지할 수 있다. ## 이용 방법과 혜택 - 새 Zeplin 플러그인은 Figma Community에서 설치할 수 있다. - 기존 사용자도 개선된 성능과 해상도로 대형 파일을 export할 수 있다. - Figma 고객이 Zeplin을 시험해 볼 수 있도록 Zeplin Organization 플랜 3개월 무료 혜택이 제공됐다. 실무에서는 Figma를 디자인의 원본으로 유지하고, Zeplin을 개발 사양·에셋·스타일 가이드 전달 도구로 활용하면 효과적이다. 특히 컴포넌트와 스타일을 체계적으로 관리하는 팀이라면 export 규칙을 정하고 변경 사항을 정기적으로 동기화하는 것이 좋다.

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

Figmadeveloper-toolszeplindesign-handoff+2

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

더 많은 교실에 Figma 도입

Figma는 코로나19로 원격 수업이 확산되는 상황에 맞춰 교육 프로그램을 학위 과정 중심에서 온라인 강좌, 부트캠프, 학교 주최 해커톤 등으로 확대했다. 교육 대상자는 Professional 플랜 수준의 무료 기능과 수업 자료, 교육자 커뮤니티를 이용할 수 있다. 이를 통해 학생의 배경이나 학습 목적과 관계없이 디자인 교육 접근성을 높이고, 온라인 협업 기반의 수업을 지원하려는 것이 글의 결론이다. ## 원격 교육 확산과 Figma의 대응 - 코로나19로 교육기관과 교사들이 수업 방식을 전면적으로 원격 환경에 맞춰야 했다. - Figma는 원격 교실을 구축하고 운영하는 과정에서 발생하는 교육자들의 어려움을 접하며 교육 지원을 강화했다. - 기존에도 무료 시작 정책과 공인 교육기관의 학생·교사 할인 제도를 운영했으며, 전 세계 10만 명 이상이 교실에서 Figma를 사용하고 있었다. - RIT의 Miguel Cardona, Students Who Design 등 교육자 및 단체와 협력해 수업 자료와 온라인 교실 운영 가이드를 제공했다. ## 교육 프로그램의 적용 범위 확대 - 기존 대상은 공인 교육기관의 학위 과정에 주로 한정되어 있었다. - 새 프로그램에서는 다음과 같은 다양한 학습 환경을 포함한다. - 온라인 강좌 - 디자인·개발 부트캠프 - 학교가 주최하는 해커톤 - 대면 및 가상 교실 - 정규 학위 과정 이외의 교육 프로그램 - 학생이 학위를 취득하지 않더라도 기술을 향상하거나 커리어를 전환하려는 경우 교육 프로그램의 혜택을 받을 수 있도록 범위를 넓혔다. ## 제공되는 Education 플랜 혜택 - 신청이 승인되면 무료 Education 플랜을 사용할 수 있다. - Professional 플랜의 주요 기능이 제공된다. - 편집자 수 제한 없음 - 파일 수 제한 없음 - 프로젝트 수 제한 없음 - 수업 운영에 활용할 수 있는 실용적인 교실 템플릿과 교육 자료를 제공한다. - 학생과 교육자가 교류할 수 있는 커뮤니티에 참여할 수 있다. - 온라인 이벤트와 밋업에 특별 초대를 받을 수 있다. ## 온라인 협업 도구로서의 Figma - Figma는 여러 사용자가 온라인에서 동시에 작업할 수 있어 시각 디자인 수업에 적합하다. - UC Berkeley의 Eric Paulos 교수는 학생들이 이미 다양한 활동에서 온라인 협업에 익숙하기 때문에 Figma가 이러한 협업 경험을 디자인 작업으로 자연스럽게 확장한다고 평가했다. - 원격 수업에서도 교사가 파일을 정리하고, 과제를 확인하며, 학생 작업에 피드백을 제공할 수 있다. - 디자인 결과물과 수업 과정을 하나의 협업 공간에서 관리할 수 있다는 점이 기존의 분산된 온라인 수업 도구와 차별화된다. ## 디자인 교육 접근성 확대 - Figma는 전문 디자이너를 목표로 하는 학생뿐 아니라 디자인을 처음 접하는 학습자도 지원하려 한다. - 대학원 등 고등 교육을 받는 학생, 실무 역량을 키우는 사람, 커리어 전환을 준비하는 사람 모두를 대상으로 한다. - 교육 범위를 넓히는 것은 “디자인을 모두에게 접근 가능하게 한다”는 Figma의 사명과 연결된다. - 회사는 교육 프로그램을 전담할 인력을 두고, 교육자와 학생의 의견을 지속적으로 수렴할 계획이다. 교육 기관이나 부트캠프가 Figma를 도입할 때는 Education 플랜 신청과 함께 교실 템플릿, 파일 구성 규칙, 과제 피드백 방식을 미리 정하는 것이 좋다. 특히 실시간 공동 편집과 온라인 피드백 기능을 활용하면 원격 환경에서도 참여형 디자인 수업을 운영할 수 있다.

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

Figma사용자 경험remote-collaborationhuman-computer-interaction+2

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

가벼운 프로토

프로토타입은 완성도가 높아야만 가치가 있는 것이 아니라, 초기 단계의 가벼운 형태만으로도 제품 방향과 사용자 경험을 검증하고 협업을 촉진할 수 있다. 일찍 공유하면 카피, 상호작용, 기술적 실현 가능성에 대한 피드백을 빠르게 받아 불필요한 재작업을 줄일 수 있다. Figma는 프로토타입을 제품 테스트뿐 아니라 원격 협업, 발표, 고객 커뮤니케이션을 위한 정보 전달 도구로도 활용한다. ## 가벼운 프로토타이핑의 가치 - 프로토타입은 사용자가 디자인과 어떻게 상호작용하는지 확인하고 피드백을 얻는 수단이다. - 제품 개발 초기에는 고충실도 결과물보다 빠르게 만들고 공유할 수 있는 비공식 프로토타입이 더 효과적일 수 있다. - 완성되지 않은 작업을 공개하는 것은 부담스럽지만, 초기 피드백을 통해 문제를 조기에 수정하고 향후 개발 비용과 시간을 절약할 수 있다. - 프로토타입은 디자이너의 비전을 협업자, 이해관계자, 개발팀에 전달하는 커뮤니케이션 도구이기도 하다. ## 카피와 콘텐츠 검증 - 간단한 사용자 흐름만으로도 헤더, 본문, 버튼의 문구가 서로 잘 맞는지 확인할 수 있다. - 사용자가 다음에 어떤 행동을 해야 하는지 문구가 명확하게 안내하는지 검토할 수 있다. - 여러 사람이 UX 카피와 마이크로카피를 작성할 때 발생하는 표현의 불일치를 발견할 수 있다. - 공식적인 보이스·톤 가이드가 없더라도 전체 흐름에서 문체와 분위기가 일관적인지 방향성을 점검할 수 있다. ## 개발팀에 맥락 전달 - 개발자 핸드오프 단계의 정교한 프로토타입뿐 아니라, 초기 아이디어도 개발팀과 공유하는 것이 유용하다. - 개발자는 디자인 의도를 이해하는 동시에 다음과 같은 현실적인 문제를 조기에 지적할 수 있다. - 구현이 어려운 기능 - 예상되는 기술적 장애물 - 추가 탐색이나 설계가 필요한 부분 - 프로토타입은 최종 결과물이 아니라 구현을 위한 청사진이므로, 디자인의 배경과 의도를 함께 제공할수록 실제 구현이 쉬워진다. ## 상호작용을 구체적으로 표현하기 - 가벼운 프로토타입이라도 화면 간 경로와 상호작용은 가능한 한 명확하게 지정해야 한다. - 예를 들어 `On Click`, `On Drag`, `While Hovering`과 같은 조건을 사용해 사용자의 행동과 시스템 반응을 표현할 수 있다. - 상호작용을 구체화하면 팀원들이 의도한 동작을 정확히 이해하고, 테스트 결과와 피드백의 품질도 높아진다. ## Figma에서의 커뮤니케이션 활용 - Figma는 프로토타이핑 기능을 제품 개발뿐 아니라 사내 정보 공유와 원격 협업에도 활용한다. - 원격 근무 환경에서는 작업물과 정보를 한곳에서 공유하는 일이 특히 중요해졌으며, 프로토타입이 이를 지원한다. ### Presentation View 활용 - Figma는 슬라이드 덱을 공유할 때 Presentation View를 사용한다. - 전사 회의에서는 여러 팀원이 하나의 마스터 파일에 각자 발표 슬라이드를 추가할 수 있다. - 분기 계획, 리서치 결과, 원격 근무 방식 등 다양한 정보를 발표하고 피드백받는 기반으로 활용한다. - 영업팀은 고객용 원페이저를 PDF 대신 프로토타입 URL로 공유한다. - 수신자는 링크를 클릭하며 내용을 탐색할 수 있고, GIF 같은 애니메이션 요소도 지원되어 정적인 문서보다 참여도가 높다. - 사용자 컨퍼런스와 같은 행사 발표 자료도 Figma에서 제작하고 공유할 수 있다. ## 실용적인 적용 방법 - 초기 아이디어 단계부터 프로토타입을 공유해 문제를 조기에 발견한다. - 시각적 완성도보다 검증하려는 목적을 먼저 정한다. - 카피, 상호작용, 기술적 제약 등 검토 대상에 맞춰 필요한 수준만 구현한다. - 프로토타입 링크와 함께 디자인 의도, 미해결 질문, 피드백이 필요한 부분을 설명한다. - 최종 산출물뿐 아니라 발표, 고객 설명, 원격 협업에도 프로토타입을 적극 활용한다.

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

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

figma·2020년 4월 20일·4분 읽기큐레이션 요약

Inneract Project가 유색인종

Inneract Project는 흑인 및 유색인종 청소년이 어린 시절부터 디자인을 접하고, 교육과 직업으로 이어지는 진로를 준비하도록 돕는 비영리 프로그램이다. 초기에는 종이와 손을 활용한 창의적 사고 교육으로 시작했지만, UX/UI 디자인 수요가 커지면서 Figma를 도입해 교육 기회를 확대했다. Figma의 무료·웹 기반·협업 기능은 비용과 장비의 장벽을 낮추고 학생들의 실습과 창작을 크게 늘렸다. ## 디자인 교육을 통한 진로 기회 확대 - Maurice Woods는 2004년 자신의 커뮤니티와 같은 소외된 환경의 흑인·유색인종 학생들이 일찍부터 디자인을 진로로 고려하도록 Inneract Project를 설립했다. - 디자인을 단순한 표현 수단이 아니라 다음과 같은 변화의 도구로 보았다. - 지역사회의 문제와 목소리를 표현 - 다양한 세계의 현실을 제품과 서비스에 반영 - 학생들이 디자인 교육과 직업에 접근할 수 있도록 지원 - 중학교 시기부터 체계적으로 디자인을 배우게 해 대학 진학이나 직업 선택을 준비하도록 하는 것이 목표였다. ## 초기 교육: 도구보다 사고와 창의성 - 초기 프로그램에서는 소프트웨어나 하드웨어를 사용하지 않고 종이와 손만으로 활동했다. - 학생들이 직접 만들고 실험하면서 다음 역량을 키우는 데 집중했다. - 비판적 사고 - 창의적 사고 - 아이디어를 시각화하는 능력 - 이러한 입문 과정은 현재까지도 유지되며, 학생들이 디자인에 흥미와 열정을 느끼게 하는 출발점으로 활용된다. ## 전문 디자인 교육과 장비의 한계 - 학생들이 더 정식적인 교육을 원하면서 ‘Pathway to Design’이라는 체계적인 커리큘럼을 개발했다. - 당시 수요가 높았던 그래픽 디자인을 중심으로 교육했으며, 전문 디자인 소프트웨어와 하드웨어도 포함했다. - 그러나 디자인 도구의 높은 비용 때문에 다음과 같은 문제가 있었다. - 기부에 의존해 소프트웨어 라이선스를 구매 - 충분한 라이선스를 확보하지 못해 학생들이 컴퓨터를 공유 - 모든 학생이 전문 도구를 직접 사용하기 어려움 - 학생들에게 실질적인 디자인 경험을 제공하려면 비용과 장비 접근성 문제가 해결되어야 했다. ## Figma 도입과 접근성 향상 - 모바일 앱과 인터페이스 디자인이 중요해지면서 IP의 교육 과정도 그래픽 디자인에서 UX/UI 디자인으로 확장됐다. - Figma 도입은 교육 접근성을 높이는 핵심 계기가 됐다. - 무료로 시작할 수 있어 학생과 프로그램의 비용 부담 감소 - 초보자에게 친숙하면서도 전문 기업에서 사용할 수 있는 수준의 기능 제공 - 별도 설치 없이 브라우저에서 사용 가능 - 학생들은 집에 개인 컴퓨터가 없어도 도서관이나 학교 컴퓨터실에서 자신의 파일에 접근할 수 있었다. - 수업 외 시간에도 파일을 열어 연습할 수 있어 디자인 학습 속도와 이해도가 높아졌다. ## 브라우저 기반 협업과 프로젝트 확대 - Figma를 사용하면서 IP는 교실 안팎의 협업 프로젝트를 더 많이 운영할 수 있게 됐다. - 학생들은 다음과 함께 작업했다. - 같은 수업의 다른 학생들 - 자원봉사자 - 지역 기업과 외부 파트너 - 교육 프로그램도 단일 워크숍, 여러 날에 걸친 수업, 해커톤, 기업·기관과의 협업 등으로 다양해졌다. - 도구의 접근성이 높아지면서 학생들은 단순히 디자인 기능을 배우는 것을 넘어 실제 문제를 해결하는 프로젝트를 수행했다. ## 학생들의 프로젝트와 성장 - Leigh는 학교 포스터와 그래픽을 제작한 뒤 Academy of Art University에서 그래픽 디자인을 공부하고 있다. - Saaleha는 UC Berkeley를 졸업하고 디자인 리서치 분야의 진로를 모색하고 있다. - Sierra는 콘크리트 위에서 사용하기 어려운 할머니의 보행기를 개선하는 디자인을 구상했다. - 노인을 위한 보행 보조기 콘셉트 제작 - 예술가와 팬을 연결하는 모바일 앱 디자인 - Noah는 노숙 청소년을 위한 지원 서비스 앱의 디지털 광고 캠페인을 만들었다. - 거리 예술과 그래피티를 다룬 잡지 ‘Esoteric’의 무드보드 제작 - 지역 예술가 인터뷰와 직접 촬영한 사진을 활용 - 학생들의 사례는 디자인 교육이 창의성뿐 아니라 지역사회 문제 해결과 진로 탐색으로 이어질 수 있음을 보여준다. ## 실용적인 시사점 - 디자인 교육은 고가의 장비보다 창의적 사고와 문제 정의에서 시작할 수 있다. - 이후 전문 도구를 도입할 때는 무료 사용, 웹 접근성, 협업 기능이 교육 격차를 줄이는 중요한 기준이 된다. - 학생들이 자신의 경험과 지역사회의 문제를 프로젝트 주제로 삼도록 하면 디자인 학습의 몰입도와 사회적 의미를 함께 높일 수 있다.

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

Figmagraphic-designmobile-appswireframing+2

figma·2020년 4월 19일·4분 읽기큐레이션 요약

교실에서 활용할 수 있는

Figma를 활용한 실습 중심 수업은 학생들이 디자인 도구를 익히는 동시에 사고·제작·협업 능력을 기르는 데 효과적이다. 글에서는 초급부터 중급까지 다양한 수준의 학생을 대상으로, Figma의 협업 기능과 컴포넌트·오토 레이아웃·그리드 등을 활용하는 교실 활동을 소개한다. 활동 결과물을 하나의 파일에 모아 갤러리처럼 공유하면 서로의 작업 과정과 디자인 스타일을 관찰하고 피드백할 수 있다. ## 수업 첫 주에 적합한 학생 트레이딩 카드 - 학생들이 소셜 미디어 프로필 형태의 자기소개 카드를 제작한다. - 학생 간 친밀감을 높이는 동시에 Figma의 기본 기능을 익힐 수 있다. - **Auto Layout**과 **컴포넌트**를 활용해 재사용 가능한 프로필 요소를 만든다. - 모든 학생이 같은 파일에서 작업하도록 하면 서로의 제작 과정과 스타일을 볼 수 있다. - 완성 후 별도의 페이지를 만들어 결과물을 갤러리처럼 전시한다. - 숙련된 학생은 직접 질문이나 아이스브레이커 요소를 추가할 수 있다. - 난이도: 초급 - 주요 기능: Auto Layout, Multiplayer Editing ## 도형 제작으로 기본 도구 익히기 - 펜 도구, 레이아웃 그리드, 속성 패널을 사용해 하트 모양을 제작한다. - 단순한 형태를 직접 만들며 Figma의 주요 도구에 대한 자신감과 사용 능력을 높인다. - 완성된 하트를 학생별로 전시해 다양한 해석과 스타일을 비교한다. - 추가 과제로 Smart Animate를 사용해 하트가 뛰는 듯한 애니메이션을 만들 수 있다. - 하트 외에 다른 도형을 디자인하고 스타일을 적용하게 할 수도 있다. - 난이도: 초급 - 주요 기능: Pen Tool, Properties Panel, Layout Grid, Smart Animate ## 탱그램으로 형태와 기하학 탐구하기 - 일곱 개의 조각으로 구성된 탱그램 퍼즐을 활용해 형태와 기하학을 학습한다. - 기본 도형을 조합해 동물과 같은 인식 가능한 이미지를 만든다. - 추상적인 형태도 제작하게 하여 기하학적 탐구를 확장한다. - 활동 전에 기하학의 역사에 관한 짧은 설명을 제공하면 학습 맥락을 이해하는 데 도움이 된다. - 숙련도를 높이려면 학생들이 다른 퍼즐을 직접 조사하고 재사용 가능한 퍼즐 세트를 제작하도록 할 수 있다. - 난이도: 초급 - 주요 기능: Components, 회전 및 정렬 ## 연구 결과를 시각화하는 디자인 리서치 페이퍼 - 학생들이 조사한 연구 결과를 설득력 있는 시각 자료로 표현한다. - 완성된 결과물을 공동 문서에 모아 학생들이 서로 읽고 댓글을 남기도록 한다. - 정보를 어떻게 배치하고 전달할지 고민하면서 시각적 위계와 커뮤니케이션 디자인 원리를 익힌다. - 결과물에 대한 토론을 통해 연구 내용뿐 아니라 편집과 시각화 방식도 함께 비평할 수 있다. - 난이도: 초급 - 주요 기능: Layout Grids, Keyboard Shortcuts ## 재사용 가능한 채팅 창 컴포넌트 만들기 - 학생들이 협업 문서 안에서 대화하고 시각적 피드백을 주고받을 수 있는 채팅 창을 제작한다. - 각자 직접 커스텀 컴포넌트를 만들어 향후 프로젝트에도 사용할 수 있도록 한다. - 단순한 화면 제작을 넘어 재사용성과 확장성을 고려한 컴포넌트 설계를 연습한다. - 실제 협업 프로젝트에서 활용할 수 있다는 점 때문에 학생들의 참여도가 높다. - 난이도: 중급 - 주요 기능: Auto Layout ## 제약 조건이 있는 협업 일러스트레이션 - 공통된 제약 조건 아래에서 하나의 통일된 일러스트레이션 또는 아이콘 시스템을 공동 제작한다. - 제한된 색상 팔레트, 특정 그리드 등 명확한 규칙을 적용해 일관된 결과물을 만든다. - 예시에서는 각진 형태의 맞춤형 그리드와 제한된 색상을 사용해 모바일 핸드북 앱의 내용을 설명하는 그래픽을 제작했다. - 협업 과정에서 학생들이 서로 돕고 비평하도록 하면 디자인 시스템과 피드백 능력을 함께 기를 수 있다. - 개별 작품의 완성도보다 여러 결과물이 하나의 시각적 체계로 보이는지가 중요하다. - 난이도: 중급 - 주요 기능: 색상 스타일, 그리드 및 협업 기능 ## 수업에 적용할 때의 공통 원칙 - 결과물만 평가하기보다 학생들이 같은 파일에서 작업하며 과정과 선택을 공유하도록 한다. - 완성된 작업을 갤러리로 구성하면 학급 전체의 다양한 접근 방식을 비교할 수 있다. - 초급 활동에서는 기본 도구와 형태 제작에 집중하고, 중급 활동에서는 컴포넌트와 협업 시스템 설계로 확장한다. - 기본 과제에 선택형 도전 과제를 추가해 숙련도가 높은 학생도 계속 탐구할 수 있게 한다. - Figma의 실시간 협업 기능을 활용하면 제작, 피드백, 토론을 하나의 작업 흐름 안에서 진행할 수 있다. 수업에서는 하트 만들기나 트레이딩 카드처럼 진입 장벽이 낮은 과제로 시작한 뒤, 탱그램·연구 시각화·협업 일러스트레이션처럼 형태, 정보 구조, 디자인 시스템을 요구하는 활동으로 난도를 높이는 방식이 효과적이다.

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

Figma사용자 인터페이스collaborative-designauto-layout+2

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

Figma + Lambda School

Lambda School은 실시간 온라인 수업에 Figma를 결합해 대면 교실의 상호작용성과 협업성을 재현하고자 했다. Figma를 통해 학생들은 수업 자료를 함께 탐색하고, 작업 과정을 공유하며, 실시간·비동기 피드백을 주고받을 수 있었다. 또한 수업 중 생성된 작업물이 포트폴리오로 축적되어 학습과 취업 준비를 자연스럽게 연결했다. ## 온라인 수업을 위한 협업형 학습 환경 - Lambda School은 선불 학비 없이 9개월 동안 진행되는 온라인 실시간 교육 프로그램이다. - 웹 개발, 모바일 개발, 데이터 과학, UX 디자인 등을 가르치며, 기술 분야 취업에 필요한 실무 역량과 지원을 제공한다. - 핵심 과제는 원격 환경에서도 대면 수업처럼 연결되고, 직접 참여하며, 함께 작업할 수 있는 교실을 만드는 것이었다. - Figma는 브라우저 기반 공동 편집 기능을 통해 이 목표를 지원했다. ## 발표 자료를 함께 탐색하는 인터랙티브 수업 - 강사가 화면을 공유하고 학생들이 수동적으로 슬라이드를 보는 방식과 달리, Figma에서는 발표 자료 자체를 함께 조작할 수 있다. - 학생들은 다음과 같은 방식으로 수업 내용을 능동적으로 탐색한다. - 화면을 확대해 세부적인 곡선이나 디자인 요소 확인 - 캔버스를 스크롤하며 특정 로고나 사례 살펴보기 - 참가자들의 포인터를 통해 강사가 설명하는 위치를 실시간으로 파악 - 발표가 일방적인 전달이 아니라 강사와 학생이 같은 자료를 함께 살펴보는 활동이 된다. ## 작업 과정을 공유하는 디자인 실습 - 학생들은 처음부터 Figma에서 직접 디자인하고, 같은 파일 안에서 결과물을 반복적으로 발전시킨다. - 디자인의 변화 과정이 그대로 남기 때문에 학생들은 다음을 수행할 수 있다. - 다른 학생의 작업 과정을 관찰 - 진행 중인 결과물에 피드백 제공 - 동료의 디자인을 리믹스해 새로운 아이디어 실험 - 이러한 방식은 단순히 완성된 결과만 평가하는 것이 아니라, 디자인이 발전하는 과정 자체를 학습 대상으로 만든다. - 여러 디자이너가 하나의 프로젝트를 함께 완성하는 실제 업무 환경에도 익숙해질 수 있다. ## 실시간 피드백과 비동기 지원 - Figma의 댓글, 브라우저 편집 기능, 실시간 공동 작업을 활용해 학생과 강사가 작업 중인 디자인에 바로 의견을 남길 수 있다. - 학생들은 서로의 디자인에 별표를 남겨 좋은 작업을 투표하거나, 작업 파일을 보며 의견을 교환한다. - 동시에 작업하더라도 각자 파일의 영역에서 독립적으로 디자인할 수 있어, 서로의 작업을 방해하지 않는다. - 즉시 피드백이 필요할 때는 강사나 동료를 불러 같은 파일에서 직접 픽셀을 수정하며 논의할 수 있다. - 반대로 집중이 필요한 경우에는 다른 사람의 작업을 관찰만 하거나, 나중에 댓글을 남기는 비동기 방식도 가능하다. - 이 구조는 참여자 모두가 아이디어를 제공하면서도 학습자의 작업 자율성을 보장한다. ## 학습 결과물을 포트폴리오로 축적 - Lambda School은 수업뿐 아니라 취업까지 지원하며, 학생들이 자신의 역량을 고용주에게 보여줄 포트폴리오를 만들도록 돕는다. - Figma에서는 학생들의 디자인이 생성, 수정, 저장되는 과정이 지속적으로 기록된다. - 따라서 학생들은 오래된 파일을 찾아 정리하지 않아도 학습 과정과 최종 결과물을 포트폴리오에 활용할 수 있다. - 동료들의 작업에도 계속 접근할 수 있어 수업이 끝난 뒤에도 서로의 디자인에서 학습할 수 있다. - 결과적으로 학습 기록, 협업 과정, 최종 산출물이 하나의 작업 공간에 함께 남는다. ## 실용적인 결론 원격 디자인 교육에서는 화상회의만 제공하는 것보다 공동 편집, 실시간 피드백, 비동기 댓글, 작업 이력 보존 기능을 함께 구성하는 것이 효과적이다. 특히 학습자가 결과물뿐 아니라 제작 과정까지 기록할 수 있는 도구를 사용하면 수업 참여와 포트폴리오 준비를 동시에 달성할 수 있다.

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

Figma사용자 경험collaborative-design웹 개발+3

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

더 이상 고민하지 마

Figma는 팀과 작업 규모가 커질수록 디자인 파일을 찾기 어려워지는 문제를 해결하기 위해 **Universal Search**를 도입했다. 또한 파일 내부의 페이지·프레임과 외부 문서를 연결하는 **Links** 기능을 제공해, 협업자가 디자인의 위치와 배경을 쉽게 이해하도록 했다. 두 기능의 목표는 디자이너뿐 아니라 개발자·기획자·마케터 등 다양한 구성원이 Figma를 더 직관적으로 탐색하고 협업하도록 만드는 것이다. ## Universal Search로 작업 찾기 - 기존에는 주로 파일 이름을 기준으로 검색해야 했지만, 이제 파일명을 몰라도 작업을 찾을 수 있다. - 워크스페이스에서 다음 항목을 통합 검색할 수 있다. - 파일 - 프로젝트 - 팀 - 사용자 - 비공개 플러그인 - 검색어를 입력하는 즉시 여러 범주의 결과가 표시된다. - 특정 범주만 보도록 결과를 필터링할 수 있다. - Figma Community 베타 사용자는 커뮤니티 파일, 퍼블리셔, 플러그인까지 검색 결과에서 확인할 수 있다. - 팀과 Figma 사용량이 커질수록 증가하는 탐색 비용을 줄이고, 디자이너와 협업자가 최신 작업을 더 빠르게 찾도록 설계됐다. ## 디자인 파일에 맥락과 탐색 경로 추가 - **Links** 기능을 사용하면 파일 안의 특정 페이지나 프레임으로 바로 이동하는 링크를 만들 수 있다. - 여러 페이지를 연결해 클릭 가능한 목차를 만들 수 있다. - 신규 참여자가 파일 구조를 빠르게 파악하도록 안내용 인덱스를 구성할 수 있다. - 최신 디자인, 초기 아이디어, 브레인스토밍 결과 등 서로 다른 작업 영역을 명확히 연결할 수 있다. ## 외부 문서와 디자인 연결 - 디자인은 제품 요구사항, 사양서, 사용자 페르소나 같은 외부 자료와 함께 이해해야 하는 경우가 많다. - Links를 활용하면 Figma 파일 안에 다음 자료를 연결할 수 있다. - 제품 요구사항 문서(PRD) - 기능 명세 및 스펙 - 사용자 조사 자료 - 사용자 페르소나 문서 - 관련 프로젝트 링크 - 디자인 파일을 관련 정보가 모이는 단일 기준점(single source of truth)으로 활용할 수 있다. - 협업자는 별도의 문서 저장소를 찾아다니지 않고 디자인과 관련 맥락을 한곳에서 확인할 수 있다. ## 개방적인 협업 환경을 위한 변화 - Figma 사용자의 절반 이상이 디자이너가 아닌 구성원이라는 점을 배경으로 한다. - Figma는 폴더와 파일명 중심의 탐색에서 벗어나 사람, 팀, 프로젝트와 같은 맥락 중심의 워크스페이스를 지향해 왔다. - Universal Search는 이러한 맥락 중심 접근을 검색 기능으로 확장한다. - Links는 디자인 파일을 단순한 결과물 저장소가 아니라 협업과 지식 공유의 중심으로 만든다. 실무에서는 Universal Search로 관련 작업을 빠르게 찾고, 각 파일에 목차·최신안 링크·PRD와 명세서 링크를 함께 배치하는 방식이 효과적이다. 이렇게 하면 디자인 파일을 처음 접하는 구성원도 별도의 설명 없이 작업의 구조와 배경을 파악할 수 있다.

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

Figmadesign-collaborationpluginsweb-applications+1

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

원격 리서치

원격 근무 환경에서 사용자 조사를 진행하려면 기존의 조사 프로세스는 유지하되, 참여자의 상황과 기술 숙련도를 고려한 세심한 조정이 필요하다. 특히 사용자 공감, 명확한 사전 안내, 제한된 참여 인원, 체계적인 기록과 공유가 중요하다. 원격 조사는 어려움도 있지만 지역적 제약을 넘어 다양한 사용자를 만날 수 있다는 장점도 제공한다. ## 사용자 공감을 최우선으로 하기 - 참여자는 개인적·직업적으로 어려운 상황에 놓여 있을 수 있으므로, 인터뷰 참여를 원하지 않을 가능성을 고려해야 한다. - 조사 일정이나 업무를 잠시 늦추거나 보류하는 것도 괜찮다는 유연한 태도가 필요하다. - 조사자는 사용자의 입장에서 현재 상황과 인터뷰 부담을 바라봐야 한다. ## 참여자가 따라 하기 쉬운 사전 안내 제공 - 화상회의나 협업 도구 사용법을 모든 참여자가 알고 있다고 가정해서는 안 된다. - 인터뷰 전에 스크리너와 준비 자료를 보내고, 다음 내용을 구체적으로 안내해야 한다. - 통화 참여 방법 - 필요한 장비와 사전 준비 - 세션 진행 방식 - 인터뷰 중 예상되는 활동 - 조사자에게는 당연해 보이는 내용도 참여자에게는 불편이나 불안의 원인이 될 수 있으므로, 상세한 설명이 참여자의 편안함을 높인다. ## 연구팀의 참여 범위 조절 - 화상 인터뷰에 사람이 많이 참여하면 사용자가 감시받는 듯한 불편함을 느낄 수 있다. - 기본적으로 진행자와 기록자 정도만 인터뷰에 직접 참여하는 것이 적절하다. - 추가 관찰자는 통화에 들어오는 대신 녹화본과 회고 세션을 활용하는 편이 좋다. - 녹화는 말의 내용뿐 아니라 말투와 분위기까지 보존하지만, 반드시 사전에 참여자의 동의를 받아야 한다. - 인터뷰 후에는 전체 연구팀이 참여하는 디브리핑을 진행해 다음을 확인한다. - 현재까지의 주요 발견 - 조사 결과의 공통된 흐름 - 아직 답하지 못한 질문 - 추가 조사가 필요한 영역 ## 비동기 방식으로 진행 상황 공유 - Figma 연구팀은 연구자가 진행 상황을 영상으로 녹화해 Slack에 공유하는 방식을 활용했다. - 업데이트 영상에는 다음 내용을 포함한다. - 지금까지 인터뷰한 참여자 - 예정된 인터뷰 일정 - 현재까지 파악한 인사이트 - 프로젝트 자료와 결과를 확인할 위치 - 이를 통해 모든 팀원이 인터뷰에 직접 참석하지 않아도 조사 진행 상황을 파악할 수 있다. ## 가상 보드로 조사 결과 정리 - 대면 회의실 대신 Figma 같은 협업 도구에 가상 보드를 만들어 조사 결과를 모으고 종합한다. - 가상 보드에는 다음 섹션을 구성할 수 있다. - **연구 질문**: 조사 목적과 답해야 할 핵심 질문 - **참여자**: 참여자의 특성, 직책, 사진, 주요 인용문 - **테마 보드**: 인터뷰 메모와 스티키 노트를 반복되는 주제별로 그룹화 - **미해결 질문**: 추가로 확인해야 할 문제와 주제 - **다음 단계**: 추가 인터뷰, 내부 회의 등 구체적인 후속 작업 - 인터뷰가 끝날 때마다 결과를 보드에 축적하면 팀 전체가 동일한 맥락에서 패턴과 공백을 확인할 수 있다. ## 원격 조사의 장점 활용 - 원격 조사는 이동이나 장소의 제약이 적어 대면 조사가 어려운 지역의 사용자도 만날 수 있다. - 특정 지역에 집중된 오프라인 조사보다 다양한 환경과 배경의 사용자를 포함하기 쉬울 수 있다. - 따라서 원격 방식을 단순한 대체 수단으로 보지 말고, 더 넓은 사용자 집단에 접근할 수 있는 기회로 활용할 수 있다. 원격 사용자 조사를 설계할 때는 참여자에게 충분한 안내를 제공하고, 인터뷰 인원을 최소화하며, 녹화·디브리핑·가상 보드로 팀의 맥락을 보존하는 것이 실용적이다.

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

Figmaslackuser-researchusability-testing+2