관심사2/일 이야기

탭 디자인 깎는 노인

MIRiyA☆ 2011. 7. 8. 10:26

요즘에 안드로이드용 서비스 개발 프로젝트를 진행하면서 몇가지 디자인 난제를 만났습니다.

오늘은 탭 디자인에 대해서 이야기하고 넘어갈게요.




위는 제 서비스에 들어가는 상단 탭입니다. GNB는 아니구요, 하위 항목에 6가지 정보를 보여주는 탭이에요. 588x40px의 이미지입니다.






이 원본 이미지를 98픽셀씩 슬라이스해서 주게 되는데.. 이게 이대로 만들 경우 아래와 같은 문제가 생깁니다.






첫번째 셀은 괜찮은데, 그 다음부턴 왼쪽 선 하나가 비게 되는거죠. 피곤합니다 참 ㅋㅋ


처음으로 저 작업하는 모습 블로그에 공개하는것 같은데, 위 버튼 클릭해주시면 약 파는데 도움이 됩니다.


그러자고 선을 중복시키자니 두개씩 붙어서 흉하기는 마찬가지일것 같고.. 노란 바탕에 가독성도 문제입니다. 그래서 다른 회사들은 탭 디자인을 어떻게 하나 참조해봤습니다.




 


좌측은 미투데이 앱이고, 우측은 다음 카페 앱입니다. 미투데이처럼 아예 칸을 없애버리려니 텍스트가 너무 길고 들쭉날쭉입니다. 게다가 아이콘도 없으니 기준을 줄게 없어서 굉장히 무질서해질게 뻔합니다. 아무래도 우측의 다음 카페 같은 모양으로 가야할것 같은데.. 






다음과 네이버입니다. 둘 다 유사한 방식으로 도망갔네요.. 이 친구들은 뒤쪽 배경이 어둡기 때문에 저런게 가능할것 같고, 제것의 경우 버튼 배경도 흰색, 페이지 배경도 흰색이라 구분선이 필요합니다 ㅠㅠ





이건 다음의 방식인데.. 꽤 괜찮습니다. 다만 이건 슬라이스 할때 문제가 됩니다. 위쪽 라운드는 그렇다 치고, 아래쪽 라운드가 슬라이스 영역 밖으로 나가거든요. 현재 페이지 구조상 그냥 이미지만 수정해서 바꾸기엔 힘듭니다. 소스를 건드려줘야 하는 문제인데.. 지금 과로에 시달리는 웹개발자분에게 수정해달라 하면 애플 시네마 27인치로 내려찍을듯. 저 혼자 SFTP로 이미지만 교체해서 효과를 보는 방법을 찾아야겠습니다.




네이버의 방식. 저렇게 밑을 터버리는것도 좋을텐데, 면적이 상대적으로 작아서 가능한거고, 차지하는 면적이 훨씬 넓은 제 사이트에선 선이 글씨에 묻혀 구분이 안가버립니다. 어떻게 해야할까 ㅠㅠ





이건 애플의 방식입니다. 


애플의 경우 제품의 하드웨어 자체도 참 멋지지만, 웹 사이트 디자인을 굉장히 맛깔나게 잘 하기로도 업계에선 유명합니다. 굉장히 배우고 참조할게 많지요. 애플이 예전부터 밀고 있는 스타일이 있는데, 뭐랄까.. 평면에 인쇄된 글씨나 그림이 아니라, 종이를 잘라내어 뒷면이 비치는듯한 느낌을 주는 오묘한 스타일을 쓰고 있습니다. 전 이게 무척 맘에 들어 지금부터 배끼려고 합니다.







뭐 대략 이런식 이해하시나요? 굵은 글씨 이미지엔 안에 그림자를 넣는다던지 해서 독특한 효과를 주고 있습니다. 지금 따둔 샘플이 거의 없어서 이것만 보여드립니다.





자 다시 일단 오리지널입니다. 뭐 선택된 탭이 노랗게 확 눈에 띄는데, 문제는 가독성이죠.. 노란색에 흰색인지라 가독성이 완전 안습입니다. 눈이 아플 지경이네요. 일반인이 이정도인데 색약자나 저시력자들은 제게 욕을 하겠지요. WCAG2.0 접근성 규정을 들이대고 자시고 할것도 없이 이미 딱 봐도 안습인게 느껴집니다. 툴로 재보니 컨트라스트가 1.37:1이 나오네요. 이 정도면 끝장 수준. 뭐 WCAG2.0 권고안은 4.5:1인데, 노란 바탕에선 답 없습니다. 가독성을 올리자고 저 흰글씨를 검정 글씨로 바꿔버리면 디자인이 완전히 쓰레기가 될게 뻔하죠. 생각해보세요. 샛노란 바탕에 검정 글씨면 뭔 과속방지턱이랍니까? 아니면 꿀벌? ㅋㅋㅋ 뭔가 디자인적으로 돌파구가 필요합니다.





고민 끝에 글자에 Outer Glow를 줘서 약간 대비를 올려주었습니다. 여전히 보기 힘들지만 그래도 좀 나아졌네요. 음.. 가독성은 나중에 생각하기로 하고, 일단 선 겹치는 문제를 먼저 해결해보죠.





문제는 노란 칸 색에 회색 테두리가 겹치니 발생하는 괴리감입니다. 이걸 없애기 위해 일단 선 색을 회색에서 노랑으로 바꿔봤습니다. 뭔가 괜찮아보이긴 한데, 중간에 글씨색의 회색이랑 너무 안어울리네요. 회색은 탁색인지라 굉장히 조심해서 사용해야하는 색입니다. 원색이랑 회색이랑 섞이면? 저렇게 끝장이죠.





뭐 여튼 그렇다 치고.. 시험적으로 선택된 셀에 Inner Glow를 넣어서 쑥 들어간 느낌이 들게 해봤습니다. 음 좀 약한 느낌이네요..





노란 선들이 너무 키치해보여서, 이번엔 하나하나 떼어봤습니다. 이런식이면 선 겹쳐서 이상해보이는 문제는 없죠. 자기가 자기것만 신경쓰면 되니.. 근데 선이 두개씩 근접하니 세로선이 진해보이는 착시 현상이 일어납니다. 뭔가 답 안나오네요..





아예 노란색을 쌔리 부어버렸습니다. 그리고 선택된 셀은 약간 더 어둡게 처리해줬습니다. 선택된 셀 부분은 컨트라스트가 충분해서 가독성은 대략 좋아보이는데, 옆에 선택 안된 애들은 좀 이상하군요.. 아 토할것 같네요.





이번엔 선에 색상을 넣어서 일체감을 줘봤습니다. 싱크로가 잘 맞네요. 색을 더 어둡게 올려볼까요?





음, 쑥 들어간 느낌이 한결 살아납니다. 괜찮아졌네요. 근데 막상 이걸 전체 웹 페이지에 조화시키면 모양이 구려보입니다. 웹 페이지 상단 GNB가 푸른색 톤이거든요. 사이코같은 배색이죠. 푸른색 GNB 바로 아래에 기~일쭉한 노란 탭이라니.. 완전 애들 분위기 납니다.





그래서 채도를 싹 빼서 회색톤으로 가봤습니다. 다 괜찮은데 회색 실선이 너무 투박합니다. 마치 흰 A4 용지에 샤프로 그린 느낌이라 썩 느낌이 좋지가 않습니다.





Opacity를 조절해서 좀 더 연하게 만들어봤습니다. 음 좀 나아진것 같네요. 근데 선이랑 면이랑 겹친 부분이 진해지고, 선과 면이 만나는 부분이 1px 정도 움푹 들어가보이는 착시가 일어납니다. 선이랑 면의 간섭을 없애야겠네요..





다듬으니 한결 깔끔해졌습니다. 뭔가 완성에 가까워지는 느낌.. 하지만 저 회색 선은 여전히 진하군요..





아싸리 더 내려버렸습니다. 근데 이번에는 선택된 셀의 회색 글씨가 너무 탁하네요. 회색 바탕에 회색 글씨라니 썩 좋지 않은 배합입니다..





에 일단 안에 Inner Glow 넣어서 쑥 들어간 효과 줘봤습니다. 글씨색은 정말 못봐주겠습니다.





선택된 셀의 색을 더 어둡게 하고, 글씨색을 흰색으로 반전시켰습니다. 약간 나아지려고 합니다만, 선택된 셀 주위로 좀 더 연한 테두리가 싸고 돌아서.. 종이를 칼로 잘라낸듯한 그런 효과가 안나네요. 저 테두리를 없애야겠습니다.





굿. 느낌 있습니다. 정말 쏙 들어간것 같네요.





너무 어두운 감이 있어 선택된 셀 색깔을 더 연하게 주었습니다. 가독성은 다시 떨어지는군요.. 하지만 전체 페이지 배색과 조화시켜보니 썩 나쁘지 않아 이런 식으로 가게 될 것 같습니다. 여기까지가 제 감각의 한계입니다.






흠.. 괜찮아진것 같나요?





에 근데 지금 와서 이거 보면 참 골때립니다. 저를 비웃기라도 하는것 처럼 애플은 회색 테두리를 쓰고 있어요. 잘 보시면, 분명히 회색의 테두리가 파란색 주위로 1px 있음에도 불구하고 거의 느낌이 탁해지지 않습니다. 신기하네요. 대비차이가 너무 커서 회색이 눈에 띄지 않네요. 이런식으로 회색에 걍 노란색을 넣어볼까요?






어?? 해보니 거의 티가 안나는데요? 그냥 해도 될 기세네요. 







예전거랑 비교해봤습니다. 아무래도 첫번째것보다 느낌이 구리네요.. 

첫번째것처럼 진한 테두리를 넣어보겠습니다. 





읭.. 좀 이상합니다. 상하단의 회색 선이 뭉쳐보이는군요.





상하단의 회색 선을 밀어버리고, 좌우측의 회색 선만 남겨봤습니다. 느낌이 의외로 괜찮네요.






오.. 이런식으로 하니까 좌우의 회색 선이 느껴지지 않네요. 근데 Inner Glow가 너무 진해서 촌스러워보입니다.





약간 연하게 넣어봤습니다. 에.. 뭐 최상은 아닌데 괜찮아졌네요 조금.





에.. 아무래도 그림자는 빼야겠습니다. 사이트 전체적으로 그라데이션을 억제하며 플랫하게 뽑고 있는데, 혼자 그림자가 들어가니 구정물에 담갔다 뺀 것 같은 느낌이 듭니다. 게다가 노란색이니 더 더러워보여요.. 그냥 이걸 쓰려면 애플처럼 쑥 들어간건 포기해야합니다.







아까 만든것과 비교.. 걍 아까 만든 회색 버전 써야겠습니다.

사이트 전체적으로 파랑이니 노랑이니 채도가 높은 편이라, 여기서 색을 빼서 차분하게 잡아줄 생각입니다. 게다가 이거 같은 회색톤이라 이미지 슬라이스할때 문제가 없어서 좋네요. 좌로부터 98픽셀씩 자르되, 옆에 회색선을 남기고 잘라주면 문제가 없습니다.




대략 이런 식이지요. 우측에 회색선이 들어가는게 포인트입니다. 음, 그러면 맨 오른쪽의 항목6은 어떻게 하냐구요? 회색선 없이 어두운 회색 영역을 1px 더 길게 해버리고 때우면 되겠죠. 어차피 화면이 막 전환되는데 98px중 1px이 더 길다고 느낄만한 사람 거의 없을겁니다. 수백명이 똑같은 자세로 서있으면 한놈 다른게 티가 나지만, 이건 비교 될 부분이 없기 때문에 약간의 오차가 나도 눈에 띄지 않는거죠.


제가 만약 디자이너라면 뒤에 패턴을 깐다던가 하는 방법으로 세련되게 하겠지만, 음, 디자이너도 아닌 사람이 짧은 시간동안 확 개선된 효과를 보기엔 참 힘들군요. 창의력과 경험의 부족을 절감하고 있습니다. 이런 일 계속 하면 아무래도 짧은 시간안에 뽑아낼 수 있는 완성도가 더 올라가겠지요. 디자인적으로는 이렇다 치고, 결국에 문제는 HTML 코딩입니다. 선이 겹친다면 겹치지 않게 소스단에서 양념을 잘 뿌려주면 되는데.. 지금 상황이 그냥 보통 그림이랑 선택된 그림이랑 전환시키도록 되어있기에.. 다시 말해 6개씩 두 세트의 이미지를 단순 교체하는 스타일이기 때문에 힘들어집니다.




좀 더 시간 여유가 있었다면 구글처럼 CSS Sprite 기법으로 이미지 한장으로 깔끔하게 때울 수 있었겠죠. HTML 요청을 최소화해서 서버의 부담을 줄이는 동시에, 마우스 롤오버 했을 때 이미지가 로딩되느라 잠시 하얗게 보이는 문제까지 해결할 수 있는 굉장히 세련된 방법입니다. 이미지 한장만 불러와서 그걸 갖고 요리조리 옮기며 보여주는거니 과도하게 여러 파일 불러들이지 않아도 되지요. 





애플의 경우 원래 이런 방식을 쓰다가.. 좀 더 하드한 방법으로 가버렸죠.



  


이런식으로 각 배경과 글씨까지 떼버렸습니다. 징글맞은 놈들.. 이건 뭐 이길수가 없군요. 저희는 CSS Sprite 적용에 대해 긍정적이었지만, 배경과 글씨를 분리하는 문제로 고민하다가 걍 시간 오래걸리니 패스하자고 해버렸습니다. 애플은 참 웹 페이지에서까지 남다른 완벽주의를 보여주는군요. 




일단 이 스타일로 만족하렵니다.

에.. 근데 사무실 모니터로 보니 테두리 가독성 너무 떨어져보이네요.. 테두리 명도좀 낮추던가 해야겠네요.





#E3E9EB 색상의 테두리를 제가 좋아하는 #D6D6D6 색상으로 교체했습니다. 저 색상을 좋아하는 이유는 발음이 찰지고 포토샵의 도구모음 바탕색이기 때문입니다. 어째 곳곳에 써먹을 수 있어서 좋군요. 저는 #666666 - #999999 - #D6D6D6 이런식으로 보통 세가지만 사용하는걸 선호합니다. 에.. 일단 여기까지 눈에 익숙해졌는데 나중에 보면 또 어떨란지 모르겠습니다. 좀 더 좋은 디자인이 나올 수 있을텐데 아쉬움을 뒤로하며 작업은 마쳐야겠네요. 이런데 작업이 오래걸린다고 생각할수도 있지만, 한번 이렇게 정해진 디자인은 뒤에서 최소 2번 이상은 재사용할 것이기 때문에 처음 잡아놓는게 중요합니다. 일관성 있게, 줄 맞추고, 촌스럽지 않지만 명료하게.. 아.. 근데 어째 저 결과물도 뭔가 부~ 한 느낌이 들어보이네요 ㅠㅠ 디자인은 디자이너에게.