늘모자란, 개발 :: 싴갤러스 - 하나의 기능 리뉴얼을 준비하며 (1)

늘모자란, 개발

시작하며


사이트를 만들고 서비스하면 잘 쓰이는 기능도 있는반면, 잘 쓰이지 않는 기능도 존재하는 법입니다.
가판대는 싴갤러스 가장 초기에 만들어진 기능중 하나였으나 사장된(...) 기능입니다.


꽤 손을 많이 탄 기능이고 애착이 있기때문에, 어떻게든 활성화 시킬 수 없을까 하고 여러 고민을 해보게 되었습니다.
(사실, 네이버 카페보다 훨씬 편하다고 생각했기 때문입니다.)

그래서 예전처럼 마구자비로 개발하기보단 생각과 고민을 충분히 해보기로 했습니다.

문제분석과 시도

1. 이름

처음엔 '브라우니' 라는 이름의 메뉴-개인상점 브라우니에서 착안-였으나 사용자들이 어떤 기능인지 잘 모를것 같다는 생각을 반영해, '싴갤러스 가판대'로 이름을 변경했습니다.

2. 편의
처음엔 스크린샷을 넣을 수 없었습니다. 당연히 글로 모든걸 설명해야했습니다. 이는 의도된것으로 스크린샷 한장만 올리는게 아니고, 옵션을 모두 치게 하면 검색이 더 잘될것이라 판단한것입니다만.. 세상에 누가 내구에 색상같은걸 다 치고 있을까요..
그래서 스크린샷을 넣을 수 있도록 개선하였습니다. 또한, 마우스클릭만으로도 쉽게 금액을 추가할 수 있도록 했습니다. 은행앱에서 착안을 해봤습니다

강점 / 약점 분석

당연하지만, 위 두가지를 개선(?) 한다고 해서 당장 효과를 볼 것이라고 생각하지 않았습니다.
롤 모델을 정해 분석해보기로 했고, 당연히 가장 활성화된 마거카를 대상으로 하였습니다.



0. 인증된 사용자(강점)
네이버 카페는 가입절차가 복잡하지 않아 자유롭게 가입할 수 있습니다. 하지만, 해당 캐릭터가 실존하는지, 아이디를 돌려가며 장난을 치는지 알 수 없습니다.
싴갤러스는 특수한 경우(프록시 등)를 제외하면 부계정 사용시 특별조등 기능 사용에 지장이 오기때문에, 인증된 사용자만이 서비스를 이용하고 있다고 할 수 있습니다. 가입의 편의성보단 아무래도 이쪽에 무게가 실릴것 같았습니다.

1. 연락망(약점)

네이버 카페에는 댓글 및 쪽지가 존재하며 타 기기를 이용하는데 제약이 없어 PC에 한정되지 않아 수월하게 대상과 거래를 진행할 수 있습니다.
하지만, 싴갤러스는 인게임 캐릭터에게 쪽지를 보내는 기능이 존재하나 일방적인 기능이어서, 수월한 대화를 진행하기는 어렵습니다.
따라서, 기능에 대한 보완을 하기 위해 신규개발이 필요하다 생각했습니다.

- 사이트 자체 쪽지 기능 개발
- 어플리케이션을 이용한 Push(쪽지 연동)

2. 레이아웃(약점)

네이버 카페는 기본적으로 게시판입니다. 싴갤러스 가판대는 하나의 아이템을 하나의 글로 등록하는 방식을 취할것이기때문에 많은 데이터가 올라올 수 있고, 오히려 가독성을 저하시키는 효과를 가져올 수 있습니다. 아울러 모바일 레이아웃까지 동시에 생각해야했기 때문에 많은 고민이 있었습니다.

3. 기능(강점)

네이버 카페는 위지윅에디터를 이용한 자유로운 글 편집이 가능합니다.

하지만 그외 실제 게임에 도움이 되는 기능은 존재하지 않습니다.
예를 들면, 지정염색앰플을 판매한다 가정하면, 지염 색상을 싴갤러스에서 검색 후, 스크린샷을 찍어 올려 거래하고 있음을 확인했습니다.
계속해서 말하자면, 유저는 결국 '용지염 다수' 라는 글 제목으로 글을 쓸 수밖에 없고, 구매자는 클릭 후 자신이 원하는 색상을 찾은 후에 없으면 성과없이 뒤로 돌아가는 불필요한 과정이 존재합니다.

따라서, 보는 유저나 쓰는 유저 둘다 편하며, 정확한 아이템 이름 및 표기해줄 수 있도록 하는것을 강점으로 하면 될 것 같았습니다.
그래서, 다음 개발이 필요시 되었습니다.

- 유저 오타 교정(데이터 분석을 기반)
- 아이템 이미지 삽입 기능
- 다수의 아이템을 편하고 빠르게 등록
- 아이템별 카테고리화 (카테고리별 검색 및 목록 필터)

강점 및 약점 분석을 다 마친것 같으니 개발하면서 디테일을 설정하기로 했습니다.

개발진행

연락망

레이아웃을 만들때 했던 고민을 또 해야 했습니다.
추가 개발이지만, 결국 독립적으로 사용될 수 있는 기능을 만드는것이기때문에 필요한 사항을 정리해봤습니다.

- 발신함 / 수신함
- 쪽지 발송
- 삭제/신고/차단/보관
- 전달(?)

쪽지란것은 그냥 핑-퐁만 하면 되어서 구현에 어려움을 겪진않았습니다.
다만 악성유저에 대한 처리를 할 수 있도록 고려해야했습니다. 하지만 가판대를 위한 개발이었으므로, 우선사항에서 미뤘습니다.
왜냐면 단순히 차단이나 신고로 끝나는게 아니라, 관리자가 신고를 접수해 처리할 수 있는 기능을 추가로 개발해야되기때문입니다.
그 결과 다음과 같이 개발했습니다.


실제 사용자가 접속중일때 신규 쪽지가 왔다고 알려줘야되므로, 다음과 같이 3단계에 거친 작업이 필요했습니다.
웹서버 - 세션 - 푸시서버
세션을 따로 관리하고 있기때문에 세션을 얻고, 개인푸시를 진행하게 함으로서 웹소켓을 이용한 푸시를 구현하였습니다.
(추가로, 브라우저를 이용한 web push도 지원할 계획입니다. https에서만 가능해서 현재는 진행을 하지 못하고 있지만 ;D)

여기까지만 만들어놓고 즉시 앱 프로젝트를 진행했습니다.

앱 프로젝트는 Sparrow(참새) - 지저귀다 뭐 이런의미로 시작했습니다. (처음엔 그냥 직박구리로 하자고 했다가..)
개발은 iOS부터 했고, 이후에 Android를 개발했습니다. (9월 11일 출시했습니다)

이 과정은 YOKO.SO 프로젝트를 담당하셨던 라제폰님께서 전담해주셨습니다.
(다운로드는 플레이스토어나, 앱스토어에서 '싴갤러스'를 검색해 받으실 수 있습니다)



앱은 정말 쉬울 줄 알았습니다만 그렇게 생각하다가 큰 코다쳤습니다. 간단한 웹뷰앱이었는데도 공수가 많이 들었습니다.
대표적으로, 앱에서 로그인을 매번하게 할 수는 없었습니다. 저 같아도 그럼 안쓸거같아요.

싴갤러스에서는 따로 자동로그인을 지원하지 않았는데 앱을 위해서라도 로그인을 유지하는 기능이 필요하다고 생각하게 되었습니다.
자동로그인 기능은 결국 클라이언트에 정보를 남기는것이기때문에 보안상 문제가 생길 수 밖에 없고, 최대한 '덜 취약한' 형태로 구현하는것이 목적이었습니다.

실제 plaintext를 알고있다고해도, 어떤 방법으로 토큰이 생성되는지,
무작위 대입공격으로 유추할 수 없을정도로 긴 길이의 토큰을 생성해야하는 생각을 하면서 작업했습니다.
그리고 만약의 경우, 토큰을 복호화할 수 있는지 없는지에 대한 방법도 고민해보고.. 최대한 secure하게 작업하고 싶었습니다.
(물론 해쉬기때문에 쓸데없는 고민입니다)

몇차례 시행착오를 거쳐 자동로그인을 도입했습니다.



이 후, 앱을 위한 사이트 전체 CSS 수정이 있었고(대부분 모바일), 여전히 진행중입니다.
또한 푸시를 위한 디자인도 해야했는데 어떻게 하다보니 된것 같습니다 (대책 없는 설명이지만 정말 어쩌다보니 푸시를 순조롭게 넘은것 같습니다. 오픈소스의 위력을 다시한번 느끼기도 했습니다.)

어떻게 뚝딱 해치운 것 같지만, 아직 넘어야할 산이 두개나 남아 있죠.
바로 본기능인 가판대가 남았습니다. 가판대는 아직 시작도 안했기때문에, 작업 후 후기(?)로 찾아뵙겠습니다.



싴갤러스 - 하나의 기능 리뉴얼을 준비하며 (2)로 이어집니다
2016/09/14 19:21 2016/09/14 19:21