스플래시 화면 구현 톺아보기
app icon 스터디
Screen density란 how many pixels per inch or dots per inch (dpi) are on the screen
- Pixel은 화소라고도 불리며 디지털 화면을 구성하는 가장 작은 단위(정사각형)를 뜻함.
- inch는 2.54cm를 나타냄.
- dots per inch(dpi)란 1인치 당 점의 개수를 뜻함.
- 따라서 이 dot을 pixel로 생각하면 되고 dpi가 높을 수록 Screen density가 높음.(해상도가 좋음)
Foreground and Background Layers
앱 아이콘은 foreground와 background로 이뤄져 있는데
파란색과 하얀색 격자 부분이 background layer이고 이 layer에 쌓이는(stacked)부분이 foreground layer로 원형 mask가 적용되어 앱 아이콘이 표시됨.
flutter_native_splash 2.3.2 패키지로 스플래시 화면 구현하기
Be aware of the following considerations regarding these elements:
imageparameter. By default, the launcher icon is used:- App icon without an icon background, as shown on the left: This should be 1152×1152 pixels, and fit within a circle 768 pixels in diameter.
- App icon with an icon background, as shown on the right: This should be 960×960 pixels, and fit within a circle 640 pixels in diameter.
icon_background_coloris optional, and is useful if you need more contrast between the icon and the window background.- One-third of the foreground is masked.
colorthe window background consists of a single opaque color.
위 내용은 flutter_native_splash 패키지의 readMe에 안내하고 있는 내용인데 launcher icon이란 app icon을 말하는 것이고 1번의 내용은 다음과 같이 이해하면 된다.
image파라미터에는 app icon image가 사용되는데- background가 없는 icon의 경우에는, 위 그림의 왼쪽 처럼: img의 해상도가 1152×1152여야하고 아이콘의 해상도는 지름이 768 픽셀인 원 안에 들어가도록 권장하고 있네요.
- background가 있는 경우에는, 위 그림의 오른쪽 처럼: img해상도가 960x960이어야 하고 지름이 640 pixel인 원 안에 들어가도록 권장하고 있어요.
그리고 바로 위에서 번호가 매겨진 순서대로 그림의 숫자와 매치해보면 각 번호에서 설명하는 것이 그림에서 나타내는 영역을 나타냄을 알 수 있어요😊
4번의 opaque란 것은 opacity, 즉 불투명도를 의미해요. 불투명도는 가시광선(빛)을 통과시키는 정도를 뜻하는데 투명할 수록(Transparent) 빛을 통과시키고 불투명할수록(Opaque) 빛을 통과시키지 않아요. 즉, 투명한 컬러가 아님을 뜻해요.
Conclusion & Apply
따라서..! 나는 위의 내용을 제대로 이해하지 못하고 해상도가 768*768인 이미지에서 작업을 했다 보니 스플래시 화면에서 뜨는 오밥뭐의 로고가 다음과 같이 작게 적용되었다.
따라서 나는 앱 아이콘의 배경 색깔이 없는 흰색 foreground를 사용하고 있으므로 해상도가 1152×1152 이미지 내 지름이 768 픽셀인 원 안에 우리 로고를 삽입하여 스플래시 스크린 이미지로 사용하면 되겠다.
그리고 flutter_splash_screen.yaml 파일 내 color 파라미터에 위 사진 속 배경색을 나타내는 HEX 값을 할당하면 된다!
댓글남기기