본문 바로가기
개발이야기

On / Off 상태 표시 UI에 대한 단상

by ictlab 2012. 10. 2.








어떤 옵션의  체크 상태나 현재 상태를 표시할때 2가지 종류를 어떤 색깔로 하는것이 좋을까?


옵션이 켜졌을때를 Lime(밝은녹색)으로 하고 꺼져 있을때 Red(적색)으로 하는것을 생각해 볼수 있는데 

이 경우에는 적색이 표시될때 옵션이나 상태가 켜져 있다고 생각하는 사용자도 있을 수 있다.  

일반적인 예로 Motor Alarm 표시의 경우 적색이 켜지면 Alarm이 발생한 상태이기 때문이다.


그렇다면 적색이 Alarm ON상태이고 off 상태는 Gray(회색)으로 하는것은 어떨까?

이런 방식이면 모든 옵션의 표시할때 다음과 같은 규칙으로 일관성을 유지할 수 있다.

상태가 ON이면 Lime(밝은녹색)또는 Red(적색) 으로 표시를 하고 상태가 OFF 이면 Gray(회색)으로  표시를 하는것이다.



하지만 이 경우에도 생각해볼만한 부적한 경우가 발생한다.


CheckBox를 만들고 의미(Caption)를   "Skip Align Vision" 이라는 용도로 사용한다고 하자

메인 화면에 위 체크 박스의 상태를 표시할때.. 체크 상태를 Lime(밝은녹색)으로 표시하고 , 체크 안된 상태를 회색으로 표시한다면 얼핏  문제가 없어보일것 같지만

사용자 관점에서 Lime(밝은녹색)은 정상적인 상태를 나타낸다.

하지만 이 체크 박스는 Align Vision을 Skip하겠다는 비정상적인 상태를 선택하는 옵션이고 이것은 장비가 정상적으로 동작하는 상황이라고 볼수 없다. 

그렇기 때문에 이런 용도의 의미에서는 Checked 상태나 ON 상태일때 Red(적색) 으로 표시를 하고 OFF 상태일때 Lime(밝은녹색)   으로 표시하는것이 사용자 입장에서는 적절하다.


메인화면에 적색이 표시되고있다면 무엇인가 잘못된 상황, 비정상적인 상황이라고 인식시켜주는  것이 장비 UI 에 있어서는 올바른 방식이라고 보기 때문이다.


정리를 하면 옵션이나 현재 상태를 표시하는것은 다음과 같은 기준으로 하는게 어떨까한다.


 상태 내용

 ON 상태 표시

 OFF 상태 표시

 긍정적인 옵션

 Lime(밝은녹색)

 Gray(회색)

 부정적인 Alarm ( 모터 Alarm등 )

  Red(적색) 

 Gray(회색)

 부정적(테스트) 옵션 (ex) skip , test

 Red(적색) 

  Lime(밝은녹색)

 추가 기능 사용 여부

  Lime(밝은녹색)

 Gray(회색)


아주 단순한 Color 선택임에도 불구하고 UI를 만드는 개발자들이 일관성이 없이 색깔을 표시하기 때문에 화면 전체 옵션 상태가  사용자 관점에서 봤을때 모호하게 표시되고 쉽게 판단할 수 없는 경우가 종종 보인다.


ON/OFF 상태 표시 뿐 아니라 각각의 UI 콤포넌트를 사용함에 있어 사용자 관점에서 일관성을 유지하는 것은 설비 UI를 개발하는 사람의 기본적인  책임 중에 하나라고 할 수있다. 


최고의 개발자는 제대로 만들고 일관성을 유지하는 사람이고

최악의 개발자는 제대로 만들지도 못하면서 일관성도 없는 사람이다.


단순한 UI 하나를 만들더라도 그 UI, 기능의 존재의 이유, 동작 방법, 사용자의 입장에 대해서 한번이라도 더 생각하고 구현하는 자세가 필요하다.