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


안드로이드폰의 다양성은 수많은 제조사의 숫자가 대변하구요. 아이폰의 경우도 전통적인 작은화면(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 7510
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 7263
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 9671
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 14741
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 16465
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 12232
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 31589
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 167179
400 [온라인 세미나 발표자료] RAD Studio XE7! 관리자 2014.09.17 1599
399 [기술문서] 델파이와 유니코드 관리자 2014.09.16 1890
398 [기술문서] 델파이XE2와 파이어몽키 관리자 2014.09.16 1616
397 [기술문서] Delphi 코딩 스타일과 아키텍처(Delphi 2009의 언어 기능 리뷰) 관리자 2014.09.16 1491
396 "Could not load SSL library." 오류 대응(XE7: BaaS, RESTClient, DataSnap) [1] Humphery 2014.09.12 14057
395 이 달의 기술자료 - 2014년 10월 file 험프리 2014.09.12 4788
394 안드로이드에서 NFC 연동 방법 Humphery 2014.09.12 3037
393 [Android] 폰번호 가져오기 [1] 타락천사 2014.09.05 36647
392 [세미나 자료] RAD Studio XE7 출시 세미나(2014.9.2/3) file 관리자 2014.09.05 1258
391 RAD Studio 최신 데모 소스코드 다운로드 Humphery 2014.09.04 4157
390 [기술문서] 실전 DataSnap! [2] 관리자 2014.09.02 2238
389 [기술문서] RAD Studio 라이브바인딩(LiveBindings) 이해하기 관리자 2014.09.02 2326
388 델파이 튜토리얼 자습서 이용 안내 관리자 2014.09.01 71832
387 [Step UP! 마이그레이션] RAD 업그레이드 마이그레이션 기술 브리핑 자료(2014.8.21) 관리자 2014.08.22 1942
386 [마이그레이션] 유니코드 적용시 검토할 사항들 file 험프리 2014.08.21 6349
385 [업데이트][HotFix] VCL BMP Buffer Overflow hotfix(취약점 보안패치) Humphery 2014.08.20 1464
384 코드 아카데미: 세션4. 푸쉬알림 (2014.8.19) 관리자 2014.08.20 1271
383 [마이그레이션] 컴파일러 버젼 [1] 험프리 2014.08.18 1641
382 코드 아카데미: 세션3. 클라우드 기반 스토리지 (2014.8.12) 관리자 2014.08.18 1548
381 델파이 실행 시 EditorLineEnds.ttr 파일을 만들 수 없다는 오류 메시지 원인 [1] Humphery 2014.08.15 4551