재택 근무하는 UXer, 어떻게 협업할까?

글. 박지현(Heiji) / UX Designer

<여기어때 UX팀이 온라인으로 협업하는 방법>

안녕하세요. 여기어때 Product UX팀 UX Designer 박지현(Heiji)입니다.

여기어때는 업무 상황에 맞게 오피스 출근과 재택근무를 유동적으로 할 수 있는 회사예요. 올해부터 Product UX팀은 스마트 오피스가 시행되면서 오피스와 재택근무를 오가며 일하고 있어요. ‘재택근무로 협업하기 어렵지 않나요?’ 혹은 ‘재택근무 시 실시간 소통이 원활하지 않아 답답하지 않나요?’와 같은 의문이 들 것 같아요. 여기어때는 어떻게 하면 온라인으로 협업을 잘할 수 있을지 고민도 실험도 적극적으로 하고 있어요. 결과적으로 온라인으로 어렵지 않게 피드백을 주고받는 문화가 팀에 자리매김하게 되었죠.

저 또한 어떻게 하면 재택근무 중에도 피드백을 서로 잘 주고받을 수 있을지 고민하면서 꾸준히 커뮤니케이션하고 있는데요. 이번 글에서 온라인만으로 어떻게 디자인 피드백을 주고받고, 업무 생산성을 높일 수 있었는지 소개해보려 해요.

디자이너의 협업 툴 ‘피그마’ 활용

여기어때 UX팀은 디자인 협업 툴로 ‘피그마’를 사용하고 있어요. 오토레이아웃, 프로토타이핑 이외에도 유용한 플러인을 갖춘 피그마는 UX・UI 디자이너에게 정말 없어서는 안 될 존재예요. 특히, 온라인으로 협업할 때 그 진가를 발휘한다고 생각하는데요. 타이머, 코멘트, 허들, 피그잼 등 온라인 협업을 위한 피그마의 무궁무진한 기능들 중 잘 쓰고 있는 기능 3가지를 소개할게요.

Widget(위젯) 활용하기

1. 투표 Widget(위젯)으로 실무자 피드백받기

**“카드로 정보 그루핑을 해볼까? … 버튼을 여기에 놓는 것이 더 직관적일까? …”

디자이너들은 작업 중 하루에 수십 번은 선택의 기로에 마주하는 것 같아요. 아주 사소한 디테일에 따라 사용성에 큰 차이를 불러일으키기 때문이죠. 저는 고민사항이 있을 때마다 2가지 이상의 시안을 두고 비교해보는 편인데요. 보다 더 객관적인 시각을 위해 다른 실무자들의 피드백이 필요할 때가 많아요.

그럴 때면 피그마에서 투표 위젯을 활용해 Quick A/B 테스트를 진행해요. A안, B 안을 복사해 넣고, 위젯을 활용해 투표 창구를 마련했어요. 여기에 코멘트로 실무자분들을 호출해 투표를 받았죠. 이렇게 투표 기능을 활용해서 다수의 의견을 받아보는 것이 시안을 확정하는 데에 큰 도움이 되었어요. 또, 투표를 하는 입장에서도 가볍고 재밌게 투표해볼 수 있는 방식이라 빠르게 의견을 모으고 싶을 때 적극 추천합니다.

피그마 위젯을 활용해서 카드 내 버튼을 추가하는 게 좋을지 협업하는 실무자분들께 투표를 받아보았어요.

2. Tech, PO, UX 각 팀 별 논의사항 확인하기

실무 작업을 하다 보면 디자이너 ↔ 개발팀 ↔ PO 간에 커뮤니케이션이 동시다발적으로 일어나요. 어떤 항목에 대해 논의할지, 팀 별로 효율적으로 기록할 방식은 없을지 고민이 되었죠. 가끔 미팅 때 확인할 사항을 혹시 빠뜨리진 않았는지 걱정될 때도 있어요.

이때 체크박스 위젯을 활용하면 논의 사항을 가시적으로 확인할 수 있어요. 또, 팀 별 논의 사항을 타이틀로 구분해서 서로 혼선이 없도록 체크하고 있어요. 물론 코멘트 기능으로도 확인할 수 있지만, ‘Resolve’ 버튼을 누르는 순간 논의했던 히스토리가 사라져서 아쉽더라고요. 반면, 체크박스 widget(위젯)은 코멘트 기능으로는 커버할 수 없는 논의 사항을 아카이빙 할 수 있어 유용해요. 아직 써보기 전이시라면 추천해봅니다.

메모지를 컴포넌트화하고, 그 위에 체크박스 위젯을 그룹핑해서 사용하면 아주 편리해요.

깨알 꿀 TIP
피그마에도 코멘트 기능이 있지만, ‘Resolve’ 버튼을 클릭하면 대화를 나눈 히스토리가 
사라지는 맹점이 있어요. 따라서 중요한 사항과 코멘트 내에서 결정된 사항이 있다면 따로 
아카이빙해야 안전해요!

3. 변동 사항은 Changelog(체인지 로그)로 공유하기

마지막 추천 기능은 Changelog(체인지 로그)예요. Changelog(체인지 로그)는 개발자, 디자이너들에게 변경된 사항을 공식적으로 알릴 때 유용하답니다. 프레임 링크를 삽입하거나, 하단에 추가 디스크립션(설명란)을 작성해서 Changelog(체인지 로그)를 알릴 수 있어요.

As-is 화면과 To-be 화면을 붙여놓고, Changelog에 변경된 부분을 정리하면 한눈에 파악할 수 있죠.

피그마 Hudle(허들)로 실시간 소통하기

슬랙 Hudle(허들)이나 구글 Meet(미트)로 소통할 수 있지만, 미팅 중 이해관계자들 모두 같은 화면을 보고 논의하고 있는 게 맞는지 어딘가 모르게 답답할 때가 있어요. 또, 화면 공유를 하다 보면 논의하고 싶은 화면이 작아지거나 화질이 깨져 소통이 원활하지 않을 때가 있어요. 또 “이건 이렇게 해볼 수 있을까요?” 와 같은 제안을 말로만 설명하려니 참 힘든데요. 피그마에서 실시간 허들을 사용하며 직접 에딧 하며 협업할 수 있어요. 동시에 같이 시안을 만져보며 설명하고 싶을 때 최적의 툴이죠.

/ (슬래시)를 이용하면 실시간 메시지 소통이 가능해요.

UX 센터 내 디자인 리뷰 적극 활용하기

지금까지 피그마를 활용한 실무자 간 피드백 방법을 소개했다면, 여기어때 UX팀의 Design Reveiw(디자인 리뷰) 문화를 소개해보고자 해요.

1. Design Reveiw(디자인 리뷰)로 깊이 있게 사고하기

Design Reveiw(디자인 리뷰)는 PO, DA, PM 등 프로덕트 팀원이라면 누구나 미팅에 들어와 피드백을 줄 수 있는 자리인데요. 다양한 직군이 참여하는 자리인 만큼 발표자의 부담을 최소화할 수 있도록 여러 실험을 거듭해 정착된 여기어때 UX팀만의 Design Reveiw(디자인 리뷰) 문화를 소개드릴게요.

Design Reveiw(디자인 리뷰)에 sign-up(사인 업)을 하면, 필수 참여자를 포함해 리뷰 초대장이 발송돼요. 꼭 이해관계자가 아니어도 누구나 참여할 수 있도록 슬랙 채널에도 참여 링크도 공유되죠.

또, 리뷰 시간에는 리뷰 템플릿을 활용해서 프로젝트 배경, Pain point(페인 포인트), Jobs to be done를 공유해요. 여기서 Design Reveiw(디자인 리뷰)는 디자이너가 리뷰 전 맡고 있는 UX 흐름을 다시 되새기고, PO와 sync up(싱크 업)하는 기회가 된다는 특장점이 있어요.

여기어때만의 Design Review 프로세스

2. Design-Quick-Reveiw로 가볍게 피드백받기

여기어때 UX 센터의 또 다른 리뷰 문화는 바로 Design-Quick-Review예요. 하루 안에 디자인 컨펌이 필요하거나, 새로운 UI 스타일 · User Flow가 포함되지 않은 경우에 활용하도록 권장되고 있는데요. 보통 A/B 테스트에 사용될 UI 시안들을 빠르게 리뷰받거나, UI 변경 건들을 리뷰받아요.

리뷰어들은 1~3 페이지에 타깃 고객, 문제점, Jobs-to-be-done, 가설을 서술하고, 하단에 UI 디자인을 첨부해요. 디자이너가 쓰는 1 pager인 셈이죠. 저는 아직 디자인 퀵 리뷰를 경험하기 전인데요. 누구에게나 오픈된 슬랙 채널이기에 가끔 기웃거리며 구경한답니다. 다양한 의견을 보는 것만으로도 시야가 넓어지는 느낌이에요. 최근에 Design-Quick-Reveiw를 통해 치열한 토론 현장(?)을 담은 해외 숙소 편 글을 추천해볼게요.

협업 툴과 문화는 서포트, 결국 본질은 태도

UX Designer는 협업이 정말 많은 직무란 걸 몸소 느끼며 커뮤니케이션의 중요성을 실감하고 있어요. 특히, 재택근무를 시행하는 회사의 경우 온라인 협업이 필수적인데요. 이때에 무엇보다 적극적으로 공유하려는 진취적인 태도가 선행되어야 온라인 툴과 문화가 이를 훌륭하게 서포트할 수 있어요. 이런 마음가짐 아래 효율적으로 소통할 방법을 고민하는 디자이너분들이라면 오늘 소개한 방법을 적절히 활용해보시길 적극 추천드려요.

그래픽: 김제린(Riny) Visual Interaction Designer

편집: 이소연(Jetty) UX Writer

*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.