figjam

98 개의 포스트

figma

Figma에서 MCP 서버를 활용하는 4가지 방법 | Figma 블로그 (새 탭에서 열림)

Figma의 MCP 서버는 디자인 파일을 읽는 수준을 넘어 Slides·FigJam·Make·Figma 에이전트 전반에서 콘텐츠를 생성하고 수정하는 도구로 확장됐다. 에이전트는 사내 문서와 최신 제품 정보를 바탕으로 발표 자료나 협업 보드를 만들고, Figma 템플릿·디자인 시스템·사용자 정의 폰트까지 반영할 수 있다. 그 결과 반복적인 콘텐츠 제작의 상당 부분을 자동화하면서도 최종 검토와 창의적 판단은 사람이 담당하는 워크플로가 가능해졌다. ## Figma MCP 서버의 확장된 역할 - Figma Slides, FigJam, Figma Make, 새로운 Figma 디자인 에이전트에서 프롬프트 기반 생성·수정을 지원한다. - 디자인 파일의 이미지와 아이콘을 SVG, PDF, JPG, PNG로 내려받을 수 있는 `download_assets` 도구가 추가됐다. - 업로드한 사용자 정의 폰트를 지원해 웹 안전 폰트로 대체하지 않고 브랜드 서체를 그대로 렌더링한다. - `use_figma` 도구와 `/figma-use-slides` 같은 MCP 스킬을 조합해 팀의 템플릿과 디자인 의도를 결과물에 반영한다. - 스킬은 에이전트의 출력 품질과 일관성을 높이며, Figma 커뮤니티에서 공유하거나 직접 제작할 수 있다. ## 지속적으로 갱신되는 발표 자료 만들기 - Figma의 디자이너 옹호 담당자는 AI 제품 출시 내용을 정리한 상시 업데이트형 발표 자료를 운영한다. - 다음과 같은 프롬프트를 코드 에디터에서 실행해 자료를 갱신한다. - Slack, Google Drive, Shortcut 블로그, 릴리스 노트에서 최신 정보를 수집 - 기존 덱에서 갱신이 필요한 부분을 제안 - 새로 추가할 슬라이드 아이디어를 생성 - Figma Slides의 기존 템플릿에 내용을 반영 - 에이전트가 관련 대화, 브리프, 출시 메시지를 모아 초안의 약 80%를 완성한다. - 이후 사람은 이미지 교체, 문구 수정, 내용 검토 등 품질 관리에 집중한다. - 사용자 정의 폰트를 활용하기 때문에 발표 자료의 브랜드 정체성과 시각적 일관성을 유지할 수 있다. - 같은 방식은 다음과 같은 업무에도 적용된다. - PM의 제품 킥오프 자료 작성 - 디자이너의 디자인 탐색 발표 - 마케팅 팀의 GTM 계획 수립 - 영업 팀의 고객용 자료 최신화 - 핵심 이점은 단순히 제작 속도를 높이는 데 그치지 않고, 팀의 디자인 시스템과 브랜드 기준을 반영한 결과물을 만드는 것이다. ## 실시간 데이터를 반영한 FigJam 보드 생성 - 제품 관리자는 기능 킥오프 워크숍을 준비할 때 회사 곳곳의 정보를 수집하고, 세션에 맞게 FigJam 섹션을 구성해야 한다. - 이 과정은 관련 맥락을 모으고 보드 형식을 맞추는 데 많은 시간이 걸린다. - 이를 자동화하기 위해 `/figjam-builder`라는 커스텀 스킬을 구축했다. - 스킬과 MCP 서버를 이용하면 실시간 데이터와 조직 내 정보를 바탕으로 워크숍용 FigJam 보드를 생성할 수 있다. - 제공된 본문은 이 사례의 구체적인 구현 방식과 나머지 두 가지 활용 사례 설명으로 이어지기 전에 중단되어 있다. MCP를 도입할 때는 모든 결과를 자동 게시하기보다, 에이전트가 자료 조사와 초안 작성을 맡고 사람이 사실관계·문구·시각 요소를 검토하는 방식이 현실적이다. 특히 팀 템플릿, 디자인 시스템, 사용자 정의 폰트, 업무별 스킬을 함께 제공할수록 자동화 결과의 품질과 브랜드 일관성이 높아진다.

figma

이제 FigJam은 코딩 에이전트의 화이트보드이기도 합니다 | Figma 블로그 (새 탭에서 열림)

FigJam이 코딩 에이전트의 작업을 시각화하고 팀과 함께 검토하는 협업 공간으로 확장된다. Figma는 `figma-use-figjam`, 확장된 `generate_diagram`, `get_figjam` 등의 MCP 도구와 스킬을 통해 에이전트가 코드베이스와 문서를 분석하고, FigJam에 아키텍처를 작성하며, 팀 피드백을 다시 구현 단계로 전달하도록 한다. 이를 통해 빠른 에이전트 개발로 발생하는 숨은 복잡성을 줄이고, 코딩 전에 설계를 검토할 수 있다는 것이 글의 결론이다. ## 에이전트 개발 속도와 코드 복잡성의 간극 - 에이전트 덕분에 과거 몇 분기 걸리던 기능을 몇 주 만에 구현할 수 있다. - 그러나 사람이 충분히 검토하지 않은 에이전트 생성 PR이 쌓이면 코드베이스에 다음 문제가 생긴다. - 숨은 복잡성 증가 - 기존 구조와 새로운 구현 간의 불일치 - 팀원이 전체 시스템 변화를 파악하기 어려움 - 글의 저자는 이러한 문제를 한눈에 파악하고 논의하기 위해 텍스트 문서보다 시각적인 시스템 표현이 필요하다고 설명한다. ## FigJam과 MCP 도구의 결합 - 기존 `use_figma` MCP 도구는 AI 에이전트가 실제 Figma 컴포넌트를 사용해 디자인을 생성하거나 수정하도록 한다. - `create_new_file`은 에이전트가 새 Figma 파일 안에 디자인을 생성할 수 있게 한다. - 새롭게 확장된 `generate_diagram`은 단순한 다이어그램을 넘어 다음과 같은 복잡한 시각 자료를 생성한다. - 시스템 아키텍처 다이어그램 - ERD(Entity Relationship Diagram) - 서비스 및 데이터 관계 구조 - `figma-use-figjam` MCP 스킬은 에이전트가 FigJam 보드를 직접 읽고 쓸 수 있도록 한다. - `generate-project-plan` 같은 워크플로 스킬은 문서, 코드베이스, 대화 내용을 시각적인 프로젝트 계획으로 변환한다. ## 1단계: 조사와 계획을 시각화 - 먼저 코딩 에이전트가 새 기능에 필요한 맥락을 수집한다. - 관련 MCP 서버 문서 - 코드베이스 구조 - 기존 구현 패턴 - 영향을 받는 서비스와 파일 - 에이전트는 가능한 구현 방안과 트레이드오프를 조사한다. - 이후 작업을 여러 개의 stacked PR로 나누고 테스트 전략을 세운다. - 기존에는 이 결과가 긴 Markdown 문서로 남았지만, 이제 FigJam 보드로 변환할 수 있다. - 보드에는 다음 자료를 함께 배치할 수 있다. - `generate_diagram`으로 생성한 아키텍처 및 ER 다이어그램 - `figma-use-figjam`으로 작성한 노트 - 코드 블록 - 주석과 설계 근거 - 텍스트 중심의 계획보다 팀원이 구조와 대안을 빠르게 비교하고, 적절한 아키텍처를 논의하기 쉬워진다. ## 2단계: 코드 작성 전 협업 - 생성된 FigJam 보드를 팀에 공유해 구현 전에 기술적 피드백을 받는다. - 팀원은 다이어그램 위에서 질문과 결정을 직접 남길 수 있다. - 특정 도구가 디자인 파일 외에 여러 파일 형식을 지원해야 하는가? - `folderId`를 입력받을 것인가? - 새 파일은 사용자의 Drafts 폴더에 생성할 것인가? - 원격 팀도 회의실에서 화이트보드를 사용하는 것처럼 기술 맥락을 공유하고 논의할 수 있다. - 에이전트가 만든 다이어그램도 사람이 검토하는 협업 산출물로 활용된다. ## 3단계: FigJam의 결정을 구현으로 전달 - 리뷰가 끝나면 에이전트가 보드의 결과를 다시 읽어 구현 계획을 갱신한다. - `get_figjam` 도구를 사용하면 다음 정보를 코딩 환경으로 가져올 수 있다. - 아키텍처 다이어그램 - 팀의 결정 사항 - 보드의 주석과 논의 내용 - 과거처럼 다이어그램을 캡처하고 댓글을 수동으로 요약해 에이전트에게 설명할 필요가 줄어든다. - 최종 PR에는 FigJam 보드 링크를 함께 연결해 설계 맥락을 보존할 수 있다. - 아키텍처가 코드 작성 전에 이미 검토되므로 PR 리뷰와 병합이 더 수월해진다. 에이전트에게 구현을 맡기더라도 계획·아키텍처·팀 의사결정은 사람이 먼저 검토하는 흐름을 만드는 것이 중요하다. FigJam과 MCP 도구를 함께 사용하면 에이전트의 빠른 실행력과 팀의 설계 검토를 연결해, 코드 품질과 협업 가시성을 높일 수 있다.

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

말하기보다 보여주기: 업무 (새 탭에서 열림)

Figma는 Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 직접 삽입할 수 있는 기능을 출시했다. 이를 통해 아이디어를 스크린샷이나 설명으로 전달하는 대신 실제로 작동하는 경험을 함께 확인하며 피드백과 의사결정을 진행할 수 있다. 또한 텍스트·요소 편집, 요소 삭제, 모델 작업 과정 검토 등 정교한 수정 기능이 추가되어 프로토타입을 더 빠르게 개선할 수 있다. ## 작업 공간 어디서나 프로토타입 공유 - Figma Make 프로토타입을 Figma Design, FigJam, Figma Slides에 삽입할 수 있다. - 아이디어 탐색부터 디자인 리뷰, 이해관계자 프레젠테이션까지 동일한 인터랙티브 프로토타입을 활용한다. - 팀원들이 변화하는 아이디어를 하나의 실제 경험으로 확인하므로 피드백과 방향성 정렬이 쉬워진다. ## FigJam에서 초기 아이디어 정렬 - FigJam 보드에 Figma Make 프로토타입을 직접 삽입해 논의의 중심으로 사용할 수 있다. - 스크린샷이나 추상적인 설명 대신 실제 화면을 클릭하며 기능과 사용자 여정을 검토한다. - 대화 과정에서 우선순위를 현실적으로 정하고, 사용자 경험의 누락된 부분을 조기에 발견할 수 있다. ## Figma Design에서 인터랙션 리뷰 - 디자인 리뷰 단계에서 UI, 문구, 인터랙션이 실제로 어떻게 동작하는지 확인할 수 있다. - 여러 디자인 버전을 나란히 비교해 실사용 상황에서 더 나은 안을 판단할 수 있다. - 구체적인 피드백을 Figma Make로 바로 되돌려 보내고, 추측 없이 수정할 수 있다. ## Figma Slides에서 사용자 경험 기반 발표 - 프레젠테이션 안에 프로토타입을 삽입해 이해관계자가 사용자 관점에서 콘셉트를 경험하도록 한다. - Figma Slides의 투표 기능으로 참석자의 의견을 빠르게 수집할 수 있다. - 논의가 진행되는 동안 얻은 피드백을 Figma Make에 반영해 즉시 업데이트할 수 있다. ## 텍스트와 요소를 직접 수정 - 프로토타입 내부의 텍스트를 직접 편집해 다양한 콘텐츠와 문구를 빠르게 시험할 수 있다. - 이해관계자 피드백에 따라 카피를 즉시 다듬을 수 있다. - **Point and edit** 도구를 사용하면 프로토타입 안에서 색상, 간격, 텍스트 스타일을 세밀하게 조정할 수 있다. - 특정 노드를 삭제하면서 나머지 구조는 유지할 수 있다. - 삭제한 요소는 `Command+Z`로 되돌릴 수 있다. ## 모델의 작업 방식 검토와 수정 - 프로토타입이 복잡해질수록 모델이 어떻게 결과를 구성했는지 확인하는 것이 중요해진다. - Figma Make는 모델의 구축 과정을 파악하고 필요할 때 방향을 수정할 수 있도록 가시성을 제공한다. - 사용자는 모델의 결과를 그대로 받아들이기보다, 아이디어와 피드백에 맞게 생성 과정을 조정하며 프로토타입을 발전시킬 수 있다. ## 실용적인 활용 - 초기 아이디어는 FigJam에서 실제 프로토타입으로 검증한다. - 디자인 리뷰에서는 여러 버전을 비교하고 구체적인 UI·문구·인터랙션 피드백을 수집한다. - 발표 단계에서는 Figma Slides의 삽입 및 투표 기능으로 합의를 이끈다. - 반복적인 수정이 필요한 경우 직접 편집, Point and edit, 노드 삭제, 실행 취소 기능을 활용하면 Figma Make 작업 속도를 높일 수 있다.

figma

이제 정부용 피그마 (새 탭에서 열림)

Figma Make이 Figma for Government에 추가되어 연방 기관이 보안 환경에서 대화형 프로토타입을 더 빠르게 제작할 수 있게 됐다는 내용이다. Figma는 이를 통해 정책 담당자, 디자이너, 개발자, 연구자, IT 담당자가 협업하며 시민 대상 서비스를 더 일찍 검증하고 접근성과 일관성을 높일 수 있다고 설명한다. Figma for Government는 FedRAMP Moderate 인증 환경을 기반으로 하며, 일부 클라우드 인프라의 완전한 규정 준수는 2026년에 완료될 예정이지만 Make은 현재 승인된 환경에서 사용할 수 있다. ## 공공 서비스 디지털화의 복잡성 - 정부 서비스는 시민 생활과 직접 연결되므로 사용성, 접근성, 신뢰도가 중요하다. - 정책 담당자, 기술 담당자, 운영 책임자 등 다양한 이해관계자의 요구를 조율해야 한다. - 요구사항이 계속 변하고 디자인·개발 인력이 제한적이어서 정적인 목업만으로는 빠른 검증이 어렵다. - 2024년 온라인 여권 갱신 시스템 사례에서는 2025년까지 200만 명 이상이 온라인으로 갱신했으며, 이용자의 97%가 긍정적인 경험을 보고했다. - 미국 행정명령도 시민 대상 서비스에서 사용성, 접근성, 디자인 일관성의 중요성을 강조했다. ## Figma Make의 역할 - 텍스트 프롬프트를 활용해 아이디어를 대화형 프로토타입으로 구현한다. - 기존에는 정적 시안을 주고받으며 수주가 걸리던 작업을 수시간 내에 탐색할 수 있다. - 다양한 사용자 흐름과 화면 구성을 빠르게 만들어 초기 단계에서 비교·수정할 수 있다. - 시민과 실제 사용자를 개발 전에 참여시켜 업무 흐름과 가정을 검증할 수 있다. - Figma 내부의 공유 라이브러리, 디자인 패턴, 접근성 기준과 연계해 결과물의 일관성을 유지한다. ## 협업과 서비스 품질 향상 - 디자이너, 정책 담당자, 연구자, 엔지니어, IT 담당자가 하나의 실시간 협업 공간에서 작업할 수 있다. - 아이디어 구상부터 프로토타입, 사용자 테스트, 개발 전달까지의 단절을 줄인다. - 연방 혜택, 금융 커뮤니케이션, 교육 플랫폼, 우주 임무 지원 시스템, 연구 서비스 등 복잡한 공공 업무에 적용할 수 있다. - 공유 디자인 시스템을 활용해 여러 기관과 서비스에서 접근성과 시각적 일관성을 높일 수 있다. - 시민의 피드백을 더 이른 시점에 반영해 개발 후반의 수정 비용과 실패 위험을 줄일 수 있다. ## 보안 및 규정 준수 - Figma Make은 Figma for Government의 승인된 환경에서 제공된다. - Figma for Government는 FedRAMP Moderate 권한을 기반으로 정부 기관의 보안 요구사항을 충족하도록 설계됐다. - 다만 Figma의 일부 클라우드 인프라는 2026년에 완전한 FedRAMP Moderate 규정 준수를 달성할 예정이다. - 글에서는 이러한 진행 상황과 별개로 Make 자체는 현재 승인된 환경에서 사용할 수 있다고 설명한다. ## 향후 방향 - Figma는 Figma Make을 시민 중심의 공공 서비스와 기관 내부 도구를 현대화하는 핵심 기능으로 확대하려 한다. - 정부 기관이 더 많은 아이디어를 빠르게 실험하고, 사용자 검증을 거쳐 실제 서비스로 발전시키는 것이 목표다. - 국립공원관리청의 431개 국립공원 디지털 앱 사례처럼, 작은 팀도 Figma를 활용해 대규모 공공 정보 서비스를 구축할 수 있음을 강조한다. 실무적으로는 Figma Make을 최종 서비스 개발 도구라기보다, 보안 환경에서 정책·업무 흐름을 빠르게 검증하는 프로토타이핑 도구로 활용하는 것이 적절하다. 도입 전에는 조직의 데이터 분류 기준과 FedRAMP 적용 범위, 2026년 예정된 인프라 규정 준수 일정을 별도로 확인해야 한다.

figma

Figma의 정밀한 (새 탭에서 열림)

Figma는 이미지 편집을 다른 도구로 옮기지 않고 캔버스 안에서 처리할 수 있도록 세 가지 AI 기능을 공개했다. **Erase object**, **Isolate object**, **Expand image**를 통해 특정 객체 제거·분리·수정과 이미지 비율 확장이 가능해져, 디자인 작업의 정밀도와 효율성이 높아진다. 기존의 배경 제거·자르기 기능도 새 이미지 편집 툴바에 통합해 이미지 작업 흐름을 단순화했다. ## 객체 지우기와 분리 편집 - 이미지에서 올가미로 원하는 객체를 선택할 수 있다. - **Erase object**는 선택한 객체를 이미지에서 완전히 제거한다. - **Isolate object**는 객체나 사람을 배경과 분리해 편집하거나 위치를 조정한다. - 분리한 객체에 다음과 같은 효과를 적용할 수 있다. - 조명 조정 - 색상 변경 및 보정 - 채도 조절 - 초점 및 흐림 효과 - 그림자 추가 - 제품 사진에서 주요 부품을 밝게 하거나, 방해 요소를 제거해 제품을 강조하는 용도로 활용할 수 있다. - 텍스트 프롬프트 기반의 기존 **Edit image** 기능과 함께 사용해 생성형 편집과 세밀한 수정을 결합할 수 있다. ## 왜곡 없이 이미지 확장 - **Expand image**는 이미지의 배경을 AI로 확장해 새로운 종횡비에 맞춘다. - 기존처럼 이미지를 단순히 잘라 구도를 바꾸지 않아도 된다. - 이미지의 주요 피사체와 맥락을 유지하면서 데스크톱·모바일·소셜 미디어 등 다양한 규격에 적용할 수 있다. - 예를 들어 정사각형 제품 이미지를 웹 배너로 확장해 텍스트를 배치할 공간을 만들 수 있다. - 이미지 자체를 늘려 왜곡하는 방식이 아니라, 주변 배경을 자연스럽게 생성하는 방식이다. ## 통합 이미지 편집 툴바 - 새 툴바에서 기존 기능과 신규 AI 기능을 한곳에서 사용할 수 있다. - Remove background - Crop - Erase object - Isolate object - Expand image - AI 이미지 생성·편집 - 자주 사용되는 **Remove background** 기능의 접근성을 높여 이미지 편집 흐름을 개선했다. - 서로 다른 출처와 형식의 로고·제품 이미지를 통일된 스타일로 정리할 수 있어 마케팅 자료와 UI 목업 제작에 유용하다. ## 지원 제품과 이용 조건 - 기능은 Figma Design과 Figma Draw에서 제공된다. - AI가 활성화된 Professional, Organization, Enterprise 요금제의 Full seat 사용자가 이용할 수 있다. - FigJam, Slides, Buzz(beta)에서도 접근 가능하며, 해당 제품에서는 Dev·Collab·View seat에도 제공된다. - AI 기능 사용에는 크레딧이 차감된다. - Figma는 향후 더 많은 제품으로 기능을 확대할 예정이다. 실무에서는 제품 사진의 불필요한 요소 제거, 채널별 이미지 비율 조정, 배경·색상 통일 작업에 특히 효과적이다. 다만 AI 이미지 편집은 크레딧을 사용하므로 반복 수정이 많은 작업에서는 결과를 먼저 확인한 뒤 필요한 영역에 선택적으로 적용하는 것이 좋다.

figma

Gemini 3를 (새 탭에서 열림)

Gemini 3 Pro가 Figma Make의 실험적 모델로 제공되며, 디자인을 작동하는 코드 기반 프로토타입으로 전환하는 능력을 보여준다. Figma의 초기 테스트에서 다양한 레이아웃·스타일·인터랙션을 빠르게 탐색하면서도 디자인 충실도를 유지하는 점이 강점으로 나타났다. Gemini 3 Flash는 빠른 아이디어 발상과 수정에 적합한 경량 모델로 함께 제공된다. ## Figma Make에서 Gemini 3 Pro 제공 - Figma는 AI 모델을 다음 기준으로 평가한다. - 원래 디자인을 얼마나 정확하게 구현하는가 - 반복적인 작업을 얼마나 줄여주는가 - 팀의 창의적 탐색 범위를 얼마나 넓혀주는가 - Gemini 3 Pro는 다양한 레이아웃, 시각적 스타일, 인터랙티브 패턴을 탐색하는 데 강점을 보였다. - Figma Make의 실험적 모델 설정에서 활성화할 수 있다. - Gemini 3 Flash는 성능과 속도에 초점을 둔 모델로, 빠른 아이디어 구상과 반복적인 디자인 수정에 적합하다. ## 디자인에서 코드로의 전환 - Figma Design에서 제작한 황금빛 나뭇잎과 짙은 적갈색 배경의 추수감사절 감사 보드를 Figma Make로 구현했다. - Gemini 3 Pro는 다음 작업을 수행했다. - 나뭇잎을 SVG로 생성 - 화면 위에서 자연스럽게 움직이는 물리 효과 구현 - 마우스를 올리면 감사 메시지가 표시되는 인터랙션 추가 - Supabase를 연결해 사용자가 감사 메시지를 제출하도록 구성 - 단순한 시각적 콘셉트가 데이터 저장과 사용자 입력을 포함한 인터랙티브 프로토타입으로 확장됐다. ## 하나의 기능, 여러 시각적 스타일 - 새해 전야 RSVP 페이지를 대상으로 스타일 변환 능력을 테스트했다. - 처음에는 다음과 같은 Y2K 스타일을 적용했다. - 복고풍 미래주의 - 어두운 크롬 질감 - 분위기 있는 시각 언어 - 실제로 작동하는 RSVP 폼 - 이후 같은 기능을 “콘크리트 포에트리” 스타일로 변경했다. - 강렬하고 제한적인 타이포그래피 - 브루털리즘적 긴장감 - 장식을 최소화한 구성 - 스타일이 크게 바뀌어도 RSVP 폼의 핵심 기능은 유지됐다. - 각 스타일에 맞춰 애니메이션과 인터랙션 세부 요소도 일관성 있게 조정됐다. ## 디자인 시스템과 컴포넌트 활용 - Gemini 3 Pro를 이미 구축된 디자인 시스템 안에서 테스트했다. - Figma Make의 Make kits와 npm import를 통해 공유 라이브러리와 컴포넌트를 활용할 수 있도록 구성했다. - UI3 라이브러리 기반의 FigJam 템플릿에 캔버스 배경 스타일 전환 기능을 추가하도록 요청했다. - 모델은 다음 결과를 만들었다. - 12가지 배경 스타일 구현 - UI3 컴포넌트 사용 - 배경 스타일 전환 인터랙션 추가 - 텍스처 간 애니메이션 적용 - 스티키 노트의 레이어링과 크기 변화 효과 구현 - 복잡한 설명 없이도 기존 시스템의 구성 요소를 활용하면서 새로운 기능을 프로토타이핑했다. ## 디자이너의 역할 확대 - AI는 디자이너를 대체하기보다 탐색 가능한 디자인 공간을 넓히는 도구로 제시된다. - 모델이 디자인 의도와 시스템을 더 잘 이해할수록 다음 작업이 빨라진다. - 다양한 스타일 시도 - 인터랙션 검증 - 디자인 시스템 기반 기능 실험 - 코드로 구현된 프로토타입 제작 - 속도와 창의성이 서로 충돌하기보다, AI가 반복 작업을 줄여 디자이너가 방향 설정과 가능성 판단에 더 집중하게 만든다는 관점이다. Gemini 3 Pro는 높은 시각적 충실도와 인터랙션 구현이 필요한 프로토타입 제작에 적합하고, Gemini 3 Flash는 빠른 시안 생성과 반복 수정에 활용하는 것이 좋다. 다만 실제 제품 개발 전에는 생성된 코드와 데이터 연결, 접근성, 디자인 시스템 준수 여부를 별도로 검토해야 한다.

figma

Figma에서 접근성을 개선하는 (새 탭에서 열림)

Figma는 키보드만으로 캔버스와 댓글을 조작하고, 스크린 리더로 파일 내용을 더 정확히 이해할 수 있도록 15가지 이상의 접근성 기능을 출시했다. 제품별 키보드 단축키, 더 논리적인 포커스 이동, 풍부한 객체 설명과 서식 정보, 향상된 색상 대비가 포함된다. 이를 통해 장애가 있는 사용자뿐 아니라 장시간 작업하거나 다양한 환경에서 Figma를 사용하는 모든 사용자의 탐색성과 작업 흐름을 개선하는 것이 목표다. ## 캔버스 조작을 위한 키보드 기능 확대 - 키보드만으로 캔버스 객체를 이동·조정·정렬할 수 있는 기능이 제품 전반으로 확대됐다. - **Figma Slides** - 발표자 노트 크기 조정 - AI를 활용한 글쓰기 톤 변경 - **FigJam** - 표의 행과 열 추가·삭제·순서 변경 - 스탬프, 투표, 와시 테이프 추가 및 조정 - AI 요약, 임베드 링크·동영상 같은 캔버스 객체 탐색 - 마커 선과 형광펜 스트로크 선택 및 조정 - **Figma Design** - 선 추가·선택·조정 - 룰러 가이드 추가·삭제·편집 - 타원에서 호(arc) 생성 및 편집 - **공통 기능** - 편집 모드와 보기 전용 모드에서 링크 열기 - 키보드로 링크 사이를 이동 ## 댓글과 Dev Mode 주석 탐색 - 댓글을 추가하고, 위치를 옮기고, 댓글 간 이동을 키보드 단축키로 처리할 수 있다. - Dev Mode 주석도 키보드로 추가·이동·탐색할 수 있다. - 피드백을 확인하거나 답변할 때 포커스가 흐트러지지 않도록 설계되어 협업과 핸드오프 과정이 개선된다. - 댓글 관련 기능은 베타 제품에서는 제공되지 않을 수 있다. ## 사용자 설정을 통한 조작 방식 개인화 - 입력 중 Figma 전용 단축키가 동작하지 않도록 설정할 수 있다. - 다른 사용자가 스포트라이트를 사용할 때 자동으로 따라가는 기능을 켜거나 끌 수 있다. - 사용자는 작업 방식이나 보조기술 사용 환경에 맞춰 키보드 동작을 조정할 수 있다. ## 스크린 리더 지원 강화 - 버튼, 메뉴, 패널 등 인터랙티브 요소를 Tab 키로 이동할 때 더 논리적인 순서를 따른다. - 메뉴 열기, 버튼 실행, 툴바 옵션 선택 등 특정 동작으로 바로 이동할 수 있다. - 객체를 읽을 때 유형, 이름, 상태 등 더 자세한 정보가 제공된다. - 새 댓글이나 파일 변경 사항 같은 중요한 업데이트가 더 일관되게 안내된다. - 굵게, 기울임, 목록, 링크 등 서식 있는 텍스트 구조를 스크린 리더가 보존해 읽는다. - Buzz와 Slides의 캔버스 객체도 스크린 리더가 인식하고 안내한다. - 이러한 개선은 캔버스의 객체 순서를 파악하고 파일 변경 사항을 놓치지 않도록 돕는다. ## 향상된 색상 대비 - 간단한 토글로 라이트 모드와 다크 모드 모두에서 인터페이스의 색상 대비를 높일 수 있다. - 접근성 설정, Actions 메뉴, General 설정에서 기능을 활성화할 수 있다. - 텍스트와 아이콘의 가독성이 높아지고, 버튼과 외곽선이 더 뚜렷하게 표시된다. - 인터페이스 구조를 파악하고 필요한 요소를 빠르게 찾기 쉬워진다. - 햇빛이나 강한 조명 아래에서도 화면을 보기 쉬우며, 장시간 화면을 사용하는 경우 눈의 부담을 줄일 수 있다. ## 실용적인 활용 키보드 중심으로 작업하는 사용자는 Figma의 전체 키보드 컨트롤 목록을 확인해 자주 쓰는 캔버스·댓글 단축키를 익히는 것이 좋다. 스크린 리더 사용자는 객체 설명과 서식 있는 텍스트 지원을 활용하고, 일반 사용자도 색상 대비 설정을 활성화하면 장시간 작업이나 밝은 환경에서 더 편하게 Figma를 사용할 수 있다.

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

듀오링고 메소드: (새 탭에서 열림)

Duolingo Math 팀은 디자인과 엔지니어링을 분리해 순차적으로 넘기는 전통적인 핸드오프 대신, 처음부터 함께 아이디어를 만들고 프로토타입을 반복 검증하는 방식을 택한다. 디자이너·엔지니어·PM이 실시간으로 협업하며 실제 작동하는 경험을 바탕으로 결정하기 때문에, 새로운 제품에서도 빠르게 방향을 찾고 완성도를 높일 수 있다. 핵심은 완벽한 설계를 먼저 확정하는 것이 아니라, 만들고 보여주고 수정하는 과정을 팀 전체의 공동 작업으로 만드는 데 있다. ## 선형적인 핸드오프의 한계 - 디자인에서 엔지니어링으로 작업을 한 번에 넘기는 방식은 제품 개발이 실제로 진행되는 방식과 맞지 않는다. - 특히 Duolingo Math처럼 새로운 학습 모듈과 게임을 처음부터 만들어야 하는 팀은 기존 템플릿이나 검증된 청사진을 활용하기 어렵다. - 상호작용과 애니메이션이 많은 기능은 문서나 정적인 화면만으로 구현 난이도와 사용자 경험을 정확히 판단하기 어렵다. - 따라서 디자인과 엔지니어링이 초기 단계부터 지속적으로 연결되어야 한다. ## 초기 단계부터 함께 아이디어 구상 - 디자이너가 혼자 작업을 시작하지 않고, 디자이너·엔지니어·제품 관리자가 공유된 FigJam 파일에서 함께 아이디어를 낸다. - 방향이 정해지면 디자이너가 Figma에서 화면과 동작, 모션을 구체화한다. - 엔지니어도 이 단계에 적극 참여해 복잡한 상호작용과 애니메이션을 미리 검토한다. - 구현하기 어려운 부분은 Figma 댓글 등으로 조기에 지적해 불필요한 설계 수정을 줄인다. - Jira를 Figma와 직접 연결해 도구 간 맥락 전환을 줄이고, 디자인과 개발 작업의 흐름을 유지한다. ## 빠른 프로토타이핑과 반복 실험 - 디자인 시안에 합의한 뒤 엔지니어가 Duolingo 디자인 시스템의 컴포넌트를 활용해 초기 프로토타입을 빠르게 만든다. - 디자이너와 엔지니어가 작동하는 프로토타입을 만든 후 팀 회의에서 직접 테스트하고 피드백을 받는다. - Slack 채널에서 디자이너는 Figma 파일을, 엔지니어는 구현된 프로토타입을 공유하며 질문과 의견을 주고받는다. - 각 기능마다 다음 순환을 반복한다. - 프로토타입 제작 - 팀 테스트 - 피드백 수집 - 수정 및 재검증 - Duolingo의 “말로 설명하기보다 직접 보여준다(show don’t tell)”는 원칙에 따라, 아이디어의 타당성을 논의만 하지 않고 실제 경험으로 확인한다. - 프로토타입은 설계를 미리 완성하기 위한 결과물이 아니라, 제품이 실제로 어떻게 느껴지는지 확인하고 핵심 결정을 내리기 위한 도구다. ## 함께 다듬고 출시하기 - 지속적인 협업을 통해 개발 중에도 빠르게 의사결정을 내리고 기능을 다듬을 수 있다. - 속도가 중요할 때는 애니메이션을 단순화하는 등 기능을 핵심 경험 위주로 축소한다. - 교육용 게임의 시장 적합성을 확인할 때도 처음부터 완성도 높은 게임 두 개를 만드는 대신, 단순한 디자인과 최소한의 메커니즘을 가진 게임부터 빠르게 제작했다. - 어떤 기능을 우선할지 미리 정한 뒤, 일곱 가지 프로토타입을 반복적으로 제작하며 사용자에게 어떤 경험이 반응을 얻는지 확인했다. - 이 방식은 대규모 기능을 장기간 개발한 뒤 실패하는 위험을 낮추고, 초기 학습을 제품 방향에 빠르게 반영하게 한다. ## 실무에 적용할 때의 시사점 - 디자인 완료 후 개발을 시작하기보다, 초기 기획부터 디자이너와 엔지니어를 함께 참여시킨다. - 정적 시안보다 작동하는 작은 프로토타입을 우선 제작한다. - 기능별로 짧은 제작·테스트·수정 주기를 운영한다. - 속도와 학습이 중요한 초기 단계에서는 부가 기능보다 핵심 사용자 경험에 집중한다. - 협업 도구를 연결하고 공유 채널을 마련해 작업 맥락과 피드백을 실시간으로 유지한다.

figma

좋은 기업들과 함께: 소매 (새 탭에서 열림)

리테일 기업은 Figma를 활용해 고객 여정을 매끄럽게 만들고, 여러 디지털 접점에서 일관된 브랜드 경험을 구축하고 있다. Nuuly는 고객용·렌탈 운영용 디자인 시스템을 분리해 복잡한 의류 대여 과정을 단순화했으며, Figma 도입으로 협업과 개발 핸드오프를 개선했다. 글은 Ruggable과 GitHub 사례를 통해서도 디자인 시스템과 부서 간 협업이 전자상거래 경험을 강화한다고 설명한다. ## 변화하는 전자상거래 경험 - 오늘날 전자상거래는 단순한 상품 판매를 넘어 다음 요소를 함께 요구한다. - 고객 신뢰 형성 - 원활한 구매·이용 여정 - 여러 디지털 채널에서의 일관된 브랜드 경험 - 직원과 운영 조직의 업무 효율 - Nuuly, Ruggable, GitHub 등의 기업은 Figma를 중심으로 디자인·마케팅·개발·운영 조직의 협업을 강화하고 있다. - 디자인 시스템과 프로토타이핑 도구를 활용해 고객 접점뿐 아니라 내부 업무용 제품까지 체계적으로 설계한다. ## Nuuly의 의류 렌탈 경험 단순화 - 2019년 시작한 Nuuly는 특별한 날뿐 아니라 일상에서도 의류를 대여하는 문화를 확산시키려 한다. - 의류 렌탈에는 고객 경험 외에도 다음과 같은 복잡한 운영 과정이 필요하다. - 순환 재고 관리 - 의류 세탁 - 수선 및 재사용 - Nuuly는 서로 다른 목적을 가진 두 개의 디자인 시스템을 구축했다. - 고객이 사용하는 렌탈 서비스용 시스템 - 재고·세탁·수선 등을 관리하는 렌탈 운영용 시스템 - 색상과 타이포그래피를 토큰화해 계절과 브랜드 변화에 맞춰 쉽게 교체할 수 있도록 설계했다. ## 복잡한 렌탈 상태를 직관적으로 표현 - Nuuly는 복잡한 물류 기술을 고객에게 직접 노출하기보다, 렌탈 과정을 최대한 단순하고 직관적으로 보여주는 데 집중했다. - `My Nuuly` 기능은 고객의 Nuuly 가방을 중심으로 현재 상태와 다음 단계를 안내한다. - 이 기능은 26개가 넘는 렌탈 상태를 고객이 이해하기 쉬운 흐름으로 연결한다. - 물리적인 의류 배송 경험과 디지털 화면을 하나의 연속적인 고객 여정으로 통합한 사례다. ## Figma를 통한 디자인 시스템 통합 - Figma 도입 전 Nuuly의 디자인 시스템은 파일 크기와 서버 동기화 제약 때문에 여러 파일로 분산되어 있었다. - 총 16개 파일을 관리해야 했고 성능도 느렸다. - 2023년 Figma로 이전하면서 시스템을 재구축해 두 개의 단순한 Figma 라이브러리로 통합했다. - 그 결과: - 디자인 작업 속도가 빨라짐 - 네이티브 프로토타이핑으로 인터랙션 의도를 개발자에게 명확히 전달 - 디자인·개발 간 핸드오프 개선 - 조직 전체의 민첩성과 협업 수준 향상 ## 여러 부서로 확장된 협업 - Figma 도입은 UX 팀에만 국한되지 않고 콘텐츠 디자인팀과 스튜디오 사진팀으로 확산됐다. - FigJam과 Figma Slides를 통해 더 넓은 조직이 다음 업무에 참여했다. - 아이디어 발상 - 고객 여정 개선안 검토 - 신규 기능 논의 - 대표적인 사례로 구독자가 대여하지 않고 바로 구매할 수 있는 최종 판매 상품을 제공하는 `The Thrift Shop`이 소개된다. - 도구 통합으로 팀은 반복적인 파일 관리보다 협업과 창의적 탐색, 고객 중심 사고에 더 많은 시간을 쓸 수 있게 됐다. ## Ruggable과 GitHub 사례 - Ruggable은 소셜 미디어 광고, 홈페이지, 상품 상세 페이지 등 여러 디지털 표면에서 일관된 경험을 구축하는 사례로 소개된다. - GitHub는 Design Business Company와 협업해 개발자를 위한 전자상거래 스토어를 설계한 사례로 언급된다. - 두 사례 모두 전자상거래가 단일 웹페이지의 문제가 아니라 마케팅·브랜드·제품 경험을 연결하는 통합적인 디자인 과제임을 보여준다. Nuuly 사례는 복잡한 내부 운영을 고객에게는 간단한 경험으로 전달하려면, 고객용 화면과 운영 시스템을 함께 설계해야 한다는 점을 보여준다. 실무적으로는 디자인 토큰과 공유 라이브러리를 도입하고, 프로토타입과 협업 도구를 디자인·개발·마케팅 전반에 활용하는 것이 일관된 브랜드 경험과 빠른 개선에 효과적이다.

figma

Headspace가 신뢰와 투 (새 탭에서 열림)

Headspace는 치료를 대체하지 않으면서도 세션 사이의 성찰과 정서적 지원을 돕는 AI 동반자 Ebb를 만들었다. 정신 건강 분야의 AI는 안전성과 신뢰가 특히 중요하므로, Headspace는 초기 기획부터 임상 전문성·투명성·사용자 자율성을 핵심 원칙으로 삼았다. 그 결과 Ebb는 인간처럼 위장하지 않고 AI임을 분명히 밝히며, 사용자가 대화를 통제하고 필요할 때 종료하거나 삭제할 수 있도록 설계됐다. ## 치료의 대안이 아닌 보완 도구 - Headspace는 1억 500만 회 이상 다운로드된 정신 건강 앱으로, 명상·수면·치료·코칭 등을 제공한다. - 많은 사람들이 범용 AI를 정서적 지원에 활용하는 상황에서, 정신 건강에 특화된 안전하고 임상적으로 타당한 도구가 필요하다고 판단했다. - Ebb의 역할은 치료나 인간 돌봄을 대체하는 것이 아니라 다음과 같은 상황을 보완하는 것이다. - 치료 세션 사이에 자기 성찰을 돕는 경우 - 치료를 두려워하거나 비용 부담 때문에 이용하기 어려운 사람을 지원하는 경우 - Ebb는 임상 심리학자들이 참여해 훈련했으며, 과학적·임상적 기반을 제품 설계에 반영했다. ## 모호한 아이디어를 공동의 목표로 구체화 - AI와 정신 건강의 결합에 대해 조직 내부에서도 불안과 우려가 있었기 때문에, 제품 디자인 리드인 Priyanka Marawar는 초기부터 FigJam 워크숍을 진행했다. - 워크숍의 목적은 단순히 기능을 정하는 것이 아니라 다음을 명확히 하는 것이었다. - 어떤 경험을 만들 것인가 - 왜 이 경험이 필요한가 - 사용자와 비즈니스 목표가 어떻게 연결되는가 - 팀은 FigJam에서 AI 동반자의 모습과 말투를 자유롭게 실험하는 “플레이그라운드”를 운영했다. - 일러스트레이터, 디자이너, 카피라이터, 애니메이터가 각자 아이디어를 탐색한 뒤 다시 협업하는 방식으로 작업했다. ## 성별 고정관념을 피한 브랜드와 이름 - 팀은 Alexa, Cortana처럼 여성 이름을 사용하는 AI 비서의 관행을 따르지 않으려 했다. - AI가 특정 성별이나 인간 역할을 연상시키지 않도록, “친근하지만 완전히 인간은 아닌 존재”를 지향했다. - 여러 후보명 가운데 감정의 유동성과 변화를 연상시키는 “Ebb”가 선택됐다. - 내부 구성원과 사용자 테스트에서 반응이 강했고, 팀은 이후 Ebb라는 이름을 일관되게 사용했다. ## 프로토타입 중심의 협업과 검증 - Headspace는 “만들면서 배운다(build-to-learn)”는 철학에 따라 브랜드팀과 제품팀을 빠르게 결합했다. - 약 6개의 브랜드 아이덴티티를 만들고, 실제 앱 화면에 적용해 어떤 방향이 적합한지 검증했다. - 제품 화면을 초기 산출물로 삼아 다양한 색상·비주얼·대화 인터페이스를 빠르게 비교했다. - Figma를 중심으로 브랜드와 제품팀이 화면을 공유하며, 서로의 작업을 한 공간에서 연결했다. - 아이디어를 미리 배제하기보다 프로토타입으로 “스트레스 테스트”한 뒤 판단하는 접근을 취했다. ## 신뢰와 안전을 중심으로 한 대화 설계 - 팀은 대화형 AI의 원칙으로 다음을 설정했다. - AI의 존재를 항상 명확히 드러낼 것 - 인간이 제공하는 치료·돌봄과 구분할 것 - 성찰적이고 차분한 공간을 만들 것 - 개인정보 보호와 안전을 지속적으로 강조할 것 - 사용자의 선택권과 자율성을 존중할 것 - 사용자가 Ebb를 인간 상담자로 오해하지 않도록, AI와 대화하고 있다는 사실을 숨기지 않았다. - 사용자가 자신의 감정을 안전하게 표현할 수 있도록 대화 인터페이스를 설계했다. - 사용자는 언제든 대화를 종료할 수 있고, 대화 기록을 삭제할 수도 있다. - 이러한 투명성은 AI에 대한 불신을 줄이고, 사용자가 서비스 이용 방식을 스스로 통제하도록 하는 장치로 작용한다. Ebb의 사례는 정신 건강 AI에서 매력적인 브랜드나 자연스러운 대화만큼이나 역할의 한계, AI 여부, 개인정보와 사용자 통제권을 명확히 설계해야 한다는 점을 보여준다. 특히 초기 워크숍, 임상 전문가 참여, 반복적인 프로토타이핑을 통해 안전 원칙을 실제 제품 경험에 반영한 점이 실용적인 참고가 된다.

figma

피그마, 한국 시장 (새 탭에서 열림)

피그마(Figma)가 한국 시장을 위한 제품 현지화 및 지원 서비스의 오픈 베타 출시를 발표했습니다. 이번 한국어 지원은 일본어와 스페인어에 이은 세 번째 현지화 사례로, 한국 사용자들에게 더욱 직관적인 디자인 환경을 제공하고 디자인의 접근성을 전 세계로 확장하려는 피그마의 비전을 담고 있습니다. 이를 통해 국내 디자이너뿐만 아니라 개발자와 기획자 등 다양한 직군 간의 협업 효율이 극대화될 것으로 기대됩니다. **한국 시장 맞춤형 현지화 및 지원 확대** * 제품 인터페이스 전반에 걸친 완전한 한국어 번역과 한국 문화에 적합하도록 조정된 사용자 경험(UI)을 제공합니다. * 한국어 사용자를 위한 전담 고객 지원 체계를 구축하여 서비스 이용 중 발생하는 문제에 신속하게 대응합니다. * 이번 한국어 버전은 4월 16일부터 순차적으로 공개되는 오픈 베타를 통해 직접 체험할 수 있습니다. **국내 주요 기업의 활용 사례와 성과** * 카카오뱅크, 우아한형제들, 당근, 강남언니 등 국내 유수의 IT 기업들이 이미 피그마를 통해 제품을 개발하고 있습니다. * 카카오뱅크는 피그마 도입 이후 직원들의 업무 생산성이 약 30% 향상되었으며, 한국어 지원을 통해 언어 장벽 없이 핵심 프로젝트에 집중할 수 있게 되었다고 밝혔습니다. * 우아한형제들 또한 한국어 작업 환경이 비디자이너들의 디자인 프로세스 참여를 유도하여 협업의 질을 높였다고 평가했습니다. **데이터로 증명된 한국 내 피그마 생태계** * 한국 코스피 200 기업 중 약 3분의 1이 피그마를 사용하고 있으며, 국내 사용자들의 활발한 커뮤니티인 'Friends of Figma(FoF) 서울' 지부 멤버는 1,000명을 넘어섰습니다. * 지난 한 해 동안 한국에서 생성된 피그마 파일은 400만 개 이상이며, 매일 평균 75,000개 이상의 파일이 수정되고 있습니다. * 피그마의 글로벌 매출 50%가 미국 외 시장에서 발생하고 월간 활성 사용자(MAU)의 85%가 해외 거주자인 만큼, 한국은 피그마의 글로벌 확장 전략에서 핵심적인 위치를 차지합니다. **전체 제품 개발 공정을 아우르는 도구로의 진화** * 피그마는 단순한 디자인 도구를 넘어 화이트보드 협업 도구인 '피그잼(FigJam)', 개발자와의 원활한 소통을 돕는 '데브 모드(Dev Mode)', 프레젠테이션 제작을 위한 '피그마 슬라이드(Figma Slides)' 등 제품 개발의 전 과정을 지원합니다. * 2024년에는 AI 기능을 도입하여 팀의 창의적인 아이디어를 실제 제품으로 구현하는 속도를 한층 더 높였습니다. * 특히 월간 활성 사용자의 약 30%가 개발자인 만큼, 이번 현지화는 디자인과 개발 사이의 언어적 간극을 메우는 중요한 계기가 될 것입니다. 이번 한국어 현지화는 단순한 언어 번역을 넘어 국내 기업들이 디자인 중심의 제품 개발 문화를 구축하는 데 강력한 촉매제가 될 것으로 보입니다. 특히 디자인 비전공자나 개발자와의 협업이 잦은 팀이라면, 이번 오픈 베타 기간을 활용해 한국어 환경에서의 워크플로우를 최적화하고 팀 내 협업 장벽을 낮추는 기회로 삼기를 권장합니다.

figma

FigPals를 위한 영원한 (새 탭에서 열림)

Figma는 디자이너의 고독한 작업 환경에 즐거움을 더하기 위해 커서를 따라다니는 디지털 컴패니언인 'FigPals'를 기간 한정으로 도입했습니다. 90년대 다마고치와 네오펫에서 영감을 받은 이 프로젝트는 사내 해커톤인 '메이커 위크'를 통해 탄생했으며, 단순한 장식 요소를 넘어 사용자와 정서적 교감을 나누는 인터랙티브 요소로 기능했습니다. 짧은 운영 기간에도 불구하고 150만 개 이상의 캐릭터가 생성되는 등 폭발적인 반응을 얻었으며, Figma는 커뮤니티의 요청에 부응해 이를 영구적으로 간직할 수 있는 스티커 팩을 출시하며 프로젝트를 마무리했습니다. ### FigPals의 탄생 배경과 노스탤지어 * 디자이너들이 Figma 파일 내에서 느끼는 반복적이고 고독한 작업 경험을 개선하기 위해 기획된 커서 추적형 디지털 동반자입니다. * 70년대의 '펫 락(Pet Rock)'과 90년대의 '다마고치' 같은 복고풍 장난감 문화에서 영감을 받아, 업무 도구에 장난기 가득한 요소를 결합했습니다. * 9,000가지 이상의 조합(색상, 형태, 액세서리 등)을 제공하여 사용자가 자신만의 개성 있는 캐릭터를 만들고 이름을 붙일 수 있도록 설계했습니다. ### '메이커 위크'를 통한 창의적 실험과 구현 * Figma의 연례 사내 행사인 '메이커 위크(Maker Week)'에서 인턴의 아이디어로 시작된 'Figmagotchi'가 프로젝트의 모태가 되었습니다. * 엔지니어링, 제품, 디자인 팀이 협업하여 캐릭터가 레이어나 노드를 '먹이'로 섭취하거나, 컴포넌트를 해제할 때 놀라는 반응을 보이는 등 다양한 이스터 에그와 상호작용 기능을 구현했습니다. * 업무용 소프트웨어에서도 '놀이(Play)'라는 핵심 가치를 실현할 수 있음을 증명하며, 개발 과정에서 엔지니어들조차 캐릭터에 정서적 애착을 느낄 만큼 몰입도 높은 경험을 구축했습니다. ### 커뮤니티의 열광적인 반응과 데이터 * 출시 일주일 만에 150만 개 이상의 FigPal이 생성되었으며, 사용자들이 캐릭터에게 먹이를 준 횟수만 25만 회를 상회했습니다. * 사용자들은 자신의 실제 반려동물을 모델로 FigPal을 제작하거나, 서비스 종료를 앞두고 영구 도입을 촉구하는 서명 운동(2,000명 이상 참여)을 벌이는 등 강력한 유대감을 보여주었습니다. * 단순한 픽셀의 조합을 넘어 사용자의 업무 공간에 활력을 불어넣는 정서적 매개체로서의 가치를 입증했습니다. 현재 FigPals의 인터랙티브 기능은 종료되었지만, Figma 커뮤니티에서 제공하는 **'FigPal 스티커 팩'**을 활용하면 작업 파일에 이들을 영구적으로 배치하고 추억할 수 있습니다. 또한, 다가오는 Figma의 컨퍼런스 'Config'에서 FigPal과 관련된 추가적인 소식이 있을 예정이므로 관련 업데이트를 주목해 보시기 바랍니다.

figma

개발자 핸드오프 (새 탭에서 열림)

디자이너와 개발자의 핸드오프는 디자인을 전달하는 마지막 단계가 아니라, 제품의 방향과 구현 방식을 함께 조율하는 협업 과정이다. 개발자는 성능·안정성·기술적 제약을, 디자이너는 일관성과 사용 경험을 중시하므로, 초기부터 소통하고 공통의 언어를 만들어야 한다. 특히 아이디어가 유연한 초기에 개발자를 참여시키는 것이 시행착오와 구현 비용을 줄이는 핵심이다. ## 협업의 기본 원칙 - 디자인은 “원하는 것(what we want)”, 개발은 “실제로 가진 것(what we have)”에 가깝다. - 두 직군의 간극을 줄이려면 다음이 필요하다. - 서로의 관점에 대한 호기심 - 지속적이고 열린 커뮤니케이션 - 좋은 결과물의 기준에 대한 공통된 관점 - 글은 효과적인 핸드오프를 위해 다음 네 가지 영역을 제시한다. 1. 무엇을 만들지 합의하기 2. 어떻게 만들지 결정하기 3. 공통 언어 만들기 4. 개발자 경험을 고려해 의도 명확히 하기 ## 무엇을 만들지 먼저 합의하기 - 초기 와이어프레임 단계부터 개발자를 참여시킨다. - 개발자는 다음과 같은 기술적 문제를 조기에 발견할 수 있다. - 단순해 보이는 디자인이 실제로는 복잡한 기술 로직을 요구하는 경우 - 데이터 계층에서 발생하는 제약이나 처리 비용 - 기존 기능을 재사용하거나 확장해 더 적은 개발 노력으로 해결할 수 있는 기회 - 아이디어가 아직 바뀔 수 있는 단계에서 피드백을 받을수록 수정 비용이 낮다. - 초기 협업의 목표는 다음과 같다. - 프로젝트 범위 정렬 - 기술적 제약 이해 - 잠재적 문제와 새로운 기회 식별 ## 와이어프레임으로 사용자 흐름 구체화하기 - Figma나 FigJam에서 화면 흐름을 와이어프레임으로 표현하면 추상적인 아이디어를 구체화할 수 있다. - Figma는 보다 구체적인 시각 자료를 만들 때 적합하다. - FigJam은 다음과 같은 상황에 유용하다. - 아이디어를 자유롭고 개략적으로 표현할 때 - 외부 협업자에게 중립적인 피드백 공간을 제공할 때 - 완성도 높은 비주얼을 일부러 배제하면 색상이나 스타일보다 전체 흐름과 핵심 문제에 집중할 수 있다. - 개발자는 화면 순서에서 빠진 상태나 예외 흐름을 발견하고, 디자이너는 이를 반영해 요구사항을 보완할 수 있다. ## 개발자에게 구체적인 질문하기 - 개발자는 질문을 받지 않으면 디자이너가 놓친 부분을 알기 어렵기 때문에, 의도적인 질문이 필요하다. - 다음 내용을 질문하면 협업의 깊이를 높일 수 있다. - 구현상의 제약은 무엇인가? - 데이터 계층에서 복잡성을 높이는 요소가 있는가? - 현재 화면 흐름에서 빠진 상태나 예외 상황은 무엇인가? - 제품의 다른 영역에서 재사용할 수 있는 패턴이나 기능이 있는가? - 이러한 질문은 중복 작업을 줄이고, 기존 기능과 디자인 시스템을 활용하게 해준다. - 개발자는 단순히 디자인을 구현하는 역할을 넘어, 기능 구조와 제품 경험을 개선할 기회를 제안할 수 있다. ## 개발자의 작업 방식에 맞춰 협업하기 - 개발자는 여러 작업 사이를 오가며 집중 상태를 유지해야 하므로, 개발자의 실제 워크플로에 맞추는 것이 신뢰 형성에 도움이 된다. - 필요한 정보와 피드백을 개발자가 사용하는 도구와 흐름 안에서 제공하면 커뮤니케이션 비용을 줄일 수 있다. - GitHub 사례처럼 FigJam의 코드 블록을 활용해 디자인 시스템 문서에서 컴포넌트 API를 함께 정의하는 방식도 가능하다. - 디자인과 코드의 연결 지점을 명확히 하면 컴포넌트의 동작, 재사용성, 구현 의도를 더 쉽게 공유할 수 있다. ## 실용적인 적용 방법 - 프로젝트 초기에 개발자를 리뷰에 초대한다. - 화면 디자인 전에 사용자 흐름과 주요 상태를 와이어프레임으로 정리한다. - “구현 가능한가?”보다 구체적으로 “어떤 제약이 있는가?”, “재사용할 수 있는 기능은 무엇인가?”라고 질문한다. - 정상 상태뿐 아니라 로딩, 오류, 빈 상태, 권한 제한 등 모든 화면 상태를 함께 검토한다. - Figma·FigJam·코드 문서 등 양쪽 팀이 실제로 사용하는 도구에서 정보를 관리한다. - 핸드오프를 일회성 전달이 아니라 설계와 구현이 반복적으로 조정되는 협업 과정으로 운영하는 것이 바람직하다.