brunch

You can make anything
by writing

- C.S.Lewis -

by 김효진 Jan 03. 2021

관리자 페이지 기획 및 화면설계

앱 출시와 관리자 페이지 디자인


앱 리뉴얼 하기 시리즈에서 Tmarket(티마켓)에 대한 보다 자세한 내용을 확인할 수 있다.

• 티마켓 : 한국으로 여행 오는 외국인 관광객들을 대상으로 할인에 할인을 더하여 한국 제품을 더욱 저렴하게 구매할 수 있게 도와주는 서비스.


티마켓의 전체적인 디자인이 1차적으로 완료되고 동시에 관리자 페이지 기획에 들어갔다.

관리자 페이지를 만드는 목적은 티마켓 출시 이후 사용자가 앱을 통해 주문을 하게 되면 어떤 사용자가 어떤 상품, 옵션, 수령 장소 등을 선택했는지 알아야 하고, 앱 내 채팅에서 사용자가 문의를 주면 관리자가 답을 해야 는 등 다양한 이슈가 생기기 때문이다.


관리자란 조직의 사용자(일명 임시 관리자)가 데이터 원본 및 통합 문서에 대해 게시, 공유, 관리 및 연결 작업을 수행할 수 있도록 FrameWork(프레임워크)를 만들고 유지 관리하는 사람으로 정의된다. 예를 들어 사이트 관리자는 사이트 사용자와 해당 사용자의 사용 권한에 대한 작업을 수행하면서 사이트에 게시된 콘텐츠에 대한 작업을 바로 수행할 수 있다.


*FrameWork 란

일정한 형태의 틀, 부품을 가지고 다양한 형태의 결과 물을 만드는 것.

어떤 프로그램을 쉽게 만들기 위한 요소와 룰을 제공해 줌으로써 소프트웨어의 생산성과 품질을 높이는 역할을 하는 것.


본격적으로 들어가기에 앞서 관리자 페이지 기획 및 디자인 과정은 참고만 하기 바란다. 이 프로세스가 정답은 아니라는 점. 회사 내부마다 프로세스가 상이할 수 있다.








01. 필수 기능 분석

# 개발자, 마케터와 회의


관리자 페이지 1차 회의

티마켓 실사용자가 되어보기

1차 회의에는 마케터와 디자이너(글쓴이)가 참석하였다. 앱 출시 전이기 때문에 마케터가 CS역할을 같이 하였다. 고객의 주문이 쌓이기 시작하면 CS 채용을 하기로 하였다.

먼저 마케터와 TestFlight, google play store 테스트 버전 티마켓을 사용해 보며 사용자의 입장에서 일반적으로 주문하는 과정, 주문을 확인하는 과정, 실제로 상품을 받는 과정을 직접 재현해보고 서로를 관찰하며 영상 촬영, 텍스트로 기록하였다. 또한 티마켓 UI 설계를 위해 작업해 두었던 User Flow도 도움이 많이 되었다.

추가적으로 사용자의 입장에서 서비스를 직접 사용해보고 그 과정을 기록으로 남겼을 때 그렇지 않았을 때보다 찾고자 하는 것을 더 쉽게 찾을 수 있었다. 머릿속으로 생각만 해서는 좋은 결과물을 찾을 수 없다.

티마켓의 흐름을 파악하였다면 이제 관리자 페이지에는 어떤 정보가 넘어올지 생각해 보아야 한다. 아직까지 관리자의 입장은 추가되지 않는다.

예를 들어 사용자의 입장에서 티마켓에 접속하여 Splash, 사용자 가이드 다음으로 보이는 페이지는 대한민국 입국, 출국 예정일 선택이다.

1. 사용자 : 대한민국 입국 / 출국 날짜 선택 → 개인정보 처리 방침 동의 → 확인 → 메인 페이지

1-1. 관리자 페이지에 넘어오는 정보 : 대한민국 입국, 출국 날짜


2. 사용자 : 메인 페이지 → 사람 모양(수령인 정보 완성) 클릭 → 내가 직접 상품 받기 / 친구한테 상품 수령 부탁하기 중 내가 직접 상품 받기 선택 → 여행 일정 / 여권번호 / 이름 / 국적 선택 및 기입

2-1. 관리자 페이지 : 내가 직접 상품 받기, 여행 일정(대한민국 입국, 출국 날짜), 여권번호, 이름, 국적


3. 사용자 : 이커머스에서 마음에 드는 상품의 옵션, 수량 선택 후 장바구니에 담기 → 장바구니에서 구매를 원하는 상품 클릭 → 금액 확인 → 구매하기 클릭 → 주문서 작성


4. 사용자 : 수령 방법 선택 (메인 페이지 사람 모양(수령인 정보 완성)에서 미리 정보를 작성하였다면 반영되어 있다.) → 수령 장소 선택 인천 국제공항 제1 여객터미널 / 인천 국제공항 제2 여객터미널 / 서울 지역 호텔 (서울 만) 중 인천 국제공항 제2 여객터미널 선택 → 희망 수령일 선택 입국 날 받기 / 출국날 받기 중 출국날 받기 선택 → 추가 요청사항 입력 → 주의사항 확인 → 주문 상품 정보 확인 → 취소 및 환불 규정 확인 → 결제수단 선택 → 결제금액 확인 → 구매 조건을 확인하고 결제에 동의 체크 → 결제하기 클릭 → 결제창으로 넘어가 결제

4-1. 관리자 페이지 : 인천 국제공항 제2 여객터미널, 출국날 받기, 추가 요청사항, 결제수단, 결제금액, 주문한 상품 옵션


5. 사용자 : 주문 완료 → 주문번호 확인

5-1. 관리자 페이지 : 회원 주문번호, 고객 주문 날짜, 배송비, 할인된 한국 가격, 원래 한국 가격 등


6, 7, 8, 9.. 계속 나열


중요 정보의 경우 삭제, 모자이크 처리되었습니다.

관리자 페이지 2차 회의

관리자의 입장이 되어보기

1차적으로 정리가 마무리되었다면 개발자와 관리자의 입장이 되어 필요한 부분을 추가한다. 여기서 마케터가 완전히 빠지는 것은 아니다. 참석을 원한다면 언제든 환영이다. 여기까지도 텍스트로만 정리해도 충분하다. 디자이너 특성상 화면 설계를 같이 작성하다 보면 어느 순간 레이아웃, 줄 간격에 신경 쓰기 때문이다.


Back-end / Front Developer / Designer - Admin Page 회의

관리자 페이지 3차 회의

기준을 잡고 분류하기

여기서 중요한 건 텍스트로만 정리된 정보들을 어떤 기준으로 분류할 것인지 이다.

1. Navigation에 들어갈 text 정하기(기준 잡기)

→ 전체 페이지, 주문관리, 배송관리, 회원관리, 채팅, 알림, Log로 잡았다.


2. 기준을 잡았다면 분류하기

→ 예를 들어 '전체 페이지'에 들어가야 할 내용을 정렬해보았다.

대한민국 입, 출국 날짜

국적

이름(영문)

여권번호

회원 주문번호

수령인 (내가 직접 상품 받기 / 친구한테 상품 수령 부탁하기)

수령 장소 (공항 제1여객터미널 / 공항 제2여객터미널 / 서울지역 호텔)

희망 수령일

추가 요청 사항

고객 담당자


3. 묶을 수 있는 정보가 있는가

→ 전체 페이지를 클릭했을 때 위의 정보가 모두 보이기에는 정보의 양이 너무 많다. 그렇다면 묶을 수 있는 정보가 있는지 생각해보아야 한다.

main: 여권번호 → modal: 대한민국 입, 출국 날짜 / 국적 / 이름 / 여권번호

main: 회원 주문번호

main: 수령인

main: 수령 장소 → modal: 희망 수령일 / 추가 요청사항 / 수령 장소


Marketer / Back-end / Front Developer / Designer - Admin Page 회의









02. 관리자 페이지 화면 설계

관리자 페이지는 웹 사이트로 작업하는 것이 좋다. 모바일, 태블릿으로도 관리할 수 있지만 사용자 리스트, 입력 요소가 많기 때문에 웹사이트 형태로 작업하는 것이 좋다.


중요 정보의 경우 삭제, 모자이크 처리되었습니다.
중요 정보의 경우 삭제, 모자이크 처리되었습니다.

02-1. 로그인

로그인의 경우 관리자가 별도로 회원가입을 하지 않으며, 개발자가 아이디와 영문, 숫자가 조합된 비밀번호를 공유해 준다. 관리자는 아이디, 비밀번호를 임의로 변경할 수 없으며, 잊어버리는 경우도 없다.



02-2. Navigation

전체 페이지

주문관리

배송관리

회원관리

채팅

알림

Log



중요 정보의 경우 삭제, 모자이크 처리되었습니다.

02-3. 전체 페이지

전체 페이지는 말 그대로 관리자가 한 페이지에서 주요 이슈를 해결할 수 있는 페이지이다. 또한 클릭 요소(예를 들어 여권번호)를 클릭하면 페이지 전환 또는 모달로 정보(대한민국 입, 출국 날짜, 국적, 이름, 여권번호)를 띄어준다. 페이지 전환보다는 모달을 선호하는 편이다.



02-4. 채팅

앱 내 채팅으로 사용자가 문의를 주면 관리자가 신속하게 처리할 수 있어야 한다.



02-5. 알림

관리자 페이지에 알림이 있고 없고는 차이가 크다. 만약 알림이 없다면 관리자가 수시로 주문건이 들어왔는지, 고객 문의가 들어왔는지 확인해야 하고 실시간으로 처리해야 하는 문제가 생길 경우 타이밍을 놓쳐 결국 고객 이탈로 이어질 수 있다.



02-6. Log

서비스를 이용하는 사용자들이 남기는 로그는 서비스 로그와 행동 로그로 구분된다.

서비스 로그란 transaction의 결과를 기록하는 로그이다. 예를 들어 탈퇴하기, 회원정보 수정, 결제하기 등 하나의 transaction이 완료되었을 때 각각의 서비스 로그가 남게 된다.

행동 로그란 transaction에 이르기까지 사용자들이 서비스에서 하는 하나하나의 action에 대한 로그를 의미한다. 예를 들어 특정 상품을 클릭, 검색, 이벤트 배너 등의 action이 있다.


티마켓 관리자 로그의 경우 서비스 로그만 사용하고 있다.

예를 들어 select * from user; → 유저를 조회한다.

select * from user where  name ='효진' → 유저 중 효진이라는 이름을 가진 사람을 조회한다. 이렇게 되면 효진이란 유저의 쿼리가 날아온다.


*쿼리(Query)란

쿼리란 데이터베이스에 정보를 요청하는 것이다. 쿼리는 웹 서버에 특정한 정보를 보여달라는 웹 클라이언트 요청(주로 문자열 기반 요청)에 의한 처리이다.

쿼리는 대개 데이터베이스로부터 특정한 주제어나 어귀를 찾기 위해 사용된다. 주제어나 검색엔진의 검색 필드 내에 입력된 다음 그 내영이 웹 서버로 넘겨진다.


sesok808, 쿼리(Query) 란?, 2014.04.21








03

관리자 페이지 디자인

# 실사용자 CS, 마케터의 목소리에 집중하자


디자인 작업에 앞서 마케터와 작성된 화면 설계를 함께 보며 꼭 들어갔으면 하는 사항을 체크한다.

마케터가 요청한 것

내비게이션에 날짜, 시간이 크게 있었으면 좋겠다. → 데스크톱 오른쪽 상단, 하단에 있는 조금 한 날짜, 시간은 처리할 일이 많고 정신없을 경우 잘 보이지 않고 답답하다는 의견이 있었다.

많은 유저의 리스트가 나열되어 있기 때문에 클릭하면 구분 다른 섹션과 구분되었으면 좋겠다.


앱 디자인처럼 그리드는 필수이며, 디자인 가이드 작업 또한 필수이다.

디자인 작업에 마무리되었다면 개발자, 마케터가 직접 테스트를 해 보며 수정사항을 체크한다. 추가적으로 서비스가 실제로 돌아가기(실사용자가 티마켓을 통해 상품을 구매하기 시작하면) 시작하면 추가사항이 분명 생길 것이다.


김효진 소속 직업 디자이너
구독자 638
작가의 이전글 디자이너가 데이터 활용하기

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari