데스크탑과 모바일, 같지만 다른 경험
Figma가 제공하는 ‘대화’ 경험 - 코멘트 & 액티비티
⚓️ 서비스 소개
강력한 협업 기능을 자랑하는 제품 디자인 툴 Figma
� UX 전략
1. 여러 페이지와 넓은 화면 안에서 특정 정보를 찾기 어렵다는 고질적인 문제
2. 특히 비대면 협업 시 관계자 간 업무 시차로 인해 소통이 누락되거나 지연되기 쉬움
3. 따라서 UX goal은 ‘누가 언제 어디에 있든, 지금 회의실에 함께 있는 것처럼 대화 나누기’
⛵️ 디자인 솔루션
1. 솔루션의 정의는 ‘누가 무엇을 보고 뭐라고 했는지 놓치지 않는 대화 경험’
2. 데스크탑의 ‘코멘트’ - 디자인 에셋에 직접 붙이는 댓글 기능 & 패널의 모아보기로 퀵 링크
3. 모바일의 ‘액티비티’ - 알림을 수신하고 회신&리액션하는 메신저에 가까운 기능
� 로직 분석
[데스크탑의 ‘코멘트’]
문서 중심: 권한이 있는 사용자라면 해당 문서에서 일어난 모든 대화를 확인할 수 있음
표시 이벤트: 문서별 새 코멘트 등록 정렬 기준: 최초 등록 시간(기본), 읽음 여부
표시 정보: 대화에 참여한 모든 사람의 프로필 이미지, 등록된 순서, 페이지 이름, 등록한 사람, 등록일(상대적 일시), 최초 등록된 코멘트 내용
필터: 해결 여부(기본), 내 스레드 여부, 현재 페이지 여부
입력
1) 스레드: 텍스트, 멘션, 하이퍼링크(덧씌우기), 서식(단축키), 이모지 입력 + 이미지/gif 업로드(~5개)
2) 리액션: 이모지 셀렉터 제공
클릭 시: 해당 코멘트가 붙어 있는 좌표로 포커스 이동
[모바일의 ‘액티비티’]
계정 중심: 내가 모니터링하거나 회신해야 할 모든 대화를 확인할 수 있음
표시 이벤트
1) 팀 내 모든 문서: 나를 멘션, 내 코멘트에 리액션, 내 코멘트에 회신
2) 문서의 오너가 ‘나’일 경우: 권한 변경, 새 코멘트
등록 정렬 기준: 최초 발생 시간(구분 - 최근 1일, 최근 7일, 그 이전) 표시 정보: 이벤트 발생자 프로필&이름, 이벤트 종류, 문서 이름, 리액션 내용, 회신 내용(최대 3줄), 발생 일시
필터: 전체(기본), 안 읽은 메시지
입력
1) 스레드: 텍스트, 멘션, 이모지, 서식(버튼), 하이퍼링크(보이는 이름+url)
2) 리액션: 정해진 이모지 7개만 버튼으로 제공 - 동의, 비동의, 확인, 공감, 응원 표현 가능
탭 시
1) 코멘트, 멘션, 리액션, 회신: 상세 화면으로 이동 - 해당 코멘트가 붙어 있는 디자인 에셋과 스레드 전체 내용 표시
2) 권한 변경: 해당 문서로 이동
데스크탑 ↔ 모바일
1) 동기화 함: 콘텐츠 등록, 해결 여부
2) 동기화 안 함: 읽음 여부
