[희희] 문어발 개발자, UX 개선 도전기

트리브의 iOS 개발자 '희희'입니다.

 

마냥 개발자답지 않은 백그라운드를 가진 제가 트리브 프로젝트에서 고민한 내용,

그중에서도 특히 UX 개선을 위한 고민을 담은 회고글입니다.

회고를 적으며 그동안 제 아킬레스건이라고 생각했던 '개발자스럽지 않음'이 장점이 될 수도 있음을 느꼈습니다.

 

작성자 소개글 보러가기

 

---

  

살짝 어색한 사이였던 대학동기 언니 '유'에게서 연락이 왔다.

그때의 나는 마케팅 커리어를 밟다가 개발자로 전향한 직후였고, 이 소식을 들은 개발자 지망생(지금은 멋진 개발자가 된) '유'가 같이 식사를 제안한 것이었다.

 

솔직하게 말하자면 함께 사이드 프로젝트 하자는 제안을 받을 거라는 김칫국을 마시며 약속 장소에 나갔다. 당시 나도 개인 프로젝트를 나름대로 성공시키기는 했지만, 혼자 일하는 것에 한계를 느끼던 터였다. 이제 다음 스텝을 밟고 싶었고, 그게 팀 프로젝트라고 생각했다.

서로의 핏이 맞으니 "재밌게 프로젝트 해보자!"라는 가벼운 마음으로 시작했었는데, 어느덧 몇 년의 시간이 흘렀다.

 

트리브를 회고하는 글을 적자고 제안받았을 때는, "좋아"라는 말이 나오기 전 머릿속에 수많은 레거시와 구린 코드들이 스쳐지나갔다.

그래도 내 성장기를 함께 한 프로젝트이니 기록을 남기는 차원에서 회고 작성에 참여하기로 하였다.

 

 

---

목차
1. 선택의 실수를 줄여주는 UX
2. 기대감을 불러일으키는 UX
3. 햅틱 피드백을 통한 적극적 UX
4. 마치며

 

 

프로젝트를 시작하던 시기의 나는 아직은 개발자스럽지 않은 상태였다.

영상 편집과 콘텐츠 마케팅 인턴을 한 상태였고, UI디자인 수업이나 스토리텔링 수업을 듣던 대학생이었다.

그러다 보니 일반적으로 떠올리는 개발자보다 디자인적/사용성 측면의 디테일에 예민한 편이었다.

트리브 프로젝트에선 디자인에 직접적으로 관여하지는 않았지만, 유저가 할 수 있는 동작들에 대해서 다방면으로 고민하고 보다 편하게 사용할 수 있도록 고민했었다.

물론 나는 UX 전문가는 아니지만, 개발자로서 사용자를 위해 어떤 고민을 했고 어떤 효과를 기대했는지 소개하고자 한다.

 

 

1. 선택의 실수를 줄여주는 UX

안드로이드 휴대폰을 쓰다가 아이폰으로 넘어갔을 때, 가장 큰 변화는 [뒤로 가기] 물리 버튼이 없다는 점이었다. [뒤로 가기] 버튼이 없어도 유저가 불편하지 않도록 좋은 UX를 제공해 주겠다는 애플의 자신감이 돋보이는 지점이라고 생각했다. 그리고 iOS 개발자들도 (원하든 원하지 않든) 애플의 뜻에 따라서 불편함 없는 UX를 제공하도록 노력해야 한다.

뒤로 가기의 본질은 잘못된 선택을 했을 때 쉽게 되돌릴 수 있다는 데에 있다. 그렇기 때문에 뒤로가기의 공백을 메우려면 실수를 방지해야 한다고 생각했다.

트리브에도 유저의 실수를 방지하기 위하여 추가된 여러 단서들이 있다.

 

선택의 실수를 줄여주는 UX #1)
레이아웃 변경 애니메이션

친구 초대 화면(좌) / 일정탭(우)

 

특정 동작을 했을 때, 화면 전반의 레이아웃이 변경되는 경우가 있다. 유저가 이를 인지하지 못하면 의도하지 않는 곳을 누르며 실수를 범할 수 있다.

좌측 화면은 여행 생성 단계 중 친구를 초대하는 화면이다. 이 화면은 전체 친구 리스트가 수직 스크롤로 위치해있고, 선택이 된 친구 목록이 상단에 수평 스크롤로 자리해있다. 문제는, '선택된 친구' 영역이 사라졌다 생길 수 있는 영역이며 이에 따라 전체 친구 리스트의 레이아웃 위치가 변경된다는 점이었다. 이를 인지하지 못할 경우 다른 친구가 선택될 수 있다.

우측 화면은 여행 일정탭 화면이다. 비교적 작은 모바일 기기 환경을 고려하였을 때, 지도가 늘 떠있을 필요는 없다고 판단하였고, 지도 접기/펼치기 버튼은 추가하였다. 이 버튼 누르면, 지도 영역이 사라지고 보이면서 화면 전반의 레이아웃이 변경된다.

 

 

사용자 인터렉션에 따라 변하는 레이아웃

 

이런 화면들에서 레이아웃이 바뀌었음을 유지가 인지할 수 있게 해줘야 한다. 이를 위해서 유저의 인터렉션에 대한 피드백을 아래와 같이 애니메이션을 추가하여서 개선하였다. 애니메이션을 통해서 부드럽고 자연스러운 사용성을 제공할 뿐만 아니라, 유저가 노력을 기울이지 않아도 레이아웃이 변했다는 사실은 직감적으로 알 수 있게 해준다.

 

 

 

선택의 실수를 줄여주는 UX #2)
명확한 버튼 상태 표시

 

다인 여행의 여행스타일검사(이하 여스검)은 단순한 양자택일의 테스트이다. 그 화면만의 특징은 항목 간 뒤로가기 버튼이 없다는 것이다. 즉, 잘못 선택하면 테스트를 처음부터 다시 시작해야 한다. 테스트의 스텝이 길지 않고, 2지선다의 단순한 형식이기에 이런 UI 자체는 적절할 수 있다고 생각했다. 그러나, 그렇기 때문에 다른 화면들보다도 명확한 선택을 보장해 주는 것이 매우 중요했다.

이를 보장해 주기 위해서 유저가 버튼을 누르는 시점부터 드래그를 통해 버튼 영역을 드나드는지를, 터치 이벤트가 종료된 위치로 판단하여서 선택/선택해제 UI를 표시해 주었다.

유저가 원치 않는 선택지를 눌렀을 경우, 보다 쉽게 취소할 수 있게 되고, 고민할 시간을 추가로 줄 수 있었다.

 

위 동작을 구현하다 보니 iOS의 터치 영역이 내가 생각한 것과 달랐다. (실제 보이는 버튼보다 꽤나 크게 버튼 영역이 잡혀있었다.)

작은 모바일 기기를 배려한 동작으로 추정되지만, 위 화면처럼 큰 버튼에는 불필요한 동작이었다.

그래서 이 부분은 커스텀 코드를 넣어서 화면에 보이는 영역만큼만 버튼 영역으로 인지되도록 하였다.

이것과 관련된 기술적인 내용은 내 개인 블로그에 따로 정리해 두었다. ([iOS] UIButton의 TouchDrag영역이 이상하다?)

 

 

 

2. 기대감을 불러일으키는 UX

유독 경영프로그램에서 MC를 자주 맡는 아나운서가 있다.

다양한 장점을 가지고 있겠지만, (수상자 발표에 있어서는) 그가 가진 완급조절 능력이 긴장감과 기대감을 불러일으키기에 탁월하기 때문이 아닐까 생각한다.

어떠한 결과를 공개함에 있어서 서비스에서도 마찬가지로 효과를 줘야 한다고 생각했다.

재미를 위해 추가한 콘텐츠인데, 정적인 것보다는 동적인 것이 더 재미있지 않은가.

 

기대감을 불러일으키는 UX #1)
결과그래프 애니메이션

 

앞서 본 여스검을 여행 참여자 모두가 완료하면 결과 보고서를 확인할 수 있다. 단순 정보 전달 페이지가 아니라, 나와 내 친구가 진행한 테스트의 결과인 만큼 두근거리는 마음으로 해당 페이지에 진입할 것이다. 그렇기 때문에 정적인 느낌보다는 동적인 느낌을 주고 있었고, 기대감을 고조시키고자 화면진입 시에 결과가 바로 보이지 않는 것이 좋겠다고 생각했다.

이를 위해서 결과보고서의 최상단에 위치한 막대그래프에 애니메이션을 추가하였다. 막대의 높이와 색상이 서서히 변하며 결과를 보여주도록 개발하였다. 애니메이션 시작 시점을 화면이 그려진 직후(viewDidAppear)로 잡아서 유저가 처음에는 모든 그래프가 0%인 사람를 보고, 그 후에 실제 결과를 확인하도록 하였다.

 

 

기대감을 불러일으키는 UX #2)
스크롤에 반응하는 화면

소비 리포트 페이지도 여행에서 한 소비 데이터를 바탕으로 분석한 내용을 보여주는 화면이다.

그렇기에 결과보고서와 비슷한 효과를 입히고 싶었다. 다른 점이 있다면, 화면 배치상 그래프가 최상단에 위치하지 않았고, 그래프에만 애니메이션을 넣었을 때 어색하다고 느껴졌다.

그래서 이 페이지에는 화면을 구성하는 모든 컴포넌트들이 스크롤에 반응하도록 구현하였다. 화면에 일정 수준 이상 노출된 시점을 기준으로 애니메이션이 입혀지기 때문에 궁금증을 자아낼 수 있었고, 전체적인 일관성을 유지하면서 페이지가 동적으로 보이는 효과가 있었다.

 

 

(-) Don't

개발자의 구현 욕심 때문에 불필요한 효과가 추가되어서 오히려 부정적인 감정을 불러일으키는 경우도 있다.

가계부의 총지출액 표시 UI를 만드는 과정에서 비슷한 경험을 하였다.

숫자가 점점 커지거나 한 글자씩 표시되는 애니메이션은 어디선가 본 듯한 익숙한 형태였고 만들어 보고 싶다는 욕심이 들었다.

그래서 처음에는 자릿수만 표시하고, 최종 금액은 애니메이션을 거친 후에 표시되도록 개발하였다. (아래 gif 좌측 화면)

그런데 이 UI가 ‘지출액’을 표현하는 것이라는 점이 문제였다.

포인트나 마일리지 같이 높을수록 좋은 숫자라면 이러한 애니메이션이 긍정적인 감정을 불러일으킬 수 있지만, 지출액처럼 높을수록 부담스러운 숫자라면 이야기가 달라진다. 애니메이션 때문에 실제보다 더 많이 지출한 것처럼 느껴질 수 있다.

두 번째로, 숫자의 변화를 최소화하기 위해서 높은 자릿수부터 숫자를 공개하는 식으로 애니메이션을 변경해 보았다. (아래 gif 우측 화면)

이때 문제가 된 것은 화면의 위치였다. 이 화면이 상단탭으로 접근하는 곳에 위치해있었다. 탭 전환이 쉽고 빈번하게 이뤄지는데, 이때 최신 정보를 가져오면서 매번 애니메이션이 재생되었다. 지나치게 잦은 애니메이션이 피로감을 준다고 느껴졌고, 결과적으로 부정적인 감정을 느끼게 한다고 생각되었다.

여기까지 판단을 한 후, 해당 애니메이션 작업건은 과감하게 삭제하였고 이 화면은 정적인 상태를 유지하여서 배포하였다.

욕심을 부려서 넣은 애니메이션. 현재는 삭제한 상태.

 

 

3. 햅틱 피드백을 통한 적극적 UX

햅틱 피드백은 촉각 피드백을 의미한다. 일례로, 버튼이나 스위치 등을 눌렀을 때 오는 진동이 대표적인 햅틱 피드백이다.

iPhone 7의 홈버튼은 햅틱이 도입된 대표적인 예시이다. 물리버튼 없이 햅틱피드백과 사운드를 이용해서 이질감 없는 홈버튼을 만들었고, 햅틱 피드백이 잘 활용될 수 있는 예시를 보여주었다.

아이폰 기본 UI 컴포넌트들 중에서 햅틱 피드백을 주는 경우가 있다. 예를 들어, 스피너나 스위치 등의 컴포넌트는 기본적으로 선택에 대한 햅틱 피드백이 들어가 있다. 이런 피드백은 선택지가 정상적으로 선택/해제되고 있음을 유저에게 알려주고, 서비스를 보다 다이나믹하게 만들어준다.

트리브 서비스에서 가장 동적인 역할을 한다고 생각되는 여행키트 부분에 햅틱 피드백을 추가하였다.

 

 

iOS에서는 아래의 3가지 햅틱 피드백을 제공한다.

• Notification
• Impact
• Selection

Notificatoin은 행동의 결과에 대한 피드백을 제공해 주고(성공, 경고, 오류), Impact는 두 오브젝트 간 충돌이나 시각적인 경험을 서포트하는데 사용되며 총 5단계의 효과를 줄 수 있다. 마지막으로 Selection은 UI 컴포넌트의 변화에 대한 피드백을 제공한다.

참고 문서: https://developer.apple.com/design/human-interface-guidelines/playing-haptics

 

 

햅틱 피드백을 통한 적극적 UX #1)
Selection 햅틱

 

토글이 되는 UI에 선택 햅틱을 추가하였다. 준비물 화면의 체크박스, 여스검의 선택지가 그 예시다. 여스검에 포함된 스피너의 경우, 기본 스피너에 UI만 커스텀으로 입힌 형태였기 때문에 따로 추가 작업을 할 필요가 없었다.

 

 

 

햅틱 피드백을 통한 적극적 UX #2)
시각적 피드백과 결합된 햅틱

 

제비뽑기 화면을 위와 같은 플로우로 이뤄져 있다. 특이한 점은 서비스 내에서 유일하게 결과 대기 화면이 존재한다는 점이다. 결과 대기 화면에는 로딩을 표현하는 애니메이션이 추가되어 있다. 그 화면에서 커스텀 햅틱 피드백을 추가하였다. 위에 추가한 Selection 피드백보다 더 다이나믹한 진동 효과를 추가하여서 게임적인 느낌을 더했다.

 

 

 

4. 마치며

개발자의 입장에서 UX를 신경쓰는 것이 나의 영역이 아니라고 느껴질 수 있다. 또한, UX를 고려하는 것 자체가 스스로 할 일을 더 만든다고 느껴지기도 한다.

그렇지만 작은 디테일들이 모여서 서비스 전반의 퀄리티를 개선한다고 생각하고, 이런 디테일을 볼 줄 아는 것이 개발자로서 내가 가진 큰 장점이라고 생각했다. 트리브 프로젝트를 할 때는 기획, 디자인, 마케팅 등 다른 분야에 믿고 맡길 수 있는 팀원들이 있었기에, 개발과 더불어 UX에 신경 쓸 여유와 열정이 있었다.

이번 회고를 작성하며 과거의 나에게서 서비스 제작자로서의 자세를 배울 수 있었다. 개발 실력을 지금보다 부족할 수 있지만, 사용자를 최우선으로 생각하면서 스스로 고민했던 모습을 보며, 앞으로 내가 나아가야 할 방향성을 제시받은 것 같다.

 

 

 

 

---

 

 

함께 읽으면 좋은 글

개인적 관점에서 회고를 적어봤지만, 트리브 프로젝트에서 처음으로 다른 개발자와 협업을 하면서 많은 것을 배웠습니다.

굉장히 서툰 점이 많은 내 옆에서 도움을 주고 받으며 같이 성장한 밍글에게 감사의 말을 전합니다.

밍글의 [🐾 협업하는 개발의 첫걸음, 트리브에서 얻은 경험.] 보러 가기