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