질문사항

html to design 플러그인을 사용하여 HTML을 피그마로 가져올 때, 레이어 순서가 역순으로 정렬되는 현상이 있습니다. 이를 순차적으로 변환하는 옵션이 있나요?

답변

`html to design` 플러그인으로 HTML을 피그마로 가져올 때 레이어 순서가 역순으로 정렬되는 것은 HTML DOM(Document Object Model) 구조와 Figma의 레이어 스택 방식의 근본적인 차이에서 기인합니다.

HTML DOM: 일반적으로 HTML 요소는 문서 흐름에 따라 위에서 아래로 쌓이며, 나중에 추가된 요소가 시각적으로 아래에 배치될 수 있습니다 (특히 `position: static`일 경우).

Figma 레이어: Figma의 레이어 패널에서는 나중에 생성되거나 위로 올라온 레이어가 시각적으로 가장 위에 표시됩니다.

이러한 차이 때문에 `html to design` 플러그인에서 직접적으로 레이어 순서를 순차적으로 변환하는 옵션은 제공되지 않을 가능성이 높습니다.

해결 방법:

Auto Layout으로 감싸기: 가져온 요소들을 전체적으로 Auto Layout으로 감싸면, Auto Layout의 방향(수직 또는 수평)에 따라 요소들의 순서를 제어할 수 있습니다. Auto Layout 내에서는 레이어 패널의 순서가 시각적인 순서와 일치하게 됩니다.

레이어 정리 플러그인 활용:

Sort Layers: 레이어 패널의 레이어 순서를 이름, 타입, 위치 등으로 정렬해주는 플러그인들이 있습니다. 이를 활용하여 역순으로 정렬된 레이어를 원하는 순서로 재정렬할 수 있습니다.

Clean Document: 문서 내의 불필요한 레이어를 정리하거나, 레이어 순서를 최적화하는 데 도움을 줄 수 있는 플러그인도 있습니다.

수동 정리: 레이어 개수가 많지 않다면, 수동으로 레이어 패널에서 순서를 드래그하여 조절하는 방법도 있습니다.