xtring.dev

[React Native] 당신의 iOS 앱은 Dark mode를 지원하시나요? - Dark mode의 대응을 할 수 없을 때 사용하자! 본문

Front-End/React Native

[React Native] 당신의 iOS 앱은 Dark mode를 지원하시나요? - Dark mode의 대응을 할 수 없을 때 사용하자!

xtring 2020. 5. 31. 17:12
반응형

 

 

React Native

 

 

 

  최근 iOS 13이 발표되면서 애플이 다크모드를 지원하게 되었습니다. 다크모드를 통해 사용자들은 서비스를 눈이 편하게 볼 수 있는 것이죠. 개발자들은 항상 흰 화면에 많은 텍스트를 보면서 눈이 시리다고 합니다. 그래서 IDE를 사용할 때 검정 배경을 많이 사용하죠.😎  그런데 이제 일반 사용자들에게도 다크 모드를 지원합니다. 현재 많은 서비스들이 이에 대응하고 적용하고 있습니다. 하지만 대부분의 회사들은 이에 대해 바로 대응할 수는 없겠죠? 그런 경우 어떻게 해야할까요?🤔

 

 

 

  대응이라는게 플로우를 따라가는 것도 있지만 지원하지 못한다면 서비스에서는 아예 보여주지 않는 방법도 있습니다. 그래서 저희 서비스에서도 당장 적용할 수 없어 다크모드를 강제로 미지원할 수 있도록 앱을 세팅하기로 결정했습니다! 저희 서비스에서 다크모드로 인해 생긴 가장 큰 문제점은 실행 중인 기기의 Status Bar가 제가 세팅해 놓은 Status Bar와 맞지 않아 글자와 아이콘이 보이지 않는 문제점이 발생했습니다!

 

 

 

 

  다크모드를 disable하는 방법은 두가지로 둘 중 하나를 선택해서 적용하시면 됩니다. 😆저는 개인적으로 첫번째 방법을 추천드립니다!

방법 1) appDelegate.m(based Objective-C)

  didFinishLaunchWithOptions 메소드 안에 넣어주세요!


if (@available(iOS 13.0, *)) {
  rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLigt;
}

 

 

 

방법2) info.plist

  간단하게 Xcode에서 info.plist를 열어주고 수정하면 됩니다!


<key>User Interface Style</key>
<string>Light</string>

 

 

 

 

 

  저는 개인적으로 방법2) info.plist를 수정하는 방법을 통해서 대응을 완료했습니다. 우선 appDelegate를 수정하는 것은 Objective-C를 통해서만 가능하며 앱의 세팅과 관련한 코드는 info.plist에서 최대한 설정하는 것이 좋다고 생각해서 입니다.

 

 

 

 

  적용을 완료하셨나요? 그렇다면 Xcode에서 cmd + shift + k로 캐시를 한번 날려주고 Run(cmd + r)하시면 앱에 적용이 되었을거에요 😁

 

 

 

  이 방법은 React Native 뿐만 아니라 기존 iOS(based Objective-C)앱에도 적용이 가능한 사항입니다!

반응형
Comments