디자인과 개발의 경계를 허무는 혁신의 시작
오랜 시간 동안 디지털 제품 개발 과정에서 디자인과 개발은 명확히 분리된 영역이었다. 디자이너가 Figma와 같은 툴을 사용해 시각적으로 완벽한 화면을 설계하면, 이 결과물은 개발자에게 전달되어 코드로 재탄생했다. 하지만 디자인의 의도가 코드 변환 과정에서 손실되거나, 반복적인 수정 작업으로 인해 프로젝트 전체의 속도가 저하되는 일은 비일비재했다.
이러한 고질적인 문제를 해결하기 위해 등장한 것이 바로 Figma의 새로운 제품, Figma Site다. Figma Site는 디자이너가 작업한 디자인을 코드 작성 없이 직접 웹사이트로 변환하고 배포할 수 있게 해주는 혁신적인 도구다. Figma Site는 디자이너가 가장 익숙한 환경에서, AI의 도움을 받아, 코드 없이 직접 살아있는 웹사이트를 만들 수 있다. 이는 Figma가 단순한 ‘디자인 툴’을 넘어 아이디어 구상부터 최종 결과물 배포까지 전 과정을 책임지는 ‘엔드투엔드 제품 제작 플랫폼’으로 진화하고 있음을 보여준다.
템플릿과 라이브러리: 디자인 시스템의 완벽한 확장
웹사이트 제작의 시작점을 돕기 위해 Figma Site는 포트폴리오, 랜딩 페이지, 이벤트 페이지 등 다양한 목적의 템플릿을 제공한다. 하지만 이 기능의 진정한 가치는 기존 Figma Design과의 완벽한 연동성에 있다. 디자이너와 팀이 이미 구축해 놓은 컴포넌트 라이브러리를 Figma Site에서 그대로 가져와 사용할 수 있다.
이는 디자인 시스템을 정적인 가이드 문서가 아닌, 실제 운영되는 웹사이트의 살아있는 근간으로 만드는 방식이다. Figma Site에서는 디자인 라이브러리의 마스터 컴포넌트가 곧 웹사이트의 컴포넌트가 된다. 라이브러리에서 버튼 디자인을 수정하면, 해당 컴포넌트를 사용한 모든 웹사이트 페이지에 변경 사항이 즉시 반영된다. 이로써 디자인의 일관성을 완벽하게 유지하고, 유지보수 비용을 획기적으로 절감하는 단일 진실 공급원(Single Source of Truth) 워크플로가 완성된다.
AI 기반 제작 도구 ‘Make’:
프롬프트로 구현하는 창의성
Figma Site의 핵심에는 강력한 AI 기반 제작 도구 ‘Make’가 자리 잡고 있다. 이 제품은 디자이너가 자연어 텍스트 프롬프트를 통해 UI 요소나 인터랙티브 컴포넌트를 생성할 수 있게 한다. 예를 들어, “포토 갤러리 웹사이트를 만들어줘”라고 입력하면, AI가 즉시 해당 페이지를 구현해 준다.
이는 단순한 시각 효과를 넘어 디지털 시계나 간단한 게임과 같은 복잡한 코드 기반 컴포넌트 제작까지 가능하다. 앤트로픽의 ‘클로드 3.7 소네트’ 모델을 기반으로 하는 이 강력한 AI는 디자이너의 아이디어를 실시간으로 구현해 주는 ‘AI 개발자’ 조수 역할을 수행한다. 원하는 기능을 말로 설명하기만 하면 AI가 기술적 구현을 담당하여 즉각적인 결과물을 제공한다.
지능형 반응형 디자인:
모든 스크린을 위한 유연한 설계
반응형 웹 디자인은 다양한 디바이스 환경에서 일관된 사용자 경험을 제공하기 위한 필수 요소지만, 구현 과정은 매우 복잡하고 시간이 많이 소요된다. Figma Site는 이 문제를 디자이너에게 가장 익숙한 방식으로 해결한다. 바로 Figma Design의 핵심 기능인 오토 레이아웃(Auto Layout), 제약 조건(Constraints), 변수(Variables)를 그대로 활용하는 것이다.
Figma Site는 기본적으로 데스크톱, 태블릿, 모바일 뷰포트에 대한 브레이크포인트를 제공하며, 사용자가 이를 자유롭게 추가하거나 수정할 수 있다. 가장 주목할 만한 기능은 ‘멀티 에디트(Multi-edit)’다. 데스크톱 뷰에서 텍스트를 수정하면 모바일 뷰에도 해당 내용이 자동으로 반영되어 일관성을 유지하면서도, 각 브레이크포인트별로 특정 요소의 크기나 배치를 개별적으로 조정하는 것도 가능하다.
인터랙션과 애니메이션:
생동감을 불어넣는 경험 설계
현대적인 웹 경험에서 사용자의 시선을 사로잡는 미세한 인터랙션과 동적인 애니메이션은 매우 중요하다. 과거 디자이너들은 이러한 움직임을 프로토타입이나 영상으로 만들어 개발자에게 ‘설명’해야 했고, 이 과정에서 본래의 의도와 느낌이 희석되기 일쑤였다. Figma Site는 이 ‘충실도 격차(fidelity gap)’를 완벽하게 메운다. 디자이너는 코드 한 줄 없이 실제 웹사이트에 적용될 인터랙션과 애니메이션을 직접 구현할 수 있다.
마우스 호버(Hover) 효과, 클릭 및 드래그 효과와 같은 기본 인터랙션은 물론, 스크롤에 따라 요소가 움직이는 패럴랙스(Parallax) 효과, 커스텀 커서, 흐르는 텍스트(Marquee) 등 고급 시각 효과도 프리셋으로 손쉽게 적용할 수 있다. 이는 Figma의 프로토타입 기능처럼 시뮬레이션된 움직임이 아니라, 실제 HTML/CSS 기반으로 구현되어 배포된 사이트에서 그대로 작동한다. 디자이너는 이제 정적인 화면을 그리는 사람을 넘어, 사용자의 경험에 생동감을 불어넣는 안무가이자 연출가의 역할을 직접 수행하게 된다.
즉시 세상과 연결하는
원클릭 배포와 커스텀 도메인
아무리 훌륭한 디자인이라도 세상에 공개되지 않으면 의미가 없다. 웹사이트 배포 과정은 서버 호스팅, 도메인 연결, DNS 설정 등 비전문가에게는 매우 복잡하고 기술적 장벽이 있었다. Figma Site는 이 모든 과정을 ‘Publish’ 버튼 하나로 단순화했다. 디자이너는 작업이 완료되면 클릭 한 번으로 자신의 웹사이트를 인터넷에 즉시 게시할 수 있다.
또한, 개인 도메인을 연결하는 복잡한 과정 역시 간소화된 인터페이스를 통해 손쉽게 처리할 수 있다. 사이트 제목, 설명, 파비콘(Favicon) 등 검색엔진 최적화(SEO)에 필요한 기본 설정도 직관적인 패널에서 관리할 수 있다. 마케팅 캠페인 페이지나 개인 포트폴리오, 초기 스타트업의 MVP(최소 기능 제품) 등 빠른 실행이 중요한 프로젝트의 경우, 오전에 구상한 아이디어를 오후에 디자인하여 저녁에는 개인 도메인으로 전 세계에 공개하는 전례 없는 속도를 경험할 수 있다.
외부 콘텐츠 임베드:
무한한 확장성의 생태계
웹사이트는 다양한 외부 서비스와 연결된 허브 역할을 한다. Figma Site는 ‘임베드(Embed)’ 기능을 통해 이러한 확장성을 보장한다. 유튜브 영상이나 구글 지도와 같은 기본적인 콘텐츠는 물론, 회의 일정을 잡는 Calendly, 설문조사 폼을 만드는 Tally, 화려한 애니메이션을 보여주는 LottieFiles 등 기능적인 외부 툴까지 자유롭게 삽입할 수 있다. HTML 임베드 코드를 제공하는 거의 모든 서비스를 웹사이트에 통합할 수 있는 것이다. 이는 Figma Site가 폐쇄적인 시스템이 아닌, 웹 생태계 전체를 활용하는 개방형 플랫폼을 지향한다는 전략적 선택을 보여준다.
Figma가 모든 기능을 직접 개발하려 하지 않고, 각 분야 최고의 서비스를 손쉽게 가져다 쓸 수 있도록 함으로써 디자이너는 코딩 없이도 매우 기능적인 웹 애플리케이션을 구축할 수 있다. 예를 들어, 디자이너는 자신의 포트폴리오 사이트에 인터랙티브한 Figma 프로토타입을 임베드하여 작업물을 생생하게 보여주고, 유튜브 영상으로 케이스 스터디를 설명하며, Calendly를 삽입해 클라이언트가 직접 미팅을 예약하게 만들 수 있다. 이로써 디자이너는 단순히 시각적으로 아름다운 결과물을 만드는 것을 넘어, 완벽하게 작동하는 비즈니스 도구를 직접 구축하는 창작자로 거듭나게 된다.
Figma Site
디자인과 개발의 새로운 미래
Figma Site는 단순한 하나의 툴을 넘어, 디지털 제품 제작 산업의 구조적 변화를 예고하는 강력한 신호탄이다. 이는 디자이너와 개발자의 역할을 재정의하고, 두 직군 사이의 경계를 허물며, AI와 노코드, 그리고 전문적인 코드가 하나의 워크플로 안에서 공존하는 하이브리드 미래를 제시한다. 이는 조직 내의 전통적인 ‘핸드오프’ 과정을 제거하며, 전례 없이 민첩하고 효율적인 제품 개발 생태계를 창조할 것이다. Figma Site는 디지털 제품이 만들어지는 방식 자체를 근본적으로 바꾸어 놓을 것이다.
* Figma Site 활용 방법을 학습하고 AI-UI 디자인 자격증도 취득하고 싶다면?
해당 콘텐츠는 유훈식 님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
