반년 동안 회사의 백오피스를 뒤집어엎었습니다.
사내 행정 시스템 대개편 프로젝트
사내 행정 시스템 대개편 프로젝트
팀스파르타의 백오피스*는 회사 설립부터 지금에 이르기까지 팀의 모든 역사를 담고 있는 시스템이었어요. 강의 제작, 판매, 지급, 학습 관리, 결제, 환불… 모든 것을 백오피스와 함께 했고, 그 사이 팀은 빠르게 성장했죠. 하지만 회사의 사원이 사용하는 ‘백오피스’라는 것이 늘 그렇듯, 아무리 중요한 시스템이라도 고객이 사용하는 제품보다 더 중요할 순 없었어요. 때문에 대부분의 우선순위 산정에서 백오피스 고도화는 후순위로 밀려나게 되었고, 다만 3년 넘게 사용하며 수정사항이 생기지 않을 수는 없었으므로 그때그때 개발자, pm, 운영 담당자의 필요에 의해 조금씩 살을 붙여가며 보완하게 되었어요.
*백오피스 : 기업이나 조직의 중앙 행정적 역할을 담당하는 부서를 가리키는 용어로, 이 글에서는 회사에서 모든 제품을 판매/운영할 수 있는 내부용 통합 프로그램
그러다가 정신을 차려보니… 오잉!? 작고 귀엽던 우리의 백오피스는 수많은 역사와 버그, 레거시로 뒤덮인 모양으로 진화하고 말았는데요. 휴먼 에러를 통제할 수 없는 고질적인 구조와 각종 버그, 부족한 기능들로 아래와 같은 오류 사례가 빈번하게 속출했어요.
- 사례 1 : A 사업부에서 B 사업부의 오래된 강의(더 이상 사용할 수 없는 강의)를 수강생에게 지급했어요. (그 사실도 누군가 지나가다 우연히 발견했어요.)
- 사례 2 : A 사업부에서 커리큘럼 개편 후 내부 심사를 진행하던 도중, 심사가 완료되기도 전에 변경된 커리큘럼으로 판매가 시작되었어요.
- 사례 3 : 리소스 부족, 서비스 구조의 한계 등 다양한 이유로 해결하지 못한 버그 건은 총 30개, 제보된 버그가 해결되지 못하고 방치된 기간은 평균 6개월에 달해요.
백오피스 정상 영업 합니다그야말로 무너지기 일보 직전의 건물에서 어떻게든 영업을 하고 있는 셈이었어요. 다행히도 2023 하반기를 무사히 마치고 생긴 조금의 여유와 더불어 많은 동료들의 공감을 산 덕에, 2024년을 맞아 드디어 백오피스를 대대적으로 개편하기로 결정했습니다.
우리 백오피스 다시 만듭시다!
모두의 염원이 현실이 되는 역사적인 순간이었어요. 그리하여 [표최자 : 표준화, 최소화, 자동화] 프로젝트가 만들어지고, 최초의 스쿼드를 창발 했어요. 우리, 잘할 수 있겠죠?
엄청난 양의 기획서를 잘 소화하기 (체하지 않고)
백오피스를 다시 만든다는 건, 심지어 기존 시스템의 고질적인 문제들을 해결하면서도 앞으로의 사업 확장성을 고려한 새로운 시스템을 신설한다는 건 정말이지 쉽지 않은 작업이었어요. 강의의 커리큘럼부터 사업부 별 특성에 따른 활용 방안, 홈페이지에서의 판매 정책, 수강생의 진도율 관리까지 생각해야 할 것이 많아도 너무 많았거든요. PM 분들께서는 비즈니스와 사용자, 사원 모두를 위한 최선의 시스템을 찾기 위해 밤낮으로 치열하게 고민했어요. 그렇게 약속된 기획 마감일이 다가왔고, 숱한 고민의 흔적들은 페이지로 세기도 어려울 분량의 기획서로 마침내 완결되었어요.
처음에는 기획 내용을 소화하는 것조차 어려운 수준이었어요. 기획서를 이해하고, 납득하고, 수정하고, 합의하는 일에만 꼬박 2주 정도가 걸렸던 것 같아요. 실제로 작업하면서 추가로 발생했던 궁금증과 논의까지 포함한다면 실무 작업보다도 더 많은 시간을 동료와 나의 생각을 정렬하는데 썼다고 표현해도 무방할 정도였어요.
분량이 많은 프로젝트일수록, 먼 길 돌아가지 않도록 최대한 실수를 줄이고 모두의 합의를 원만하게 이끌어낼 수 있는 방법이 필요했어요. 엄청난 양의 기획서를 꼭꼭 씹어먹기 위해 디자이너가 사용한 네 가지 소화제를 소개해 드릴게요.
1. PM의 무의식 속 [이런 느낌이려나] 그림을 확인하세요.
규모가 큰 장거리 프로젝트일수록 동료와 나의 뇌를 동기화하는 작업은 필수예요. 시행착오를 거칠 수 있는 시간적 여유가 부족하고, 일의 몸집이 커질수록 처음으로 되돌리기 어려워지거든요. PM이 참고했던 레퍼런스나 인상 깊게 보았던 디자인 스타일이 있는지 작업 전 미리 확인해 보세요. 무의식 속 [이런 느낌이려나] 그림을 미리 확인해 두는 것만으로도 작업을 시작하는데 큰 도움이 되거니와, 대형 사고를 방지할 수 있답니다.
디자이너 : PM님! 혹시 특별히 좋아하시는 디자인 스타일이나 인상 깊게 본 레퍼런스가 있으세요?
PM : 글쎄요. 하나 꼽자면 이런 느낌? (이미지) 백오피스다운 UI면 좋겠어요. 정보가 많을 테니 정렬, 필터, 검색 기능이 잘 구현된 테이블 디자인이 중요할 것 같아요. 메뉴가 많으니 좌측에 사이드바 같은 패널이 필요할 수도 있겠네요.
디자이너 : 오! 그렇군요. (음, 이런 느낌이군.)
2. 처음부터 끝까지 직접 설명해 보세요.
우리는 대부분 어떤 주장에 대해 동의했을 때 상대방에게 동의한 내용이나 그 근거를 다시 설명하지 않아요. ‘동의합니다! 좋은 기획이군요.’ 정도의 소감으로 퉁치죠. 상대와 내가 모두 ‘동의’했기 때문에, 우린 완벽하게 통했다고 생각하기 쉽거든요. 하지만 내가 누군가의 의견에 동의했다고 해서, ‘내가 그 사람의 모든 생각을 100% 이해했다’고 확신하긴 어려워요. 동의와 이해는 전혀 다른 문제일 수 있거든요. 내가 원하는 방향으로 멋대로 오해한 것일 수도 있고요.
동료와 나의 뇌를 동기화할 수 있는 가장 좋은 방법은 [하나의 주제에 대해 각자의 언어로 이해한 바를 설명하는 것]이에요. 그러니까, PM의 기획서를 읽고 모든 내용이 이해된 것 같아도 ‘네, 이해했습니다.’라는 문장 하나로 그냥 넘어가지 않는 거죠.
저요 저요 제가 설명해 볼래요!디자이너 : 제가 맞게 이해했는지 한 번 들어주세요!
PM : (웅성웅성)
타인의 기획을 내 언어로 설명하면서 PM과 동일한 이해도를 가지고 있는지 검증해 보세요. 높은 확률로 한 군데쯤은 그와 생각이 달랐던 부분을 포착할 수도 있고, 운이 좋게 두 사람 모두 놓치고 있던 구멍을 발견하게 될지도 몰라요.
3. 기획서의 핵심 전제로부터 디자인 콘셉트를 도출하세요.
시험 문제 안에 답이 있다는 진부한 표현처럼, 기획서를 잘 읽어보면 자연스럽게 디자인 콘셉트를 발견할 수 있어요. 기획 전제로부터 콘셉트의 단서를 얻었다는 것을 잘 설명할 수 있어야 디자이너의 주장에 설득력이 높아질 거예요. 난 PM의 기획을 충분히 이해했고, 가장 잘 표현할 수 있는 디자인을 고민했어. 우린 같은 목표를 가진 한 팀이야! 이런 느낌이죠.
백오피스의 ‘사업부’ 지면 기획서를 보고, 저는 다음과 같은 방향성을 도출할 수 있었어요.
방향성으로부터 아래의 디자인 콘셉트를 도출했어요. 콘셉트는 짧고 명료할수록 좋아요. 똑같은 결과물을 만들더라도, 기획의 맥락과 의도를 바탕으로 ‘디자인 원칙’을 정의한 디자이너의 주장이 훨씬 설득력 있게 느껴져요. 이 사람이 충분한 시간을 들여 고민했다는 인상을 줄 수 있거든요. 여기서 세운 콘셉트는 잘 아껴뒀다가, PM에게 디자인 시안을 공유하는 자리에서 요긴하게 써먹을 거예요.
- 방향이 느껴지게
길을 잃지 않고 사용자가 해야 하는 과업의 Flow를 잘 따라갈 수 있다.
- 잘 모르겠어도 일단 읽어보면 알 수 있게
심플 간결보다 투 머치 인포메이션. 엄마의 잔소리를 담은 백오피스를 만들자.
- 적절한 통제로 실수하지 않게
버그 아니고 기능인데요. 시스템으로 차단할 수 있는 오류는 최대한 막는다. 설사 그 통제가 사용자에게 어느 정도의 불편함을 만들어주더라도.
4. 최대한 못생기게 만든 와이어프레임으로 논의하세요.
기획에 대한 합의 이후에는 본격적으로 화면 설계에 시간을 써야 할 거예요. 여기서의 핵심은 중요하지 않은 것에 소중한 시간을 낭비하지 않는 것이에요. 그러기 위해서 스케치는 최대한 대충 그리세요. 색도 넣지 말고, 버튼 모서리에 radius도 금지예요. 잠깐! 혹시 목업 사진 같은 걸 넣으시려는 건 아니죠?
사람은 시각적인 요소에 예민하고, 어쩌다가 한 곳에 정신이 팔리면 정작 중요한 걸 보지 못하게 돼요. 그러니까 우리가 지금 합의해야 하는 것은 화면 설계와 그에 따른 기획 점검인데, 와이어프레임이 디자인된 상태라면 PM이나 개발자는 이런 질문을 던질 수 있죠.
PM 1 : 잠깐, 우리 백오피스 버튼이 모두 빨간색인가요?
PM 2 : 강의를 만들 때 햄스터 사진 같은 걸 넣어도 되나요? 그러고 보니 이미지 사용에 대한 가이드라인이 필요하겠는데요.
개발자 : 클릭했을 때 버튼 색깔은 똑같나요?
이렇게 당장 결정할 필요 없는 디자인 요소에 하나씩 대응하다 보면 소중한 시간은 사라지고, 미팅을 다시 잡거나 따로 시간을 내어 논의를 마쳐야 할 거예요. 그러니까 최대한 디자인되지 않은, 못생기고 삭막한 와이어프레임으로 화면 구조에 대한 미팅을 진행하세요. 이후에 형태를 결정해도 순서는 결코 늦지 않을 거예요.
소화 끝, 디자인 시작
오래 기다리셨습니다. 화면 설계에 대한 합의까지 마쳤다면 이제 UI를 포함한 본격적인 디자인 작업에 들어가면 되는데요. 기획 소화를 마쳤다고 해서 앞으로의 여정이 무조건 탄탄대로인 것은 아니랍니다. 소화가 덜 된 곳이 생길 수도 있고, 디자인을 하다가 치명적인 문제를 뒤늦게 발견하게 되는 경우도 있으니까요.
오늘도 수많은 소통 오류와 엣지 케이스, 의사결정의 늪에서 고군분투 중인 모든 디자이너들을 응원합니다. 다음 글에서는 많은 분량의 페이지를 동시에 작업하게 되는 상황에서 도움이 될 정보들로 다시 찾아오겠습니다.
by. 곽진, 프로덕트 디자이너
