페이지 제작 어드민, 무엇을 개선했을까? 💭

2026.01.20 - [Develop] - 페이지 제작 어드민, 무엇을 개선했을까? 💭

2026.02.17 - [Develop] - 페이지 제작 어드민 개발 중 받은 피드백과 성장

 

1. 기존 페이지 어드민은 어떻게 되어 있었나

 

페이지 어드민이란, 앱 내 페이지를 제작하는 팀원들이 페이지를 쉽게 만들 수 있도록 도와주는, 사내 페이지를 말한다.

우선 우리 앱의 페이지가 어떻게 구성되는지 살펴봐야 한다. 요소들을 하나하나 쌓아나가는 형식으로 되어 있다

 

제미나이가 만들어준 사진

 

페이지 안에 이미지나 스크롤, 상품들이 들어간다면 위에서부터 차곡차곡 쌓아서 페이지를 만든다.

이 하나하나 쌓이는 요소들을 '엘리먼트'라고 지칭할 것이다.

 

우리의 MD분들이 바로 이 페이지를 구성해서 기획전을 운영하는 것이다.

MD는 Merchandising Director라고도 하고 'Mㅝ든 Dㅏ한다'의 약자라고도 한다.

영업, 기획전 구성, 상품 셀렉 등 여러가지 일을 해서 그렇다고 한다.

 

..아무튼 이제 아래의 페이지를 한 번 만들어본다고 하자.

 

 

기존에는 이 페이지를 만드는 과정이 좀 험난했다.

개발자라면 좀 더 나았겠지만 개발을 모르는 MD분들에게 몹시 힘들었을 것이다.

 

특정 데이터 같은 경우에는 MD 분들이 직접 JSON 형태로 값을 넣었어야 했다.

JSON이 뭔지 객체가 뭔지 하나도 모르실텐데 이걸 제대로 편집할 수 있을리가 없다.

 

화면 하단의 JSON을 보라! (실제 데이터가 아닙니다)

 

 

상품을 선택하는 일도 직관적이지 않았다.

아래 화면에 보이는 것처럼 상품 ID와 이름만 보일 뿐이었다.

상품이 어떤 브랜드고 어떤 썸네일을 가졌는지 이 단계에서는 보기 어려웠다.

 

상품 ID와 이름을 보고 선택해야 한다

 

 

2. 새로운 페이지 어드민 소개

 

그래서 우리 팀은 새로운 어드민을 제작해야 겠다는 판단을 했다.

기획전을 만드는데 걸리는 시간을 줄이고 그 시간으로 영업이나 상품 선택, 데이터 확인과 같은 일에 투자하자는 전략이었다.

 

페이지 어드민, 페이지 편집 메인

 

이런 페이지가 만들어졌다. 디자이너의 도움 없이 만들었으니, 생각보다 예쁘다는 피드백을 바란다.

..페이지를 하나 잡아서 들어가보자.

 

모두 가짜 데이터이니 자세하게 볼 필요가 없다

 

이 페이지 좌측에서 원하는 '엘리먼트'를 선택하여 편집한다.

중앙에는 내가 편집하고 있는 페이지의 미리보기가 보이며, 우측은 페이지 자체 설정을 담당한다.

 

좌측 사이드바에서 드래그앤 드롭으로, 엘리먼트가 페이지 내에서 어떤 위치에 있을 것인지 설정 가능하다.

좌측 바에서 연필 아이콘을 누르면 엘리먼트를 수정할 수도 있다!

 

모두 가짜 데이터이니 자세하게 볼 필요가 없다

 

페이지 내에 들어가는 상품을 검색하고 설정할 수 있다.

상품의 썸네일과 브랜드가 바로 보인다는 점에서 편의성이 증가했다.

무엇보다 CTR, CVR, 거래액을 보여주면서 MD 분들이 상품 셀렉을 할 때 편리하게 했다!

 

CTR : Click Trough Rate라고 해서 얼마나 클릭했는지에 대한 비율

CVR : 상품을 클릭해서 상세 페이지에 들어온 사람 중, 구매(또는 장바구니 담기 등 목표 행동)를 완료한 비율

 

모두 가짜 데이터이니 자세하게 볼 필요가 없다

 

엘리먼트들이 어떻게 생겼는지에 대한 미리보기도 만들었다.

기존에는 어떤 엘리먼트를 만들 수 있는지에 대한 가이드가 노션 문서에만 있었다.

 

어드민 편집시 어드민 페이지와 노션을 둘 다 띄우며 번갈아 봐야만 했다.

이제는 어드민 페이지 하나로 UI선택을 할 수 있게된 것이다.