Swit Mobile

협업의 기본, 모두의 손 위에서 만개하는 가능성.

Works from Swit Korea Inc. (2017-2021)

Made with Sketch, Zeplin, Figma, Git

related to Swit Orbit, Crêpe Design System

Swit의 모바일 플랫폼(Android, iOS)의 디자인 작업을 총괄하고 관리하는 업무를 진행했습니다.

  • 서비스의 기초 구조 정립에 참여했으며, Swit의 기능을 가능한 모바일에 담을 수 있도록 데스크탑 버전의 디자인 및 기획을 모바일 플랫폼에 맞게 조율하는 업무를 지원했습니다.
  • 제품 개발에 필요한 케이스를 추적하여 목업 및 Lo-Fi 프로토타입을 제작하고 관리했습니다.
  • Git을 통한 리소스 제공, 그리고 디자인 시스템 가이드 등 개발팀과 긴밀한 협업을 진행하여 기획 및 디자인과 개발 간의 프로세스를 대폭 단축할 수 있도록 했습니다.
Swit의 파일, 업무 상세, 채팅 화면

앞으로도, 아니 이전에도,

업무는 책상 위에서만 하는 것이 아닐 것입니다.

Swit은 팀과 팀이 모인 회사에서 함께 일할 수 있도록 각종 기능을 한데 모은 협업 도구입니다. 서비스가 제공하는 워크플로에 사용자가 맞춰야 했던 경쟁 서비스와 달리, 가장 적합한 방식으로 일할 수 있게 돕고 고유의 업무 문화를 유지하며 팀과 팀을 넘나드는 협업을 가능하게 하자는 미션을 가지고 있습니다. 이 의도를 서비스에 녹이기 위해서, Swit은 경쟁사 서비스 수준의 기능을 한데 모아 제품 안에 담을 필요가 있었습니다. 대화 채널과 프로젝트 관리라는 커다란 두 줄기를 기반으로, 이를 유기적으로 연결하여 업무 프로세스 전반에 각 기능을 정보의 끊김 없이 활용할 수 있도록 도모하고자 했습니다.

하지만 일은 책상 위에서만 하는 것이 아니었습니다. 우리의 협업 경험을 어떠한 환경에 있는 사람이어도 안정적으로 제공할 수 있어야 했고, 같은 수준의 생산성을 발휘할 수 있도록 디자인되어야 했습니다. Swit의 모바일 플랫폼은 이런 주제 의식을 가지고, 데스크탑 기반으로 설계되었던 솔루션을 모바일에 맞게 조율해 동일한 서비스를 제공한다는 목표로 설계되었습니다.

지금의 Swit과 과거의 Swit 모바일의 모습

타협없는 협업이 만드는 협업의 본질

초기에는 방대한 기능을 쉽게 탐색할 수 있도록 홈, 채널, 프로젝트로 크게 나누어 담았습니다. 먼저, 홈은 알림과 즐겨찾기 등의 개인화된 정보를 열람하는 공간으로, 5개의 탭으로 이루어져 있었습니다. 그다음으로, 채널은 채팅과 아이디어를 남길 수 있는 포스트 기능이 담겨 있었고, 프로젝트는 업무를 생성하고 다양한 뷰로 관리할 수 있는 기능으로 만들어졌습니다.

지금의 Swit 데스크톱의 모습과 Crêpe가 적용된 Swit의 컨셉트

이런 구조로 개발 중이었던 모바일 서비스는 크게 두 가지 문제에 직면했습니다. 첫째는 성능 문제로, 각 기능의 화면 하나하나가 방대한 데이터를 송수신하도록 설계되어 기기에 부담을 주었습니다. 특히, 메인 액티비티의 경우 위의 3가지 기능이 담겨 있었고, 이 막대한 데이터 캐시를 버티지 못하는 사양의 기기에서는 강제 종료되는 치명적인 이슈까지 발생했습니다. 두 번째는 사용성 문제였는데, 기존 인터페이스는 데스크탑 앱의 위계 관계를 일치시켜, 정보를 탐색하고 사용하는 데 편리하게 만들고자 했었습니다. 그러나 이 구조에 치우쳐 있어 대부분 기능의 진입 단계가 길어지며 복잡해졌고, 결과적으로 많은 사람이 이동하면서 사용하는데 불편함을 느꼈습니다.

이 무시할 수 없는 두 가지 요인을 해결할 타개책을 모두가 함께 연구했습니다. 장고에 장고를 거듭하며, 표시하는 데이터를 대폭 축소하는 방법, 기능을 정리하고 매우 간단한 형태로 앱을 제공하는 방식, 크게 나뉘는 두 갈래의 기능을 따로 서비스하기 등 다양한 해결안이 도출되었고, 이 중 우리의 목표를 해치지 않으면서 효과적으로 개선할 방법을 갈구했습니다.

데스크톱 앱과 모바일 앱의 UI 비교

펼치고 접어 다시 만든 군계일학

자체적인 통계를 보며 모바일 앱 사용자는 자주 사용하거나, 알림이 쌓인 몇 개의 채널과 프로젝트만을 오간다는 사실을 파악했습니다. 새 인터페이스는 이 여정을 줄이는 방향으로 가기 위해, 아예 첫 화면으로 채널이나 프로젝트 화면을 보여주는 방향으로 디자인되었습니다. 본래 메인 액티비티로서 제공하던 기능은 내비게이션 드로워에서 그대로 표현하여 데스크탑 버전과 기능상의 위계질서를 맞췄습니다.

기술적으로는 3개의 탭 정보를 모두 로드해야했던 기존과 달리, 싱글 페이지 어플리케이션으로 구성되어 지금 보고 있는 화면을 갱신시키거나 위에 오버레이하는 형식으로 기능을 표현합니다. 필요한 정보만을 로드하기 때문에 데이터를 훨씬 적게 주고받으며, 백그라운드에 이전 화면의 스택을 많이 쌓아두지 않기에 성능 부담이 크게 줄어 안정적으로 서비스를 제공할 수 있게 되었습니다.

Swit Home과 워크스페이스 목록 화면

더 넓은 소통에 걸맞은 마법같이 새로운 공간

서비스 출시 이후 지속해서 제품을 발전시켜나가며 점점 정교해지고 있었습니다. 그러나 우리의 최종적인 목표는 팀과 같은 소규모의 영역 뿐만 아니었습니다. 각 팀의 업무 문화를 유지하면서도, 서로 교차하며 협업할 수 있는 광범위한 협업 허브를 만들고자 했습니다. 그리고 이 목표 역시 모바일 플랫폼에서도 실현되어야 했습니다.

제품 내에서 워크스페이스는 하나의 팀을 위한 공간이라 정의됩니다. 이런 독립적인 공간을 묶어 오갈 수 있는 높은 개념, 즉 “조직”이란 체계를 만들어 관리와 탐색, 그리고 업데이트를 편하게 받아볼 환경이 필요했습니다. 또한, 기존 티어를 위해 기본적인 구성 체계를 유지해야 하고, 이미 다양한 기능이 내재해 있는 상태이기에 이와 조화를 이루는 인터페이스가 되어야 했습니다.

워크스페이스 기반

이런 조건을 만족하기 위해 기존 “워크스페이스 탐색” 화면에 집중했습니다.

상위 개념이 없기에 근본적으로는 다른 것을 다루는 화면이지만, “워크스페이스를 모아 본다”는 형태는 조직 기능을 표현하기 적합했습니다. 또한, 개념적인 위계가 유사했기에 조직 기능을 다루기 알맞은 위치라 판단했습니다.

워크스페이스 목록 화면
조직 멤버, Swit Home, 모든 워크스페이스 활동 화면

크나큰 회사를 손가락으로 넘나들다

“워크스페이스 탐색” 화면은 이런 대규모 조직용 플랜에서 새로운 업무 공간인 “Swit Home”으로 돌아왔습니다. 단순하게 내가 참여하고 있는 팀의 워크스페이스를 확인하는 것을 넘어, 팀과 팀을 넘나드는 협업을 위한 기능이 한 화면에 담겼습니다.

워크스페이스를 만들거나 탐색하는 기능이 조직에 맞게 다듬어졌고, 조직 통합적인 사용자 설정에 쉽게 접근할 수 있도록 디자인되었습니다. 그리고 활동과 멘션, 검색, 그리고 멤버 목록 기능은 모든 워크스페이스를 초월해 제공합니다. 서로 다른 워크스페이스의 알림을 한 곳에서 받아보고, 산재해 있는 정보를 손쉽게 찾아낼 수 있게 된 것입니다. 특히, 조직에는 “팀”이란 개념이 추가되었기에, 멤버 목록은 “조직 멤버 목록”이 되어 멤버 프로필뿐만 아니라 회사 구조와 팀 소속을 쉽게 조회할 수 있게 설계했습니다.

Swit의 채널, 프로젝트, 업무 상세, Swit Home 화면

손아귀 안의 공간, 커져 나가는 창의를 위한 무대

위와 같은 구조 개편과 조직을 위한 기능 업데이트 등을 통해, Swit은 국내외 크고 작은 회사의 협업 도구로 정착되어 다양한 창의가 발산되는 허브로서의 사례를 톡톡히 만들어나가고 있습니다.

불필요한 소통을 줄이는 것. 사람들 사이의 이해가 빠르게 일치하도록 도와 이런 시간을 줄여 더 고민하고 생각할 시간을 만들어낼 수 있도록 제품을 만들어왔습니다. Swit을 디자인하며 이런 거대한 목표를 손 위에 올리는, 항상 연결된 문화를 만들고 업무 공간의 한계를 부수는 값진 작업을 진행할 수 있었습니다.