인앱 메시지 사이즈 가이드

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

인앱 메시지 레이아웃

레이아웃 유형

모달 이미지

이미지 업로드 정책

모바일

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

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

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

PC

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

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

노출 이미지 사이즈 조정

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

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

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

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

PC / 모달 디스플레이 크기

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

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

모달 이미지 + 텍스트

이미지 업로드 정책

모바일

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

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

PC

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

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

모달 텍스트

모바일

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

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

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

PC

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

노출 이미지 사이즈 조정

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

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

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

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

PC / 모달 디스플레이 크기

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

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

바텀시트 이미지

이미지 업로드 정책

모바일

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

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

바텀시트 텍스트

모바일

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

• 최대 높이

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

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

• 최소 높이

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

Figma