최근 다양한 스마트 기기가 속속 등장하고 있습니다.


안드로이드폰의 다양성은 수많은 제조사의 숫자가 대변하구요. 아이폰의 경우도 전통적인 작은화면(3.5인치, 4인치)의 벗어나 이제 큰화면(4.7인치, 5.5인치) 출시되고 있습니다. 그뿐아니라 다양한 웨어러블 디바이스와 태블릿은 또 스마트폰과 다른 화면과 스타일을 갖습니다.


이렇듯 다양한 스마트기기의 종류만큼 다양한 화면크기와 스타일도 제각각입니다.

이런 디바이스의 특성에 맞는 화면과 스타일을 맞추는 것은 멀티 플랫폼 제품을 만드는 개발자와 디자이너에게 매우 큰 고민일 것입니다.


이러한 고민을 RAD Studio에서 풀어나가기 위해 "멀티 디바이스 디자이너"라는 새로운 컨셉의 개발화면이 추가되었습니다.

멀티 디바이스 디자이너는 RAD Studio XE7(Delphi XE7, C++Builder XE7)에 추가된 기능입니다.

멀티 디바이스 디자이너


멀티 디바이스 디자이너는 디바이스 별로 상이한 화면크기와 스타일을 각각의 디바이스에 맞도록 화면 구성하기 위한 새로운 화면 디자인 기술입니다.


안드로이드 4인치의 레이아웃과 7인치의 레이아웃을 각각 다르게 구성할 수 있고, 아이폰의 화면도 그와 다르게 구성할 수 있도록 해줍니다.


멀티 디바이스 디자이너는 "마스터 뷰"와 "디바이스 뷰" 개념이 적용되어, 클래스와 같이 화면을 상속받아 개발하는 컨셉입니다. 마스터 뷰에서 기본적이고 공통적인 화면을 구성하고 각각의 디바이스 뷰를 추가해 디바이스에 최적화된 화면으로 변경할 수 있습니다.

마스터 뷰의 컨트롤과 레이아웃은 디바이스 뷰에서 상속받기 때문에 다양한 디바이스 뷰는 같은 레이아웃에서 시작하고, 디바이스 뷰에서 레이아웃을 변경하면 변경된 부분만 디바이스 뷰에 적용됩니다.

❑ 마스터뷰와 디바이스뷰

마스터 뷰

마스터 뷰에 Button과 StyleBook을 올려놓았습니다. 버튼의 텍스트도 변경했습니다.

컴포넌트와 컴포넌트의 속성은 모두 디바이스뷰에 상속됩니다.

이후 안드로이드와 iOS에서 버튼의 위치와 스타일을 각각의 디바이스에 맞게 변경합니다.

안드로이드 4"(디바이스 뷰)

iPhone 4"(디바이스 뷰)


❑ 디바이스 별 화면을 하나의 소스코드로 제어

위와 같이 디바이스 별로 화면을 구성하면 아래와 같이 마스터 뷰와 디바이스 뷰 별 폼파일(*.fmx)이 생성됩니다.



그리고 컴파일 및 빌드 시 선택한 플랫폼에 맞는 폼파일을 이용해 앱이 만들어지기 때문에 플랫폼과 디바이스에 맞는 화면의 앱을 제작할 수 있습니다.

마무리

이제는 클래스 뿐 아니라 화면디자인까지 상속받아 개발할 수 있습니다.

새로운 멀티 디바이스 디자이너를 이용해 다양한 디바이스에 맞는 화면을 제공해 보시기 바랍니다.

관련글



RAD Studio(델파이, C++빌더)란?

Embarcadero® RAD Studio는 윈도우, 맥, iOS, 안드로이드, 웨어러블 앱을 한번에 개발하고 다양한 기기들과 각종 센서를 서로연결하는 애플리케이션을 매우 빠르게 개발할 수 있는 완벽한 소프트웨어 개발 도구입니다. (자세히)


번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 24055
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 22356
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 24407
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 30267
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 31395
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 26723
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 47735
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 184681
» [XE7] 멀티 디바이스 디자이너 소개 [1] Humphery 2014.09.18 2560
86 이 달의 기술자료 - 2014년 10월 file 험프리 2014.09.12 4889
85 안드로이드에서 NFC 연동 방법 Humphery 2014.09.12 3207
84 델파이 튜토리얼 자습서 이용 안내 관리자 2014.09.01 72010
83 [마이그레이션] 컴파일러 버젼 [1] 험프리 2014.08.18 1809
82 이 달의 기술자료 - 2014년 9월 file 험프리 2014.08.11 3418
81 [BaaS] VCL에서 특정사용자에게 GCM/APN 전송하기(FMX도 사용가능) Humphery 2014.07.25 1769
80 QR 코드를 만들고 스캔(읽는) 방법 Humphery 2014.07.24 5346
79 Delveloper Skill Sprints - 동영상 다시보기 소개 Humphery 2014.07.23 1412
78 [무료 동영상 강의] 전체 모음 링크 관리자 2014.07.10 6457
77 이 달의 기술자료 - 2014년 8월 file 험프리 2014.07.04 9999
76 C++ Builder에서 64 비트 Windows 용 패키지를 지원 Humphery 2014.07.04 2693
75 모바일(안드로이드, iOS) 연락처에 접근하는 방법 Humphery 2014.06.20 3459
74 [튜토리얼] Mobile Tutorials: Mobile Application Development Humphery 2014.06.13 1882
73 [샘플] RAD Studio, Delphi and C++Builder XE6 Android and iOS Code Samples file Humphery 2014.06.13 2379
72 이 달의 기술자료 - 2014년 6월 file 험프리 2014.06.05 50432
71 BaaS(Backend as a Service)와 RAD Studio(GCM, APN, 푸시알림 가능) [4] Humphery 2014.05.29 3609
70 사다리게임 소스와 함께 오픈(iOS, 구글 마켓 등록완료) [2] file c2design 2014.05.27 7052
69 RAD 스튜디오 모바일 개발 환경 설정(안드로이드, iOS) [1] file 험프리 2014.05.19 16321
68 데이터스냅(DataSnap) - 이미지 송수신 예제 [1] file Humphery 2014.05.19 4450