Chak Web Application Design

어디에나 손쉽게 붙여 사용하는 댓글, 포럼 웹어플리케이션 서비스

Chak은 웹페이지 어디에나 손쉽게 ‘착’ 붙여 토론하고 공유할 수 있는 웹어플리케이션 서비스다.
다양한 웹프레임웍이 발달하면서 다양한 프로젝트 페이지가 개인화 되고 어디에나 쉽게 가져다 쓸 수 있는 댓글과 포럼 서비스에 대한 니즈가 높아졌다. Disqus, Discourse 등의 서비스가 전세계 웹서비스에 어떤 영향을 끼쳤는지만 봐도 알 수 있다.

Chak 또한 어느 웹페이지에서나 간편하고 강력하고 사용할 수 있도록 설계하였다. 또한 소셜 로그인, 공유하기, 해시태그, 멘션, 그 밖에 많은 기능들을 직관적으로 디자인하여 사용자가 커뮤니케이션에 더욱 집중할 수 있도록 고민하였다.

Participation Rate: 40%
Project Manager: Sol Kim
Creative Director: Lee Junha
UI Designer: Lee Junha, Seon Jihoon, Hong Boram
Developer: Hong Kyungwon, Oh Seonghyun
Support & Client: NAVER LABS, NAVER D2
BI Designer: Yoon Hongkyung

Service Overview

웹페이지 특성에 맞는 어플리케이션을 사용할 수 있도록 댓글서비스와 포럼서비스로 나누었다.
댓글은 가볍지만 강력한 기능들을 내포하며, 포럼은 글 하나 하나 모두 카테고리 속성을 내포하여 원하는 주제에 쉽게 접근하고 어디에서나 토론을 이어갈 수 있게 도와준다.(어플리케이션 특성상 사용자 경험의 주체가 될 지언정, 사용자가 운영하는 서비스의 주체가 되어서는 안되었다.)

Project Goal

컨텐츠를 소비하는 다양한 고객들의 기술 경험을 확장시키고 한 페이지안에서 다른 페이지로의 이동 없이 커뮤니케이션이 가능하도록 설계하였다.
이를 통해 사용자 탐색 비용을 줄이고 필요한 기능을 쉽고 빠르게 사용할 수 있었다. 어디에서나 쉽게 접근하고 심도 있는 커뮤니케이션을 돕는 것을 목표로 하였다.

Easy 어디에서나 쉽게 사용

디바이스별 지원. 소셜로그인 지원. 활동 및 콘텐츠 알림. 쉽고 가벼운 위지윅 에디터 개발.

Smart 강력하고 스마트한 기능

작성 글 자동 아카이빙. 히스토리 및 통계 자동 노출. 유연한 확장성. 스킨 커스텀 지원. 외부 연동. 비밀글 설정. 강력한 위지윅 에디터 지원.

Professionalism 심도 있는 커뮤니케이션 지원

파일, 링크 리스트업. 코드 하이라이팅 및 다이어그램 적용 지원. 웹훅기능 웹어플리케이션 연동. 포럼 기능. 멘션 및 해시태그 알림.

Branding

Brand Concept

웹 커뮤니케이션 중 댓글과 포럼까지 사용자의 글 모두 개별 컨텐츠화하여 커뮤니케이션이 지속되고 개인수집이 가능하도록 일관된 경험을 제공할 수 있다.
이를 바탕으로 기존 댓글과 포럼 서비스와의 차별화를 위해 사용자 경험 환경에 대한 카테고리를 정의하였다.

Brand & UI Essense

말을하고 있는 얼굴과 웹커뮤니케이션 기호인 말풍선을 모티브로 BI를 제작하였다.
심볼은 웹 커뮤니케이션과 오프라인 커뮤니케이션이 닿는 접점을 의미한다.

UI 아이콘은 웹커뮤니케이션에 필요한 기능을 직관적으로 알 수 있도록 제작하였으며, SVG기반의 웹폰트로 제작하여 각 UI에서 React.js를 통해 불러오도록 설계하였다.

UI Details

Comment Chak

Chak의 댓글 서비스는 페이지에 빠르게 댓글을 붙여 쓸 수 있고, 다양한 페이지에 분리된 소셜 기능을 모아 볼 수 있도록 Mypage에서 정보를 수집하고 알려준다.

글을 추천하고 공유할 수 있으며, 각 댓글에 고유 주소를 발행하여 이를 공유할 수도 있다. 각 댓글에 간단한 피드백(좋아요, 싫어요)를 남겨 좋아요 횟수가 많은 댓글을 필터링하여 볼 수 있다.

Forum Chak

포럼 서비스는 설정된 큰 카테고리를 기준으로 API를 생성하여, 주제에 따른 심화 토론을 진행할 수도 있고 필요한 카테고리만 자신의 웹페이지에서 불러와 지속적인 토론에 참여할 수 있다. 각기 다른 공간에서도 주제에 맞는 토론을 중심으로 확장해서 사용할 수 있다는 점이 가장 큰 특징이다.

각 토픽에 생성된 글은 하나의 페이지를 만드는 것과 같으며, 해당 토픽이 충분히 토론되었을 때 토론이 끝났다고 설정할 수 있습니다. 때문에 토픽 생성자는 Github에서 이슈를 발행하는 것과 비슷한 경험을 제공하지만 보다 다양한 피드백과 의견 교환이 이뤄질 수 있도록 하였다.

Service Webpage

Comment Chak

Forum Chak

 

후기 또는 잡담

각종 컨퍼런스와 워크샵의 당골 손님이 되다

Chak은 NAVER개발자센터 리뉴얼 프로젝트 기일에 맞춰 적용할 수 있도록 진행한 사이드 프로젝트였다. 완전히 독립된 서비스였기 때문에 XE3에서 적용한 Laravel PHP Framework과 XE3 플러그인들, 그리고 당시 최신 기술이였던 React.js를 사용하여 개발할 수 있었다. 당시 Laravel은 한국어 번역을 Laravel Korea Community와 함께 진행하였고(해당 문서 페이지도 단 하루만에 만들어 개발자들이 쓸 수 있도록 하였다.) React는 Front-End 개발자였던 오승훈님이 공식 문서를 직접 해석하면서 실무에 적용하였다.

Product를 설계하는 입장에서 해당 기술들에 대한 이해가 없으면 리딩하기 어려웠기 때문에 번역도 돕고, 번역 문서 페이지도 만들고, 작은 것부터 React를 적용(Comment 서비스의 일부부터 적용해갔다.)하고 피드백을 나누면서 기본 개념을 자연스럽게 익히게 되었다.

Dev버전 배포와 함께 NAVER D2, Deview, XECon, PHPFest 등 각종 개발자 컨퍼런스에서 서비스 개발기를 공유하게 되었다. 비록 개발자가 아닌 터라 연사로 참여하지는 못했지만 옆에서 돕고 UI를 디벨롭하고, Front-End 개발 수정도 해보면서 재미있는 경험들을 할 수 있었다.

Eco System 설계에 실패해 독립 서비스가 되지 못한 아쉬움

길지 않은 기간에 적은 인원으로 설계하다보니, 최종 목적이였던 ‘오픈소스+유료혜택’을 통해 독립 서비스로 만들기에는 안정성이 문제가 되었다. 이후 우리 팀도 다른 메이저 프로젝트들에 집중해야했던 시기였기 때문에 NAVER D2 서비스 외에 NAVER 개발자센터에 포럼을 붙히는 데 대응할 수 있는 상황이 아니였다. 결국, 이미 서비스되고 있는 Discourse를 붙히고 배포하기로 결정되면서 추가적인 지원을 받지 못한 탓에 Chak-Forum은 차후 XE3 플러그인으로 쓰기로 결정하고 정식 서비스를 중단하게 되었다.

꽤 잘 만든 서비스임에도 타이밍, 시간비용, 인력비용 등의 현실적인 문제에 부딪혀 정식배포가 되지 못한 채 묻힌 아쉽고도 아쉬움이 많이 남는 프로젝트였다.