[서비스 기획] 백오피스 기획을 위한 프론트 화면 분석

 

다음 글에서 이어집니다.

[1. 학습하기] - [서비스 기획] 백오피스(Back Office)란

[1. 학습하기] - [서비스 기획] 백오피스 도메인 공부하기

1. 피그마로 화면 와이어프레임을 구성했다.

랜딩페이지를 타겟으로 삼아 GNB부터 각 파트별 레이아웃의 배치를 설정했다.

오토레이아웃과 실제 사이즈를 고려하여 배치했고, 이미지 등은 회색 프레임으로 처리했다.

(와이어프레임과 화면 디자인 사이 그 어딘가의 결과물이 되었다)

이 과정까지는 몇 번 해본 적이 있어서 최대한 빠른 시간 내에 완성하는 것을 작은 미션으로 삼았다. 30분 안에 끝내기!

프론트 화면을 먼저 살펴보는 이유는

1. 삼성 라이온즈 홈페이지에서 제공하는 전체 기능 파악

2. 관리자의 입장에서 요구사항 도출

로서 자칫하면 내용이 명확하게 보이는 프론트 페이지에 집중하게 될 수 있기 때문에

이번 프로젝트의 목적이 프론트 화면을 구현하는 것이 아니라 백오피스를 기획하는 것이라는 것을 분명히 해야 한다.

 

2. 화면 목록을 구글 스프레드시트를 이용해 모두 나열했다.

출처 : 삼성 라이온즈 홈페이지 - 사이트맵

기능과 URL은 기존 홈페이지의 값을 이용하고 메뉴 구성에 따른 대분류/중분류/소분류로 구분했다.

화면 아이디는 중분류-소분류 번호-화면 번호 순으로 값을 매겼다.

 

이제 고민해야 할 부분은 화면 안에 들어가는 데이터를 어떻게 정리할 것인가? 어떤 방식이 가장 좋을까?

 

3. 백오피스 기획을 위해 프론트 페이지에서 찾아야 하는 정보는 무엇인가?

백오피스의 목적은 프론트 화면에 필요한 데이터를 관리자가 제어하는 것으로, 프론트 화면의 모든 내용을 백오피스에서 다루지는 않는다.

따라서 백오피스와 프론트 페이지와의 관계를 데이터를 관리하는 DB 입장에서 정리할 필요가 있다.

다음과 같이 프론트 페이지를 구성하는 데이터는 데이터베이스(DB)에서 가져오는 동적 데이터와

소개 텍스트, 고정 배너 이미지, 회사 정보 등의 정적 데이터로 구성된다.

 

이 때 백오피스의 역할은 정적 데이터를 저장하고 있는 DB의 값을 제어하는 것으로, 웹 사이트의 종류에 따라 다르지만 접근하는 사용자의 권한에 따라 프론트 페이지는 단순히 데이터를 읽는(Read) 역할만 수행하기도 한다.

이번 프로젝트의 경우, 일반 사용자는 데이터를 읽기만 하면 되기 때문에 Read 역할만 수행한다.

 

그렇다면 프론트 페이지를 분석하면서 내가 찾아야 하는 정보는 백오피스에서 어떤 ‘데이터’를 관리해야 하는지다.

관리자만 접근할 수 있는 백오피스가 필요한 이유는 관리자가 직접 DB에 접근하지 않고도 데이터를 관리하기 위해서다.

어떤 화면이 필요한지 찾기 위해 프론트 페이지에 있는 데이터에서 DB에 저장되어 있는 정보를 구분해야 한다.

 

출처 : 삼성 라이온즈 홈페이지

예를 들어 계속 변화하는 데이터인 선수 정보의 경우를 간단하게 살펴보자.

실제 백엔드 설계를 정확히 알 수 없지만 선수단/타자 화면은 ‘선수’ 테이블에서 role=‘타자’인 선수 목록을 가져오고, <li> 태그를 이용해 배치했을 것이다.

그럼 선수 정보가 변화할 때 프론트 화면을 변경할 필요 없이 DB 상에서 선수 정보만 수정하면 된다.

 

출처 : 삼성 라이온즈 홈페이지

반대로 이렇게 정적인 데이터를 보여주는 화면은 DB에서 값을 가져오지 않고 코드에 이미지를 바로 넣어주는 것이 낫다.

 

위와 같은 방식으로 각 메뉴 별/화면 별로 프론트 페이지를 보고 데이터를 DB에서 가져왔는지 판단했다.

다음과 같이 엑셀 파일에 DB 연결 여부와 어떤 형태로 표현되고 있는지도 단순하게 표현했다.

사실 구현 방식에는 정답이 없기 때문에 백오피스로 관리자가 수정할 수도, 코드를 직접 수정할 수도 있다.

내가 개발자라면 어떤 방식이 가장 효율적일까 생각하면서 개발자 옵션의 Elements 부분도 참고했다.

DB에서 값을 가져오는 것이 유지보수 측면에서 좋아보일 수 있지만, DB를 무작정 호출하면 네트워크와 서버 리소스를 과도하게 사용해 오히려 응답 속도 등 성능 면에서 좋지 않기 때문에 적절하게 배치하는 것이 중요하다.

도출한 내용을 바탕으로 백오피스의 메뉴 구성을 대분류/중분류 단위로 정리한 결과다.

이번 작업은 실제 개발이 목적이 아닌 기획 연습이 목적이기 때문에, 다양한 사례를 경험하고자 백오피스에서 관리할 수 있겠다 싶은 항목은 정적 데이터로 구현된 것처럼 보여도 백오피스 항목에 포함시켰다.

4. 백오피스에 필요한 메뉴를 도출한다.

다음 포스팅에서 오늘 정리한 내용을 바탕으로 백오피스의 요구사항을 도출하고 필요한 기능을 정의할 것이다.