사진에 숫자 입력 - 나만의 어플리케이션 개발 일지 06 디자인 변경

 안녕하세요. 이번에는 디자인 변경에 힘을 많이 주었습니다. 애플리케이션 기능을 생각하면 디자인이 뭐가 필요한가.. 싶을 정도로 기능이 없는 상태입니다. 하지만 지인이 디자인이 너무 안 좋다.....라는 말을 많이 해주었고 지인과 같이 일하는 사람들에게 소개를 해도 디자인에서 오는 신뢰감이 많이 떨어질 것 같다고 판단해서 도전하기로 했습니다. 

 

 아직은 디자인을 생각하면 '기존 디자인의 사용성', '애플이 원하는 기준' 이런 것만 생각해봤지 전체 컨셉?적인 디자인을 생각하는 것은 너무 어렵더라고요.. 디자이너분들 진짜 리스펙 합니다. 하지만 사용자의 요청이 들어왔고, 제가 생각해봐도 기능을 제공하는 데 있어 신뢰를 주는 것 중 하나는 디자인이라고 생각되어서 변경을 시도해봤습니다.

 

 (변경을 시도했으나 맞는 방향인지는 알 수 없음..)

 

 처음 변경 대상은 아이콘입니다. 앱을 나타내는 상징이면서도 앱을 담고있는 의미라고도 생각되는 부분입니다. 사실 내용이 좋으면 어떻게든 사용하겠지만 출시할 때 그냥 넣을 게 없어서 정사각형으로 제출한지라 조금은 다듬어야겠다고 생각했습니다.

 

 그래서 나온 생각은 두가지 입니다. 일단 요즘은 앱 아이콘에 이름 없이 상징적인 이미지를 넣어서 하는 애플리케이션이 많습니다. 그렇게 하고 싶은 생각도 많았지만.. 문제는 제 앱은 브랜딩, 상징 그런 것들이 없다는? 점입니다. 그리고 제 어플은 매일 사용하는 어플이 아닙니다.  제 생각대로 만든 브랜딩 이미지를 사용한 아이콘을 적용하면 사용자들이 얼마나 빨리 찾을 수 있을까?라는 생각을 해보면 그림만 사용한 아이콘은 사용성이 많이 떨어진다고 생각해서 어플 기능을 함축적으로 담은 '사진 숫자'는 꼭 들어가야 한다고 판단했습니다.

 

적용된 아이콘을 확인하면 다음과 같습니다. 왼쪽은 기존이고 중앙, 오른쪽이 새로 만든 아이콘입니다. 지금 이렇게 비교하면 제 기준으로는 그냥 평범합니다. 하지만 그림이 있는 아이콘은 전체적인 배경화면 상태로 보면 상당하게 조잡한 이미지를 연상시켰습니다. 그래서 최종적으로는 글씨만 들어있는 '사진 숫자' 아이콘을 선택했습니다. 기존보다는 글씨를 좀 더 줄이고 아이콘 배경색을 변경하였습니다.

 

 그리고 전체적인 색상을 아이콘과 통일하면서 색으로 브랜딩 아닌 브랜딩을 시도하였습니다.

 

 깃 브랜치를 하나로 관리하기 때문에 캡처 화면은 앱스토어를 통해 받은 실제 기기 스크린과 Xcode 시뮬레이터를 같이 사용하겠습니다.

 

왼쪽 :  기존 메인화면 / 중앙 : 변경 메인화면 / 오른쪽 : 사용 기록 요약 모습

 

 앱 기능으로만 생각하면 메뉴만 있어도 충분합니다. 그래서 처음에 TableView 메뉴만 있는 메인화면으로 개발했으나 너무 허전해서 상단 공간을 추가적으로 만들었습니다. 기존 버전을 보시면 상단에 이미지를 주었습니다. 하지만 이쁘지도 않고 기능이 없다 보니 의미가 없다고 판단해서 새로운 버전에서는 사용자들이 자신이 어떻게 이 어플을 사용했는지 정보라도 보여주자라는 의미로 애플리케이션 사용 요약을 넣었습니다.

 

(사실 어떤 앱이나 게임을 하면서 내 활동 통계 보는 것을 좋아하는 사심도 들어있습니다.)

 

동작은 위와같이 진행합니다.

 

 

 사진을 선택하고나서 모습입니다. 전체적인 레이아웃을 변경했고 상단에 아이콘으로 이루어진 저장하기 버튼을 하단으로 내리고 문구를 적어서 사용자들에게 확실하게 다가가는 버튼으로 변경했습니다.

 

동작은 위와같이 진행합니다.

 

 

 

자동 입력 기능에서 시작 숫자를 설정하는 화면은 다음과 같이 변경하였습니다. 좀 더 통일성을 주면서 깔끔하도록 노력했습니다. 나중에 추가될 옵션들을 대비해서 디자인을 했어야 하는데 지금 생각 중인 다음 기능은 영향이 없을 것으로 판단해 옵션을 따로 만들지 않고 시작 숫자만을 입력받는 화면으로 구성하였습니다.

 

동작은 위와같이 진행합니다.

 

 사진에 적용하는 화면입니다. 이 부분이 가장 디자인하기 어려운데,, 일단은 통일성을 위주로 작업을 진행했습니다. Lottie를 사용해서 로딩 이미지를 이쁘게 적용하려고 했으나 사진을 저장하는 메서드가 다른 동작들을 멈추게 하는 것을 해결하지 못해 기본 인디케이터를 사용했습니다. 

 

UIImageWriteToSavedPhotosAlbum이 함수가 비동기로 작동하는 것을 방해하는 것 같은데 아시는 분 댓글로 도와주시면 감사하겠습니다.. Lottie, Global 등 해보았는데 해결을 못해서 ㅜ.ㅜ

 

 동작은 위와 같이 진행합니다.

 

 더보기 화면을 추가하였습니다. 지금은 지난 기록 리스트를 Realm를 사용해서 기록하고 보여주고있습니다. 메일 문의도 메인화면에서 더보기 화면으로 위치를 이동했고, 추가적으로 버전 체크, 폰트 변경 등 설정 관련 기능들을 구현해보려고 계획 중입니다.

 

이번 개선 사항은 안전성을 추가적으로 확인하고 다음 업데이트에 배포할 예정입니다.

 

 

앱스토어 이미지도 변경