피그마는 디자인과 실제 구현물 사이의 해상도 차이를 극복하기 위해 디자인 캔버스 내에 실제 코드를 결합하는 '코드 레이어(Code layers)' 기술을 도입했습니다. 이를 통해 사용자는 피그마에서 디자인한 결과물을 별도의 변환 과정 없이 실제 웹사이트로 즉시 게시할 수 있는 'Figma Sites'를 구축할 수 있게 되었습니다. 이번 변화는 단순히 디자인을 코드로 내보내는 수준을 넘어, 디자인 환경 자체가 웹 엔진의 원리와 동일하게 작동하도록 캔버스의 근본적인 구조를 재설계했다는 점에 의의가 있습니다.

디자인 캔버스와 웹 브라우저의 기술적 통합

기존 피그마 캔버스는 C++로 작성된 고유의 렌더링 엔진을 통해 그래픽을 처리했지만, Figma Sites를 위해 이를 웹 표준인 HTML/CSS와 정렬시켰습니다.
피그마의 오토 레이아웃(Auto Layout) 개념을 CSS Flexbox 및 Grid와 직접 매핑하여, 디자이너가 캔버스에서 작업하는 방식이 브라우저의 렌더링 방식과 1:1로 대응되도록 구현했습니다.
웹 어셈블리(WASM)를 기반으로 작동하는 피그마 엔진 내부에 리액트(React) 기반의 렌더링 계층을 통합하여, 디자인 요소가 실제 코드 노드로 기능할 수 있게 했습니다.

코드 레이어의 핵심 메커니즘

'코드 레이어'는 캔버스 위에서는 일반 디자인 객체처럼 보이지만, 내부적으로는 실제 HTML 요소와 그에 따른 스타일 속성을 보유합니다.
디자인 속성(색상, 간격, 폰트 등)을 단순한 메타데이터가 아닌 '라이브 코드' 상태로 유지함으로써, 게시 버튼을 누르는 즉시 실제 웹 환경에서 동일하게 재현됩니다.
정적 자산을 넘어서 비디오, 입력 폼(Forms), 인터랙티브 요소와 같은 동적 컴포넌트를 디자인 캔버스에서 직접 제어할 수 있는 구조를 갖추었습니다.

AI를 활용한 시맨틱 구조화 및 최적화

전통적인 디자인 파일은 계층 구조가 복잡하거나 논리적이지 않은 경우가 많으나, 피그마는 AI를 활용해 이를 깨끗하고 의미 있는(Semantic) 코드 구조로 변환합니다.
AI 모델은 디자이너가 구성한 레이어의 시각적 배치를 분석하여 적절한 HTML 태그(header, nav, section 등)를 추천하고, 반응형 레이아웃을 위한 미디어 쿼리 설정을 자동화합니다.
비정형적인 디자인 데이터를 웹 표준에 맞는 정제된 코드로 변환하는 과정에서 발생할 수 있는 오류를 AI가 사전에 검사하고 최적화하여 성능을 높였습니다.

실무적 가치와 전망

피그마의 이러한 변화는 디자인 '핸드오프(Hand-off)'라는 개념 자체를 사라지게 만들 수 있습니다. 디자이너가 캔버스에서 내린 결정이 곧 최종 코드가 되는 환경은 개발 주기를 획기적으로 단축하며, 디자인의 의도가 실제 제품에서 훼손되지 않도록 보장합니다. 이제 피그마는 단순한 드로잉 도구가 아니라, 코드를 시각적으로 조작하는 '비주얼 개발 환경'으로 진화하고 있습니다.