안드로이드 스튜디오 pop up 메시지, alert dialog 사용 방법 kotlin

안녕하세요. 공돌이 입니다.

앱 동작 시 사용자에게 특성 액션을 요구하는 경우, 설명이 필요한 경우, 선택을 요구하는 경우에 팝업 (pop up) 메시지 창을 활용하면 사용자에게 명확히 피트백이 가능합니다. 흔히 인터넷 사이트에서도 새로운 공지 사항이나, 특별 이벤트가 있을 때, 또 관심을 끌게 하고 싶은 경우 이 pop up을 많이 활용하고 있습니다. 본 포스팅에서는 앱에서 pop up 메시지를 어떻게 발생시키고 어떻게 활용을 하면 효과적인지 소개하고자 합니다.

 

위 그림은 실제 pop up 메시지가 송출된 상황입니다. Android studio에서는 pop up 메시지를 AlertDialog로 표현합니다. Alert dialogue 단어 뜻대로 대화를 알리다 라는 뜻입니다. 그리고, 타이틀, 메시지를 각각 입력할 수 있으며, 선택 1, 2, 3으로 나눈 것처럼 각각의 위치에 따라 원하는 액션이 동반될 수 있도록 가능합니다.아래 코드를 그럼 분석해 보겠습니다.

override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

 

        val builder = AlertDialog.Builder(this)

        builder.setTitle("타이틀 입니다.")

        builder.setMessage("메시지를 입력합니다.")

        builder.setPositiveButton(

            "선택 1",

            { dialogInterface: DialogInterface?, i: Int ->

                //원하는 명령어

            })

        builder.setNegativeButton(

            "선택 2",

            { dialogInterface: DialogInterface?, i: Int ->

                //원하는 명령어

            })

        builder.setNeutralButton(

            "선택 3",

            { dialogInterface: DialogInterface?, i: Int ->

                //원하는 명령어

            })

        builder.show()

}

 

노란색으로 색칠된 부분이 pop up 메시지를 발생시키기 위한 최소 반드시 필요한 코드입니다. //원하는 명령어라고 된 부분에 개발자가 원하는 동작을 입력하시면 됩니다. 페이지를 변경하거나, 점수를 더 주거나, 광고를 재생하거나 다양하게 응용이 가능합니다. val builder = AlertDialog.Builder(this)로 메시지 소출을 위한 준비를 합니다. 다만 가장 마지막 줄의 빨간색 글씨인 builder.show()가 있습니다. 이 코드가 빠지면 메시지가 팝업이 되지 않습니다. 보통 코드 작성 후 왜 pop up 메시지가 안 나오지라고 의문을 가질 경우 builder.show() 이 명령어가 빠져 있어서 발생하는 문제입니다.

 

Dialog를 연속적으로 많이 사용하고 싶은 경우 val builder = 이 부분을 val builder1, val builder2이런식으로 만들고, builder.명령어 로 되어 있는 모든 부분을 동일하게 builder1.setPositiveButton, builder1.show() 이렇게 변경을 반드시 해 주어야 합니다. Show()라는 명령어가 앞의 builder1이라는 것을 보여라 라는 뜻이기 때문에 .show() 구문에 대해서도, builder인지 builder1인지 명확히 잘 표기할 필요가 있습니다.

 

타이틀과 메시지 내용을 입력 완료 하였다면, 다음은 유저에게 선택을 요구해야 합니다. setPositiveButton, setNegativeButton, setNeutralButton 이렇게 3가지에 대해서 코드에 작성을 하였습니다. 단어 뜻 그대로 긍정 버튼, 부정 버튼, 중립 버튼으로 표기가 되어 있습니다만 꼭 선택의 결과가 단어 뜻대로 이어지지 않아도 됩니다. 선택1, 선택2, 선택3으로 표기한 한글 부분에 원하는 선택지를 적어 주신 후 //이후에 원하는 액션을 작성하시면 됩니다. 이때 단순히 내용 확인 후 다시 화면으로 돌아가고 싶을 경우 //로 적힌 라인을 빈칸으로 두시면 됩니다. 예를 들어 게임을 시작하기 앞서 간단한 주의 사항을 보여주고, 게임을 시작하고 싶은 경우 메시지 pop up후 확인을 누르기만 하면 되기 때문에, 단순히 OK로 눌러서 다시 화면으로 돌아가면 되는 것이지요.

 

위의 코드를 작성하여 실행시키면 메시지 창이 송출됩니다. 하지만! 문제가 있습니다. Pop up 메시지 이외의 화면을 터치하면 선택 버튼을 누르지 않고, 외부 다른 화면을 만지면 pop up 창이 없어지기 때문입니다. 즉 반드시 pop up된 메시지에서의 선택을 눌러 줘야 하는 상황을 만들어야 합니다. 메시지 이외의 다른 터치를 막는 코드가 필요로 하게 되는데요. builder.setCancelable(false)이 바로 그 코드입니다.

 

builder.setCancelable(false)

builder.show()

 

위처럼 기존 builder.show()바로 위에 setCancelable(false)라는 명령어를 입력을 해 주면 pop up 창의 선택을 반드시 눌러야 화면이 움직이도록 설정이 됩니다. 모든 pop up 메시지에 해당 코드를 사용해 주시는 것을 추천드립니다.그리고, false로 했으니깐, true로 다시 바꿔 놓아야 하겠지?라는 생각을 할 수도 있습니다. 하지만 그럴 필요가 전혀 없습니다. 명령어 뜻 그대로 pop up 메시지가 cancel 캔슬 되지 않도록 막겠다는 명령어 이기 때문에 false 상태로 유지가 되어 있으면 됩니다.

 

마지막으로 개발 시 tip을 하나 공유하겠습니다. 선택 1, 2, 3 처럼 3가지 예를 보여 드렸습니다. 확인과 취소를 어떻게 배치를 하는가 도 매우 중요합니다. 아래 그림을 보시면 확인과 취소 버튼이 서로 가까운 곳에 있습니다.

위와 같이 확인과 취소를 배치하면 사용자가 선택 시 실수로 취소를 혹은 확인을 누르는 경우가 발생할 수 있습니다. 이와 같은 상황을 막기 위해서는 확인과 취소를 위의 우측 그림처럼 멀리 배치하는 것이 가장 이상적이라고 생각합니다. 별거 아닐 수 있지만 앱을 사용하는 유저 입정에서 생각해 보면 분명 우측 pop up 메시지가 조금 더 직관적이라고 생각합니다.

 

이번 포스트에서 animation 관련된 것을 포스트 하려고 했습니다만, pop up 메시지 창을 먼저 다루게 되었습니다. 다음 포스트에서 animation 관련된 글을 작성해 보도록 하겠습니다.

 

감사합니다.