슬랙 구버전 UI UX 박제하기


최근 슬랙이 큰 규모의 업데이트를 진행했다. 특이하게도 적응시간을 두기 위한 부분인지 사용중인 채널 중에 한곳에만 업데이트가 적용되고 나머지는 기존화면을 유지하고 있다. 기존에 슬랙을 사용하면서 특별히 불편함을 느낀적이 없었기에 이번 업데이트가 그리 반갑지 않았던 1인으로서 이런 방식의 운영은 정말 본받을만하다고 느꼈다. 서서히 떠나보내고 받아들이는 과정을 주는 그런 느낌이랄까?

하지만 언제 사라질지 모르는 기존화면을 더 늦기전에 분석해서 박제해놔야겠다고 문득 느꼈다. 오늘 분석은 데스크톱 기준이다.

 

🔸서비스 소개

슬랙은 비즈니스 팀의 협업을 위한 메시징 플랫폼이다. 

 

무엇을 할 수 있나?(핵심 서비스)

워크스페이스를 구성하여 팀원끼리 채팅을 하고, 파일을 공유하고, 프로젝트 관련 업무를 할 수 있다.
채널을 통해 팀원을 구성하고, 각 채널에서 특정 주제에 대해 다룰 수 있다.

채널은 공개/비공개 설정하여 하나의 워크스페이스 안에 공개/비공개 공간을 운영할 수 있다.

그 외에 다양한 앱과 연동하여 업무 효율성을 높이거나 외부사람들과의 협업도 할 수 있다.

 

어떻게 돈을 벌지?(수익공식)
1. 구독 서비스 : 슬랙은 팀 규모에 따라 다른 요금제를 제공하며, 유료 요금제를 사용하는 기업들이 매월 일정 금액을 지불한다.

2. 앱 마켓 수수료 : 슬랙은 다양한 앱과 연동하여 업무 효율성을 높일 수 있도록 앱 마켓을 제공하고 있다. 슬랙에서 앱을 구매하거나 구독하면, 슬랙은 해당 앱의 판매 대금에서 일정 비율의 수수료를 받는다.

 

 

🔸사용법

슬랙 워크스페이스 생성하기

슬랙 워크스페이스 생성 첫 단계
슬랙 워크스페이스 생성 최종단계

 

워크스페이스를 생성하는건 간단하다. 질문에 따라 답변을 작성하면 자연스러운 흐름으로 스페이스의 이름과 내 닉네임, 기본채널명을 이 설정되는것을 확인할 수 있다. 생성단계에서 이미 슬랙의 UI를 그대로 가져와서 정보를 배치해주기때문에 내가 지금 입력하는 내용이 어떤 역할을 하는지 자연스럽게 인지하게 된다.

 

 

 

가장 먼저 환경 셋팅하기

슬랙 워크스페이스의 기본 GNB

 

1. 채널 구성하기

워크스페이스를 만들면 필요에 따라 채널을 만든다. 워크스페이스를 만약 회사라고 생각한다면, 채널은 여러 개념으로 분류 할 수 있는데 일반적으로 아래와 같이 분류한다.

  • 공용 채널(워크스페이스의 모든 팀원이 활동하는 공간)
  • 팀별 채널(각 팀별 활동하는 공간)
  • 프로젝트 채널(TF라고 이해하면 편함)

여기에서 또 나뉘어서 공용 채널 공간을 공지게시판처럼 공적으로 사용하거나, 혹은 자유채팅공간으로 좀 더 사적인 공간으로 사용하기도 하고 공개/비공개 기능을 활용하여 여러 용도로 활용할 수 있다. 

새 채널 만들기 팝업. 공개/비공개를 설정할 수 있다.

 

슬랙 채널을 만든 모습

채널을 만들고 나면, 채널의 설명을 편집하거나 해당 채널의 멤버를 초대할 수 있다. 

채널을 설명하는 내용을 편집하는 창

 

 

2. 팀원 초대하기

이제 함께 활동할 팀원을 초대한다. 초대링크를 복사하거나 초대 메일을 보내서 간단하게 초대할 수 있다.

슬랙 사용자 초대 팝업

 

이제 간단하게 환경도 셋팅을 완료하였다.

 

 

 

 

채팅, 파일공유로 협업 하기

글 작성

간단한 채팅이나 장문의 글, 단문의 글, 링크를 달거나 파일을 깔끔하게 업로드할 수 있다.

작성하는 에디터 UI의 공간은 확장되지 않고 제한적인데, 더욱 간결한 텍스트를 작성하게 되는것 같기도 하다.

모바일에서는 작성화면을 풀로 확장시킬 수 있다. 화면디바이스의 제한적인 크기를 고려한 부분인것 같다.

슬랙의 글작성 에디터.
링크 작성 팝업
에디터에서 지원하는 글 편집
작성된 글 화면

 

 

 

글 작성이 되었습니다 멤버 여러분!! 여기를 보세요

 

누군가 새 글을 작성하면 멤버들에게 알림이 발생한다.

여기봐!
새로운 업데이트가 있어!

유저가 설정해놓은 알림에 따라 앱아이콘에 표시되고 푸시알림이 발생하기도 하고

슬랙앱에 접속하면 위와 같이 시각적으로 표시된다. 

갯수가 여러개일때는 숫자는 보이지 않고 텍스트를 단지 Bold처리만 하는데도 그 변별력이 확실하다.

 

 

 

 

개인적으로 슬랙에서 좋아하는 점의 큰 부분은 기본적으로 제공하는 콘텐츠 편집이 훌륭하다는 것이다.

 

 

콘텐츠의 배치

 

콘텐츠를 보면 작성자의 아이콘, 작성자명, 작성일시, 본문내용으로 이루어져 있는데

본문내용을 보여주는 방식이 정리가 잘 된 느낌을 준다.
우선 작성에 대한 정보와 본문을 좌측 들여쓰기를 통해 구분해주고 있고

본문의 경우 단순 텍스트를 가장 상단에 배치하고 그 하단으로 링크 미리보기나 파일요소에 대해 아이콘과 파일명, 파일종류에 대해 군더더기 없이 깔끔하게 보여준다.

 

링크미리보기와 동영상은 미리보기(동영상 플레이가능)

 

 

 

 

 

글에 반응하기. 이모지, 댓글 남기기

작성된 글에 대해 할 수 있는 작업은 다양하지만 대표적으로 댓글을 달거나 이모지로 반응을 하는것이 있다.

 

 

콘텐츠 블럭에 마우스를 오버하면 화면과 같이 우측상단에 할 수 있는 퀵 작업이 나타난다. 

 

이모지 반응이 된 상태. 시각적으로 무척 강조한모습이 보인다.

 

댓글을 작성하려면 우측으로 분할화면이 나타난다. 이전에 작성된 댓글도 확인할 수 있다.

스레드들과 스레드의 댓글의 정보 위계가 서로 다르기때문에 스레드의 댓글을 다른 공간으로 물리적으로 분명하게 분리해주는것이 좋았다.

이모지의 경우도 과장되게 시각적 강조를 해서 보여주는데 이모지는 어디까지나 감정을 표현하는 언어이기 때문에 소통에 있어서 이모지의 역할을 잘 하기 위해서 좋은 선택이라는 생각이 든다.

 

메시징 플랫폼에 대한 기본적인 경험에 대한 리뷰는 이정도에서 끝내며

 

아래는 부가적인 부분들이라 간단하게 정리했다. 

 

🔸쿠키

캔버스

유료플랜에만 제공하는 캔버스는 메모장이라고 이해하면 편하다. 각 채널이나 유저와 하나의 메모지를 공유하고 정리된 회의록이나 체크리스트 등에 활용할 수 있다.

일반 스레드와 다른점은 시간순서로 쌓이지 않고 하나만 핀으로 꽂아놓고 작성한다는 것이다. 그래서인지 글 하나에 댓글을 각기 작성할 수 있다.

캔버스의 글에 댓글달기
캔버스를 공유할 수 있고 편집권한을 제어할 수 있다.

 

 

검색

검색창에 검색어를 입력할때 결과에 대한 가이드를 제공한다. 검색어에 대한 명령어도 제공한다.

슬랙 검색어 입력
슬랙 검색결과 화면

메시지, 파일, 캔버스, 채널, 사람에 대해 결과를 제공하고 From(발생유저), In(채널), 날짜, 파일유형 등 추가적인 필터링도 가능하다.

 

 

스레드의 바다 속 시간 이동하기

스레드가 많이 쌓이다보면 검색어가 아닌 시간적인 흐름으로 훑어보는일도 필요한데, 채널명이 위치한 고정영역에 드롭다운 형태의 타임머신을 제공하고 있다.

특정 시간으로 여행하기

 

 

 

온보딩

슬랙은 또한 첫 사용자를 위한 온보딩이 정말 자연스럽게 잘 셋팅되어 있다.

 

새항목 알림, 그리고 이모지 유도

 

UI컴포넌트를 감싸서 한차원 위의 목소리를 내는 방식1

 

UI컴포넌트를 감싸서 한차원 위의 목소리를 내는 방식2

 

UI컴포넌트를 감싸서 한차원 위의 목소리를 내는 방식3

 

반복되는 알림에 대해 대화형으로 on/off 하는 방식

 

 

 


🔸느낀점

분석을 하면서 슬랙 UI가 정말 심플하다고 생각했는데 생각보다 많은 기능이 다양하게 곳곳에 심어져 있음에도 핵심 경험을 해치지 않게 잘 설계되었다고 느꼈다. 그리고 생각보다 팝업UI가 정말 많았는데, 팝업UI를 잘 활용하는것도 유용하겠다 싶었다. 

전반적으로 거의 애정을 담은 내용이 대부분이었으나 단점이 있다면 아무래도 채팅플랫폼에 기반하다보니 회사의 업무와 분리할 수 없는 일정관리나 마일스톤, 전체 정보의 요약적 정리, 의사결정에 대한 분리 등을 손쉽게 수행할 수 없는 부분이 존재한다는 것이다. 물론 이 부분도 확장 앱을 설치해서 어느정도 해결 가능하다. 무료플랜으로 기본적인 사용이 가능하다는것도 최대 장점인것 같다.

 

+ Recent posts