diagramming

3 개의 포스트

figma

고정관념에서 벗어나 생각 (새 탭에서 열림)

Claude와 FigJam의 연동으로 텍스트 프롬프트, PRD, PDF, 이미지, 스크린샷, 코드 파일을 편집 가능한 FigJam 다이어그램으로 변환할 수 있다. 이를 통해 AI와의 대화에서 나온 아이디어를 팀이 함께 검토·수정하는 시각적 협업 공간으로 빠르게 옮길 수 있다. Figma는 이 기능이 기획, 디자인, 개발 간의 소통을 줄이고 아이디어를 실행으로 연결하는 데 도움을 준다고 설명한다. ## 대화에서 편집 가능한 다이어그램으로 - Claude의 Figma MCP 앱을 사용하면 작성한 프롬프트나 업로드한 자료를 FigJam 다이어그램으로 만들 수 있다. - PRD를 기반으로 사용자 플로우를 생성해 제품의 전체 여정, 마찰 지점, 예외 상황을 빠르게 파악할 수 있다. - 생성된 결과물은 단순한 이미지가 아니라 FigJam에서 편집 가능한 형태이므로 팀원이 직접 수정하고 확장할 수 있다. - 대화 내용을 복사해 다른 도구로 옮기는 과정과 애플리케이션 간 컨텍스트 전환을 줄인다. ## 시각화로 팀의 사고를 공유 - 다이어그램은 복잡하거나 추상적인 아이디어를 이해하기 쉬운 흐름으로 바꿔 팀의 공통 언어 역할을 한다. - 디자이너는 사용자 여정과 경험 흐름을 시각화할 수 있다. - 제품 관리자는 Gantt 차트로 일정, 의존성, 마일스톤을 정리할 수 있다. - 기획 초기 단계에서 AI가 만든 초안을 바탕으로 문제를 조기에 발견하고 업무 순서를 조정할 수 있다. - FigJam의 공유 캔버스에서 팀원들이 댓글과 반응을 남기며 아이디어를 함께 발전시킬 수 있다. ## 개발 문서와 시스템 구조 시각화 - 엔지니어는 서비스, API, 데이터베이스, 요청·응답 흐름, 의존성을 포함한 시스템 아키텍처를 다이어그램으로 표현할 수 있다. - 기존 기술 문서나 업로드한 코드 파일을 바탕으로 초기 구조를 생성할 수 있다. - 여러 시스템의 패턴을 비교하거나 프런트엔드와 백엔드 간의 공통 맥락을 정리하는 데 활용할 수 있다. - 구현 전에 복잡성과 잠재적 위험을 검토해 개발 과정의 오류를 줄이는 데 도움이 된다. - Claude는 데이터베이스 구조에 적합한 차트 유형과 색상 코드도 제안할 수 있다. ## FigJam을 중심으로 이어지는 작업 흐름 - Claude에서 만든 아이디어를 FigJam으로 옮긴 뒤, Figma Design에서 다듬고 Figma Slides에서 공유할 수 있다. - 필요하면 최종 결과를 코드 구현으로 연결해 아이디어에서 실행까지의 흐름을 이어갈 수 있다. - FigJam은 초기 브레인스토밍뿐 아니라 프로젝트 계획, 시스템 설계, 협업 문서화의 공간으로 활용된다. - Figma는 더 다양한 도형 모음과 커넥터 유형을 추가해 정교한 다이어그램 작성 기능도 개선하고 있다. - Anthropic은 Claude용 MCP 앱을 설계할 수 있는 UI 키트도 제공한다. ## AI가 일회성 도구에서 협업 파트너로 - Claude는 여러 차례의 대화 맥락을 유지하면서 사용자 여정, 우선순위 절충안, 구현 구조를 점진적으로 개선할 수 있다. - 하나의 답만 제시하는 대신 의사결정 트리, Gantt 차트, 시퀀스 다이어그램, 상태 다이어그램 등 목적에 맞는 표현 방식을 제안할 수 있다. - FigJam에 저장된 다이어그램은 팀의 초기 사고 과정과 의사결정을 남기는 공유 자산이 된다. - MCP를 활용하면 시스템 컨텍스트를 다이어그램에 반영해 복잡한 시스템을 함께 이해하는 방식으로 발전할 수 있다. 실무에서는 PRD나 기술 문서를 Claude에 제공해 초안을 만든 뒤, FigJam에서 팀원과 구조·누락·우선순위를 검토하는 방식이 효과적이다. 단, AI가 생성한 흐름과 아키텍처는 초안이므로 실제 요구사항과 시스템 제약을 담당자가 반드시 검증해야 한다.

figma

ChatGPT 브레인스토밍을 (새 탭에서 열림)

ChatGPT의 새로운 Figma 앱은 대화 중 나온 아이디어와 첨부 파일을 분석해 FigJam 다이어그램으로 변환해준다. 손그림, PDF, PRD, 기술 문서 등을 바탕으로 플로차트·시퀀스 다이어그램·상태 다이어그램·간트 차트 등을 만들고 수정할 수 있어, 개인 브레인스토밍을 팀 협업용 산출물로 빠르게 발전시키는 것이 핵심이다. 이 기능은 Figma MCP 서버를 기반으로 하며, 글 작성 시점에는 EU 외 지역의 로그인한 ChatGPT 사용자에게 제공된다. ## ChatGPT 브레인스토밍을 FigJam으로 변환 - ChatGPT 대화 내용을 바탕으로 적절한 FigJam 다이어그램을 추천하고 자동 생성한다. - 사용자는 프롬프트에 Figma 앱을 직접 언급할 수 있다. - 예: “Figma, 이 스케치로 다이어그램을 만들어줘.” - 사진, 손그림, PDF 등의 파일을 업로드해 다이어그램 생성에 참고시킬 수 있다. - 현재 지원되는 다이어그램 유형은 다음과 같다. - 텍스트 기반 플로차트 - 시퀀스 다이어그램 - 상태 다이어그램 - 간트 차트 - 생성된 결과는 FigJam에서 팀원들과 공유하고 반복적으로 수정할 수 있다. ## 디자인 아이디어를 빠르게 발전시키기 - 냅킨이나 화이트보드에 그린 임시 스케치를 공유 가능한 FigJam 파일로 변환한다. - ChatGPT에 다이어그램 수정, 주제 확장, 다른 시각화 방식 제안을 요청할 수 있다. - 복잡한 문서와 맥락을 업로드하면 ChatGPT가 첫 번째 다이어그램 초안을 작성한다. - 디자이너는 아이디어를 손쉽게 디지털 산출물로 바꾼 뒤 팀 리뷰와 협업을 진행할 수 있다. ## 기술 아키텍처와 시스템 설계 시각화 - 기술 문서와 화면 캡처를 업로드해 소프트웨어 아키텍처 다이어그램을 생성하거나 갱신할 수 있다. - 기술 블로그와 사례 연구를 바탕으로 여러 기술 접근법을 비교하는 구조도를 만들 수 있다. - 웹페이지 스크린샷을 분석해 관련 React 컴포넌트 구조를 다이어그램으로 표현할 수도 있다. - 분산된 코드와 문서, 팀별로 나뉜 지식을 하나의 시각적 모델로 통합해 시스템 설계 논의와 기술 의사결정을 돕는다. - 생성된 다이어그램을 바탕으로 엔지니어들이 실시간으로 협업할 수 있다. ## 제품 기획과 사용자 흐름 정리 - 권한 관리처럼 여러 선택지가 있는 문제를 옵션별 다이어그램으로 만들어 장단점을 비교한다. - PRD를 업로드해 사용자 여정이나 기능 플로차트를 생성한다. - 제품·디자인·엔지니어링 요구사항을 입력해 출시 일정을 간트 차트로 구성한다. - ChatGPT에서 개인적으로 여러 아이디어를 탐색한 뒤 FigJam에서 팀과 함께 우선순위와 실행 계획을 조율할 수 있다. ## Figma MCP 서버 기반 통합 - 이 기능은 Figma MCP 서버를 기반으로 동작한다. - MCP 서버는 원격 접근을 지원하며, 사용자가 작업 중인 맥락을 Figma 작업 환경으로 연결한다. - 따라서 ChatGPT의 분석 능력과 FigJam의 멀티플레이어 협업 기능을 결합할 수 있다. - 글 작성 시점에는 로그인한 ChatGPT 사용자 중 EU 외 지역 사용자에게 제공되며, 향후 더 많은 기능과 다이어그램 유형이 추가될 예정이다. 실무에서는 먼저 ChatGPT에 원문 자료나 스케치를 제공해 초안을 만들고, FigJam에서 사실관계·구조·표현을 검토한 뒤 팀 협업 자료로 다듬는 방식이 가장 효과적이다. AI가 만든 다이어그램은 초안이므로 기술적 정확성과 일정의 현실성은 담당자가 반드시 확인해야 한다.

figma

Figma의 새로운 기능: 2 (새 탭에서 열림)

2022년 2월 Figma 업데이트는 디자인 과정에 더 많은 사람을 참여시키고, 필요한 파일과 리소스를 빠르게 찾도록 돕는 데 초점을 맞췄습니다. Figma 검색 기능을 개선하고, FigJam의 정식 출시와 함께 협업·브레인스토밍 도구를 직관적으로 다듬었습니다. 또한 Figma Enterprise와 새로운 FigJam 요금제를 출시해 조직 단위 협업도 강화했습니다. ## Figma Enterprise 및 새로운 FigJam 요금제 - 디자인 프로세스에 더 많은 구성원이 참여할 수 있도록 새로운 Figma Enterprise 플랜을 출시했습니다. - FigJam에도 새로운 요금제를 도입해 브레인스토밍과 협업 기능을 다양한 규모의 팀이 활용할 수 있도록 했습니다. - 아이디어 발상부터 실제 제품 개발까지 팀 전체가 같은 흐름 안에서 협업하는 것을 목표로 합니다. ## 검색 기능 개선 - **파일 미리보기**를 제공해 검색 결과에서 파일의 실제 내용을 확인할 수 있습니다. - 파일 이름이 비슷하거나 여러 버전이 존재할 때 원하는 파일을 더 쉽게 식별할 수 있습니다. - 최근 파일, 팀 페이지, 검색 결과에서 **Figma 파일과 FigJam 파일을 유형별로 필터링**할 수 있습니다. - 불필요한 파일을 열어 확인하는 시간을 줄이고 작업 흐름을 유지할 수 있습니다. ## FigJam 리소스 메뉴 통합 - FigJam의 툴바를 단순화하고 컴포넌트, 템플릿, 위젯 등 다양한 리소스를 한곳에서 찾을 수 있도록 했습니다. - 회의 준비나 소규모 브레인스토밍 중에도 캔버스에 필요한 요소를 빠르게 추가할 수 있습니다. - 리소스 탐색 위치를 통합해 FigJam의 기본 사용 경험을 더 직관적으로 만들었습니다. ## 텍스트 크기 조정 강화 - 텍스트 상자 모서리를 클릭하고 드래그해 원하는 크기로 텍스트를 조정할 수 있습니다. - 다양한 글자 크기를 사용해 아이디어를 그룹화하고 콘텐츠의 계층 구조를 표현할 수 있습니다. - 진행자는 중요한 내용을 크게 표시해 회의 참가자에게 우선순위를 명확히 전달할 수 있습니다. ## 스탬프와 하이라이트의 객체 연결 - 스탬프와 하이라이트가 연결된 객체에 고정되도록 개선했습니다. - 객체를 캔버스의 다른 위치로 이동해도 해당 객체에 붙은 반응과 강조 표시가 함께 이동합니다. - 브레인스토밍에서 특정 아이디어에 대한 공감, 투표, 강조 상태를 더 안정적으로 기록할 수 있습니다. ## 색상과 도형을 빠르게 변경 - 복잡한 플로우나 다이어그램에서 색상과 도형을 시각적 구분 요소로 활용할 수 있습니다. - 툴바의 색상 선택기와 도형 변경 아이콘을 조정해 관련 기능을 더 빠르게 찾도록 했습니다. - 작업 중인 도형의 형태와 색상을 반복적으로 바꾸며 흐름을 쉽게 정리할 수 있습니다. ## 이미지 강조 기능 - FigJam 캔버스에 추가한 이미지에 테두리를 적용할 수 있습니다. - 여러 이미지 중 중요한 이미지나 참고 자료를 시각적으로 돋보이게 만들 수 있습니다. ## 선택 테두리 개선 - 선택 테두리를 더 얇게 만들어 도형의 채우기 영역과 겹치는 문제를 줄였습니다. - 선택 모서리를 더 크게 조정해 객체를 잡거나 크기를 조절하기 쉬워졌습니다. - 결과적으로 캔버스 위 객체를 선택하고 편집하는 조작성이 향상되었습니다. 이번 업데이트는 파일 탐색 시간을 줄이고, FigJam에서 브레인스토밍 결과를 더 명확하게 구조화하는 데 유용합니다. 팀에서는 파일 유형 필터와 미리보기를 적극 활용하고, FigJam에서는 객체에 연결되는 스탬프·하이라이트와 텍스트 크기 조정을 사용하면 협업 내용을 더 정확하게 전달할 수 있습니다.