Field Notes

피그마(Figma)가 AI 기반 웹사이트 제작 도구와 앱 프로토타입 생성 기능 등 다양한 신규 서비스를 발표했습니다. 디자이너들은 보통 피그마 내에서 웹사이트의 프로토타입을 구축하는데, 이 새로운 AI 기반 도구를 통해 웹사이트를 쉽게 만들고 게시할 수 있게 되었습니다. 사이트가 생성되면 협업자들은 프롬프트 없이도 편집기를 통해 사이트 요소를 쉽게 변경할 수 있으며 전환 효과, 애니메이션, 스크롤 효과를 추가하면서 반응형 사이트를 만들 수 있습니다. 피그마는 사이트에서 직접 블로그 게시물을 생성하는 기능도 추가 했습니다. 이는 피그마 사이트에 콘텐츠 관리 시스템(CMS)이 내장되어 있어 사용자가 블로그 디자인 내에서 게시물을 편집하고 썸네일과 슬러그 같은 다른 자산도 관리할 수 있음을 의미합니다. 주식 티커와 같은 인터랙티브 요소의 경우, 사용자 정의 코드를 추가하거나 AI를 사용하여 코드를 생성할 수 있습니다. ​ 반면 ‘피그마 메이크(Figma Make)’는 아이디어 구상과 프로토타입 제작에 더 초점을 맞춘 유사한 AI 기반 도구입니다. 사용자는 프롬프트를 입력하여 웹 및 앱 제품을 만들 수 있습니다. 프로토타입 앱은 협업이 가능하며, 사용자들은 특정 요소를 변경하거나 추가하도록 어시스턴트에게 요청할 수 있다. 또한 팀에 개발자가 있다면 필요한 변경 사항을 적용하기 위해 코드를 직접 수정할 수도 있습니다. 사용자는 시계와 같은 작은 인터랙티브 요소를 생성하여 나중에 피그마 사이트를 통해 게시된 페이지에 삽입할 수도 있습니다. 개요 회사에는 아직 기술 블로그가 없어 항상 아쉬움을 느끼고 있었습니다. 회사 내부 각 팀의 기술적 고민이나 작업 과정, 인사이트를 외부에 공유할 창구가 없다는 점은 개인적으로도, 회사 전체적으로도 손해라고 생각했기 때문입니다. 그래서 사이드 프로젝트로 기술 블로그 템플릿을 직접 만들어보기로 했습니다. 💡장점1) 한국어 프롬프트 지원 이번 프로젝트에서 사용한 도구는 FIGMA MAKE였습니다. 원래는 영어 프롬프트만 지원하는 줄 알고 반신반의하며 접근했는데, 한국어 프롬프트도 매우 잘 인식해서 놀랐습니다. 프롬프트 하나로 전체 블로그 레이아웃이 쉽게 만들어지는 모습은 인상적이었습니다. 일부러 처음에 어떤 컨텐츠를 담아달라고 요청하지 않았는데도 단순히 텍스트 박스를 생성하는 수준이 아니라, 어느 정도 구조가 잡힌 페이지를 생성해주어서 초기 설계 시간을 크게 단축할 수 있었습니다. 💡장점2) 디자인 시스템 연동과 링크 퍼블리시 지원 MAKE의 장점 중 하나는 기존 디자인 시스템과의 연동입니다. 디자인팀에서 사용하는 디자인 시스템을 불러와 활용할 수 있었고, 이로 인해 완성된 템플릿도 기존 제품 스타일에 맞게 통일감을 유지할 수 있었습니다. 컴포넌트를 하나하나 연결해주는 방식이긴 했지만, 디자이너 입장에서는 톤앤매너를 유지할 수 있다는 점에서 큰 이점이었습니다. 또 하나 주목할만한 기능은 바로 퍼블리시 기능입니다. MAKE에서 만든 블로그를 퍼블리시하면, 곧바로 공유 가능한 링크 형태로 완성된 웹 페이지가 생성됩니다. 별도의 호스팅이나 설정 없이 클릭 몇 번으로 외부 공개가 가능하다는 점은, 디자이너나 개발자가 빠르게 프로토타입을 공유하거나 테스트해보기에도 아주 유용했습니다.

업무 중 아이콘 제작 요청이 들어올 때, 아이콘을 만드는 것보다 배포하는 과정이 복잡하고 어려워서 개선이 필요하다는 생각을 항상 가지고 있었습니다. 현재 자사 아이콘 배포 방식은 수작업이 많고 반복적인 과정을 포함하고 있어서, 이를 MCP 또는 사내 자동화 플랫폼으로 효율화할 수 있는 방법을 모색해보았습니다. ✅ 현재 자사 아이콘 배포 프로세스 요약 Figma에서 아이콘 제작 Icon Font Exporter 플러그인으로 export SVG, Font 파일을 NAS에 업로드 VS Code로 열고 코드화하여 사내 폴더에 업로드 🎯 MCP를 통한 자동화/효율화 방안 Figma에서 MCP 연동 자동 ExportMCP가 Figma API 또는 Figma 플러그인 연동이 가능하다면: 특정 프레임/페이지에서 변경이 감지되면 MCP가 자동으로 export 수행 (SVG or font) MCP가 Figma API 또는 Figma 플러그인 연동이 가능하다면 특정 프레임/페이지에서 변경이 감지되면 MCP가 자동으로 export 수행 (SVG or font) 예) Figma Web API를 통해 아이콘이 포함된 프레임을 주기적으로 pull 또는 webhook 사용 SVG & Font 파일 자동 변환 및 정리 Export된 파일을 MCP에서 받아 정해진 naming rule에 따라 자동 정렬 및 리네이밍 SVG → web font (.woff, .ttf) 변환 자동화 스크립트 포함

입사 이후 실무를 경험하면서 디자인 시스템이 단순한 스타일 가이드를 넘어서, 제품의 효율성과 일관성, 그리고 사용자 경험 전반을 좌우하는 핵심 요소라는 걸 체감하고 있습니다. 최근에는 디자인 시스템의 개념을 다시 처음부터 정리하고, 실제 업무에 어떻게 효과적으로 적용할 수 있을지 고민하며 배우는 중입니다. 먼저, 디자인 시스템이란? 웹이나 서비스 제품을 일관성 있게 디자인하고 개발하기 위해 사용하는 재사용 가능한 구성요소들의 집합 단순히 UI 컴포넌트 모음이 아니라 디자인 스타일의 규칙이나 가이드라인을 의미합니다. 디자인 시스템을 통해 정의하고 정확하게 사용해 작업을 효율적으로 만들고 디자인의 일관성을 유지할 수 있습니다. 업무를 하면서 느낀 것은 디자인 시스템 룰들을 철저하고 세부적으로 만들수록 디자이너 간에도, 개발자들과의 커뮤니케이션에도 오류가 현저히 적어진다는 것 입니다. 왜 필요한가? 일관되지 않은 사용자 경험(UX) 문제 해결 같은 제품인데 버튼이 페이지마다 모양, 색상, 그림자가 다름 유사한 컴포넌트인데 사용자 행동 결과가 달라 혼란 유발 → 버튼, 카드, 내비게이션 등의 형태와 작동 방식이 컴포넌트화되어 정의됨 → 사용자 입장에서 익숙한 패턴이 반복되어 인지 부담 감소 → 브랜드/제품 일관성도 함께 유지됨 디자이너와 개발자의 불필요한 소통 비용 감소 디자이너는 radius 값 4를 디자인했지만, 개발자는 2를 구현