인앱 메시지 사이즈 가이드

디파이너리 인앱 메시지는 메시지 타입에 따라 비율과 사이즈가 고정되어 있습니다. 이미지 제작 시 권장 사이즈부터 노출되는 사이즈까지 이미지 최적화 사이즈를 알려드립니다. 🙂

인앱 메시지 레이아웃

레이아웃 유형

디파이너리에서는 모달과 바텀시트 두 가지 레이아웃을 제공합니다. 특히, 바텀시트 레이아웃은 모바일 환경에서만 사용할 수 있습니다.

레이아웃	지원 타입	비고
모달	이미지 이미지 + 텍스트 텍스트
바텀시트	이미지 텍스트	미지원

모달 이미지

이미지 업로드 정책

이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 2배 이상 높은 사이즈의 이미지를 활용해 주세요.

타입	모바일	PC
정방형 (1:1 비율)	최소 720x720 이상 1MB 이하 / png, jpg, jpeg 허용	최소 800x800 이상 1MB 이하 / png, jpg, jpeg 허용
가로형 (2:1 비율)	최소 720x360 이상 1MB 이하 / png, jpg, jpeg 허용	최소 1120x560 이상 1MB 이하 / png, jpg, jpeg 허용
세로형 (3:4 비율)	최소 720x960 이상 1MB 이하 / png, jpg, jpeg 허용	최소 720x960 이상 1MB 이하 / png, jpg, jpeg 허용
자유형 (비율 제한 없음)	최소 720x720 이상 1MB 이하 / png, jpg, jpeg 허용	최소 800x800 이상 1MB 이하 / png, jpg, jpeg 허용

모바일

• 모바일 인앱 메시지는 디바이스 너비와 높이의 85%를 넘지 않습니다.

  • 실제 메시지가 디바이스보다 긴 경우에는 이미지가 리사이징 됩니다.

• 비율 제한 없는 경우 이미지 비율을 보장하여 노출합니다.

PC

• PC 인앱 메시지는 브라우저 너비와 높이의 70%를 넘지 않습니다.

  • 모달 디스플레이 크기 조절 시 화면 너비를 초과한 경우에도 동일하게 70%로 리사이징 됩니다.

노출 이미지 사이즈 조정

모바일 / 모달 디스플레이 사이즈

원본 이미지 사이즈를 비율로 조절하여 기기에 노출되는 메시지 크기를 조절할 수 있습니다.

• 크게 : 디바이스 너비의 85%

• 중간 : 디바이스 너비의 70%

• 작게 : 디바이스 너비의 50%

PC / 모달 디스플레이 크기

원본 이미지 사이즈의 너비값을 입력하여 기기에 노출되는 메시지 크기를 조절할 수 있습니다.

• 입력값 : 200 ~ 1000px까지 입력 가능

  • 최대값 입력 후 화면 너비를 초과한 경우 70%로 리사이징 됩니다.

모달 이미지 + 텍스트

이미지 업로드 정책

이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 2배 이상 높은 사이즈의 이미지를 활용해 주세요.

타입	모바일	PC
정방형 (1:1 비율)	최소 720x720 이상 1MB 이하 / png, jpg, jpeg 허용	최소 800x800 이상 1MB 이하 / png, jpg, jpeg 허용
가로형 (2:1 비율)	최소 720x360 이상 1MB 이하 / png, jpg, jpeg 허용	최소 1120x560 이상 1MB 이하 / png, jpg, jpeg 허용
세로형	최소 720x960 이상 1MB 이하 / png, jpg, jpeg 허용	최소 720x960 이상 1MB 이하 / png, jpg, jpeg 허용

모바일

• 텍스트가 길어졌을 때 인앱 메시지는 디바이스 높이의 85%를 넘지 않습니다.

  • 텍스트 영역은 최소 100px은 보장됩니다.

PC

• PC 인앱 메시지는 브라우저 너비와 높이의 70%를 넘지 않습니다.

  • 위 정책은 모든 비율에 동일하게 적용됩니다.

모달 텍스트

모바일

• 모바일 인앱 메시지는 디바이스 너비와 높이의 85%를 넘지 않습니다.

• 텍스트 영역은 최소 100px이 보장됩니다.

• 텍스트가 길어진 경우 최대 320px까지 노출됩니다.

PC

• PC 인앱 메시지는 브라우저 너비와 높이의 60%를 넘지 않습니다.

노출 이미지 사이즈 조정

모바일 / 모달 디스플레이 사이즈

텍스트 타입의 경우에도 비율에 따라 노출되는 메시지 크기를 조절할 수 있습니다.

• 크게 : 디바이스 너비의 85%

• 중간 : 디바이스 너비의 70%

• 작게 : 디바이스 너비의 50%

PC / 모달 디스플레이 크기

원본 이미지 사이즈의 너비값을 입력하여 기기에 노출되는 메시지 크기를 조절할 수 있습니다.

• 입력값 : 200 ~ 800px까지 입력 가능

  • 최대값 입력 후 화면 너비를 초과한 경우 60%로 리사이징 됩니다.

바텀시트 이미지

이미지 업로드 정책

이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 2배 이상 높은 사이즈의 이미지를 활용해 주세요.

타입	모바일	PC
정방형 (1:1 비율)	최소 720x720 이상 1MB 이하 / png, jpg, jpeg 허용	미지원
가로형 (3:2 비율)	최소 720x480 이상 1MB 이하 / png, jpg, jpeg 허용	미지원

모바일

• 최대 너비 : 기기의 너비에 맞춰 이미지로 채워집니다.

• 최대 높이 : 이미지 비율에 따라 결정됩니다.

바텀시트 텍스트

모바일

• 최대 너비 : 기기의 너비에 맞춰 메시지가 채워집니다.

• 최대 높이

  • 텍스트 영역은 최대 320px까지 노출됩니다.

  • 메시지의 최대 높이는 버튼 옵션에 따라 결정됩니다.

• 최소 높이

  • 텍스트 영역은 최소 100px이 보장됩니다.

Figma