XE3 Member & Management #2

쉽고 빠른 설정환경 마련과 개인화 서비스 최적화하기

XE3는 기존 Xpressengine 1.x 버전의 확장성 문제를 해결하고 모던한 CMS를 만들기 위한 프로젝트다.

Member & Magagement 포스팅은 회원가입, 정보관리, 페이지 및 플러그인 관리를 위한 편집 페이지 UI에 대한 내용이다. 로그인, 회원가입, 계정설정, 모듈관리, 컨텐츠설정, 프로필 관리, 소셜 후킹 관리, 보안설정 등의 내용을 포함한다. 주요 항목으로 XE3 Core에 포함하는 기본 개념으로, 일부 핵심 모듈과 연동되어 관리를 손쉽게 할 수 있도록 고민했다.

2장에서 다루는 Management에서는 Setting과 Profile 두 페이지로 구성해보았다. 이 외에도 Admin환경 설정이나 Dashboard, 포스팅 관리 등 다양하게 연결된 페이지들이 있으나, 소개하는 두 서비스로 대략적인 내용을 가늠해볼 수 있겠다. 대부분 관리자페이지(Admin)에서 설정이 가능한 내용이지만, 관리자 뿐 아니라 관리자 외에도 개인화 기능에 초점을 맞추어 설정이 가능한 환경이 되도록 설계하였다.(관리자 또한 매번 Admin에 들어가서 설정이 가능하면 피로도가 높다.)

Setting

계정설정 페이지는 계정설정, 알림설정, 게시글설정 3가지 항목을 기본으로 포함한다. 설치한 테마 및 모듈, 위젯에서 Setting을 지원하는 경우 해당 항목 설정 페이지에 추가 노출되도록 하였다.

Mobile

모바일과 PC의 설정 항목이 동일해야하기 때문에 Setting페이지에서는 XE3 Basic UI외에 다른 UI를 제공할 수 없게하였다. (덕분에 설정에 필요한 거의 모든 UI요소를 Basic UI에서 제공할 수 있도록 하였다.)
Adaptive Web의 UI를 빌려 모바일에서는 각 항목을 클릭했을 때 상세 설정 화면이 우측에서 슬라이딩 되도록 별도로 화면설계를 하였다.(모바일 앱 및 모바일 OS의 디자인패턴을 참조)

항목을 클릭했을 때 상세설정 화면으로 트랜지션된다.

PC

PC페이지의 게정설정 페이지는 테마 플러그인과의 호환성을 우선시하여 제작되었다.
각 카테고리는 웹브라우저 좌측에 노출되며 일정 사이즈 이하에서 모바일/테블릿 메뉴UI로 변경된다. 설정을 관장하는 각 패널은 각기 h3 타이틀에 노출되어야하며, Folding UI는 h4기준으로 작동되도록 하였다. 각 h4를 포함한 항목은 End-button이 없는 경우, 저장 및 취소의 Comfirm UI를 통해 설정을 적용할 수 있다.

PC화면에서는 한 페이지에서 항목에 해당하는 설정을 완료할 수 있다.

Profile

프로필 페이지는 사용자 Dashboard와 각 패널의 상세페이지를 포함한다.
프로필 영역은 두 페이지에서 UI가 전환되어, 각 페이지에서 중요한 UI에 집중할 수 있도록 설계하였다.

Profile & Dashboard

Dashboard에서는 회원정보 수정 및 노출 여부를 설정할 수 있으며, Follow 기능을 통해 다른 사용자의 게시글을 확인하고 알림모듈로 정보를 받아볼 수 있다. Dashboard는 설정된 Activity 카드를 통해 노출된다.

Profile Area

개인 프로필은 기본 회원가입시의 정보를 호출하여 노출한다. 프로필 페이지에서 정보를 수정하여 노출할 수 있고 소셜 정보는 동일하게 싱크된다. 사용자 이미지, 회원 등급, 소개글 및 링크 텍스트, 연동 소셜 서비스를 기본 노출하며, 정보가 없는 ‘none’ 상태일 경우 해당 element를 non-block 처리하도록 하였다.

UI 상태에 따른 화면 예시

Dashboard

각 프로필 영역은 사용자 본인인 경우 수정 버튼을 노출하고, 타인인 경우 Follow/Unfollow 버튼을 노출하도록 분기되어 있다. Activity 카드는 Admin 또는 Setting에서 설정된 카드를 뿌려주며, 카드 타이틀 우측에 필요한 옵션버튼과 Info를 노출할 수 있다.

자신의 페이지 일 때 화면 가이드라인

다른 계정의 마이페이지일 때

Dashboard Detail

프로필 페이지에서 Activity 카드에 제공된 Detail 페이지에 접근하면 Profile을 최소화하고 상세 컨텐츠를 하단에 노출한다.
컨텐츠는 Activity 카드에서 제공하는 정보에 따라 상이하며, 기본 Profile 페이지에서 제공하는 Pannel UI를 사용하게 된다. 각 패널의 리스트는 펼침 UI와 링크를 선택 제공할 수 있다.

커스텀된 Activity 카드 예시

 

후기 또는 잡담

프로필페이지는 많은 플랫폼 서비스가 제공하는 회원 기능 중 하나이다. Member 세팅환경과 제공하는 서비스 특징에 따라 역할이 다르긴하지만 일반적인 기능(Follow, Activity정보 등)은 매우 유사하다. CMS이므로 사용자가 어떤 서비스로 사용할 지 확신할 수 없기 때문에 자유도는 높이되, 버그가 발생하지 않도록 공통화되고 유연한 UI로 구성하는 것이 매우 중요했다.