---
title: "앱 UI 디자인을 위한 새로운 기능"
date: "2016-04-13"
categories: 
  - "applications"
  - "development"
  - "mobile"
tags: 
  - "app-development"
  - "apps"
  - "mobiletogether"
  - "ui-design"
description: MobileTogether를 통해 앱 UI 디자인의 최신 트렌드를 살펴보세요. 이 플랫폼은 다양한 플랫폼에서 원활한 모바일 개발을 지원하기 위해 새로운 컨트롤과 향상된 기능을 제공합니다.
---
Status: #blog

Tags:  #app-development #apps #mobiletogether #ui-design

Categories: [low-code+no-code](/blog/ko/category/low-codeno-code.md) | [mobile-development](/blog/ko/category/mobile-development.md)
# 앱 UI 디자인을 위한 새로운 기능

"첫인상이 전부다"라는 말이 있듯이, 이 오랜 조언은 오늘날에도 여전히 유효하며, 특히 모바일 앱을 생각할 때도 마찬가지입니다. 성공적인 앱은 사용자의 연장선과 같으며, 아름답고 기능적인 사용자 인터페이스(UI)가 이러한 연결을 매끄럽게 만들어줍니다. [MobileTogether](https://www.altova.com/ko/mobiletogether.html)는 복잡한 프로그래밍 로직을 기반으로 하는 정교한 UI를 구축하는 것을 그 어느 때보다 쉽게 만들어줍니다. 최신 버전에서는 iOS, Android, Windows용 네이티브 앱을 위한 직관적인 인터페이스를 개발할 수 있는 옵션을 더욱 추가했습니다.

![모바일 앱 (또는 모바일 애플리케이션)](/blog/images/shutterstock_107715224.jpg)

<!--more-->

### 앱 사용자 인터페이스 디자인

MobileTogether의 UI 디자인은 매우 독특합니다. 하나의 레이아웃이 모든 플랫폼에 동시에 적용되며, iOS, Android, Windows Phone, 그리고 Windows 8/10 앱을 위한 코드를 생성할 수 있습니다. 모든 것이 하나의 디자인을 기반으로 이루어집니다. 사용자는 필요에 따라 운영체제별로 디자인을 조정할 수도 있고, 그대로 사용할 수도 있습니다. 어떤 방식을 선택하든, MobileTogether는 자동으로 각 운영체제와 기기의 크기에 맞춰 디자인 요소를 렌더링합니다. 작업 과정에서 내장된 시뮬레이터를 통해 UI가 각 플랫폼의 특징과 기기 수준에서 어떻게 표현될지 미리 확인할 수 있습니다

 

![앱 개발 시뮬레이터](/blog/images/app-simulator.png)

 

UI 디자인을 시작하려면, 내장된 다양한 컨트롤 중 하나를 디자인 영역으로 끌어다 놓고, 백엔드 데이터를 연결하고 백엔드 데이터 처리 방식을 정의하면 됩니다.

 

![모바일 앱 제어 기능](/blog/images/mobiletogether-controls.png)

 

### 새로운 사용자 인터페이스 컨트롤

새로운 제품 버전이 출시될 때마다, 개발자들의 요청을 반영하여 다양한 기능을 추가하고 있습니다. [최신 버전의 MobileTogether](https://www.altova.com/ko/whatsnew_mobiletogether.html)에는 30가지 이상의 새로운 기능이 추가되었으며, 그중 일부는 새로운 사용자 인터페이스(UI) 컨트롤입니다

#### **수직선**

새로운 수직 선 컨트롤은 기존의 수평 선 컨트롤과 함께 사용될 수 있으며, 아래 예시에서 보듯이 표에서 열 간의 구분을 명확히 하고 정렬을 강조하는 데 활용될 수 있습니다. 이는 수많은 새로운 기능 중 하나에 불과합니다 [모바일 앱에서 표를 생성하고 표시하는 기능](https://www.altova.com/blog/scrolling-tables-data-driven-mobile-apps/) 최근에 저희가 새롭게 선보인 제품/서비스입니다.

 

![이동식 테이블 ](/blog/images/landscape-50.png)

 

UI에서 원하는 위치에 컨트롤을 드래그하기만 하면 수직선을 쉽게 정의할 수 있습니다.

#### **슬라이더 컨트롤**

일반적으로 사용되는 가로 슬라이더 컨트롤은 사용자가 미리 정의된 최소값과 최대값 사이의 특정 값을 선택할 수 있도록 합니다. 포인터의 위치는 값의 눈금이 표시되지 않은 경우에도 사용자가 입력한 값을 대략적으로 나타냅니다. 예를 들어, 아래에 표시된 택배 앱에서 배송 중 발생한 손상 정도를 나타내는 슬라이더가 있습니다.

 

![가로 슬라이더](/blog/images/slider-1.png)

 

#### **이메일 보내기 및 공유 버튼**

MobileTogether 2.1에 새롭게 추가된 공유 기능과 함께, 개발자들은 이제 사용자가 쉽게 알아볼 수 있는 이메일 및 공유 아이콘을 가진 버튼을 정의할 수 있습니다. 아래는 동일한 앱이 iOS와 Android에서 어떻게 보이는지 보여줍니다. 주목할 점은 각 플랫폼에 맞는 기본 공유 및 이메일 아이콘이 자동으로 사용된다는 것입니다.

 

![이메일 보내기 및 공유 버튼](/blog/images/share-button.png)

 

이 새로운 기능들은 [MobileTogether](https://www.altova.com/ko/mobiletogether.html)에서 데이터 중심의 모바일 앱을 위한 아름다운 사용자 인터페이스(UI)를 구축하는 기존 기능에 추가됩니다. 이 프레임워크가 제공하는 고도화된 백엔드 프로그래밍 기능과 결합하면, 귀사의 모바일 앱이 최종 사용자에게 최고의 만족감을 선사할 것입니다.

 

MobileTogether Designer는 무료로 제공됩니다 [지금 바로 사용해 보세요](https://www.altova.com/ko/download/mobiletogether.html)!