협업 툴 톺아보기

안녕하세요. Alto 팀에서 동시편집을 개발하고 있는 차유림입니다.

네이버에서는 분야별로 크고 작은 밋업을 통해 기술교류를 하고 있습니다. 최근에는 재택근무 협업 도구 및 꿀팁 공유를 주제로 밋업이 개최되어, 협업 툴 톺아보기를 주제로 발표에 참여했는데요. Alto 팀에서 동시편집을 개발하면서 여러 협업 툴들을 분석한 내용을 공유했습니다. 밋업에서 많은 분들이 좋아해 주셔서 블로그에도 발표 내용을 공유해 보려고 합니다.

이 글에서는 설계부터 회고까지 개발 과정에서 사용할 수 있는 협업 툴과 꿀팁을 소개하고, 이러한 협업 툴을 만들 때 고려해야 하는 12가지 핵심 요소에 대해 이야기하겠습니다.

협업 툴과 소소한 꿀팁 소개

⎯ 미팅 ⎯

Zoom

Zoom은 대표적인 화상회의 툴로, 영상과 음성 품질이 좋아 널리 쓰입니다.

다만 발표할 때, 발표자와 자료화면을 한 화면에서 같이 보기 어려운데요. Zoom 화면 공유의 '슬라이드를 가상 배경으로' 옵션을 선택하면 슬라이드 내에 발표자의 화면을 배치할 수 있습니다.

추가로 mmhmm을 설치하면, Zoom에서도 생동감 있고 재치있는 발표를 할 수 있습니다. 배경과 자료화면, 발표자를 다양하게 배치하여 화면을 구성하고, Zoom의 카메라 옵션에서 mmhmm을 선택하여 사용할 수 있습니다.

Gather.town

Gather.town은 화상회의에 메타버스 요소를 결합한 플랫폼입니다.

사무실과 회의실 공간을 메타버스 안에 그대로 옮겨와, 팀원들과 소통할 수 있습니다. 상대방 아바타 근처로 가면 영상통화가 실행되고, 상대방이 다른 탭을 보고 있을 때는 벨을 울리는 등 실생활과 비슷한 인터랙션을 제공합니다.

ZEP

ZEP 또한 메타버스를 이용한 플랫폼입니다.

Gather.town과 비교했을 때 로딩 속도가 빠르며, 최대 5만 명까지 무료로 접속할 수 있기 때문에 팀을 위한 공간뿐만 아니라 대규모 컨퍼런스용으로도 많이 사용됩니다.

⎯ 채팅 ⎯

Slack

Slack은 메신저형 협업 툴입니다.

주제별로 채널을 만들 수 있고, 댓글 스레드를 활용하면 대화 내용을 검색/관리하기 편리합니다. 허들 기능은 간단한 음성 대화를 할 때 사용할 수 있습니다. 메시지에는 다양한 이모지를 사용하여 즐겁게 대화할 수 있습니다. slackmojis에서 많이 사용되는 이모티콘을 다운로드받을 수 있고, 이모티콘 생성기에서는 한글 이모티콘을 제작할 수 있습니다. 나만의 센스있는 이모지를 만들어 사용해보세요!

Works

Naver Works는 업무용 올인원 협업 툴입니다.

메신저뿐만 아니라 메일, 캘린더, 주소록, 드라이브까지 업무에 필요한 기능을 제공합니다. 캘린더에 등록한 일정은 메시지 알림을 설정할 수 있습니다.
Works에는 재밌는 주사위 기능도 숨어있는데요. 채팅창에 /주사위를 입력하면 랜덤한 숫자가 나옵니다. 가끔 주사위 내기를 해보는 것은 어떠신가요?

⎯ 설계/다이어그램 ⎯

Miro

Miro는 다이어그램을 쉽게 그릴 수 있는 화이트보드 서비스입니다.

도형과 화살표가 차트를 그리는 데에 최적화되어 있고, 다양한 다이어그램 템플릿을 제공합니다. 아이디어를 시각화하여, 팀원들과 같이 생각을 구조화하고 논의하기 좋습니다.

Eraser

Eraser는 마크다운 에디터와 화이트보드를 합친 서비스입니다.

화면 왼쪽에서는 문서를 작성하고 오른쪽에서는 화이트보드에 자유롭게 그림이나 다이어그램을 그릴 수 있습니다. 문서에서 화이트보드의 특정 위치로 링크를 연결하는 기능도 있습니다. Gather.town과 파트너 관계를 맺어 Gather.town 내에 화이트보드 앱으로 제공되고 있습니다.

⎯ 디자인 ⎯

Figma

Figma는 웹 기반의 UI 디자인&프로토 타이핑 툴입니다.

2021년 UX tools.co에서 실시한 디자인 툴 조사에서 대부분 분야의 1위를 차지할 만큼 사용자들의 많은 지지를 받고 있는 서비스입니다. 링크 하나로 파일을 공유해서 실시간 동시편집을 할 수 있고, 다른 사용자의 행동을 멀티 커서로 보여줍니다.

PLANIT / Graha

이번에는 상용적으로 사용되고 있는 서비스는 아니지만, 디자인 이후의 스토리보드 작성이나 QA 단계에서 사용할 수 있는 협업 툴을 소개하려고 합니다.

PLANIT은 스토리보드 작성에 특화된 툴입니다.

Figma로 디자인한 후, 스토리보드(화면 설계서)를 작성할 때는 다시 이미지로 캡처하는 과정의 불편함을 해결하기 위해 만들어진 서비스입니다. Figma 링크를 그대로 임베딩하여 사용할 수 있고 화면 정책에 대한 히스토리를 손쉽게 관리할 수 있습니다.

Graha는 웹에서 실시간 코멘트를 달거나 디자인을 편집할 수 있는 툴입니다.

Graha를 사용하면 디자인 QA에서 이미지를 캡처하여 코멘트를 남겨야 하는 불편함을 해결할 수 있습니다. 웹사이트 위에 바로 코멘트를 달거나 디자인 편집을 할 수 있고, 코멘트들을 투두 리스트로 관리하는 기능을 제공합니다.

⎯ 개발 ⎯

Visual Studio Live Share

Visual Studio Live Share는 VSCode 에서 코드 편집창과 터미널을 공유할 수 있는 서비스입니다.

Live Share 확장 프로그램을 설치하면 바로 이용 가능합니다. 저는 Alto 팀에서 처음 프로젝트에 참여할 때 Live Share를 통해 개발 환경을 세팅하면서 프로젝트 랜딩에 큰 도움을 받았습니다. 이후에도 코드 리뷰에서 리뷰어와 같이 의논하며 코드를 수정할 때 사용하고 있습니다.

Live Share를 사용하면 상대방의 작업환경을 공유하면서 자연스럽게 개발 팁을 얻을 수 있다는 장점도 있습니다. 저는 주로 터미널 사용이나 디버깅에 대한 팁들을 얻었는데요. 일례로 페어프로그래밍하던 도중 동료가 history 명령어를 사용하는 것을 보고, history 명령어를 통해 터미널에서 썼던 명령어들을 확인할 수 있다는 것을 알게 되었습니다. history 명령어를 알기 전에는 터미널에서 동료가 명령어를 실행하면 어떤 것을 입력했는지 기록하기 바빴는데, 이후에는 개발 흐름에 더 집중할 수 있었습니다. Live Share를 사용해, 내가 몰랐던 개발 꿀팁을 체득해 보세요!

# history와 grep을 함께 사용하면 키워드만 기억나는 명령어들을 쉽게 찾아볼 수 있습니다.
history | grep docker | grep build

CodePair

CodePair는 문서 작성과 함께 화이트보드를 사용할 수 있는 툴입니다.

CodePair는 동시편집 모듈로 Alto팀에서 개발하고 있는 Yorkie를 사용하고 있어, 팀 회의록을 작성할 때 개밥 먹기용(자신이 개발한 제품을 직접 쓰면서 테스트하는 것)으로 사용하고 있습니다. 온라인에서 회의를 하다 보면 서로가 이해하고 있는 컨텍스트가 다른 경우가 자주 발생하는데, 미스 커뮤니케이션 상황을 방지하기 위해 CodePair에 회의 내용을 실시간으로 작성합니다. 회의에 참여한 사람 모두가 함께 회의 내용을 기록하면서 서로가 잘 이해하고 있는지 확인할 수 있어 유용하게 사용하고 있는 툴입니다.

⎯ 회고 ⎯

TeamRetro

TeamRetro는 회고에 특화된 툴로 6단계로 회고를 진행합니다.

먼저 회고에 사용할 템플릿을 선택하고 각자 섹션에 해당하는 의견을 작성합니다. 작성 중에는 내용이 비공개로 표시되고, 작성 시간이 종료된 후에는 내용을 공개되고 비슷한 항목끼리 그룹핑합니다. 작성한 내용 중 토론하고 싶은 내용을 투표하여 가장 높은 순서대로 토론을 진행하며 액션 아이템을 도출합니다. 회고에서 도출된 액션 아이템들을 모아보고, 슬랙으로 공유하거나 pdf로 다운로드할 수 있습니다. 4Ls, MoSCoW 등의 템플릿으로 온라인 회고를 진행하고 있다면 사용해 보세요!

⎯ 팀빌딩/워크샵 ⎯

FigJam

FigJam은 Figma에서 제공하는 브레인스토밍을 위한 화이트보드 협업 툴입니다.

팀빌딩/워크샵에서 FigJam 템플릿을 활용하면 온라인에서도 모두가 적극적으로 참여하는 프로그램을 만들 수 있습니다. Alto 팀은 팀 결성 초기에 ‘팀 캔버스‘ 템플릿을 활용해 팀 빌딩을 진행했습니다. 템플릿을 채워가며 서로의 장점, 단점 등을 알아가고 팀의 목표와 개인의 목표를 얼라인할 수 있었습니다. 참여자 모두 화이트보드에 자유롭게 글을 작성하고, Stamp 기능으로 리액션을 남기면서 주도적으로 프로그램에 참여할 수 있습니다.

Sprout

Sprout는 온라인 친목 모임을 위한 화상미팅 서비스입니다.

영상 화면을 다양하게 배치하고 gif 이미지로 공간을 꾸밀 수 있어 Zoom을 사용하는 것보다 더 재밌게 소통하고 추억을 남길 수 있습니다.

⎯ 스케쥴 ⎯

When2meet

When2meet은 미팅 시간을 정할 때 사용할 수 있는 서비스입니다.

일주일에 가장 많은 인원이 참여할 수 있는 시간을 정해야 하는 경우, 시간 선택지가 다양하기 때문에 설문조사 폼으로는 작성하기 까다로운데요. When2meet은 요일별로 시간을 투표하고 취합하기 편리합니다. 회원가입 필요 없이 바로 원하는 날짜와 시간의 투표를 만들 수 있고, 가능한 시간을 드래그하면 투표 결과가 채도로 표시되어 시각적으로도 보기 편합니다.

협업 툴을 만들 때 고려해야 하는12가지 핵심 요소

01. 프로필/아바타 설정

다수의 사용자가 함께 활동하기 때문에, 자신을 표현하는 수단으로 프로필 설정 기능을 제공합니다. 프로필 이미지 또는 이름의 이니셜, 캐릭터로 표현할 수 있습니다.

02. 워크스페이스 개설 및 그룹관리

프로젝트에 참여하는 사용자들을 효율적으로 관리하기 위해 워크스페이스와 그룹(팀) 기능을 제공합니다. 워크스페이스를 개설하고 멤버를 초대할 수 있습니다.

워크스페이스에 참여하는 멤버별로 권한을 설정합니다. 주로 뷰어, 에디터, 관리자의 3단계로 권한을 부여합니다. 편집 권한이 없는 사용자가 편집 권한을 요청하는 기능을 제공할 수 있습니다. 멤버 초대는 링크를 공유하거나 이메일로 직접 초대할 수 있습니다.

03. 커뮤니케이션

• 접속 여부, 상태 표시

서비스 접속 여부와 함께 상태(회의중, 식사중, 휴가중 등)를 표시하여, 커뮤니케이션 가능한 시간대를 파악할 수 있도록 합니다. 글로벌 구성원이 함께 사용하는 경우를 위해, 각 지역의 시간대를 표시하는 기능을 제공할 수 있습니다.

• 실시간 언어 소통

협업 툴에서 사용자들은 문자, 음성, 영상으로 실시간 소통을 할 수 있습니다. 화이트보드형 서비스에서는 Cursor Chat(커서 위치를 바탕으로 일시적인 메시지를 입력하는 기능)을 제공하여, 가볍고 빠른 협업이 가능하도록 해줍니다.

실시간 소통을 보조하는 기능으로는 서로의 시야를 공유할 수 있는 Observation mode 와 Spotlight mode를 제공할 수 있습니다. Observation mode는 Follow 기능이라고도 하며, 다른 사용자가 바라보는 화면을 따라다니며 볼 수 있는 기능입니다. Spotlight mode는 반대로, 다른 사람들에게 자신의 화면을 바라보도록 요청하는 기능입니다.

• 비실시간 언어 소통

협업 툴에서 모든 사용자가 실시간 소통에 참여하기 어려운 경우도 있기 때문에 비실시간 소통 기능은 필수적입니다. 대표적으로 채팅과 코멘트가 있습니다. 비실시간 소통을 보조하는 기능으로는 멘션과 알림 기능을 제공할 수 있습니다. 멘션 기능을 사용하면 멘션된 사용자에게 알림이 발생하여 소통이 원활하게 일어날 수 있도록 돕습니다.

• 비언어적 소통

온라인 환경에서 문자로 전달하기 어려운 요소를 표현하기 위한 기능으로 다양한 형태의 감정 표현을 지원합니다. 주로 이모지를 통해 리액션 하는 기능을 제공합니다.

04. 동시편집

문서, 이미지, 동영상, 3D 모델링 등 다양한 콘텐츠를 함께 편집할 수 있는 동시편집 기능을 제공합니다.

05. 존재감 표시/ 출처 표시

현재 공간에 참여하고 있는 사용자의 리스트를 표시합니다. 이를 통해 다른 사용자와 함께 사용하고 있음을 인지할 수 있습니다.

또한 다른 사용자의 위치를 커서로 표시하거나 선택하고 있는 요소를 표시해 줄 수 있습니다. 이때 다른 사람의 커서가 돌아다니는 것이 업무 집중도를 방해할 수 있기 때문에 타인의 존재감을 숨길 수 있는 기능도 제공하는 것이 좋습니다.

이외에도 컴포넌트를 생성한 사용자가 누구인지 출처를 표시할 수 있습니다. 주로 화이트보드형 서비스에서 드로잉 오브젝트나 스티키 노트를 생성한 사용자를 표시합니다.

06. 자료 공유

• 온라인 리소스 임베드

파일, 이미지, 동영상 등 리소스들을 다른 사용자에게 공유할 수 있습니다. 리소스를 임베드하는 경우에는 섬네일을 활용하여 공유된 자료를 빠르게 확인할 수 있도록 제공하는 것이 좋습니다.

• 공유 스토리지

그룹에 속한 사용자와 함께 공유할 요소를 저장하는 기능을 제공합니다.

07. 일정 공유 및 업무 모니터링

원활한 협업과 중복 작업 방지를 위해 서로의 작업 상황을 모니터링할 수 있는 기능을 제공합니다.

08. 버전 히스토리

데이터의 변경 사항을 확인할 수 있도록 히스토리 기능을 제공합니다. 누가, 언제, 어떤 데이터를 어떻게 수정했는지 시간 순으로 표시합니다.

또한 브랜치 기능을 제공하여, 실시간 협업으로 원본이 훼손되는 경우를 방지할 수 있습니다. 비슷하게 오프라인 편집과 Private mode(다른 사용자 몰래 편집할 수 있는 기능)를 제공할 수 있습니다. 일시적으로 브랜치를 생성하고 모드를 종료할 때 Merge하는 방식으로 볼 수 있습니다.

09. 템플릿과 컴포넌트

협업 툴에서 여러 번 반복해서 사용하는 요소를 사용자가 직접 등록할 수 있는 기능을 제공합니다. 작업의 불필요한 반복과정을 줄여주고, 여러 사용자가 쉽게 통일성을 유지할 수 있도록 도와줍니다.

10. 다양한 디바이스 지원

다양한 환경의 사용자가 협업할 수 있기 때문에 모바일, 태블릿, 웹 등 여러 디바이스를 지원합니다.

11. 외부 서비스 연동

다른 서비스에서 작업한 결과물을 불러오거나 경쟁 서비스와의 연동도 적극적으로 지원하여 개방된 생태계를 형성하고 다양한 형태의 업무를 수용합니다.

12. 플러그인, 봇, 위젯

사용자가 필요한 기능을 직접 만들어 사용할 수 있는 플러그인, 위젯, 봇 기능을 제공합니다. 제작한 플러그인을 공유할 수 있는 커뮤니티를 지원하여 서비스 생태계를 넓혀갈 수 있습니다.

추가로 협업 툴 핵심 요소의 4가지 포인트를 요약해볼 수 있는데요.

• 협업을 더 재미있게 – 다양한 감정 표현 수단과 사용자 간의 친밀도를 높이는 인터랙션(Gather.town의 벨 울리기, Figma의 하이파이브)기능은 협업을 더 재미있게 만들고 분위기를 고취시킵니다.

• 소통을 빠르게 – Observation/Spotlight mode, Cursor Chat, 코멘트 등은 온라인에서 의사소통이 빠르게 이루어질 수 있도록 도와줍니다. 온라인에서 사용자가 보고 있는 화면을 공유할 수 있는 Observation/Spotlight mode는 “여기 00부분을 봐주세요” 또는 “다들 제가 보고 있는 곳 한번 와보실래요?” 등의 커뮤니케이션을 줄여줍니다.

• 소통을 원활하게 – 접속여부와 상태를 표시하고, 다른 사용자의 커서를 표시하는 멀티커서 기능은 협업 구성원들 간의 상태를 공유하여 소통을 원활하게 만들어줍니다.

• 모두 함께 참여하게 – 콘텐츠를 동시에 편집할 수 있는 기능은 모든 구성원들이 주도성을 가지고 협업에 참여할 수 있게 도와줍니다.

협업 툴을 만든다면, 12가지 핵심 요소와 4가지 포인트가 적절하게 제공되고 있는지 체크리스트로 활용해 보세요!

마무리

지금까지 여러 가지 협업 툴과 꿀팁을 소개하고, 협업 툴을 만들 때 고려하면 좋은 12가지 핵심요소에 대해 정리해 보았습니다. 이 글을 통해 새로운 협업 툴이나 사용 꿀팁을 알게 되었다면 좋을 것 같고, 협업 툴을 제작하고 계신 분들께도 도움이 되었으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다.

​

차유림 | Alto TF

더닝크루거 자신감 곡선에서 깨달음의 비탈길을 오르고 있는 주니어 FE개발자. Alto 팀에서 뚝딱뚝딱 재밌게 개발하며 자신감 FULL 상태를 유지하고 있습니다.