VM, 원격 PC 연결 클라이언트 개발에 참고할 만한 프로젝트들

이 글의 내용은, 가상화 프로젝트를 하면서 윈도, 안드로이드 앱을 개발하면서 사용하거나 살펴본 오픈소스 및 바이너리에 대한 정리이다. VM(가상화된 PC)이나 원격 PC에 접근하는데 많이 알려진 RDP(Remote Desktop Protocol), SPICE(Simple Protocol for Independent Computing Environments), 그리고 VNC(Virtual Network Computing) 프로토콜을 주로 사용한다. 이 프로토콜은 원격 PC 화면을 스트리밍하기 위해서 개발되었다.

* RDP
RDP의 경우에는 마이크로소프트에서 개발한 프로토콜이고, 거의 모든 윈도가 이 프로토콜을 구현한 클라이언트인 mstsc.exe가 번들로 배포된다. 그리고, 윈도 7에서 성능을 향상한 RemoteFX와 같은 기능을 사용하기 위해서는 별도로 업데이트할 수 있다.
– 프로토콜 스펙 : https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-rdpbcgr/5073f4ed-1e93-45e1-b039-6e30c385867c

* SPICE 프로토콜
SPICE 프로토콜의 경우에는 오픈소스 프로젝트이다. 이 프로젝트는 레드햇(RedHat, 2007년에 Qumranet 회사 인수)에서 소스를 오픈 했다.
– SPICE 프로토콜 스펙 : https://www.spice-space.org/static/docs/spice_protocol.pdf

* VNC 프로토콜
VNC 프로토콜의 경우에는 성능 문제가 있어서 제외했다.

레드햇이 가상화 솔루션을 오픈소스로 열어서 oVirt(https://ovirt.org/)라는 프로젝트가 진행중이고, 오픈소스 가상화 솔루션 중에서는 가장 발전한 프로젝트이다. 그리고, 레드햇에서 제품으로 판매하는 가상화 솔루션도 oVirt를 기반하고 있다.

이제 이 프로토콜을 기반으로 개발하는 데 도움이 되는 프로젝트를 살펴보자.

* HTML 클라이언트
웹 소켓을 사용해서 원격 PC의 화면을 스트리밍한다. 아래 프로젝트를 기반으로 웹 앱을 개발할 수 있다.

– Guacamole : RDP와 VNC를 지원하는 아파치 프로젝트로, https://guacamole.apache.org/ 에서 확인할 수 있다.
– SpiceHtml5 : SPICE를 스트리밍하는 자바스크립트 프로젝트로, https://github.com/freedesktop/spice-html5 에서 확인할 수 있다.
– Myrtille : .NET 기반의 오픈소스 프로젝트로, https://cedrozor.github.io/myrtille 에서 확인할 수 있다.

* 윈도
윈도에서 RDP와 SPICE를 지원하는 프로젝트아래의 프로젝트를 사용해서 윈도에서 RDP와 SPICE를 지원할 수 있다.
– mstsc : 윈도 내장 RDP 클라이언트이다. 이 툴은 mstsc.exe 실행 옵션이나 rdp 파일을 사용하면 된다.
– virt viewer : 윈도에서 SPICE 서버에 연결하도록 지원한다. 이 툴은 https://releases.pagure.org/virt-viewer/ 에서 다운로드할 수 있고, https://pagure.io/virt-viewer/blob/master/f/NEWS 에서 Changelogs를 확인할 수 있다.
– FreeRDP : RDP 프로토콜을 지원하는 FreeRDP 프로젝트로, 소스는 https://github.com/FreeRDP/FreeRDP/tree/master/client/Windows 에서 확인할 수 있다.

* 맥
아래 프로젝트로 맥 클라이언트를 개발할 수 있다.
– FreeRDP : RDP 프로토콜을 지원하는 FreeRDP 프로젝트로, 소스는 https://github.com/FreeRDP/FreeRDP/tree/master/client/Mac 에서 확인할 수 있다.

* 안드로이드
안드로이드에서 RDP와 SPICE를 지원하는데 사용할 수 있는 프로젝트들이다.

– freerdp : RDP 기반의 오픈소스 프로젝트로, https://github.com/FreeRDP/FreeRDP/tree/master/client/Android 에서 확인할 수 있다.
– flexVDI : flexVDI에서 오픈한 SPICE 프로젝트로, https://github.com/flexVDI/launcher-mobile 에서 확인할 수 있다.

– VirtualDesktop : SPICE 프로토콜을 지원하는 안드로이드 앱 프로젝트, https://github.com/pisceslj/VirtualDesktop 에서 확인할 수 있다.

– oVirt 매니저 앱 : oVirt 서버에 접근해서 관리할 수 있는 기능을 제공하는 안드로이드 앱으로, https://github.com/oVirt/moVirt 에서 확인할 수 있다.

* iOS
iOS 에서 RDP와 SPICE를 지원하기 위해서 사용할 수 있는 프로젝트들이다.
– freerdp : RDP 기반의 오픈 소스 프로젝트로, https://github.com/FreeRDP/FreeRDP/tree/master/client/iOS 에서 확인할 수 있다.
– flexVDI : flexVDI에서 오픈한 SPICE iOS 오픈소스 앱으로, https://github.com/flexVDI/launcher-mobile 에서 확인할 수 있다.

개인적으로 RDP와 SPICE 위주로 윈도와 안드로이드 앱을 개발해 본 경험으로, 원격 프로토콜을 성능 관점으로 보면 RDP > SPICE > VNC 순이다. SPICE의 경우에는 꽤 괜찮은 성능을 보여주지만, 그에 반해서 리소스(클라이언트에서 서버에 다수의 소켓을 열어서 성능을 개선)를 많이 사용한다. 결론으로 원격 프로토콜은 RDP 쵝오 !!

* Reference
https://en.wikipedia.org/wiki/Simple_Protocol_for_Independent_Computing_Environments

안드로이드 앱이 동작하는 폼 팩터(Form Factor) 확인 방법

폼 팩터(Form Factor)의 정의를 위키피디아에서 살펴보면 아래와 같다.

컴퓨터 시스템의 각 부품의 물리적 치수의 형태를 의미한다.

즉, 소프트웨어가 동작하는 기기의 형태를 말하는 것이다. 안드로이드 적용범위가 확대되면서, 안드로이드 앱이 실행할 수 있는 하드웨어 기기가 많아졌다. 예로, 크롬북이나 TV등을 예로 들 수 있다.

최근에 안드로이드 앱을 크롬북과 삼성 덱스(DEX)의 UI/UX에 어울리도록 작업을 하면서 특정 기능(키보드 등)은 모바일/태블릿에서만 필요하다. 그래서 앱이 동작하는 기기의 정보를 확인해야 했고, 아래의 코드로 해결을 했다.

아래 코드는 구글 TalkBack 깃헙 사이트의 https://github.com/google/talkback/blob/master/utils/src/main/java/FormFactorUtils.java 코드에 삼성 덱스(DEX)를 확인하는 코드를 추가했다.

아래의 ARC는 App Runtime for Chrome의 줄임말으로 폼 팩터가 크롬북이라는 것을 알 수 있다.

import android.app.UiModeManager;
import android.content.Context;
import android.content.pm.PackageManager;
import android.content.res.Configuration;
import android.os.Build;

public class FormFactorUtils {
	private static final int FORM_FACTOR_PHONE_OR_TABLET = 0;
	private static final int FORM_FACTOR_WATCH = 1;
	private static final int FORM_FACTOR_TV = 2;
	private static final int FORM_FACTOR_ARC = 3;

	private static final int FORM_FACTOR_SAMSUNG_DEX = 100;

	private static final String ARC_DEVICE_PATTERN = ".+_cheets|cheets_.+";

	private static FormFactorUtils sInstance;

	private final int mFormFactor;
	private final boolean mHasAccessibilityShortcut;

	private FormFactorUtils(final Context context) {
		// Find device type.
		if (context.getApplicationContext()
				.getPackageManager()
				.hasSystemFeature(PackageManager.FEATURE_WATCH)) {
			mFormFactor = FORM_FACTOR_WATCH;
		} else if (isContextTelevision(context)) {
			mFormFactor = FORM_FACTOR_TV;
		} else if (Build.DEVICE != null && Build.DEVICE.matches(ARC_DEVICE_PATTERN)) {
			mFormFactor = FORM_FACTOR_ARC;
		} else if(isContextDex(context)) {
			mFormFactor = FORM_FACTOR_SAMSUNG_DEX;
		} else {
			mFormFactor = FORM_FACTOR_PHONE_OR_TABLET;
		}

		// Find whether device supports accessibility shortcut.
		mHasAccessibilityShortcut = (BuildVersionUtils.isAtLeastO() && mFormFactor == FORM_FACTOR_PHONE_OR_TABLET);
	}

	/** @return an instance of this Singleton. */
	public static synchronized FormFactorUtils getInstance(final Context context) {
		if (sInstance == null) {
			sInstance = new FormFactorUtils(context);
		}
		return sInstance;
	}

	/** Return the cached version of the isWatch. */
	public boolean isWatch() {
		return mFormFactor == FORM_FACTOR_WATCH;
	}

	public boolean isArc() {
		return mFormFactor == FORM_FACTOR_ARC;
	}

	public boolean isTv() {
		return mFormFactor == FORM_FACTOR_TV;
	}

	public boolean isPhoneOrTablet() {
		return mFormFactor == FORM_FACTOR_PHONE_OR_TABLET;
	}

	public boolean isDex() {
		return mFormFactor == FORM_FACTOR_SAMSUNG_DEX;
	}

	public boolean hasAccessibilityShortcut() {
		return mHasAccessibilityShortcut;
	}

	public static boolean useSpeakPasswordsServicePref() {
		return BuildVersionUtils.isAtLeastO();
	}

	public static boolean isContextTelevision(Context context) {
		if (context == null) {
			return false;
		}

		UiModeManager modeManager = (UiModeManager) context.getSystemService(Context.UI_MODE_SERVICE);
		return modeManager != null
				&& modeManager.getCurrentModeType() == Configuration.UI_MODE_TYPE_TELEVISION;
	}

	private static boolean isContextDex(Context context) {
		if (context == null) {
			return false;
		}

		try {
			Configuration config = context.getResources().getConfiguration();
			Class configClass = config.getClass();
			if (configClass.getField("SEM_DESKTOP_MODE_ENABLED").getInt(configClass)
					== configClass.getField("semDesktopModeEnabled").getInt(config)) {
				return true;
			}
		} catch (Exception e) {
			// ignore
		}

		return false;
	}
}

웹뷰(WebView)에 OnClick 이벤트 추가하기

웹뷰(WebView)는 View를 상속받아서, 뷰에서 클릭 이벤트를 처리할 수 있도록 OnClickListener를 등록할 수 있다. 하지만, 웹뷰는 OnClickListener로 이벤트를 알려 주지 않는다. 그래서, OnClick 이벤트를 처리하기 위해서는 이 이벤트에 대한 처리를 직접해야 한다.

웹뷰의 OnClick 이벤트를 캐치하기 위해서는 OnTouch 이벤트에서 조건에 맞는 경우에 OnClick으로 간주하면 된다.

조건은 아래의 코드에서 볼 수 있듯이 다음과 같다.
– 클릭시 1초이내(1초를 넘어가면 롱클릭)에 손가락이 떨어져야 한다.
– 그리고 손가락의 이동이 15dp이내이어야 한다. 그 이상 멀어진 경우 드레그를 했다고 간주한다.

   
import android.content.Context;
import android.view.MotionEvent;
import android.view.View;

public class OnClickWithOnTouchListener implements View.OnTouchListener {
	public interface OnClickListener {
		void onClick();
	}

	/**
	 * Max allowed duration for a "click", in milliseconds.
	 */
	static final int MAX_CLICK_DURATION = 1000;
	/**
	 * Max allowed distance to move during a "click", in DP.
	 */
	static final int MAX_CLICK_DISTANCE = 15;

	private Context mContext;
	private OnClickListener mClickListener;

	private long pressStartTime;
	private float pressedX;
	private float pressedY;
	private boolean stayedWithinClickDistance;

	public OnClickWithOnTouchListener(Context context, OnClickListener clickListener) {
		this.mContext = context;
		this.mClickListener = clickListener;
	}

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		if(mClickListener == null) {
			return false;
		}

		int eventAction = event.getAction();
		if(eventAction == MotionEvent.ACTION_DOWN) {
			pressStartTime = System.currentTimeMillis();
			pressedX = event.getX();
			pressedY = event.getY();
			stayedWithinClickDistance = true;
		} else if(eventAction == MotionEvent.ACTION_MOVE) {
			float distance = distance(pressedX, pressedY, event.getX(), event.getY());
			if (stayedWithinClickDistance && distance > MAX_CLICK_DISTANCE) {
				stayedWithinClickDistance = false;
			}
		} else if(eventAction == MotionEvent.ACTION_UP) {
			long pressDuration = System.currentTimeMillis() - pressStartTime;
			if (pressDuration < MAX_CLICK_DURATION && stayedWithinClickDistance) {
				mClickListener.onClick();
			}
		}

		return false;
	}

	private float distance(float x1, float y1, float x2, float y2) {
		float dx = x1 - x2;
		float dy = y1 - y2;
		float distanceInPx = (float) Math.sqrt(dx * dx + dy * dy);
		return pxToDp(mContext, distanceInPx);
	}

	public static float pxToDp(Context context, float px) {
		if(context == null) {
			return 0f;
		}

		return px / context.getResources().getDisplayMetrics().density;
	}
}

이제 위 코드를 사용해서 웹뷰의 OnClick 이벤트를 처리해 보자.

  
	mWebview.setOnTouchListener(new OnClickWithOnTouchListener(this, new OnClickWithOnTouchListener.OnClickListener() {
		@Override
		public void onClick() {
			// onclick 이벤트 처리
		}
	}));

* 레퍼런스
- https://stackoverflow.com/questions/9965695/how-to-distinguish-between-move-and-click-in-ontouchevent/17911861#17911861

FileProvider 사용시 Manifest 중복 문제

안드로이드에서 파일을 공유하기 위해서는 안드로이드 7.0(Nougat / API 24)이전에는 “file://” uri를 사용했다. 그러나 안드로이드 7.0 이후부터는 “content://” uri를 사용해야 하고, uri에 포함된 파일은 엑세스 권한을 부여하고, FileProvider를 사용해야 한다.

일반적인 코드는 아래와 같다.

   

	
	

그래서, 앱에서 파일 공유 기능을 구현하고, 의존 라이브러리가 FileProvider를 사용하면 아래의 에러를 보게된다.

Manifest merger failed with multiple errors, see logs

이 에러를 확인하기 위해서 Merged Manifest 탭을 보니, 맨 아래에 아래의 에러 메시지가 보인다.

Merging Errors:

Error: Attribute provider#android.support.v4.content.FileProvider@authorities value=(net.sjava.barcode.fileprovider) from AndroidManifest.xml:83:13-65 is also present at AndroidManifest.xml:14:13-60 value=(net.sjava.barcode.provider). Suggestion: add ‘tools:replace=”android:authorities”‘ to element at AndroidManifest.xml:81:9-91:20 to override. app main manifest (this file), line 82

Error: Attribute meta-data#android.support.FILE_PROVIDER_PATHS@resource value=(@xml/file_provider_paths) from AndroidManifest.xml:89:17-60 is also present at AndroidManifest.xml:19:17-55 value=(@xml/provider_paths). Suggestion: add ‘tools:replace=”android:resource”‘ to element at AndroidManifest.xml:87:13-90:20 to override. app main manifest (this file), line 88

위 메시지는 ‘tools:replace=”android:authorities”‘를 요소에 추가하고, ‘tools:replace=”android:resource”‘는 요소에 추가하면 된다고 한다. 그래서 안드로이드 스튜디오가 알려주는 대로 이 두 개의 속성을 추가하면 컴파일 에러가 발생하지 않는다.

이 설정은 아래와 같다.

   

	

마지막으로 위 코드처럼 “tools:replace”는 늘 포함시키면 좋겠다.

안드로이드 외부 라이브러리 뷰 스타일 변경하기

안드로이드는 뷰의 크기, 색 등의 각종 스타일과 관련된 설정은 외부 파일(dimens.xml, colors.xml 등)에 저장해서, 한번에 많은 뷰의 스타일을 변경할 수 있도록 한다. 이 방법을 사용해서 테마나 스타일을 쉽게 변경할 수 있게 한다.

만약 앱과 라이브러리에서 동일한 속성 값을 사용한다면, 앱에서 정의한 속성을 사용한다. 그래서, 이 방법을 사용해서 외부 라이브러리 뷰의 스타일을 변경하는 방법을 살펴보겠다. 대부분의 라이브러리는 뷰의 속성을 외부 파일에 정의해서 릴리즈를 하지만, 속성값을 하드코딩한 경우에는 스타일 변경이 쉽지 않다.

라이브러리의 스타일을 변경하는 예제로, AboutLibraries(https://github.com/mikepenz/AboutLibraries)를 사용해 보자. 이 라이브러리가 사용하는 각종 스타일 값들을 살펴보고, 레이아웃에서 정의한 값들을 사용하는 부분과 이 정의 값을 변경해서 UI를 변경하는 예제를 살펴보자.

1. 스타일(styles.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/styles.xml 에서 확인 할 수 있다. 이 파일에서 앱이나 라이브러리의 스타일을 확인 할 수 있다. 아래는 스타일 파일에서 기본 스타일로 정의한 부분이다. 다른 앱들과 거의 비슷하다.

   


그러나, “AboutLibraries specific values” 주석아래를 살펴보면, item name=”about_libraries_window_background” 와 같이 커스텀 값이라는 것을 알 수 있다. 커스텀 값은 속성 파일(attrs.xml)에 정의해서 사용 할 수 있다. 속성 파일을 살펴보자.

2. 속성(attr.xml)

이 파일에서는 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/attrs.xml 에서 확인 할 수 있다. 이 파일은 안드로이드 앱이나 라이브러리에서 커스텀으로 사용하는 요소나 속성을 정의하는 용도이다. 이 내용은 XML 스키마를 정의해 봤다면 쉽게 이해가 갈 것이다. 하지만, 안드로이드에서 읽어들이는 값들이 정의되어 있기에, 이름과 포맷만 기술하게 되어 있긴 하다. 아래는 라이브러리에서 커스텀으로 정의한 속성의 일부이다.

 

 	
 	
 	
 	
 	
 	
 	
 	
 	
 	

위 속성에서 “about_libraries_window_background”는 색이고 참조(reference)라는 것을 알 수 있다. 다음으로 색을 살펴보자.

3. 색(colors.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/colors.xml 에서 확인 할 수 있다. 아래는 라이브러리가 사용하려고 정의한 색들 중에 일부이다.

 

#ECECEC
#FAFAFA
#212121
#727272
#212121
#AAA
#DADADA

색의 이름이 속성 파일에 정의한 이름으로 요소는 color로 시작하는 것을 알 수 있다.

4. 크기 정의(dimens.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/dimen.xml 에서 확인 할 수 있다. 이 파일은 안드로이드에서 뷰의 마진, 여백, 폰트 크기 등의 값을 정의한다. 이 라이브러리의 크기 값들은 아래와 같다.

 


12dp
72dp
20sp
14sp

16dp
16dp

이제 위 속성을 변경하지 않은 화면은 아래와 같다.

다음으로 속성을 변경하면, 어떤 UI가 변경되는지 살펴보기 위해서 간단하게 레이아웃 파일을 살펴보자.

5. 레이아웃 확인

이제 레이아웃 파일에서 개별 뷰의 스타일이 위에서 사용하는 속성을 사용하는지, 그리고 이 속성을 변경해서 뷰를 수정해 보자.

– 목록 컨테이너
목록 컨테이너는 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/fragment_opensource.xml 에 정의되어 있다. 목록을 보여주는 컨테이너로 리사이클러뷰(RecyclerView)를 사용하고, 패딩 값으로 dimens.xml 파일에 정의한 속성 값을 사용하는 것을 알 수 있다. 이 속성 값을 변경해서 카드 레이아웃이 조금 좁거나 넓게 보이게 할 수 있다.

 

– 헤더 부분
목록의 헤더 부분(앱 아이콘, 이름, 버전 정보 등)은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/listheader_opensource.xml 에 정의되어 있다. 아래는 이 파일에서 앱 아이콘, 이름, 버전을 보여주는 일부 뷰이다. 여기에서도 이미지 크기는 dimens.xml 파일에 정의되어 있고, 앱 이름과 버전도 정의한 것을 알 수 있다.

 



– 항목(Item) 부분
목록의 항목은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/listitem_opensource.xml 에 정의되어 있다. 아래는 라이브러리 이름과 개발자 이름을 보여주는 부분이다. 여기도 목록의 헤더와 같이 textSize를 dimen.xml 에서 정의한 값으로 사용한다.

 


6, UI 변경 예제

이제 앱에서 텍스트 크기를 변경해서, 이 라이브러리 뷰가 사용하는 텍스트뷰의 스타일을 변경해 보자. 개발중인 앱의 앱 모듈에서 크기 정의 파일(/app/src/main/res/values/dimens.xml)을 열어서 아래의 값을 추가해 보자.

 
16sp
16sp

위 속성을 추가한 뒤의 결과는 아래와 같다.

다음으로 위에서 정의한 속성 파일의 사용자 정의 색을 변경해 보자. 개발중인 앱의 앱 모듈에서 크기 정의 파일(/app/src/main/res/values/color.xml)을 열어서 아래의 값을 추가해 보자.

 
#0368A1
#FBBB00

위에서 변경한 색이 어떻게 적용되는지 확인하려면, 라이브러리 코드를 보면 쉽게 확인할 수 있다. 예로, 헤더의 앱 이름 색을 변경하는 코드는  https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/java/com/mikepenz/aboutlibraries/ui/item/HeaderItem.java 에서 알 수 있다. 이 클래스에서 아래의 코드로 앱 이름 텍스트뷰의 텍스트 색을 변경하는 것을 알 수 있다.

aboutAppName = (TextView) headerView.findViewById(R.id.aboutName);
aboutAppName.setTextColor(UIUtils.getThemeColorFromAttrOrRes(headerView.getContext(), R.attr.about_libraries_title_description, R.color.about_libraries_title_description));

뷰를 가지는 대부분의 안드로이드 라이브러리는 위와 거의 비슷한 구조이다. 그래서 외부 라이브러리를 개발하는 앱의 스타일에 맞춰서 사용하려면, 이 글의 과정으로 쉽게 스타일을 변경할 수 있다.