figma-plugin

2 개의 포스트

figma

플러그인 비하인 (새 탭에서 열림)

Cards for Humanity는 팀이 다양한 사용자의 필요와 장애를 이해하고, 포용적·접근 가능한 제품을 설계하도록 돕는 카드 게임형 Figma 플러그인이다. 사람의 특성과 필요를 조합해 가상의 사용자를 만들고 해결책을 논의하는 방식으로, 추상적인 포용적 디자인을 구체적인 워크숍 대화로 바꾼다. 제작팀은 도구 자체도 포용적이어야 한다는 원칙에 따라 사용자 피드백을 반영하며 발전시켰고, 포용적 디자인은 윤리적 의무이자 더 나은 제품을 만드는 핵심 과정이라고 강조한다. ## 카드 게임을 통한 공감과 문제 정의 - 게임에는 두 종류의 카드가 있다. - 인물 카드: 이름, 나이, 성격 특성 - 필요 카드: 해당 인물이 가진 필요, 장애, 개인적 도전 - 두 카드를 조합해 가상의 인물을 만들고, 그 인물의 요구를 충족할 제품·서비스를 고민한다. - 카드를 클릭하면 특성이나 장애와 관련된 구체적인 고려사항이 표시된다. - 이러한 정보는 특정 장애나 상황에 대해 디자이너가 임의로 가정하는 것을 줄여준다. - 정해진 답이 없는 개방형 방식이므로 워크숍, 브레인스토밍, 접근성 관련 대화 등 다양한 상황에 활용할 수 있다. - 핵심은 사용자를 추상적인 ‘타깃’이 아니라 구체적인 인간으로 바라보게 하는 것이다. ## 원격 환경에 맞춘 플러그인과 웹사이트 - 원래는 클라이언트 워크숍에서 사용할 실물 카드 게임으로 시작했다. - 코로나19로 업무 환경이 원격화되자 온라인 도구로 빠르게 전환했다. - Figma 플러그인과 별도 웹사이트를 제공해 팀이 물리적으로 한 공간에 모이지 않아도 게임을 진행할 수 있게 했다. - 이를 통해 접근성 논의를 특정 워크숍 형식이나 장소에 제한하지 않았다. ## 도구 자체를 포용적으로 설계하기 - 제작팀은 개발 초기부터 내부 구성원에게 자신의 특성이나 장애를 공유할 의향이 있는지 질문하며 연구를 시작했다. - 이후 온라인 제품 커뮤니티의 의견을 받아 카드에 포함할 특성과 상황의 범위를 넓혔다. - 출시 후에는 예상보다 다양한 사용자에게서 피드백을 받았다. - 디자이너와 개발자뿐 아니라 변호사, 게이머, 임상의, 교육자 등도 활용했다. - 예상하지 못한 대상이 주요 사용자일 수 있으므로, 다양한 독자를 고려한 언어와 표현이 필요하다는 점을 배웠다. - 전문용어를 피하고 이해하기 쉬운 문장을 사용하는 것이 접근성의 중요한 요소로 제시된다. - 접근성 도구가 스스로 배제적이어서는 안 되므로, 지속적인 피드백 수집과 반복 개선이 필수다. ## 에이전시 업무와 내부 프로젝트의 균형 - 크리에이티브 에이전시는 수익이 직접 발생하는 고객 업무와, 즉각적인 ROI가 불분명한 내부 프로젝트를 함께 수행한다. - Cards for Humanity 같은 도구는 내부 프로젝트이지만, 장기적으로는 고객이 더 나은 제품을 만들도록 지원하고 에이전시의 영향력을 확장한다. - 팀원들의 개인적인 관심과 자발적인 시간 투자가 프로젝트를 지속시키는 동력이 됐다. - 도구를 고객 업무 프로세스에 통합함으로써, 한 번의 내부 프로젝트가 여러 고객과 그 고객의 최종 사용자에게 확산될 수 있었다. - 포용적 디자인은 단순한 비용이나 사업 기회 계산을 넘어, 더 많은 사람이 사용할 수 있는 제품을 만드는 기본 조건으로 설명된다. ## 포용적 디자인은 대화에서 시작된다 - 이 도구의 목적은 특정한 정답이나 사용 절차를 강요하는 것이 아니다. - 카드에 적힌 인물의 상황과 필요를 함께 이야기하는 것만으로도 팀 내 포용적 디자인 논의를 시작할 수 있다. - 접근성과 포용성은 프로젝트 후반에 추가하는 기능이 아니라, 초기 문제 정의와 설계 과정부터 고려해야 한다. - 제작자는 제품과 서비스가 사회 구성원에게 미치는 영향을 생각할 책임이 있으며, Cards for Humanity는 그 책임을 실천하기 위한 대화의 출발점이다. 팀에서 접근성 논의를 시작하려면 Cards for Humanity 같은 구체적인 시나리오 도구를 활용하고, 다양한 사용자의 필요를 가정하기보다 실제 피드백을 받아 설계 과정에 반복적으로 반영하는 것이 좋다.

figma

새로운 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 규칙을 정하고 변경 사항을 정기적으로 동기화하는 것이 좋다.