메인 블로그 사이트를 브런치 매거진으로 옮겼습니다. 미디엄이 좋긴 한데 한글 폰트가 미려하지 않다는 점과 한국어 사용자들이 상대적으로 적다는 점이 계속 마음에 걸려서 브런치로 이동하게 되었습니다.
당분간은 미디엄과 브런치 두 곳에 동시에 올릴 계획이지만 추후 이 블로그들을 영문화 하여.. 미디엄은 영어로 된 글을 올리겠습니다. 감사합니다.
비트윈 아이콘의 변화 과정
‘다수가 선호하는 디자인’ 이라고 해서 무조건 그 방향으로 디자인을 정하는 것은 그 상황과 맥락을 이해하고 있지 않으면 위험한 결정이 될 수 있습니다.
UX 디자인을 하면서 주변의 의견, 그리고 동시대의 앱들을 많이 참고하는 편이지만 최종 결정의 순간에는 외부의 의견보다는 비트윈 전체의 철학이나 감성에 더 근접한 쪽으로 정하려고 노력합니다.
디자인을 진행할 때 완전히 새로운 사용성이 아니라, 사용자에게 익숙한 사용 패턴을 활용하는 경우 대부분의 UI의 요소들은 보편적인 사용성이 존재하고, 합당한 논리를 적용한다면 상황에 부합하는 디자인을 하는 프로세스가 몇 가지 방법론이 존재하는 것 같습니다.(미적인 부분은 추가적인 고민이 필요합니다.) 그런데 앱 아이콘의 경우 해당 앱으로 진입하는 버튼의 개념 이상으로 복잡한 성질을 가지고 있습니다.
그래서 항상 앱 아이콘 디자인은 모든 작업의 제일 마지막으로 우선순위를 ‘미뤄두고 ’ 작업을 하게 되는데, 우선 심적으로 부담이 있기도 하거니와 출시 직전까지 급변하는 내부 UI 요소들을 완결하고 나서 그 이미지들을 단 하나의 아이콘으로 차분하게 녹여내기에 가장 마지막 순서가 적합하기 때문입니다.
새로 앱의 버전을 올리며 디자인을 확 바꾸거나, 또는 새로운 앱을 출시할 때 내부적으로 항상 어마어마한 도전정신과 그에 준하는 노동을 요구하게 됩니다. 항상 ‘더 나은 ’ 디자인은 존재하지만, 모두를 만족하게 하는 ‘궁극의 ’ 디자인은 없다고 느끼기에 결국 과감한 모험과 인고의 시간을 투자하여 적어도 스스로 만족하는 디자인을 만들려고 노력합니다.
이번에 새로 3.0을 디자인 하면서 역시나 마지막으로 디자인 작업을 진행했던 부분이 앱 아이콘이었습니다. 이제부터 비트윈 이전 버전의 앱 아이콘들을 시간 순서로 보며 새롭게 바뀐 아이콘이 탄생하기까지 거쳐 왔던 과정들, 그 인고의 시간을 공유하려고 합니다. (눈물..)
앱 아이콘의 변천사
1. Between — Beta
로고와 아이콘을 보면 알 수 있듯 초기의 비트윈은 다듬어지지 않은 상태에서 브랜드의 정체성을 갖추어 나가는 과정이었습니다.
앱 내에서는 버튼의 색이나 포인트 컬러 모두 메인 컬러인 민트색을 사용하여 앱 내 디자인의 통일성을 높였지만, 로고 자체는 모노톤의 타이포와 붉은 포인트 컬러를 가진 별 모양이 시선을 집중시키는 요소였습니다. 흰색 배경에 주로 놓였을 상황을 고려할 때 로고의 대비 감은 확보했지만 내부 UI 의주요 컬러인 민트색은 제외되어있는.. 로고만 보자면 어딘가 요플레 로고가 생각나는 그런 배합이었습니다.
2011년도에 비트윈 앱을 iOS / Android 모두 오픈 베타의 형식으로 대중에게 처음 공개했었고, 이것이 비트윈의 공식적인 첫 아이콘입니다.
참고* 애플에서는 베타의 명칭을 사용하지 못합니다. 앱을 베타로 등록한다면 리젝 사유가 됩니다.-명칭에 주의 하세요
(2.9 Apps that are “demo”, “trial”, or “test” versions will be rejected. Beta Apps may only be submitted through TestFlight and must follow the TestFlight guidelines
https://developer.apple.com/app-store/review/guidelines/#functionality)
첫번째 아이콘은 비트윈의 상징인 별 모양의 채도를 높여 가장 먼저 시선을 유도하였고 옅은 질감이 있는 흰색 배경과 검은색의 알파벳 “B”의 대비로 주목성을 높여주었습니다. 당시 앱 디자인 전반에 흐르던 사조인 스큐어모피즘의 영향을 받아 약간의 엠보싱처리로 아이콘을 완성하였습니다. (사내 코드명으로는 전체적인 색감과 모양이 자일리톨을 연상시킨다 하여 자일리톨 아이콘으로 불리곤 합니다.)
2. Between — 1.0
오픈베타 출시 이후 사용자들의 피드백이 어마어마하게 들어왔었고 전부는 아니지만 비트윈에 맞는 방향성에 해당하는 내용을 반영하며 업데이트를 진행하였습니다. 그와 동시에 정식버전인 1.0 출시준비를 위해 로고를 가다듬고 브랜드로의 가치를 높이기 위해 이미지를 단순화 하는 작업을 진행하였습니다.
비트윈 1.0 버전의 아이콘, (사내 코드명으로는 ‘청자 ’로 불립니다) 브랜드 컬러를 강조하기 위해 민트색을 앱 전반에서 부각했고, 아이콘의 배경색 역시 민트색으로 바꾸어 통일감을 유지하였습니다. 그 위에 올라가는 로고 컬러를 흰색으로 단순화하였습니다. Between 1.0을 작업할 때 UI를 대변하는 주요 키워드들이 ‘영롱함’, ‘산뜻함’, ‘말랑말랑함’ 등 이었고 이것을 아이콘으로 표현 하다 보니 달달한 젤리의 질감을 느끼게 해주는 효과들이 많이 들어갔습니다.
+ 덧 : 아이콘 배경의 선은, 밤하늘의 별을 장 노출하면 생기는 별의 궤적(LONG EXPOSURE STAR TRAIL)을 표현한 것입니다. (아무도 몰랐겠지만)
http://www.photographymad.com/pages/view/long-exposure-star-trail-photography
Between — 2.0
Between 2.0 이 되면서 앱 전반에서 큰 변화가 있었습니다. 앱 생태계 전반에서 디자인 사조에 대한 큰 변화가 생겼고 비트윈도 이에 영향을 많이 받았습니다. 안드로이드의 머테리얼 디자인 발표, 그리고 애플의 iOS 7버전 발표로, 모바일을 주도하는 두 플랫폼 모두 장식적이지 않은 심플한 디자인을 전면으로 내세웠고 (저항할 힘조차 없는 우리 비트윈은 당연히) 플랫디자인으로 디자인을 급선회 하였습니다.
iOS 7 vs iOS 6 Side-by-Side Visual Comparisons
http://osxdaily.com/2013/06/11/ios-7-vs-ios-6-visual-comparison/
성향으로만 보자면 비트윈은 스큐어모픽한 이미지가 더 맞을수도 있었는데요, 비트윈을 주로 사용하는 대상이 고등학생 및 대학생을 포함한 스마트폰에 친숙한 젊은 연령층을 주요 타겟으로 하고 있었고 연애 초기의 느낌에 맞춰 귀엽고 풋풋한 이미지를 많이 추구하기 위해서는 상대적으로 장식적이고 꾸밈의 요소가 많은 스큐어모피즘이 더 효과적이었습니다.
반면 플랫디자인은 스큐어모피즘과 비교했을때는 상대적으로 세련되고 정제된 이미지가 강조되어 점잖은 느낌을 주기에 좋았고, 앱을 고급지게 만들거나 정갈한 완성도를 높여주기에 수월했습니다. 그래서 2.0부터는 질감에서 표현하는 아기자기한 조형 언어를 포기하는 대신 상큼한 색채와 정갈한 그래픽으로 성숙미를 높이려고 시도하였습니다. (대세가 그러하니 따라야 하는 무언의 압박감도 작용하였지요)
플랫 디자인이 적용되면서 로고 또한 그에 맞게 변화의 필요성을 느꼈고, 다시 한 번 로고의 큰 변화가 있었습니다. 기존 로고의 텍스트가 귀엽고 통통했던 느낌이라면 개선된 로고는 살집을 줄이고 성장한 느낌을 주었달까.. 정제되고 세련된 플랫 디자인의 이미지를 녹여내었습니다. 그리고 비트윈 로고를 브랜드 심볼로 활용하기 쉬운 형태로 타입을 쪼개서 외부 업체와의 협력이나 홍보용 자체 이미지 제작에도 쉽게 활용하도록 만들었습니다.
비트윈 2.0 버전의 아이콘 (iOS) 아이콘의 가장 큰 변화는 아이콘의 플랫한 질감도 있었지만 별과 알파벳 ‘B’ 의 비중이 상반되게 바뀌었다는 점이었습니다. 로고의 모양도 기존 로고와 달리 별이 로고의 타이포 좌측에 위치하게 되었고 Between 글씨 이전에 별의 로고가 먼저 눈에 들어오게 의도하였습니다. 동일한 맥락으로 아이콘 역시 별의 사이즈를늘려 알파벳 ‘B’를 포함하는 조형으로 별의 모양이 먼저 눈에 들어오게 하였습니다. 이를 통해 비트윈의 별 모양을 더 강조하여 지속적으로 비트윈의 심볼을 사용자들에게 인지시키려고 노력하였습니다.
추가적인 특이점이라면 동일한 플랫디자인 내에서도 안드로이드와 IOS의 차이가 생겼다는 것. 물론 기존에도 OS 특성을 따라가기 때문에 iOS / Android 간의 앱아이콘 디자인의 사소한 차이는 있었지만 머테리얼 디자인 발표 이후 구글에서 적극적으로 자신만의 디자인 스타일을 요구하기 시작했고 이에 맞춰 앱 아이콘도 반영을 하게 되었습니다. 이 시점을 이후로 앱 아이콘이 동일한 메세지를 전달하기는 하지만 사뭇 다른 모양을 갖게 됩니다.
Between — 3.0
그리고 이것이 내일 발표할 비트윈 3.0의 아이콘 (두둥) 별이 작아지고 별 안에 품고 있는 알파벳 ‘B’가 사라졌습니다. 이 부분은 2.0 때에도 논의되었던 부분이었는데 비트윈 앱의 - (브랜드의) 인지도 측면에서 아이콘에 알파벳이 한 자라도 존재하여야 비트윈을 알아본다는 강력한 의견이 있었기에 알파벳 ‘B’를 빼지 않았습니다. 조형적으로는 깔끔한 것이 더 나아 보였지만 인지도 측면에서 우세하다고 판단되는 디자인을 선택한 셈인데요, 그랬던 비트윈의 아이콘이 드디어 온전히 별만 남게 되었습니다. 사소한 차이가 있다면 앱 전반에서 민트의 톤의 채도가 더 올라가게 되었고 이를 반영하여 아이콘도 전보다 채도가 약간 높아졌습니다.
안드로이드의 아이콘은 원형으로 변경되었습니다 :)
비트윈 별에 대해서는 나중에 따로 언급할 것 같긴 하지만, 세부적인 조형을 더 가다듬었습니다. 실물 제작이나 회전되는 이미지를 활용할 경우 테두리 라인과 중심축을 짜임새 있게 가다듬어 이미지에서 오는 왜곡 현상을 없애주었습니다.
앱 전반으로 흰색 컬러가 기존 보다도 더 많이 들어가게 되었는데 이에 따라 흰색을 배경으로 한 아이콘도 강력하게 등장하였습니다. 하지만 모바일 디바이스 바탕화면에서 실제 사이즈로 적용해 본 결과 주목성이 약간 떨어지게 되어 민트를 배경으로 한 아이콘이 적용되었습니다.
앱 아이콘 디자인을 진행하다 보면, 앱 내부적인 요인 뿐 아니라 디자인 외적인 여러 요인에 의해 영향을 많이 받게 됩니다. 디자인의 숙명이기도 하겠지만 이런 상황에서 적절한 균형점을 잘 찾는 것이 디자이너의 덕목 중 하나가 아닐까 하는 생각을 해보며 첫 글을 마칩니다.
