
← 프로젝트 목록으로 돌아가기
2025. 6. 17.
UX
SaaS

프로젝트 배경
reat는 디자인 프로젝트를 진행하는 과정에서 커뮤니케이션 코스트를 획기적으로 줄여주는 피드백 중심의 협업 플랫폼입니다. 이미지 피드백만 지원하던 리트 버전1은 시장의 확장을 위해 영상 피드백 서비스를 추가하게 됩니다. 이 프로젝트는 리트의 영상 피드백을 위한 기획 및 디자인을 다루고 있습니다.

본격적으로 영상 피드백 프로젝트를 설명하기 전에 리트라는 서비스에 대해 잠시 짚고 넘어가겠습니다.
농담처럼 이어지는 ‘...최종의 최종_final.pdf’ 무수히 많은 버전 수정을 거듭하는 디자이너들의 고충을 단편적으로 보여주는 사례입니다. 언제 끝날지 모르는 수정의 굴레를 더욱 더 힘들게 하는 것은 피드백과 수정 사항을 주고받는 과정에서 커뮤니케이션입니다.
불필요한 미팅, 불명확한 피드백 내용, 수정 중 피드백 누락, 기존 피드백과 전혀 다른 요구사항 등. 리트 팀은 이런 비효율적인 커뮤니케이션의 가장 큰 원인을 작업물과 피드백의 분리로 판단하고 이 부분을 개선해줄 서비스를 만들게 됩니다.
대부분의 프로젝트에서 피드백은 이메일 혹은 메신저를 통해 전달되었습니다. 작업자들은 텍스트를 정리해서 직접 수정사항 리스트를 정리해야했고 관리자들은 어떤 부분이 수정되었는지 확인하기 위해 기존 버전 / 수정 버전 / 제공한 피드백을 모두 열어놓고 직접 숨은그림 찾기를 해야 했습니다. 이 과정에서 이미지 파일과 피드백의 버전이 일치하지 않거나 파일 혹은 피드백이 누락되어 다시 다운받는 과정이 빈번하게 발생합니다.
이러한 불편함을 해결하기위해 작업자들 스스로 문서파일에 이미지를 붙여넣고 텍스트를 쓰거나 작업파일을 직접 받아 작업파일 위에 피드백을 남기는 등의 시도를 했으나 크게 상황을 개선해주지는 못했습니다.
리트는 이런 수고로움을 덜기 위해 이미지 위에 정확한 위치를 표시해 직접 피드백을 남기고 피드백 리스트를 생성하여 피드백과 작업물을 한 자리에서 직관적으로 확인할 수 있도록 서비스를 만들었습니다.
기존 이메일 중심의 피드백 프로세스의 문제점
시각 작업의 verbal 혹은 문장형 피드백으로 피드백 내용이 왜곡되거나 누락될 수 있다.
작업물과 피드백이 분리되어 있어 대조가 어렵고 내용이 누락될 수 있다.
받은 피드백 / 준 피드백을 기억하지 못한다.
수정된 버전을 비교해보는 것이 불편하다
다수의 버전의 파일을 관리하는 것이 어렵다.

리트의 해결방법
이미지 위에 피드백의 위치를 표시하고 피드백 리스트를 생성
하나의 파일에 다수의 버전을 업로드하여 버전 히스토리 아카이빙
버전 비교뷰로 수정사항 확인
피드백 완료 체크로 전달한 피드백 완료내역 확인
영상 피드백으로의 확장
이미지 피드백 시장에서 긍적적인 반응을 이끌어내던 리트는 시장을 확장하기 위해 동영상 피드백으로 시장을 확장하기로 결정합니다. 이 과정에서 기존의 사용방식과 일관성을 유지하는 동시에 동영상 포맷에 알맞은 UX가 필요했습니다.
동영상을 위한 UX를 개발하기 위해 몇가지 가설과 리서치를 진행했습니다.
가설: 비디오 피드백에서도 이미지 기반 피드백과 동일한 방식의 피드백이 훨씬 효율적일 것이다.
동영상도 이미지와 마찬가지로 화면 위에 피드백 위치를 지정하고 피드백 리스트를 만들어 표시하는 방식이 작업자들의 불편함을 해소해줄 수 있을것이다.
리서치 1. 전통적인 비디오 피드백 방식 조사
애니메이션 스튜디오의 작업방식 확인

애니메이션 및 영상 제작 공정은 정적인 이미지 제작 공정보다 투입 인력이 훨씬 많고 단계도 복잡하다. 오히려 이미지 피드백을 하는 과정이 더 길고 영상에 직접 피드백을 해야하는 단계는 전체 공정의 일부(동화, 컬러, 합성)이지만 가장 노동집약적이고 많은 인원이 투입되는 단계이다. 스튜디오가 외주 업체와 계약하여 개별 작업을 하는 경우도 잦기때문에 밀도있는 피드백의 중요성이 더 올라간다.
기존 피드백은 팀 내부일 경우 대면 + 미팅, 외주업체의 경우 이메일 + 미팅의 방식을 띈다.
영상 교육기관의 피드백 방식
스크린에 영상을 띄워놓고 함께 보며 피드백하는 방식으로 상황에따라 애니메이션이나 모션그래픽의 경우 화면 위에 마크업을 하며 피드백을 제공하기도 한다. 실시간성을 띄기 때문에 데이터화 해놓을 수 없고 대면/화상 피드백 혹은 피드백을 주는 장면을 다시 영상으로 녹화하여 아카이빙 하기도 한다.
영상에는 시간의 개념이 있는 만큼 프레임을 명확히 적는다고 해도 피드백을 이해하기 쉽지 않다. 그것이 대부분의 영상 작업자, 매니저들이 대면 피드백을 선호하는 이유이다. 정적인 이미지에 대한 피드백을 주고받는것도 오류가 많은 상황에서 수천 수만장의 이미지가 묶여있는 영상 피드백은 더더욱 모호해지기 쉽다.
동영상 피드백 개발의 목표
기존 사용자들의 만족감이 가장 높은 부분을 동영상 피드백에도 정확히 이식하기.
누락 없는 피드백 목록
비교 뷰
모바일 뷰
기존 사용방식의 일관성을 지키면서 동영상 포맷에 최적화된 UX 제공하기
타임라인
사운드
Side kick
피드백과 타임 바

피드백의 위치를 화면 위에만 표시하는 것이 아니라 타임라인 위에도 정확히 표시해야하기 때문에 플레이 영역, 타임 바를 디자인하는데에 가장 많은 시간을 할애했습니다.
내가 어디에 피드백을 남기고 있는지 명확히 표시
피드백을 남길 구간을 직관적으로 선택
타임 바의 어느 위치에 피드백이 있는지 명확히 표시
피드백이 뭉쳐있는 구간 클러스터링
듀얼 뷰와 사운드

동영상에는 대부분 사운드가 함께 있기 때문에 듀얼뷰와 같이 동시 재생을 할 경우 소리가 겹치는 문제가 발생합니다. 이 문제를 해결하기 위해 명확한 룰이 필요했는데 메인 뷰와 레퍼런스 뷰를 분리하여 메인 뷰의 영상, 소리, 재생 속도를 기본값으로 적용하고 레퍼런스 뷰의 영상의 사운드를 키면 메인 영상의 사운드가 자동으로 음소거 되는 형식으로 구성했습니다.
재생속도, 루프 여부등은 어느쪽에서 수정하건 양쪽에 모두 동시 반영되는 형태로 디자인하여 불필요한 기술 부하를 낮추도록 했습니다.
플랫폼 프리뷰

기존 경쟁 서비스를 리서치 했을 때 우리의 목표는 딱 10%만 더 잘 만드는 것이었습니다. 영상 피드백 분야에서 레거시도 없고 팀 규모도 작기때문에 그 10%를 채우기 위해서는 기술 부하가 들지 않는 선의 UX 향상이 최선이었는데 그 부분을 만족시키기 위해 동영상 플랫폼 프리뷰를 기획했습니다.
최근 생성되는 모든 영상은 온라인에 업로드되기 위해 만들어진다고 해도 과언이 아닙니다. 유튜브, 인스타그램, 틱톡 등 해당 서비스에 업로드 했을 때 어떻게 보이는지까지가 영상의 완성임에도 불구하고 유사 서비스 어디에도 영상 플랫폼에 올리면 어떻게 보일지 미리보기 하는 기능이 없었습니다. 플랫폼의 UI를 따온 뒤 이미지로 영상 위에 얹기만 하면 되는 작업으로 플랫폼의 UI가 변경될 때 마다 업데이트를 해줘야하는 수고로움이 있지만 기술부하가 거의 0에 수렴한다는 점에서 시도하지 않을 이유가 없었습니다.
이 기능의 바탕에는 이미지 모바일 뷰 기능이있습니다. 모바일 기기의 프레임을 따서 이미지 위에 얹어서 보여줄 뿐인 아무것도 아닌 기능이지만 기존 reat 유저들이 사랑해 마지않는 기능입니다. 웹툰 작가, 상세페이지 디자인 등 긴 이미지를 화면에 꽉 채워 스크롤링해서 보는 경험이 중요한 경우 갤러리나 메신저를 통해 이미지를 열어보면 중간중간 흐름이 끊기기 때문에 실제 플랫폼에 올라가는것과 같은 경험을 전달할 수 없었습니다.
결과적으로는 놀라울정도로 반응이 좋았는데, 만드는 사람 입장에서 ‘전혀 대단할 게 없어서 내세우기도 멋적은 기능’이지만 유저의 페인포인트를 정확히 겨냥한 결과 B2B 클라이언트 미팅때 시연때 가장 큰 wow 포인트를 자아내는 기능이었습니다.
reat 서비스에 대해 더 알아보고 싶으시다면 https://www.reat.one 을 확인해주세요.