서비스 기획자는 비즈니스를 프로덕트에 녹여낼 수 있어야 한다. 즉 비즈니스 전략을 현실화 시키는 것. 기술 구현을 가능하게 만드는 사람이다. 그러기 위해선 시스템에 대한 이해가 높아야 한다. 비즈니스와 시스템은 긴밀하게 연결되어 있기 때문이다. 함께 공부하는 차원에서, 기획자가 알아야할 시스템에 대해 알아보자.

1. 명칭 정리

프론트 오피스, 백 오피스, 프론트엔드, 백엔드의 개념을 정리해보자. 프론트 오피스, 백 오피스는 우리가 사용하는 페이지를 일컫는다. 프론트 오피스라는 말보다는 프론트 페이지라고 하거나 그냥 프론트라 부르는 경우가 많다. 프론트 페이지는 고객이 보는 페이지를 말한다. 쇼핑몰로 예시를 들자면, 우리가 물건을 살펴보고 장바구니에 담고 구매하는 모든 페이지가 프론트 페이지이다.

그리고 상품, 결제 등을 관리하는 관리자 페이지를 백 오피스라 한다. 관리자 페이지를 흔히 어드민이라고 부른다. 프론트를 기획하기에 앞서 백 오피스가 있어야 한다. 백 오피스의 데이터를 기반으로 프론트 페이지가 만들어지기 때문이다.

프론트엔드, 백엔드는 개발 관점에서 본 앞, 뒷단이다. 프론트엔드 개발은 우리가 보는 화면, 즉 사용자 영역 개발이다. 프론트엔드 개발자는 비즈니스 로직을 짜고, 인터페이스를 개발한다. 백엔드는 프론트를 구성하기 위해서 필요한 서버, 응용프로그램, 데이터베이스를 다루는 부분을 말한다.

백오피스와 백엔드의 개념을 혼동하지 말 것. 백오피스는 어드민, 관리자페이지를 의미한다. 백오피스에서도 개발적으로 프론트엔드, 백엔드 구분이 가능하다.

2. 서버

서버는 서버 컴퓨터나 서버 프로그램을 의미한다. 서버 컴퓨터는 서버 프로그램이 돌아가고 있는 하드웨어를 말한다. 우리가 웹사이트에 접속하기위해 주소창에 주소를 치는 과정을 생각해보자. 우리가 사용하는 컴퓨터는 클라이언트고, 주소창에 주소를 치는 행위는 서버에게 웹페이지를 띄워달라고 요청하는 것이다. 그러면 서버에서 응답을 해주고 웹페이지가 띄워진다. 즉 서버는 클라이언트의 요청에 의해 서비스를 제공하는 컴퓨터이다.

보통 프로덕트 하나를 운영하기 위해서는 여러 대의 서버가 필요하다. 대부분은 실제 서버를 관리하기가 어렵기 때문에 호스팅 업체를 사용한다. 서버를 돈주고 빌리는 것이다. 대표적인 곳이 AWS로 유명한 아마존이다. 스타트업 같이 비용이 예민한 곳에서는 서버 비용이 중요한 고려 요소다. 아키텍처를 어떻게 구성하느냐에 따라 트래픽을 어떻게 나눠줄 것인가가 달라지는데, 이를 통해 서버 비용을 줄일 수도 있다. 서버와 비즈니스가 긴밀하게 연결되어 있다는 뜻이다.

백엔드는 웹서버, WAS(웹애플리케이션 서버, 미들웨어 서버, 웹응용 서버), DB(데이터베이스)로 구분된다. 사용자가 http와 같은 인터넷 프로토콜을 사용하면, 웹서버가 웹페이지를 보여준다. 웹서버는 과거에 만들어진 것이라 웹페이지를 띄우거나 파일을 다운로드 받거나 하는 등의 단순한 용도로 사용된다. 한편 웹에서 단순히 파일을 전달받는 활동을 넘어서서, 적시적소에 맞는 데이터를 꺼내와서 펼쳐 보여주는 복잡한 일까지 하게 되자 생긴것이 WAS이다. 예전에 하던 웹활동이 'A를 클릭하면 B가 다운로드된다.'라는 단순한 일이었다면 지금은 A를 클릭하면 회원 정보에 알맞게 비즈니스 로직이 적용되어서 화면이 보여진다. 이 동작을 수행하기 위해 WAS는 DB에서 데이터를 가져오고, 비즈니스 로직에 맞춰서 클라이언트 컴퓨터에게 던져준다. 

앱에서 신발을 판다고 생각해보자. 기획자가 월 매출이 많은 순으로 신발 상품 목록이 뜨도록 기획했다. 데이터베이스에서 데이터가 마구 들어가있을 뿐, 우선순위는 없다. 이때 기획자가 기획한 로직대로 데이터를 화면에 띄워주는 역할을 WAS가 한다.  

3. 데이터 베이스

데이터베이스는 말그대로 데이터를 엑셀과 같은 표에 정리해서 쌓아둔 곳이다. 회원 정보, 로그인 정보 등 모든 데이터를 담아두고 있다. 노련한 기획자라면 DB의 어떤 칼럼에 어떤 정보가 있는지, 어떤 시점에 어떤 정보를 DB에 저장하는지 기획서에 적절하게 포함시켜 쓴다. 

4. 네이티브 앱, 하이브리드 앱

웹은 새로고침을 할 때마다 새로운 정보를 받아와 새로운 화면을 띄워준다. 그러나 앱은? 업데이트를 해야한다. 웹은 접속하는 것이라면, 앱은 다운로드를 받는 것이란 뜻이다. 웹을 수정하려면 코딩만 바꾸면 된다. 새로고침만 해서 쓰면 되니까. 그러나 앱은 변경사항이 있으면 업데이트를 해야한다. 그렇기 때문에 자주 변경해야하는 것이라면 앱으로 만들기 어렵다. 

그래서 그 대안으로 앱과 웹을 합쳐버렸다. 앱을 눌러보면, 어떤 곳은 웹으로 만들어진 부분이 있다. 예를들어 네이버에서 뉴스 기사가 업로드 되는 부분. 항상 바뀌어야 하기 때문이다. 이렇게 앱과 웹을 합친 형태를 하이브리드 앱이라고 하고, 우리가 아는 어플리케이션은 네이티브 앱이라고 한다. 네이티브 앱은 모바일에 최적화되어 있기 때문에 더욱 깔끔하다는 장점이 있다. 

내가 기획하는 프로덕트의 부분 부분이 네이티브 앱으로 구현되었는지, 하이브리드 앱으로 구현되었는지 파악해야한다. 네이티브냐 하이브리드냐에 따라서 웹 개발자에게 요청할 것인가 앱 개발자에게 할 것인가 달라지기 때문이다.

5. 쿠키, 세션, 캐시, 로컬스토리지 

쿠기, 세션, 캐시, 로컬스토리지는 모두 저장소다. 하지만 그 방식이 다른데, 이걸 알아야 서비스 기획을 적절하게 할 수 있다. 쿠키는 클라이언트(우리가 쓰는 컴퓨터) 브라우저에 저장하는 것이다. 300개까지 쿠키 저장이 가능하고, 기간이 만료되면 자동으로 삭제된다. 쿠키는 자동 로그인, '오늘 하루 그만 보기' 팝업, 장바구니, 설정값 저장 등에 사용된다. 

웹 스토리지에는 세션스토리지와 로컬스토리지가 있다. 세션은 웹 서버에 저장되고, 브라우저를 종료하면 없어진다. 로그인 정보를 유지할 때 세션이 사용된다. 로컬스토리지는 브라우저에 저장되나 영구적이다. 브라우저를 끄고 다시 켰는데도 남아있는 것들은 로컬스토리지에 저장된 것이다. 검색창에 남아있는 과거 검색해본 검색어 등은 로컬스토리지에 저장된 것이다. 

캐시는 사용자 브라우저에 저장되고, 브라우저를 종료하면 바로 날아간다. 캐시는 사운드나 이미지파일을 일시적으로 저장해서 트래픽을 줄이고 로딩을 빠르게 하는데 쓰인다.

*이 문서는 이후에 추가적으로 공부한 정보가 있으면 업뎃하도록 하겠습니다. :)

윤소소 작가님의 글 더 보러가기