도움말 및 유용한 정보

게시일: 2014년 2월 28일

다음 도움말을 참고하여 애플리케이션의 사용자 환경을 개선하세요.

애플리케이션이 로드될 때 깜박임

애플리케이션이 WebView로 로드될 때 흑백으로 깜박이는 현상을 경험한 적이 있나요? 이는 일반적으로 테마에 설정된 앱의 창 배경색이 로드된 후 WebView 배경이 흰색으로 깜박임으로 인해 발생할 수 있습니다. 이는 WebView가 CSS를 비롯한 콘텐츠를 로드하기 전에 발생합니다.

흰색 플래시를 제거하려면 WebView의 배경 색상을 설정하세요. 이 색상을 표시하는 데 지연되는 유일한 부분은 WebView를 그리는 모바일 앱입니다.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

Android에서는 Android 앱 리소스 가이드에 설명된 대로 res/values/colors.xml 파일에서 색상 값을 정의하는 것이 좋습니다. 애플리케이션의 리소스에 정의된 색상을 선택하면 코드는 다음과 같이 표시될 수 있습니다.

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

터치 반응

모바일 애플리케이션과 웹 애플리케이션의 한 가지 차이점은 많은 웹 앱에 터치 반응이 없다는 점입니다.

이 문제를 해결하려면 :active 가상 클래스를 사용하세요.

예를 들어 다음과 같은 스타일의 버튼이 있다고 가정해 보겠습니다.

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

눌린 상태는 다음과 같이 표시될 수 있습니다.

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

이렇게 하면 배경 색상과 테두리 색상이 약간 어두워지고 테두리 크기가 줄어들어 버튼이 페이지에 가라앉은 것처럼 보입니다. top 속성은 더 작은 테두리의 균형을 맞추기 위해 위치를 조정합니다.

Sass를 사용하는 경우 darken 및 lighten 믹스인을 사용하여 정확한 16진수 값을 알 필요 없이 요소의 색상을 변경할 수 있습니다. 또는 hexcolortool.com과 같은 온라인 도구를 사용할 수도 있습니다.

시스템 하이라이트

많은 사용자 에이전트는 요소에 일종의 터치 의견을 추가하므로 특정 스타일을 정의할 필요가 없습니다. WebView에서 요소에 주황색이 표시되거나 링크와 요소 주위에 주황색 링이 표시될 수 있습니다.

맞춤 터치 및 포커스 피드백을 추가하는 경우 다음 CSS 속성으로 기본값을 재정의할 수 있습니다.

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

원하는 색상을 설정합니다.

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

이렇게 하면 기본, 포커스, 활성 (또는 '누름') 상태를 비롯한 상태에 따라 버튼 색상이 변경됩니다.

버튼 외에도 입력란과 앵커 태그에 이러한 속성을 설정하는 것이 좋습니다.