[iOS] UI/UX 개선 과정

앱을 만드는데 있어서 UI/UX는 많은 고민이 필요하고 앱의 퀄리티를 높여주는 중요한 부분이라고 생각한다.
작고 사소한 차이가 쌓여 사용자들의 경험을 좋게하고 앱에 대한 애정을 높여주는 것 같다.
ui를 개선해나가는 과정을 기록하면 좋을 것 같다는 생각이 들어 기록해보고자 한다.

(사진 속 어플의 데이터들이 더미데이터인 점 양해부탁드립니닷)

 

만들고 있는 어플의 이름은 'Grain'으로 필름 카메라로 찍은 사진을 공유하고 필름 카메라에 대한 정보를 공유할 수 있는 커뮤니티 앱이다.

- 사진을 공유하는 매거진 탭

- 정보를 공유하는 커뮤니티 탭

- 주변의 포토스팟, 사진 현상소, 카메라 수리점을 보여주는 지도 탭

- 내 정보와 올린 게시글,저장한글을 볼 수 있는 마이프로필 탭

총 4개의 탭이 있고 각 탭별로 피드백 전, 후를 비교해보려고 한다.

 

매거진

위에서 차례로 하나씩 살펴보면

1. 사용자의 편리성을 위해 영어를 한글로 변경하였다.

2. 하단 탭바의 아이콘이 명확하지 않다고 느껴 아이콘을 탭 기능에 맞는걸로 변경하고 라벨링해주었다.

 

글의 내용을 자세하게 보여주는 디테일뷰 부분

피드백 전의 본문 내용의 글자가 너무 붙어있어 가독성을 해친다고 느껴서 행간 간격을 넣어주었다.

 

 

 

커뮤니티 

각 커뮤니티 Cell에서 사진과 내용 부분이 너무 떨어져있어 여백을 줄였다.

바꾸고 나니 셀이 붕 떠있는 느낌이 사라진 것 같다.

 

글의 내용을 자세하게 보여주는 디테일뷰 부분

게시글을 저장할 수 있게 해주는 버튼의 위치가 어색하다고 느껴 좋아요와 댓글 버튼과 나란하게 두었다.

타이틀이 차지하는 크기와 버튼의 크기의 차이가 많이 나고 글의 한줄 정도와 크기가 비슷해서 글 내용과 이어지는 느낌이 들어 어색한 것 같다.

 

본문 내용을 보여주는 부분에서 작성자와 글 내용의 리딩점이 같아야할 것 같아서 리딩점을 같도록 해주었다.

 

 

 

마이 페이지 _ 카메라 정보

마이페이지에서 카메라 정보를 등록/수정 할 수 있는 기능이다.

Edit버튼을 누르면 정보들을 삭제나 수정할 수 있고 추가버튼은 아래에 크게 + 버튼을 두고 버튼을 누를시 카메라, 필름, 렌즈 정보들을 수정할 수 있는 버튼들을 플로팅 시켜주었다.

디자인적으로는 예뻤으나 삭제/수정과 추가가 따로 있는 부분과 바디나 렌즈,필름을 추가하기 위해서는 버튼을 2번 눌러야해서 UX적으로 좋지못하다는 생각이 들었다.

아래의 추가 버튼을 지운뒤 Edit버튼으로 통합시켜주었고 바디, 렌즈, 필름 모두 동시에 추가하기 버튼이 보이게끔 하여 UX를 개선했다.

 

 

 

느낀점

매일 보는 지인의 변화를 잘 알아차리지 못하는 것 처럼

앱을 제작하는 입장에서 매일 개발하며 화면을 볼 때는 개선해야할 부분을 놓칠 수 있는 것 같다.

사용자의 관점에서 직접 앱을 실행해보고 여러 피드백을 적극적으로 수용하면서 잘 판단하며 더 나은 앱을 만들어나가야겠다.