CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·아이포니앙 ·주식한당 ·방탄소년당 ·MaClien ·일본산당 ·자전거당 ·개발한당 ·이륜차당 ·AI당 ·바다건너당 ·물고기당 ·콘솔한당 ·소시당 ·소셜게임한당 ·안드로메당 ·노젓는당 ·갖고다닌당 ·클다방 ·찰칵찍당 ·ADHD당 ·VR당 ·창업한당 ·나혼자산당 ·걸그룹당 ·골프당 ·방송한당 ·여행을떠난당 ·냐옹이당 ·레고당 ·라즈베리파이당 ·달린당 ·나스당 ·3D메이킹 ·X세대당 ·AI그림당 ·날아간당 ·사과시계당 ·육아당 ·배드민턴당 ·야구당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·캠핑간당 ·문명하셨당 ·클래시앙 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·디아블로당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·이브한당 ·패셔니앙 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·젬워한당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·IoT당 ·KARA당 ·키보드당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·리눅서당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·영화본당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·PC튜닝한당 ·그림그린당 ·소풍간당 ·심는당 ·패스오브엑자일당 ·품앱이당 ·리듬탄당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·스타한당 ·스팀한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·터치패드당 ·트윗당 ·가상화폐당 ·시계찬당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

팁과강좌

기타 게임 개발자여! 아이폰X 의 변태(?) 해상도를 극복해봅시다. 8

5
2017-12-15 17:22:42 수정일 : 2017-12-15 17:22:56 125.♡.148.163
순순

안녕하세요 모바일 게임 개발자 순순입니다.


이번에 바주카라는 신작게임을 출시하면서, 아이폰X 도 없는 주제에 한번 그 특이한 해상도를 대응해볼려고 삽을 파봤는데요.

그 관련 팁을 공유해보려 합니다.


먼저 이 팁은 유니티 + NGUI 플러그인 기준으로 진행된점 설명드립니다.


먼저 아이폰X 의 독특한 탈모 해상도는 다들 잘 아시리라 생각하고 부연 설명을 따로 하진 않겠습니다.

저는 막연하게, 애플에서 알아서 위/아래 혹은 좌/우 레터박스를 만들어서 게임등의 앱들이 해상도를 호환하지 않는 경우

알아서 OS 단에서 처리해주겠지!! 라는 헛된 꿈을 꾸고 있었는데, 그런건 없었습니다. 


아래 주소의 아이폰 X 휴번 인터페이스 가이드 라인을 참조하여 수정을 해줘야 합니다.

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/


위 가이드 라인 을 참조해보면 아래와 같이, 레터박스를 사용하거나 등등 방법들을 제안하고 있습니다.


또한, 애플이 추천하는 방법은 "아이폰 X 의 노치부분의 등장으로! 멋지고 유용하게 좌 우 상단의 스테이터스 바를 사용할 수 있다!! 당신의 앱을 만들때 꼭 사용해봐!! " 라고 해줍니다. 후후후.. 멋지군요. 역시 애플의 정신승리인가요.


전 애플의 가이드라인을 준수해야하는 간이 콩알만한 개발자이기때문에, 제가 개발하는 환경인 Unity + Ngui 환경에서 해당 해상도를 대응할 수 있는 방법을 연구해야 합니다.


생각보다 쉽게 해결 할 수 있었는데요, Unity 용 UI 플러그인인 Ngui 에서는 멀티 해상도를 지원할 수 있는 기능을 지원합니다. UiRoot.cs 라는 파일에서 해당 기능을 지원하는데요, 보통은 타겟 해상도의 가로, 세로 기준을 중심으로 해상도가 변경되게 되면, 유아이 오브젝트들의 크기를 조절해서 맞춰주는 방식입니다.


다만, 기존에는 16:9 해상도 가 주류이고 일부 4:3 해상도의 태블릿이나 폰들을 위해서 좌/우를 더 늘려주는 방식으로 대응을 했었는데요, 아이폰X 는 해상도가 1125 x 2436 이라는 세로로 길쭉한 해상도입니다. ( 애플이!! UI 강호의 도리를 무너뜨리고있어!! 이 무슨 알 수없는 해상도란 말인가!! )


가로 세로 비율이 1:2 보다 작은, 약 1:2.05 정도 되는 아주 길쭉한 모습인데요. 따라서 이 특징을 활용해서 코드를 수정해서 해결해줄 수 있습니다. 즉, 해상도 비율을 체크해서, 비율 값이 0.5 보다 작게 나오면 + iOS 의 경우는


" 와! 지금 아이폰 x 로 우리 게임을 실행시키려 하고 있다!! " 하고 체크를 해주는 것이지요.


그리고 그 체크를 기준으로 전체 오브젝트를 위 그림에서 가운데 아래에 있는 그림과 같이 아이폰 X 해상도 가운데 정렬로 들어갈 수 있도록 비율값으로 줄여줍니다. 기존 4.7  인치 해상도의 경우 포인트 기준으로 세로 포인트가 667 포인트, 아이폰x 가 812 포인트 이기때문에, 1: 1.217 의 비율, 즉 약 1.22 배 정도를 더 작게 만들어줘서, 아이폰 X 해상도 안으로 가운데 정렬 되도록 쑉! 줄여주는 것이지요.


그리고 상하 여백부분에 맞춰서 상/하 에 위치하고 있는 유아이 오브젝트들을 재정렬 시켜줍니다.


그리고, 아이폰X 를 갖고 계시거나 없으시다면 Xcode 에서 제공하는 시뮬레이터를 통해서 제대로 출력이 되는지 확인을 하면서 최적값을 찾기위해서 조금씩 수정을 해주면 됩니다!!




글로 설명이 되어있다보니 좀 이해가 어려울 수도있는데, 쉽게 생각하면 다음과 같습니다.


1. 가로 세로 비율을 체크해서 0.5 값보다 작게 나오면! 그놈은 아이폰X 다!!

2. 비율을 계산해서 전체 유아이 요소가 아이폰X 가운데를 기점으로 다 들어가도록 조정해준다.

3. 상/하 오브젝트 요소들을 재조정해줘서 보기좋게 바꿔준다.

4. 다른 해상도때와 분기를 해줘서 설정 해주도록 한다.


입니다!!!


좀 더 자세한 설명과 개인의 잡설이 추가된 내용은 개인 블로그에 상세하게 정리해놨습니다.

http://blog.soonsoons.com/221163879734


현재 이 방법으로 애플 검수를 잘 통과하여 서비스중입니다.

그런데, 아직 애플이 아이폰X 해상도를 지원하지 않는다고 해서 리젝 철퇴를 때리거나 하지는 않는 것 같습니다. 기존에 해상도 대응 하지 않는 버젼도 리뷰 통과를 한적이 있어서요.. 하지만 다들 알다시피 갑중갑 마인드의 애플은 어느날 갑자기 아이폰 X 해상도 대응을 필수 요소로 넣을지도 모르겠다는 두려움이 있다면, 미리 연구해놓으시길 추천드립니다.


마지막으로 저도 8년차 진성 앱등이 유저라고 생가하지만, 개발하는 입장에서는 이번 해상도는 여러모로 고개가 저어지네요, 무슨 생각으로 이렇게 만들었을까요 ㅠㅠ


많은 개발자 분들에게 도움 되시길 바랍니다!!

출처 : http://blog.soonsoons.com/221163879734
순순 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [8]
짜짜로닝
IP 115.♡.16.115
12-15 2017-12-15 17:55:52
·
이제 iOS개발은 안드로이드 보다 훨씬 더 파편화 되버렸네요.
순순
IP 125.♡.148.163
12-15 2017-12-15 18:28:25
·
흑흑 곧 그렇게 될지도모르겠어요 라인업들이 많아져서!
제로원
IP 121.♡.20.156
12-15 2017-12-15 19:52:31
·
아직 안드로이드보다 훨씬 더 라고 말하기에는 좀 먼거 같아요.. 그리고 플랫폼에서의 지원은 비교가 되지 않을 정도로 애플은 잘 대응해 주고 있어서..
맘터감자튀김
IP 121.♡.34.96
12-17 2017-12-17 00:00:43
·
저도 그런거 같아요 사실 안드는 해상도가 많긴해도 메인은 죄다 fhd, hd,qhd라서 그것만 하면되는데 ios는 종류가 많은데 다 지원해줘야 해서.....
오라질
IP 110.♡.140.126
12-16 2017-12-16 22:27:19
·
지금 검수는 이거 대응안해도 통과됩니다. 다만 지원하는 게 거지같아요. 2대1도 아니고 갑툭튀 이거하나만 이러니
순순
IP 125.♡.148.163
12-18 2017-12-18 01:46:52
·
네 ㅠㅠ 지금은 통과되는데
과연 언제부터 필수 사항이 될런지..!
eitetu
IP 183.♡.206.193
12-18 2017-12-18 01:23:58
·
뭔가 웹개발 보는 느낌이네요
각종 디바이스별 해상도 어찌 맞추나 한창 고민하던 때가...
순순
IP 125.♡.148.163
12-18 2017-12-18 01:48:49
·
ㅎㅎㅎ 아이폰은 원래 규격이 거의 같아서 편했는데
파편화가 심해지고있습니다!!
삭제 되었습니다.
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.