FIGMA MAKE로 만들어본 기술블로그
YJ
Field Notes
카테고리
- 사이드프로젝트
피그마(Figma)가 AI 기반 웹사이트 제작 도구와 앱 프로토타입 생성 기능 등 다양한 신규 서비스를 발표했습니다.
디자이너들은 보통 피그마 내에서 웹사이트의 프로토타입을 구축하는데, 이 새로운 AI 기반 도구를 통해 웹사이트를 쉽게 만들고 게시할 수 있게 되었습니다. 사이트가 생성되면 협업자들은 프롬프트 없이도 편집기를 통해 사이트 요소를 쉽게 변경할 수 있으며 전환 효과, 애니메이션, 스크롤 효과를 추가하면서 반응형 사이트를 만들 수 있습니다.
피그마는 사이트에서 직접 블로그 게시물을 생성하는 기능도 추가 했습니다. 이는 피그마 사이트에 콘텐츠 관리 시스템(CMS)이 내장되어 있어 사용자가 블로그 디자인 내에서 게시물을 편집하고 썸네일과 슬러그 같은 다른 자산도 관리할 수 있음을 의미합니다. 주식 티커와 같은 인터랙티브 요소의 경우, 사용자 정의 코드를 추가하거나 AI를 사용하여 코드를 생성할 수 있습니다.
반면 ‘피그마 메이크(Figma Make)’는 아이디어 구상과 프로토타입 제작에 더 초점을 맞춘 유사한 AI 기반 도구입니다.
사용자는 프롬프트를 입력하여 웹 및 앱 제품을 만들 수 있습니다. 프로토타입 앱은 협업이 가능하며, 사용자들은 특정 요소를 변경하거나 추가하도록 어시스턴트에게 요청할 수 있습니. 또한 팀에 개발자가 있다면 필요한 변경 사항을 적용하기 위해 코드를 직접 수정할 수도 있습니다. 사용자는 시계와 같은 작은 인터랙티브 요소를 생성하여 나중에 피그마 사이트를 통해 게시된 페이지에 삽입할 수도 있습니다.
개요
회사에는 아직 기술 블로그가 없어 항상 아쉬움을 느끼고 있었습니다. 회사 내부 각 팀의 기술적 고민이나 작업 과정, 인사이트를 외부에 공유할 창구가 없다는 점은 개인적으로도, 회사 전체적으로도 손해라고 생각했기 때문입니다. 그래서 사이드 프로젝트로 기술 블로그 템플릿을 직접 만들어보기로 했습니다.
💡장점1) 한국어 프롬프트 지원
원래는 영어 프롬프트만 지원하는 줄 알고 반신반의하며 접근했는데, 한국어 프롬프트도 매우 잘 인식해서 놀랐습니다.
프롬프트 하나로 전체 블로그 레이아웃이 쉽게 만들어지는 모습은 인상적이었습니다. 일부러 처음에 어떤 컨텐츠를 담아달라고 요청하지 않았는데도 단순히 텍스트 박스를 생성하는 수준이 아니라, 어느 정도 구조가 잡힌 페이지를 생성해주어서 초기 설계 시간을 크게 단축할 수 있었습니다.
프롬프트 하나로 전체 블로그 레이아웃이 쉽게 만들어지는 모습은 인상적이었습니다. 일부러 처음에 어떤 컨텐츠를 담아달라고 요청하지 않았는데도 단순히 텍스트 박스를 생성하는 수준이 아니라, 어느 정도 구조가 잡힌 페이지를 생성해주어서 초기 설계 시간을 크게 단축할 수 있었습니다.
피그마 make 프롬프트 작성
💡장점2) 디자인 시스템 연동과 링크 퍼블리시 지원
MAKE의 장점 중 하나는 기존 디자인 시스템과의 연동입니다. 디자인팀에서 사용하는 디자인 시스템을 불러와 활용할 수 있었고, 이로 인해 완성된 템플릿도 기존 제품 스타일에 맞게 통일감을 유지할 수 있었습니다.
컴포넌트를 하나하나 연결해주는 방식이긴 했지만, 디자이너 입장에서는 톤앤매너를 유지할 수 있다는 점에서 큰 이점이었습니다.
컴포넌트를 하나하나 연결해주는 방식이긴 했지만, 디자이너 입장에서는 톤앤매너를 유지할 수 있다는 점에서 큰 이점이었습니다.
또 하나 주목할만한 기능은 바로 퍼블리시 기능입니다. MAKE에서 만든 블로그를 퍼블리시하면, 곧바로 공유 가능한 링크 형태로 완성된 웹 페이지가 생성됩니다. 별도의 호스팅이나 설정 없이 클릭 몇 번으로 외부 공개가 가능하다는 점은, 디자이너나 개발자가 빠르게 프로토타입을 공유하거나 테스트해보기에도 아주 유용했습니다.
아쉬운 점) 변수 연동의 한계와 수동 조정의 필요성
다만, 몇 가지 한계점도 있었습니다.
•
디자인 시스템 연동은 되지만 요소마다 직접 변경 필요
예를 들어 버튼, 카드 등 MAKE가 생성한 구성 요소는 자동으로 디자인 시스템의 컴포넌트로 매핑되지 않습니다. 원하는 컴포넌트로 직접 선택해 교체해줘야 하므로 수작업이 많이 들어갑니다.
예를 들어 버튼, 카드 등 MAKE가 생성한 구성 요소는 자동으로 디자인 시스템의 컴포넌트로 매핑되지 않습니다. 원하는 컴포넌트로 직접 선택해 교체해줘야 하므로 수작업이 많이 들어갑니다.
•
색상이나 폰트는 변수로 인식되지 않음
MAKE가 생성한 요소들은 스타일 변수를 불러오기보다는 RGB 값이나 고정된 폰트 스타일로 설정되어 있었습니다. 이는 추후 디자인 시스템 유지보수나 테마 변경 시 유연성이 떨어질 수 있는 부분입니다.
MAKE가 생성한 요소들은 스타일 변수를 불러오기보다는 RGB 값이나 고정된 폰트 스타일로 설정되어 있었습니다. 이는 추후 디자인 시스템 유지보수나 테마 변경 시 유연성이 떨어질 수 있는 부분입니다.
이러한 점들은 향후 피그마에서 개선해줬으면 하는 바람이 있습니다. 특히 스타일 시스템과의 긴밀한 통합이 가능해지면, 디자이너 입장에서 훨씬 효율적인 워크플로우를 구성할 수 있을 것 같습니다.
코드와 시안 실시간으로 바로 비교 가능
퍼블리싱은 이제 디자이너에게도 필수 역량
한 가지 느낀 점은, 이런 자동화된 시스템을 잘 활용하려면 어느 정도 코드 이해도가 있어야 한다는 것입니다.
MAKE는 프롬프트를 입력하면 코드를 자동으로 생성하지만, 일부 수정이 필요할 경우에는 처음부터 코드를 다시 작성하기보다는 생성된 코드 내에서 직접 수정하는 게 훨씬 빠르고 효율적입니다.
따라서 디자이너라도 HTML/CSS 또는 프론트엔드 컴포넌트 구조에 대한 기본적인 이해는 꼭 필요하다고 생각합니다.
MAKE는 프롬프트를 입력하면 코드를 자동으로 생성하지만, 일부 수정이 필요할 경우에는 처음부터 코드를 다시 작성하기보다는 생성된 코드 내에서 직접 수정하는 게 훨씬 빠르고 효율적입니다.
따라서 디자이너라도 HTML/CSS 또는 프론트엔드 컴포넌트 구조에 대한 기본적인 이해는 꼭 필요하다고 생각합니다.
마치며
이번 프로젝트를 통해, 단순히 "블로그를 만든다"는 것을 넘어 디자인과 퍼블리싱의 경계가 점점 허물어지고 있다는 것을 실감했습니다. 디자이너와 개발자의 협업 방식도 더욱 유연해지고 있고, 도구들은 그 격차를 줄여주는 방향으로 발전하고 있습니다.
아직 완벽하지는 않지만, MAKE는 분명 앞으로 주목할 만한 도구입니다. 그리고 이런 도구들을 더 잘 활용하기 위해선, 우리 디자이너들도 기술적 배경지식을 조금씩 넓혀나가는 것이 필수가 되어가고 있음을 느낍니다.
Subscribe to 'yj-archive'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'yj-archive'!
Join Slashpage and subscribe to 'yj-archive'!
Subscribe
