[아티클 스터디] 백오피스 시스템 기획 시 TIPS

🔗 아티클 출처

---

백오피스 시스템 기획 시 TIPS

백오피스 시스템 기획 시 TIPS

🗨️ 선정 이유

❓ ▪️ 저자가 도입부에 언급한 것과 같이 백오피스 시스템은 참고할 수 있는 화면이 별로 없다. ▪️ 21년도부터 본부 내 백오피스 시스템 기획 담당을 하고 있는데, 처음 화면을 기획하면서 사용성에 대해 고민하며 리서치하는 과정에서 나의 결정이 올바른 방향인 것인지 항상 고민되었다. ▪️ 백오피스 시스템에 관련한 내용을 스스로도 한 번 정리해보고 싶어 이 아티클을 선정하였다.

---

📑 내용 정리

☝ ▪️ 기획자 데이먼님의 백오피스 참고 사이트 모음 링크

▪️ 잘 만든 백오피스는 아래의 특징을 가진다. [이슈없이 서비스를 구동할 수 있는 안정성]

🎯 서비스 안정성은 하위 항목들이 추구를 통해 도달해야 할 최종 목표

• 모든 필요서비스(프론트운영, 정산, 홍보 등)를 지원할 수 있는 완전성
• 당장은 지원하지 않더라도 예상되는 기능을 쉽게 추가할 수 있는 확장 가능성
• 운영에서 휴먼 에러가 발생하지 않을 수 있도록 직관적인 페이지를 기획하는 운영 편의성
• 상대적으로 적은 개발 리소스 투입으로 추가 개발이 가능할 수 있는 개발 편의성 

⛳TIPS

정석적으로 기획하고, 개발에 반영하자

• 백오피스 기능에 대한 전반적인 개선은 회사 내에서 가장 후순위로 생각되는 프로젝트이다.
  • 이유: 백오피스 개선이 기업의 이윤 창출에 도움이 되는 것이 아니고, 과거 시스템에 적응한 운영자와 개발 결과물의 온보딩 실패 등으로 당장은 이슈가 늘어날 수 있다.
• 정석적으로 기획하지 않는다면 시간이 지나 더 큰 재앙으로 다가올 수 있다.

프론트에 대한 완벽한 이해를 전제로 백오피스를 기획하자

• 서비스의 주인공은 프론트이다.
  • 프론트에서 조작 반영하고자 하는 사항을 완벽히 파악해야 한다.
  • 개발없이 운영만으로도 서비스를 다룰 수 있게 백오피스를 기획해야 한다.

서버 구조에 대한 이해를 하자

• 서버 구조를 개발자 레벨까지는 아니더라도, 이 서버 내에 어떠한 데이터가 담겨 있고, 어떤 기능을 수행하는지는 숙지해야 한다.
  • 어떤 서버에 대한 백오피스 기획인지, 한 페이지 내에 모두 조회할 수 있는 데이터인지, 조회만 가능한지 / 수정도 가능한 데이터 인지

제한 사항과 운영 숙련도를 생각하여 기능을 부여하자

• 대부분의 서비스는 전체적인 색깔톤과 룩앤필을 중시 여긴다.
• 운영자가 실수로 다른 색깔이나 폰트 등을 사용하여, 서비스 컨셉을 흔들면 안된다.
• 인력의 익숙함에 따라 상황이 달라질 수 있어, 에디터 없이 HTML만 지원하는 것은 되도록 지양해야 한다.
• 예시: 서비스 내에 공지사항 게시판을 출력해야 하는 상황
  • 게시판 내 글을 쓰기 위해 백오피스 내 텍스트 입력 필드가 필요
  • 텍스트 입력 필드는 아래 사항을 고민해야 한다.
    • 단순히 글씨만 쓸 수 있으면 되는지
    • 텍스트 에디터가 존재하여 글자색, 배경색, 볼드, 이텔릭, 밑줄 등을 설정할 수 있어야 하는지
    • HTML 태그를 지원할지

자동화와 운영 사이의 조율은 안정성을 기반으로 하자

• 서비스가 운영의 손을 많이 탈수록 휴먼 에러의 가능성 또한 높아진다.
• 데이터의 유무가 분명한 부분은 자동화로, 회색지대로 구분이 어려운 영역은 운영에 맡겨, 서비스의 이슈를 최소화해야 한다.

가이드없는 직관적인 백오피스 시스템을 목표로 하자

• 운영자의 눈높이에 맞춰 서비스를 기획해야 한다.
• 직관적인 백오피스 시스템을 만들기 어렵다면, 이해하기 쉬운 가이드를 만들어야 한다.
• 사용하기 쉬운 백오피스 시스템 기획을 위해 혼동을 유발하지 않을 정확한 용어를 사용해야 한다.

직관적인 버튼 및 아이콘 등을 사용하자

• 적재적소에 적절한 컴포넌트를 사용해야 한다.
  • 예시
    • 단일 선택이 필요한 항목에서 체크박스를 사용하고 있진 않은지
    • 단순 텍스트 출력 자리에 버튼이 출력되어 클릭하도록 유도하지는 않는지
    • 1-10까지의 숫자만 선택하면 되는데 드롭다운 메뉴로 선택하는 대신 텍스트 박스를 넣어 불편함을 주는지

입력 및 표시 시 헷갈림이 없이 분명하게 기획하자

• 예시1
  • 2022년 1월 1일부터 31일까지 노출시켜야 하는 배너가 있다.
  • 개발자와의 협의 끝에 기획안은 연월일 시분까지 드롭다운으로 숫자를 선택하게 하고, 분은 5분 단위로 컨트롤하도록 했다.
  • 종료시각은 2022년 1월 31일 23시 55분으로 해야할까? 2022년 2월 1일 0시 00분으로 해야 할까?
  → 방법 1) 뒤 시간을 이하가 아닌 미만으로 설정하여 개발 적용→ 방법 3) 시간을 시분초까지 디테일하게 표기하여, 1월 31일 23시 59분 59초에 종료
• → 방법 2) 별도의 순서 적용이 없는 배너나 요소라면, 2월 1일 0시 0분에 새로운 배너나 요소를 노출
• 예시2
  • 메인에 노출하는 배너를 생성해야 한다.
  • 암묵적으로 종료 날짜를 설정할 때 공란으로 설정하면, 배너 종료일 없이 별도 컨트롤이 없다면 무기한으로 배너를 노출하는 것으로 가정한다.
  • 능숙한 운영자만 백오피스를 운영한다는 보장은 없기 때문에 헷갈리는 최소화하기 위한 방법은 아래와 같다.
  → ‘종료없음’ 버튼을 기간 옆에 두고, ‘종료없음’이 활성화되면 종료 날짜의 날짜 필드가 비활성화되도록 한다.

직관적으로 GNB 및 SNB 메뉴를 설정하자

• 변동이 있을 수 있는 R&R 대신, 프론트의 메뉴를 기준으로 직관적으로 백오피스의 GNB 및 SNB 메뉴를 설정한다.
• 프론트에 어떠한 부분을 변경하고자 할 때, 메뉴명만으로도 직관적으로 변경할 수 있게 메뉴명을 설정한다.
• 메뉴별 메뉴를 설정했다면, 기타 메뉴는 기능에 맞춰 직관적인 메뉴명으로 메뉴를 설정한다.
  • 콘텐츠관리/고객관리/정산관리/백오피스관리 등의 이름으로 기능에 맞춰 누구나 알기 쉬운 이름으로 한다.
• 신규 기능 업데이트 시 기존 메뉴 안에서 구현 가능하다 생각하여 추가한다면, 이슈 처리비용과 QA, 실제 운영 비용이 더 증대될 수 있다.

저장과 배포 기능을 구분하자

• 저장은 변경사항을 백오피스 내에 저장하는 것이고, 배포는 서비스 출력을 위해 저장된 사항을 프론트에 출력하는 행위이다.
• 배포 기능을 별도로 가지고 있을 경우의 장점
  • 예약 배포 기능 구현 가능
  • 배포 후의 상용 리스트를 출력함으로써, 현재 프론트에 출력되는 요소(배너 등)에 대해 확인 가능

예약 배포 기능을 구현하자

• 예약 배포 기능 구현 시, 운영 직원이 밤새 서비스를 컨트롤할 필요가 없고, 그만큼 운영 비용이 감소된다.
• 또한 개별로 저장 버튼을 누른다면, 정확히 같은 시간에 프론트 서비스를 컨트롤할 수 없다.
• 예약 배포 기능이 있다면, 원하는 시간에 일괄적으로 서비스를 컨트롤할 수 있다.

운영자가 알아보기 쉽도록 에러 메세지를 분명하게 출력하자

• 하나의 백오피스 페이지에서 저장이나 배포 시 오류사항 시나리오를 모두 생각하여 팝업 스트링을 기획하는 것이 좋다.

오류코드가 출력되는 팝업의 텍스트 복사를 가능하게 하자

• 운영자의 휴먼에러가 아닌 상황에서도 오류는 발생할 수 있다.
• 구분되는 오류 상황에서 오류코드를 설정하고, 해당 오류코드의 텍스트 복사를 가능하게 하여, 빠른 이슈 해결에 도움을 주는 것이 좋다.

에러메세지가 출력되기 전에 인지하는 게 더 좋다

• 저장 버튼을 누르기 전에 에러 메세지를 출력하면, 운영 편의성을 더 줄 수 있다.

기획 전에 이해관계자와 충분히 대화를 나누자

• 실제 사용하는 운영자의 의견을 들어 백오피스 시스템을 기획해야 한다.
• 작은 불편함이지만, 운영 속도 저하 및 휴먼 에러 발생이라는 부작용을 초래하는 경우가 있다.

삭제 기능은 되도록 넣지 말고, 노출 불가로 처리하자

• 운영에서도 관리 이력을 쌓아 놓으면, 향후에 비슷한 요소를 프론트에 반영할 때 혹은 운영 이슈 사항이 발생했을 때 히스토리 파악에 더 유리할 수 있다.
• 삭제 버튼은 없거나, 고권한의 관리자에게만 부여되어야 한다.

과부하의 원인을 제고하고, 이슈를 컨트롤하자

• 과부하가 발생될 수 있는 기능의 경우, 개발자와 협의하여 일괄 처리의 양과 범위를 UI로 제한해야 한다.
• 예시
  • 마케팅 이벤트를 통해 다수의 사용자에게 일괄적으로 캐시를 부여했다.
  • 해당되는 사용자의 ID를 CSV 파일로 적용하는 작업에서 다수의 인원이 동시간대에 적용을 하다보니 버서의 과부하 상태를 체크해가며 작업을 진행해야 했다.
  • 이러한 경우 아래의 방법으로 개발과의 적극적인 협의를 통해, 과부하 이슈를 컨트롤해야 한다.
    • CSV 파일 내의 고객 ID의 개수를 제한하는 방식으로 운영을 수행
    • 이미 개수가 제한된 CSV 파일이지만, 서비스 페이지에 적용시 적용된 고객의 ID 개수를 체크하고 페이지가 다운되었는지 확인할 수 있게 움직이는 프로그레스바로 상태를 확인

자주 쓰는 기능을 공통사항으로 기획하여 사용하자

• 미디어 서비스의 백오피스 시스템의 경우, 영화나 음악 같은 미디어를 호출하는 화면/고객조회 화면 등은 공통으로 사용할 수 있게 팝업으로 설정하면 손쉬운 기획 및 개발이 가능하다.

랜딩타입과 모듈타입을 공통사항으로 설정하자

• 기능을 랜딩타입으로 구현하여, 다른 백오피스 화면에서 공통으로 사용할 수 있게 관리한다면 효율적으로 기능 구현 및 개발이 가능하다.
• 서비스 내에서 일정한 모듈타입을 계획하고 팝업으로 관리한다면, 노출 관리의 효율성을 도모할 수 있다.

랜딩타입의 최선은 리스트 UI 구현, 차선은 ID 부여, API 주소 부여는 최후의 수단으로 고려하자

• 예시: 메인에 최신영화를 배너로 설정하는 상황
  • 백오피스 내에서 배너를 설정하고 영화에 대한 링크 구현 시, 배너에 최신영화를 어떻게 선택하는 것이 좋을까?
  • 최선의 방법은 영화를 조회하는 팝업을 출력하고, 그 창 내에서 조건대로 검색을 하여 영화를 선택하는 것이다.
  • → 운영자가 별도의 화면에서 영화를 찾는 수고를 덜고, 여러 검색 조건에서 정확하게 원하는 컨텐츠를 선택할 수 있다.
  • 최선의 상황을 구현하기 어려운 경우, 컨텐츠에 매겨진 별도의 ID를 입력한다.
    • 별도의 ID를 입력하는 기획을 해야하는 상황
      • 다수의 컨텐츠를 빠르게 입력하고 싶을 때
      • 이미 팝업이 하나 열려있는 상황이어서, 또 팝업을 열기가 어려운 경우
      • 리스트 팝업이 개발 되어있지 않은 경우
  • API 주소를 입력하는 상황은 되도록 지양한다.

백오피스 로그인 후 백오피스를 위한 공지사항 란을 마련하자

• 여러 협업툴과 기업 홈페이지 내 소통 창구가 있지만, 백오피스를 사용하는 사람들에게 정확하게 닿을 수 있는 소통 창구는 백오피스 접속 후 게시판이다.
• 긴급한 서버 점검 등의 상황을 백오피스 메인 내 게시판에 게재한다면, 커뮤니케이션 부족으로 인한 이슈 또한 감소될 것이다.

개인정보 관련 기능은 되도록 몰아넣자

• 기업의 규모가 커진다면, 보안은 선택이 아닌 필수가 될 것이다.
• 개인정보를 다루는 메뉴를 별도로 생각해서 몰아넣는다면, 외부 감사나 ISMS 심사 시 개발 편의성을 도모할 수 있다.

순서 변경 기능은 보수적인 UI를 가져가자

• 다루는 백오피스 메뉴의 성질에 따라 노출 유무, 노출 기간 설정 등과 꼬여서 제대로 작동하지 않는 경우가 있다.
• 별도의 순서 팝업을 띄운 후, 각각 항목을 드롭다운 내 숫자로 선택해서 순서를 변경하거나, 항목을 체크박스로 선택한 후, 고정된 아래/위 버튼을 눌러 순서를 변경해서 이슈를 해결할 수 있다.

팝업은 한 개만 출력하자

• 팝업이 두 개가 열린 경우, UI 및 개발 상으로 이슈가 발생할 소지가 많다.

복사 기능을 넣자

• 예약 배포 기능이 활발하게 적용되는 서비스의 경우, 원래 있던 메뉴의 순서가 시간대에 다이나믹하게 변경될 수 있다.
• 기존에 배포된 요소를 그대로 복사하여, 운영의 편의성을 더해준다면 운영기획의 편의성을 증대할 수 있다.
  • but, 계속해서 쌓이는 가비지 데이터를 주기적으로 정책을 잡아 제거하는 방법이 필요할 수 있다.

---

💡 생각 정리

👉 ▪️ 내가 기획한 관리자페이지는 각 국가별 법인이 법인의 고객을 관리하고, 고객에게 공지를 하기 위한 ‘법인의 운영’ 용도였기에 본부 내 운영의 백오피스는 아니다. 본부 운영을 위한 백오피스 필요성이 가끔 언급되고 있는데, 기획을 담당하게 된다면 저자가 말하는 TIP을 기억하며 사용자가 사용하기 쉬운 백오피스를 기획하고 싶다. 기존 담당하고 있는 관리자 페이지는 언급된 TIP에 대해 어떤 대답을 하고 있나 생각해 보며 내용을 정리해보니, 개선 해야할 기능 및 화면이 떠오른다. 또 백오피스에만 한정된 TIP이 아닌 전반적인 기획에도 적용될 수 있는 내용이라는 생각이 들었다.