🔹🔸The Power of Framework Design 드롭박스 디자인팀이 프레임워크 디자인 프로세스를 통하여 배운 것 [드롭박스 파일 뷰어란?] 드롭박스에 업로드된 문서, 이미지, 동영

🔹🔸The Power of Framework Design 드롭박스 디자인팀이 프레임워크 디자인 프로세스를 통하여 배운 것 [드롭박스 파일 뷰어란?] 드롭박스에 업로드된 문서, 이미지, 동영상, sketch, psd, pptx, keynote 등 다양한 업무 파일의 미리보기를 제공하는 페이지입니다. 더 나아가 코멘트를 남기거나 그 안에서 직접 수정을 할 수 있는 기능도 포함되어있습니다. 드롭박스에서 가장 높은 트랙픽을 유도하는 페이지이며 코어 경험 요소 중 하나이기 때문에 다양한 유저와 비지니스 니즈가 반영되는 surface 입니다. 2019년, 드롭박스는 유저들이 눈치채지 못할 만큼 작은 단위로 긴 타임라인동안 새 파일 뷰어를 만들고 적용해나갔습니다. 🤔 왜 파일뷰어를 새로 만들어야했을까? - 파일 뷰어의 Foundation이 굉장히 오래됨 - 기존 정보설계(Information Architecture)에 더 이상 새로운 변화를 끼어넣을 수 없음 - 레거시 코드 위에 무언가를 또 만드는 것은 오히려 진행 속도를 느리게함 🎁 그렇다면 새로운 파일 뷰어는 어떤 형태여야할까? ✨ 하나의 스크린이 아니라 새로운 플랫폼으로 확장되어야 한다. ✨ 이터레이션을 더 빠르게 진행하고 다양한 비지니스와 유저 니즈를 유연하게 서포트 할 수 있어야한다. 🎄 다 시든 크리스마스 트리에 장식을 다는 것이 아니라, 상황과 목적에 맞는 장식을 달 수 있는 상록수같은 파일뷰어를 만들자 이 상록수를 만들기 위해서 프레임워크를 통한 디자인 프로세스를 진행하기로 결정합니다. 1️⃣👨🏻‍🍳 Plan like a chef 셰프가 공을 들여 재료를 고르는 것처럼 풍부한 리서치를 진행하고 이해관계자들과 충분한 리서치를 통하여 비지니스 니즈의 우선순위 정하기. 그 후 고전적인 더블 다이아몬드 프레임워크를 적용해서 마일스톤이 포함된 디자인 로드맵 만들기 2️⃣📐 Model before mocks 픽셀을 움직이기 전, 디자인과 엔지니어링 양쪽 모두 이해할 수 있고 함께 개선을 설계할 수 있는 모델 먼저 정의하기 3️⃣🤔 Guess and check 앞에서 만든 디자인 로드맵과 모델을 바탕으로 점진적으로 개선하고 테스트하기. 아예 새로운모델과 디자인을 먼저 유저에게 제공하지 않고, 기존의 디자인에서 아주 작은 단위로 가설을 세우고 검증하는 프로세스를 반복하며 리서치팀, 애널리틱스 팀과 학습 플래닝을 발전시키기기. 📝 현재 ProtoPie Cloud의 코어 경험 중 하나인 Pie Page 개선 프로젝트를 리딩하고 있습니다. 드롭박스 파일뷰어처럼 다양한 포맷의 파일을 지원하지는 않지만 유저 타입, 프로토타입의 목적과 비지니스 니즈에 따라 다양한 기능이 요구되는 페이지입니다. 그렇기 때문에 한번에 끝나고 방치하는 개선이 아니라 장기적으로 녹일 수 있을까 고민하다가 이 아티클을 찾게되어 적용하고 있는 중입니다. 전반적으로 팀원들 모두 적극적으로 새로운 워크플로우를 받아들이고 응용하고 있습니다. 특히 모델 정의의 경우 디자이너, BE/FE 엔지니어와 QA 담당자 등 모든 프로젝트 참여자들이 제품의 모델과 각자의 멘탈 모델을 정리해볼 수 있는 좋은 시간이었어서 전체 프레임워크를 워크플로우에 녹이는 것이 어렵다면 짧은 팀 워크샵으로도 권장합니다.