Figma 파일은 HTML 기반일까? - Figma의 진짜 구조

English (N/A)
#Figma#디자인#웹개발#WebGL#JSON

Figma가 웹 브라우저에서 작동하니까 HTML 기반일까? 그렇게 생각하기 쉽다. Chrome이나 Safari에서 열리고, 웹사이트처럼 보이니까.

결론부터 말하면, 아니다. Figma 파일은 HTML이 아니다. 완전히 다른 방식으로 작동한다.

Figma 파일은 JSON이다

Figma 파일 (.fig)을 열어보면 HTML이나 CSS가 없다. JSON 데이터가 들어있다.

{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [
      {
        "id": "1:2",
        "name": "Page 1",
        "type": "CANVAS",
        "children": [
          {
            "id": "1:3",
            "name": "Rectangle",
            "type": "RECTANGLE",
            "x": 100,
            "y": 100,
            "width": 200,
            "height": 150,
            "fills": [...]
          }
        ]
      }
    ]
  }
}

레이어 트리 구조, 좌표, 크기, 색상 같은 정보가 JSON으로 저장되어 있다. HTML DOM 트리가 아니다.

HTML이었다면 이렇게 생겼을 것이다

만약 Figma가 HTML 기반이었다면 이렇게 생겼을 거다.

<div style="width: 200px; height: 150px; background: blue; position: absolute; left: 100px; top: 100px;">
  <p style="font-size: 14px;">Text</p>
</div>

근데 실제 Figma 파일은 이렇게 생겼다.

{
  "type": "FRAME",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 150,
  "fills": [{"type": "SOLID", "color": {"r": 0, "g": 0, "b": 1}}],
  "children": [
    {"type": "TEXT", "characters": "Text", "fontSize": 14}
  ]
}

HTML/CSS가 아니라 순수 데이터 구조다.

그럼 브라우저에서 어떻게 보이나

Figma가 브라우저에서 작동하는 방식은 이렇다.

1. JSON 파일 로드

.fig 파일을 서버에서 다운로드한다. 압축된 JSON 데이터다.

2. WebAssembly 엔진 실행

C++로 작성된 렌더링 엔진이 WebAssembly로 컴파일되어 있다. 브라우저가 이걸 실행한다. 네이티브 속도로 작동한다.

3. WebGL로 렌더링

JSON 데이터를 파싱해서 WebGL로 화면에 그린다. GPU를 직접 사용한다. HTML DOM을 거치지 않는다.

4. Canvas에 UI 그리기

툴바, 사이드바 같은 UI는 Canvas API로 그린다.

전체 과정에서 HTML DOM 트리는 거의 안 쓴다. 몇 개 컨테이너 요소만 있고, 나머지는 전부 WebGL로 렌더링한다.

왜 HTML 안 쓸까

HTML/CSS로도 디자인 도구를 만들 수 있다. 근데 Figma는 안 그랬다. 이유가 있다.

1. 성능

HTML/CSS는 수천 개 레이어를 동시에 처리하기 어렵다. DOM 트리가 커지면 브라우저가 느려진다.

Figma는 수천 개, 수만 개 레이어를 다룬다. 대형 프로젝트는 10만 개가 넘을 때도 있다. HTML/CSS로는 감당 안 된다.

WebGL은 다르다. GPU에서 직접 렌더링한다. 레이어가 몇만 개여도 부드럽게 작동한다.

2. 정밀도

HTML/CSS는 픽셀 단위로 배치한다. 100px, 101px 이런 식이다.

Figma는 소수점 단위까지 정밀하다. 100.5px, 100.25px 가능하다. 벡터 편집기라서 필요하다.

HTML/CSS로는 이런 정밀도를 유지하기 어렵다. 브라우저마다 렌더링이 다르고, 픽셀 스냅핑이 일어난다.

3. 에디터 기능

벡터 편집, 펜 도구, 부울 연산 같은 건 HTML/CSS로 구현하기 매우 어렵다.

WebGL은 이런 기능을 구현하기 쉽다. 직접 픽셀을 제어하고, 벡터 계산을 GPU에서 처리한다.

Figma가 사용하는 웹 기술

Figma는 HTML 안 쓰지만, 다른 웹 기술은 많이 쓴다.

WebAssembly (Wasm):
C++로 작성된 렌더링 엔진. 브라우저에서 네이티브 속도로 실행된다.

WebGL:
GPU 가속 그래픽 렌더링. 수천 개 레이어도 부드럽게 처리한다.

IndexedDB:
브라우저 로컬 저장소. 오프라인에서도 작업할 수 있다.

WebRTC:
실시간 협업. 여러 명이 동시에 편집할 수 있다.

HTML/CSS는 최소한만 쓴다. 전체 페이지 레이아웃 정도만.

Figma → HTML 변환은 별도 과정

"Figma to HTML" 플러그인이나 도구들이 있다. Anima, TeleportHQ 같은 거.

이런 도구들은 Figma 파일을 분석해서 HTML로 변환한다. 원본이 HTML인 게 아니다.

Figma JSON → Figma API → 플러그인 → HTML/CSS 생성

Figma 파일의 레이어 구조를 읽어서, HTML DOM으로 재구성하고, CSS 스타일을 생성한다. 완전히 다른 포맷으로 바꾸는 거다.

다른 디자인 도구들도 비슷하다

Figma만 그런 게 아니다. 대부분의 디자인 도구가 독자적인 포맷을 쓴다.

Sketch (.sketch):
ZIP 파일. 안에 JSON과 이미지가 들어있다. HTML 아니다.

Adobe XD (.xd):
ZIP 파일. XML과 JSON이 섞여있다. HTML 아니다.

Framer:
이건 좀 다르다. React 기반이라 실제로 코드를 생성한다. HTML/JSX를 만들어낸다.

그럼 왜 브라우저에서 작동하나

Figma가 독자적인 포맷을 쓰는데도 브라우저에서 작동하는 이유는 간단하다. WebGL, WebAssembly 같은 웹 표준 기술을 쓰기 때문이다.

HTML/CSS를 안 써도 브라우저에서 실행할 수 있다. 게임이나 3D 모델링 도구도 브라우저에서 작동하는데, 다 WebGL 쓴다.

Figma는 디자인 도구지만 기술적으로는 게임 엔진에 가깝다. 데이터를 GPU로 직접 렌더링한다.

결론

Figma 파일은 HTML 기반이 아니다.

❌ HTML/CSS 파일 아님
✅ JSON 기반 독자적 포맷
✅ WebGL + WebAssembly로 렌더링
✅ HTML 변환은 별도 프로세스

Figma가 웹 브라우저에서 작동하지만, 파일 포맷은 JSON이고, 렌더링은 WebGL이다. HTML은 export 할 때만 생성된다.

비유하자면:

  • Figma = Photoshop (독자 포맷 + GPU 렌더링)
  • Webflow = HTML/CSS 에디터 (실제 HTML 생성)

Figma가 브라우저에서 이렇게 빠르고 부드러운 이유는, HTML/CSS를 안 쓰기 때문이다. WebGL로 직접 렌더링하니까 네이티브 앱처럼 작동한다.

다음번에 "Figma는 웹 기반이니까 HTML이겠지"라고 생각하면, 아니라고 말해줄 수 있다. Figma는 JSON이고, WebGL이다.