다양한 스타일 시트를 활용한 유연한 앱 사용자 인터페이스 디자인

크로스 플랫폼 모바일 개발 프레임워크인 MobileTogether와 같은 도구를 사용하는 것은 매우 좋은 선택입니다 네이티브 앱 개발, 왜냐하면 디자인 환경은 각 운영 체제의 고유한 스타일을 활용하여 앱의 사용자 인터페이스를 올바르게 표시하도록 설계되어 있습니다. 따라서 개발자는 단 하나의 디자인만 만들면 됩니다.

이를 통해 앱 개발자는 모든 사용자를 위한 정교하고 데이터 중심적인 앱을 매우 빠르게 개발할 수 있습니다. 이러한 작업을 지원하기 위해 MobileTogether는 RMAD(Rapid Mobile Application Development) 방식을 채택하고 있으며, 아름다운 사용자 경험(UX)을 디자인할 수 있는 다양한 옵션을 제공합니다. 특히, 앱 UI 디자인의 다양한 수준에서 몇 번의 클릭만으로 스타일을 사용자 정의하고 적용할 수 있는 다단계 스타일 시트를 제공하여 사용자 경험을 향상시킵니다.

아름다운 사용자 인터페이스(UI)를 디자인하세요

MobileTogether 버전 3.0에서 처음 도입된 다단계 스타일 시트는 앱 개발자가 프로젝트, 페이지, 테이블, 컨트롤 수준에서 적용할 수 있는 전역 스타일을 정의할 수 있도록 합니다. 이를 통해 앱 개발 프로젝트 전반에 걸쳐 여러 수준에서 활용할 수 있는 스타일을 한 곳에서 관리할 수 있습니다.

스타일을 사용자 정의해야 하는 이유는 무엇일까요? 먼저, 이 기능은 선택 사항임을 강조하고 싶습니다. MobileTogether는 각 운영 체제(iOS, Android, Windows 등)에 대해 기본 스타일, 버튼 디자인 등을 자동으로 적용하므로, 별도의 수정 없이도 깔끔하고 기능적인 사용자 인터페이스를 구축할 수 있습니다. 하지만 때로는 기업의 스타일 가이드라인을 준수하거나, 특수한 기능을 구현하거나, 독창적인 디자인을 적용하기 위해 사용자 정의 스타일이 필요할 수 있습니다. MobileTogether의 새로운 다단계 스타일 시트는 이러한 작업을 더 쉽고 빠르게 수행할 수 있도록 설계되었습니다.

시작하려면, 프로젝트 메뉴에서 "스타일 시트" 대화 상자를 엽니다. 이를 통해 두 가지 유형의 스타일 시트를 만들 수 있습니다: "프로젝트" 스타일 시트와 "사용자 정의" 스타일 시트입니다.

프로젝트 스타일 시트에서는 프로젝트 전체에 적용될 기본적인 사용자 정의 설정을 정의합니다. 여기서 정의하는 스타일은 프로젝트 전체에 자동으로 적용됩니다. 따라서 모든 버튼의 디자인, 모든 텍스트 요소의 글꼴 크기, 또는 프로젝트 전체의 배경색을 변경하고 싶을 때 이 기능을 활용하면 편리합니다.

두 번째 유형은 사용자가 직접 만든 스타일 시트이며, 개발자가 이름을 지정하고 필요에 따라 개별 페이지, 테이블, 컨트롤에 적용할 수 있습니다. 다시 말해, 이러한 스타일은 프로젝트 전체에 적용되지 않습니다. 아래 스크린샷에서 "MyStyles"라는 이름으로 제가 만든 스타일 시트가 있는데, 이 스타일 시트는 버튼, 차트, 레이블 등에 대한 스타일을 정의합니다.

스타일 시트 대화 상자의 오른쪽 패널에서 스타일을 정의할 때, 고정된 속성 값을 선택하거나 입력할 수 있으며, 또는 속성 값으로 평가되는 XPath 표현식을 입력할 수도 있습니다. 동적 할당의 예로는, 최종 사용자의 모바일 기기의 화면 너비와 같은 특정 기준, 또는 사용자 설정(예: 앱 내 설정 페이지에서 사용자가 글꼴 크기를 조정할 수 있도록 하고, 해당 글꼴 크기를 모든 텍스트 항목에 적용)에 따라 속성 값을 변경하는 것이 있습니다.

아래의 MyStyles 스타일 시트에서는 XPath를 사용하여 차트의 높이와 너비를 동적으로 조정했습니다. 이를 통해 사용자의 현재 기기에 최적화된 크기로 차트를 표시할 수 있습니다.

사용자가 직접 만든 스타일 시트를 원하는 만큼 정의하여, 다양한 요소의 서식 지정 옵션을 제공할 수 있습니다.

앱 개발 과정에서, 디자인 요소에 사용자 정의 스타일 시트를 적용하는 것은 "스타일 및 속성" 창에서 스타일 시트 이름을 선택하는 것만큼 간단합니다.

또한, XPath를 사용하여 스타일 시트 선택을 동적으로 지정할 수 있습니다. 예를 들어, 현재 모바일 기기의 종류에 따라 스타일 시트를 선택하도록 설정할 수 있습니다. XPath 표현식을 사용하여 사용자가 만든 스타일 시트를 선택하는 주요 장점은 선택 과정을 동적인 환경 조건에 따라 변경할 수 있다는 것입니다. 예를 들어, iOS 기기에는 한 가지 스타일 시트를, 다른 모든 기기에는 다른 스타일 시트를 적용하고 싶다면, 다음과 같은 XPath 표현식을 사용할 수 있습니다: "if ($MT_iOS=true()) then 'iOSStyleSheet' else 'GeneralStyleSheet'."

특정 페이지나 요소에 대해 사용자가 직접 만든 스타일 시트를 지정하면, 해당 프로젝트의 스타일 시트에 정의된 값보다 우선 적용됩니다. 따라서 전체적인 스타일뿐만 아니라 세부적인 부분까지도 조정할 수 있습니다.

다단계 스타일 시트는 엄청난 시간을 절약해 주며, 모든 플랫폼에서 앱의 디자인과 사용자 경험을 맞춤 설정하는 데 탁월한 유연성을 제공합니다. 예를 들어, 서론에서 언급했듯이 iOS, Android, Windows 등 모든 플랫폼에서 앱의 버튼 디자인을 통일해야 하는 경우 (즉, 각 플랫폼의 기본 버튼 디자인 대신), 이제 프로젝트당 한 번 (또는 필요에 따라 다른 수준에서)만 해당 설정을 정의하면 됩니다.

무료인 MobileTogether Designer를 사용하여 앱을 개발해 보시고, 이 기능을 직접 체험해 보세요. (앱 개발 방법)