본문 바로가기
TalkAbout/IT

Figma Site는 웹디자인의 혁신일까? 심층 분석 및 전망

by 또기우디 2025. 5. 19.
반응형

 

Figma Site 화면
Figma Site 화면(출처: Figma)


최근 열린 Figma의 연례 컨퍼런스인 Config 2025에서 주목할 만한 혁신이 등장했습니다.

바로 'Figma Site'입니다. 이 글에서는 Figma Site가 과연 웹 디자인의 미래인지, 아니면 단순히 새로운 사이트 빌더인지 SEO 친화적으로 분석하고자 합니다.


Figma Site란 정확히 무엇인가요? 

Figma Site는 기존 디자인 도구인 Figma 위에서 바로 작동하는 웹사이트 빌더입니다.

사용자는 픽셀 단위의 디자인을 Figma에서 완성한 후, 별도의 코딩 과정 없이 곧바로 실제 웹사이트로 배포할 수 있습니다.

기존에는 디자이너가 Figma로 디자인을 완성한 후, 이를 개발자가 다시 코딩하여 구현했지만, Figma Site는 이러한 복잡한 과정을 한 번에 처리할 수 있도록 돕습니다.


Figma Site의 구체적인 사용 방법 

Figma Site 사용법은 직관적이고 쉽습니다.

  • Figma에서 새 프로젝트를 열고 "Site" 옵션을 선택하면 즉시 웹사이트 제작 모드로 들어갑니다. (단, 현재는 유료 사용자 전용)
  • 데스크탑, 태블릿, 모바일 버전 각각에 맞는 디자인을 만들 수 있으며, 미리 제공된 컴포넌트를 활용하여 빠르게 화면을 구성할 수 있습니다.
  • 디자인이 완료되면 "Publish" 버튼을 클릭하여 바로 배포하고 공유 가능한 URL을 생성합니다.

Figma Site가 웹 디자인 환경에 미치는 긍정적인 변화 

낮아진 진입 장벽

  • 디자이너는 별도의 코딩 기술 없이도 완성된 웹사이트를 제작할 수 있습니다. 이는 코딩 경험이 없는 디자이너들이 웹 프로젝트에 쉽게 접근할 수 있게 합니다.

효율적이고 통합된 워크플로우

  • 디자인과 개발 간의 불필요한 반복 작업이 사라집니다. 디자이너는 디자인한 화면을 즉시 실제 웹사이트로 확인할 수 있어 전체 작업 속도가 빨라지고 생산성이 높아집니다.

Figma Site가 가진 명확한 한계점 

역할의 혼선

  • 본래 UI 디자인 도구였던 Figma가 웹 개발 영역까지 진출하면서 기존 사용자에게 혼란을 줄 수 있습니다. 또한 이미 전문적인 프론트엔드 개발자나 Vibe Coding 같은 최신 코드 자동화 도구를 사용하는 사람들에게는 불필요한 기능 확장이라는 평가도 있습니다.

코드 품질 문제

  • 현재 Figma Site는 아직 프로토타입 수준의 코드만 제공합니다. 깊이 중첩된 구조로 인해 실제 운영 환경에서는 성능 저하나 유지보수의 어려움이 생길 수 있습니다.

예시 코드:

<div class="figma-site"><div><div><div>텍스트</div></div></div></div>

 

이처럼 지나치게 복잡한 코드 구조는 실제 개발 환경에서 부정적인 요소로 작용할 가능성이 큽니다.


Figma Site의 미래, 혁신인가 과도한 시도인가? 

Figma가 웹 디자인과 개발의 경계를 허무는 시도는 흥미롭습니다. 그러나 기존 사용자층의 반응은 엇갈릴 가능성이 큽니다. 특히 Vibe Coding과 같은 혁신적인 코드 자동화 툴이 빠르게 성장하는 시점에서 Figma가 무리하게 영역을 확장하는 것은 위험 부담이 될 수도 있습니다.

결국, Figma Site는 UI 디자인과 웹 개발 간의 통합을 원하는 사용자들에게는 혁신일 수 있지만, 기존의 전문적인 개발 환경에 익숙한 사람들에게는 혼란스러운 기능일 수도 있습니다. 향후 몇 년 간의 발전 방향과 사용자들의 실제 반응을 주목할 필요가 있습니다.

 

함께 보면 좋은 링크

 

출처: 원문기사(UX Planet by Nick Babich)
👉 원문 바로가기

반응형

댓글