관심사2/일 이야기

모락(MoLock) 버튼 디자인 변경한게 자랑.

MIRiyA☆ 2011. 9. 12. 22:41

아무래도 모락(MoLock)의 모든 디자인은 제 손을 거쳐갔기 때문에, 디자인에 대해서는 많은 애착과 더불어 책임감을 느끼고 있습니다. 개발 시간이 촉박하여 다듬지 못한 시안상의 허점들을 매꿔야하는데, 모락의 홈페이지에 몇개 이런 부분들이 남아있지요.. 그 중에서 가장 건더기가 큰걸 오늘 드디어 뒤집어 엎었습니다.



잘 보시면 맨 위 오른쪽에 '로그아웃' 버튼, 맨 아래 오른쪽에 '휴대폰을 잃어버렸다면?' 버튼이 보이지요?

이 부분 정말 그동안 맘에 안들었던 부분입니다. 웹 페이지 자체는 하얀 바탕에 최대한 깔끔함을 유지하고 싶었는데, 필요 이상으로 농도가 진한 회색은 탁해보이게 만듭니다. 그리고 무거워 보이지요.


그래서 이런식으로 바꾸었습니다.



원래 생각하면서.. 이 버튼 배경색을 아예 흰색으로 하면 깔끔하지 않을까, 음, 그럼 너무 튀지 않을까, 그럼 그라데이션을 넣어볼까, 아냐 플랫한게 좋겠어 등등 궁시렁궁시렁하면서 구상을 하다가.. 검정색에 알파값 먹여서 밑색 보이게 하면 이쁘겠다 싶었지요. 그래서 이리저리 만지다가 로그아웃, 로그아웃, 오 비상구 아이콘을 넣어보자 ㅋㅋ 해서 나온게 맨 마지막의 디자인입니다. 현재 모락(MoLock) 홈페이지에 적용되어있습니다. 서비스 구석구석에 재미있는 요소라던가, 재미있는 멘트라던가 이런걸 넣고 싶어서 몸이 근질거리던 차에 잘 되었네요.





"휴대폰을 잃어버렸다면?" 버튼은 이런식으로 바꾸었습니다. 회색 농도를 극도로 내려서.. 그라데이션이 보일락 말락 하게 만들었습니다. 그러면서 앞에 느낌표 표시를 넣었지요. 저건 참고로 모락(MoLock) 앱에서 GPS 위치추적 부분에 들어가는놈이었는데, 여기서도 똑같이 재활용했습니다. 픽셀 찍어서 만든건데 버리기 아깝잖아요. 뭔가 페이지 하단에 큼직하게 무게 잡고 있는 느낌이었는데, 버튼이 한결 가볍게 변해서 기쁩니다. 아, 그리고 위의 원격삭제 부분 테두리랑 이 버튼의 테두리랑 진하기가 다른데요, 아무래도 버튼이기 때문에 좀 더 컨트라스트 차이를 주었지요.





이게 모두 적용한 모습. 전후 비교 한번 해보세요.

여기까지 웹 부분 변한 모습이고.. 이젠 앱을 한번 볼게요.




요것은 락 화면에 나타나는 키보드입니다. 이게 고약한게.. 기본 키보드를 쓸 경우 키보드에 있는 설정 버튼 눌러서 환경설정으로 빠져나갈 수 있는데, 그때 홈버튼을 누르면 일시적으로 잠금이 풀리는 고약한 문제가 있었지요. 그래서 아예 설정 버튼이 안달린 키보드를 만들어버렸습니다. 일부 증권/금융 회사 어플도 이런식의 가상 키보드를 사용하게 만들어놨더라구요. 모락(MoLock)의 비밀번호는 영문만 지원하지만, 한글을 영어로 친걸 비밀번호로 쓰는 사람들이 있다는걸 생각해서 흐릿하게 한글이 보이게 만들었습니다. 나중에 시간이 된다면 키보드 터치감좀 향상시키고 키 입력시 위에 확대되어 보이는 효과를 넣으려고 생각중입니다.



아, 그리고 얼마전에 나온 1.1.0 버전부터 모락(MoLock)에 새 기능 추가되었습니다.


스샷에 나온 네이트, 네이트온UC, 뉴스 및 날씨, 다운로드 등은 그냥 자리차지용으로 넣은 아이콘일뿐입니다.


이런식으로 어플리케이션 권한 검사 기능이 들어갔습니다. 휴대폰에 설치된 모든 어플들을 다 검사해서, 위치 정보 조회 권한, 문자 조회 권한, 연락처 조회 권한, 개인식별정보 조회 권한이 있는 어플들의 리스트를 보여줍니다. 대체 Tab Switcher나 마이애니카, 은퇴후 월급이라던가.. 이런 앱들이 왜 위치 정보 조회 권한이 있나 미스테리네요. 물론 이 리스트에 나온 어플들이 다 악성 어플은 아니지만, 어플 설치할 때 권한 같은걸 면밀히 살펴보지 않고 다들 깔기 때문에 한번쯤 돌아보는데는 좋을것 같습니다. 무료 배경화면 어플인데 위치 추적 권한이 있었는데.. 이 어플이 악성 어플이었던 경우가 있었지요. 여튼 참조용으로 쓰기 좋은 기능 되겠습니다.



그리고 이건 앞으로 넣고 싶은 기능 미리보기.



이런식으로 유료 결제를 하지 않은 회원의 경우 더미 데이터가 들어있는 페이지를 보여주고 위에 안내를 해주게 됩니다. 깔끔하죠? 우측의 '유료결제 알아보기'는 버튼인데, 색으로 구분을 했지만 좀 더 클릭될것 같아보이게 하기 위해 밑줄을 하나 넣었습니다. 차마 붉은 바탕에 파란색 글씨를 넣을수는 없고 해서. 


여튼 이번 추석 연휴에도 모락(MoLock) 개발은 계속 되고 있습니다. 홈페이지에 건의 올라오는 내용중 대부분을 금방 적용할 수 있어 다행입니다. 예전에 처음 오픈했을때는 무한잠금 버그 같이 굉장히 곤란한 경우가 있어서, 새벽 4시에도 전화가 걸려오는등 난리도 아니었는데.. 슬슬 안정화가 되어서 제법 쓸만해졌습니다.


안드로이드 사용하시는 분들은 제가 만든 모락(MoLock) 다들 한번씩 깔아보세요.

홈페이지는 여기. https://molock.co.kr