낚시제목 말고 정확한 제목을 굳이 적자면
‘디더링된 그라디언트를 그대로 나인패치로 쓰지마세요’ 임.
포토샵에서는 그라디언트툴에 기본적으로 dithering 옵션이 있는데, 켜져있는 경우가 간혹 있음.
▲ dither 옵션이 켜져있을 때
이 옵션이 켜져있을 때의 그라데이션은 아래 그림의 왼쪽과 같고, 옵션이 없을때는 오른쪽과 같다.
쉽게 말하자면 좀 더 눈에 자연스러운 계조를 만들기 위해서 각각의 색과 색 사이를 병치혼합으로 표현하는 걸 말하는데, 특히 그라디언트 양쪽 색상의 차이가 별로 없을 경우 dithering 의 힘이 크게 나타난다.
문제는 이게 눈에 쉽게 보이지 않기 때문에, 나인패치로 따올 때 별 생각없이 따오는 경우가 많다. 하지만 dithering 된 그라데이션은 사실 확대해보면 위 그림의 왼쪽같이 되어 있으므로, 이걸 나인패치로 만들면 이상한 줄무늬가 생기게 된다. (눈이 민감한 사람에게만 ㅡ,.ㅡ)
▲ dithering 먹은 그라데이션으로 만든 나인패치
▲ 나인패치가 적용되었을때.
▲ 이 나인패치를 고대비로 효과를 줘보면 뭐가 문제인지 보이기 시작…
사실상 왠만큼 눈으로 봐서는 모를 일이지만… 거슬리는 사람들을 위해서.
이 문제를 해결하는 방법은 1) dithering 끄고 그냥 만든 그라데이션으로 나인패치를 만들거나 2) dithering 들어간 그라데이션을 나인패치로 만들게 아니라 그냥 타일링 해버리는 것.
오늘 점심먹으러 간 청국장집에서 내놓은 참기름병. 기름관련 병들은 이제 저런걸 하도 많이 봐서 놀랍지도 않다. 다만 오늘 기름병을 감싸고 있던 저것은, 암만 봐도 양말이었다. 양말.
계단 표시를 픽토그램과 영문으로 처리한 것 까지는 ok. 외국인이 많이 오는 건물인가보다 하겠는데. 오른쪽 층별안내도는 왜 제목만 영문인가. 이런 바보같은 경우를 봤나.
안드로이드 4.0 디자인 가이드라인에 분명 메뉴키를 빼라 했지만, 제조사들은 최신 제품에 여전히 메뉴키를 고수하고 있다. 아마도 하위버전 호환성때문에 울며 겨자먹기로 메뉴버튼을 가져가는 것 같은데, 최신 안드로이드 앱에서는 하드웨어 메뉴키가 존재하는 것만으로도 사용성에 엄청난 타격을 입는다.
▲ LG 옵티머스 G pro(왼쪽) 와 삼성 갤럭시 노트 II (오른쪽) 의 하드웨어키
결론부터 말하면, 화면에 보여야 할 액션오버플로우(action overflow) 버튼이 사라지는 현상인데, 아래 그림과 같다. 똑같은 화면인데 오른쪽 스크린에는 버튼이 아예 없다. 하드웨어 메뉴키를 누르란 소리다.
*'액션오버플로우(action overflow)'는 액션바를 사용하는 안드로이드 4.0 이상의 앱들에서, 공간이 부족해서 나오지 못하는 액션아이템들을 한데 모아놓는 버튼이다. 구글 기본앱은 물론이고, 4.0 이상의 기본 가이드라인을 준수하는 앱이라면 대다수가 사용하고 있다.
▲ 하드웨어키가 없는 안드로이드(왼쪽) 하드웨어 메뉴키가 있는 안드로이드 (오른쪽)
물론 하드웨어 메뉴키를 누르면 동일한 기능이 작동하기 때문에, 기능 자체가 없거나 하는 것은 아니지만. 메뉴키 자체가 available 하다는 사실을 알려줄 수 없으니 사용성에 있어서는 정말 치명적이라고 할 수 밖에.
제조사가 이런 선택을 할 수 밖에 없는 이유에는 아마도 여러가지 이유가 있을텐데…
1) 그 동안 사용하던 하드웨어 홈버튼을 포기할 수 없어서.
(하드웨어 홈버튼은 사용성에 좋은 선택이니 어느 정도 이해함)
2) 하드웨어 홈버튼을 그대로 사용하자니, 소프트웨어 키를 사용할 수 없음. (중복됨)
3) 뒤로가기 버튼도 하드웨어 키로 처리
4) 홈버튼을 하드웨어로 중앙에 박았다면, 이제 남은 자리는 한 자리. 여기에 ‘멀티태스킹 버튼’을 넣을 것인가? ‘메뉴 버튼’ 을 넣을 것인가?
5) 안드로이드 2.x 대에서는 액션바를 사용하지 않으니, 메뉴키를 사용해야하는 상황이 생기면 어딘가에 메뉴키가 존재해야 함. 소프트웨어 키 영역이 아예 존재하지 않기 때문에, 울며겨자먹기로 하드웨어 키로 존재해야 함.
6) 따라서, 남은 공간에 ‘멀티태스킹’ 같이 좋은 버튼 놔두고 ‘메뉴 버튼’을 넣을 수 밖에.
아마도 이런 고민의 결과가 아닐까 싶다. (이런 고민을 하기는 했겠지?)
하드웨어 키를 사용하지 않는 경우에도 이런 하위호환성을 위해서 소프트웨어 키 영역에 ‘메뉴 버튼’을 넣어서 처리하는 경우가 있다. 하지만 이건 어디까지나 소프트웨어 키를 쓰는 경우니까. 지들 맘대로 넣었다 뺐다가 되겠지.
▲ 소프트웨어 키를 사용하는 경우 하위호환을 위해 임시로 배치하는 메뉴키 (아우 궁색해보여)
더 큰 문제는 이런 액션오버플로우 버튼의 사라지는 현상을 간단한 옵션처리 등으로 막을 방법이 없다는 것이다. 안드로이드 디자인 가이드라인에서는 단지 ‘한 화면에 메뉴키가 2개나 존재할 수 없다’ 라는 (이것들아, 하드웨어 키는 화면에 없단 말이다!) 이유로 허용하지 않고 있다.
내가 제조사라면 어떻게 했을까?
메뉴키가 사용 가능한 경우 하드웨어 메뉴키가 깜빡 거려주는? 혹은 라이팅을 더 세게 좀 넣어주는 방법? 혹은 메뉴키 라이팅이 붉은 색으로 변해? 뭐 그런 식으로라도 처리하지 않는 이상. 누구도 이 화면에서 메뉴키를 쓸 수 있다는 걸 알 수가 없을 것이다.
결론은 이런 디자인 가이드를 만든 안드로이드가 나쁘다는 식의 결론을 내릴 수 밖에.
액션오버플로 버튼을 항상 뜨도록 허하라! 허하라!
힐링캠프 한석규편을 보는데, 한석규가 그런 질문을 한다.
"나는 왜 연기를 시작했는가?"
그리고 한석규는 수시로 후배들에게 같은 질문을 던진다고 한다. "넌 왜 연기 시작했니?"
근데, 사실 이 질문은 우리 모두에게 잠시 멈춰서서 매 순간 던져야 할 질문이 아닌가 싶다. "나는 지금 이 일을 왜 하고 있지?". 무엇을 계기로 나는 지금 이런 일을 하고 있는걸까?
그 질문에 대한 대답 없이, 쳇바퀴 돌듯 살아가면 한참 뒤에 가서 누구를 원망할 수 있겠는가.
balsamiq 같은 류의 UI 목업 툴들이 이래저래 많이 쏟아져 나오는 거 같다.
오늘 써본건 www.fluidui.com 인데, 괜찮다 싶다가도 역시 한계를 느낌.
디자이너한테 필요한 프로토타입이라는게 어떤 수준인가?
개발자에게 요구하고 싶은 것을 전달하는 게 목적이라면, 현존하는 UI 목업툴은 디자이너보다는 동작기술서를 작성하고 싶어하는 누군가에게 어울릴 듯. (물론 디자이너에게도 이런 역할이 있지만)
근데, 그렇게 놓고 보자면 동작기술서를 파워포인트가 아닌 UI 목업툴로 만드는게 그렇게 의미 있는지 모르겠다.
- 더 시간이 많이 걸리고 (파워포인트가 익숙한 사람에게는)
- UI element 가 매우 제한적이며 (템플릿에 있는 것만 쓸 수 있으니)
- 범용적인 포맷이 아니며 (따라서 여러 사람에게 공유하기 어렵다)
- 결국 디테일한 화면 디자인을 전달할 목적은 달성할 수 없음.
따라서 이런 UI 목업툴들이 결국 매우 제한적인 상황에서만 쓰일 수 있다는 게 현재까지의 내 소감.
