2013.05.26 02:07


public Bitmap mergeBitmap(Bitmap src, Bitmap mergeBitmap) {
int width = src.getWidth();
int height = src.getHeight();

mergeBitmap2 = Bitmap.createScaledBitmap(mergeBitmap, width,
height, true);

int maskPixel;int tilePixel;int mergedPixel;
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
maskPixel = mergeBitmap2.getPixel(x, y);
tilePixel = src.getPixel(x, y);

mergedPixel = Color.argb(Color.alpha(maskPixel),
Color.red(maskPixel), Color.green(maskPixel),
Color.blue(maskPixel));

mergeBitmap2.setPixel(x, y, mergedPixel);

mergedPixel = Color.argb(Color.alpha(tilePixel),
Color.red(tilePixel), Color.green(tilePixel),
Color.blue(tilePixel));

mergeBitmap2.setPixel(x, y, mergedPixel);
}
}

return mergeBitmap2;

신고


Posted by injunech
2013.05.18 22:37


기능시험 코스는 크게 4가지로 굴절,곡선,협로,장애룰코스 구분되고 연속해서 코스를 통과합니다.

원동기, 2종소형 모두 100점 만점에 90점이 통과고 한번실수에 10점감점이 됩니다. 2번째부턴 실격!

원동기 시험은 시티100, 2종소형은 대개 미라쥬 250CC로 시험을 봅니다.

2종소형의 어려움은 원동기와 동일한 코스로 큰기종으로 시험보기에 코스에 들어서면 상당한

압박감을 느끼고 클러치사용으로 조작이 미숙하면 실격하기 쉽습니다.

처음 면허를 따시는 분이시면 지인을 통해서 조작감, 속도감을 몸에 익히시면 쉽게 통과할수있습니다.

코스를 자세히 설명과 통과 노하우를 제경험을 가지고 알려드리겠습니다.

 

1. 굴절코스

 

 

코스설명

폭 1M, 입구길이 4M, 모퉁이사이길 9M. 출구길이3M 로서 가장 실격을 많이 하는 코스입니다.

진입하기전까지 상당히 넓어보이지만 시험시 심리적으로 좁아보이고 조작이 미숙하면 실수를

많이 하는 코스입니다. 공터나 운동장에서 충분히 연습을 하시면 통과할수있습니다. 

 

합격노하우

원동기 : 우선 시티100은 클러치 조작을 안하기때문에 속도감을 익히시는게 중요합니다.

           우선 출발시 좌측 검지선에 바짝 붙어서 균형을 잡을 정도의 속도를 유지합니다. 앞바퀴를

           주시하면서 코스에 진입합니다. 앞바퀴가 첫번에 굴절에 반정도 넘어가면 신속히 핸들를

           꺾어서 모퉁이 사이길로 실수없이 진입한다면 위에 그림보시는것처럼 우측검시선쪽으로

           붙은다음 다음 굴절을 반보다 못하게 바퀴가 넘어가면 신속하게 핸들을 꺾어서 굴절을

           통과한다음 무리하게 직진으로 탈출하기 보단 무리없이 출구 검지선을 밟지 않게 자연스럽게

           통과하시면 쉽게 통과할수있습니다.

 

2종소형 : 우선 클러치 사용을 합니다. 250CC라서 2단도 출발가능합니다. 2단출발시 시동이 꺼지지

           않게 주의를 하시면 되겠습니다. 조작이 미숙하시면 1단출발 하시면 되겠습니다. 1단보다

           2단이 유리한데 1단은 스로틀반응이 민감해서 급가속이 되서 코스를 이탈을 많이 하기 때문

           입니다. 우선 바퀴가 크기때문에 원동기와 다르게 반보다 안되게 첫굴절을 꺾으시고 차체가

           길기때문에 급하게 꺾기보단 부드럽게 넘어간다는 생각을 가지시고 가시면 됩니다.

           이후는 원동기와 동일합니다. 그리고 부담되시는 분들은 90점통과 목표로 잡고 굴절 둘중

           한곳에서 발을 딛어서 바이크가 아예 탈선되는걸 막아서 굴절코스를 통과하시면 되겠습니다.

 

Tip : 출발위치는 항상 정해져있지만 위치만 벗어나지 않으면 뒤로 더 가도 됩니다. 2종소형 굴절코스

      진입시 속도조절이 중요합니다. 뒤로 더 가셔서 멀리서 가속을 하시고 그속도를 조절하셔서

      통과하시면 되겠습니다. 앞브레이크사용시 제동이 잘되어서 웬만하면 사용하지 않습니다

 

2. 곡선코스

 

코스설명

폭 1M, 반경 6M로 곡선통과입니다. S자코스라고 하고 의외로 떨어지시는분들계십니다.

크게 어려움은 없이 일정한 속도로 유지한다면 통과하기 쉽습니다.

 

합격노하우

원동기 : 쉬운코스입니다. 일정리듬을 가지고 방향전환만하신다면 무리없이 통과 가능합니다.

          의외로 반대곡선이 일찍나오기 때문에 굴절에 통과했다는 마음을 가지고 방심하고

          코스진입하신다면 탈락하기 쉽습니다. 마지막 출구에서 검지선 밟으실수있으니 마지막

          탈출하실때까지 방심만 안하시면 됩니다.

 

2종소형 : 원동기와 동일한 통과 방법으로 통과하시면 됩니다 차체가 크고 길기때문에 심리적인

           부담감이 있습니다. 급하게 방향전환보단 여유있게 길이를 생각하시고 방향전화하시면

           쉽게 통과할수있습니다 굴절을 통과하셨다면 여유있게 통과하실수있습니다.

 

3. 좁은길 코스

 

코스설명

폭 0.3M, 길이 15M로 직진만 하면 되는 코스입니다. 속도 조절이 관권입니다. 탈락자가 2번째로

많은 코스입니다.

 

합격노하우

원동기 : 코스진입시 속도 조절과 방향이 중요합니다. 너무 느리게 가게 되면 검지선을 밟을수있습니

         다. 속도가 빠를시 코스 이탈하여 탈락하게 됩니다. 코스에 진입하게 되고 방향이 잡으셨다면

         약간 빠른속도로 통과하시면 되겠습니다.

 

2종소형 : 원동기와 통과 방법 동일합니다. 하지만 가속력이 좋기때문에 코스탈출시 속도를 줄이지

           않으면 다음 코스인 장애물코스를 진입할수 없을수도 있습니다. 3분의2지점까지 속도를

           낸다음 그이후부터 서서히 감속하셔서 다음코스진입에 어려움없이 통과하시면 되겠습니다.

           속도를 줄인다고 급브레이크를 잡게 되면 넘어지지 주의하시기 바랍니다.

 

Tip: 2종소형은 차체가 길기때문에 곡선코스에서 좁은길코스로 진입하기전 약간 크게 돌아서 방향을

     잡으시면 더 통과하기 유리합니다. 바로 들어가면 굴절과 같은코스가 되어버리기 때문입니다.

 

4. 연속진로전환코스

 

 

코스설명

연속진로전환코스 장애물 코스라고도 합니다. 기능의 마지막 시험으로 여기까지 무사통과하면

면허를 취득할수있습니다. 총폭 1.5M, 장애물폭 0.4M, 장애물간 거리 1.5M,2.5M로 이루어진

코스입니다. 방향전환을해서 장애물을 건드리지 않고 통과하는 코스입니다. 장애물 접촉시 10점

감점입니다

 

합격노하우

원동기 : 쉽게 통과하는 코스입니다. 장애물간의 거리를 잘생각하셔서 전절하게 턴을 해주시면

           합격하는 코스입니다 큰설명 필요없는 코스고 다른코스보다 부담감이 없습니다.

           자전거 타듯 장애물 피해가시면 쉽습니다.

 

2종소형 : 마지막까지 방심하면 안됩니다. 자체가 길어서 저는 다통과해놓고 마지막에 장애물을

           건드려서 탈락한 코스입니다. 길이를 생각하시고 여유있게 방향전환하시면 되겠습니다.

           진입시부터 장애물간의 간격이 부담이 됩니다. 너무 부담가지지 마시고 안전운전하신다는

           기분으로 통과하시면 합격하시겠습니다.

 

이상 원동기, 2종소형 기능코스에 대해서 알아봤습니다. 다통과하고 나서 듣는 합격이란 소리와

시험을 응시한 응시생들의 박수소리 들으면 기분이 좋습니다. 특히 2종소형 시험은 더더욱 더합니다.

2종소형은 경험이 많은신 택배아저씨분들도 2~3번 떨어지고 합격하는경우가 많습니다.

2번은 보겠다는 생각을 가지시고 부담없이 시험응시하신다면 좋은결과 있으실껍니다.

원동기를 준비하고있는 학생분들은 꼭 면허 따셔서 바이크를 몰고 다녔으면합니다!

신고

'Life > Bike' 카테고리의 다른 글

바이크 배기량별 특징  (0) 2017.04.20
오토바이 종류  (0) 2017.04.20
2종 소형 면허  (0) 2013.05.18


Posted by injunech
2013.05.17 13:59


안드로이드 앱 개발자가 제안하는 디자인 방법론 - ANDROID UI TIPS



1. 특정 해상도의 기준을 잡아 디자인을 하되, 보이는 것이 다가 아님을 주의하라.


안드로이드 기기는 다양한 해상도를 지원한다. 특정 해상도를 잡아서 작업을 하지만 실제 단말에서는 그 해상도를 사용 하는 사람은 많아야 20% 일것이다. 

항상 해상도보다 더 작거나 더 큰 경우가 있다는것을 생각 하고 디자인 하라.









2. 안드로이드 특성상 메뉴버튼과 백버튼은 하단에 위치 한다. 


하단에 하드웨어 방식뿐만 아니라 소프트웨어 방식의 버튼이 존재 한다는것을 기억하라. 소프트웨어 버튼일 경우 하단에 또다른 버튼을 배치 한다면 2단의 버튼이 생성되어 오작동을 불러 일으킬 수 있다.





3. 터치한 영역을 사용자에게 재확인 시켜라.


모바일 특성상 웹과는 다르게 화면이 작다. 사용자가 특정 콘텐츠를 눌렀으면 눌렀다는것을 확인 시켜줘야 한다. 터치한 버튼의 액션에 대한 Pressed이미지를 준비하라.







4. 이미지 파일 사이즈(용량)를 확인 하라.


안드로이드는 JAVA에 의해 구동된다. JAVA특성으로 인해 메모리 관리가 생각 보다는 힘들다. 예를 들어 4x4사이즈의 나인패치 이미지가 10KB씩 큰경우가 있다. 보통 1KB에 비해 10배나 커지게 된다. 이런 사이즈가 커질수록 메모리를 많이 잡아 먹게 되어 결국 성능저하, 누적되면 앱이 죽을 수도 있다.



 

 

 

 

 

5. UI 가이드의 dip단위 또는 이미지 크기는 짝수를 사용 하라.


dip단위는 px변환 과정에서 정수가 아닌 소수가 나올 수 있기때문에 화면에 디스플레이하는데 오차가 발생 하게 된다. 이런 오차를 최대한 줄이기 위해서는 특별한 경우가 아니라면 짝수 크기를 사용하라. 


 

 




6. UI 가이드 라인작성시 절대적인 수치보다, 상대적인 표현을 하라.


해상도 별로 DIP이 다르기 때문에 절대적인 수치는 화면이 짤리거나, 줄어들 수 있다. 유동적이라는 생각으로 상대적인 표현으로 가이드하라. 단, 마진이나 패딩은 제외. 







신고


Posted by injunech
2013.05.17 13:59


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 4. 가이드 작성법 1




이전시간에 안드로이드는 dp(or dip)단위를 쓰기 때문에 어떠한 해상도에서든 같은 크기를 보여준다고 이야기 했으며 스케일링이 된다고 설명했다. 하지만 폰마다 가로 dp가 모두 다르기때문에 스케일링 만으로 다양한 기기를 지원하기가 어렵다. 


2013/03/11 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 3. DPI, DIP(DP) 개념



그렇다면 어떤식으로 디자인 해야 되며, 가이드라인을 만들지에 대해 알아 보자.



왜 스케일링 만으로 모든폰을 지원 못하는지에 대해 간단한 예제를 통해 알아 보자.



디자이너가 좌우 2개의 이미지와 중간에 타이틀을 넣고 싶어 하는 액션바를 디자인 한다고 가정해보자. 1280x720사이즈를 기본으로 위와 같은 작업은 가이드작업을 할 것이다.

이 가이드를 바탕으로 개발자는 아래와 같은 레이아웃 작업을 할것이다.


Test Case

drawable-xhdpi 폴더 r.png, p.png, g.png, r.png


Layout

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
30
31
32
33
34
<!--
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:src="@drawable/b" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
     
    <TextView
        style="@style/ActionBarTextView"
        android:text="TITLE" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:src="@drawable/p" />
     
</LinearLayout>
-->


Style

1
2
3
4
5
6
7
<!--
    <style name="ActionBarTextView">
        <item name="android:layout_width">110dip</item>
        <item name="android:gravity">center</item>
    </style>
 
-->




레아웃을 작업 후 Xhdpi단말기에서는 가이드라인과 같은 레이아웃 구성이 된것을 볼수 있다. 하지만, Hdpi단말기를 보면 오른쪽 보라색 박스가 깨진것을 볼 수있다.

왜이렇게 이미지가 작아져 버릴까.


단순하다. xhdpi단말기의 가로는 360dp이고 hdpi단말기는 320dp이다. hdpi단말기의 가로가 40dp이 모자라기때문에 더이상 그리지 못하고 작아진것이다.

이처럼 레이아웃 구성에 따라 작아지거나, 짤리는 경우가 있다.



그럼 어떤식으로 가이드라인을 작성 하면 될지 개발자가 직접 그린 가이드라인을 보자.



단순하다. 타이틀 부분을 동적으로 꽉차게 기준을 주는것이다. 이것은 개발자와 디자이너와 약속을 정하고 특정문자로 대체 하면 좋을듯 한 방법이다.

결론은 특정 View에 동적인 기준을 준다는 것이다.


Padding이나 Margin 값 또는 특수한 경우를 제외한 나머지 이런식으로 가이드를 작성하면 된다.


Layout

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
30
31
32
33
34
35
36
37
<!--
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:src="@drawable/b" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
     
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TITLE" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dip"
        android:src="@drawable/p" />
     
</LinearLayout>
-->


이런 가이드라인을 통해 개발자는 위와같은 레이아웃 배치를 할 것이다. 그럼 아래와 같이 모든 폰에서도 잘 보이게 된다.


<1024 x 768> xhdpi 옵티머스 뷰


<1280 x 720> xhdpi 갤럭시 S3


<800 x 480> hdpi 갤럭시 S1


타이틀 부분이 동적으로 늘어나거나 줄어들어서 화면의 사이즈에 맞추는 것을 볼 수있다. 


하지만, hdpi용 타이틀 부분이 너무 작아서 디자이너가 만족 하진 못할 수도 있다. 그럴땐 hdpi용으로 좀더 작은 사이즈의 아이콘을 한벌 더 만들어 넣으면 해결 된다.  



이처럼 가이드시 dp으로 절대적인 수치가 아닌 상대적인 표현을 하는것이 가장 중요하다.

신고


Posted by injunech
2013.05.17 13:58


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 3. DPI, DIP(DP) 개념




안드로이드는 다양한 해상도와 화면의 크기를 지원한다고 이전 시간에 설명을 했다. 


2013/02/28 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념

2013/03/04 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습


이런 다양한 기기를 지원하기 위해 개발자 뿐만아니라 디자이너들까지 어려움을 격는다.

또, 제조사에서 구글의 가이드라인에 맞지 않게끔 기기를 만들기 때문에 두번 어렵다.


기존에 웹디자이너가 안드로이드 디자인으로 넘어 오면서 혼란을 초래 할 수도 있다. 예를 들면 웹은 최소사이즈를 지정하여 디자인 하는데 반해, 안드로이드 앱의 경우 모바일 특성상 모든 화면에 컨텐츠 들이 보여야 되기 때문에 어떠한 해상도에서든 꽉찬 화면을 유지해야 되기 때문이다.




아래는 현재 출시된 대표적인 기기들의 해상도이다. 

이런 다양한 해상도를 완벽하게 지원한다는건 힘들고 손이 많이 가는일이다. 어떤식으로 안드로이드가 이미지를 처리하는지에 대해 알고 디자인을 한다면 디자인의 퀄리티는 좀더 높아 지지 않을까 생각 해본다. 

말로 풀어 설명하기가 참 힘든 부분이라 이해하기가 힘들 수도 있다. 하지만 어떻게 하면 좀더 쉽게 설명 할수 있을까에 대한 고민을 많이 했으니 차근차근 하나씩 설명 해보겠다.











* PX


안드로이드는 px단위를 쓰지 않고 dip단위를 사용한다. 설명에 앞서 왜 px단위를 쓰면 안되는지, 쓰면 어떤 문제가 발생 되는지 간단한 예를 통해 알아 보자.




Test Case

drawable-nodpi 폴더 r.png, p.png, g.png, r.png

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
<!--
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE">
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/p" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g" />
     
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r" />
     
</LinearLayout>
-->


디자이너가 800x480을 기준으로 화면에 정확히 120px로 된 4개의 아이콘을 넣고 싶어 한다고 치자. 800x480에 마춰서 디자인을 했으니 문제 없이 잘 보이지만, 1280x720의 해상도에서 보니 오른쪽 부분이 횡하게 비는 것을 볼 수 있다.

px단위는 화면의 전체화면 크기를 고려 하여 표시되는 상대적 단위가 아닌 전체화면 크기와는 관계 없이 지정한 수치만큼 표시되는 절대적 표시 단위이기 때문이다.


      

                         < 800 x 480 >                                   < 1280 x 720 >


위의 앱은 실제로 본인이 개발했을때 px단위를 쓴 단적인 예이다. 800x480에 기준으로 px단위를 써서 개발을 했다. 1280x720의 해상도의 경우 엉망이 되는 정말 좋은 예제이다.

또한 웹 브라우저에서 화면 크기를 작게 할때 콘텐츠 들이 짤리는것을 보면 금방 이해가 될 것이다. 하지만 우리 안드로이드는 어떤 화면크기가 와도 화면이 절때 짤려서는 안된다.


그래서 안드로이드에서 도입된 것이 dip(dp)단위 이다.










* DPI 

Dots Per Inch

1인치(2.54 센티미터)에 들어 있는 픽셀의 수(밀도)


안드로이드에서는 dpi별로 이미지, 레이아웃을 다르게 줄 수있다. 

하지만 기기별 dpi가 전차 만별 이기때문에 구글에서는 아래처럼 가이드를 제시해주고 있다.

 

Low density (120dpi) (0.75x) : ldpi 

Medium density (160dpi) (baseline) : mdpi 옵티머스원

High density (240dpi) (1.5x) : hdpi : 갤럭시S, 갤럭시S2, 

Extra High density (320dpi) (2.0x) : xhdpi 갤럭시S3

Extra Extra High density (480dpi) (3.0x) : xxhdpi 갤럭시S4(미정)




구글의 가이드라인에 의해 제조사는 dpi기준을 잡아 출시 한다.










* DIP(DP)

Device independent pixel


디자이너와 개발자의 혼란을 줄이기 위해 안드로이드에서는 dpi단위를 제공한다. 

dpi단위는 독립적인 크기를 나타낼 수 있도록 하는 단위이다. 이론상 어떠한 해상도에서도 같은 크기를 보여 주는것이 핵심 개념이다.


표준이 되는 화면크기를 중심으로 보다 큰 화면에서는 지정된 배율로 크기를 늘려주고, 작은 화면에서는 지정된 배율로 크기를 줄여준다.




Test Case

drawable-hdpi 폴더 r.png, p.png, g.png, r.png




아까전과 다르게 800x480에서의 1280x800의 해상도에서 비슷한 크기로 보인다. 다른 점이 하나 있다면 drawable-hdpi 디렉토리에 이미지를 넣었다.

drawable-hdpi 디렉토리에 넣으면 이 이미지들은 hdpi용 이미지라는것을 안드로이드에서 인식 해서 더크거나 작은 dpi가 들어 오면 이미지를 크거나 작게 스케일링 해준다.


DPI 계산법: 원본px * (변환 할 DPI / 원본px의 DPI)


ex) HDPI의 120px을 XHDPI로 변환한다.

120*(320/240) = 160px



DPI 이론상 눈에 보이는 실제 이미지의 크기는 둘다 같아야 되나 오차가 발생 되어 좀 더 크거나 작게 그려질 수있다.


320/240 = 1.3333333.... 이기 때문에


120 * 1.33333... = 159.9xxxx 가 나온다. 

px단위는 최저 1px이 기준이기 때문에 159.9xxx를 표현을 못해 160px로 그린다. 그렇기 때문에 오차가 발생 하는 것이다.


나눠서 정확하게 정수형으로 떨어 진다면 오차는 발생 하지 않게 된다. 또한 해상도와 인치의 규격에 맞지 않게 기기를 만든경우에도 오차가 발생 될수 있다.(대 표적으로 갤럭시탭7)



하지만 이렇게 스케일링이 된다고 믿어서는 안된다. 폰마다 가로 dpi가 모두 다르기 때문이다.


그래서 레이아웃 구성시 동적으로 구성 해야되며, 이런 동적인 구성을 하기 위한 가이드라인을 작성 하는법에 대해서 다음에 알아 보겠다.



신고


Posted by injunech
2013.05.17 13:58


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습



안드로이드 나인패치에 대한 두번째 시간으로 나인패치를 개발자가 어떻게 레이아웃을 잡아서 사용 하는지에 대해 알아보겠다.


나인패치에 대해 기억이 안난다면 이전 글을 다시 보고 이 글을 보도록 하자.

2013/02/28 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념




저번 시간 마지막중에 4가지의 나인패치 이미지 예제를 주었다. 대표적으로 쓰이는 이미지 2가지만 어떤식으로 적용 되는지 하나하나씩 보자.



1. 




상단 타이틀이나 내용부분에 그라데이션을 주기 위해서 흔하게 쓰이는 이미지이다.

나인패치를 보면 상단좌측부분은 1px만큼 잡아 주었고, 하단우측부븐은 Full로 나인패치를 잡아 주었다. 



1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="100dip"
android:layout_height="100dip"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


위의 이미지는 나인패치를 가로 세로 100dip으로 강제로 늘린 것이다. Padding영역을 모두 잡아 주었기 때문에 앞으로 상단위쪽부분으로 Content 가 붙어 있는것을 볼 수 있다.





1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


다음 이미지는 가로 세로 Content 크이게 맞게 늘어 나도록 적용되어 있다. 크기에 맞게끔 늘어 난것을 볼 수있다.  




1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


가장 중요한 부분이다. 흔히들 나인패치를 잡을때 하는 실수..

이 부분도 역시 가로세로 Content 사이즈에 맞게 늘어 나도록 적용하였다. 하지만 Content 를 세로로 길게 넣었다.

자세히 보면 가로로 Content 크기에 맞지 않게끔 늘어 난(빨강색 부분) 것을 볼 수 있다. 왜이렇게 되었을까?


정답은 상단 나인패치 부분에 있다. 현재 점으로 하나만 잡고 양 옆으로 영역이 남아 있다. 이 부분이으로 인해 좀 더 늘어 난것이다. 정확하게 맞추기 위해서는 나인패치를 Full로 잡거나 1px로 최대한 작게 변경 하면 된다.



여기까지만 이해 했다면 90% 정도 까지 이해한 것 이다.





2. 


다음 예제를 보자.






1
2
3
4
5
6
7
8
9
10
<!--
 
<Textview
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Contents"
android:gravity="center"
android:textcolor="@android:color/black"/>
 
-->

이 나인패치의 상단을 유심히 봐야 한다. 가로로 늘어 나는 부분의 하단 꺽쇠부분이 포함 되어 있지 않다. 그래서 Full로 늘리더라도 꺽쇠부분은 오른쪽으로 이동하게 된 것을 볼 수 있다. 






1
2
3
4
5
6
7
8
9
10
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:gravity="center" //중앙정렬
android:textcolor="@android:color/black"/>
 
-->


다음으로 적용된 레이아웃은 가로세로가 Content 에 맞게 늘어 나도록 되어 있다. 그런데 이전 예제처럼 딱 붙지 않고 패딩 부분이 생긴 것을 볼수 있다. Padding영역의 나인패치를 보면 Full로 채워 져있지 않고 좌우 상하 여백이 있을 것을 볼 수 있다. 이런식으로 Content에 여백을주기 위해서 Padding부분을 잡아 주면 된다.



여기까지 나인패치에 대해 상세히 알아 보았다.



그리고 Android에서 제공하는 draw9patch 툴이 있는데, 이것을 사용하면 좀 더 편하게(미리보기 및 Bad Patches 영역 보여주는 기능 등) 나인패치를 잡을 수 있으니 참고하자.





다음 시간에는 안드로이드에서 쓰는 dip단위, sp단위, DPI, ARGB 등의 개념에 대해 상세히 알아 보겠으며, 

그 다음으로 단말특성(해상도 가변)에 맞는 상대적으로 배치를 위한 디자인 가이드라인 작성법을 알아 보겠다.  

신고


Posted by injunech
2013.05.17 13:57


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념



디자이너들이 웹에서 모바일(안드로이드 플렛폼) 환경으로 넘어 오면서 꼭 알아 두었으면 하는 내용을 정리하는 목적으로 연제글을 올리게 되었다. 


그 첫번째 시간으로 안드로이드에서 가장 중요한 나인패치(?)에 대해 설명 하겠다.

나인패치 하나만 잘 알아도 안드로이드 앱 개발자에게 무한 신뢰와 최고의 감각을 가진 디자이너로 인정받을 수 있으니 필히 정독 하자! 



나인패치에 대해 간단하게 설명 하자면, png 이미지로 되어 있는 Stretchable(늘어나는) 영역을 정의 할 수 있다.

Stretchable영역 외에도 Padding영역을 선택 할 수 있다.



그렇다면 왜 이런 나인패치라는 개념을 도입 했을까?

안드로이드는 제조사 마다 모두 다른 해상도의 device를 출시 한다. IOS iPhone의 경우 가로 해상도가 고정이기때문에 고정된 길이의 이미지를 사용해도 문제가 없을 것이다. 하지만 안드로이드의 경우 해상도는 다양하기 때문에 static한 이미지를 사용하게 된다면 늘어 날경우 아래와 같이 뭉게지게 된다. 

 

 

반면 나인패치를 적용 한경우 아무리 늘어나도 원본과 같은 이미지를 얻을 수 있다.


    
 

원본이미지 

 48 x48px

  
 

강제로 늘린 이미지

 160 x 96px

  
 

나인패치가 적용된 늘린 이미지

 160 x 96px

  
    



그러면 "해상도에 따른 이미지를 각각 가지고 있으면 되지 않을까?" 라는 의문이 들수도 있다.

물론된다. 하지만 해상도에 맞는 적어도 10개가 되는 이미지를 만든다고 생각 해보라. 같은 이미지를 크기에 따라 10개를 만들어야 된다면 누가 디자인을 하려 하겠는가. 

또한 앱 용량이 10배이상 늘어나게 되며 리소스를 관리도 무척이나 힘들다. 스마트폰의 어플리케이션의 특성상 한번의 개발로 끝이 아니라 지속 적인 유지 보수가 필요 한데 이러한 환경에서는 더더욱 힘들다.


이런 저런 생각으로 구글 안드로이드 플렛폼 개발자들은 "나인패치라"는 개념을 만들었다. 

하나의 이미지를 다양한 해상도를 가진 device에서 dynamic하게 보여 준다. 구글 개발자들은 매일 자전거타고 수영하고 놀고 있지않다는 증거이다.



그럼 어떻게 Stretchable영역이 늘어나는지 원리에 대해 자세히 설명 해보자.



윗 부분에 검은색선으로 가이드 라인을 잡았다. 그 검은색 선을 기준으로 이미지는 위와 같이 분해 된다.



검은색으로 선택했던 부분은 반복하는 패턴으로 인식 되어 늘어 나거나 줄어 들게되어 뭉게 지지 않는다. 늘어 나는게 아니라 패턴으로 반복되는 구조이다.

흑백으로 된 부분의 이미지는 늘어날 부분의 영역에 대해 아무런 영향을 미치지 않는다. 즉, 통이미지를 유지 한다.




그래서 나인패치된 이미지를 늘릴 경우 뭉게지는게 아니라 사용자가 선택했던 부분만 패턴으로 인식 되어 자연스럽게 늘어 나는것을 확인 할 수 있다.



    
 

원본 이미지


초록색의 가이드라인사이에 

나인패치를 그으면 된다. 
  
  나인패치를 적용한 이미지 


원본이미지의 바깥쪽을 1px씩 

늘린다음 왼쪽과 상단 부분에 

검은색으로 늘어날 부분의 영역을 잡는다.  

  
    



단순히 원본 이미지에 1px만큼의 테두리에 검은색으로 늘어 나는 역영을 정의하면 된다. Nine-patch이미지는 .9.png 라는 확장자로 되어 있어야 안드로이드에서 Nine-patch이미지로 인식 하며, 이런 확장자를 붙여 주게 된다면 개발자들이 좋아 한다.



첫 부분에 Stretchable영역 외에도 Padding영역을 잡을 수 있다고 언급 했다. Padding영역잡는 것도 Stretchable영역 잡는 것과 비슷한 원리니 한번 알아 보자.

Stretchable영역: 왼쪽, 상단 

Padding영역: 오른쪽, 하단



Padding영역은 텍스트 또는 아이콘을 표시하는 등 컨텐츠에 사용되는 패딩을 지정 할 수 있다. 위 이미지 처럼(노랑색 테두리) 페딩역역이 잡히게 된다.



Nine-patch의 불편한 진실 

반복적인 패턴이 아닌 위 처럼 질감을 가진 이미지라면 Nine-patch를 피하라. 필요한 정적이미지 즉, 통이미지를 써야 한다.

이런 부분만 뺀다면 Nine-patch는 그럭저럭 쓸만 하다?



이상 나인패치에 대해 알아 보았다. 다음 시간에는 좀 더 다양한 예제들을 가지고 실제 상황에서 어떤식으로 나타는지, 영역을 잡는지에 대해 알아 보겠다.

그리고 Nine-patch Tool에 대해서도 간단히 언급 하겠다.

 


 

아래 실제 사용중인 Nine-patch 예제를 몇개 모아 두었으니, 늘어 나거나 Padding부분이 어떻게 될지 미리 한번 생각 해보길 바란다.


            


신고


Posted by injunech
2013.05.17 13:45


ImageView

 

안드로이드에서 이미지도 많이 표시해주기 때문에 좀 중요하다 

이미지를 불러오는 방법은 여러가지가 있는데, 아래에는 6가지로 불러오는 소스이다. 

첫번째는 xml에서 그냥 보여주는 방식 

2번째는 xml에는 iamgeView만 추가하고 Activity에서 보여주는 방식 

3번째는 리소스에 있는 이미지를 Activity로 보여주는 방식 

4번째는 비트맵을 사용해서 Activity에서 보여주는 방식 (다양한 작업을 위해) 

5번째는 sdcard를 사용해서 Activity에서 보여주는 방식 

6번째는 server을 사용해서 Activity에서 보여주는 방식이다.






-------------------------------------------------------------------------------------------------------------



신고


Posted by injunech
2013.03.03 22:39


OpenCV_source.rar

prws2009.pdf



=============================================================================================================



NVIDIA 에서 제공하는 tegra-devpack 을 이용하여 설치하면 거의 모든필요 파일들을 통합적으로 설치하여 사용할수 있다.


https://developer.nvidia.com/tegra-android-development-pack


=============================================================================================================





1. android-opencv 포팅을 위한 사전 준비

- android-sdk : 기본으로 설치 되어있어야 함

- android-ndk : crystax ndk 이용

  down : http://www.crystax.net/android/ndk-r4.php

- cygwin

  windows에서 가상 리눅스 환경을 만들어 준다.

  down : http://www.cygwin.com/

- android-opencv source

  SVN을 이용하여 checkout받는다. (http://android-opencv.googlecode.com/svn/trunk/)

  현재 이 svn을 이용하면 사용자 계정을 물어서 들어가보질 못한다. 따로 파일을 올리니 그 파일을 사

  용할 것


2. cygwin을 설치할때 필요한것

Devel : gcc-core, gcc-g++, make, swig

Editor : vim

이것들이 중요하고 나머지 필요하다고 생각하는 것들은 알아서 설치할것


3. crystax ndk r4

사이트에서 다운받은 후 편한곳에 압축만 풀면 된다.

그 후 cygwin이 설치 된 /home/[user]/아래 복사 한다.

cygwin 환경에서 빌드를 진행하기 위해서


4. android-opencv source

올려놓은 파일을 받아서 압축을 푼 후

cygwin이 설치된 /home/[user]/아래에 복사한다.


5. android-opencv build

환경 변수 설정하는 곳에 들어가서 path에 경로를 추가한다.

C:\cygwin\home\[user]\android-ndk-r4-crystax; C:\cygwin\bin;을 추가한다.

제 경로는 C:\cygwin\home\suelgi\android-ndk-r4-crystax; C:\cygwin\bin;


5.1cygwin실행 후 bash환경 파일 수정

vi ~/.bashrc 실행

맨 밑으로 내려서

export PATH=$PATH:/home/[user]/android-ndk-r4-crystax

export ANDROID_NDK_ROOT=/home/[user]/android-ndk-r4-crystax

입력 후 저장한다음 

나가서 source ~/.bashrc를 입력한다.


5.2 android-opencv build

- cygwin 실행후 /home/[user]/android-opencv/opencv로 이동

- sh build.sh 빌드는 시간이 오래걸린다 만약 시간이 짧았다면 설정을 잘못한거니 다시한번 살펴본다

- 빌드가 완료되면 libopencv.so파일이 생성된다.


6. android-opencv test

6.1 CVCamera Smaple build

- 테스트는 samples 안에 있는 CVCamera Project를 이용한다.

- cygwin 실행후 /home/[user]/android-opencv/samples/CVCamera로 경로를 이동한다.

- sh build.sh를 실행하면 빌드된다.


6.2 Eclipse Project Create & Test

- Eclipse에 안드로이드 프로젝트를 생성하고 cygwin에서 빌드한 CVCamera를 import한다.

- 빌드 한 android-opencv 밑에 가면 android로 빌드하면서 생성 된 폴더가 있는데 안의 jni 밑의 java파일들도 import한다. 그리고 당연히 libandroid-opencv.so파일도 프로젝트의 libcvcamera.so가 있는 위치에 복사 한다.

- 프로젝트를 폰이나 에뮬레이터에서 테스트 하면 된다.

- 카메라 뷰가 보이며, 뷰에 보이는 영상이 메뉴에서 선택한 알고리즘에 따라 특징 점 들이 추출되어 보이게 된다.







신고

'Programming > openCV' 카테고리의 다른 글

안드로이드에 OpenCV 포팅하기  (0) 2013.03.03


Posted by injunech
2013.03.02 00:03


[자바] 평년/윤년 구하기

import java.util.*;
GregorianCalendar cal02 = new GregorianCalendar();
if(cal02.isLeapYear(cal02.get(Calendar.YEAR))) {
// 윤년
}
else {
// 평년
}

신고

'Programming > JAVA' 카테고리의 다른 글

JNA (Java Native Access)  (0) 2015.03.14
[JAVA] 자바 실행파일 만들기  (0) 2015.03.01
JGoodies JAVA Swing API  (0) 2015.02.07
클래스 java.io.File  (0) 2013.05.29
평년/윤년 구하기  (0) 2013.03.02
날짜  (0) 2013.03.02


Posted by injunech

티스토리 툴바