웹 화면을 Figma로 가져온 뒤 배치가 달라졌을 때
Auto Layout을 바꾸기 전에 폰트, 캡처 폭, 줄바꿈 순서로 확인하세요. 원본 프레임은 비교용으로 남겨둡니다.
어긋난 요소 하나부터 찾으세요
가져온 프레임을 복제한 뒤 브라우저와 같은 폭에서 비교합니다. 화면 전체의 구성이 달라졌다면 캡처 폭부터 확인하세요. 제목이나 그 주변만 밀렸다면 부모 프레임보다 폰트 이름·굵기·사용 가능 여부를 먼저 확인합니다. 여러 설정을 한꺼번에 바꾸면 원인을 찾기 어렵습니다.
줄 수와 자간을 확인하세요
같은 폰트 이름이어도 텍스트 측정 결과가 완전히 같지는 않을 수 있습니다. 줄 수, 텍스트 상자의 폭, 자간을 비교하세요. 직접 만든 Fieldwork 샘플에서는 자간이 좁은 제목이 Figma에서 한 번 더 줄바꿈되어 다음 줄과 겹쳤습니다. 작은 폭 차이를 처리하도록 가져오기 코드를 수정했습니다. 다른 화면에서도 복제본의 해당 텍스트 상자만 조금 넓혀 비교해 보세요. 전체 프레임을 축소해 문제를 숨기지는 마세요.
텍스트가 맞으면 Auto Layout을 보세요
글자는 같은데 자식 요소가 움직인다면 부모 프레임의 패딩·간격·크기 조절 방식을 확인합니다. Figma에는 줄바꿈, 그리드, 기준선 정렬 기능이 있습니다. 중요한 것은 해당 CSS 배치를 변환기가 제대로 옮겼는지입니다. Snapture는 원래 배치를 유지하는지 검사한 영역에 Auto Layout을 적용합니다. 이미 밀린 프레임에서 Auto Layout을 해제해도 원래 브라우저 좌표가 복원되지는 않습니다.
문제 범위만 다시 가져오세요
폰트가 없었다면 사용 가능하게 만든 뒤 다시 가져옵니다. 제목 하나만 달라졌다면 그 레이어를 수정하거나 재현 샘플을 보내세요. 섹션 전체가 다르면 캡처 폭을 기록하고 해당 영역만 다시 캡처합니다. 지원 요청에는 공유 가능한 URL, 캡처 폭, 문제 요소, 비교 화면을 넣어주세요. 비공개 내용은 지운 파일을 사용하세요.
English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia · ไทย · Tiếng Việt · Türkçe · Polski · Nederlands · Українська · हिन्दी