[UI]iOS7 키패드 리디자인 ver2.0

지난번, iOS7 키패드 부분을 리디자인하여 포스팅한적이 있었는데, 우연하게 클리앙의 '무적태권부이님'께서 제 티스토리에 오셔서 원본파일을 요청하셔서 드렸더니 직접 파일을 아이폰에 입히고 작동하는 영상을 보내주셔서 무척이나 놀랬습니다. 물론, 완벽하게 적용되진 않았지만 이번엔 클리앙의 아이포니앙분들과 완벽하게 적용되는 모습을 보고자 이렇게 모든 레이어를 다 분리하여 이번 iOS7 키패드 리디자인 ver2.0을 만들게 되었습니다. 자세한 설명은 아래 내용을 보며 설명 드리겠습니다.

▲ 전체적인 모습

ver1.0과 크게 다른 부분은 없으며, 상단 캐리어바와 하단 탭바는 기존 iOS7베타 디자인을 적용하였습니다. 그리고 키패드 부분 눌렸을때의 이미지(숫자5)에서 흰색의 아웃글로우가 적용 되었으며, 원의 가운데에서부터 끝으로 점점 흰색으로 짙어지는 느낌을 표현 했습니다. 물론 이번 버전 역시 배경이 어떠냐에 따라서 가독성이 문제가 될 수는 있지만, 역시나 흰색은 포기하기 힘든 부분인것 같습니다. 

▲ 설명도

전체적으로 최대한 플랫한 느낌의 디자인으로 이어졌으며, 배경역시 ver1.0과 동일하게 어떤 풍경사진등의 이미지를 받아와 Gaussian Blur 적용 및 Curve를 이용하여 밝기를 조절 하였습니다.   또한, '무적태권부이님'이 주셨던 작동영상에서 초성검색을 하는 부분도 있었기에, 키패드에 알파벳과 한글을 같이 넣었습니다.

▲ '무적태권부이님'께서 iOS7 키패드 리디자인 ver1.0을 실제 아이폰에 적용한 사진

(http://www.clien.net/cs2/bbs/board.php?bo_table=cm_iphonien&wr_id=1285957&page=10)

사진외에 작동하는 영상이 있으나, '무적태권부이님'의 개인 정보가 보이기에 따로 영상은 업로드 하지 않았으나, 위에 보면 하단바와 상단바가 기존 iOS6와 같음을 알 수 있습니다.(다시 보니 상단은 iOS7디자인이 적용되어 있네요) 그리고 숫자키패드 부분 간격이 프로그램상 어쩔 수 없이 좀더 좁혀져야 하고, 통화버튼은 디자인 적용이 힘들다고 들었습니다.  어찌됬건 저에겐 이런 적용(?)도 할 수 있다고 생각하게된 좋은 계기가 되었습니다.

▲ 다양한 종류의 배경

▲ 전체 레이어 정보

작업한 PSD파일의 레이어 정보 입니다. 최상단부터 최하단까지 그룹화 지어서 정리를 해놓았으며, 6개의 배경이 있습니다.

▲ 클릭전과 클릭후의 레이어 그룹 분리

위의 레이어 처럼 클릭하기전과 후는 확실하게 구분을 지어놨습니다. 클릭후의 레이어 띠는 키패드부분 그룹뿐만아니라 어디든 붉은색 띠를 입혀 놓았으며, 혹여 작업하실때 그저 앞쪽에 있는 눈모양만 껐다 켰다를 반복하여 클릭전과 클릭후를 구별할 수 있습니다.

최하단 탭바 그룹 역시 모든것은 레이어로 다 분리시켜 작업을 했으며, 역시나 붉은색띠는 클릭후의 나타날 레이어그룹 입니다. (클릭전의 눈아이콘을 끄고, 클릭후의 눈아이콘을 켜면 클릭후의 이미지를 나타낼 수 있습니다)

▲ 6종류의 배경 레이어

처음부터 끝까지 모든부분을 레이어로 분리 시켜 놓았습니다. 나름 더 빨리 해서 배포하고 싶었으나 3일정도 걸렸습니다. 여하튼 이번 기회에 저도 이쪽 iOS테마 부분을 키패드 뿐만 아니라 다양한부분을 디자인 해봐야겠습니다.   원본파일은 따로 첨부하지 않았습니다. 댓글에 메일주소를 남겨주시면 순차적으로 원본PSD파일을 보내드리겠습니다. 따로 첨부하지 않은 이유는 단지 프로그램(?)입히는 분들과 소통을 하고 싶어서 메일을 통하여 파일을 드릴려고 하는겁니다 :-)  여하튼, 아직 부족한 부분은 많지만 이번 기회에 새로운 분야를 또 알게 된거 같아 무척이나 좋습니다. 

--------------------------

2013/8/26/MON Updated

안녕하세요. :)   지금까지 대략 50분이 넘는 분에게 클리앙 뿐만 아니라 다른 경로를 통하여 메일로 파일을 첨부하여서 보내드렸습니다. 일단은 피드백전에 가장 많이 받았던 부탁이라 해야할까요? 부분은, 아이폰4와 4S용 해상도로 작업 해달라는 부탁이있었습니다.  아이폰4와 4S용은 늦어도 다음주 까진 작업해서 드리도록 하겠습니다. 작업이 완료되면 따로 지금까지 메일 보내주신 분들에게 다시한번 메일을 보내드리도록 하겠습니다. 물론, 제 스토리에 글도 작성할 예정이며 다시금 클리앙에도 기재하도록 하겠습니다. 그리고, 얼마전에 포토샵 Slice Tool에 관하여 작성한 글이 있습니다. 이미, 이미지를 자르는 방법에 대하여 많은 분들이 알 고 있었지만 그래도 혹시나 하는 마음에 누군가에는 도움이 되었으면 해서 글을 포스팅 하였습니다. 하지만 제가 다시 글을 보고 생각하지만 아무래도 글로써는 Slice Tool을 설명하기엔 뭔가 부족한 점이 있는것 같아, Slice툴에 관하여 역시, 이번주 중에 다시하여금 동영상으로 정리하여 올릴 예정입니다. 실제로 조금 더, 말씀드리고 설명해주고픈 부분이 많은데 글로써 쓰기에는 뭔가 한계가 있음을 느꼈습니다.    지금까지 처음으로 제가 iOS7키패드 버전을 주고 받으며 나눴던 '무적태권부이'님에게 피드백(사진)을 한번 받았습니다. 다른분들도 다들 바쁘시고 일이 있으실 겁니다. 조만간 피드백이 될 걸 생각하며 나중에 피드백 건수가 많아지면 한번 정리하여 포스팅 하도록 하겠습니다. 말이 길었네요.

아무튼, 이번 기회에 iOS의 디자인 발전에 조금이라도 힘을 보태어 다같이 예쁜 세상(?)을 만들어 봤으면합니다. 차후엔 키패드 뿐만 아니라 키보드 자판 및 여러가지를 한번 디자인 해 볼 생각입니다. 날씨가 많이 시원해지네요~ 제 스토리에 오시는 모든 분들이 건강 하시길 바랍니다. -rollstory

2013/10/8/TUE Updated

많은 분들이 아이폰 4/4S버전을 원하셔서 4/4S버전도 포스팅 하게 되었습니다. 아래는 해당글 링크 입니다.

2014/1/3/FRI Updated

키패드 리디자인을 포스팅한지 몇개월이 지났습니다만, 아직 간간히 댓글로 파일을 신청하시는 분들이 많으십니다. 우선, 댓글 다신분들에게 바로바로 파일을 못드려서 죄송합니다. 하지만 댓글이 달려있으면 매주에 한번씩 정리하여 일괄로 파일을 보내드리겠습니다. 하나만 당부 하자면, 제가 보내드리는 파일은 '그저 디자인만 된 포토샵(PSD)파일일 뿐입니다.' 따라서, 기타 적용방법 등은 클리앙등의 사이트를 이용하여 참고하시길 바라며, 아울러 PSD파일이기에 오로지 포토샵에서만 열 수 있음을 미리 알려드립니다. 그럼, 새해에도 롤스토리를 찾아주시는 모든 분들이 건강하시고 복 많이 받으시길 기원합니다!

■ 2013/10/08 - [GUI/UI/UX/10月 - October] - [UI]iOS7 키패드 리디자인 Ver2.0 iPhone4/4S

2014/2/24/MON Updated

안녕하세요. 롤스토리 입니다 :-) 여러분들의 성원에 힘입어 드디어 정식적으로 애플앱스토어에 'rollstory'키패드 스킨을 사용할 수 있게 되었습니다!. 초성검색과 단축번호 등록 등등 편리한 기능도 같이 있는 아름다운 다이얼러 '다이얼+'를 지금 만나보세요.(아래의 링크를 확인해보세요)

■ 2014/02/24 - [GUI/UI/UX/2月 - February] - [앱제작]다이얼+ (Dial+)