[FIX] 튜토리얼 화면 기기별 대응 #64

stopstone · 2025-11-20T10:36:43Z

작업 내용

기기마다 화면의 일관성을 지키고 자연스러운 UI를 보여줄 수 있도록 수정했습니다.
튜토리얼 화면에서 인디케이터 하단 여백을 고정적으로 주었습니다.
PreviewParameter를 활용하여 각 기기별로 프리뷰를 확인할 수 있습니다.
튜토리얼 화면 배경 이미지를 추가하였습니다.
NearFrame에서 상태바 패딩 포함 / 미포함 조건을 추가하였습니다

확인 방법

presentation/preview
NearFrame
feature/onboading/OnboardingScreen

참고 사항

presentation/preview를 추가하였습니다.
PreviewParameter를 활용하여 각 디바이스별 스펙에 대한 프리뷰를 한번에 확인할 수 있습니다.
활용법은 다음과 같습니다.

@Preview()
@Composable
fun XXXScreenPreview(
    @PreviewParameter(DevicePreviewParameterProvider::class) spec: DevicePreviewSpec,
) {
    DevicePreviewFrame(spec = spec) {
        XXXScreen(
            state = UiState(),
        )
    }
}

onboading_bg_img 를 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi 추가하였습니다.

Summary of Changes

Hello @stopstone, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 튜토리얼 화면의 사용자 경험을 개선하기 위해 다양한 기기에서의 UI 일관성을 확보하는 데 중점을 둡니다. 이를 위해 화면 레이아웃을 조정하고, 새로운 배경 이미지를 추가했으며, 개발자가 여러 기기에서 UI를 쉽게 테스트할 수 있도록 프리뷰 기능을 강화했습니다. 또한, 시스템 바 패딩 처리를 유연하게 할 수 있도록 핵심 UI 컴포넌트를 리팩토링했습니다.

Highlights

튜토리얼 화면 기기별 UI 일관성 개선: 튜토리얼 화면의 UI가 다양한 기기에서 일관되고 자연스럽게 보이도록 수정되었습니다.
인디케이터 하단 여백 고정: 튜토리얼 화면에서 페이지 인디케이터의 하단 여백이 고정적으로 적용되도록 변경되었습니다.
PreviewParameter를 활용한 기기별 프리뷰 지원: PreviewParameter를 도입하여 다양한 기기 스펙에 대한 프리뷰를 쉽게 확인할 수 있게 되었습니다.
튜토리얼 화면 배경 이미지 추가: 튜토리얼 화면에 배경 이미지가 추가되어 시각적인 완성도를 높였습니다.
NearFrame의 상태바 패딩 조건부 적용: NearFrame 컴포넌트에 상태바 패딩 포함/미포함 조건을 추가하여 유연성을 확보했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

튜토리얼 화면의 기기별 대응을 위한 리팩토링 작업이 인상적입니다. OnboardingScreen을 상태 없는(stateless) 컴포저블로 분리하고 OnboardingRoute를 도입하여 테스트 용이성과 코드 구조를 개선한 점이 좋습니다. 또한 PreviewParameter를 활용해 다양한 기기에서 UI를 쉽게 확인할 수 있도록 개선한 점도 훌륭합니다. 전반적으로 PR의 목표를 잘 달성했으며, 코드 품질을 높이는 좋은 변경이라고 생각합니다. 몇 가지 개선점을 제안드립니다.

gemini-code-assist · 2025-11-20T10:38:08Z

Near/app/src/main/java/com/alarmy/near/presentation/ui/component/NearFrame.kt

+    val columnModifier =
+        if (applySystemBarsPadding) {
+            baseModifier.padding(top = statusBarHeightDp, bottom = navigationBarHeightDp)
+        } else {
+            baseModifier.padding(bottom = navigationBarHeightDp)
+        }


applySystemBarsPadding 파라미터가 false일 때의 로직이 의도와 다르게 동작할 수 있습니다. 현재 구현에서는 false일 때도 navigationBarHeightDp 만큼의 하단 패딩이 적용됩니다.

OnboardingScreen에서 applySystemBarsPadding = false로 NearFrame을 호출하고, 내부 Column에 다시 padding(bottom = navigationBarHeightDp)을 적용하고 있어 하단 패딩이 중복으로 적용됩니다.

applySystemBarsPadding이 false일 때는 NearFrame에서 시스템 바 관련 패딩을 전혀 적용하지 않도록 수정하여, 각 화면에서 패딩을 완전히 제어할 수 있도록 하는 것이 더 명확하고 재사용성이 높을 것 같습니다.

Suggested change

val columnModifier =

if (applySystemBarsPadding) {

baseModifier.padding(top = statusBarHeightDp, bottom = navigationBarHeightDp)

} else {

baseModifier.padding(bottom = navigationBarHeightDp)

}

val columnModifier =

if (applySystemBarsPadding) {

baseModifier.padding(top = statusBarHeightDp, bottom = navigationBarHeightDp)

} else {

baseModifier

}

gemini-code-assist · 2025-11-20T10:38:09Z

Near/app/src/main/java/com/alarmy/near/presentation/feature/onboarding/OnboardingScreen.kt

+                modifier = Modifier.fillMaxSize(),
+                painter = painterResource(R.drawable.onboarding_bg_img),
+                contentDescription = null,
+                contentScale = ContentScale.FillBounds,


배경 이미지에 ContentScale.FillBounds를 사용하면 기기 화면 비율에 따라 이미지가 왜곡되어 보일 수 있습니다. 이미지의 비율을 유지하면서 화면을 채우려면 ContentScale.Crop을 사용하는 것이 좋습니다. Crop은 이미지가 잘릴 수는 있지만, 왜곡되지 않아 더 자연스러운 배경을 제공할 수 있습니다.

Suggested change

contentScale = ContentScale.FillBounds,

contentScale = ContentScale.Crop,

Gemini의 리뷰대로 Crop은 이미지가 잘릴 수도 있다는 점에서 수정하지 않고 FillBounds로 남겨두겠습니다.

- `run`과 `when`을 사용하여 `applySystemBarsPadding`에 따른 패딩 적용 로직을 더 간결하게 변경했습니다. - 기존에 항상 적용되던 하단 네비게이션 바 패딩이 `applySystemBarsPadding`이 `false`일 때는 적용되지 않도록 수정했습니다.

stopstone · 2025-11-20T10:54:34Z

previewParameter를 활용해보았습니다..! 😀
기기별로 해상도가 다른 것을 한번에 보여주기 위해 사용해보았는데 다른 곳에서도 활용하면 좋을 것 같아 패키지를
presentation/preview로 두었는데 더 적절한 곳이 있을까요?

- 온보딩 화면의 각 페이지 콘텐츠가 다른 기기에서도 깨지지 않도록 레이아웃을 수정했습니다. - `HorizontalPager`와 이미지의 `weight`를 조정하여 화면 크기에 따라 유연하게 대응하도록 변경했습니다.

rhkrwngud445

적용해주신 Preview 위치 좋아보입니다!
따로 리뷰 드릴 부분이 안보여서 바로 머지주셔도 좋을 것 같아요!
(돌려보지는.. 못했습니다😂)

stopstone added 6 commits November 20, 2025 17:54

feat: 온보딩 화면 배경 이미지 추가

dc2cd11

- 기존 Composable로 구현되었던 배경을 이미지 리소스로 대체했습니다. - 다양한 해상도를 지원하기 위해 `drawable` 폴더별로 이미지를 추가했습니다.

refactor: 온보딩 화면 UI 수정

74df828

- 온보딩 화면의 레이아웃 간격을 조정했습니다.

gemini-code-assist bot reviewed Nov 20, 2025

View reviewed changes

rhkrwngud445 approved these changes Nov 20, 2025

View reviewed changes

stopstone merged commit fd0083a into dev Nov 20, 2025
1 check passed

stopstone deleted the fix/fixed-onboading-ui branch December 11, 2025 04:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FIX] 튜토리얼 화면 기기별 대응 #64

[FIX] 튜토리얼 화면 기기별 대응 #64

Uh oh!

stopstone commented Nov 20, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Nov 20, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Nov 20, 2025

Uh oh!

gemini-code-assist bot Nov 20, 2025

Uh oh!

stopstone Nov 20, 2025

Uh oh!

stopstone commented Nov 20, 2025

Uh oh!

rhkrwngud445 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	contentScale = ContentScale.FillBounds,
	contentScale = ContentScale.Crop,

[FIX] 튜토리얼 화면 기기별 대응 #64

[FIX] 튜토리얼 화면 기기별 대응 #64

Uh oh!

Conversation

stopstone commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

작업 내용

확인 방법

참고 사항

관련 이슈

Uh oh!

gemini-code-assist bot commented Nov 20, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

stopstone Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

stopstone commented Nov 20, 2025

Uh oh!

rhkrwngud445 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

stopstone commented Nov 20, 2025 •

edited

Loading