techlist.io
KREN

Techlist.io - 한국 테크 블로그 큐레이터

figma2분 읽기큐레이션 요약

무료 온라인 Skillshare 클래스로

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

원문 읽기(새 탭에서 열림)
Figma사용자 경험프로토타이핑프로덕트 디자인+4
figma3분 읽기큐레이션 요약

피그마 기능 하

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

원문 읽기(새 탭에서 열림)
Figma프로토타이핑real-time-collaborationuser-testing+2
figma3분 읽기큐레이션 요약

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
figma3분 읽기큐레이션 요약

Figma의 디자인 사전을 소개

디자인 업계는 예술·인쇄·출판의 역사에서 비롯된 전문 용어가 많아, 디자이너뿐 아니라 엔지니어·기획자·카피라이터·이해관계자에게도 협업 장벽이 될 수 있다. Figma는 구성원 간 원활한 소통을 돕기 위해 70개 용어로 시작한 오픈소스 **Design Dictionary**를 공개했다. 이 사전은 업계 변화에 맞춰 계속 확장되며, 커뮤니티의 제안으로 더욱 포괄적인 자료가 되는 것을 목표로 한다. ## 디자인 용어가 협업을 어렵게 만드는 이유 - 전문 산업에는 각 분야만의 고유한 언어가 있으며, 이는 전문가에게는 정밀한 소통 수단이 된다. - 반면 업계에 새로 들어온 사람에게는 전문 용어가 위압적이고 혼란스럽게 느껴질 수 있다. - 디자인은 사용성, 타이포그래피, 시각 요소 등 세부 개념이 많아 특히 복잡한 어휘 체계를 갖고 있다. - 디지털 인터페이스 제작에서는 조직의 여러 직군이 디자인에 관여한다. - 엔지니어는 디자인을 실제 코드로 구현한다. - 카피라이터나 편집자는 화면에 문구를 추가한다. - 제품 관리자는 전체 작업을 조율한다. - 이해관계자는 디자인을 검토하고 승인한다. - 이들이 같은 용어를 서로 다르게 이해하면 요구사항 전달과 의사결정이 어려워진다. ## Figma Design Dictionary의 목적 - 디자인 관련 기본 용어와 개념을 쉽게 찾아볼 수 있는 용어집이다. - 디자인을 처음 배우는 사람뿐 아니라 디자이너와 협업하는 비디자이너를 대상으로 한다. - Figma가 다양한 배경의 인재를 채용하면서 실제로 겪은 커뮤니케이션 문제에서 출발했다. - 비즈니스, 데이터 분석, 고객 지원, 엔지니어링 등 디자인 비전공자도 디자인 업무에 참여하면서 공통 언어의 필요성이 커졌다. - 용어를 통일해 직군 간 협업과 디자인 관련 논의를 더 명확하게 만드는 것이 핵심 목표다. ## 오픈소스와 커뮤니티 기반 확장 - 사전은 처음 70개 용어로 공개됐으며, 완성된 결과물이 아니라 지속적으로 발전하는 작업으로 소개됐다. - 디자인 업계의 변화와 새로운 개념에 맞춰 항목을 계속 추가할 계획이다. - Figma는 더 포괄적인 자료를 만들기 위해 커뮤니티의 참여를 요청했다. - 특히 다음과 같은 용어와 사용 사례에 대한 의견을 받으려 했다. - White Space - Stroke - Lorem Ipsum - 팀 내 협업을 방해하거나 자주 오해되는 표현 - 디자인 용어가 잘못 사용되는 상황 - 이용자는 사전 하단의 제안 링크를 통해 새로운 항목이나 수정 의견을 제출할 수 있다. ## 실용적인 활용 방법 - 디자인 협업을 시작할 때 팀에서 자주 사용하는 용어를 사전으로 확인하고 정의를 맞추는 것이 좋다. - 회의나 문서에서 모호한 용어가 나오면 개인의 해석에 의존하지 말고 공통 정의를 확인해야 한다. - 비디자이너 구성원의 온보딩 자료나 직군 간 협업 가이드에 용어집을 포함하면 커뮤니케이션 비용을 줄일 수 있다. - 조직에서 자주 혼동하는 표현은 자체 용어집에 추가하고, Figma처럼 지속적으로 갱신하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
Figma디자인 시스템사용자 경험오픈 소스+2
figma2분 읽기큐레이션 요약

#FigmaTip 모음

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

원문 읽기(새 탭에서 열림)
Figma디자인 시스템사용자 인터페이스keyboard-shortcuts+1
figma3분 읽기큐레이션 요약

경청의 기술: 한 디

디자이너에게 중요한 역량은 말하기보다 깊이 듣고, 사람과 맥락의 실제 동기를 이해하는 것이다. IDEO의 인터랙션 디자이너 Mike Godlewski는 음악 감상 모임 ‘Art of Listening’을 통해 화면 밖의 몰입과 공동체적 경험을 설계했다. 이 프로젝트는 디지털 작업에서 벗어난 아날로그 경험이 디자이너의 창의력과 시야를 회복시키고, 결국 인터페이스 디자인에도 새로운 에너지를 줄 수 있음을 보여준다. ## 듣기를 중심에 둔 디자인 태도 - 좋은 디자이너는 말하기보다 더 많이 듣는다. - 디자인은 인간의 문제를 해결하는 일이므로, 표면적인 요구보다 사용자의 동기와 맥락을 깊이 파악해야 한다. - 글은 존 마에다의 “디자인은 문제에 대한 해결책이고, 예술은 문제에 대한 질문”이라는 관점을 바탕으로 디자인과 예술의 차이를 조명한다. ## 영화 모임에서 시작된 음악 실험 - Mike는 친구의 영화 모임에서 아이디어를 얻었다. - 참가자들이 영화를 조용히 감상한 뒤 토론하는 단순한 규칙이 집중적이고 지적인 대화를 가능하게 했다. - 그는 같은 구조를 음악에 적용해, 일상에서 부족했던 공동 청취 경험을 만들고자 했다. - 목표는 디지털 기기와 사람 간의 불필요한 방해를 줄이고, 음악과 자기 성찰에 집중할 수 있는 의도적인 환경을 조성하는 것이었다. ## ‘Art of Listening’의 진행 방식 - 참가자들은 거실에 모여 한 장의 앨범을 처음부터 끝까지 함께 듣는다. - 감상 중에는 대화, 휴대폰 확인, 지각이 금지된다. - 대신 음악을 들으며 그림을 그리거나, 떠오른 기억을 기록하거나, 눈을 감고 소리에만 집중할 수 있다. - 앨범이 끝난 뒤에는 각자의 감상과 생각을 나누고, 스케치나 기록물을 서로 보여준다. - 단순한 규칙을 통해 음악을 배경음이 아니라 의식적으로 경험하는 대상으로 바꾼다. ## 몰입을 만드는 큐레이션과 준비 - Mike는 리듬과 서사적 흐름을 세심하게 구성한 앨범을 선정한다. - 아티스트 인터뷰, B-side 곡, 팟캐스트, Instagram 게시물 등 다양한 자료를 조사한다. - 그중 앨범을 이해하는 데 도움이 되는 사진과 인상적인 인용문을 선별한다. - 감상 중에는 이 자료를 모니터에 보여주어 Spotify를 무심코 재생하는 것보다 풍부한 배경과 맥락을 제공한다. - 따라서 경험의 품질은 음악 자체뿐 아니라 사전 조사와 정보 큐레이션에도 달려 있다. ## 인터페이스 디자인과 아날로그 경험의 연결 - 음악 모임은 시각적이고 체계적인 인터페이스 디자인과 전혀 달라 보이지만, Mike에게는 창작 에너지를 충전하는 활동이다. - 디자이너들은 필름 카메라, 레터프레스, 제본처럼 화면 밖의 아날로그 작업에 끌리는 경향이 있다. - 오프라인 활동은 인터넷과 스크린에 과도하게 몰입하는 상태에서 벗어나 감각과 관찰력을 회복하게 한다. - 새로운 분야의 경험은 기존 전문 영역과 직접 연결되지 않더라도 창의적 사고의 재료가 될 수 있다. ## 예상하지 못한 창작의 확장 - Mike는 불과 1년 전만 해도 직접 행사를 기획하게 될 것이라고 생각하지 못했다. - 그러나 창작 활동은 처음부터 계획한 경로가 아니라 예상하지 못한 관심과 경험을 통해 발견되기도 한다. - 디자이너는 자신의 직무와 정확히 일치하지 않는 프로젝트에도 도전함으로써 새로운 역량과 관점을 얻을 수 있다. 화면 중심의 작업을 하는 디자이너라면 정기적으로 디지털 기기를 내려놓고, 음악 감상·드로잉·대화처럼 집중과 감각을 회복하는 활동을 시도해볼 만하다. 특히 경험을 설계할 때는 복잡한 기능보다 명확한 규칙, 세심한 큐레이션, 참여자의 몰입을 방해하지 않는 환경이 더 큰 효과를 낼 수 있다.

원문 읽기(새 탭에서 열림)
Figmadesign-thinkinginteraction-designvisual-design+2
figma3분 읽기큐레이션 요약

피그마 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
figma3분 읽기큐레이션 요약

한 디자이너가 더 윤리

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
figma3분 읽기큐레이션 요약

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
figma3분 읽기큐레이션 요약

한 디자이너가 바트

린다 엘리아센은 창의성이 정해진 공식이나 순간적인 영감에서만 나오는 것이 아니라, 기존 규칙과 사회적 기대에 도전하는 인물과 작품을 통해 자란다고 말한다. 바트 심슨, SNL의 여성 코미디언들, 칼 세이건 등은 그녀에게 규칙을 의심하고, 여성성의 고정관념을 벗어나며, 과학적 호기심으로 작업을 확장하는 계기를 제공했다. 결국 창작자는 영감을 기다리기보다 다양한 세계관을 받아들이고 꾸준히 작업하며 자신의 시야를 넓혀야 한다. ## 영감에 대한 색다른 관점 - 엘리아센은 자신이 어떻게 영감을 유지하는지 묻는 질문에 흔히 “여행” 같은 상투적인 답을 하게 된다고 말한다. - 과거에는 영감을 인간 안에 깃드는 초월적 존재나 ‘창작의 유령’으로 보기도 했다. - 이런 관점은 작품의 성공과 실패를 창작자의 자아와 분리해 준다. - 성공하면 영감의 힘 덕분이라고 볼 수 있다. - 실패해도 영감이 부족했던 날이라고 생각할 수 있다. - 그녀의 작업 방식은 어린 시절부터 영향을 준 문화적 인물과 작품을 통해 형성되었다. ## 바트 심슨: 규칙을 따르지 않을 용기 - 어린 시절의 엘리아센은 부모를 만족시키려는 수줍고 순종적인 아이였다. - 바트 심슨을 보며 부모, 권위, 학교의 규칙에 맞서는 태도를 처음 접했다. - 바트는 무례하고 문제를 일으키지만, 사람들이 속으로 하고 싶었던 말을 거리낌 없이 한다는 점에서 매력적인 인물이었다. - 이를 통해 엘리아센은 “모든 규칙을 따르지 않는 삶은 어떤 모습일까?”라는 질문을 하게 되었다. - 바트의 목소리를 여성 성우 낸시 카트라이트가 연기한다는 사실도 인상적이었다. - 남성적인 캐릭터를 여성이 연기하는 설정에서 성별과 masculinity(남성성)에 대한 유희와 풍자를 읽어냈다. ## SNL의 여성 코미디언들: 여성성의 고정관념 벗어나기 - 보수적인 지역에서 자란 엘리아센은 여성 롤모델을 찾기 어려웠다고 회고한다. - 당시 여성에게 기대된 모습은 예쁘고, 얌전하고, 날씬하며, 상냥해야 한다는 것이었다. - 코미디, 스포츠, 건축, 우주 탐사처럼 다양한 꿈을 가진 여성의 모습은 거의 제시되지 않았다. - 셰리 오테리, 몰리 섀넌, 마야 루돌프, 티나 페이, 크리스틴 위그, 에이미 폴러 등은 이러한 기대를 정면으로 뒤집었다. - 우스꽝스러운 의상과 분장을 시도했다. - 망가진 모습이나 이상한 캐릭터를 두려워하지 않았다. - 남성 중심의 무대에서 독창적이고 과장된 여성 캐릭터를 연기했다. - 이들은 엘리아센에게 여성이 반드시 “예쁜 여자” 역할을 하지 않아도 중심 무대에 설 수 있다는 확신을 주었다. ## 칼 세이건: 과학적 호기심을 창작에 더하기 - 칼 세이건의 글과 사상은 엘리아센의 사고를 새로운 방향으로 확장했다. - 그의 영향을 받은 뒤 작업에 보다 기술적이고 과학적인 성격이 나타났다. - 세이건은 과학을 종교적 신비를 대체하는 새로운 형태의 경이로움으로 느끼게 한 인물로 묘사된다. - 이미 세상을 떠난 인물임에도 그의 글은 엘리아센의 창작물에 “새로운 생명”을 불어넣었다. - 예술적 영감이 예술·대중문화 내부에만 머물지 않고 과학과 지식에서도 올 수 있음을 보여준다. ## 지역적 배경과 더 넓은 세계 - 엘리아센은 조지아주 페이엇빌의 보수적인 환경에서 성장하며 자신의 호기심과 창의성이 주변 분위기와 맞지 않는다고 느꼈다. - 다양한 영감의 원천은 그녀에게 자신이 살던 지역 밖의 삶과 가능성을 보여주는 창구가 되었다. - 성장하면서 영감의 대상도 종교적 세계관에서 과학, 예술, 대중문화로 넓어졌다. - 윌리엄 이글스턴의 사진처럼 평범한 남부의 풍경을 새롭게 바라보게 하는 작품은 고향과 자신의 배경을 다시 이해하는 계기가 되었다. ## 실용적인 결론 창의성을 유지하려면 ‘영감이 올 때까지 기다리기’보다 자신을 자극하는 인물과 분야를 의도적으로 탐색하는 편이 효과적이다. 규칙을 깨는 캐릭터, 기존 기준을 거부하는 여성 창작자, 과학적 사고처럼 서로 다른 영역의 자극을 받아들이면 작업의 관점과 표현 방식이 함께 확장된다.

원문 읽기(새 탭에서 열림)
프로덕트 디자인designillustrationcolor-theory+1
figma2분 읽기큐레이션 요약

#FigmaTip 모

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

원문 읽기(새 탭에서 열림)
Figma사용자 경험사용자 인터페이스keyboard-shortcuts
figma3분 읽기큐레이션 요약

웹사이트 제작, 무엇이 먼저

웹사이트 제작에서 카피와 디자인은 어느 하나가 먼저 완성되는 작업이 아니라, 서로 영향을 주고받으며 함께 발전해야 한다. 기존에는 Google Docs와 Sketch처럼 도구가 분리되어 반복적인 수정과 전달이 발생했지만, Figma 같은 클라우드 기반 협업 도구를 사용하면 카피 작성자와 디자이너가 동시에 작업할 수 있다. 그 결과 제작 기간과 회의, 커뮤니케이션 비용을 줄이고 더 효율적으로 웹 페이지를 완성할 수 있다는 것이 글의 결론이다. ## 카피와 디자인이 충돌하는 이유 - 카피의 길이와 내용은 디자인의 레이아웃과 직접 연결된다. - 카피 작성자는 문서를 작성하고, 디자이너는 별도 도구에서 화면을 설계하는 방식이 일반적이었다. - 디자인에 카피를 넣은 뒤 텍스트가 너무 길거나 짧다는 사실을 발견하면서 수정 작업이 반복된다. - 디자인 리뷰, 카피 리뷰, 추가 이해관계자의 의견이 순차적으로 개입해 작업이 여러 차례 되돌아간다. - 도구와 파일이 분리되어 있어 프로젝트 관리자조차 최신 상태를 파악하기 어려운 ‘블랙박스’ 같은 과정이 된다. ## 반복되는 협업과 커뮤니케이션의 문제 - 작성자는 Google Docs에서 카피를 만들고, 디자이너는 Sketch에서 별도로 작업한다. - 카피가 디자인에 맞지 않으면 양쪽이 다시 수정하고, 이후 리뷰 결과에 따라 전체 작업을 재조정해야 한다. - 원격 디자이너와 협업할 때는 파일을 주고받는 과정이 더욱 복잡해진다. - 글에서는 과거에 디자인을 출력해 펜으로 수정한 뒤 스캔해서 공유하기까지 했던 사례를 소개한다. - 이러한 반복적인 ‘핑퐁’ 과정은 프로젝트를 불필요하게 지연시키고 참여자의 피로를 높인다. ## Figma를 활용한 동시 작업 방식 - 마케팅 담당자는 각 페이지에서 전달할 핵심 카피를 하나의 Google Docs에 정리한다. - 디자인팀은 Figma 프로젝트 안에 웹사이트 페이지별 프레임을 만든다. - 이후 고해상도 와이어프레임부터 최종 디자인까지 카피와 디자인을 함께 수정한다. - 카피 작성자는 디자인 문맥 안에서 텍스트가 너무 길거나 짧은지 즉시 확인할 수 있다. - 디자이너는 카피 전달과 파일 관리에 시간을 쓰기보다 실제 시각 설계에 집중할 수 있다. - 카피 수정 때마다 디자인팀에 별도 요청하거나 디자인 파일을 내보낼 필요가 줄어든다. ## 하나의 작업 공간이 제공하는 효과 - 프로젝트 URL 하나로 최신 디자인과 카피를 모든 이해관계자가 확인할 수 있다. - 참여자는 같은 화면에 댓글을 남기고 피드백을 주고받을 수 있다. - 버전 기록을 통해 변경 사항과 이전 작업 상태를 확인할 수 있다. - 디자인을 이메일로 내보내거나 회의 직전에 수정본을 다시 취합하는 일이 줄어든다. - 동일한 URL을 사용자 테스트에도 활용해, 내부 관계자들이 고객 피드백까지 함께 확인할 수 있다. - 회의 자체를 완전히 없애지는 않지만, 회의 횟수와 비효율적인 논의가 줄어든다. ## 실용적인 적용 방향 웹사이트 프로젝트에서는 카피를 모두 확정한 뒤 디자인을 시작하기보다, 초기 핵심 메시지를 정리한 후 카피와 디자인을 병렬적으로 발전시키는 방식이 효과적이다. 이를 위해 공유 가능한 디자인 파일, 실시간 댓글, 버전 관리, 사용자 테스트 결과를 한곳에 통합하면 수정 주기를 줄이고 협업 효율을 높일 수 있다.

원문 읽기(새 탭에서 열림)
Figma사용자 경험web-designsketch+4
figma3분 읽기큐레이션 요약

Figma 엔지니

Kathryn Salant의 음악, 프로그래밍, 사이클로크로스 경험은 모두 창의적 문제를 반복적으로 개선하고, 사람들과 함께 결과를 만들어가는 태도로 연결된다. 그녀는 기술적 완성도만 좇기보다 의미와 협업을 중시하며, 디자이너의 아이디어를 실현하는 엔지니어가 되고자 했다. Figma는 이처럼 다양한 배경과 강점을 지닌 구성원들의 이야기를 통해 조직의 인간적인 면모와 협업 문화를 보여준다. ## Figma의 “3 things” 전통 - 새로 합류한 구성원이 자신을 만든 세 가지 경험이나 대상을 전사 미팅에서 소개하는 문화다. - 가족, 특정 사건, 취미 등 주제에는 제한이 없다. - Figma는 이를 통해 구성원들의 다양한 배경과 개성을 공유하고, 회사 밖에도 팀원들의 인간적인 모습을 소개한다. - Kathryn의 세 가지는 **음악, 프로그래밍, 사이클링**이며, 모두 점진적인 발전과 측정 가능한 성취라는 공통점을 가진다. ## 음악: 기술적 완벽함을 넘어 창의성과 의미로 - Kathryn은 5학년 때 트럼펫을 시작했고, 대학에서 음악을 전공하며 장학금과 런던 유학 경험을 쌓았다. - 클래식 음악계에서 일부 연주자들이 기술적 정확성에만 집중하고 음악의 영감과 의미에는 덜 관심을 보이는 모습에 실망했다. - 이후 샌프란시스코에서 전위적인 오케스트라 밴드 **Extra Action Marching Band**에 합류했다. - David Byrne의 투어에 참여하고, 비욘세의 **“Crazy in Love”**를 연주하는 등 전통적인 클래식 음악과는 다른 실험적 활동을 했다. - 음악을 통해 정해진 형식보다 창의적 표현과 실험을 중시하는 태도를 발전시켰다. ## 프로그래밍: 기술을 창작의 도구로 활용하기 - 6학년 때 Apple IIe 컴퓨터와 Logo를 접하면서 프로그래밍을 배웠고, 실제 게임처럼 보이는 슈퍼 마리오 데모를 만들었다. - 컴퓨터 구조를 직접 확인하다가 어머니의 업무용 컴퓨터를 고장 내거나 시스템 파일을 삭제하는 등 시행착오를 거쳤다. - 대학 시절 Flash 4를 접하며 인터넷에서 모션 그래픽과 상호작용을 구현할 수 있다는 점에 매료됐다. - Flash가 음악가, 예술가, 디자이너 등 창의적인 사람들을 끌어들인다는 점에서 기술과 디자인의 결합 가능성을 발견했다. - 자신이 직접 창작하는 것뿐 아니라, 다른 사람들이 아이디어를 실현하도록 돕는 코드를 작성하고 싶다는 목표를 갖게 됐다. - 디자이너의 의도를 존중하고 세밀하게 구현했으며, 팀 간의 열린 소통을 중요하게 여겼다. - 이러한 태도는 디자인과 개발의 협업을 중시하는 Figma의 사명과 맞닿아 있다. ## 사이클링과 사이클로크로스: 경쟁보다 공동체와 과정 - 어린 시절에는 운동을 잘하는 편이 아니었지만, 샌프란시스코에서 AIDS/LifeCycle 7일간의 장거리 라이딩에 참여하며 사이클링을 시작했다. - 자신의 체력과 지구력을 시험하고 한계를 확장하는 과정에서 큰 성취감을 느꼈다. - 2006년에는 자전거 커뮤니티를 만들기 위해 매주 샌프란시스코를 달리는 **Butterlap**을 창립했다. - Butterlap의 규칙은 “무례하게 굴지 말 것”과 “술을 가져오면 좋은 술을 가져올 것”으로, 진지함보다 친밀감과 즐거움을 강조했다. - 이후 진흙길을 달리는 커뮤니티 중심의 **사이클로크로스**에 참여했다. - 세계 선수권 대회에 참가했지만 직접 경쟁하기보다 다른 참가자들을 응원하는 데 더 많은 시간을 보냈다. - Kathryn에게 사이클로크로스는 승패보다 함께하는 사람들, 경험, 과정 자체를 즐기는 활동이다. ## 서로 다른 경험을 관통하는 강점 - 음악, 프로그래밍, 사이클링 모두 반복과 개선을 통해 결과를 발전시킨다는 공통점이 있다. - 잘되지 않는 연주나 코드도 원인을 찾고 수정하면 나아질 수 있다는 문제 해결 관점이 드러난다. - 개인의 기술적 성취보다 창의성, 협업, 공동체 의식을 중요하게 여긴다. - Figma는 Kathryn의 사례를 통해 좋은 엔지니어가 단순히 코드를 작성하는 사람이 아니라, 다양한 분야의 감각을 연결해 다른 사람의 창작을 돕는 사람임을 보여준다. 다양한 취미와 경력은 서로 무관해 보이더라도 문제 해결 방식과 협업 태도라는 공통된 강점으로 연결될 수 있다. 개인과 조직 모두 기술적 전문성뿐 아니라 창의성, 소통, 공동체 의식을 함께 키우는 것이 중요하다.

원문 읽기(새 탭에서 열림)
collaborative-designdesign-toolsmotion-graphicsprogramming+3
figma4분 읽기큐레이션 요약

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
figma4분 읽기큐레이션 요약

크롬북에서 처음

Chromebook에서도 클라우드 기반 도구를 활용하면 전문 디자이너의 업무를 처음부터 끝까지 수행할 수 있다는 글이다. 저자는 Figma와 웹 기반 생산성 도구 덕분에 성능이나 협업에서 큰 불편을 겪지 않았으며, 오히려 자동 저장·동기화와 비용 절감의 이점을 강조한다. 다만 사용자 정의 글꼴, 인터넷 연결, 영상·음원 편집처럼 로컬 환경이 필요한 작업에는 여전히 제약이 있다. ## Chromebook을 선택한 이유 - Square가 보안성, 저렴한 비용, 자동 백업 및 동기화를 이유로 일부 직원의 Chromebook 전환을 추진했다. - 저자는 내부 프레젠테이션 작업에서 Chromebook 사용자의 환경을 직접 이해하기 위해 Mac 대신 Chromebook을 선택했다. - 이미 Figma를 3년간 사용하고 있었기 때문에, 디자인 파일과 주요 작업이 클라우드에 저장되는 환경에 익숙했다. - 1년간 전문 디자이너로 Chromebook을 사용한 뒤, 다시 Mac으로 돌아갈 필요를 느끼지 못했다고 평가한다. ## Chrome OS에서 디자인할 때 알아둘 점 - **Figma의 클라우드 기반 구조** - Figma는 브라우저에서 실행되는 전문 디자인·프로토타이핑 도구다. - Chromebook에서 디자인하려면 사실상 Figma 같은 클라우드 기반 도구가 필수적이다. - **키보드 단축키** - Chrome OS의 `Control` 키가 macOS의 `Command` 키와 비슷한 역할을 한다. - `Search` 키는 Caps Lock 대신 배치되어 있으며, 보조 키로 사용할 수 있다. - 예를 들어 Figma에서 `Search + 드래그`를 사용하면 객체를 복제할 수 있다. - Figma의 단축키 메뉴는 현재 운영체제에 맞는 단축키를 표시하며, `Ctrl + Shift + /`로 열 수 있다. - **성능** - 저자가 사용한 세 대의 Chromebook에서 Figma 성능 문제를 경험하지 않았다. - Figma가 브라우저에서 빠르게 작동하기 때문에 고성능 데스크톱 환경이 반드시 필요한 것은 아니라고 설명한다. - **웹 기반 보조 도구** - Slack, Grammarly, 접근성 테스트 도구 Funkify, G Suite 등이 모두 웹에서 작동한다. - 따라서 디자인 외 업무도 대부분 Chromebook에서 처리할 수 있다. - **제약 사항** - 당시 Chrome OS에서는 사용자 정의 글꼴을 직접 설치할 수 없었다. - 대신 Google Fonts의 다양한 글꼴을 사용할 수 있다. - 인터넷 연결이 제한되면 일부 기능을 사용하기 어렵지만, Chromebook은 오프라인에서도 일정 수준의 기능을 제공한다. - **터치스크린** - 긴 문서나 Slack 대화를 스크롤하거나 Figma 캔버스를 탐색할 때 터치스크린이 유용했다. ## 디자이너에게 적합한 Chromebook 선택 - 저자는 HP Chromebook과 Samsung Pro를 거친 뒤 Google Pixelbook을 가장 선호하게 됐다. - Pixelbook은 당시 999달러부터 시작하는 고가 Chrome 기기였지만, 이전에 사용하던 MacBook Pro 가격의 3분의 1 이하 수준이었다. - 저렴한 Chromebook이나 HDMI 스틱형 컴퓨터인 85달러짜리 Chromebit도 선택지로 언급한다. - 최종적으로 Pixelbook을 선택한 이유는 키보드와 트랙패드의 품질이었다. - 디자인 작업에서는 화면뿐 아니라 입력 장치의 사용감도 장시간 작업 효율에 큰 영향을 준다는 점을 보여준다. ## 클라우드 기반 디자인 작업 흐름 ### 제작 - Figma: 디자인 및 프로토타이핑 - SuperHi: 웹사이트 코드 편집 - Google Slides, Figma, Paste: 프레젠테이션 제작 - Grammarly, Google Docs, Dropbox Paper: 문서 작성 및 교정 ### 업무 관리와 재무 - Asana, Google Tasks: 할 일과 프로젝트 관리 - Bonsai: 회계 업무 - Notion: 재무 관리 - 1Password X: 비밀번호 관리와 보안 ### 커뮤니케이션 - Signal, Telegram, Slack: 메시징 - Slack, Google Meet: 회의와 화상 통화 ### 음악과 멀티미디어 - Spotify, Pocket Casts: 음악과 팟캐스트 - 영상·음원 편집은 Final Cut Pro와 Logic Pro를 사용할 수 있는 Mac에서 처리했다. - 저자는 향후 영상·음원 편집도 웹 기반 대안으로 대체될 가능성이 높다고 전망한다. ## 소프트웨어가 웹으로 이동하는 이유 - 클라우드 도구를 사용하면 파일을 별도로 백업하거나 저장할 필요가 줄어든다. - 브라우저만 있으면 여러 장소와 기기에서 동일한 파일에 접근할 수 있다. - 작업물이 특정 컴퓨터에 묶이지 않으므로 기기 고장이나 분실에 따른 위험도 낮아진다. - 웹 기술의 발전으로 브라우저에서도 실시간 렌더링과 물리 효과 같은 고급 기능을 구현할 수 있게 됐다. - Figma는 WebGL을 활용한 실시간 3D 렌더링 실험에서 출발했으며, 이는 브라우저가 전문 소프트웨어를 실행할 수 있음을 보여주는 사례로 제시된다. - 웹은 운영체제나 앱스토어에 덜 종속되고, 누구나 접근하고 개발할 수 있다는 점에서 개방성과 접근성이 높다. Chromebook 전환을 고려한다면 Figma처럼 클라우드 기반인 핵심 도구와 Slack·Docs·Notion 같은 웹 서비스를 중심으로 업무 환경을 구성하는 것이 좋다. 반면 사용자 정의 글꼴이나 전문 영상·음원 편집이 중요하다면 해당 작업을 위한 별도 장비나 대체 도구를 함께 준비해야 한다.

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