회전된 부모 프레임 때문에 레이어 위치가 어긋나는 문제
이 문제는 보통 콘텐츠를 추가하기 전에 부모 프레임이 0도가 아닌 각도(예: “-90” 또는 “180”)로 회전되어 있을 때 발생해요. 이 경우 자식 레이어의 위치가 어긋나요. 해결하려면 같은 크기의 회전하지 않은 새 프레임을 만들고, 원래 회전된 프레임의 자식 레이어를 회전이 없는 새 프레임으로 복사하거나 드래그해 옮기세요.
텍스트 레이어 경계 상자(잘림)
텍스트 레이어의 위치가 어긋나거나 잘리는 또 다른 원인은 텍스트 상자의 크기가 실제 텍스트 크기와 맞지 않는 경우예요. 예를 들어 텍스트가 여러 줄인데 “경계 상자”의 높이가 아주 짧으면 위치가 잘못 어긋나요. 해결하려면 경계 상자의 높이를 텍스트 콘텐츠 크기에 맞게 조정하세요.
Safari에서 그림자가 있는 SVG가 흐릿하게 보이는 문제
Safari에는 드롭 섀도가 포함된 SVG를 벡터 대신 픽셀로 래스터화해서 덜 선명하게 보이게 하는 알려진 문제가 있어요.
위 스레드에서 제안하는 방법 중 하나는 그림자 레이어와 버튼/콘텐츠 레이어를 서로 다른 두 레이어로 나누는 거예요. 이렇게 하면 그림자가 없는 위쪽 버튼 레이어는 Safari에서도 선명한 SVG로 렌더링되고, 아래 레이어는 뒤에 그림자를 더하는 역할만 해요.
또는 플러그인에서 해당 버튼 CTA 레이어의 이미지 형식만 “PNG”로 재정의하고, 그 레이어의 배율 설정도 @2x 레티나로 재정의할 수 있어요. 그러면 CTA가 2x PNG 이미지로 내보내져 선명하게 유지되고, Safari의 SVG 그림자 문제도 피할 수 있어요.
GIF의 색상이나 그라디언트가 약간 거칠게 보이는 문제
GIF는 일반 JPG/PNG 이미지와 달리 최대 256색만 담을 수 있어요. 디테일이 많은 이미지나 색상 변화가 큰 그라디언트를 사용한다면, GIF 형식의 이런 제약 때문에 GIF의 원본으로 쓴 이미지만큼 선명하지 않거나 색상 정확도가 떨어지는 것이 정상이에요.
GIF에 투명도가 표시되지 않는 문제
GIF 파일 형식은 불투명도 0% 또는 100%만 지원하고, 그 사이 값은 지원하지 않아요. 즉, 완전히 불투명하게 보이는 요소 뒤에 완전히 투명한 배경이 있는 애니메이션 GIF는 만들 수 있어요. 따라서 레이어는 완전히 투명하거나 그렇지 않아야 해요. 불투명도가 50%보다 낮은 레이어는 투명해지고, 50%보다 높은 레이어는 불투명해져요.
Figma에서 투명 GIF 지정하기. 기본적으로 GIF 내보내기에는 투명도가 포함되지 않아요. GIF에 투명도가 필요하다면 Figma 레이어 이름 아무 곳에나 transparent라는 단어를 넣으세요.
.mp4 동영상 파일 호스팅 위치
Bannerify에 동영상을 추가할 때 플러그인은 .mp4 파일로 직접 연결되는 URL만 불러올 수 있어요. 아쉽게도 Vimeo/YouTube를 가리키는 URL이나 웹 기반 플레이어 형식의 링크는 사용할 수 없어요. 동영상을 호스팅하기 좋은 방법 중 하나는 Backblaze B2예요. 무료 계정에 가입하면 10gb의 무료 저장 공간을 받을 수 있고, 공개 스토리지 버킷을 만들면 업로드한 동영상 파일의 링크를 복사해 그 .mp4 링크를 Bannerify에 붙여 넣을 수 있어요. 또 다른 인기 있는 파일 호스팅 서비스는 Dropbox예요. .mp4 파일을 업로드하고 그 링크를 Bannerify 플러그인에서 사용할 수 있어요. Bannerify가 ?dl=0을 ?raw=1로 자동으로 바꿔서, 링크가 Dropbox 웹사이트 플레이어가 아니라 동영상 파일을 직접 가리키게 해요.
내보낸 이미지 주변의 얇은 흰색 선
가끔 일부 이미지의 가장자리에 희미하고 얇은 흰색 선이 생길 수 있어요. 레이어가 정수 픽셀 값에 있지 않으면(예: Y: 156.76 또는 X: 56.3) Figma가 이렇게 처리해서, 이 서브픽셀 선이 내보내기에 자동으로 포함돼요. Bannerify는 Figma Plugin API로 크기를 조정할 수 있는 레이어에 대해 이 값을 자동으로 반올림하려고 하지만, 필요하면 직접 해결할 수도 있어요. 모든 레이어 위치가 정수 픽셀 값인지 확인해 주세요.
고해상도 배너가 MP4로 내보내지지 않는 문제
플러그인에서 고해상도 배너를 MP4 동영상으로 내보낼 때, Figma가 2gb 메모리 한도에 도달해 동영상 파일을 .mp4로 바로 렌더링하지 못할 때가 있어요. 이럴 때는 Bannerify에서 배너를 WebM 형식으로 내보낸 다음, Handbrake 동영상 트랜스코더를 사용해 Figma 밖에서 내보낸 .webm 동영상 파일을 .mp4로 변환하세요.
Google Ads에서 검증되지 않는 문제
HTML 배너가 업로드되지 않거나 Google에서 검증되지 않는 데는 흔한 이유가 몇 가지 있어요. 대개 배너 파일 크기가 너무 크거나, 배너 크기가 “표준” 크기와 정확히 일치하지 않는 경우예요. 업로드하기 전에 다음 서비스로 Google Ads나 DoubleClick용 배너를 검증할 수 있어요.
내보낸 HTML 배너가 브라우저에서 애니메이션되거나 재생되지 않는 문제
내보낸 HTML 배너가 멈춘 것처럼 보이거나, 애니메이션이 재생되지 않거나, Bannerify 미리보기에서는 작동하지만 내보낸 HTML 파일을 브라우저에서 열면 작동하지 않는다면 광고 차단기나 개인정보 보호용 브라우저 확장 프로그램이 켜져 있는지 확인하세요. 일부 확장 프로그램은 로컬 HTML 파일이나 광고 관련 HTML 파일이 제대로 실행되지 않도록 막을 수 있어요. 로컬 미리보기 파일에 대해 확장 프로그램을 잠시 끄거나, 다른 브라우저에서 내보낸 파일을 열거나, 평소 사용하는 미리보기/스테이징 환경에 배너를 업로드해 테스트해 보세요.
Windows용 Figma 데스크톱 앱에서 파일 확장자가 비어 있는 문제
Figma 데스크톱 앱(Windows에서만)에는 알려진 문제가 있으며, Figma의 일반 파일 내보내기에서도 똑같이 발생해요. 파일을 저장할 때 “all files” 레이블이 보일 수 있어요. 이를 무시하고 “Save”를 클릭해 계속 진행하면 올바른 확장자로 파일이 저장되고, 컴퓨터에 다운로드된 뒤 정상적으로 열 수 있어요. 그래도 확장자 없이 저장된다면 파일 이름을 바꿔 올바른 확장자를 직접 붙이면 돼요.
모바일에서 업로드할 때 Google HTML 검증기가 드롭 섀도가 있는 SVG 요소를 PNG로 변환하는 문제
어떤 이유에서인지 모바일 기기(예: iPhone) 브라우저에서 배너 .zip을 DCM Validator에 업로드하면, 검증기가 드롭 섀도가 포함된 SVG 요소를 자동으로 PNG로 변환해 미리보기에서 더 픽셀이 깨져 보여요.
내보낸 이미지가 픽셀이 깨져 보이는 문제
Figma의 이미지 에셋이 아직 점진적으로 로딩되는 중에 배너를 내보내면, 이미지가 Figma 파일에 완전히 로드되기 전에 내보내져 픽셀이 깨진 상태로 저장될 수 있어요. 해결하려면 Bannerify 플러그인으로 배너를 내보내기 전에 Figma 파일 안의 모든 이미지가 100% 로드되어 선명하게 보이는지 확인해 주세요. 이 문제를 더 줄이려면 TinyImage의 “Downsizer” 기능(영어)으로 이미지 채우기를 레이어 크기에 맞게 줄이세요. 그러면 파일 크기가 줄어 Figma 파일에서 이미지가 훨씬 빨리 로드돼요.
레이어에 aria-hidden='true' 속성 추가
접근성 때문에 aria-hidden 속성이 필요하다면 Figma 레이어 이름에 aria-hidden을 넣어 레이어별로 추가할 수 있어요. 그러면 배너를 HTML로 내보낼 때 해당 HTML 요소에 aria-hidden="true"가 자동으로 추가돼요.
중국에서 VPN이 필요한 경우
중국에 있다면 “만리방화벽(The Great Firewall of China)” 때문에 계정 서버에 연결하지 못할 수도 있어요. 유효한 키를 입력했는데도 활성화 오류가 표시된다면 VPN을 사용해야 문제가 해결될 가능성이 커요.
'An error occurred while loading the plugin environment'
Figma에서 Use Developer VM 디버그 설정이 실수로 켜져 있으면 Figma 데스크톱 앱에서 이 오류가 발생할 수 있어요. Figma 캔버스 아무 곳에서나 마우스 오른쪽 버튼을 클릭하고 Plugins, Development에 차례로 마우스를 올린 다음, Use Developer VM이 체크 해제되어 있는지 확인하세요. 체크가 해제되어 옆에 체크 표시가 없으면 Figma 플러그인을 다시 실행했을 때 정상적으로 작동할 거예요.