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


안드로이드폰의 다양성은 수많은 제조사의 숫자가 대변하구요. 아이폰의 경우도 전통적인 작은화면(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 8383
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 8087
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 10513
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 15603
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 17299
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 13035
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 32528
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 168171
420 RAD Studio XE7에서 안드로이드 개선된 내용 [1] 관리자 2014.11.22 1428
419 RAD Studio XE7에서 VCL개선된 내용 관리자 2014.11.22 1175
418 [세미나 자료] 20141113 RAD Studio XE7 DeepDive file 관리자 2014.11.14 1399
417 VCL앱을 모바일앱으로 쉽게 확장할 수 있는 앱테더링 자세히 살펴보기! [3] Humphery 2014.11.11 3239
416 더 쉬운코드, 더 유연한 코드를 작성할 수 있는 현대식 문법 [1] Humphery 2014.11.06 4509
415 RAD Studio XE7에서 추가된 안드로이드 기능 익히기(동영상) Humphery 2014.11.05 2013
414 델파이 문법을 익힐 수 있는 문서모음 [2] Humphery 2014.11.03 2576
413 XE7에서 추가 된 안드로이드 프로젝트에서 외부 라이브러리(jar) 사용을 위한 정보 [1] Humphery 2014.11.03 3163
412 [업데이트][Hotfix] iOS 배포와 요세미티, VCL Bitmap 파일 보안취약점 패치 Humphery 2014.10.22 2009
411 [따라하기] "나의 도서관 앱" 개발 Humphery 2014.10.15 3959
410 [동영상] 8단계로 완성하는 "2014년 출시 앨범" 앱 개발 "15"분 만에 완료하기 관리자 2014.10.14 1824
409 이 달의 기술자료 - 2014년 11월 험프리 2014.10.13 54046
408 RAD Studio 프리미엄 스타일 사용방법(VCL / FMX) [1] Humphery 2014.10.10 5255
407 8단계로 완성하는 "2014년 출시 앨범" 앱 개발 따라하기 [1] file Humphery 2014.10.07 3591
406 [광주 세미나 발표자료] RAD Studio XE7 Direct, LIVE! 관리자 2014.09.30 1292
405 [XE7] 사물인터넷(IoT)와 RAD Studio -블루투스 [2] Humphery 2014.09.24 4035
404 FireDAC 시작하기 Humphery 2014.09.23 2922
403 [XE7] 병렬(페러럴) 컴퓨팅 라이브러리 소개 Humphery 2014.09.22 3353
402 [XE7] 다양한 형태로 표시되는 적응형 컴포넌트 TMultiView 소개 Humphery 2014.09.18 2049
» [XE7] 멀티 디바이스 디자이너 소개 [1] Humphery 2014.09.18 2438