질문사항

iframe으로 된 웹사이트는 `html to design` 플러그인을 사용하여 피그마로 가져올 수 없나요?

답변

`iframe`으로 된 웹사이트는 `html to design` 플러그인으로 피그마에 직접 가져오기 어렵습니다.

이유:

`iframe`은 웹사이트 내부에 다른 웹사이트나 문서를 삽입하는 HTML 요소입니다. 시각적으로는 부모 웹사이트의 일부처럼 보이지만, 실제로는 별도의 독립적인 웹 페이지를 렌더링하는 '창'과 같습니다. `html to design`과 같은 플러그인은 일반적으로 현재 보고 있는 메인 웹 페이지의 DOM 구조를 분석하여 피그마 요소로 변환합니다. `iframe` 내부에 있는 콘텐츠는 메인 페이지의 DOM과는 별개로 존재하기 때문에, 플러그인이 이를 직접 '긁어오기' 어렵습니다.

대안:

`iframe` 내부 콘텐츠의 원본 URL 사용: 만약 `iframe` 내부에 로드되는 웹사이트의 원본 URL을 알고 있다면, 해당 URL을 `html to design` 플러그인에 직접 입력하여 가져오는 것을 시도해볼 수 있습니다.

스크린샷 활용: `iframe` 콘텐츠를 피그마로 가져와야 한다면, 가장 간단한 방법은 해당 `iframe` 영역을 스크린샷으로 캡처하여 이미지로 피그마에 삽입하는 것입니다. 물론 이 경우 텍스트나 요소들을 편집할 수는 없습니다.

수동 재구성: `iframe` 콘텐츠가 복잡하지 않다면, 스크린샷을 참고하여 피그마에서 수동으로 재구성하는 방법도 있습니다.