trello

3 개의 포스트

figma

팀이 즐겨 사용하는 도구에 (새 탭에서 열림)

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 임베드를 우선 사용하고, 제품 사양과 이슈, 컴포넌트 문서에 원본 디자인을 연결해 최신 상태를 유지하는 것이 좋다.

figma

Figma의 라이브 (새 탭에서 열림)

Figma는 웹 기반 디자인 파일과 프로토타입을 최신 상태로 유지한 채 다른 웹사이트와 협업 도구에 삽입할 수 있는 **Live Embed Kit**을 공개했다. 사용자는 iframe 코드만으로 Figma 콘텐츠를 임베드할 수 있으며, 원본 파일이 변경되면 별도 재업로드 없이 임베드된 화면도 자동으로 동기화된다. 이를 통해 팀이 이메일, 메신저, 파일 공유 서비스에 흩어진 디자인을 찾는 번거로움을 줄이고 더 빠르게 협업할 수 있다는 것이 글의 핵심 주장이다. ## iframe 기반의 간단한 임베드 - Figma 파일 우측 상단의 **Share** 메뉴에서 **Public embed**를 선택하면 iframe 코드를 얻을 수 있다. - 개발자는 이 iframe을 자신의 웹사이트나 서비스에 삽입해 Figma 디자인 또는 프로토타입을 표시할 수 있다. - 별도의 복잡한 렌더링 시스템을 구축하지 않아도 웹페이지에 Figma 콘텐츠를 통합할 수 있다. ## 항상 최신 상태로 유지되는 디자인 - 임베드된 콘텐츠는 Figma 원본 파일과 연결되어 실시간으로 동기화된다. - 디자이너가 여백, 아이콘, 레이아웃 등을 수정하면 임베드 화면에도 변경 사항이 반영된다. - 디자인을 이미지로 다시 내보내거나, 수정된 파일을 다시 업로드할 필요가 없다. - Figma가 웹에서 실행되는 디자인 도구라는 점이 이러한 지속적인 동기화의 기반이다. ## 외부 서비스와의 통합 - Live Embed Kit은 개인 웹사이트뿐 아니라 제3자 서비스가 Figma 임베드 기능을 제공하도록 설계됐다. - 글에서는 Trello, JIRA, Dropbox Paper와 같은 도구에서의 활용 사례를 언급한다. - 서비스 개발자는 자체 제품 안에서 사용자가 최신 Figma 파일을 공유하고 확인할 수 있도록 통합할 수 있다. ## 팀 협업에서의 활용 사례 - **사내 위키**: 프로젝트나 기능 문서에 최신 디자인을 삽입해 문서와 시안을 함께 관리할 수 있다. - **팀 메시징 앱**: 그룹 채팅에서 디자인 파일의 최신 버전을 공유할 수 있다. - **블로그**: 프로젝트 소개 글에 live Figma 파일을 넣어 독자가 항상 최신 디자인을 보도록 할 수 있다. - 이러한 방식은 이메일 기록, Slack 대화, 파일 공유 폴더를 뒤져 최신 디자인을 찾는 문제를 줄인다. ## Figma 플랫폼 확장의 출발점 - Figma는 Live Embed Kit을 웹 기반 플랫폼 전략의 시작으로 소개한다. - 향후 Figma 파일에서 디자인 외의 다양한 정보를 가져와 새로운 업무 흐름에 활용할 수 있는 **Figma API**를 제공할 계획도 밝혔다. - 개발자와 파트너사가 Figma 데이터를 다른 협업 도구와 연결하는 생태계를 구축하는 방향이다. 실무적으로는 사내 문서, 제품 블로그, 협업 툴에 정적인 이미지 대신 Live Embed를 사용하면 최신성 유지와 커뮤니케이션 비용을 줄일 수 있다. 다만 공개 임베드 방식인 만큼, 삽입할 파일의 접근 권한과 공개 범위를 설정할 때 보안 및 기밀성도 함께 검토해야 한다.

figma

Trello 및 Jira Software에서 Figma 디자인 (새 탭에서 열림)

Figma는 Trello와 Jira Software에서 디자인 파일을 실시간으로 확인할 수 있는 Live Embed 기능을 출시했다. Figma 원본에서 패딩이나 색상 등을 수정하면 Trello 카드나 Jira 티켓에 삽입된 디자인도 자동으로 업데이트되어, 최신 디자인을 찾거나 PNG를 반복 업로드할 필요가 없어진다. 이를 통해 디자이너와 개발자, 기획자 간의 협업과 정보 공유를 간소화하는 것이 핵심이다. ## Atlassian 도구에 Figma 디자인 실시간 삽입 - Figma 파일을 Trello 카드나 Jira Software 티켓에 Live Embed로 추가할 수 있다. - 원본 Figma 파일이 변경되면 삽입된 디자인이 자동으로 갱신된다. - 패딩, 글꼴 색상 등 세부 디자인을 수정해도 별도의 재업로드 작업이 필요 없다. - 팀원들은 프로젝트 관리 도구 안에서 항상 현재 디자인 상태를 확인할 수 있다. ## 기존 디자인 공유 방식의 문제점 - 디자이너가 최신 디자인을 공유하기 위해 관련 프로젝트 카드나 티켓을 직접 찾아야 했다. - PNG 파일을 내보내 업로드하는 방식은 원본이 수정되는 순간 빠르게 오래된 정보가 된다. - 개발자, 제품 관리자, 마케터 등 여러 팀원이 최신 디자인 파일을 어디서 찾아야 하는지 혼란을 겪었다. - Live Embed는 디자인의 단일 원본을 유지해 이런 커뮤니케이션 비용을 줄인다. ## Trello와 Jira Software 연동 방식 - **Jira Software** - Atlassian 마켓플레이스에서 Figma 연동 기능을 활성화한다. - Jira 티켓의 디자인 영역에 Figma 파일 URL을 붙여 넣는다. - **Trello** - 팀 설정에서 Figma Power-Up을 활성화한다. - Trello 카드의 첨부 파일로 Figma URL을 추가한다. - 두 서비스 모두 Figma 파일의 최신 상태를 프로젝트 관리 화면에서 확인할 수 있다. ## 확장되는 임베드 생태계 - Figma는 웹에서 실행되는 디자인 도구라는 장점을 활용해 다양한 업무 흐름에 Live Embed를 적용하려 한다. - 이번 Atlassian 연동은 Dropbox Paper에서 제공하기 시작한 기능과 유사한 방향이다. - 향후 디자이너와 팀이 협업하는 여러 서비스에서 Figma 임베드를 지원할 계획임을 밝혔다. 팀에서 디자인 파일을 PNG로 반복 공유하고 있다면, Figma 원본 URL을 Trello나 Jira의 작업 항목에 직접 연결하는 방식이 더 효율적이다. 프로젝트 관리 도구와 디자인 도구 사이의 정보 불일치를 줄이고 최신 상태를 자동으로 유지할 수 있다.