들어가며
UX/UI 디자인은 사용자와 제품 간 상호작용에서 발견될 수 있는 모든 부분에 있어 유용성 및 접근성 개선에 초점을 두고 사용자 경험 만족도를 높이는 것에 목적을 두고 있는데요! 사용자 입장에서 편리하다고 느끼는 디자인 설계는(100%는 아니지만) 대략적인 공통점과 유사성을 가집니다. 따라서 어느 정도 정답이 존재하는 분야이며, 그 틀에서 크게 벗어나지 않는 선에서 브랜드 성격에 맞게 디자인을 설계해야 합니다. 이런 이유로 UX/UI 디자인은 특히나 명확하고 타당한 근거를 요구하곤 합니다.
이에 저희는 2차 스프린트를 기점으로 이전에 설계했던 디자인을 점검하고 살펴보면서 어떤 이유로 그렇게 디자인했으며, 그 디자인이 어떤 문제점을 가졌고, 어떻게 개선했는지 기록하고자 합니다. 그 첫 번째 기록은 앱잼 이후 2차 스프린트 기간입니다. 한정된 기간 안에 빠르게 작업을 해야 했던 앱잼에서는 완벽이 아닌 완성에 집중할 수 밖에 없었습니다. 그런 탓에 만족하지 못했지만 어쩔 수 없이 넘길 수밖에 없었던 부분들과 한숨 돌리고 다시 되돌아볼 때 보였던는 문제점에 대해 UX/UI 개선을 진행했습니다. 앱잼 이후, 처음으로 충분한 시간을 가지고 고민해본 시간이라 다양한 뷰에 대해 리디자인했습니다.
1. 전체 마진 조정
| 문제점 발견
양옆 마진이 적어서 전체적으로 꽉 차고 답답함이 느껴진다.
| 원하는 기대효과
1. 실제로 앱을 구동시켰을 때, 현재 느껴지는 꽉 차는 답답함을 없애고 싶다.
2. 다른 앱들과 비교해 어딘가 모르게 이질감이 드는 느낌을 지우고 싶다.
| 해결 과정
기존 양옆 마진이었던 20px에서 4px을 늘려서 여유를 더 두고 24px로 설정했다.
2. 프로필 설정 뷰
| 문제점 발견
1. 프로필 이미지가 성별에 따라 선택지가 제한될 수 있으며, 브랜딩 캐릭터인 터닝이의 활용도가 적다.
2. 프로필 이미지를 선택하고 저장하기, 총 2번을 터치해야 이미지 변경을 할 수 있기에 번거롭다
| 원하는 기대효과
1. 터닝이 활용도를 높여 브랜딩 캐릭터를 유저들에게 더 잘 각인시킴과 동시에 사용자의 이미지 선택 자유성을 높이고 싶다.
2. 프로필 이미지 변경을 위한 터치 횟수를 줄여 편리성을 높이고 싶다.
| 해결 과정
1. 프로필 이미지를 사람 일러스트가 아닌 터닝이 캐릭터로 변경했다.
2. 저장하기 버튼을 지웠으며, 이전에 설정했던 이미지를 제외한 다른 이미지를 선택하면 자동 저장되며 창이 내려간다.
3-1. 홈 화면: 곧 마감되는 공고
| 문제점 발견
'오늘' 마감되는 공고를 홈 상단에 띄워주는 건 의미가 없다. 왜냐하면 오늘 당장 마감되는데 해당 사실을 리마인드해봤자 당일날 바로 준비해서 제출하기에는 어렵다.
| 원하는 기대효과
사용자에게 실제로 도움이 될 수 있는 정보에 대해 리마인드를 줘야한다.
| 해결 과정
1. '오늘'이 아닌 일주일을 의미하는 '곧 마감'으로 워딩을 변경했다.
2. 또한, 오늘이 아니라 일주일이라는 기간이 생긴만큼 공고 카드에 기업 정보 및 마감 날짜에 대한 정보를 추가로 삽입했다.
3-2. 홈 화면: 공고 필터링 영역
| 문제점 발견
1. 유저들이 공고 필터링 가로 영역 전체를 터치 영역으로 인식하고 있다.
2. 들어갈 정보는 많은데 협소한 공간에 전부 넣으려고 하다보니 답답해보이고 복잡하다.
| 원하는 기대효과
1. 필터링 재설정 버튼에 대한 터치 영역을 필터링 정보 표시 부분과 명확하게 구분되게끔 하고 싶다.
2. 불필요한 정보들과 디자인을 줄여 보기에 여유롭고 편안하게 만들고 싶다.
| 해결 과정
1. 필터링 버튼 영역과 필터링 정보 표시 부분간에 거리를 두었으며, 버튼 디자인 또한 필(fill)형식이 아닌 라인 형식으로 변경하여 버튼임을 쉽게 인지할 수 있도록 하였다.
2. 핵심적으로 필요한 라이팅만 남겨두었으며 구분선도 제거하였다. 이에 아래 공고들과의 경계를 유지하기 위해 총 공고개수와 정렬 라이팅을 통해 구분하였다.
4. 스크랩 공고 색상 변경하기
| 문제점 발견
1. 협소한 공간에 불필요한 라이팅으로 인해 복잡해보인다.(의문형 부제, 디데이 표시)
2. 색상이 과도하게 많으며(10가지 색상이었다.) 색상을 변경하기 위해서는 토글을 열어 변경해야 하는 번거로움이 존재한다.
| 원하는 기대효과
1. 유저가 보기에 모달창의 공간이 답답하게 느껴지지 않게끔 디자인을 변경하고 싶다.
2. 불필요한 선택지를 줄이고, 스크랩 색상 변경 과정을 보다 간편하게 바꾸고 싶다.
| 해결 과정
1. 부제로 있는 '공고를 캘린더에 스크랩하시겠어요?'라는 라이팅과 디데이 정보를 제거했으며, 공고 정보 간의 여백을 줄였다.
2. 팔레트 색상을 줄여 토글없이 바로 볼 수 있도록 변경했다.이에 과도하게 많은 선택지가 줄어들어 유저의 부담을 줄이고 색상 변경 또한 한 번의 터치로 변경 가능하게끔 개선하였다.
5. 공고 상세 페이지
| 문제점 발견
1. 브랜딩 컬러가 과도하게 사용되었으며 항목에 따라 내용을 구분하려고 너무 명확하게 표시하다보니 오히려 가시성이 떨어진다.
2. 상위 항목의 라이팅이 하위 항목들의 내용을 정확히 반영하고 있지 않다.(공고 요약에 요건/직무가 있는 것은 적절하지 못하다.)
| 원하는 기대효과
직관적으로 한눈에 정보가 들어오고 필요한 정보를 곧바로 찾을 수 있도록 개선하고 싶다.
| 해결 과정
1. 각 정보들을 우선순위와 기준에 따라 재배열함과 동시에 보다 미니멀한 디자인을 채택했다.
2. 공고 내용의 카테고리들의 명칭을 변경하여 그에 맞는 정확한 내용들이 들어갈 수 있도록 변경하였다.
마무리하며
리디자인을 진행하며 기존의 디자인에서 무언의 급박함이 느껴졌어요.
앱잼에서의 전반적인 볼륨이 컸던지라 하나의 뷰에 투입할 수 있는 절대적인 시간과 인력이 부족했는데요..
그러다보니 자연스레 퀄리티는 낮아지고 '우선 이렇게 하자'로 넘어갈 수밖에 없더라고요.
같이 작업했던 디자인 팀원과 저는 둘 다 약간의 완벽주의가 있어서 일반적인 상황이었다면 절대 그냥 넘어가지 않았을 텐데, 시간이 제한된 상황에서는 그 완벽주의조차 내려놓을 수밖에 없었습니다...그래도 워낙 앱잼 이후에도 팀 다 같이 서비스를 수정하고 개선해 나갈 방향성이 어느 정도 분명한 상황이었어서, 후일을 도모하는 마음으로 넘길 수 있었던 것 같아요.
그런데 반대로 다행이라고 해야 할지, 시간을 많이 못 쏟았던 탓에 오히려 문제점들이 직관적이고 명확하게 눈에 들어왔어요.
물론 홈 화면 필터링 영역이나 공고 상세정보 페이지처럼 많은 고민과 정성을 쏟은 뷰들도 있었어요.
두 가지 모두 공통점이 있었던 것 같아요.
공간에 비해 들어가야 할 정보들이 너무 많아서 복잡해지고 가시성이 떨어진다는 문제점인데요.
같은 문제를 갖고 있었던 만큼 지향하는 근본적인 해결 방향성도 비슷했어요.
불필요한 정보들을 제거하고(정보의 우선순위 정립) 단순하고 깔끔한 디자인을 하는 거였어요.
말로 풀어내면 되게 간단하게 느껴질 수도 있는데, 그 방향성 속에서 디테일한 디자인들을 수정해나가는 과정은 생각보다 버거웠던 것 같아요.
그래도 결과적으로 시간을 들여 모두가 만족할 정도의 리디자인을 진행한 것 같아서 한편으로는 뿌듯하기도 하네요 ㅎㅎ..
UX/UI 디자인에 경험이 적었던 저로서는 특히나 저의 직관이나 예민한 감각에 퀄리티를 맡겨야했던만큼, 리지다인을 하면서도 그런 것들을 오히려 경계하며 논리적으로 풀어나가려고 노력했던 것 같네요.
언젠가 다시 수정되고,, 또 수정될 디자인들이지만
한 계단씩 올라가며 멈추지 않고 꾸준히 성장하는 디자이너가 되어보려 합니다!
