안드로이드를 쓰다보면 홈화면에 뷰를 띄우는걸 종종 볼 수 있습니다. 대표적으로 네이버앱의 퀵메뉴나 페이스북 메신저의 챗헤드가 있죠. 퀵메뉴는 네이버앱의 각 메뉴로 바로갈 수 있는 런처 역할을, 챗헤드는 앱으로 진입하지 않고 홈화면에서 바로 대화를 이어갈 수 있도록 해줍니다. 이처럼 홈화면은 사용자가 홈버튼을 누르거나 단말을 켰을때 가장 먼저 보는 기본 화면이기에 접근성이 높아 이를 잘 이용하는 것은 매우 중요합니다.

오늘은 이렇게 홈스크린에 직접 뷰를 띄우는 방법에 대해 공유하려고 합니다. 이 방식은 __윈도우(Window)__를 직접 생성하고 여기에 뷰를 넣는 방식입니다. 안드로이드에서는 홈 화면을 이용할 수 있도록 위젯을 제공하지만 기본으로 제공하는 위젯은 크기와 위치가 제한됩니다. 하지만 이 방법은 위젯과는 달리 위치와 크기를 자유롭게 조절할 수 있기 때문에 활용도가 매우 높습니다.

윈도우란

아까 잠시 언급했듯이 이 방법은 직접 윈도우를 생성하고 뷰를 넣는 방식입니다. 그래서 자세한 방법을 설명하기 전에 윈도우에 대해 간단히 알고 넘어가야합니다.

윈도우는 화면에 UI를 그리기 위한 Surface를 갖습니다. 즉 화면에 뭔가 그려지고 있다는 것은 윈도우가 있는 것입니다. 또한 윈도우는 사용자와의 인터렉션을 위한 키, 터치 이벤트 등을 처리할 수 있는 컴포넌트입니다.

기본적으로 액티비티를 생성하면 액티비티는 윈도우를 갖습니다. 또한 아래 그림과 같이 토스트, 스테이터스 바, 다이얼로그등도 개별적인 윈도우를 가집니다.

토스트, 스테이터스바	다이얼로그	액티비티

윈도우 타입과 이벤트 처리

윈도우의 목적과 종류에 따라 윈도우는 서로 다른 타입을 가집니다. 예를들어 액티비티에 주로 사용되는 타입(TYPE_BASE_APPLICATION)의 윈도우는 키, 터치 이벤트를 받지만 토스트에 사용되는 타입(TYPE_TOAST)의 윈도우는 키, 터치 이벤트를 받지 못합니다. 이러한 이벤트는 윈도우의 타입에 따라 다르고 윈도우 생성 시 플래그를 통해 어느정도 제어가 가능합니다.

우선순위

윈도우의 타입에 따라 우선순위가 달라집니다. 우선순위는 화면에 그려지는 순서를 결정하는데 우선순위가 높을수록 나중에 그려져서 우선순위가 낮은 윈도우를 덮을 수 있습니다. 가령 토스트의 윈도우 타입인 TYPE_TOAST는 액티비티가 사용하는 TYPE_BASE_APPLICATION보다 우선순위가 높기때문에 액티비티에서 토스트를 띄우면 토스트가 액티비티 위에 그려지게 됩니다. 우선순위는 안드로이드 버전에 따라 조금씩 다릅니다.

구현하기

홈스크린에 뷰를 넣는 방법은 아래와 같습니다.

1. 원하는 뷰를 생성한다.
2. 적절한 타입과 속성을 갖는 윈도우 레이아웃 파라미터(WindowManager.LayoutParam)을 생성한다.
3. 윈도우 매니저의 addView(View, ViewGroup.LayoutParams params)을 이용하여 윈도우를 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// 1. 뷰 생성
ImageView floatingView = new ImageView(this);
floatingView.setImageResource(R.drawable.ic_pholar);

// 2. 윈도우 레이아웃 파라미터 생성 및 설정
mWindowLp = new WindowManager.LayoutParams(WindowManager.LayoutParams.TYPE_PHONE);
mWindowLp.width  = WindowManager.LayoutParams.WRAP_CONTENT;
mWindowLp.height = WindowManager.LayoutParams.WRAP_CONTENT;
mWindowLp.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;

// 3. 윈도우 생성
mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
mWindowManager.addView(floatingView, mWindowLp);

홈화면과 일반 액티비티는 윈도우 타입이 TYPE_BASE_APPLICATION 입니다. 반면 위 코드에서 사용한 TYPE_PHONE은 TYPE_BASE_APPLICATION이기 때문에 홈화면이나 액티비티 보다 우선순위가 높아 홈 또는 액티비티 위에 그려집니다. 또한 TYPE_PHONE는 status_bar위로 올라갈 수는 없으며 터치 이벤트를 받을 수 있습니다.

TYPE_PHONE은 아래 권한이 필요합니다.

android.permission.SYSTEM_ALERT_WINDOW

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE는 현재 윈도우보다 하위 윈도우가 터치 이벤트를 받을 수 있도록 하는 플래그 입니다. 이걸 세팅하지 않으면 생성한 윈도우보다 낮은 순위를 갖는 홈이나 액티비티가 터치 이벤트를 받을 수 없습니다.

마지막에 보면 윈도우 매니저를 통해 윈도우를 생성하고 있습니다. 윈도우는 안드로이드의 윈도우매니저를 통해서 접근이 가능합니다. addView()를 통해 윈도우를 추가하였지만 삭제할때는 removeView()를 하면됩니다. 윈도우의 크기나 위치가 변경 되었다면 updateViewLayout()를 통해 변경사항을 적용해줍니다.

윈도우의 라이프사이클이 생성한 곳에 따라 달라집니다. 액티비티에서 생성하면 액티비티가 종료될때 사라지므로 서비스에서 생성하도록 합니다. 또한 서비스가 종료될때는 윈도우를 제거하도록 처리해주는 것도 중요합니다.

아래 이미지는 위의 코드로 생성한 홈 위젯입니다.

드래깅 구현하기

여기에 퀵메뉴나 챗헤드 처럼 자유롭게 움직일 수 있도록 하고 싶다면 아래와 같이 터치 이벤트를 처리해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

floatingView.setOnTouchListener(new OnTouchListener() {
	@Override
   		public boolean onTouch(View v, MotionEvent ev) {
    	switch (ev.getAction()) {
        		case MotionEvent.ACTION_DOWN:
             	mStartingX = ev.getRawX();
               	mStartingY = ev.getRawY();

               	mWidgetStartingX = mWindowLp.x;
               	mWidgetStartingY = mWindowLp.y;
               	return false;
           	case MotionEvent.ACTION_MOVE:
             	float deltaX = mStartingX - ev.getRawX();
               	float deltaY = mStartingY - ev.getRawY();
               	mWindowLp.x = (int) (mWidgetStartingX - deltaX);
               	mWindowLp.y = (int) (mWidgetStartingY - deltaY);
               	mWindowManager.updateViewLayout(floatingView, mWindowLp);
               	return true;     
        		}
        		return false;
    	}
});

이벤트 처리시에 ev.getRawX(), ev.getRawY()를 사용했는데 이렇게 하면 스크린에서의 터치 위치를 가져올 수 있습니다. 이 뷰는 스크린내에서 움직여야 하기때문에 getRawX, getRawY를 사용합니다.

생성 및 제거 애니메이션 처리하기

윈도우가 생성되고 제거될때의 애니메이션은 시스템에서 제공하는 애니메이션만 적용이 가능합니다. 적용하는 방법은 아래와 같이 WindowManager.LayoutParam을 이용합니다.

mWindowLp.windowAnimations = android.R.style.Animation_Toast;

생성 및 제거 시 애니메이션만 위와 같은 제약이 있고 뷰나 레이아웃 자체에 주는 애니메이션은 자유롭게 적용이 가능합니다.

그 외 재미있는 것들

스테이터스바 높이 구하기

안드로이드 개발자 페이지에 가면 다른 튜토리얼이나 가이드는 굉장히 잘 되어있는데 이상하게 윈도우에 대한 설명은 매우 적습니다. 그래서 윈도우에 대해 제대로 이해하기가 어려웠는데요. 윈도우에 대해 앞서 설명한 정도의 배경만 알아도 많은 도움이 되는 것 같습니다. 가령 개발을 하다보면 스테이터스 바의 높이를 구하고 싶을때가 있는데요. 스택 오버플로우에서 찾아보면 아래와 같은 코드가 나옵니다.

1
2
3
4

Rect rectangle= new Rect();
Window window= getWindow();
window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
int statusBarHeight= rectangle.top;

처음에는 이 코드를 이해를 못하고 그냥 가져다 썼는데요. 위에 정리한 내용을 보고 다시 보면..먼저 현재 액티비티의 윈도우를 가져오고 윈도우의 Rect를 가져옵니다. 일반적인 윈도우는 스테이터스 바 아래 위치하기 때문에 액티비티 윈도우의 top이 바로 스테이터스바의 높이가 됩니다.

키보드가 올라왔는지 체크하기

또 아래 코드는 키보드가 현재 올라와 있는지를 체크하는 코드입니다. 안드로이드는 키보드가 올라와 있는지 내려가 있는지 알 수 있는 API를 제공해주지 않기 때문에 여러가지 꼼수를 써서 이를 체크해야하는데요. 가장 많이 사용되는 것이 아래의 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

contentView.getViewTreeObserver().addOnGlobalLayoutListener(new 	ViewTreeObserver.OnGlobalLayoutListener() {
	@Override
	public void onGlobalLayout() {

   			Rect r = new Rect();
   			contentView.getWindowVisibleDisplayFrame(r);
   			int screenHeight = contentView.getRootView().getHeight();

   			// r.bottom is the position above soft keypad or device button.
   			// if keypad is shown, the r.bottom is smaller than that before.
   			int keypadHeight = screenHeight - r.bottom;

   			Log.d(TAG, "keypadHeight = " + keypadHeight);

   			if (keypadHeight > screenHeight * 0.15) { // 0.15 ratio is perhaps enough to determine keypad height.
        		// keyboard is opened
   			}
   			else {
       			// keyboard is closed
  			}
	}
});

이것도 앞서 윈도우에 대해 정리한걸 바탕으로 보면 아주 간단합니다. 현재 액티비티 윈도우의 높이를 구하고, 이 높이와 스크린의 높이를 대강 비교해서 액티비티의 높이가 키보드가 올라왔다고 판단할 수 있을만큼 작아졌다면 키보드가 올라왔다고 판단하는 것입니다.(키보드가 올라오면 액티비티의 윈도우는 그만큼 줄어듭니다)

마무리

사실 예전에 네이버 퀵메뉴를 만들때는 온전히 이해하지 못하고 적용을 했었는데 핑퐁을 하면서 정리하다보니 이제서야 오히려 더 이해를 깊게 하게 된것 같습니다. 정리하는 내내 재미있었네요. 윈도우 타입과 속성을 잘 조합하면 재미있는 것들을 많이 해볼 수 있을 것 같습니다.

웹서핑을 하다보면 재미있는 글이나 자료들을 URL 링크 형태로 공유하는 경우가 많이 있습니다. 하지만 단순히 URL만 보게되면 보는 사람 입장에서는 해당 링크가 어떤 웹페이지인지 알기가 어렵죠. 그래서 많은 앱과 서비스에서 아래와 같이 해당 페이지에 대한 미리보기(제목, 설명, 이미지)를 제공합니다.

이런 화면을 보여주기 위해 사용되는 가장 기본적인 방법은 OGTag(Open Graph Meta Tag)를 이용하는 방법입니다. OGTag는 웹페이지에 대한 간단한 정보를 html에 입력해두고 이 페이지를 보여주는 앱이나 서비스에서 이를 이용해 위의 스크린 샷과 같이 페이지에 대한 간략한 정보를 보기 쉽게 보여줄 수 있도록 하는 것입니다. 아래는 html에 OGTag를 입력하는 예입니다.

1
2
3
4
5
6
7
8
9
10
11

<head>
......
<meta property="og:title" content="test"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://rootree.net"/>
<meta property="og:description" content="This is a description."/>
<meta property="og:image" content="https://img.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
......
</head>

보시면 property가 og:xxx인 메타 태그들이 있는데요. 이것들이 바로 OGTag 입니다. 메타 태그는 본래 해당 페이지를 설명하는 정보들을 넣기위한 태그입니다. 검색엔진이 웹페이지를 검색하거나 웹브라우저가 해당 페이지를 정확하게 보여주기 위해 도움이 되는 정보 등으로 사용됩니다. 이중에서도 Open Graph Meta Tag는 사용자가 웹사이트를 페이스북에 공유하기 좋게 하기 위한 목적으로 만들어졌습니다. 이와 유사한 걸로는 트위터의 card 태그가 있습니다.

위와 같이 og:xxx 태그를 입력해둔 웹페이지를 페이스북에 공유하면 페이스북에서는 이 태그들을 이용해서 해당 페이지의 링크를 마치 페이스북의 오브젝트처럼 다루어서 보다 예쁘게 보여줍니다. 아래 이미지는 페이스북에 링크를 공유했을때 보여지는 화면인데요. 이걸 보시면 바로 이해가 가실겁니다. 제가 공유한건 단순히 https://naver.com 이란 URL인데 아래와 같이 페이스북에서 자체적으로 예쁘게 보여주죠. 지금은 페이스북이 아니라 밴드, 라인, 카톡등 다른 서비스에서도 이를 이용해서 비슷하게 미리보기를 해주고 있습니다.

Open Graph Meta Tag는 페이스북의 Open Graph Protocol에 정의가 되어있습니다. 이에 대한 자세한 설명은 아래 링크에서 확인 가능합니다. 지금까지 소개에선 타이틀, 설명, 썸네일 이미지 정도의 정보를 보여줄 수 있다는 정도였지만 실제로는 OGTag를 이용해 동영상, 음악 같은 것들도 표현할 수 있습니다. 또한 아래의 Open Graph Protocol 페이지에 가면 언어별 파서 및 플러그인, 개발 도구 등도 보실 수 있습니다.

• Open Graph Protocol
• Open Graph API

그럼 안드로이드 앱에서 OGTag를 이용하려면 어떻게 하면 될까요? 아주 간단합니다.

1. 링크를 입력 받는다.
2. 해당 링크의 html을 가져와 OGTag를 파싱한다.
3. 2에서 파싱된 OGTag 정보를 가지고 원하는 UI로 예쁘게 보여준다.

위의 과정을 간단히 코드로 구현해 보았습니다. Jsoup를 통해 html을 가져오고 여기서 OGTag를 파싱하는 코드입니다. 간단히 위의 로직만 옮긴 코드라서 슈도코드 정도 느낌으로 참고만 하면 될 것 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

private void getOGTag(String url, final OGTag ret) {
    // 입력받은 url에 해당하는 html을 요청하고 OGTag들을 가져온다.
    try {
        Connection con = Jsoup.connect(url);
        Document doc = con.get();
        Elements ogTags = doc.select("meta[property^=og:]");
        if (ogTags.size() <= 0) {
            return;
        }

        // 필요한 OGTag를 추려낸다
        for (int i = 0; i < ogTags.size(); i++) {
            Element tag = ogTags.get(i);

            String text = tag.attr("property");
            if ("og:url".equals(text)) {
                ret.setOgUrl(tag.attr("content"));
            } else if ("og:image".equals(text)) {
                ret.setOgImageUrl(tag.attr("content"));
            } else if ("og:description".equals(text)) {
                ret.setOgDescription(tag.attr("content"));
            } else if ("og:title".equals(text)) {
                ret.setOgTitle(tag.attr("content"));
            }
        }
    } catch (IOException e) {
        return;
    }
}

조금 더 생각해볼 것들

서비스 적용하기

위의 예는 아주 간단한 구현이지만 실제로 서비스에 적용하려면 성능과 네트워크 사용에 대한 부분도 생각해봐야합니다. 링크가 PC 페이지인 경우 html 자체도 상당한 크기를 가질 수 있기때문에 이 자체도 부담이 될 수 있습니다. 따라서 매번 URL을 통해 OGTag를 파싱하는 건 쓸데없이 네트워크 트래픽 및 성능 상 낭비가 될 수 있습니다. 이를 피하기 위해서는 중간에 서버를 두거나, 캐싱을 사용하는 건데요. 서버를 두는건 OGTag를 통해 얻을 수 있는 장점에 비해 너무 큰 리소스가 들어가는 문제가 있습니다.

또한 서버를 두든 앱에서 로컬 캐싱을 하든 웹페이지의 OGTag를 실시간으로 반영하기 어렵다는 이슈가 있습니다. 따라서 서비스에 따라 상황에 맞춰 적절히 적용하는 센스가 필요합니다. 앱개발자 입장에서는 며칠 단위의 로컬 캐시를 만들어서 서버없이 간단히 구현하는 방식도 좋을것 같습니다.

OGTag가 없는 경우

OGTag를 사용자가 넣어두지 않은 경우에도 URL미리보기를 적용하고 싶다면 html내에서 적당한 이미지와 타이틀, 설명을 뽑아서 사용하면 됩니다. 가령 타이틀은 메타 태그의 title을, 설명은 description을 사용한다든지, 아니면 본문의 텍스트 중 앞부분에서 적당히 잘라서 쓴다든지 하는 것이죠. 이미지 역시 div 또는 body안에서 첫번째 이미지를 찾아서 가져 올 수 있겠죠. 이런 부분은 정답이 없기에 성능이나 정책을 적당히 고려해서 적용하면 될 것 같습니다.

페이스북의 OGTag 처리

참고로 페이스북은 서버단에서 OGTag를 처리하고 자체적으로 캐싱도 해주고 있습니다. 사용자의 포스팅을 피드 형식으로 보여주니 당연한거 같기도 합니다. 사용자가 포스팅에 URL을 첨부하면 페이스북 크롤러가 해당 페이지의 OGTag를 캐싱해서 피드에 내려주는 방식입니다. 성능 이슈 때문인지 캐싱된 OGTag는 크롤링 될 때의 스냅샷이 저장되고 개발자 콘솔에서 캐시를 초기화 해주지 않으면 OGTag가 수정되어도 반영이 되지 않습니다. 폴라에는 각 엔드나 프로필등의 주요화면에 URL 공유하기 기능이 있는데요. 위와 같은 이슈때문에 공유하기 URL을 생성할때 앱에서 URL 뒤에 타임스탬프를 붙여서 이를 회피하고 있습니다(캐싱이 되지 않도록).

그리고 OGTag가 없더라도 타이틀, 설명, 이미지를 적당히 가져와서 보여줍니다. 페이스북 크롤러가 미리보기에 사용할 값을들 파싱할때 OGTag가 있으면 OGTag를, 없으면 다른 곳에서 데이터를 가져오도록 구현되어 있는듯 하네요. http://develope.android.com 페이지를 가지고 테스트 해봤더니(ogtag가 없는 페이지) 타이틀은 title, 설명은 description을 가져옵니다. 이미지는 첫번째 이미지가 아니고 중간에 있는걸 가져오는데 뭘 기준으로 고르는지는 잘 모르겠네요.

마무리

폴라에서 공유하기 기능을 개발하면서 단순히 URL링크만 공유했는데 어떻게 다른 서비스에서는 저렇게 링크를 보기좋게 보여줄까 하고 궁금했습니다. 다른 분께도 이 글이 도움이 되면 좋겠습니다