Flat디자인의 핵심 안드로이드 이미지 Blur 효과 내기

요즘 웹이나 모바일 할것 없이 Flat한 디자인이 유행인것 같다. 복잡함을 빼고 최대한 심플하고 단순한 모바일 UI에 가장 잘 맞는게 Flat디자인의 핵심이고, 이부분에 대해서 나는 오래전 부터 생각해왔다.

개발자라서 내가 생각하는 디자인적인 표현이 맞는지 모르겠지만,  Flat디자인은 그라데이션 효과나 여러가지 색상을 쓰지 않고 2가지 미만의 체도가낮은 색상을 쓰는것 같다.  안드로이드에 Theme중 Holo라는게 있는데, 이 또한 Flat디자인의 유행을 따라 간게 아닌가 생각된다. 아주 심플하고 단색으로 구성되어 있다.

이렇게 기존 디자인에서 Flat디자인으로 넘어 오면서 개발자는 디자인에 의존성이 약해질 수 있다. 물론 디자이너가 없어도 된다는 것이 아니라, 기본적으로 구성 가는한 디자인을 개발자는 단순히 Color로만 구성할수 있다는 점이다.

서론이 길어 졌지만 핵심은 Flat디자인이 유행이고, 우리 개발자들은 무엇을 준비 해야할까 라는 생각을 해보게 된다.

해외 유명한 Twitter, Path등의 앱/웹을 보면 이미지를 Blur효과를 주는 경우가 많은데, 이것도 Flat디자인의 한 요소 인것 같다. Blur효과란 색상정보를 최대한 단순히 해서 흐릿하게 처리 하는 기법이다. 이런 기법이 Flat디자인이 지향하는 단순. 심플함과 딱 떨어져맞는다.

안드로이드에서는 어떻게 이미지에 Blur효과를 낼 수 있는지 간단한 코드를 통해 작성이 가능하다.

안드로이드에서는 JELLY_BEAN_MR1(API 17)부터 ScriptIntrinsicBlur라는 Class의 raaius값으로 쉽게 Blur효과를 구현 할수 있다. 이전 버전은 직접 효과를 구현해야 해야한다. 하지만 quasimondof라는 사이트에 Canvase에 Blur를 내는 코드를 공개 해두었으니 참고 하면된다. Java이기때문에 javascript에서도 동작하는 데모도 있으니 참고하면 좋겠다.

public static Bitmap blur(Context context, Bitmap sentBitmap, int radius) {

    if (VERSION.SDK_INT > Build.VERSION_CODES.JELLY_BEAN) {
        Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);

        final RenderScript rs = RenderScript.create(context);
        final Allocation input = Allocation.createFromBitmap(rs, sentBitmap, Allocation.MipmapControl.MIPMAP_NONE,
                Allocation.USAGE_SCRIPT);
        final Allocation output = Allocation.createTyped(rs, input.getType());
        final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setRadius(radius); //0.0f ~ 25.0f
        script.setInput(input);
        script.forEach(output);
        output.copyTo(bitmap);
        return bitmap;
    }
    
}

이런식으로 Blur효과를 이미지뷰에 표시 할 수 있다.

이런 방법을 이용해서 Github에서 안드로이드용 Blur 효과를 주는 코드들도 공개 되었으니 참고하자. 그냥 단순히 사용하는것에 급급하지 말고 어떤 식으로 구동되는지 코드를 보면서 사용하면 어떻까 싶다.

“Flat디자인의 핵심 안드로이드 이미지 Blur 효과 내기”에 대한 2개의 생각

  1. 디자이너 분들에게 들었을 때는 기존의 디자인이 현실감있게 그림자나 입체감을 주어서 인터페이스를 표현했다면 플랫 디자인은 다양한 색으로 차이를 만든다고 하더군요. Holo는 기본 테마라서 색감이 단순한 것인 것 같습니다.

    그리고 long shadow도 동시에 유행하는 것 같습니다. 현실감있는 그림자는 아닌데 flat한 디자인 에 꽤 어울리는 것 같습니다.
    http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

    PS: 제가 자주 다니는 커뮤니티에 공유하였습니다. https://plus.google.com/101901704178116997887/posts/a9o47wZQ6us

댓글 남기기