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


안드로이드폰의 다양성은 수많은 제조사의 숫자가 대변하구요. 아이폰의 경우도 전통적인 작은화면(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 24235
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 22527
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 24571
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 30420
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 31543
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 26884
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 47891
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 184849
403 [XE7] 병렬(페러럴) 컴퓨팅 라이브러리 소개 Humphery 2014.09.22 3456
402 [XE7] 다양한 형태로 표시되는 적응형 컴포넌트 TMultiView 소개 Humphery 2014.09.18 2134
» [XE7] 멀티 디바이스 디자이너 소개 [1] Humphery 2014.09.18 2561
400 [온라인 세미나 발표자료] RAD Studio XE7! 관리자 2014.09.17 1679
399 [기술문서] 델파이와 유니코드 관리자 2014.09.16 1972
398 [기술문서] 델파이XE2와 파이어몽키 관리자 2014.09.16 1688
397 [기술문서] Delphi 코딩 스타일과 아키텍처(Delphi 2009의 언어 기능 리뷰) 관리자 2014.09.16 1563
396 "Could not load SSL library." 오류 대응(XE7: BaaS, RESTClient, DataSnap) [1] Humphery 2014.09.12 16112
395 이 달의 기술자료 - 2014년 10월 file 험프리 2014.09.12 4891
394 안드로이드에서 NFC 연동 방법 Humphery 2014.09.12 3208
393 [Android] 폰번호 가져오기 [1] 타락천사 2014.09.05 38659
392 [세미나 자료] RAD Studio XE7 출시 세미나(2014.9.2/3) file 관리자 2014.09.05 1327
391 RAD Studio 최신 데모 소스코드 다운로드 Humphery 2014.09.04 4286
390 [기술문서] 실전 DataSnap! [2] 관리자 2014.09.02 2345
389 [기술문서] RAD Studio 라이브바인딩(LiveBindings) 이해하기 관리자 2014.09.02 2467
388 델파이 튜토리얼 자습서 이용 안내 관리자 2014.09.01 72010
387 [Step UP! 마이그레이션] RAD 업그레이드 마이그레이션 기술 브리핑 자료(2014.8.21) 관리자 2014.08.22 2026
386 [마이그레이션] 유니코드 적용시 검토할 사항들 file 험프리 2014.08.21 7310
385 [업데이트][HotFix] VCL BMP Buffer Overflow hotfix(취약점 보안패치) Humphery 2014.08.20 1556
384 코드 아카데미: 세션4. 푸쉬알림 (2014.8.19) 관리자 2014.08.20 1368