제가 블로그를 운영한지 거의 7년이 다 되어갑니다.
블로그의 글감중 가끔은 새로운 소식이나 팁, 리뷰 등이었지만.. 많은 분들이 기억하는 제 블로그의 이미지는 신랄하게 뭔가 까는 글일겁니다. 블로거라는 사람들이 대게 자기가 창조하는것 없이 남이 해놓은거 까기나 하고 입만 살아갖고 씨부려대는 실속없는 종자라고 생각하는 분들이 많을거고.. 저 역시 남이 해놓은거 까기나 했지 직접 뭐 하나 진지하게 만들어본게 없었지요. 하지만 이제 지난 1년간 제가 총괄 기획하고, 여러 사람들과 팀을 꾸려 만들어낸 어플리케이션을 자신있게 소개할 수 있게 되었습니다.
여러분들께 안드로이드용 킬러 어플리케이션, MoLock(모락)을 소개합니다.
모락은 "잃어버린 휴대폰을 찾기 위해 할 수 있는 모든 방법을 총 집합한 강력한 어플리케이션"입니다. 여기에 데이터 자동 백업과 개별 어플 잠금 기능 등이 부가적으로 들어갑니다. 아무래도 만든사람 본인이 설명하다보니 혀에 힘이 빡 들어갈 수 밖에 없는데.. 만든 사람의 자랑이라 생각하시고 양해해주셨으면 합니다. 사실 오늘 자랑하려고 글 쓴겁니다. 제 새끼같은 어플 나왔는지라 엄청 이뻐보이거든요.
이 어플로 뭘 할 수 있는지 기능 한번 소개해드릴게요. 제 블로그다보니 일반 사용자들보다는 개발자나 기획자분들 위주로 좀 필요없는 부분까지 상세하게 이야기해드릴게요. 아까 잃어버린 휴대폰을 찾기 위해 할 수 있는 모든 방법을 동원한다고 했죠? 자.. 일단 휴대폰을 잃어버리고 제일 먼저 해야할건 언제 잃어버렸는지, 어디에서 잃어버렸는지, 지금 잃어버렸는지 되짚어보는겁니다.
예전에 이 글에서 잃어버린 폰을 찾으려고 아주 쌩 쑈를 한 적이 있었죠.. 당시엔 제가 떨군 아이폰 위치 확인하려고.. 분실 신고 후에 전철 한정거장 거리 떨어진 KT 지사까지 찾아가서 위치정보를 받아내야 했습니다. 그리고 그 이후는 다들 알다시피 눈밭을 갈퀴로 마구 파뒤집었지요.. 하지만 이번에 제가 만든 모락을 사용하면 이럴 일이 없습니다.
이런식으로 웹에 접속해서 휴대폰 위치추적을 할 수 있습니다. 만약 휴대폰의 GPS가 켜져있으면 위 화면과 같이 거의 가까운 지점까지 볼 수 있구요, GPS가 꺼져있으면 3G 삼각측위로 오차범위가 좀 넓으나마 확인할 수 있습니다. Wifi가 켜져있다면 GPS보다 더 정확하게 찾을수도 있습니다. 예전에 안드로이드 프로요 버전에서는 어플리케이션이 직접 꺼져있는 GPS를 켜는 기능이 있었는데, 진저브레드부터는 사라져버렸습니다. 모락의 마케팅 포인트중 하나가 아쉽게 사라진 셈이네요. 아마 개나소나 위치정보 켜고 끄면서 난잡하게 사용하여 막아버린게 아닐까 싶습니다. 그래서 꺼놓은 GPS를 자동으로 켜서 탐색하는 기능은 프로요에서만 되고 이클레어나 진저브레드에선 안됩니다 ㅋ
그리고 대강의 위치를 파악했으면, 사이렌 기능을 이용해서 휴대폰에서 시끄러운 사이렌 소리를 울릴 수 있습니다. 그럼 소리를 듣고 휴대폰의 위치를 찾아낼 수 있겠지요. 저 처럼 갈퀴로 파뒤집지 않아도 5분만에 끝날 수 있는 일이었습니다. 당시에 저는 갈퀴로 파다 파다가 저녁때 해가 져서 휴대폰 액정에서 불빛 비치는걸 보고 겨우 찾아냈습니다. 하아.. 이게 되었다면~.. 그리고 여기서 모락의 지독한점 하나가 더 나오는데.. 대부분의 사람들이 휴대폰을 진동모드로 놓고 사용합니다. 그래서 사이렌 울릴때 진동모드일 경우 소리가 나지 않을 수 있지 않느냐.. 할 수 있지만, 모락은 진동모드이건 뭐건 간에 볼륨을 자동으로 최대로 끌어올려 소리를 냅니다.
이 짓 안해도 됩니다..
요거 사이렌 소리 녹음할 때 여러가지 파형의 소리를 녹음해서 휴대폰에 넣은 다음, 하나하나 순차적으로 재생해가면서 어느 소리가 더 멀리까지 들리나 테스트한게 기억나네요. 휴대폰의 볼륨은 한계가 있으니 거기서 최대한 잘 들리는 소리를 찾아야지요. 엄.. 오픈하고나니 스피커가 찢어졌다느니 이런 말이 올라오네요-_-;;
에.. 그리고 모락은 웹+앱의 서비스지만, 앱 만으로도 어느정도 사용할 수 있도록 되어있습니다. 그중 하나가 명령문자 기능인데요.. 휴대폰을 잃어버렸을 경우 친구 폰 아무거나 빌려다가 "명령문자 + 명령" 이런식으로 신호를 보낼 수 있습니다. 예를 들어 제 명령 문자가 miriya일 경우, "miriya 사이렌" 이렇게 보내면 사이렌이 울리는 식입니다. 후배놈 말로는 이걸 응용하여 아침에 예약 문자를 걸어놓고 알람으로 쓸수도 있을거라 이야기 하더라구요. 일어나지 않으면 고막 파괴.. 소리가 얼마나 큰지는 실험해 보면 아실겁니다. 제가 골드웨이브로 파형 편집해서 해당 스피커에서 낼 수 있는 최대로 높은 소리가 나게 만들어놨습니다 ㅋㅋ
이거 외에도 문자 한통으로 휴대폰을 잠가서 휴대폰 습득자가 민감한 정보에 접근하지 못하도록 막아버릴 수 있습니다. 이거 잠금 기능이 너무 너무 강력해서.. 오픈 초기에 문제가 되기도 했습니다. 일부 기종에서 기종간 파편화 문제 때문에 휴대폰을 다시 켰을때 자동으로 잠금이 걸리고, 암호를 입력해도 풀리지 않으며 무한 잠금 되는 문제가 있었거든요.. 지금은 Advanced Task Killer로 잡히네 안잡히네 버전업 할때마다 엎치락 뒤치락 할만큼이구요.. 1.0.10인 지금은 치명적인 버그들을 대부분 잡아서 잠금 기능을 보안 어플 본연의 목적에 맞게 잘 사용할 수 있게 되었습니다.
부적절한 상황을 담은 동영상이라던가, 부적절한 장면이 담긴 사진이라던가 뭐 여튼 유출되면 큰일날게 휴대폰에 있어서.. 잠금 기능으로는 부족하다 싶으면 원격 삭제를 사용할 수 있습니다. 이 경우 자동으로 휴대폰을 잠그고 데이터를 싹 밀어드립니다. 통화내역, 문자내역 등등까지 모두. 원격 삭제 기능은 민감한 기능이기 때문에, 문자로 명령 내리는 기능은 제공하지 않고 있습니다. 모락이 종료되어있을 경우 문자로 날아오는 명령문자가 남들에게 노출되게 되고, 남이 임의로 삭제 명령을 보내는게 가능해지니까요. 그래서 반드시 홈페이지에서 로그인 후에 버튼을 눌러 원격 삭제를 사용하게 만들었습니다.
그리고 휴대폰 전체 잠금 뿐만 아니라 개별 어플 잠금 기능도 제공하는데요, 물론 시중엔 어플 잠금 기능을 제공하는 수많은 어플들이 나와있습니다. 모락은 위에서 보여준 강력한 전체 잠금 기능을 여기서도 활용하는지라, 어플 잠금도 아주 강력합니다. 홈키 눌러서 잠금이 해제되는 경우, 다시 어플을 실행시키면 또 잠그는지라 크게 문제가 없는데.. 이 역시도 기술적으로 해결될 조짐을 보이고 있어 정말 완벽 잠금이 가능해질 전망입니다. 우리 앱 개발자형은 매번 볼때마다 정말 보석같아요. 맨날 크록스 쓰레빠 신고 이상한 티셔츠 입고 사무실 나오지만 진짜 다 해주니까, 완전 이쁜거 아십니까..
여기다가 습득자가 SIM카드를 뽑아버릴 경우 자동으로 잠그는 기능도 있구요, SIM카드를 자기것으로 교체할 경우 그 사람의 전화번호를 메일로 몰래 보내주는 기능도 있습니다. 예를 들어 폰 훔쳐간 놈이 SIM카드 바꿔서 자기걸로 쓰려고 할 경우 그 도둑놈의 전화번호를 받아낼 수 있는거죠. 뭐 그럼 뒷일은 경찰에 신고하면 알아서 조치해줄겁니다.
그리고 분실 대비 기능중에 가장 자랑할만한건 머그샷 기능입니다. 휴대폰이 잠긴 상태에서 습득자가 잠금을 해제하려고 할 때 전면 카메라로 몰래 얼굴 사진을 찍어서 메일로 보내주는 기능이 있습니다.
위에는 미리보기 화면이고, 대략 저런 식으로 사진을 몰래 찍어서 메일로 보내는 식입니다. 원래 안드로이드 진저브레드부터 전면 카메라를 끌어다 쓸 수 있습니다. 아트릭스의 경우 이번에 진저브레드 올라가면서 전면 카메라가 풀렸지요.. 하지만 갤럭시S는 특별히 꼼수를 발견하여 프로요에서도 전면 카메라가 작동되게 했습니다. 아마 이 머그샷 기능이 모락의 가장 큰 장점중 하나가 아닐까 싶습니다.
뭐 여기까지가 각종 무료 기능들이었구요.. 모락에는 이런 각종 잠금, 삭제 등 분실 대비 기능 뿐만 아니라 백업/복원 기능도 큰 축으로 들어있습니다.
매일 매일 정해진 시간마다 자동 백업으로 통화내역, 문자내역, 즐겨찾기, 주소록 뿐만 아니라 사진도 백업을 합니다. 데이터 통화료 부담이 걱정된다면 Wifi 연결된 상태에서만 백업하게 설정할수도 있고.. 배터리가 빨리 줄까봐 걱정되면 충전중인 상태에서만 백업하도록 설정할수도 있습니다.
위 모습이 초기 버전이었는데, 이런식으로 시간대를 4가지로 나누는 것 보다는 그냥 새벽/전체로 두가지 토글로 나누는 편을 선택했습니다. 그 편이 좀 더 간단하고 사용하기 편할 것이라고 생각했고, 실질적으로 거의 안쓰는 시간대를 올리지 않아도 될 것 같더라구요. 이거 전에는 다이얼을 달아서 시간을 삼십분 단위로 지정할 수 있게 할까 생각했지만 정말 무의미한 작업이더군요. 이런 식으로 각종 옵션을 지정할 때는 최대한 선택지를 줄이려고 노력했습니다. 네트워크, 배터리 상태, 시간대 모두 토글 형으로 통일하는 효과도 있었구요. 둘중 하나 택일.. 앞으로도 이런 식으로 최대한 선택지를 줄이는 방향으로 갈겁니다.
이런 자동 백업 기능도 있고, 그냥 바로 백업하는 지금 백업 기능도 있고요. 그리고 백업을 할 때 무엇보다 중요한 점은 백업이 잘 되었는지 확인하는 기능이라고 생각했습니다.
이런식으로 최근에 백업된 내역을 바로바로 다 확인할 수 있게 만들었습니다. 심지어 사진까지도요. 뭔가 사용자 모르게 뒤에서 백업하고는 "백업되었습니다" 이딴식으로 띡 보여주는 식 보다는.. 백업 한 다음 어떻게 백업되었나 확인할 수 있게, 그러니까 사용자에게 알권리를 준다던가, 제어권을 넘긴다던가 하는 느낌으로 작업했습니다. 사용자가 답답하면 안되고, 뭔가 명확하게 보여주어야 한다고 생각해요.
모락에는 이렇게 1년간 제가 생각한 서비스/앱에 대한 철학이 다 녹아들어가 있습니다. 말 나온 김에 한 페이지 한페이지 보여드리며 이야기 해볼까요?
이건 어디서나 흔히 볼 수 있는 약관 동의 화면인데요, 이거 만드는 과정에서 카카오톡, 마이피플 등 거의 5가지 서비스들의 각기 다른 약관 동의 화면을 보고 참조하였습니다. 카카오톡의 경우 자세히 보기 버튼을 누르면 팝업으로 약관 전문을 보여주고 있습니다. 제것의 경우 처음 화면의 약관 보여주는 부분을 그냥 단순 이미지로 만들었습니다. 하지만 그림자가 들어가있어서 왠지 스크롤이 될 것 같죠. 사용자가 스크롤을 위해서 터치하는 순간 팝업을 띄워서 큰 화면에 보여주는 식으로 구현했습니다. 사용자가 원하는 다음 단계를 반 정도 앞서갔다고 할 수 있겠지요.
이건 회원 가입시 명령 문자를 입력 받는 부분인데, 첫 부분에서 '다음' 버튼이 없고 명령문자 입력 부분만 활성화되어있습니다. 선택 사항을 없애버리면 괜히 필요없는 혼란을 줄일 수 있지요. 그리고 입력 후에 키보드가 내려가면 명령문자가 적용된 예가 보이고 다음 버튼이 나오는 식입니다.
이건 메인 메뉴 입니다. 개발 과정에서 중간에 카카오톡의 카카오링크 API를 사용하여 친구에게 알리는 기능을 넣고 싶었는데, 도통 넣을 자리가 안나오더라구요. 화면 아래에 넣으면 전체 레이아웃을 다 바꿔야 할 상황이고, 그렇다고 환경설정 안에 넣어버리자니 안넣느니만 못한 위치구요. 고민 끝에 로고 뒷면(?)에 박아버리기로 했습니다. 모락 로고를 터치하거나 옆으로 쓸면 빙그르르 돌아가서 카카오톡 버튼이 나오는 식이지요. 결과적으로 메인 화면을 좀 더 풍요롭게 쓸 수 있게 되었습니다. 나중에 저 위치를 다른 방식으로 사용할 수 있을것도 같네요.
개발자형에겐 3D로 돌리는 효과 넣어달라고 과한 부탁을 한것 같지만, 전 그래도 3D flip effect 관련 소스 찾아서 링크도 던져주었답니다. 거기다가 이해하기 힘들것 같아 아래와 같이 플래시로 프로토타입도 만들어봤구요.
위에 로고 부분을 클릭하면 실제로 동작합니다.
여기서 '사이렌 미리듣기' 버튼을 만들때.. 사이렌이 울리는 도중에 보여줄 버튼명을 그냥 '사이렌 미리듣기 중지' 이런식으로 만들어도 충분하지만, 저는 여기에 좀 더 사람다운 느낌을 넣기 위해 버튼 명을 저렇게 만들어놨습니다. 아무래도 사람이 만지게 될 어플인데 사람들이 이 기능을 사용할 때 느낄 기분을 미리미리 짐작해서, 좀 더 친근하게 다가가는게 좋지 않을까요. 사이렌이 굉장히 시끄럽기 때문에, "아.. 이제 그만" 이런 류로 버튼명을 정한겁니다.
이건 비상연락번호 설정/변경 화면인데, 안드로이드에선 키보드 처리가 굉장히 번거롭습니다. 아이폰의 경우 입력란에 집어넣고 딱히 확인 버튼을 누르지 않아도 저장이 되는데, 안드로이드에서는 그렇게 하기가 몹시 곤란하게 되어 있기 때문에 저런식으로 확인/취소 버튼을 따로 만들어주어야 합니다. 이 부분을 원래는 입력창을 터치하면 확인/취소 버튼이 달린 팝업이 떠서 거기서 입력하게 하려 했는데, 아무래도 모양이 너무 구리잖아요. 입력창이 따로 있는데 왜 팝업이 뜨냔 말이죠.. 그래서 카카오톡, 마이피플, 네이트온UC, 네이버 등등 입력창이 달린 여러 어플을 사용해가며 본 결과, 마이피플쪽 키보드 처리 방식이 독특하더라구요. 그래서 저도 저런식으로 확인/취소 버튼이 따로 달리게 만들었습니다.
안드로이드는 키보드 높이가 단말기마다 천차만별인데, 이게 또 문제입니다. 아이폰의 경우 모든 단말기가 다 똑같은 비율에 똑같은 픽셀이지만(레티나의 경우도 상관 없죠), 안드로이드는 240x320, 320x480, 480x800, 480x854, 540x960, 600x1024 등 온갖 비율과 해상도의 화면이 공존합니다. 거기다가 가상 키보드의 높이도 위와 같이 달라서.. 심지어는 90픽셀이 넘게 높이 차이가 나기도 합니다. 이쯤 가면 버튼 하나가 가려서 보이지 않을 정도의 높이가 되지요.
그래서 이걸 어떻게 처리할까 고민을 했는데, 답은 네이트온 UC에 있었습니다. 이 친구들은 입력창 바깥을 터치하면 자동으로 키보드가 들어가버리더라구요. 사용자가 입력을 끝내고 확인 버튼을 누르기 위해 키보드를 닫으려고 하는데, 보통은 화면을 터치, 스크롤해서 아래의 버튼을 보려고 시도합니다. 그래도 안되면 뒤로가기 버튼을 누르면 키보드가 닫히지요. 네이트온 UC의 경우 이런 사용자의 행동 패턴을 반스텝 정도 앞질러갔다고 보시면 되겠습니다. 저희도 그걸 적용하려고 했지만, 개발 기간 문제로 인해 현재는 미뤄둔 상태.. 일단 뒤쪽 화면만 스크롤 되게 만들었습니다. 위 화면은 모락 초창기 디자인인데 지금이랑 비교하면 어마어마하게 차이가 나네요.
요 앱 잠금 화면의 경우, 디자인적으로 상당히 만족하고 있는 부분입니다. 체크가 풀렸을 때 회색으로 암전되며 하단 탭들을 선택 못하게 처리하는 부분은 제가 디자인했지만 굉장히 기분이 좋아요. 이 부분 역시 거의 옵션 없이 아주 간단하게 기본 기능에만 충실하게 만들어놨습니다. 잠글 앱 설정 화면에 가서 앱 선택하면 그냥 그 앱이 열릴때 잠가버리는거죠. 기능을 덕지덕지 붙이다 보면 이도 저도 아닌 찰흙 덩어리같은 서비스가 나올 수 있는데.. 기능이 생길때마다 계속 생각하고, 또 생각해서 가장 간단한 방법으로 사용자에게 와닿도록 해야 한다 봅니다. 아무래도 애플 같은 회사가 이런걸 잘하죠.
요건 환경 설정 화면인데, 저기 굽신굽신 보이죠? 저런 단어를 넣어도 뭐라 태클 안거는 저희 갑님에게 정말 감사하고 있습니다. 저런 부분들 일일히 다 태클걸고 "모락을 친구들에게 소개해주세요" 이런식으로 건조하게 나갔다면 이 앱에서 제 냄새는 나지 않았을겁니다. 아 그리고 잘 보시면 카카오톡 버튼 아래에 비정상적으로 공간이 넓은데요, 제가 맨날맨날 삼성 까며 디자인에서 강조하는 위아래와 양옆의 패딩을 맞추지 않은 사례라 뭔가 아이러니하실겁니다.
여기도 작은 뜻이 숨어 있는데요.. 아래의 공간을 더 넓게 잡은건 일부러 저런겁니다. 화면 하단과 버튼간의 간격이 아주 가까운 엑스페리아 아크 같은 경우 하드웨어 버튼을 사용하다가 화면 하단을 터치하게 되는 경우가 많은데, 그때 오작동을 막기 위해 일부러 거리를 멀리 띄웠습니다. 모락의 거의 모든 페이지는 이런식으로 양옆은 32px씩, 하단은 32x2 해서 64px씩 떨어져 있습니다. 아마 일부 페이지가 하단 여백이 32px이겠지만, 이는 비율을 맞추기 위해 어쩔 수 없이 한겁니다. 이런식으로 기획 초기 단계에서부터 일관성을 유지하려고 노력하였습니다.
요건 계정 설정 화면인데요, 주의 사항은 붉은 글씨로 확실하게 강조하고, 하단에 일주일 전에 안내 메일을 보내준다고 적어서 앞으로 일어날 일에 대해 예상할 수 있도록 배려하였습니다. 이 경우 나도 모르는 사이에 유료 기간이 다되서 백업 데이터가 날아간다는 걱정은 안해도 되겠지요.
이건 일시정지 기능인데, 제가 좀 고집을 부려서 집어넣은 기능입니다. 아무래도 안드로이드 사용하는 분들은 시스템 메모리 사용량이나 배터리 소모에 관심이 많을텐데, 싫으나 좋으나 모락을 잠시 사용하고 싶지 않을 때가 있을것 같습니다. 그래서 이렇게 따로 일시정지 페이지를 만들어두었습니다. 하고 싶은 말은 이거죠. 우리도 배터리 소모량이랑 속도에 관심이 많아 가볍게 만들고 싶다~ 이런걸 소탈하게 적어주면 앱이 말썽을 부려도 사용자분들이 조금이나마 더 이해해주지 않을까요?
이건 회원 탈퇴 화면인데, 탈퇴를 고려할 정도면 뭔가 회원의 분노가 극에 달하였거나 맘에 안드는 점이 있었으리라 생각했습니다. 그래서 가는 길에 미리 변명 & 사과를 드리고, 탈퇴할 경우 일어나는 일들을 공지하고, "휴대폰의 데이터는 안전하다" 등의 안내문을 적어 안도할 수 있게 배려했습니다. 그리고 회원 탈퇴 버튼 디자인 퀄리티 끝내주죠.
위 문구를 포함하여 모락의 앱&웹에 들어가는 여러가지 문장들은 교내의 일본어과, 문예창작학과, 물리학과 등등 세명의 친구들에게 문맥 검수를 받았습니다. "씨끄러운" 등은 "시끄러운" 이런식으로 오타를 잡고, 문장 순서라던가 이런것들 일일히 다 밥 사주고 점검 받았지요. 아직도 불만족스러운 부분이 눈에 많이 띕니다만 나름 많이 잡았습니다. 제가 공대생이다보니 인문대생들을 굉장히 좋아합니다. 뭔가 이들은 저랑은 두뇌 구조가 다르기 때문에 함께 대화할때마다 놀라움을 느끼고 있지요. IT 기업들은 죄다 공대생들이라 생각하는게 다 똑같을거고, 낼 수 있는 능력들이 다 거기서 거기일겁니다. 스티브잡스가 저번에 인문학 이야기도 하고 해서 요즘 중요도가 올라가고 있지만.. 스스로가 인문학적이지 않다면 인문학적인 사람에게 일을 맏기면 되는겁니다. 세상 치킨 이공계 사람들에게만 팔건 아니잖아요.
요건 결제 화면인데, 폼 입력하는 부분이 위에서 아래로 군더더기 없이 쫙 떨어지죠. 그리고 여기서 자랑할만한 부분은 하단입니다. 인증번호 받기 버튼을 누르면..
요런식으로 인증번호를 입력하는 화면이 나옵니다. 하단에 "잠시 기다리면.." 문장으로 안내를 하고 있는데, 일정 시간이 지나도 결제하기 버튼을 누르지 않을 경우 "아, 사용자가 아직도 인증번호를 못받아서 기다리는 중이군" 하고 판단하여 재전송 버튼이 밑에서 올라옵니다. 요런 기능 하나하나 넣을때마다 깨알같고 기분이 좋더라구요.
그리고 결제가 끝나면 이렇게 보너스 화면까지-_-;;
전 이렇게 오프라인의 모습을 앱 안에 투사하여 사람이 만든듯한 느낌을 팍팍 준다는게 참 좋더라구요. 보스가 저렇게 갑이라고 떡하니 개그를 쳐놔도 껄껄 웃을 수 있는 분인지라 기획할때 아주 즐거웠습니다. 이분이 왕년에 북악산에서 다운힐 레이스도 해보고, 요새는 무선헬기 조종을 하는 등 마인드가 열린 분이라 이 모든게 가능했던 것 같습니다. 어디 대기업 가면 이런거 절대 못하게 하겠죠.
앱이라..
저는 일단 컨셉적으로 뭔가 굉장히 끝장나게 지독한 놈을 만들고 싶었습니다. iOS 대비 안드로이드 OS의 큰 장점 중 하나가 루팅을 하지 않아도 시스템 자원을 무궁무진하게 건드릴 수 있다는 점입니다. 그래서 아이폰에서는 절대로 불가능한 기능을 안드로이드에서는 구현할 수 있습니다. 예를 들어 진동 모드로 설정되어있는 폰을 자동으로 볼륨을 최대로 올려서 사이렌을 울린다던가.. 이런건 안드로이드폰에서만 가능합니다. 모락은 안드로이드에서 사용할 수 있는 자유도를 아주 광범위하게 활용한 어플리케이션입니다. 만들고 SNS에서 달리는 리플중 축하한다는 리플을 뺀 대부분이 "아이폰용도 만들어달라" 였는데, 여기서 뭔가 뿌듯해지더라구요. 일종의 안드로이드용 킬러앱을 만들었다는 느낌입니다.
저는 개인적으로 아이폰을 사용하고 있었지만, 1년간 안드로이드를 개발하면서 여러가지를 느꼈습니다. 일단 뒤로가기 키 등의 하드웨어적인 차이점, 다양한 화면 비율 등등.. 안드로이드는 아이폰과 너무나 다릅니다. 안드로이드 마켓 보면 주로 금융회사 어플들에 아이폰의 UI를 그대로 가져온 경우가 많습니다. 예를 들어 화면 상단에 뒤로가기 버튼이 달려있는거죠.. 이는 매우 좋지 못한 경우라고 봅니다. 정통파 안드로이드 유저라면 기분이 좀 나쁠만한 앱 설계라고 할 수 있겠지요. 저도 처음에 모락 기획하며 화면에 뒤로가기 버튼을 넣었지만, 중간에 모두 다 빼버렸습니다. 역시 해당 OS에 최적화된 모습으로 맞춰야합니다.
모락을 지독하게 만들다보니, 모든 면에서 타사 앱을 압도하는 모습을 요구했습니다. 일단 잠금 화면은 뭔 짓을 해도 풀지 못하게 하고, 앱 자체 구동은 빠르고 가볍게, 디자인은 최고 수준으로, 백업 같은것도 말만 대충 백업하지 않고 아주 강력하게 벌크업을 좀 했습니다. 덕분에 웬만한 백업 어플, 웬만한 잠금 어플, 웬만한 분실대비 어플등을 능가하는 모습을 보여주고 있지요. 앞으로도 더 붙을 기능이 있지만.. 모든 기능은 최대한 간결한 모습을 유지하며 동시에 아름답고 사용하기 편하게 만들겁니다. 그리고 넣는 김에 최고로 좋게 넣을겁니다. 애플같은 회사가 그렇듯, 기능 안넣을때는 지독하게 안넣어주지만, 기능을 넣어주면 굉장히 유용하게 만들어주는.. 그런 모습을 따르려구요. 안드로이드 마당에 와서 애플의 스타일대로 꼼꼼하게 만들기는 참 어렵지만, 이게 우리 앱의 매력이 될 수 있을거라 생각합니다.
지금은 오픈 초기라 버그들이 조금 남아있지만 락이 안풀린다던가 하는 치명적인 버그들은 1.0.8대에서 대부분 잡았고, 어느정도 안정화가 된 것 같네요. 여기까지 앱에 대한 자랑 겸 개발 철학 소개였구요, 이번에는 모락의 다른 한축인 웹으로 넘어가보죠..
웹.. 웹은 원래 모락 개발 초기에는 예정도 되어있지 않았습니다. 만들어도 앱 소개 페이지 정도? 그러다가 제가 강력하게 주장하여 웹도 함께 개발하게 되었습니다. GPS 추적 지도 보여주는 화면부터 시작해서 백업한 데이터를 보여주는 화면까지 점점 커져서 여기까지 왔습니다. 웹과 앱을 연동하는 작업이 정말 오래 걸렸구요, 앱/서버/웹 등 개발자분 3명 +알파 해서 여러명이 협업해야 했습니다. 웹 하나만 봐도 페이지는 몇페이지 안나오지만 각각이 다 각종 괴랄한 기능들이 들어있어서 만들기 어려웠고, 제 스타일상 다음이나 네이버 등 포탈만 봐왔기 때문에 눈이 높아져있는 상태였습니다. 그래서 Ajax로 애니메이션 효과를 넣는다던가 하는 식의 요구를 많이 했지요.
위와 같이 각종 애매한 애니메이션의 경우 글이나 말로 설명하기보다는.. 이런 식으로 플래시로 만들어서 보여주었습니다. 제가 중학생때부터 플래시를 다뤄 와서 그나마 이게 익숙하거든요. 아마 개발하다가 기획하던 분들은 아예 프로토타입을 혼자 만들어냈겠지요. 제가 기획을 하지만 개발보다는 디자인에 굉장히 치우쳐져있는지라 좀 배워야 할 부분입니다. 이제 공익 근무도 끝났겠다.. 학교 돌아가서 1년 반 정도 수업을 들어야하니 이번엔 개발 좀 배우고 와야겠습니다.
이건 로그인 페이지인데, 앱과 마찬가지로 로그인 페이지에도 이렇게 또라이같이 화면 분할질을 해놨습니다. 여기서도 32px씩 끊어서 배열했고, 폼 입력창은 32px의 열배인 320px로 잡았고, 로그인 버튼은 32px의 4배인 128px입니다. 왜 이짓을 하냐구요? 그냥 성격이고 자존심인것 같습니다.. 물론 웹이라는게 크로스브라우징도 고려하고 뭐 하고 하다보면 이렇게 칼같이 떨어지지 않기 때문에 이거랑은 좀 다르게 나왔습니다만.. 아무튼 저는 줄맞추는걸 미친 사람 마냥 너무 좋아합니다.
여기 보면 역시 사람의 흔적을 느낄 수 있도록 만들었습니다. "너무 오래간만에 오셨나봅니다.", "고생 많으셨습니다." 등 저는 이렇게 구어체를 사용하며 딱딱하지 않은 모습을 추구합니다. 사람이 사용할건데 부드럽고 친절해야죠. 그리고 입력창 안에 자동 완성으로 "새 비밀번호" 등이 들어가는 부분이 문제였는데.. 저게 원래 정상적인 방식으로는 입력창 안에 들어가는 자동완성 문장이 커스터마이즈가 안된다더군요. 근데 다음이랑 네이버는 이런식으로 구현을 했길래 보고 참조했지요. 폼의 배경에 이미지로 깔았더군요. 역시 포탈은 국내 웹 부분 실력자란 실력자는 다 모여있는것 같습니다.
요건 정보 관리 화면인데.. 백업한 데이터를 한 화면에 모아서 보는 부분입니다. 우측의 위젯을 이용해 간단한 백업/삭제 명령도 내릴 수 있구요. 초기 안과 비교하여 뒤쪽이 부쩍 깔끔해졌지요..
사이트가 고정 세로폭인지라 하단에 애매하게 벨트처럼 회색 띠가 생기는 문제가 있었는데, 이걸 유동폭으로 하려면 레이아웃을 몽땅 밀어버리고 다시 만들어야 하는 문제가 있었습니다. 개발기간이 지연되는거죠.. 그래서 푸터 부분의 배경색을 흰색으로 바꿔버렸습니다. 그러니 고해상도 화면에서 봐도 비주얼이 구리지 않더군요. 그리고 사진 썸네일 들어갈 부분의 배경 회색도 미세하게 톤 조절해서 세련되어보이게 바꾸었구요. 우측 상단에 용량바도 좀 건드려주니 한결 예뻐집니다. 아직 아쉬운 부분은 "휴대폰을 잃어버렸다면?" 버튼과 상단의 로그아웃 버튼 정도.. 얘들 회색이 너무 구리게 들어가있죠. 제가 날잡아서 저거 바꿀겁니다.
삘받아서 작업할때는 대략 이런 분위기.. 하지만 이건 저만 보고 개발자 형은 GG. 저도 남들이 이런거 보면서 스트레스 받는걸 원하지 않는지라 가능하면 고민의 과정은 보여주지 않고 그 산물만 보여주려고 노력합니다. 웹 개발할때 크로스브라우징 맞추는게 얼마나 까다로운지 알기 때문에 이렇게 픽셀 단위로 다 맞춰달라고 하진 않습니다. 80%만 맞아도 충분히 예쁠테니까요. 뭔 포탈도 아니고 작은 기업에서 페이지 제작하는데 손이 너무 많이 가는 작업이지요.. 가끔 영 맘에 안드는건 틈틈히 FTP 열어서 제가 직접 수정을 보는게 전부입니다.
요것도 대략 일할 때 이런 분위기. 문자 내역 화면인데, 특정 사용자를 클릭하면 그 사람과 문자로 대화한 내용만 뽑아서 보여주는 부분입니다. 뭔가 "적용례"라는 이상적인 구현 모습을 포토샵으로 작업하여 보여주고, 애니메이션이 들어가는 부분은 플래시를 통해 작업하여 보여줍니다. 그리고 각종 수치값 등은 적어서 보내주면.. 개발자형이 최대한 근접하게 맞춰 주는거죠. 위 내용이 다 적용된건 아니지만.. 기능은 구현되어있으니 틈틈히 수정을 볼겁니다.
이건 위치 추적 페이지의 변천사. 처음엔 저랬는데 일단 일부 틈틈히 손을 봤습니다. 뭔가 개발자분이 작업하기 편한 구조를 처음부터 만들어주는게 중요하더라구요. 그러면서도 동시에 아름다워야 한다는 점이 디자인상 어렵습니다. 위치추적은 GPS, 3G, Wifi의 세가지가 있는데, Wifi가 가장 정확하고 그 다음이 GPS이며, 3G는 거의 비상용 수준입니다. 그래서 정확도가 높은 GPS와 Wifi는 옆의 리스트에서 노란색 아이콘으로 강조 표시를 해놨습니다. 하단 사이렌의 경우 문자로도 명령을 내릴 수 있지만 인터넷으로도 가능하게 버튼을 달았지요.
이건 요약보기 페이지 아이콘의 변천사인데요, 리소스 사이트에 색감이나 형태나 맘에 드는 유료 아이콘이 없었습니다. 쓸데없이 그라데이션이 많이 들어있다거나 색감이 괴이하다거나 형태가 이상하다거나.. 이거 다 사면 유료고, 디자인 업체에게 아이콘까지 제작해달라 하면 돈이 엄청나게 깨질게 뻔하거든요. 한참동안 고민하다가 그냥 제가 다 그려버렸습니다. 아무래도 좀 아쉬운 부분이 있긴 합니다. 지금은 그냥 저걸 다 푸른 톤의 단색으로 해버리면 더 깔끔하지 않았을까.. 하고 욕심이 생기네요. 모락의 디자인 포인트는 아주 옅은 그라데이션에 좀 모노톤, 플랫의 느낌입니다. 이럴때는 참 네이버가 부럽습니다. 네이버는 정말 온통 디자이너 천지인지 저런거 일일히 깔맞춤으로 다 그리는것 같더라구요.. 몬스터볼에 넣어 소장하고 싶은 퀄리티가 눈에 많이 띄어서 참 배울게 많습니다.
요건 전원 꺼졌을 때 문자로 기능 예약하는 부분에 대한건데, 왼쪽에 텍스트가 너무 많다는게 아쉽습니다. 최대한 줄여보려고 했지만 뭔가 아예 구조를 다 갈아엎어야 할 것 같더라구요. 우측의 위젯들은 기존의 형태를 최대한 재활용하게 만들어서 개발이 용이하도록 배려했습니다. 유사한게 계속 나오면 디자인도 쉽고 개발도 쉽지요. 사용자 눈에도 보기 좋은건 당연지사입니다. 일관성 유지해야죠.
저기 보이는 상태 확인 버튼을 누르면 분실한 휴대폰의 배터리 상태를 알 수 있습니다. 휴대폰 잃어버려서 전화를 거는데, 신호는 가지만 받지 않는걸로 보아 누군가 줍지는 않은것 같고.. 배터리가 언제 다 떨어질지 모르는 상황에서 백업 등의 큼직한 작업을 걸기엔 쉽지 않지요. 이때 이 상태 확인 기능을 사용하면 배터리 잔량을 알 수 있어 좋습니다. 잠금, 백업, 삭제 등의 기능도 웹에서 다 명령을 내릴 수 있습니다. 거기다가 예약 기능이라고 해서, 휴대폰 전원이 꺼진 상태에서도 문자로 보내두면 휴대폰이 켜지고 문자를 자동으로 수신하여 명령을 수행할 수 있지요.
요건 다운로드 페이지에 붙어있는 QR코드인데, 요즘 대세에 맞게 편집해서 넣어봤습니다. QR코드라는게 최대 30%까지 훼손이 되어도 인식이 가능하도록 되어있어서.. 위와 같이 임의로 픽셀을 변경해도 잘 작동을 합니다. 웹에 굴러다니는 QR코드 생성기로 만들어낸 다음, 포토샵으로 작업했습니다. 아주 재미있었어요. 휴대폰 들고 QR코드 찍으면 모락을 바로 다운로드합니다.
뭐 대략 웹 부분은 이정도.. 앱이나 웹이나 제가 평소에 블로그에서 떠들던 내용을 실제로 적용하며 개발하였고, 지금도 개선이 진행중입니다. 입으로만 떠드는 블로거가 아니라는걸 이렇게 직접 증명하게 되니 기쁘네요.
제가 기획한 모락의 자랑은 여기까지 하구요, 현재 네이버 안드로이더스 카페에서 리뷰 이벤트 중입니다. 마감이 25일 내일까지인지라 좀 늦게 알려드리는 면이 있어 아쉽네요.
보다시피 이렇게 경품도 어마어마합니다. 그냥 간단하게 SNS로 소개만 해줘도 스타벅스 기프티콘 주는 이벤트도 있으니 그냥 응모만 하면 바로 받을 수 있습니다.
마지막으로 사람들 자랑을 할게요.
- 블로그에서 남들 까면서 독거노인으로 지내던 저를 "남 잘까니 지것은 아마 잘만들겠지"하고 생각하여 데려다가 떡하니 PM시켜주시고 1년동안 도와주신, 정 모 차장님 감사합니다. 이분 경력은 좀 짱인지라, 과거에 북악산에서 다운힐 레이스 한 적도 있고, 요즘에는 무선조종 헬기에 한창 빠져있답니다.
- 기획도 도와주시고, 각종 시료폰 구입부터 식비 계산까지 모두 도맡아 하시다가.. 요즘엔 CS를 맡아 게시판에 다 답글 달아주시고, 새벽 4시까지 전화 받는 정 모 과장님 감사합니다. 과장님이 있었기에 이 프로젝트가 원활히 진행될 수 있었을겁니다. 요즘 정말 고생이 많으신듯..
- 진짜 온갖 터무니없는 요구를 해도 뚝딱뚝딱 잘 만들어주신 마법사같은 앱 개발자 정 모 형님, 프로젝트 초창기에 생판 아무것도 모를때부터 저랑 호흡 맞추어 근 1년을 함께 일했네요. 특히 디자인에 대해서는 제가 뭘 원하는지 미리미리 파악하고 만들어주시는 센스가 정말 굉장합니다.
- 우리 선임 연구원이자 서버 개발자인 최 모 형님, 언제나 그러하듯 "용주 이것도 못해? 아 이거 귀찮은데~" 하면서 한시간만에 뚝딱 만들어주시는 모습 멋집니다. 올해 안에 여자친구 만드시길..
- 모락의 로고를 최고로 멋지게 디자인해주신 다임웍스의 김 모 대표님께 듬뿍 감사드립니다. 로고 하나만 봐도 저는 기분이 좋아서 대표님 업고 다니고 싶은 심정이었답니다. 다임웍스의 직원들은 전부 검정 양복을 입고 머리를 짧게 깎고 다닌다고 합니다. 앱 개발하는 분들, 디자인 업체 찾는다면 연결시켜드릴게요.
- 평소에 미투데이에서부터 알고 지내다가 프로젝트 중간에 제 소개로 웹 부분을 맡게 된 웹 개발자 김 모 형님, 웹 개발 뿐만 아니라 DB나 서버 등 여러가지 부분도 많이 도와주셔서 정말 감사합니다. 따님 튼튼히 잘 크길 빕니다.
'관심사2 > 일 이야기' 카테고리의 다른 글
| 제 일곱번째 서비스, 스내피(Snappy)를 소개합니다. (0) | 2015.12.07 |
|---|---|
| 제 어플이 오유 베오베에 올라갔습니다^^ (0) | 2012.05.14 |
| 모락(MoLock) 버튼 디자인 변경한게 자랑. (0) | 2011.09.12 |
| 안드로이드 사용자에겐 어떤 경품이 어울릴까요? (0) | 2011.07.20 |
| 탭 디자인 깎는 노인 (0) | 2011.07.08 |