Baekjakka

ContentProvider

• ContentProvider는 앱 사이에서 각종 데이터를 공유할 수 있게 해주는 컴포넌트이다.
• 안드로이드 표준 시스템에서는 연락처인 Contacts나 이미지나 동영상 등의 데이터를 보관하는 MediaStore등이 ContentProvider로 공개돼 있다. 
• 데이터를 검색, 추가, 갱신, 삭제할 수 있으며, 주로 SQLite 등의 관계형 데이터베이스 이용을 염두에 두고 설계됐습니다.
• ContentProvider가 제공하는 데이터는 ContentResolver를 통해 접근하도록 설계돼있고, ContentProvider자신에 대한 참조는 필요없다.

Cursor는 데이터에 접근하는 포인터

ContentProvider에서 데이터를 가져오는 흐름
1. ContentResolver 구하기
2. Cursor 구하기
3. Cursor에서 데이터 가져오기
4. Cursor해제

BroadcastReceiver

• 어떤 이벤트가 발생한 사실을 앱에 알리고 싶을 때 BroadcastReceiver에 통지한다.
• 단말기 전원이 들어왔거나 디스크 용량 부족 등 시스템의 이벤트를 앱에 알리거나, 앱간의 연계를 위해 이벤트를 알리고 싶을 때 이용한다.
• 브로드캐스트 Intent를 받았을 때의 처리를 onReceive에서 구현한다
  어느 브로드캐스트 Intent를 받을지는 IntentFilter로 정의한다.

LocalBroadcastReceiver

브로드캐스트는 다른 앱에 송신하는 것이 가능하지만 경우에 따라서는 다른 앱에 알릴 필요없이 앱내에서 완결시키고 싶을 때 LocalBroadcast로 다른 앱에 알리지 않고 끝낼 수 있다. LocalBroadcast를 수신하려면 LocalBroadcastReceiver를 이용한다.

Broadcast를 수신해 처리할 때 주의할 점

안드로이드는 전력 소비를 줄이고자 사용자가 화면을 끄면 슬립 상태로 들어간다.

브로드캐스트를 수신해서 뭔가 시간이 오래 걸리는 처리를 하는 중에 슬립되는 경우가 있다.

일반적으로 화면이 꺼지고 CPU가 동작하지 않는 상태를 슬립 상태라고 한다.

이런 슬립 상태에서도 브로드캐스트를 받을 수 있지만 받은 후에 곧 바로 슬립하므로 시간이 걸리는 처리는 취소되어 계속할 수 없다.

처리를 계속하려면 CPU를 깨울 필요가 있다. 이런 동작을 안드로이드 시스템 세계에서는 WakeLock을 얻는다고 한다. Wake '깨운다', Lock '열쇠로 잠근다' 는 의미인데, 잠들 수 없는 방에 CPU를 넣고 열쇠로 잠가두는 것을 상상하면 쉽다. 반대로 처리가 끝나면 WakeLock을 해제한다.

주의할 점은 WakeLock 해제를 잊으면 CPU가 슬립할 수 없어 계속 동작하고 전력을 낭비하게 된다. 이는 앱의 신뢰성과도 연관되니 주의해야한다. 

다만 다행히 지원라이브러리에 WakefulBroadcastReceiver라는 클래스가 있어 이 클래스를 이용하면 처리 중에만 WakeLock을 얻고, 처리가 끝나면 해제하는 일련의 흐름을 실행해준다.
WakefulBroadcastReceiver로 얻은 WakeLock은 60초로 타임아웃이 설정돼 있다. 60초가 넘으면 슬립 상태로 전환되니 주의할 필요가 있다.

Service

• 백그라운드 처리를 위해 준비된 컴포넌트이다.
• UI없이 백그라운드로 처리할 수 있다.

Service의 3종류

1. Context.startService()를 호출해 시작되는 서비스
2. Context.bindService()를 호출해서 Service에 바인드하는 종류
3. AIDL (Android Interface Definition Language: 안드로이드 인터페이스 정의 언어)을 이용하는 서비스

AIDL로 앱끼리 연결할 때는 각각 Service로 실행되는 스레드가 다르다는 점에 주의할 필요가 있다.
단순히 앱을 연계하고 싶을 때는 startActivityForResult()를 이용하는 액티비티 연계로 대신할 수 없는지 검토해 보는 것이 좋다.

Service의 수명주기와 콜백

Service가 폐기되는 타이밍

바인드된 경우는 바인드한 모든 클라이언트로부터 언바인드됐을 때 폐기된다.

Service가 바인드되지 않은 채 startService로 시작된 경우에는 명시적으로 Service.stopSelf()로 Service 자신이 스스로 종료하거나 다른 컴포넌트에서 Context.stopService()를 호출해 Service를 종료했을 때 폐기된다.

마지막으로, Service가 바인드되고 startService로 시작된 경우는 모든 클라이언트로부터 언바인드되고 또한 명시적으로 Service.stopSelf()로 Service자신이 스스로 종료하거나 다른 컴포넌트에서 Context.stopService()를 호출해 Service를 종료했을 때 폐기된다.

Activity와 Fragment의 수명주기에 의존하지 않고 백그라운드에서 처리하고 싶은 경우 일반적으로 IntentService가 최적의 선택이 된다.

Activity : 액티비티라는 단어의 의미는 '활동'

사용자가 어떤 활동을 할 때 실행되는 애플리케이션의 컴포넌트를 가리킨다. 액티비티에는 윈도우가 있고, 그 윈도우에 텍스트나 이미지를 표시해 사용자 조작에 반응할 수 있다. UI가 없는 액티비티도 있지만 기본적으로 한 액티비티가 한 화면을 표시한다.

AppCompatActivity를 상속하는 Activity를 만들면 Meterial Design의 가이드라인에 따른 AppCompat 라이브러리를 제대로 활용할 수 있다.

AppCompatActivity를 상속할 수 없을 때는 AppCompatDelegate를 이용할 수 있다.

Activity의 수명주기

※ Android N부터 멀티윈도우가 도입됐습니다.
   멀티윈도우를 지원하는 경우 애니메이션 실행 등 화면 갱신 처리의 정지는 onStop()에서 한다.

시스템 메모리가 모자랄 경우 시스템은 onStop, onDestroy를 콜백하지 않고 액티비티를 강제 종료시켜 메모리를 확보할 때가 있다. 이런 경우 데이터를 영속적으로 보존하려면 액티비티가 일시정지 상태로 전환되는 onPause에서 이를 처리할 필요가 있다.

onCreate와 onDestroy / onStart와 onStop / onResume과 onPause 를 쌍으로 준비와 뒷정리 또는 시작과 종료(취소)하는 조합을 생각하면 어떤 시점에 어떤 작업을 처리할지 상상하기 쉬워진다.

onCreate에서 뷰를 만들면 onDestroy에서 해제한다.

뷰는 액티비티가 폐기된 다음, 가비지 콜렉션(GC: Garbage Collection)에 의해 자동으로 메모리에서 해제된다.

onStart에서 위치 정보를 취득했다면 onStop에서 취득을 정지하는 식이다.

onDestroy에서 액티비티가 폐기되면 GC가 메모리 영역에서 해제한다. 

단, 액티비티의 인스턴스가 다른 클래스에서 참조되고 있을 때는 폐기된 후에도 메모리에 남아 결국 메모리 누수가 발생한다.

Activity의 백스택

새로운 액티비티가 시작되면 실행중이던 Activity는 백스택에 들어간다. 또한 시작한 Activity는 태스크라는 그룹에 속한다. 안드로이드 OS의 버전에 따라서도 미묘하게 동작이 달라 다 이해하기는 어려우므로 3가지만 알아두자.

• 같은 앱에서 시작된 액티비티는 같은 백스택에 쌓인다.
• taskAffinity의 속성에 따라 소속되는 태스크가 달라진다.
• launchMode에 따라 Activity 생성의 여부, 새로운 태스크에 속하는 등 Activity의 시작이 달라진다.

백스택에 쌓인 액티비티는 '뒤로가기' 키 등으로 액티비티를 종료하면 차례로 꺼내진다.

taskAffinity는 '태스크 친화성' 이라는 의미지만, 대체로 '태스크 이름'으로 바꿔 읽는것이 이해하기 쉽다.

taskAffinity를 지정하지 않은 경우는 자기 앱의 패키지 이름이 태스크 이름이 딘다.

taskAffinity를 설정하지 않으면 그 앱의 taskAffinity는 모두 같아진다.

launchMode는 4가지가 있다.  자주 사용하는 것은 standard, singleTop, singleTask의 3가지이다.

standard는 매번 액티비티의 인스턴스를 새로 생성한다.

singleTop은 같은 액티비티가 최상위에서 실행 중이면 액티비티를 생성하지 않고, 그 대신 최상위 인스턴스의 onNewIntent()를 호출한다.

singleTask는 1개의 태스크에 인스턴스가 존재한다. 이미 같은 액티비티가 실행 중이면 액티비티를 생성하지 않는다.

View, Layout

View란 UI를 구성하는 바탕이 되는 컴포넌트로서 네모난 그리기 영역을 가진다.

Layout은 뷰를 어떤 위치에 어떤 크기로 표시할지 결정하는 것입니다.

갤러리로 연결 시키기

Reference

• https://developer.android.com/training/data-storage/shared/media
• https://mainia.tistory.com/497
• https://m.blog.naver.com/PostView.nhn?blogId=jinju2563&logNo=220172335135&proxyReferer=https%3A%2F%2Fwww.google.com%2F
• https://guitaryc.tistory.com/16
• https://hashcode.co.kr/questions/3384/android-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8F%B4%EB%8D%94-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

dialog.show() 시 발생한 에러

“android.view.WindowManager$BadTokenException: Unable to add window — token null is not for an application”

val builder: AlertDialog.Builder = AlertDialog.Builder(applicationContext)
builder.setMessage("message")
	.setTitle("title")
	.setNegativeButton(R.string.cancel, DialogInterface.OnClickListener{ dialog, id ->
		...
	})
    .setPositiveButton(R.string.ok, DialogInterface.OnClickListener{ dialog, id ->
	    ...
    })

val dialog:AlertDialog = builder.create()
dialog.show()

1행에서 AlertDialog.Builder(applicationContext)를 AlertDialog.Builder(this@MainActivity)로 수정하여 해결할 수 있습니다.

Button 속성 추가하기 ( 버튼 텍스트 소문자 )

- android:textAllCaps = "false" 

Button 이벤트 순서

- onTouch -> onClick -> onLongClick 순으로 이벤트가 전달된다.

그런데 onTouch()에서 return true를 하면 onClick과 onLongClick까지 이벤트가 전달되지 않고, false면 모두 전달된다.

uCrop 참고 : https://www.programcreek.com/java-api-examples/?class=com.yalantis.ucrop.UCrop&method=Options

Reference

 - https://wowan.tistory.com/124

 - https://marlboroyw.tistory.com/131

 - https://www.programcreek.com/java-api-examples/?class=com.yalantis.ucrop.UCrop&method=Options

EditText 속성

 - background 값에 @null을 추가한다.

EditText 활성화, 키패드 보이기, 커서 위치 이동

editText.isFocusableInTouchMode = true
editText.isFocusable = true
editText.selection(editText.length()) // 커서 위치 이동하기

// 키패드 보이기
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(eidtText, 0)

EditText 비활성화, 키패드 숨기기

editText.isClickable = false
editText.isFocusable = false

// 키패드 숨기기
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.hideSoftInputFromWindow(edit_nickname_editmyinfo_a.windowToken, 0)

Reference

 - https://nuggy875.tistory.com/10

 - https://philip1994.tistory.com/12

 - https://programmingsummaries.tistory.com/30

ContentProvider

ContentProvider는 앱 사이에서 각종 데이터를 공유할 수 있게 해주는 컴포넌트입니다.

안드로이드 표준 시스템에서는 연락처인 Contacts나 이미지, 동영상 등의 데이터를 보관하는 MediaStore 등이 ContentProvider로 공개돼 있습니다. 데이터를 검색, 추가, 갱신, 삭제할 수 있으며, 주로 SQLite 등의 관계형 데이터 베이스 이용을 염두에 두고 설계됐습니다. 그러므로 관계형 데이터 베이스를 다룬 경험이 있다면 이해하는데 도움이 될 것이라 생각됩니다.

ContentProvider로부터 데이러를 읽어오려면 해당 ContentProvider가 어디에 있는지 알아야 합니다.

경로는 'content://스키마'를 가진 URI(Universal Resource Identifier)로 지정되고, 일반적으로 접근할 대상 앱에서 정의됩니다. 또한 URI는 authority로 불리며, ContentProvider를 직접 만들 때는 AndroidManifest.xml에 기술해야 합니다.

ContentResolver

ContentProvider가 제공하는 데이터에는 ContentResolver를 통해 접근하도록 설계돼 있고, ContentProvider 자신에 대한 참조는 필요없습니다. ContentResolver의 인스턴스는 getContentReslolver() 메서드로 가져옵니다.

ContentResolver에 URI를 전달함으로써 ContentProvider의 데이터에 접근할 수 있습니다. 데이터는 ContentResolver.query()를 이용해 가져옵니다.

Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder)

uri : ContentProvider가 관리하는 uri

projection : 가져오고 싶은 칼럼명 (select에 해당)

selection : 필터링할 칼럼명을 지정 (where에 해당)

selectionArgs : selection으로 지정한 칼럼명의 조건을 설정 (프리페어드 스테이트먼트에 해당)

sortOrder : 정렬하고 싶은 칼럼명을 지정 (order by에 해당)

Cursor

query()의 반환값인 Cursor는 데이터에 접근하는 포인터입니다.

2차원 표를 떠올려서 생각해보면 행과 열이 있을 때 어느 행을 가리키는지 나타내는 것이 Cursor입니다.

'갤러리' 앱에서 이용되는 ContentProvider에서 이미지를 가져오기

ContentProvier에 접근할 때 기본적으로 다른 앱이 이용할 수 있도록 필요한 상수는 정의돼 있습니다.

Authority를 나타내는 Uri는 보통 CONTENT_URI, EXTERNAL_CONTENT_URI 같은 상수명으로 공개됩니다.

또한 가져오고 싶은 칼럼명도 마찬가지로 정의돼 있으므로 이를 이용합니다. 우선 필요한 projection등을 작성하고, ContentResolver.query()를 호출해 Cursor를 가져옵니다.

19행에 Cursor.moveToFirst()를 호출해 커서를 맨 앞으로 이동해 true가 반환된 경우에만 Cursor에서 데이터를 가져옵니다. false가 반환된 경우 데이터는 비어있으므로 그 이후의 처리는 필요 없습니다. 

Cursor로부터 데이터를 가져오려면 두 단계가 필요합니다.

1. 가져오고 싶은 칼럼의 인덱스를 얻습니다.
2. Cursor.getString(int)를 호출해 데이터를 가져옵니다.

문자열인 경우는 getString(), 숫자인 경우는 getInt() 등 자료형에 따른 메서드가 준비돼 있고, 인수에는 가져오고 싶은 칼럼의 인덱스를 전달합니다.  Cursor의 사용이 끝나면 close()를 호출합니다. Cursor는 ContentProvider로부터 가져온 데이터에 대한 참조를 가지고 있으므로 닫아서 참조하는 데이터를 해제할 필요가 있습니다.

정리하기

1. ContentResolver 구하기 : getContentResolver, 46행
2. Cursor 구하기 : getImage(), 58행
3. Cursor에서 데이터 가져오기 : try{}, 26~28행
4. Cursor 해제하기 : cursor.close(), 38행

Reference

• 안드로이드 개발 레벨업 교과서

화면을 터치하면 이벤트라는 것이 발생하게 되는데 이 이벤트는 리스너라는 것을 이용하여 다룰 수 있습니다.

터치 이벤트 이외에도 단말의 방향을 가로 방향으로 돌렸을 때도 이벤트가 발생하고 키패드에서 키를 하나 눌렀을 때도 이벤트가 발생합니다.

이런 이벤트를 어떻게 처리할 수 있는지 알아봅시다.

버튼을 클릭했을 때 버튼 클릭한 것을 이벤트라고 하는 걸로 만들어서 전달받을 수 있습니다.

전달받아서 처리할 수 있는데 이것을 이벤트 리스너라고 하는걸 등록해서 처리할 수 있습니다.

이게 버튼뿐만 아니라 뷰라고 하는 거에 대해서 거의 대부분 다 적용할 수 있습니다.

그래서 기본적인 이벤트 처리방법을 이해하면 굉장히 다양한 기능을 만들 수 있습니다.

이벤트는 가장 단순한게 버튼을 클릭했을 때를 생각해볼 수 있습니다.

버튼을 클릭하면 onClick이라는 이벤트가 발생됩니다. 그래서 그때 이 버튼에다가 OnClickListener라고 하는 리스너를 설정하면 이쪽으로 이벤트를 전달해줍니다. 

그런데 이 클릭은 좀 더 세분화해보면 터치 이벤트로 나눠볼 수 있습니다.

사용자가 스마트폰 단말의 화면에다가 손가락으로 터치를 하면 손가락으로 누를 때, 누른 상태에서 움직일 때, 손가락을 뗐을 때로 구분할 수 있습니다. 

그 다음에 키패드에서 키를 하나 눌렀을 때 우리가 어떤 키를 눌렀는지 확인할 수 있는 방법도 있습니다. 그리고 손가락을 눌러서 끌어당길 때 그 때 빨리할 수도 있고 느리게 할 수도 있을텐데 그런 것들을 빨리하거나 느리게 할 때 얼마나 빨리했는지 이런것들을 일일이 계산해야 하는데 제스처라고 하는걸 쓰면 계산하는 걸 알아서 내부에서 해줍니다.

그래서 제스처 이벤트라고 하는걸 처리하는 방법이 있습니다.

뷰마다 포커스가 주어질 수 있는데 이건 실제로 쓰는 경우는 쓰게 될 일은 많지 않지만 포커스라고 하는게 있습니다.

그리고 단말의 방향을 가로로 돌렸을 때 그때 받을 수 있는 이벤트도 있습니다.

그럼 간단히 뷰를 터치했을 때 발생하는 터치 이벤트에 대한 터치 이벤트 리스너를 만들어보겠습니다.

view에 onTouchListener를 만들어줍니다. 그러면 event.action으로 터치 정보가 넘어오고 MotionEvent를 이용해 각각의 상태를 구분할 수 있습니다. 그리고 마지막에 true로 정상적으로 처리됐음을 알려줍니다.

view.setOnTouchListener { v, event ->
    var action = event.action

    val curX = event.x
    val curY = event.y

    if (action == MotionEvent.ACTION_DOWN) {
        println("손가락 눌렸음 : $curX, $curY")
    } else if (action == MotionEvent.ACTION_MOVE) {
        println("손가락 움직임 : $curX, $curY")
    } else if (action == MotionEvent.ACTION_UP) {
        println("손가락 떼졌음 : $curX, $curY")
    }

    true
}

그럼 직접 터치하면 엄청 많이 호출되는 것을 볼 수 있습니다. 근데 이 엄청 많이 호출되는 것을 일일이 이게 얼마나 빠른 속도로 움직이냐라고 하는걸 가지고 기능을 만들어야 될 때가 있는데 일일이 하기 힘드니까 제스처라고 하는걸 가지고 자동으로 계산되게 만들 수 있습니다.

그럼 이번에는 제스처디텍터라는 것을 만들어 view2의 영역에서 테스트를 해보겠습니다.

detector = GestureDetector(
    this, object: GestureDetector.OnGestureListener {
        override fun onDown(e: MotionEvent?): Boolean {
            println("onDown() 호출됨")
            return true
        }

        override fun onShowPress(e: MotionEvent?) {
            println("onShowPress() 호출됨")
        }

        override fun onSingleTapUp(e: MotionEvent?): Boolean {
            println("onSingleTapUp() 호출됨")
            return true
        }

        override fun onFling(
            e1: MotionEvent?,
            e2: MotionEvent?,
            velocityX: Float,
            velocityY: Float
        ): Boolean {
            println("onFling() 호출 됨 : $velocityX, $velocityY")
            return true
        }

        override fun onScroll(
            e1: MotionEvent?,
            e2: MotionEvent?,
            distanceX: Float,
            distanceY: Float
        ): Boolean {
            println("onScroll() 호출됨 : $distanceX, $distanceY")
            return true
        }

        override fun onLongPress(e: MotionEvent?) {
            println("onLongPress() 호출됨")
        }
    })

view2.setOnTouchListener { v, event ->
    detector.onTouchEvent(event)
    true
}

이렇게 제스처디텍터를 사용하면 좀 더 편하게 처리할 수 있는 기능이 생깁니다. 예를들어 갤러리에서 사진을 볼 때 다음 사진을 보기위해 사진을 옆으로 스크롤해 넘길 때 끝까지 넘기는게 아니라 어느정도 넘기면 옆으로 탁 튕기면서 들어가는데 이 때 제스처이벤트를 사용하면 훨씬 쉽게 그런 기능을 구현할 수 있습니다. 

이번에는 키 이벤트에 대해서 알아보겠습니다.

키는 키패드를 얘기합니다. 키패드를 누르면 KEYCODE_HOME, KEYCODE_BACK, KEYCODE_1 등과 같은 키 값이 들어옵니다. 그래서 이 키 값을 전달받아서 처리하고 싶으면 onKeyDown이라던가 onKey와 같은 메서드를 재정의해서 사용하면 됩니다.  그럼 키 이벤트를 처리하는 코드를 만들어 보겠습니다.

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        toast("시스템 BACK 버튼 눌림")
        return true
    }
    return false
}

시스템 BACK키를 누르면 원래 화면이 없어지는데 이렇게하면 화면이 안없어지도록 만들 수 있습니다.

그래서 '한번 더 누르면 종료됩니다' 하는 메세지를 보여주는 그런 앱들을 볼 수 있습니다.

만든 코드는 아래에 첨부했습니다.

activity_my_event.xml

• https://gist.github.com/seunghyunbaek/dbbf04a6ddddae7484442856ed700872

MyEvent.kt

• https://gist.github.com/seunghyunbaek/98c6ca7a891dcbcf397b334f037bb40a

Reference

• https://www.edwith.org/boostcourse-android/lecture/17051/

새로운 앱을 디자인할 때, 어떤 색상을 활용하는 게 좋을까?

MONOCHROMATIC (단색)

• 단색은 색상들을 동일한 기본 색으로부터 만들기 때문에 가장 만들기 간단한 Color Scheme(색 구성표)이다.
• 단색은 안정감을 주는 효과가 있다.
• 특히 Blue나 Green 색상이 가장 편한 느낌을 준다.
• Adobe Color CC를 검색해서 도움을 받을 수 있다.

ANALOGOUS(유사색)

• 유사색은 서로 이질적이지 않은 유사한 색상으로부터 만든다.
• 한 가지 색상이 대표색으로 사용되면서 다른 색들이 컬러를 풍부하게 만들어 준다.
• 색이 진해 지거나 옅어질 때 어떤 방향으로 변화를 줄 것인지를 잘 선택해야 한다.
• Calm이라는 명상 앱은 사용자에게 편안하고 평화로운 느낌을 주기 위해 blue와 green의 유사색을 사용한다.

COMPLEMENTARY(보색)

• 보색들은 서로 강하게 대비를 이루며, 보는 사람의 주의를 끌기 위해 사용된다.
• 강한 대비를 위해 눈에 띄는 색상과 그 색상에 대비를 이루는 색상을 사용하는 것이 좋다.
• 예를 들면, 사람의 눈이 green으로 가득찬 사물을 볼 때, 약간의 red는 아주 눈에 잘 띄어 보인다.

CUSTOM COLOR SCHEME

• 자신만의 컬러스킴을 만드는 쉬운 방법 중 하나는, 무채색인 팔레트에 밝은 엑센트 색상을 추가하는 것이다. 이러면 시각적으로 도드라져 보이게 할 수 있는 방법이다.

• Dropbox 컬러스킴은 White 캔버스에 cool grey, blue 엑센트 색상을 적용했다.

ADOBE COLOR CC

ADOBE COLOR CC를 이용해 컬러 스킴을 훨씬 편하게 만들 수 있다.

• 기존 Kuler로 많이 알려진 ADOBE COLOR CC는 컬러 선택을 매우 쉽게 만들어 준다. 간단한 클릭으로 기본 색상으로부터 팔레트의 모든 색상을 각각 편집할 수 있다.

색상 대비 효과 : 색상이 서로 쉽게 구분되어 보일 때 대비가 강하다고 말한다.

• 대비가 약한 색상들을 사용하면 디자인이 아름답고 조화롭게 보이기 때문에 디자이너는 약한 대비를 선호하기도 한다. 그러나 아름다운 것이 가독성을 위해 항상 좋은 것은 아니다.
• 텍스트에 색상을 적용할 때, 배경과 대비가 약한 색상을 적용한다면, 읽기가 매우 힘들어질 것이다. 특히 모바일 디바이스는 사용자가 화면 반사를 일으키는 밝은 야외에서 사용하는 경우가 많기 때문에 그러한 경우가 더 많다.
• 요소들 사이에 충분한 대비를 가지도록 대비율(Contrast ratio)만 체크하면 된다. 대미율은 한 색상이 다른 색상에 비해 얼마나 다른지를 나타내는 지표이다.(보통 1:1 or 21:1로 표기됨) 두 숫자들의 차이가 클수록, 두 색상의 선명도 차이가 상대적으로 커진다.
• W3C는 본문과 이미지 텍스트에서 아래의 대비율을 권장한다.
  • 작은 텍스트는 배경 대비 4.5:1의 대비율이 있어야 한다.
  • 큰 텍스트는(bold 14pt / regular 18pt이상) 배경 대비 3:1의 대비율이 있어야한다.
  • 이 가이드라인은 시력이 좋지 않거나 색맹인 사용자, 시야가 좋지 않은 상황에서 스크린에서 텍스트를 보고 읽을 수 있도록 해준다.

가독성이 좋은 텍스트를 적용하는 것 외에도, 대비는 화면의 특정 요소에 대해 사용자의 주의를 끌게 해 줄 수 있다.

일반적으로, 중요한 콘텐츠나 주요 요소를 강조하는데 강한 대비를 사용한다. 사용자가 어떤 것을 보거나 클릭하게 하고 싶다면, 눈에 띄게 만들어라!

Reference

• https://brunch.co.kr/@monodream/8