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

datadog원문

프로덕트 디자이너 (새 탭에서 열림)

훌륭한 제품 디자이너가 되기 위해서는 단순히 결과물을 만드는 것을 넘어, 디자인의 배경과 맥락을 효과적으로 전달하는 '설명가'의 역량이 필요합니다. 이는 단편적인 사실 보도를 넘어 복잡한 사건의 맥락을 짚어주는 '해설 저널리즘(Explanatory Journalism)'과 맥을 같이 하며, 디자이너는 파편화된 정보를 통합하여 이해관계자들에게 올바른 맥락을 제공해야 합니다. 결과적으로 철저한 기록을 통해 구축한 '페이퍼 트레일(Papertrail)'은 디자인 의사결정의 강력한 근거가 되며 팀 전체의 이해도를 높이는 핵심 자산이 됩니다. ## 최신 정보보다 중요한 가치에 집중하기 * 뉴스 피드나 소셜 미디어처럼 실시간으로 쏟아지는 정보(CS 티켓, 회의록, 고객 통화 등)는 '최신성'을 이유로 판단력을 흐리게 만들 수 있습니다. * 디자이너는 이러한 파편화된 피드백을 한데 모으고 출처를 명확히 함으로써, 단순한 최신 요청이 아닌 비즈니스 가치가 높은 '중요한 문제'를 식별해야 합니다. * 다수의 사용자가 공통으로 요청하는 사항을 수치화하고 우선순위를 정하는 과정을 통해, 근거 없는 편향에 빠지지 않고 객관적인 의사결정을 내릴 수 있습니다. ## 맥락의 붕괴(Context Collapse) 방지 * '맥락의 붕괴'는 소셜 미디어처럼 다양한 청중이 하나의 메시지를 각기 다른 맥락으로 받아들일 때 발생하며, 이는 기업 내 협업 과정에서도 빈번하게 나타납니다. * 고객 지원 팀의 티켓, 영업 팀의 요구사항, 연구원의 인터뷰 노트, 경영진의 목표 등 서로 다른 맥락의 정보들을 한곳에 수집하고 통합하는 작업이 선행되어야 합니다. * 디자인 리뷰 시 단순히 결과물만 보여주는 것이 아니라, 수집된 다양한 요구사항들이 최종 솔루션에 어떻게 반영되었는지 각 이해관계자의 언어와 맥락에 맞춰 설명해야 합니다. ## 페이퍼 트레일(Papertrail)을 통한 정보의 확장과 수축 * 디자인 프로세스는 방대한 리서치와 데이터를 수집하는 '확장' 단계와 이를 핵심 요구사항으로 정제하는 '수축' 단계로 나뉩니다. * 인터뷰 기록, 리서치 테마 등을 문서화한 '페이퍼 트레일'을 구축하면 문제 정의가 명확해질 뿐만 아니라, 솔루션의 제약 조건을 설정하는 데 큰 도움이 됩니다. * 풍부한 배경 자료를 스스로 잘 이해하고 있을 때 비로소 타인을 위한 간결하고 효과적인 요약이 가능해지며, 필요시 상세 근거로 바로 연결할 수 있는 신뢰성을 확보하게 됩니다. ## 제품 디자이너와 PM의 역할 협업 * 제품 디자이너는 워크플로우, 인터랙션 디자인, 기능의 세부적인 사용성(Usability)에 집중하여 맥락을 구축해야 합니다. * 이는 제품 관리자(PM)가 수익 모델, 개발 비용, 비즈니스 우선순위 등 사업적 측면에 집중할 수 있도록 돕는 역할을 합니다. * 사용자 경험(UX)의 소유권을 가진 디자이너라면 리서치부터 사후 관리까지 모든 과정의 '맥락'을 관리하는 책임감을 가져야 합니다. 성공적인 디자인을 위해서는 리서치 단계에서부터 인터뷰 대상자의 배경, 핵심 인사이트, 후속 조치 등을 꼼꼼히 기록하는 습관을 들여야 합니다. 이러한 '기록의 흔적'은 본인뿐만 아니라 팀원들에게도 디자인 결정의 타당성을 증명하는 가장 강력한 도구가 될 것입니다.

figma4분 읽기큐레이션 요약

Figma 플랫폼을 소개합니다

Figma는 디자인 파일을 다른 도구·스크립트·웹 앱과 연결하는 **Figma Platform**을 공개하며, 전문 디자인 도구 최초의 웹 API를 지향했다. API를 통해 디자인 데이터를 실시간으로 읽고, 댓글을 주고받고, 이미지로 렌더링할 수 있어 조직 맞춤형 협업 자동화가 가능해진다. 이를 기반으로 디자인을 고립된 파일이 아니라 조직 전체가 공유·검색·활용하는 개방형 데이터로 전환하는 것이 글의 핵심 결론이다. ## Figma Platform의 목표 - Figma를 외부 도구, 사내 스크립트, 웹 애플리케이션과 연결하는 플랫폼을 제공한다. - 기존 데스크톱 디자인 도구는 운영체제, 로컬 파일 경로, 특정 소프트웨어 버전에 종속되어 통합이 어려웠다. - Figma는 웹 기반이므로 서로 다른 컴퓨터나 웹 서비스에서도 디자인의 최신 상태에 접근할 수 있다. - 기업은 조직별 업무 방식에 맞춘 검색, 공유, 모니터링, 자동화 도구를 직접 만들 수 있다. ## 초기 Web API의 세 가지 기능 - **디자인 파일 읽기** - 디자인을 개방형 JSON 형식으로 제공한다. - 도형, 텍스트, 컴포넌트, 프로토타입 링크, 전환 효과, 제약 조건 등 디자인을 구성하는 트리 구조를 확인할 수 있다. - 파일 URL에 포함된 고유 키를 사용해 특정 디자인의 실시간 스냅샷을 가져온다. - **댓글 읽기·쓰기** - 외부 서비스가 Figma 디자인의 댓글을 조회하거나 작성할 수 있다. - 디자인 검토와 협업 프로세스를 다른 업무 도구와 연결할 수 있다. - **이미지 렌더링** - 전체 파일 또는 파일의 일부를 JPG, PNG, SVG 등 표준 이미지 형식으로 변환한다. - 별도의 수동 내보내기 없이 외부 서비스에서 최신 디자인 이미지를 활용할 수 있다. ## 개방형 웹 API가 제공하는 장점 - 특정 운영체제나 설치된 디자인 프로그램에 의존하지 않는다. - 별도의 독점 플러그인 언어나 프레임워크 대신 일반적인 웹 개발 기술을 사용할 수 있다. - 잘 정의된 API를 사용하므로 사내 자동화와 외부 서비스 통합을 빠르게 구현할 수 있다. - 통합 기능을 유지·보수하고 최신 상태로 업데이트하기가 상대적으로 쉽다. - 디자인 데이터를 이미지뿐 아니라 구조화된 정보로 활용할 수 있어 새로운 형태의 협업 도구를 만들 수 있다. ## 실제 활용 사례: Uber와 GitHub - **Uber** - 여러 도시에 분산된 디자인 팀의 작업을 조직 전체에 보여주기 위해 API를 활용했다. - 진행 중인 디자인을 사무실 TV에 실시간으로 표시하는 피드를 만들고 있다. - Dribbble과 유사한 내부 디자인 저장소에서 프로젝트를 탐색하는 기능도 계획했다. - **GitHub** - 아이콘 제작 과정 일부를 자동화해 반복 작업을 줄이고 효율성을 높였다. - 이러한 사례는 API가 단순한 파일 내보내기를 넘어 조직 내부의 가시성, 검색, 자동화 문제를 해결할 수 있음을 보여준다. ## 오픈소스 프로젝트와 외부 통합 - Figma는 커뮤니티가 활용할 수 있도록 여러 데모 프로젝트를 오픈소스로 공개했다. - 예시: - Figma 디자인 맞춤법 검사기 - 생성형 아트 도구 - 디자인을 Ethereum 블록체인에 기록하는 방법 - Avocode, Haiku, Zeplin, Pagedraw 등 다른 디자인·개발 도구와의 통합도 강화했다. - 플랫폼의 가치는 Figma가 모든 기능을 직접 제공하는 데보다 커뮤니티와 기업이 각자의 문제를 해결하는 데 있다. ## 향후 공개 예정 기능 - **Webhooks** - 파일이나 팀에 연결해 디자인 변경 이벤트를 콜백 형태로 전달한다. - 디자인 업데이트를 감지해 외부 시스템을 자동으로 갱신할 수 있다. - **Write API** - 초기 버전은 주로 디자인 데이터를 읽는 데 초점을 맞췄다. - 이후 외부 애플리케이션이 Figma 디자인 자체를 수정할 수 있는 쓰기 API를 제공할 계획이다. - **Extensions** - 인앱 확장 기능은 강력하지만 품질, 안정성, 예측 가능성을 떨어뜨릴 수 있다. - Figma는 개발자 자유와 제품 안정성을 함께 확보할 수 있는 모델을 마련한 뒤 확장 기능을 도입하려 했다. - 당시에는 구체적인 출시 일정이 정해지지 않았다. ## 대규모 협업에서 해결하려는 문제 - 디자인은 UI 디자이너만 사용하는 산출물이 아니라 카피라이터, 엔지니어, 연구자, 마케터, 경영진 등 여러 부서가 함께 다루는 정보가 되었다. - 전통적인 데스크톱 도구에서는: - 파일을 내보내고 업로드해야 공유할 수 있다. - 원본이 변경되면 공유된 파일이 즉시 오래된 버전이 된다. - 경영진이 실시간 작업을 보고 의견을 남기기 어렵다. - 엔지니어가 필요한 최신 에셋을 찾는 데 많은 시간을 쓴다. - 다른 팀이 이미 해결한 문제와 해결책을 발견하기 어렵다. - Figma API는 조직 전체에서 디자인을 실시간으로 공유하고, 검색하고, 모니터링하는 맞춤형 워크플로를 구축하는 기반이 된다. Figma Platform은 디자인 도구를 폐쇄적인 제작 환경에서 개방형 협업 플랫폼으로 확장하려는 시도다. 실제 도입 시에는 API로 최신 디자인 조회·렌더링·댓글 연동부터 시작하고, Webhooks와 자동화 기능을 결합해 사내 디자인 검색 및 배포 시스템으로 발전시키는 접근이 실용적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

이제 Figma 버전 히스토리에 이름을

Figma는 웹 기반 자동 저장의 장점을 살려 버전 기록을 직접 이름 붙이고 주석을 추가할 수 있는 기능을 출시했다. 이를 통해 디자인 마일스톤을 쉽게 찾고 복원·복제할 수 있으며, 협업자는 각 변경 사항을 버전별로 검토할 수 있다. 결과적으로 별도 파일을 내보내거나 대면 회의를 할 필요가 줄어들고, 디자인 검토와 협업 속도가 향상된다. ## 웹 기반 자동 저장의 한계 보완 - Figma 파일은 웹에서 지속적으로 자동 저장되므로 별도의 동기화가 필요 없다. - 하지만 자동 저장 버전이 많아지면 중요한 변경 시점을 찾기 어려워지는 문제가 있었다. - 기존 데스크톱 디자인 도구에서는 버전 검토와 변경 문서화를 위해 파일을 별도로 내보내거나 우회적인 작업을 해야 했다. - 새 버전 기록 기능은 자동 저장 흐름 위에 사용자가 직접 중요한 버전을 표시하고 설명하도록 한다. ## 버전에 이름과 주석 추가 - 사용자는 특정 디자인 단계를 직접 저장하고 이름을 붙일 수 있다. - 각 버전에 메모를 추가해 변경 내용이나 해당 단계의 목적을 기록할 수 있다. - 예를 들어 다음과 같은 시점을 명확히 남길 수 있다. - 첫 번째 디자인 리뷰 전 상태 - 사용자 테스트에 처음 사용한 디자인 - 특정 기능이 완성된 마일스톤 - 중요한 버전은 나중에 복원하거나 새 파일로 복제할 수 있다. - 단축키: - macOS: `⌘ + ⌥ + S` - Windows: `Ctrl + Alt + S` ## 자동 저장 기록 정리 - 사용자가 수동으로 저장한 버전 사이의 자동 저장 기록은 자동으로 묶여 표시된다. - 중요하지 않은 중간 기록이 화면을 가득 채우지 않아 전체 변경 흐름을 빠르게 훑을 수 있다. - 버전 기록은 파일 이름을 클릭한 뒤 **Show Version History**에서 확인할 수 있다. ## 페이지별 버전 관리 - 기존에는 파일 전체 단위로만 버전 기록을 확인할 수 있었다. - 새 기능에서는 특정 페이지를 선택한 뒤 해당 페이지의 버전 기록을 따로 볼 수 있다. - 여러 페이지에서 동시에 작업하는 파일에서도 변경 사항을 구분하기 쉬워진다. - 페이지를 선택하고 파일 이름을 클릭한 뒤 **View Version History**를 선택하면 된다. ## 주석을 활용한 빠른 디자인 리뷰 - 이해관계자는 각 버전에 변경 사항과 검토 의견을 직접 남길 수 있다. - 디자이너는 버전별 변경 내용을 별도의 문서나 회의에서 다시 설명할 필요가 줄어든다. - 협업자는 서로 다른 디자인 단계의 결과를 비동기적으로 검토할 수 있다. - 결과적으로 리뷰 시간을 줄이고 더 빠르게 합의에 도달할 수 있다. ## 실용적인 활용 방법 - 큰 변경을 완료할 때마다 버전에 이름을 붙이고 한두 문장으로 변경 목적을 기록하는 것이 좋다. - 페이지별로 버전을 관리하면 기능·화면 단위의 변경 이력을 추적하기 쉽다. - 리뷰 전, 사용자 테스트 전, 최종 승인 전처럼 팀의 업무 흐름에 맞춰 마일스톤을 정의하면 버전 기록을 효과적으로 활용할 수 있다. - 별도 파일을 반복해서 내보내기보다 Figma의 버전 기록을 협업과 검토의 기준으로 사용하는 것이 권장된다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

UI/UX 디지털 노마드로 떠

디지털 노마드로 UI/UX 일을 하려면 여행보다 먼저 안정적인 고객, 사업 기반, 인터넷 환경을 준비해야 한다. 원격 근무의 핵심은 시간대와 거리의 불편을 정기적인 소통과 투명한 업무 공유로 보완해 고객의 신뢰를 유지하는 것이다. 또한 현지 커뮤니티에 참여하면 새로운 고객과 동료를 만나면서 고립감도 줄일 수 있다. ## 출발 전 고객과 수입원 확보 - 일방적으로 여행을 떠나기 전에 기존 직장이나 고객을 확보하는 것이 좋다. - 출발 전에는 고객과 같은 시간대에 있고 재정적 압박도 적기 때문에 계약을 성사시키기 쉽다. - 가능하면 고객을 여러 번 직접 만나 커뮤니케이션 방식과 비즈니스 요구사항을 파악해야 이후의 오해를 줄일 수 있다. - 고객을 찾는 방법: - 디자인 밋업과 기술 행사에 참석해 프리랜서임을 알리고 포트폴리오 링크를 공유한다. - Craigslist 같은 구인·서비스 플랫폼에 서비스를 등록한다. - 잠재 고객에게 처음부터 해외 체류 계획을 강조하기보다, 먼저 한두 개의 프로젝트를 성공적으로 수행해 신뢰를 쌓는다. - 기존 전문 네트워크에 지속적으로 신규 고객을 받고 있음을 알린다. ## 프리랜서 사업 운영 기반 마련 - 해외에 나간 뒤에는 자국에서 처리해야 할 행정 업무가 훨씬 어려워질 수 있으므로 출국 전에 사업 구조를 갖춰야 한다. - 고려할 사항: - 세금 공제를 위해 LLC 등 사업체를 설립한다. - 프리랜서 수입과 지출을 관리할 별도 사업용 은행 계좌를 만든다. - 포트폴리오와 연락처가 포함된 웹사이트를 준비한다. - 해외에서 만난 사람에게 건넬 명함 등 홍보물을 제작한다. - 세무사를 통해 세금과 프리랜서 재정을 사전에 관리한다. - 사업자명을 등록한다. ## 안정적인 인터넷 환경 확보 - UI/UX 디자이너는 화상회의, 이메일, 디자인 파일 작업을 위해 안정적인 인터넷이 필수적이다. - 숙소를 예약하기 전에 Wi-Fi 제공 여부뿐 아니라 실제 속도와 이용자 리뷰를 확인해야 한다. - 필요하다면 숙소 호스트에게 속도 테스트 결과를 요청한다. - 연결 상태가 불확실한 경우 고객에게 미리 연락이 어려울 수 있음을 알리고 기대치를 조정해야 한다. - 인터넷 장애에 대비해 예비 SIM 카드를 준비하는 방법도 유용하다. - Figma처럼 링크로 파일을 공유하고 실시간 댓글을 받을 수 있는 도구를 사용하면 최신 파일을 반복해서 내보내거나 이메일로 전달할 필요가 줄어든다. - 인터넷이 끊기기 전에 파일을 열어 둔 경우, 오프라인에서도 Figma 파일 작업을 이어갈 수 있다. ## 현지 커뮤니티와 디지털 동료 찾기 - 여러 도시를 이동하면 외로움을 느끼기 쉬우므로 도착 직후 디지털 노마드 커뮤니티에 참여하는 것이 좋다. - Facebook의 디지털 노마드 그룹이나 여성 디지털 노마드 전용 커뮤니티를 활용할 수 있다. - 하노이, 치앙마이, 우붓은 양호한 Wi-Fi, 비교적 높은 생활 수준, 코워킹 스페이스와 카페가 많아 디지털 노마드에게 적합한 도시로 소개된다. - Roam이나 Remote Year처럼 전문가를 위한 체계적인 장기 체류 프로그램을 이용하는 방법도 있다. ## 시간대가 다른 고객과 신뢰 유지 - 고객과 지리적으로 멀어질수록 업무 진행 상황을 더 투명하게 공유해야 한다. - 한 사례에서는 매일 업무 내용을 이메일로 보고하고, 이틀에 한 번씩 정기 통화를 진행했다. - 정기적인 업데이트는 고객의 질문을 빠르게 해결하고, 디자이너가 팀의 중요한 구성원이라는 인식을 유지하는 데 도움이 된다. - 여행의 자유를 누리기 위해 시작한 원격 근무가 과도한 업무로 변하지 않도록 일과 여행의 균형도 지켜야 한다. 장기적으로 성공하려면 출국 전에 고객·재정·사업 등록·통신 환경을 준비하고, 여행 중에는 정기적인 보고와 명확한 기대치 조율을 습관화하는 것이 가장 중요하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마 프로토타이

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

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma로부터 사랑을 담아:

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

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

웹 디자이너 없는 웹

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는 디자인 검토부터 개발 사양 확인까지 연결하므로, 여러 부서와 외부 고객이 함께 참여하는 프로젝트에 유용한 선택지다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

피그마 팁 모

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

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

피그마, 2

Figma는 2018년 2월 Kleiner Perkins가 주도한 2,500만 달러 규모의 Series B 투자를 유치했다. 이번 투자에는 Index, Greylock, LinkedIn의 Jeff Weiner 등 기존 투자자도 참여했으며, SaaS 기업 성장과 시장 진출 전문성을 가진 Mamoon Hamid가 Figma에 대한 첫 투자로 참여했다. Figma는 이 자금을 바탕으로 웹 기반의 접근 가능하고 협업적인 디자인 도구라는 비전을 더욱 확장하려 한다. ## 2,500만 달러 Series B 투자 유치 - 투자 규모는 **2,500만 달러**다. - 투자 라운드는 **Kleiner Perkins**가 주도했다. - Kleiner Perkins의 신규 파트너 **Mamoon Hamid**가 주도적으로 참여했으며, Figma는 그의 KPCB 첫 투자 대상이 되었다. - Hamid는 Slack, Box, Intercom 등 SaaS 기업에 초기 투자한 경력이 있다. - 그의 투자 관점은 데이터 기반의 기업 평가와 시장 진출 전략에 강점이 있는 것으로 소개된다. ## 기존 투자자들의 후속 참여 - 기존 투자자인 다음 인사들도 이번 라운드에 참여했다. - Index의 **Danny Rimer** - Greylock의 **John Lilly** - LinkedIn의 **Jeff Weiner** - 기존 투자자들의 재참여는 Figma의 성장 가능성과 초기 비전에 대한 지속적인 신뢰를 보여준다. ## Figma가 추구한 디자인 도구의 방향 - Figma는 창작 도구가 사용자를 제한하는 것이 아니라 **사용자의 역량을 강화해야 한다**는 믿음에서 출발했다. - 디자인 작업은 특정 소프트웨어나 조직 안에 고립되기보다 누구나 접근할 수 있고 협업 가능해야 한다고 주장한다. - 기존의 배타적이고 분리된 디자인 작업 방식을 넘어, 웹을 기반으로 여러 사용자가 함께 작업하는 환경을 지향했다. - 새로운 작업 방식을 도입하는 과정은 혼란스럽고 시간이 걸릴 수 있지만, 사용자·직원·투자자들의 초기 지원이 성장의 기반이 되었다. ## 창업 배경과 제품 철학 - 공동 창업자 **Dylan Field**와 **Evan Wallace**는 Brown University에서 컴퓨터 과학과 수학을 공부하며 웹 기반 디자인 도구를 실험했다. - 이후 Thiel Fellowship의 지원을 받아 Figma를 시작했다. - Figma는 창작과 협업을 웹에서 구현함으로써 디자인을 더 개방적이고 연결된 작업으로 바꾸려는 목표를 세웠다. - 글은 이번 투자를 단순한 자금 조달이 아니라, Figma가 처음부터 유지해 온 협업 중심의 비전을 확장할 기회로 설명한다. 이번 투자는 Figma가 웹 기반 협업 디자인 도구 시장에서 성장할 수 있는 재정적·전략적 기반을 마련했다는 의미가 있다. 특히 SaaS 성장 경험이 있는 투자자의 참여와 기존 투자자들의 후속 투자는 Figma의 제품 철학과 시장 확장 가능성에 대한 신뢰를 뒷받침한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

피그마, 전 세계 6

Figma는 디자인 시스템 구축 과정에서 겪는 문제와 경험을 공유할 수 있도록 전 세계 6개 도시에서 커뮤니티 밋업을 개최한다고 발표했다. 원래 소규모 저녁 식사 모임으로 계획했지만, 예상보다 큰 관심으로 더 많은 디자이너가 참여할 수 있는 밋업 형식으로 전환했다. 첫 행사는 나이지리아 라고스에서 300명 이상이 참석하며 디자인 시스템에 대한 글로벌 커뮤니티의 높은 수요를 보여주었다. ## 전 세계 6개 도시에서 열리는 밋업 - 개최 도시는 다음과 같다. - 라고스, 나이지리아: 2018년 1월 27일 - 토론토, 캐나다: 2018년 2월 23일 - 방갈로르, 인도 - 암스테르담, 네덜란드 - 뉴욕, 미국 - 로스앤젤레스, 미국 - 각 지역의 디자이너들이 디자인 시스템 구축 경험과 시행착오를 발표한다. - 가능한 경우 Figma 관계자가 직접 참석해 발표하고 현지 디자이너들과 교류한다. - 행사는 도시별 커뮤니티의 특성에 맞게 다르게 구성된다. ## 커뮤니티 수요에 따른 행사 형식 전환 - Figma는 2017년 11월 DesignSystems.com을 시작하며 설문을 진행했다. - 설문에는 수천 건의 응답이 모였고, 호스트나 파트너로 참여하겠다는 지원도 이어졌다. - 처음에는 소규모 저녁 식사 형태를 계획했지만, 참석 희망자가 너무 많아 참여 기회를 제한할 우려가 생겼다. - 이에 따라 더 많은 디자이너가 참여할 수 있는 공개 밋업 형식으로 변경했다. - Figma는 행사의 성공이 회사 단독이 아니라 지역 커뮤니티의 자원봉사와 협력 덕분이라고 강조했다. ## 첫 개최지: 라고스 - 라고스는 나이지리아에서 Figma 사용자가 가장 많이 모여 있는 지역 중 하나이며, 성장하는 기술 산업을 보유하고 있다. - Andela와 hotels.ng 같은 기업이 아프리카 및 글로벌 시장에서 활동하며 지역 기술 생태계를 확장하고 있다. - Figma는 무료 요금제와 클라우드 기반 환경을 제공해 현지 디자이너들이 직장 컴퓨터뿐 아니라 인터넷 카페에서도 디자인 작업에 접근할 수 있게 했다. - 행사는 hotels.ng의 디자이너 Namnso Ukpanah가 주최했다. - hotels.ng, Andela, Paystack의 디자이너들과 Figma CEO Dylan Field가 발표자로 참여했다. - 첫 라고스 행사에는 300명 이상이 참석했다. ## 도시 밋업을 만드는 방법 - 특정 도시에서 행사를 개최하려면 해당 지역 디자이너들의 관심과 자원봉사 호스트가 필요하다. - DesignSystems.com을 통해 커뮤니티의 개최 의사를 알리거나 직접 호스트로 등록할 수 있다. - 이미 예정된 행사에 대한 자세한 내용은 Figma 마케팅팀에 “Design Systems”라는 제목으로 문의하도록 안내했다. ## DesignSystems.com의 확장 - Figma는 설문과 밋업에서 얻은 데이터를 종합해 DesignSystems.com을 더 포괄적인 플랫폼으로 개편할 계획이다. - 단순한 행사 안내를 넘어 디자인 시스템 관련 커뮤니티와 정보를 연결하는 공간으로 발전시키려는 방향을 제시했다. ## 실용적인 시사점 디자인 시스템은 도구나 문서만으로 완성되는 것이 아니라, 조직과 지역 커뮤니티가 경험과 문제를 공유할 때 더 빠르게 발전한다. 비슷한 문제를 겪는 팀이라면 공개 밋업, 사용자 그룹, 사내 발표 등을 통해 사례를 공유하고, 지역 디자이너를 행사 기획과 운영에 적극적으로 참여시키는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

퀄리티 위크 동안 Figma에서

Figma는 신규 기능 개발만큼 기존 제품의 품질 개선도 중요하다고 보고, 전 직원이 일주일 동안 버그 수정에 집중하는 ‘Quality Week’를 운영했다. 이 기간에는 사소하지만 반복적으로 사용자 경험을 해치는 버그와 완성도가 낮은 기능을 집중적으로 개선했으며, 제품을 더 빠르고 안정적이며 직관적으로 만드는 데 목적이 있었다. Quality Week는 사용자 만족뿐 아니라 구성원들이 평소 다루지 않던 코드 영역을 경험하고 팀 전체의 품질 의식을 높이는 기회가 되었다. ## 전사적인 품질 개선 주간 - 2017년 초 Figma는 첫 공식 Quality Week를 시작했다. - 엔지니어와 디자이너를 포함한 전 직원이 기존 프로젝트를 잠시 멈추고 제품의 “봄맞이 청소”에 참여했다. - 대상은 치명적인 장애뿐 아니라 다음과 같은 문제였다. - 기능은 동작하지만 사용하기 불편한 버그 - 전문적인 디자인 도구의 기준에 미치지 못하는 세부 동작 - 오랜 시간 반복 사용될 때 불편함이 누적되는 작은 결함 - 디자이너는 Figma를 장시간 사용하므로 작은 오류도 반복되면서 큰 불만으로 이어질 수 있다고 판단했다. - 기능 출시를 계속하는 대신 버그 수정에 집중함으로써 제품의 속도, 안정성, 직관성을 높이려 했다. ## Quality Week 2018의 주요 개선 사항 - 2018년부터 Quality Week를 정기적인 Figma의 전통으로 만들었다. - 두 엔지니어링 팀이 협력해 다양한 버그를 폭넓게 처리하고, 특히 전문 디자인 도구로서 문제가 되는 기능을 우선순위에 두었다. - 대표적인 개선 내용은 다음과 같다. - **Figma Mirror**: 모바일에서 디자인을 확인하는 미러링 앱의 안정성을 높이고 충돌을 줄였다. - **Sketch 가져오기**: Sketch 파일을 편집기 창으로 직접 드래그 앤 드롭할 수 있게 했으며, 텍스트 객체의 변환 정확도를 개선했다. - **Chromebook 지원**: 검색 키와 드래그를 조합해 객체를 복제할 수 있도록 해 학생 등 Chromebook 사용자의 편의성을 높였다. - **레이어 패널**: 레이어를 이동할 때 그룹과 프레임 안에 더 자연스럽게 중첩되도록 동작을 개선했다. - 모든 버그를 해결한 것은 아니며, Quality Week는 연중 진행되는 일반적인 버그 수정과 별도로 집중적인 개선 시간을 확보하는 방식이다. ## 오래된 버그를 해결하는 조직적 가치 - Quality Week의 효과는 사용자에게 제공되는 수정 사항에만 국한되지 않았다. - 개발자와 디자이너가 평소 담당하지 않던 코드베이스와 기능 영역을 살펴볼 수 있었다. - 이를 통해 구성원들이 제품 전체 구조를 더 폭넓게 이해하고 협업할 기회를 얻었다. - 2015년부터 Windows 사용자에게 영향을 주던 오래된 버그가 해결되었고, 이를 기념해 ‘가장 오래된 버그’ 상을 수여했다. - 버그 수정 과정을 행사와 시상식으로 즐겁게 만들어, 반복적이고 비 glamour한 작업에도 성취감을 부여했다. ## 사용자 피드백을 품질 개선에 활용 - 수정된 버그 중 상당수는 Figma 커뮤니티가 제보한 문제에서 비롯되었다. - 사용자는 제품 내부의 도움말 메뉴에서 **Contact Us**를 선택하거나 Twitter, 커뮤니티 포럼, 이메일을 통해 피드백을 보낼 수 있었다. - Figma는 지원팀만이 아니라 엔지니어, 경우에 따라 CEO까지 직접 사용자 지원에 참여하는 ‘전사적 지원’ 문화를 강조했다. - 이는 실제 사용 환경에서 발견되는 문제를 개발팀이 빠르게 이해하고 제품 개선에 반영하는 기반이 되었다. ## 실용적인 결론 신규 기능 출시와 기술 부채·버그 정리는 균형 있게 운영해야 한다. 정기적으로 전사 또는 팀 단위의 집중 품질 개선 기간을 마련하고, 오래된 버그와 반복적인 사용성 문제를 사용자 피드백에 따라 우선 처리하면 제품 완성도와 팀의 코드베이스 이해도를 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

#FigmaTip 라운

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

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

팀을 Figma로 전환하도록 설득

Figma 도입은 단순히 디자인 도구를 바꾸는 일이 아니라, 디자인을 조직 내 협업과 의사결정의 중심으로 끌어오는 문화적 변화다. Buffer의 James Morris는 전사 탐색 기간을 마련하고, 실제 화이트보딩과 엔지니어 협업을 통해 구성원들이 Figma의 가치를 직접 경험하게 했다. 클라우드 기반의 공유성, 플랫폼 독립성, 실시간 협업, 개발자용 디자인 데이터 제공이 전환의 핵심 동력이었다. ## 디자인 도구가 협업을 가로막은 문제 - Buffer는 투명성을 중시하는 조직이었지만, 기존 디자인 도구는 디자인팀을 다른 부서와 분리했다. - 디자인 파일이 Dropbox의 깊은 하위 폴더에 묻혀 필요한 자료를 찾기 어려웠다. - 파일을 열려면 특정 데스크톱 소프트웨어나 최신 버전, 유료 라이선스가 필요했다. - 개발자와 PM은 실수로 원본을 덮어쓸까 봐 파일을 열기조차 꺼렸다. - Linux를 사용하는 엔지니어는 디자인 파일을 보기 위해 Mac을 구매해야 할 수도 있었다. ## Figma가 제공한 협업 방식 - 클라우드에서 실행되므로 파일을 URL 하나로 공유할 수 있다. - 무료 보기 전용 계정을 통해 누구나 디자인을 확인하고 댓글을 남길 수 있다. - 디자이너와 개발자, PM이 동일한 파일을 보며 소통할 수 있다. - 디자인 파일이 특정 운영체제나 데스크톱 애플리케이션에 종속되지 않는다. - 하나의 공유 URL이 디자인의 기준점이 되어, 이미지로 내보내거나 Dropbox 경로를 설명할 필요가 줄어든다. ## 1단계: 전사적인 탐색 기간 마련 - James는 처음부터 Figma 도입을 강요하지 않고, 회사 전체에 ‘탐색 기간’을 제안했다. - 각 팀이 여러 디자인·협업 도구를 직접 사용해 보고 자신들의 요구에 맞는 도구를 평가하도록 했다. - 이 과정에서 Buffer의 업무 흐름과 협업 문제에 대한 구성원들의 피드백을 수집했다. - Figma의 장점을 일방적으로 주장하기보다, 실제 사용을 통해 기능이 증명되도록 했다. ## 2단계: 설명보다 직접 경험하게 하기 ### PM과의 원격 화이트보딩 - 원격 근무 환경에 맞춰 PM과 Figma에서 실시간 가상 화이트보딩을 진행했다. - 문서에 글을 쓰는 대신 도형을 사용해 기능 아이디어와 협업 방식을 함께 구상했다. - 별도의 공식 기획서가 완성될 때까지 기다리지 않고, 디자이너와 PM이 즉시 아이디어를 시각화할 수 있었다. - Figma의 직관성과 실시간 협업 기능을 자연스럽게 체험하게 한 사례다. ### 엔지니어 설득 - 개발자들에게 장황하게 설명하는 대신 파일 URL을 전달하고 필요한 정보를 직접 찾아보게 했다. - 무료 보기 전용 기능으로 CSS, iOS용 Swift, Android용 XML 관련 디자인 데이터를 확인할 수 있었다. - 개발자는 별도의 애플리케이션을 설치하거나 라이선스를 구매하지 않고 디자인을 열 수 있었다. - URL이 동일하게 유지되는 ‘단일 진실의 원천(source of truth)’이 되어 디자인 전달과 위치 확인이 쉬워졌다. - Figma가 WebAssembly를 활용해 브라우저 성능을 개선했다는 점도 엔지니어들의 기술적 관심을 끌었다. ### 디자이너의 우려 다루기 - 디자이너는 공개적이고 투명한 디자인 작업 방식에 부담을 느낄 수 있다. - 웹 애플리케이션이 데스크톱 도구만큼 빠르게 작동할지 의심할 수도 있다. - 따라서 디자이너에게는 기능 설명보다 실제 성능과 작업 흐름을 직접 보여 주는 접근이 필요하다. - 글에서 제시된 전략의 핵심은 각 직군이 중요하게 여기는 가치에 맞춰 Figma를 소개하는 것이다. 조직의 도구 전환을 성공시키려면 “새 도구가 더 좋다”고 주장하기보다, 구성원들이 자신의 업무에서 문제 해결 효과를 직접 확인하게 해야 한다. 특히 원격·다직군 협업 환경에서는 공유 가능한 단일 작업 공간과 운영체제에 구애받지 않는 접근성이 도입의 강력한 근거가 된다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

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는 단순히 디자인 제작 도구가 아니라 컴퓨터과학과 디자인을 연결하는 협업 환경으로 활용됐다. - 도구 학습에 드는 시간을 줄여 수업의 초점을 사용성, 문제 정의, 사용자 경험에 맞출 수 있었다. - 실시간 공동 작업은 서로 다른 전공과 역량을 가진 학생들이 함께 문제를 해결하도록 도왔다. - 이 사례는 교육용 디자인 도구가 접근성, 협업성, 피드백 기능을 갖춰야 학습 효과를 높일 수 있음을 보여준다. 실무적으로는 디자인 수업이나 팀 프로젝트에서 특정 운영체제나 고가의 전문 소프트웨어를 전제로 하기보다, 누구나 빠르게 접근하고 동시에 작업할 수 있는 협업 도구를 선택하는 것이 효과적이다. 도구 자체보다 학생들이 사용성 원칙을 실제 결과물에 반복 적용하고, 교사의 피드백을 디자인 맥락 안에서 즉시 반영할 수 있는 환경을 만드는 것이 중요하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

18명의 디자이너가 전망

2018년 UI/UX의 중심 과제는 시각적 유행보다 사용자의 경험과 사회적 책임을 개선하는 데 있다는 전망이다. 18명의 디자이너는 접근성, 윤리, 협업, 디자인 시스템, 개발 도구의 통합을 주요 변화로 꼽았다. 동시에 표준 시스템을 무비판적으로 따르거나 효율성만 추구하는 흐름에 대한 경계도 제시한다. ## 접근성이 디자인의 우선순위가 된다 - 디자이너의 개성이나 시각적 과시보다 모든 사용자가 콘텐츠를 이해하고 사용할 수 있는지가 중요해진다. - 필수 요소에 지나치게 옅은 회색을 사용하거나, 장식적인 애니메이션을 과도하게 적용하는 관행을 줄여야 한다. - 접근성은 부가 기능이 아니라 제품 설계 초기부터 고려해야 할 기본 조건으로 제시된다. - 다만 접근성·포용적 디자인은 필요한 작업임에도 업계의 관심과 참여가 부족할 것이라는 비관적인 전망도 함께 나온다. ## 디자인 협업이 엔지니어링 방식에 가까워진다 - 디자인 팀도 개발 팀처럼 체계적인 협업과 검토 절차를 도입할 것으로 예상된다. - 코드 리뷰와 유사한 디자인 리뷰가 일반화될 수 있다. - 디자인 도구가 코드 린터처럼 일관성이나 오류를 자동으로 점검하는 방향으로 발전할 수 있다. - 오픈소스 엔지니어링 프로젝트처럼, 사용자 경험과 정보 설계를 위한 오픈소스 디자인 패턴이 늘어날 가능성이 있다. ## 디자이너의 윤리적 책임이 커진다 - UX/UI 디자인은 사용자의 행동과 선택에 직접 영향을 주므로, 디자이너는 자신의 영향력을 더 자각해야 한다. - 제품의 편의성과 전환율만이 아니라 디자인 결정이 사용자와 사회에 미치는 윤리적 결과를 고려해야 한다. - 어떤 사용자를 배제하거나 조작하는지, 정보와 선택지를 공정하게 제공하는지 검토하는 태도가 중요해진다. ## 표준 디자인 시스템의 무비판적 사용 - Material Design이나 Microsoft Fluent 같은 업계 표준 디자인 시스템에 대한 의존도가 높아질 수 있다. - 검증된 컴포넌트와 규칙은 일관성과 개발 효율을 높이지만, 모든 제품과 사용자에게 적합한 것은 아니다. - 표준을 그대로 적용하기보다 제품의 목적, 브랜드, 사용 맥락에 맞는지 비판적으로 판단해야 한다. - 디자인 시스템이 창의적 문제 해결을 대체하는 처방전처럼 사용될 위험이 있다. ## 디자인과 개발 도구의 통합 - 디자인 도구와 개발 도구가 계속 수렴하면서, 하나의 중앙화된 환경에서 디자인 시스템을 만들고 다양한 기술·플랫폼에 구현하는 흐름이 강화될 것으로 보인다. - CSS Grid와 사용자 정의 변수는 레이아웃과 스타일을 더 유연하고 효율적으로 구현하게 한다. - Vue와 React 같은 프레임워크는 디자인 결과물을 실제 제품으로 연결하는 과정을 단순화한다. - 구현 효율이 높아진 만큼 절약된 시간을 더 책임감 있고 포용적인 경험을 설계하는 데 사용해야 한다. ## 접근성과 효율성 사이의 긴장 - 업계는 생산성과 구현 속도를 높이는 기술에는 빠르게 반응하지만, 접근성과 포용적 디자인처럼 많은 조사와 세심한 작업이 필요한 분야에는 상대적으로 소극적이다. - 따라서 접근성이 중요한 트렌드로 인정받더라도 실제 프로젝트 우선순위에서 밀릴 수 있다. - 진정한 발전은 새로운 도구를 도입하는 데 그치지 않고, 효율성을 사용자 모두의 경험 개선으로 연결하는 데 달려 있다. ## 실용적인 적용 방향 디자인 팀은 접근성 검토를 초기 요구사항에 포함하고, 정기적인 디자인 리뷰와 공통 컴포넌트 검증 절차를 마련하는 것이 좋다. 또한 Material이나 Fluent 같은 표준을 그대로 복사하기보다 사용자와 제품 맥락에 맞게 조정하고, 개발 효율로 확보한 시간을 포용성·윤리성·사용성 개선에 투자해야 한다.

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