이 보고서는 2014~2015년 APM시장의 규모 및 동향을 조사 분석한 것을 바탕으로, 2016~2017년 시장 전망과 기술 트랜드 예측을 주된 목적으로 합니다.  이와 함께 2014년 벤더별 시장점유율 및 인더스트리별 시장 점유율을 상세히 분석했습니다. APM 시장  보고서  관련 요청 및 문의는  제니퍼소프트 김윤희 차장 ( [email protected])에게 연락 하시면 됩니다.   

#3안녕하세요. STRESS IN SEOUL입니다. 이곳에 들어오려면 암호가 필요합니다. 요즘 당신을 힘들게 하는 스트레스를 1분 동안 깊게 생각해주세요. 우리는 거기서부터 시작할 겁니다. 그럼 문을 열고 들어오세요.“나를 괴롭히는 스트레스라... 너무 많은데? “  두근거리는 마음으로 문을 노크했다.똑똑“네, 들어오세요.”작지만 나긋한 여자의 목소리가 들렸다.조심스럽게 문을 열어보니 어두침침했던 복도와는 달리 환한 빛이 쏟아져 들어왔다. 끼이익 소리와 함께 열린 문 안에서는 새파란 청귤 냄새가 났다. 작년에 제주에 갔을 때 귤 농장 옆에 딸려있는 작은 커피숍에 들어갔었는데, 주인아주머니가 손수 담근 것이라며 내어주셨던 청귤차를 떠오르게 하는 상큼한 시트러스 향이었다. 그제야 아침에 일어나서 아무것도 먹지 않았다는 사실이 떠올랐다. 마른침을 꿀꺽 삼키며 입을 열었다. “저기요...”“안녕하세요. STRESS IN SEOUL입니다. “친구가 3시 30분에 예약을 했다고 하더라고요.”“네. 박소연 님으로 예약하셨죠?” “네. 제 친구인데, 좀 늦는다고 해서 저만 먼저 왔어요.”    “네. 기다리고 있었어요. 소파에 편안히 앉으셔서 긴장을 풀고 준비가 되면 앞에 놓인 카드를 열어보세요. 그런데 이상하게도 여자의 목소리는 들리는데, 어디 있는 건지 보이지가 않았고, 내 앞에는 푹신해 보이는 소파와 작은 탁자 하나가 덩그러니 놓여있었다. 한참을 두리번거리면서 오느라 꽤 긴장했던 탓인지 다리에 피로가 몰려와서 일단 소파에 앉았다. 소파는 생각했던 것보다 더 푹신했다. 탁자 위에는 작은 모래시계와 봉투가 하나 놓여있었는데, 아마도 이걸 열어보라는 얘기 같았다. ‘아니 말로 설명해주면 될걸 뭘 또 읽어보래...’ 입으로는 구시렁대면서도 손으로는 봉투를 집어 들고 이미 열어보고 있었다. 불평이 가득해도 시키는 것은 또 곧 잘 해내는 성격이 여기서도 어김없이 발휘되고 있었다. 내 별명이 괜히 투덜이 스머프인 것이 아니다. 봉투 안에는 포스트잇 한 묶음과 함께 쪽지가 한 장 들어있었다.  모래시계를 뒤집고 요즘 당신을 힘들게 하는 스트레스를 1분 동안 깊게 생각한 뒤, 눈앞에 놓여있는 포스트잇에 당신의 스트레스를 적어주세요. 한 장에 한 개씩 적어서, 벽에 붙여주세요. 벽을 가득 채워도 괜찮습니다. - 제한 시간 9분 -포스트잇에는 “What is your stress?”라고 적혀있었고, 모래시계 위에는 ‘3 minute’이라고 적혀있었다. 제한 시간이 10분도 아니고 5분도 아니고 9분이라는 건, 모래시계를 세 번 뒤집으면 나올 수 있는 시간이어서인가? 그럼 차라리 9분짜리 모래시계를 샀으면 한 번만 뒤집으면 됐잖아. 왜? 9분짜리 모래시계는 찾기가 어려운가? 9분이 어때서 3분짜리도 있는데 9분짜리쯤은 있을 법도 한 거 아니야? 별 쓸데없는 걸 다 계산했네 하며 피식 웃음이 났지만, 하라는 것은 안 하고 별 쓸데없는 것에 에너지를 쏟고 있는 건 사실 나였다. 그날도 그랬다. 쓸데없이 호기심이 많은 것이 가장 큰 문제였다. 세심한 관찰력이 숨어있던 호기심에 발동을 걸어버리면 혼자서 납득이 될 때까지 꼬리에 꼬리를 무는 생각이 펼쳐지는 것을 도저히 막을 수가 없었다. 그렇게 핵심을 놓쳐버리는 것이 한두 번이 아니었다. 면접날도 그랬다. 그래. 가만 생각해보니 내가 중요한 날이라고 생각했던 날에는 어김없이 머릿속에서 이런 짓을 벌였다. 면접장 앞에 앉아서 순서를 기다리며 외웠던 내용들을 머릿속으로 되뇌며 덜덜 떨고 있는데, 기둥 옆에 하늘색 체크무늬가 있는 손수건이 떨어져 있는 것을 발견한 것이다. 손수건은 다리미로 4번쯤 접혀있는 것으로 보니 누군가 곱게 다려서 가방에 넣은 것 같은데 무슨 이유에서인지 모르게 바닥에 툭 떨어져 있었다. 요즘 누가 손수건을 갖고 다니지? 여자? 남자? 잔 체크무늬가 반복되는 걸 보면 남자일 가능성도 높다. 손수건을 접힌 모양을 보니 손에 들고 있다가 떨어뜨린 것 같은 느낌도 든다. 누군가에게 전해주려고 들고 있다가 놓친 걸까? 누구? 여자? 어쩌면 그 사람은 감기가 걸렸을지도 모른다. 아니면 땀이 많은 사람일 수도 있겠지.. 그러나 어떤 사람이 주인이었든 간에 그것은 나의 면접의 통과 여부와는 아무런 관련이 없는 일이었다. 면접관이 내게 어떤 질문을 할지 예상문제를 달달 외우고 있어도 모자랄 천금 같은 시간에 나는 왜 그런 쓸데없는 생각을 계속했던 것일까. 그래. 그것은 회피였다. 나는 그저 그 순간을 벗어나서 다른 세상에 가고 싶었던 것이다. 타조가 위험한 상황에서 머리만 묻고 그 상황을 모면하려는 것처럼. 딱 그 불안한 타조가 바로 나였다. 머릿속이 복잡했다. 근데 이 여자는 어디에 있는 걸까? 왜 나와보지 않는 걸까? 궁금한 것들이 투성이었지만, 이미 내 손은 포스트잇을 만지작거리고 있었다. 모래시계를 뒤집고 포스트잇을 한 장 뜯어서 그간 나를 괴롭혀왔던 스트레스들을 떠올려봤다. 생각할수록 어찌나 많은지 내 스트레스만으로도 벽 한쪽을 다 채울 수 있을 것만 같았다. 그래 일단 하나만 써보자. 그동안 내 마음속을 헤집고 있었던 스트레스 하나를 포스트잇에 빠르게 휘갈겨 쓰고는 고개를 들어 벽을 보니 중학교 때나 봤던 것 같던 순서도가 그려져 있었다. 시작 스트레스를 받았는가? YES지금 나를 힘들게 하는 스트레스들을 다 적어보자YES 순서도를 눈으로 따라가 보니 초등학교 앞 떡볶이집 벽에 빼곡하게 붙어있던 포스트잇들처럼 이미 다른 사람들의 스트레스들이 붙어있었다.아... 내가 처음이 아니었구나... 갑자기 스트레스를 적으라니 속내를 들키는 것 같아서 두려웠는데, 생면부지 타인들이 적어놓은 스트레스들을 보니 왠지 모르게 마음이 놓였다. 모래시계를 한 번 더 뒤집고 천천히 남들의 스트레스들을 감상해보기로 했다.소설 STRESS IN SEOUL의 3번째 글입니다. 이 소설은 곧 현실이 됩니다.스트레스컴퍼니는 당신과 나의 스트레스를 해소하기 위해 태어났습니다. 당신이 스트레스에 굴복하지 않고, 즐겁게 극복할 수 있도록 세상에 없던 상품을 만들고 매달 마음을 나누는 모임을 진행합니다. 함께 성장하는 감정 멤버 1기를 모집합니다. 링크를 참조하세요. www.stresscompany.net https://www.facebook.com/stresscompany/ⓒ스트레스컴퍼니 - 무단 전재-재배포 금지

지난 주 트위터의 공식 블로그에 “Designing with constraint: Twitter’s approach to email”이란 글이 올라왔습니다. 글에서 언급하고 있듯이 트위터라고 하면 왠지 이메일과는 거리가 멀 것 같은 느낌이지만, 트위터에서도 이메일은 큰 역할을 하고 있습니다.그렇다면 트위터는 어떤 방식으로 이메일을 디자인 하고 있을까요? 트위터의 이메일 디자인 원칙 3가지를 소개합니다.가볍고 간결하게 (Keep it light, keep it concise)이메일을 확인하는 상황은 사람마다 다릅니다. 어떤 사람은 버스에서 모바일로 확인하기도 하고, 어떤 사람은 사무실에 앉아 확인하기도 합니다.이 모두를 만족시키려면, 이메일의 문구와 콘텐츠를 가능한 짧고, 유용하고 가치있는 것으로 만들어야 합니다. 타이포그래피, 색상, 문단 구조 등을 적절하게 사용하면 중요한 내용을 더 효과적으로 전달할 수 있습니다.문장 표현도 중요합니다. 쉽게 이해되려면 문장 표현이 간단명료해야 합니다. 전문적인 카피라이터의 도움이 있다면 훨씬 쉽겠죠.트위터의 즐겨찾기 알림 메일의 BEFORE(왼쪽)와 AFTER(오른쪽): 문단 구조를 개선하고, 문구를 더 짧게 바꾸고 CTA 버튼을 더 명확하게 바꿨습니다.많은 사람들이 이메일 전체를 읽지 않고 제목, 헤드라인, CTA 버튼만 확인다는 것을 확인한 트위터는 제목, 헤드라인, CTA 버튼 외의 다른 요소를 최소화 했습니다. 트위터가 추구하는 효과적인 이메일 디자인은 이렇게 필요한 요소를 강조하고, 필요하지 않은 요소를 제거하는 것입니다.다양한 사용 환경에 대응하기 (Meet a person where they)수많은 디바이스, 플랫픔, 애플리케이션 환경에 대응해야 합니다. 트위터가 사용자에게 보내는 모든 이메일은, 모든 환경에서 동일한 메시지를 전달할 수 있어야 하기 때문입니다.친구들의 소식을 모아서 보여주는 트위터의 주간 메일은 다양한 디바이스 환경에 대응하도록 디자인되어있습니다.행동 유도하기 (Help a person do something)트위터의 마지막 디자인 원칙은, 사용자를 트위터 서비스로 유입시키기 위해 어떤 의미있는 행동을 유도하는 것입니다.이메일은, 다른 알림 메시지와 마찬가지로, 사용자가 관심있어 할 만한 정보를 빠르게 전달하고, 그와 관련된 행동을 쉽게 할 수 있게 해야 합니다.행동을 유도할 수 없는 메시지는, 보내봤자 의미가 없습니다. 이메일도 마찬가지입니다.원본: Designing with constraint: Twitter’s approach to email#슬로워크 #마케팅 #마케터 #마케팅툴 #인사이트 #꿀팁

인스타그램을 비즈니스 목적으로 운영하는 사람들은 가장 번거로운 부분이 아마 컨텐츠 업로드를 모바일로만 하도록 되어있는 부분일 것이다. 특히 컨텐츠를 피시로 작업하고 (또는 전달받아서) 업로드할때는 그걸 모바일로 전송해서 힘들게 타이핑해서 올리는 일련의 과정이 여간 불편한게 아니다. 보통 이런 문제를 해결하기 위해 시중에는 다양한 데스크탑용 인스타그램 프로그램이 출시되어 있다. 가장 대표적인게 맥용 프로그램인 Flume이다. 해당 프로그램에 대한 소개는 디에디트의 다음 글을 참고하시기 바란다.하지만, 저런 프로그램들 사용하는것 역시 제약이 존재하는데, 잘 디자인된 프로그램들은 대부분 맥북용으로만 출시된다던지, 일정기능 이상 사용을 위해서는 유료로 돈을 지불해야 한다던지, 또는 회사 정책상 비검증된 프로그램을 설치하지 못하는 등의 상황일 것이다.오늘 글에서는 이런 분들을 위해 저런 프로그램들을 설치하지 않더라도 크롬 브라우저만 있으면 그냥 데탑에서도 자유자재로 인스타그램에 포스팅을 할 수 있는 초 간단 팁을 소개하려고 한다. (사파리나 익스에서도 될것 같긴 한데 내가 해본적은 없어서 일단 크롬이라고만 적어놨음)우선 크롬에서 본인 인스타그램을 접속한다.위 그림에서 보다시피 데탑에서는 컨텐츠 올리는 버튼이 아예 보이질 않는다. 걱정하지 말고 마우스 우클릭을 눌러서 아래 보이는 'Inspect'라는 버튼을 클릭한다.그러면 아래 사진과 같이 나같은 문돌이들에게는 아득해 보이는 창이 하나 뜨는데 겁먹지 말자. 이건 개발자들이 페이지 소스 보고 코드 수정해서 표시해보는 등등 개발용도로 사용하는 툴인데 이걸 틀어놓고 있는 것 만으로도 뭔가 내가 멋있어보이는 효과도 있다. 참고로 아래와 같의 개발자툴이 별도의 창으로 뜰수도 있고 하단 또는 우측에 박혀있을수도 있는데 개의치 않아도 된다.자, 이제부터 중요한 내용인데 저기 개발자툴 좌측 상단에 아래와 같은 아이콘이 하나 있다. 'Toggle Device Toolbar'라는 버튼인데 그걸 클릭한다.저걸 누르면 아래와 같이 현재 보이는 창을 다양한 모바일기기 모드로 볼 수 있게 도와준다.자, 저걸 누르면 아래와 같은 마법이 펼쳐진다. 화면에서 보다시피 모바일에서 볼 수 있는 모든 버튼이 들어있다. 특히, 가운데 사진버튼을 통해 데스크탑에서도 컨텐츠를 올릴 수 있게 된다.이 다음부터는 당신이 모바일에서 컨텐츠 올리던 것과 동일한 프로세스이다. 다만 인스타 앱의 필터기능은 아쉽지만 쓸 수가 없다.이렇게 포스팅한 결과를 앱에서도 확인해 보면 제대로 올라가 있음을 알 수 있다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기 

편집자 주Vue 또는 VUE로 혼용하나 공식 사이트의 표기에 맞춰 아래와 같이 통일함-Vue-Vuex-Vue-Router목차1.Controller2.VIEW3.webpack Vue 소스 진입점4.webpack 설정5.Package.json6.Vue-Router7.Vuex8.공통 처리 mixin9.요약10.마치며시작하며드디어 브랜디 관리자 서비스에 Vue를 도입하고자 떠났던 여정의 마지막 장입니다. 브랜디 관리자 서비스는 PHP Codeigniter와 jQuery로 구성되어 있습니다. 사실 잘 운영되고 있는 서비스에 리스크가 큰 신기술을 도입하는 것은 도박에 가깝습니다. 몇 시간만 운영이 정지되어도 회사에 엄청난 피해를 안겨줄 수도 있으니까요. 하지만 여러 번의 검증과 실험으로 도박에서 이길 확률을 100%에 가깝게 끌어올린다면 한번 도전해볼 만하지 않을까요?이전 글인 PHP Codeigniter 환경에서 VUE 사용해보기에서 기본적인 webpack + Vue + Codeigniter 환경 구축 방법을 알아봤는데요. 하지만 단순히 webpack과 Vue만 적용했다고 해서 “우리 시스템은 UI 프레임워크로 Vue를 사용하고 있습니다.”라고 말할 순 없습니다. 아주 중요한 숙제가 남았죠.Vue에는 활용도를 대폭 끌어올려주는 Vue-Router와 Vuex Store1)가 있는데 그중 Vue-Router를 이번 글에서 자세히 다루려고 합니다.2) Vue-Router는 Vue.js의 공식 라우터입니다. 공식 홈페이지의 소개는 아래와 같습니다.중첩된 라우트/뷰 매핑모듈화된, 컴포넌트 기반의 라우터 설정라우터 파라미터, 쿼리, 와일드카드Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과세밀한 내비게이션 컨트롤active CSS 클래스를 자동으로 추가해주는 링크HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백)사용자 정의 가능한 스크롤 동작한마디로 정리하면 입력된 URL에 반응해 부분에 해당 URL의 view를 보여주는 기능인 것입니다. 다시 말해 URL이 변경될 때 한 페이지에서 화면 전체를 갈아끼우거나, 화면의 일부분(부분)을 치환해주는 역할을 한다는 것이죠. 더 나아가 해당 화면이 로드되기 전후로 전처리, 후처리 기능까지 가능합니다.착안점Vue와 Vue-Rotuer를 알게 되었을 땐 PHP 기반 프로젝트에 Vue-Router를 적용할 수 없으니 처음부터 새로 만들어야 한다고 생각했습니다. 로그인 인증 문제, 메뉴의 권한 관리 등 모든 것이 Vue 아래에 있어야 한다고 생각했기 때문입니다.어느 날 관리자 서비스에 TDD를 구현해보려고 Python Flask + webpack + Vue 프로젝트를 구성하고 있었습니다. 그러던 중 우연히 Flask + Vue-Router에서 404 페이지를 처리하려면 Flask Fallback 페이지를 Vue-Router 메인 페이지(가 있는 페이지)로 보내고, Vue-Router에서 진짜 매핑된 URL이 없으면 404 처리를 하는 식으로 구성한다는 글을 읽고 문득 호기심이 생겼습니다.‘관리자 서비스에서도 컨트롤러로 여러 URL을 한 가지 페이지로 보낸다면?’PHP를 거쳐 페이지로 이동한 것이므로 권한 관리와 메뉴 트리까지는 PHP에서 처리되면서 URL이 변할 것이고, 실제로 화면을 보여주는 Contents 영역만 를 사용한다면 어떻게 될지 궁금해졌습니다. 바로 하던 일을 멈추고 관리자 소스에 Vue-Router를 활용한 테스트 소스코드를 작성해봤습니다.예상했던 대로 PHP의 로그인 인증 처리를 거치면서 실제로 보이는 부분에는 부분만 정상적으로 치환되었습니다. 이 간단한 실험을 바탕으로 통계 시스템의 일부를 구현하는 데에 Vue-Router와 Vuex Store, 공통 처리 Mixin을 추가해 제작했습니다.1.Controller4개의 페이지를 가진 통계 시스템의 Codeigniter 컨트롤러 모습입니다. 기존의 서비스 URL들이 존재하기 때문에 Fallback을 통으로 Vue-Router로 보낼 순 없었고, 라우터를 사용할 페이지들을 하나의 페이지로 보냈습니다.1-1) /application/controllers/[컨트롤러 경로]... 생략 /* [라우터 view]에서 태그를 포함하고 있습니다. */ public function salesAnalysisProduct() { $this->load->view('[라우터 view]'); } public function salesAnalysisSeller() { $this->load->view('[라우터 view]'); } public function trendAnalysisProduct() { $this->load->view('[라우터 view]'); } public function trendAnalysisSeller() { $this->load->view('[라우터 view]'); } ... 생략 2.VIEWCodeigniter 환경에 반영하는 것이므로 CI에서 인식시킬 PHP view와 webpack에서 빌드 결과를 자동으로 바인딩할 html 파일로 구성됩니다.2-1)/application/views/[Vue용 view 경로]/index.php// [index.php] Vue 를 매핑할 php파일 컨트롤러의 view로딩용 [라우터 view]입니다. ... header, menu 생략 ... //바인딩될 부분 //자동매핑 html 인클루드 <?php include('index.html'); ?> ... footer 생략 ... 2-2)/application/views/[Vue용 view 경로]/index.html webpack의 빌드 결과로 자동으로 생성되는 파일입니다. [removed][removed] 위는 webpack의 HtmlWebpackPlugin에 의해 자동으로 바인딩된 모습입니다. 빌드되기 전 index.html은 다음 항목에 있습니다.3.webpack Vue 소스 진입점관리자에서는 프로젝트 폴더 안에 webpack과 Vue 용 서브 폴더를 두고 webpack.config.js에서 output 옵션을 통해 빌드 결과를 삽입하는 구조입니다. webpack 루트 폴더는 application 폴더와 같은 레벨에 위치하며, 폴더 구조나 파일 위치는 어디에 둬도 상관없습니다. webpack.config.js에서 entry 속성으로 잡아주시면 됩니다.3-1)/[webpack루트]/index.html// HtmlWebpackPlugin으로 스크립트를 삽입하기 위한 빈 템플릿 파일 3-2)/[webpack루트]/index.js/** * 진입용 index.js */ import Vue from 'vue' import axios from 'axios' import router from './router' import App from './App.vue' Vue.prototype.$http = axios new Vue({ el : '#app', router, components : { App }, template : '' }); 3-3)/[webpack루트]/App.vue [removed] import mixin from './common/common-mixin.js' import store from './vuex/store' export default { store, name : 'App' } [removed] Vuex와 통신 모듈 axios, Vue-Router 등을 루트 Vue 객체에 추가해줍니다. 브랜디 관리자의 webpack은 babel을 사용하고 있기 때문에 위의 store처럼 축약해서 작성하면 빌드된 파일에는 store: store와 같이 입력됩니다.Vue-Router는 태그에 자동으로 매핑되며, 위와 같은 구조로 상위 컴포넌트에서 할당되어 있어야 합니다. Vuex와 Vue-Router 설정은 글 아래에서 다루겠습니다.4.Webpack 설정이번에 Vue-Router와 Vuex를 도입하면서 webpack의 설정도 실제 서비스용과 개발용으로 분리했습니다. 폴더는 편의상 추가하였으며, package.json에서 자신이 설정한 경로로 설정하면 됩니다.Webpack 설정 파일은 Webpack의 시작과 끝이라고도 할 수 있습니다. Webpack 설정 파일에서 빌드할 소스의 경로와 빌드 결과 파일의 명명 규칙을 정하고, html 파일에 스크립트파를 자동으로 주입시키거나, Babel 플러그인을 통해 최신 스크립트 작성법을 브라우저를 신경쓰지 않고 사용할 수도 있습니다.그중에서도 중요한 옵션이 있는데 바로 Code Splitting에 관련된 옵션입니다.관리자 초기 Vue 모델에는 Vue-Router가 없었기 때문에 js 번들 파일의 크기가 그렇게 크지 않았습니다. 하지만 Vue-Router를 사용해 싱글 페이지 어플리케이션이 되거나 화면의 UI가 복잡해 컴포넌트 수가 많아지면 번들 js 파일의 크기가 매우 커집니다. 즉, 캐시를 사용하지 않는 익스플로러라면 소스에서 한 글자만 바뀌더라도 모든 페이지에서 거대한 번들 js를 새로 로딩하게 되고, 상당한 서버 자원을 소모합니다.Code Splitting 적용 전위의 이미지는 Code Splitting을 적용하기 전의 번들 js 정보입니다. 실제로 완성된 Vue 프로젝트의 번들 js는 더욱 큽니다. 정말 단순한 페이지 하나를 띄우는데 매번 뚱뚱한 js를 로딩해야 하는 것은 서비스 제공자와 서비스 사용자를 모두 괴롭게 할 것입니다.Code Splitting 적용 후하지만 위처럼 작은 조각으로 나눠 필요한 시점마다 필요한 번들 js만 로드하면 매우 빠른 페이지를 제작할 수 있습니다. 따라서 Code Split 기능은 매우 중요한 이슈입니다.물론 개발을 진행하다 보면 역시 어느 것 하나 쉽게 넘어가지지 않습니다. 관리자의 웹팩은 4.x 버전대를 사용하고 있습니다. 예전에 TF에서는 Webpakc 3.x 버전대를 사용하였는데 당시에는 CommonChunkPlugin 설정을 통해 Code Splitting을 사용할 수 있었습니다. 그대로 관리자에 적용하려 했는데..Removed라고 쓰여 있습니다. 찾아보니 CommonChunkPlugin이 옵티마이즈 옵션 하위의 splitChunk 속성으로 들어가면서 설정 방법이 바뀌었더군요. 머리를 싸매고 설정을 잡습니다.4-1) /[webpack루트]/build/webpakc.config.js : 공통 설정파일'use strict' const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); const path = require('path'); module.exports = { entry: { //string, object, array 가능 - 기본은 ./src app: path.join('[스크립트 파일 경로]', 'index.js') //진입점 스크립트 파일입니다. }, output: { path: '[빌드된 js 목적지 경로]', publicPath: '[이미지등의 웹상 리소스 경로]', filename: './[name].[chunkhash].js', // 엔트리 파일명명규칙 chunkFilename: '[id]_[chunkhash].js', // chunk파일 명명 규칙 // --mode development에서는 [id]에도 chunkName들어갑니다. }, //vue와 js, css 로드 규칙을 설정합니다. module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', include: [ /[Vue 소스 경로]/ ] }, { test: /\.js$/, use: { loader: 'babel-loader?cacheDirectory', }, include: [ /[Vue 소스 경로]/ ] }, { test: /\.css$/, oneOf: [ { use: [ 'vue-style-loader', 'css-loader' ] } ] } ] }, resolve: { alias: { '@': '[Vue소스 경로]', // 편의상 소스단축경로를 설정합니다. }, //파일 확장자 자동인식 임포트시 해당 확장자는 생략가능합니다. extensions: ['.js', '.vue', '.json'], }, plugins: [ // Vue 파일 로더 new VueLoaderPlugin(), // html 자동 바인딩 // 아래의 플러그인으로 인해 index.html에 해시네임으로 빌드된 index.js가 자동으로 매핑됩니다. new HtmlWebpackPlugin({ // index.php에서 include할 파일이 생성될 경로와 파일명 입니다. filename: path.join('[View경로]', 'index.html'), // 자동으로 매핑할 진입점파일을 지정합니다. template: path.join('[Vue소스 경로]', 'index.html'), inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true } }), ], optimization: { //웹팩 4.x 버전에서 옵티마이즈 속성으로 추가된 CodeSplitting 기능입니다. splitChunks: { //initial - static파일만 분리, async - 동적로딩파일만 분리, all - 모두 분리 chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, //병렬 요청 chunk수 maxInitialRequests: 3, //초기 페이지로드 병렬 요청 chunk수 automaticNameDelimiter: '_', //vendor, default등 prefix 구분문자 (default : '~') name: true, //development모드일때 파일에 청크이름 표시여부 cacheGroups: { default: { minChunks: 2, //2개 이상의 chunk priority: -20, reuseExistingChunk: true //minChunks이상에서 사용할경우 공통사용 }, //axios, vue 같은 공통 모듈은 vendor로 관리합니다. vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } } } }; 4-2) /[webpack루트]/build/webpack.dev.config.js 개발용 설정 파일 (네이밍은 자유)'use strict' const merge = require('webpack-merge') const webpack = require('webpack') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const baseWebpackConfig = require('./webpack.config') const config = require('../config').dev //개발용설정 const devWebpackConfig = merge(baseWebpackConfig, { //mode는 chunk[id], 디버깅 코드 등에 영향을 줍니다. webpack 3.x 버전에서는 Env 속성을 통해 관리했다고 합니다. mode: 'development', plugins: [ new BundleAnalyzerPlugin(), //번들 무게 분석기 제대로 스플릿 되었는지 확인할 때 사용합니다. new webpack.DefinePlugin({ env : config.env }), ], watch: true, //코드의 변화를 감지해 자동으로 재빌드해주는 옵션입니다. cache: true, //캐시 사용을 활성화하면 변경사항이 있는 코드만 재빌드합니다. optimization: { //uglify 플러그인 코드 압축 여부를 설정합니다 압축 시 용량을 매우 줄일 수 있으나 빌드 속도가 크게 저하되므로 개발 시에는 꺼줍니다. minimize: false, } }) module.exports = new Promise((resolve, reject) => { resolve(devWebpackConfig); }) 4-3) /[webpack루트]/build/webpack.prod.config.js 서비스용 설정파일 (네이밍은 자유)'use strict' const merge = require('webpack-merge') // 설정파일 결합에 사용합니다. const webpack = require('webpack') const baseWebpackConfig = require('./webpack.config') //베이스 설정파일 const config = require('../config').prod //서비스용 설정 const prodWebpackConfig = merge(baseWebpackConfig, { mode: 'production', //chunk[id], 디버깅 코드등 영향 있음 plugins: [ new webpack.DefinePlugin({ env : config.env }), ], //개발용과 반대로 용량은 줄이고 필요 없는 기능은 꺼줍니다. watch: false, cache: false, optimization: { minimize: true, } }) module.exports = prodWebpackConfig 5.package.json웹팩 설정 파일이 분리되면서 package.json의 런 스크립트도 변경했습니다.... "scripts": { "build": "webpack --config build/webpack.prod.config.js --progress", "build-dev": "webpack --config build/webpack.dev.config.js --progress" }, ... 6.Vue-RouterVue-Router는 위에서 설명한 대로 Vue의 컴포넌트와 밀접하게 결합된 라우터입니다. 그런데 여기서 webpack의 Code Split을 사용하려면 컴포넌트 import 방법이 매우 중요한데요.import './testComponent' 위처럼 import 구문을 사용해 컴포넌트를 불러오면 코드가 쪼개지지 않고 한 덩어리로 빌드되므로 아래와 같은 형태로 사용해야 합니다.const testComponent = () => import('./testComponent') webpack 공식 문서에도 나와있듯이 위처럼 ES2015 Loader spec에 있는 import()를 사용하여 컴포넌트를 생성해야 번들 js가 제대로 분리되며, Dynamic Import가 가능해집니다.Vue-Router를 쓰는 순간 싱글 페이지 어플리케이션이 되기 때문에 이곳에서 설정을 잘못 잡아주는 순간 육중한 컴포넌트 한 덩어리가 튀어나오면서 Code Splitting은 물거품이 되어버립니다. 조심합시다!또한 import 함수 안쪽엔 아래와 같은 주석을 달아야 청크 이름이 적용됩니다.const testComponent = () => import( /* webpackChunkName: '[청크이름]'*/ './testComponent') 라우터 경로 속성인 path 와 Codeigniter의 컨트롤러 경로를 맞춰주는 것이 포인트입니다!6-1) /[webpack루트]/router/index.js - 경로와 파일명은 자유입니다!import Vue from 'vue' import Router from 'vue-router' // 주석의 webpackChunkName = 코드 스플릿 chunk Name으로 사용됩니다. // 꼭 컴포넌트와 청크 이름을 같게 설정할 필요는 없습니다. const SalesAnalysisProduct = () => import(/* webpackChunkName: "salesAnalysisProduct" */ '[컴포넌트 파일 경로]') const SalesAnalysisSeller = () => import(/* webpackChunkName: "salesAnalysisSeller" */ '[컴포넌트 파일 경로]') const TrendAnalysisProduct = () => import(/* webpackChunkName: "trendAnalysisProduct" */ '[컴포넌트 파일 경로]') const TrendAnalysisSeller = () => import(/* webpackChunkName: "trendAnalysisSeller" */ '[컴포넌트 파일 경로]') Vue.use(Router) const router = new Router({ mode: 'history', routes: [ /* 통계 */ { path: '[CI컨트롤러 url]/salesAnalysisProduct', name: 'salesAnalysisProduct', component: SalesAnalysisProduct }, { path: '[CI컨트롤러 url]/salesAnalysisSeller', name: 'salesAnalysisSeller', component: SalesAnalysisSeller }, { path: '[CI컨트롤러 url]/trendAnalysisProduct', name: 'trendAnalysisProduct', component: TrendAnalysisProduct }, { path: '[CI컨트롤러 url]/trendAnalysisSeller', name: 'trendAnalysisSeller', component: TrendAnalysisSeller }, ] }) // 아래의 함수로 전처리 후처리도 가능합니다! router.beforeEach((to, from, next) => { // ... }) router.afterEach((to, from) => { // ... }) export default router 7.Vuex앞서 Vue와 Vuex, 컴포넌트간 통신과 상태 관리에서 소개했던 상태 관리와 통신을 위한 Vuex도 추가합니다. Vuex는 하나의 Store만 쓸 경우 상태 변수의 과포화로 인해 유지 보수가 어려워질 수 있으므로 namespace: true 옵션을 통해 도메인별로 관리합니다.7-1) /[webpack루트]/vuex/store.js - Vuex 진입파일import Vue from 'vue' import Vuex from 'vuex' // 각 도메인별 store들이 들어있는 modules 를 임포트해줍니다. import * as modules from './modules/index' Vue.use(Vuex) export default new Vuex.Store({ state : { }, getter: { }, mutations : { }, actions : { }, modules : modules.default }) 7-2) /[webpack루트]/vuex/modules/index.js - 도메인별 Store 자동 바인딩 스크립트const files = require.context('.', false, /\.js$/) const modules = {} //자신(index.js)를 제외한 파일들을 파일이름을 Key로 modules에 담습니다. files.keys().forEach((key) => { if (key === './index.js') return modules[key.toLowerCase().replace(/(\.\/|\.js)/g, '')] = files(key).default }) export default modules 7-3) /[webpack루트]/vuex/modules/statistics.js(통계 store 파일) - 예시입니다.export default { namespaced : true, //해당 속성을 통해 파일명을 namespace로 사용합니다. state: { /* 상태값 및 데이터 */ ... }, getters: { }, mutations: { /* state 변경처리 */ ... }, actions: { /* 통신처리 */ ... } } namespace: true로 되어있으므로 파일명인 statistics를 namespace로 사용하게 됩니다. 따라서 store 각 항목에 대한 접근은 다음과 같이 이뤄지며 computed 속성에 state: this.$store.state.statistics 처럼 정의해두면 편리합니다.dispatch는 this.$store.dispatch(‘statistics/[action 이름]’)commit은 this.$store.commit(‘statistics/[mutation 이름]’)state 변수 접근은 this.$store.state.statistics.[state 이름]8.공통 처리 mixinapi 통신에 사용되는 통신 라이브러리와 그 라이브러리의 복잡한 설정 코드, 단순한 Toast 출력 함수, 로딩 이펙트를 보여주는 함수 등 모든 항목들이 매 페이지마다 있으면, 통일되지 못한 UI, 페이지마다 일관되지 못한 설정 등으로 휴먼 에러가 발생할 확률이 높아집니다. 유지 보수 측면에서도 비용이 높아집니다. 이러한 단순 반복 코드들은 한번만 정의하고 재사용하는 것이 바람직합니다. 나중에 수정할 때도 용이하죠.공통사항을 묶어 Vue 전역 믹스인으로 Vue 루트 객체에 추가합시다. 단, global 옵션인 만큼 조심해서 써야 합니다. 시스템에 영향을 줄 것 같으면 하위 컴포넌트 mixins 속성에 넣어 해당 스코프에서만 사용하는 것이 바람직합니다.8-1) /[webpack루트]/common/common-mixin.js (파일이름, 경로는 자유입니다!)import Vue from 'vue' import Vue from 'axios' import Cookies from 'js-cookie' const TIMEOUT = '[타임아웃 시간(ms)]' /* mixin의 기본 형태는 Vue 컴포넌트의 형태와 동일합니다. 주로 전역 통신과 상태 관리는 vuex store에서, 전역 data 속성과 전역 함수는 mixin에서 관리합니다. */ Vue.mixin({ /* 전역 사용 data속성 선언 */ data: () => { return { ... //이곳에 선언하는 data 속성은 전역에서 this로 접근 가능합니다. } }, created: function() { // 공용 axios 객체 생성 this.axios = axios.create({ timeout: TIMEOUT, withCredentials: true, //공통해더는 여기에 headers : { } }); //axios 의 success와 error를 mixin method에서 처리 하도록 등록 this.axios.interceptors.response.use(this.onSuccess, this.onError) }, /* 전역 사용 함수 선언 */ methods: { /* axios의 response handling 함수*/ onSuccess : response => { }, onError : function (error) { }, /*GET, POST 등의 통신 함수, Toast(alert) 표출함수, 에러핸들링함수 등 선언*/ /*... 내용이 너무 길어서 생략 ...*/ } }); 9.요약지금까지의 내용은 파일 경로를 토대로 요약하면 다음과 같습니다. 참고로 아래의 폴더 구조는 절대적인것은 아닙니다. 모든 폴더 구조는 자율이며, 폴더 구조에 맞게 webpack.config.js에서 조정해주면 됩니다.[프로젝트 루트] └ [웹팩 루트] └ package.json └ [Vue 소스 루트] └ [common] └ [router] └ index.js // 라우터 설정파일 - CI 컨트롤러와 url 맞춰줘야함 └ [vuex] └ index.js // 도메인별 store module export 스크립트 └ [modules] └ 도메인별 store.js └ [컴포넌트 폴더] //예시에서는 ststistics └ App.vue //진입점 vue파일 Vuex와 전역 mixin 세팅 └ index.html //index.js가 주입될 껍데기 └ index.js //진입점 js Vue-Router와 App.vue 세팅 └ [build] // 빌드파일경로 └ webpack.config.js //베이스 설정파일 └ webpack.dev.config.js //개발용 설정파일 └ webpack.prod.config.js //서비스용 설정파일 └ [application] //Codeigniter 루트 └ [controllers] └ [컨트롤러 경로] // 예시의 통계부분 └ [views] └ [웹팩빌드 결과 폴더] └ [index.php] // CI 에서 로드하는 view (index.html include) └ [index.html] // js 번들이 자동 주입된 빌드결과 파일 └ [include] └ [scripts] └ [빌드결과 js 경로] //public path 속성 경로 └ 빌드 결과 js chunk들 마치며관리자 서비스에서 완전한 Vue를 사용하기 위해 꽤 험난한 과정을 거쳤습니다. 지금도 잘 돌아가는 서비스에 리스크를 감수하면서도 새로운 것을 도입하려는 이유를 찾아야 했고, 한동안은 레거시와 Vue로 된 소스를 2중으로 개발해야 했습니다.게다가 이 글을 작성하기 시작했을 땐 Code Splitting 설정 방법이 바뀌어 적용하지도 못한 상황이었기 때문에 사실 Code Splitting 내용이 없었습니다. 그런데 글을 작성하면서 splitChunk옵션을 성공해버렸어요! 덕분에 이 글도 모두 수정해야 했죠. Vue의 도입을 고려하는 개발자분들에게 도움이 되길 바라는 마음으로 글을 마칩니다.참고1)Vuex Store는 Vue와 Vuex, 컴포넌트간 통신과 상태 관리에 자세히 정리해두었다.2) 브랜디 관리자 서비스는 jQuery로 작성되어 있다. 따라서 jQuery를 베재할 수만은 없는 상황이었다. 이에 따라 기존 jQuery 컴포넌트들에 대한 해결책은 천보성 팀장님이 작성한 JQuery 프로젝트에 VUE를 점진적으로 도입하기를 참고했다. props와 emit 기능을 이용해 jQuery로 제작한 컴포넌트를 깔끔하게 Wrapping 하는 방법에 대해 자세히 기술되어 있으며, 이를 활용하면 레거시 UI 플러그인을 마치 네이티브 Vue 플러그인처럼 사용할 수 있다.글강원우 과장 | R&D 개발2팀[email protected]브랜디, 오직 예쁜 옷만

업무 상 알고 지내던 분과 차 한잔 하다가나중에 퇴사하면,창업할 거라고 말했다.뭐할 거냐고 묻길래,신나게 우리 아이디어를 주절거렸다.근데 꽤 관심을 가지시더라.그리고 몇 번을 더 미팅하고알아보시겠다고 하더라.그리고 잊고 지냈다.퇴사하고 두 어달 지났을까?그분이 연락을 주었다.혹시 그때 사업 아이템 정리된 거 있냐고.뭐 틈틈이 정리하고 있고,다듬고 있는 터라...미완성이지만 대략적인 초안 정도는 있다고 말했다.그러자 코엑스 근처의 한 호텔에서 보자고 했다.나름 기대하는 마음으로 정장 쫙 빼입고다음 날 미팅 장소에 나갔다.그분은 혼자가 아니라 다른 동행자가 있었다.자신을 무슨 회사의 대표이고,무슨 당의 지역위원장이고,또 어디에 투자도 하고....지금 생각하면,별로 영양가 없는 말의 나열들인데...그때는 뭔가 엄청난 사람을 만났단 착각에 빠졌다.그도 그럴 것이직장생활만 쭈욱 하다 보니,그것도 연구실에 주로 틀어 박혀서외부 미팅은 손꼽을 정도만 했던 나에게사람을 상대하는 것은 너무나 익숙하지 않은 일이었다.그 미팅을 가지고 난 후,이 기회를 잡아야겠단 초조한 마음에곧장 사업계획서를 가지고OO의 모 대학교 교수님과 미팅도 가지고,몇몇 업체들과 접촉하였다.사실 설익은 계획서였고,더 차근차근 준비해야 할 부분이 많았는데....뭐가 씌었는지...이성적인 판단보다조급한 마음이 너무나 컸다.그리고 그 사업계획에 가장 핵심이 되는Raw data와 비용, 장소, 컨소시엄 주체,핵심인력의 정보 등을 의심 없이 전해주었다.그렇게 한 달이 지나고...사업수행이 어렵다는 연락이 왔다.뭐 그럴 수도 있지, 사업이라는 게 그렇지,우리 자체적으로도 이 사업계획에 대하여쉽지 않고,  부족한 게 많다는 걸 인지하고 있었기에...쉽게 인정할 수 있었다.그렇게 또 시간이 흘렀다.사람은 망각의 동물이라 그런지 또 잊고 지내고 있었다.시간의 순서대로 보면,우리 동료들과 중국 허난 성에 상주하며중국 쪽에서 사업을 준비하고 있을 때였다.네이버를 통해 알게 된 한국 소식!우리가 사업 계획하였던 사업에 대한 뉴스였다.OO시에서 XX과 **기관과 컨소시엄으로##의 투자유치로 사업이 시작되었다는....여기서 지역과 컨소시엄 주체, 사업내용 등에 대한모든 내용이 우리의 사업계획서와 정확하게 일치하였다.게다가 그 컨소시엄에는 눈에 익은 분이 계셨다.처음에 우리 팀은 멘붕이었다.그리고 속았다는 생각에 화가 치밀었다.우리 뒤에서 일이 진행되고 있었구나.그것도 모르고 우리는간 쓸개 다 내어줄 것처럼요청하는 자료와 피드백을 몇 날 며칠을 고생하며 제공하였고,이리저리 뛰어다녔는데...순진하게 속았구나.고스란히 빼앗겼구나.우리의 히든카드라고 믿었던 아이템이 그렇게 날아가버리고,우리 팀의 분위기는 절망의 나락에 있었다.그런데...돌이켜보면,사실 그건 우리의 바보 같은 핑계였다.우리에게는사업계획서대로 진행시킬 능력이 없었다.그리고 우리가 아닌 다른 사람들이었기에그 사업이 진행될 수 있었던 것이다.먼저 우리 자신의 처지를 냉정하게 보자면,어느 누구라도 우리랑 같이 하고 싶지 않았을 테다.회사 설립도 안되어 있었고,자본도 없고, 능력을 검증할 수 있는 레퍼런스도 부족하고....단지 사업계획서와 데이터들만 가지고 있는철부지 허당인 퇴사자들이었다.오히려 그분들이 그 사업계획서와 데이터를잘 활용하여 현실 구현하였다고 생각된다.우리였으면, 그렇게 못 했다고.우리가 아니었으니까 잘 된 거라고...이런 마음가짐을 가지기까지....좀 힘든 시간들이 있었지만...그 덕분에 많은 깨달음을 얻었다.1) 우리가 준비 안 되어 있으면, 나서지 말 것!2) 사업계획보다 실행력이 더 중요하다.3) 항상 역지사지! 사람을 만날 때, 역으로 생각해보자4) 우리가 정글에 있고, 우리는 초식동물이라는 사실을 잊지 말자.5) 토끼는 굴을 3~4개 따로 파 놓는다(히든카드와 대안책을 미리 준비해 놓자)6) 배우고, 익히고, 학습하자. 그것만이 우리가 정글에서 살아남는 길이다.어쩌다 그 사업에 대한 소식을 듣는다.그러나 배가 아프거나, 시기하지 않는다.오히려 그런 별 볼 게 없던 사업계획서를멋지게 성공시킨 그분들에 대하여존경심과 감사함을 가지고 있다.우리는 믿는다.우리가 잃은 것은 달랑 계획과 약간의 시간이고우리가 얻은 것은 우리의 현 위치와 약점과 앞으로 어떻게 해야 할지에 대한방향성과 깨달음이었다.그래서 남는 장사였다고.비록 당시에는 쓰지만 약이 되어 지금의 우리가 되었다고 자신할 수 있다.

안녕하세요기업문화가 좋은 야구게임 개발사에이스프로젝트입니다!에이스 추천도서 3탄!이번에는 에이스프로젝트의 금손 아티스트! ‘그래픽팀’편이랍니다.3D부터 원화, UI까지 다양한 그래픽 작업을 하는 그래픽팀.디자이너에게 인사이트를 주는 추천도서가 무엇인지 볼까요?에이스프로젝트 그래픽팀이 추천하는 도서 Best 6!1. 컬러앤 라이트; 리얼리즘을 위한 색과 빛을 그리는 방법 - 제임스 거니[ 이미지 출처 : 예스 24 ]원화 파트 추천도서! 디지털 페인팅의 원리를 설명해주는색채 표현력에 도움이 되는 책2. 3D 게임 비주얼과 연출의 기술 - 오노 코지[ 이미지 출처 : 예스 24 ]연출 추천도서!재미있게 만들어주는 연출의 기술을 알기 쉽게 설명해주는 책3. 열혈 강의 유니티 게임 프로그래밍 - 주세영[ 이미지 출처 : 예스 24 ]테크니컬 아티스트(TA) 추천도서!내가 만든 그래픽 리소스를 직접 게임으로 구현해보고 싶다면 이 책 한 권으로 가능!유니티와 기초 스크립트가 이해하기 쉽게 설명되어 누구나 따라 할 수 있다!4. Creating Stylized Characters - 3dtotal(COR)[ 이미지 출처: amazon ]유럽 감성의 쉽고 재밌는 캐릭터 컨셉 잡기5. 게임 아키텍처 & 디자인 - 앤드류 롤링스, 데이브 모리스[ 이미지 출처 : 예스 24 ]기획자뿐 아니라 개발자 모두가 읽어야 할 필수 고전 도서6. 갓 오브 워 아트북 - 소니 인터랙티브 엔터테인먼트, 산타 모니카 스튜디오[ 이미지 출처 : 예스 24 ]게임은 개별적인 예술의 표현이며 동시에 스토리텔링을 위한 시각적인 요소에 의존하는 매체다양한 분야의 그래픽 작업을 하는 만큼, 책도 정말 다양하네요.대부분은 캐릭터, 원화 스케치 과정이 레퍼런스 위주로 되어있어 참고하기 좋다고 하네요!이상. 그림으로 말하는 그래픽팀의 추천도서였습니다 :)다음은 '개발팀'의 추천도서로 찾아올게요 :)

** 본 글은 문돌이 PM의 마케터 따라하기 시리즈 입니다.** 1화 보기 - 초기에 할만한 ASO (앱스토어 최적화) 팁** 2화 보기 - 초보 PM이 알아야 하는 초기 모바일앱 분석 101** 3화 보기 - 스타트업 브랜딩: 내가 보는 나와 너가 보는 나의 일치** 4화 보기 - 홍보영상 직접 제작해서 수백만원 절약해보자바이럴 루프 (Viral Loop)라는 말을 들어봤는가? 아마도 들어봤을 것이다. 소위 스타트업 한다는 분들은 모두 이 얘기 하고 다니고 있으니까 말이다. 그런데 솔직히 들어는 봤고 그게 내 제품 추천해주는 소비자가 얼마나 많은지랑 관계된 개념정도로 이해하고 있거나, 혹여 정확한 개념을 알고 있어도 이를 실제로 적용해 본 적은 없는 사람이라면 꼭 이 글을 정독하길 바란다. (나도 역시 우리 개발자한테 혼나면서 배우기 전에는 그런 사람들 중 한 명 이었다.)도대체 누가 그린 그림인지는 모르겠으나 바이럴 루프에 대해 아주 명쾌하게 설명한 그림.우선 바이럴 루프의 개념부터 살펴보도록 하자. 바이럴 루프는 Loop라는 단어에서 알 수 있듯이 소비자가 새로운 소비자를 끌고오는 매커니즘이 일종의 선순환 고리가 형성되는 것을 의미한다. 즉, 제품을 사용하는 소비자가 → 다른사람한테 공유하고 (SR - Share Rate) → 이걸 본 새로운 사람들이 → 그걸 클릭해서 내 제품으로 유입되고 (CR - Click Rate) → 이사람들 중 일부가 또 새로운 사람에게 공유를 해서 이게 루프처럼 돌아가게 되면 '바이럴 루프'가 생겼다고 말한다.바이럴 루프 개념에서 가장 중요한 것은 Viral Coefficient (VC)를 계산하는 건데, 계산 방법은 여러가지가 있지만 우리 바크 (Bark) 앱에서 쓰고 있는 방법은 다음과 같다. (% of users who invites × average number of people invites) × % of sent invites accepted뭐 영어로 써 있어서 뭔가 있어보이지만 사실 별거 아니고 크게 2 부분으로 나뉘어 있는건데 [유저가 다른 유저 초대하는 비율] × [초대받은 사람들이 억셉트 하는 컨버젼 비율] 이 두개를 곱해서 VC를 구하는 것이다.  우리는 매일 Viral Coefficient를 측정해서 User Project를 예상하고 현재 달성율과 비교해 본다.위의 표에서 두가지 결과값을 주목해야 하는데 첫번째는 물론 방금 계산한 VC이고, 두번째는 Loop Cycle이다. Loop Cycle (LC)은 기존 유저가 다른 유저를 초대해서 그 유저가 수락할때 까지의 1 사이클이 도는데 걸리는 시간을 의미한다. 바크 앱의 경우 평균 6일이 소요된다. VC는 1보다 커야 유의미한건데 예를들어 바크 VC가 1.18이라는 뜻은 100명의 유저로 시작하면 기존 100명에 바이럴루프로 유입된 118명이 합해져 위의 LC시간이 지나면 유저가 218명이 되어 있는거고, 이게 또 한번 LC시간이 지나면 475명이 되어있고, 계속 1035명, 4918명... 이런식으로 특별한 마케팅 홍보 없이 기존 유저만 가지고도 exponential curve를 그리게 되는 아주 아름다운 현상이 벌어지는 것이다. (물론 실제 현실에서는 저 VC가 1보다 클때도 있고 적을때도 있고 계속 변하기 때문에 저런 아름다운 커브는 초기에는 잘 그려지지 않는다.)언제나 처럼 서론이 길었다. 이 글에서 말하고자 하는 본문은 사실 이 바이럴 루프를 잘 계산해 보자가 아니라, 이런 아름다운 개념을 실제 내 서비스에 어떻게 적용해 볼 수 있을까에 대한 것이다. 내가 운영하는 서비스가 앱서비스이기 때문에 앱 비즈니스 중심으로 이야기가 전개되니까 알아서 본인 상황에 맞게 가감해서 듣길 바란다.1단계 - 유저가 내 앱이 너무 좋아서 알아서 주변사람들에게 공유해 줄거라는 순진한 상상은 버리자나도 초기에 범했던 오류이다. 우리는 제품만 좋다면 순진하게도 사용자가 알아서 "우와 대박, 이거 써봤어?" "나 쓰고있으니까 너도 써봐" "젠장, 이렇게 좋은걸 나만 쓰고 있을 수는 없지" 뭐 이런 생각이 들게 만들 수 있고, 알아서 주변사람들을 다단계 하듯이 내 앱을 다운받게 할 거라고 생각한다. 안타깝지만 이런 마법과 같은 일은 절대로 초기 앱 서비스에서는 발생하지 않는다. 설령 내 유저가 저런 생각을 알아서 들게 할 정도로 제품이 엄청나게 훌륭하다 하더라도 실제로 저 생각을 행동으로 옮기는 이는 아주 극히 드물다고 보면 된다. 즉, 유저가 아무 댓가 없이 본인이 쓰고 있는 앱을 주변 사람에게 추천해 주는 행위의 가격은 엄청나게 비싸다는걸 인정해야 한다.내 앱이 너무 훌륭해서 유저가 알아서 이런 다단계 행위를 해줄거라는 순진한 상상은 버리는게 바이럴 루프 전략 1단계 이다.2단계 - 내 앱에 희소성 오브젝트를 포함시키자초기 앱이 바이럴 루프를 생성시키려면 어떤 형태로든 간에 앱을 사용하는데 있어서 사용자가 어떤 희소성을 느끼게 만드는 희소성 오브젝트를 포함시키는게 아주아주 중요하다. 예를들어 옛날에 대 히트를 쳤던 애니팡은 게임을 내가 원한다고 무한정 할 수 있는게 아니라 '하트'라는 일종의 에너지 같은게 필요했고, 이 하트를 다 쓰고 나면 게임을 할 수 없게 만들었다. 또한 하트는 8분에 1개씩 자동 생성되게 만들어 놨는데 이는 게임을 계속 하기에는 턱없이 부족한 수준이라 사람들이 이놈의 하트를 얻기 위해 주변에 추천을 하거나 아예 돈주고 구매하도록 되어 있었다. 바로 애니팡의 '하트'가 아주 대표적인 희소성 오브젝트이다. 즉, 사용자로 하여금 내 앱을 무한정 사용 가능하게 하는게 아니라 어떤 제한 장치를 걸어서 사용자들이 희소성을 느끼게 만드는 오브젝트인 것이다.애니팡의 저 하트를 얻기 위해 하트 구걸 앱까지 쏟아지는 상황이 벌어질 정도로 애니팡의 하트는 앱 역사상 최고의 희소성 오브젝트였다.바크에도 이런 희소성 오브젝트가 있는데 바로 '바크 에너지'이다. 바크 에너지는 모든 유저가 기본적으로 100씩 가지고 있고, 한번 짖을때 마다 1씩 감소하고, 메시지 바크를 보내게 되면 10씩 감소한다. 물론 1분에 1%씩 자동으로 차게 만들어 놨지만 애니팡과 마찬가지로 바크 헤비 유저들에게는 턱없이 부족한 수준이기에 이게 희소성 오브젝트 역할을 하고 있다.바크에는 '바크에너지'라는게 있어서 사용자가 바크를 짖을때 마다 저 가운데에 보이는 배터리 바가 금방 닳아 없어진다.3단계 - 희소성 오브젝트를 활용해서 추천에 대한 보상으로 제공하기본인의 앱에 희소성 오브젝트를 만들었고, 이게 실제로도 뭔가 유저들에게 희소성을 느끼게끔 하는 오브젝트로 잘 작동하고 있다면 이제 이 오브젝트를 활용해서 유저들에게 추천에 대한 보상으로 제공하는 기작을 만들 차례이다.다시 애니팡 사례로 돌아가보면, 애니팡에서는 모두가 알다시피 저 하트를 구하기 위해 사람들에게 카톡 메시지를 뿌려대야 했고, 그 중 일부가 그 메시지를 보고 애니팡으로 들어오면 내가 하트를 겟할 수 있는 기작이 마련되어 있었다. 즉, 애니팡의 희소성 오브젝트인 '하트'를 유저들에게 추천 행위의 보상으로 제공하는 기작을 처음부터 만들어 놨기에 아주 초기부터 바이럴 루프가 형성될 수 있었던 것이다.이놈의 하트 구걸 카톡이 짜증나서 카카오톡을 지워버린 사람들도 여럿 있었을 정도로 애니팡의 추천제도는 바이럴 루프 전략의 전설이 되었다.바크에서도 역시 추천에 대한 보상 개념으로 희소성 오브젝트인 바크에너지를 다음과 같이 활용하고 있다. 앱 내에 'Invite Friends'라는 친구 추천 버튼이 있는데, 그 버튼을 클릭하게 되면 그 사용자의 ID 넘버가 포함된 앱 다운로드 URL이 자동으로 생성되고 이를 SNS나 주변 사람들에게 뿌린 후에 누군가가 그 URL을 클릭해서 앱을 다운받게 되면 그 유저는 +10 point의 추가 바크에너지를 얻게 된다. 즉, 처음에 Max 바크 에너지가 100이였는데 친구 1명 초대하면 Max가 110이 되는 것이다.바크 앱 내에 있는 친구 초대하기 버튼을 통해 주변 친구를 소환하면 추가 바크에너지 10% point를 얻게 된다.바크 앱은 현재 이 기작을 통해 바이럴루프를 만들려고 노력하는 중이고, (물론 애니팡같은 전설에 비해 먼지같은 수준이기는 하나) 이를 통해 2주만에 무려 70명 넘게 소환한 사람도 있을 정도로 반응이 괜찮은 편이다. 아직 정식 출시한지 한달남짓 밖에 안된 앱이라서 이 바이럴루프 기작은 앱의 성장에 아주 큰 도움이 되고 있다.지금까지 논의한 내용을 총 정리해 보면 다음과 같다.1. 바이럴 루프는 계산하는게 중요한게 아니라 저 루프를 어떻게 만드느냐가 중요하다.2. 내 제품이 좋으면 초기 유저들의 추천 만으로도 Viral Coefficient가 1이 넘을거라는 순진한 상상은 버려야 한다.3. 내 제품에 유저들이 뭔가 희소성을 느끼게끔 만드는 희소성 오브젝트를 반드시 만들어 놔야 한다.4. 희소성 오브젝트를 유저 추천 행위의 보상으로 활용하자.한가지 덧붙이자면 개인적으로 4번, 즉 유저 추천행위의 보상으로 본인 제품에 탑재된 희소성 오브젝트가 아닌 다른 현금성 보상 이벤트로 대신하는건 좋지 못하다고 본다. 왜냐하면 위에서 설명했듯이 Viral Coefficient가 1이 넘지 못하면 아름다운 exponential curve가 생성되지 않는데, 현금성 보상 이벤트를 돈이 넘쳐나서 계속 진행할 수 있는것도 아니고, 설사 그렇다 해도 현금성 이벤트는 금방 내성이 생기기 때문에 결국 VC가 1 밑으로 떨어지게 될 것이기 때문이다. 따라서 바이럴 루프 전략의 핵심은 결국 얼마나 매력적인 희소성 오브젝트를 고안해 내느냐에 달려있다고 해도 과언이 아니다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기

웹서비스에서 나만의 서비스 이용내역과 개인정보를 확인할 수 있는 공간을 ‘마이페이지'라고 하죠. 유저들은 마이페이지를 통해 나의 상태를 체크하며 해당 서비스에 좀 더 애착을 갖기도 합니다. 이번에 코인원 마이페이지도 더욱 더 새로워지면서 애정이 가득해졌다는 유저들의 제보가 속속 들어오고 있어요!오늘은 코인원 마이페이지를 새롭게 탄생시킨 유저플로우셀 예은님, 정유님, 현진님, 종헌님과 함께 마이페이지의 모든 것을 파헤쳐보겠습니다.코인원 유저플로우셀은 트레이딩 영역을 제외한 전반적인 서비스 영역을 담당하고 있습니다. 각 서비스에 대한 유저 경로 동선을 만들고 서비스를 제공하며, 누구나 거래를 하고 싶은 코인원을 만들고 있답니다. :-)Q. 안녕하세요, 유저플로우셀 여러분. 자기소개와 함께 현재 업무를 소개해주세요!예은 : 유저플로우셀에서 서비스 기획자로 일하고 있는 지예은입니다. 저는 코인원 유저들이 겪는 문제상황과 UX트렌드 분석을 통해 기존의 서비스를 개선하고 고도화하고 있어요.정유 : 프로덕트 디자이너로 일하고 있는 이정유입니다. 유저플로우셀은 유저와 거래소를 이어주는 모든 페이지를 담당하고 있어요. 저는 기획자들과 함께 유저의 니즈를 페이지에 UI(User Interface)적으로 어떻게 반영할지 고민하고, 이를 디자인 시스템에 녹여 시각적 일관성을 전달합니다. 현진 : 프론트엔드 개발자로 불철주야 개발 중인 박현진입니다. 프론트엔드는 한마디로 코인원 프로덕트에서 실제로 유저들에게 보여지는 웹화면이에요. 저는 유저들에게 보이는 영역을 책임지며 프로그래밍하고 있습니다.종헌 : 웹 API를 담당하고 있는 백엔드 개발자 김종헌입니다. 프론트엔드가 유저에게 보이는 영역을 담당한다면, 저는 보이지 않는 곳인 백엔드에서 입출금 서비스, 거래기록, 개인정보 등 코인원의 다양한 서비스와 유저를 연결하고 있어요.Q. 이번에 마이페이지 개선이 대대적으로 진행되었습니다. 어떤 계기와 방향성으로 개선하게 되었나요?예은 : 마이페이지 개선은 유저의 고충을 파악하기 위한 코인원 고객센터 인터뷰에서 시작되었습니다. 거래소 이용에 필요한 인증, 계정 보안에 대한 관리가 익숙하지 않은 유저들의 ‘페인 포인트(Pain Point)’를 발견했거든요. 서비스 기획자, 디자이너, 개발자가 함께 모여 UI나 정보로 사용자에게 도움을 주고 CS비용을 최소화 할 수 있는 방법을 고민하기 시작했습니다. 우선, ‘마이페이지'는 코인원 서비스를 이용하는 유저 개개인을 챙겨주는 공간이라고 생각합니다. 이번 개선 과정에서 가장 중점을 둔 부분도 ‘고객을 챙겨주는 마이페이지' 경험을 전달하는 것이었어요. 이렇게 설정된 방향성에 따라 유저들의 상태별로 필요한 상황을 안내하도록 구성했습니다. 한마디로 ‘유저 맞춤형 마이페이지’로 진화한겁니다!▲ 더욱 더 새로워진 코인원 마이페이지정유 : 이전의 마이페이지는 엉켜있는 플로우로 인해, 유저가 어떤 상태인지, 어떤 인증과정을 거치고 있는지 인지하기가 힘들었습니다. 목적을 달성하기 위해 마이페이지에 접속했지만 목적 달성을 끝마칠 수 없었죠. 먼저 흩어져 있는 기능, 정보, 구조들을 그룹핑하며 플로우를 개선하는 작업을 시작했어요. 아이데이션 과정을 거치면서 마이페이지를 ‘내 서랍, 내 방' 등 나만의 정체성을 확인할 수 있는 키워드로 정의했습니다. 그리고 키워드를 확장시켜 ‘나의 데이터'를 한 눈에 관리할 수 있는 대시보드 형태의 디자인을 지향하게 되었어요. 결과적으로 현재 마이페이지에는 나의활동, 개인정보관리, 인증단계 총 3 개의 탭으로 위계를 설정했습니다. :D▲ 코인원 거래소 인증단계가 훨씬 간편해졌습니다!Q. 기술적으로는 어떤 변화가 있었을까요?현진 : 마이페이지를 포함해서 코인원 웹 프로덕트에 기술부채(Technical Debt)가 조금씩 쌓여 있었어요. 이 부분을 덜어내기 위해 마이페이지를 개선하면서 ‘기획/디자인/개발’ 삼박자로 변화를 주는 리빌딩(Re-building)을 진행했습니다. 덕분에 기술적으로 관리 포인트가 많이 줄었어요. 이제는 웹 유지/보수가 좀 더 용이하게 되었답니다.종헌 : 그 동안 코인원 웹은 하나의 비대한 서비스로 운영되었습니다. 하나의 서비스가 덩치가 점점 커지다 보니 개발자가 서비스 로직을 온전히 이해하기 어려웠어요. 웹을 유지하고 보수하거나, 새로운 기능을 추가하는 것도 쉽지 않았습니다. 그래서 하나의 비대한 서비스를 여러 개의 작은 서비스로 나누는 작업인 리빌딩을 진행했어요. 여러 작은 서비스로 분리하고 책임 영역을 나누면서 서비스 로직에 대해 제대로 이해하고 체계적으로 코드를 작성할 수 있게 되었습니다. Q. 마이페이지 개선 전과 후, 달라진 점을 말씀해주세요.예은 : 코인원 마이페이지는 이전보다 유저들에게 더욱 친근하게 다가가고 있습니다. 마이페이지의 콘텐츠가 유저의 상태에 맞춰 변화하며, 유저마다 다음 인증 과정이나 활동 내역을 다르게 안내합니다. 유저가 기능을 먼저 찾지 않아도, 마이페이지가 길을 찾아주는 가이드의 형태를 띄고 있어요.또한 인증단계 별로 수수료나 회원등급이 달라지는데, 유저들이 하나하나 가이드를 보며 찾아볼 수는 없다고 생각해요. 한눈에 자신의 상태를 파악할 수 있도록 UI를 활용하는 것이 중요한 부분이죠. 마이페이지의 개선된 UI로 유저가 코인원의 서비스 정책을 한층 더 깊게 이해하는데 도움이 되었으면 해요.정유 : 유저가 코인원 프로덕트와의 관계성을 인지할 수 있는 디테일들이 추가되었습니다. 가장 대표적인 예시로는 ‘코인원과 함께한 지 000일째 입니다.’라는 문구가 있겠네요. 코인원 유저들에게 ‘챙겨준다'라는 느낌을 전달하기 위해 정말 많은 회의와 아이데이션을 거쳤습니다. 그 과정 중 나왔던 아이디어인데 이번에 반영하게 되었어요. ‘제품’보다는 ‘서비스'로서 느껴질 수 있도록, 대화하는 느낌을 잘 살려주는 포인트이기에 매우 뿌듯했죠.▲ 심...심쿵....!!!!!현진 : 개발자 입장에서 바라봤을 때, 페이지 애니메이션이 가장 좋았어요. 페이지 애니메이션은 웹페이지가 다른 웹페이지로 이동할 때 발생하는 애니메이션을 말합니다. ‘툭' 하고 넘어가는 것이 아니라 ‘sha~(?)’ 하게 넘어가는 느낌이라고 할까요. 페이지와 페이지 사이가 하나의 관계성을 가지고 넘어가게 됩니다. 유저들은 ‘암호화폐 거래소에서 마이페이지에 이런 디테일한 부분까지 신경쓰고 있구나’를 느낄 수 있을거에요. 또한 에러메시지, 경고메시지와 같은 피드백 인터랙션도 정교해졌어요. 사용자와 교감할 수 있는 쪽에 코인원만의 감성이 잘 버무려졌습니다.종헌 : 이전의 코인원 프로필 서비스는 사용빈도가 높지는 않았어요. 그라바타(Gravatar)라는 외부서비스를 사용했는데, 이것을 사용하지 않는 유저들에게 친숙하지 않았거든요. 이제는 코인원에서 프로필 이미지를 정해두고 원하는 이미지로 클릭해서 쉽게 변경할 수 있게 설정했어요. 참고로 프로필 이미지를 설정하는 것이 보안측면에서도 좋습니다. 예를 들어, 은행에서는 프로필 이미지를 설정하면 바로 내가 사용하는 계정인지 아닌지를 알 수 있어요. 코인원에서도 프로필 이미지를 설정하면 내가 가입한 계정인지 아닌지 식별이 가능합니다.▲ 프로필 사진 설정 기능도 많이 이용해주세요 :)Q. 마이페이지의 개선 작업 과정에서 많은 고민이 있으셨을 것 같아요. 가장 중점적으로 생각했던 부분이 있었나요?정유 : 가장 중점이 되었던 부분은 서비스를 이용하는 유저 개개인의 상태를 반영하는거였어요. 유저별로 동일한 정보가 아닌 맞춤형 정보를 제공하기 때문에 한 페이지 안에 들어가는 정보의 위계가 상태값에 따라 계속 변하는 것이 관건이었습니다. 예를 들어, 마이페이지에는 나의 정보를 업데이트하기 위한 많은 버튼들이 들어갑니다. 그럼 유저 케이스별로 중요한 정보를 바꿔보면서 어떤 버튼이 가장 위계가 높은지 고민하고 계산해요. 이러한 과정을 거치면서 유저의 상태값을 쉽게 알려주고 변경할 수 있는 디자인이 완성되었습니다. 예은 : 기존부터 유저 인터뷰를 진행하며 ①신규 유저 ②타사 이용 유저 ③거래소 이용에 문제를 겪고 있는 유저 ④코인원을 오래 이용해준 고마운 유저 케이스까지 다양한 상황에 놓여있는 유저들에게 만족스러운 UX 경험을 드리기 위해 고민해왔습니다. 특히 운영지원셀과 코인원 고객센터 CS로 인입되는 주요 인터뷰들을 중점적으로 수집하여 인증과정에 문제가 되는 것들을 모아서 개선회의를 해왔어요. 이외에 마케팅, 프로덕트쪽도 함께 서비스를 제공하는 공급자 입장에서의 니즈도 취합해 마이페이지에 반영할 수 있었습니다.▲ (절대 설정샷 아니에요) 훈훈하게 회의중인 유저플로우셀!Q. 혹시 개선된 마이페이지를 이용한 코인원 고객들의 후기도 있었나요?예은 : 개선된 마이페이지로 바뀐 지 얼마되지 않아, 유저의 피드백을 직접적으로 접하지는 못했어요. 대신 정량적인 부분에서 여러 수치들이 올라간 것을 확인할 수 있었습니다. 대략적으로 재방문자의 UV(Unique Visitor)수가 개선 전과 대비해서 약 70%정도 크게 증가했습니다. 이전에는 회원가입을 끝마치고 인증과정 중에 페이지를 이탈한 유저도 보였지만, 개선된 후에는 마이페이지 탭 이용빈도가 크게 올라갔습니다. 마이페이지가 좀 더 원활한 거래소 서비스 이용을 위한 가이드 역할을 해주길 기대하면서, 지속적으로 니즈를 관찰하고 개선해 나갈 예정입니다.Q. 마이페이지 이외에도 기억에 남는 유저플로우셀의 프로젝트가 있나요?예은 : 코인원의 수익현황을 한 눈에 볼 수 있는 자산탭이 기억에 남아요. 그 동안 코인원 유저들이 수익률을 확인할 수 있는 기능을 많이 요청했었는데, 팀원들이 함께 고민하여 새로 개편한 기능이라서 그 의미가 컸어요.정유 : 저는 실질적으로 프로젝트에 돌입하기 전에 진행했던 코인원 유저 인터뷰가 가장 기억에 남아요. 인터뷰 내용이 개선점으로 가득찰 줄 알았는데, 응원의 목소리를 전달해주셨거든요. 더 열심히 UI 디자인을 해야겠다는 의욕을 불타오르게 해주었어요!현진 : 코인원 웹프로덕트를 사용하시는 분들이 눈치 채셨는지 모르겠지만, 마이페이지 이전부터 진행해왔던 리빌딩 프로젝트(랜딩, 거래소, 프로차트, 코인원 톡 등)들이 기억에 남아요. 사실 마이페이지 이전 리빌딩 프로젝트들은 기술적으로만 접근하다보니 우여곡절이 많았어요. 그래도 마이페이지 리빌딩은 업무적으로도 많이 배우고, 기술 뿐만 아니라 전체적으로 변화한 것이 보여 저 또한 성장하는 시간이었습니다.종헌 : 이외에도 유저플로우셀은 UX개선을 여러 프로젝트와 함께 진행하고 있습니다. 정신없긴 하지만 개발요소도 새롭고 다이나믹한 것이 많아서 즐겁게 하고 있습니다!▲ 화기애애하게 UI 시안을 보고 있는(?) 유저플로우셀Q. 코인원에서 디자이너 그리고 개발자로 일하는 큰 장점은 무엇인가요?예은 : 코인원에선 셀마다 다른 직무의 인원들이 빠르게 소통하여 의사결정하는 목적조직 형태로 일합니다. 중간중간 기획리뷰, 디자인리뷰 과정을 거치면서 더 꼼꼼하게 일하고, 다른 직무에 계신 분들의 작업도 공유하고 있어요. 거래소에서 일어날 수 있는 다양한 문제 상황을 긴밀하게 대응하고 있죠.정유 : 현재 코인원은 ‘셀(Cell)’이라는 목적조직 형태입니다. PM, 개발자, 디자이너가 한 조직에 속하다보니 Output 나오는 속도가 매우 좋아졌습니다. 또한 여러 직군이 함께 팀웍을 맞추다보니 서비스를 다양한 각도에서 바라볼 수 있고, 이는 디자이너로서 서비스 이해도를 높이는데 굉장히 좋은 환경이라고 생각해요. 종헌 : 코인원은 개발자도 기획 단계부터 적극적으로 참여하여 프로젝트를 설계하고 있습니다. 이로 인해 개발을 하다 예기치 않은 변수가 생기는 일이 거의 발생하지 않아요. 또한 정기적으로 회고를 하며 프로세스의 문제점을 도출해내고, 개선을 위해 다양한 시도를 해볼 수 있다는 것도 장점입니다. 현진 : 현재 코인원 기술본부는 트렌디한 기술을 곳곳에 사용하고 있어요. 기술에 민감하게 반응하는 프론트엔드 개발자분이 코인원에 온다면 기술적으로 매우 만족하실거에요. Q. 앞으로 이루고 싶은 목표는 무엇인가요?예은 : 암호화폐 거래소는 UX를 기획하기에 매우 도전적인 분야입니다. 블록체인 기술이 곳곳에서 화제가 되고 있지만, 아직 업계의 워딩이나 사용에서의 유저 친화적 성숙도가 높지 않은것 같아요. 앞으로의 목표는 누구나 쉽게 거래할 수 있는 암호화폐 거래소를 만드는 것입니다. 점점 더 발전하는 코인원의 모습을 많이 기대해주세요!정유 : 코인원 UI에는 아직 블록체인 공급자적 시선이 많이 담겨있어요. 예를들어, 개발자가 아니면 이해하기 어려운 용어나 UI가 남아있는 부분이 있거든요. 이를 디자인적으로 해소하고 싶습니다. 유저가 갖고 있는 암호화폐 거래 장벽을 낮추고, 코인원의 가치가 잘 반영된 프로덕트를 만드는 것이 목표에요. 종헌 : 코인원에서는 트레이딩 이외에도 여러가지 서비스들을 유저에게 제공하는 다양한 시도를 하고 있어요. 저는 다양한 서비스들을 연결하면서 서비스의 안전장치를 견고하게 쌓아올리고 싶네요. 장애 발생에도 끄떡없는 안정적인 코인원을 유저에게 선보이고 싶습니다.현진 : 대한민국에서 적어도 사용성 1위 암호화폐 거래소를 만들거에요. 유저플로우셀에서 마이페이지 이후에도 많은 프로젝트를 준비하고 있거든요. 매주(?) UX가 점차적으로 개선되는 코인원 거래소의 모습을 확인할 수 있을 거에요. 마지막으로 꼭 하고싶은 말이 있는데, 코인원에 많은 개발자분들이 지원해주셨으면 좋겠어요. 아직 업계에 부정적인 인식이 강하지만, 블록체인이 발전하는 과정을 보며 점차 해소될거라고 믿어요. 기술적으로 발전할 가능성이 무궁무진한 곳이니 기술적인 욕심을 채우고 싶은 분들, 함께 성장하고 싶으신 분들 코인원으로 오세요!▲ 코인원 유저플로우셀 많이 기대해주세요!무엇보다도 긍정적인 에너지로 가득찼던 유저플로우셀의 인터뷰를 들어봤어요.코인원 마이페이지에 큰 변화를 가져온 활기찬 에너지, 다들 느끼셨나요?마이페이지 이후에도 다양한 프로젝트를 준비하고 있는 유저플로우셀. 곧 코인원 웹 거래소를 사용하면서 UX적으로 편리한 사용성을 경험할 수 있을겁니다.끝으로, 특별한 문화를 경험할 기회! 코인원 채용에 함께하는 것도 잊지 마세요 :-)

P2P금융 산업은 세 개의 다리 모두 균형을 이루어야 하는 의자(three-legged stool)와 같다.Three-legged stool, 출처 : Designeros2005년에 설립된 미국 최초의 P2P금융사이자 전세계 P2P 금융산업을 선도하고 있는 프로스퍼(Prosper)의 론 수버(Ron Suber) 회장이 자주 쓰는 비유이다.수버 회장에 따르면 세 개의 다리를 구성하는 요소는 다음과 같다. 1) 대출 수요 2) 투자 수요 3) 기타 : 서비스와 규제1) 첫번째 다리인 대출 수요는 대출 대상에 따라 개인대출, 소상공인을 포함한 법인대출, 그리고 부동산대출로 나눌 수 있다. 이 때 중요한 점은 각 대출의 대상이 모두 상이한 특징을 갖고 있기 때문에 서로 다른 심사 평가 모델과 리스크 관리 기법이 요구된다는 점이다. 금융 산업을 분석할 때 항상 이 세 가지 대상을 기준으로 명확히 분류하는 이유가 여기에 있다. 우리나라의 경우, 개인신용대출에 한정해서 보더라도 중금리 대출 수요는 약 100조원 대에 이른다. 따라서 P2P금융 산업에 있어 대출 수요를 담당하는 다리(leg) 길이가 지속적으로 길어질 것이라는 사실에는 논쟁의 여지가 없다.2) 두번째 다리인 투자 수요는 대출 채권에 투자하는 대상에 따라 개인 투자자와 기관 투자자로 나뉜다. 이전 포스트에서 정리한 바와 같이, P2P금융 산업이 발전하는 과정에서 P2P금융에 투자하는 주요 투자자는 개인에서 기관으로 빠르게 확장되어 왔다. 현재 전세계 P2P금융 시장 투자의 70% 이상이 기관 투자자에 의해 이루어지고 있다. 반면 국내 P2P금융 시장의 경우 기관 투자자의 비중이 아직 3% 정도에 불과하다. 기관 투자자의 경우 P2P 금융사의 실적이 어느 정도 검증되기 전에는 투자를 하지 않기 때문이다. 따라서, P2P금융 산업에 있어 투자 수요를 담당하는 의자의 다리는 대출 수요에 비해 매우 짧은 실정이다. 아직 우리나라에서는 기관 투자자를 설득할 수 있는 데이터 양을 보유한 회사가 극히 드물기 때문이다. 국내에서 P2P금융 산업이 본격적으로 발전하기 시작한 시기는 지난해 초다. 하지만 지난해 하반기부터 폭발적으로 성장하기 시작, 올 말까지 약 4,000억원 규모로 성장할 것으로 예상되는 만큼 국내에서도 기관 투자자의 진입이 곧 본격화 될 것으로 예상된다. 이와 같은 기관 투자자의 투자는 개인 투자자들에게도 긍정적인 영향을 미칠 수 있다. 기관 투자자의 경우 자체적으로 운영하는 리스크 관리(Risk Management) 팀을 통해 매우 세밀한 실사를 통해 투자를 결정하기 때문이다. 채권 분석에 대한 전문성과 정보가 상대적으로 부족한 개인 투자자에 비해 보다 확실하게 우량 채권을 분석하고 검증할 수 있으므로, 이는 개인 투자자의 투자에도 좋은 정보가 될 수 있을 것이다.3) 세번째 다리는 P2P금융 산업에 대한 기타 서비스와 규제다. 우선 서비스란, P2P금융 서비스가 대출과 투자를 연결하는 플랫폼으로서 보다 더 잘 기능하기 위해 개발되어야 요소들을 의미한다. 대출자에 대한 심사 평가 모델, 대출자와 투자자를 위한 가상 계좌, 자동 이체, 전환률 측정 등 다양한 서비스들이 이에 해당한다. 미국과 영국에서는 각각의 서비스에 특화된 써드파티 업체(3rd party ; 외부 업체)들이 속속 등장하기 시작했고, P2P금융 산업이 커져감에 따라 활발한 제휴가 이루어지며 거대한 생태계(ecosystem)가 조성되어 있다. 국내의 경우 산업 태동기인만큼 이러한 써드파티 업체들이 성장해 나갈 여지가 매우 클 것으로 생각한다.세번째 다리에서 빼놓을 수 없는 다른 하나는 바로 P2P금융 산업에 대한 규제다. 금융 산업에 있어 최우선 과제는 투자자 보호와 시장 안전성일 것이다. 따라서 다른 산업에 비해 금융 산업에 대한 규제의 강도가 강한 것은 비단 한국만의 상황은 아니다. 최근 금융위원회 주도로 P2P금융 산업 가이드라인 마련을 위한 태스크포스팀(TF)이 구성되었다. 가이드라인 발표를 위한 논의가 빠르게 진행되고 있어 10월 중 초안을 마련하고 11월에는 가이드라인을 시행한다는 계획이라고 한다. 매우 반가운 사실은 이러한 과정들이 국내 P2P 금융산업의 혁신성을 간과하지 않으면서 시장의 안전성을 견고하게 다져 나가자는 틀 안에서 이루어지고 있다는 점이다. 다양한 써드파티 발전과 규제라는 세번째 다리는 아직 다소 짧기는 하지만 견고하게 성장하고 있음은 분명하다.국내 P2P금융 산업의 현재

안녕하세요~ 정말 오랜만에 다시 돌아왔습니다 ㅎㅎ 오늘은 새로운 소식을 들려드리려고 합니다.  저희 게임베리에서는 1년간 고생한 멤버들을 위해 Refresh mission trip을 보내드리고 있는데요, 지난 1년간 게임베리의 만능 키로써 한 해동안 정말 고생한 박우로(낙성대 박씨 시조)님 (본명 : Paulo Romano Vitor)의 연차여행 임명장 수여식이 열렸습니다.<진지하게 임명장을 낭독중인 대표님과 팔짱끼고 듣고 있는 박우로님> 한국말로 낭독중이라 100% 이해하지는 못하는 박우로님의 모습이 보이네요 ㅋㅋ 이때까지만 해도 이게 뭔가 싶었을 겁니다..;;;<이 감사장이 무슨 의미인지 직접 보고 급격히 밝아진 박우로님, 대표님과 어색하게 사진 한 방>고생한 그대여 떠나라! 뒤는 우리가 책임진다.Gameberry.INC

빅데이터 바람이 국내 강하게 불면서 다양한 툴을 활용한 데이터 수집 능력은 향상되고 있지만, 수집한 데이터로 무엇을, 어떻게 분석해야 할지 고민인 경우가 많습니다.앱분석은 어떻게 해야 할까? 무엇을 분석해야 최적화 하는 거지? 결코 어렵지 않고 누구나 도전할 수 있는 영역이지만, 생소함이 가장 큰 장벽일 것입니다. 이를 돕고자 앱분석 접근방법에 대해 개괄적으로 작성했습니다.앱분석은 크게 3단계로 나눠 볼 수 있습니다.– 사용자를 획득하는 단계인 Marketing (마케팅분석)– 앱 설치 후 인앱에서 다양한 경험을 획득하는 단계인 Experience (사용자경험 분석)– Experience를 바탕으로 최종 목적을 달성하는 단계인 Conversion (성과 분석)Conversion 단계까지 도달하는 데 사용자의 일정량 이탈은 발생할 수밖에 없는데요. 여기서 단계별 최적화를 통해 전환율을 높이는 작업이 앱분석의 핵심이라고 볼 수 있습니다. 특히, Experience, Conversion 전환율이 매우 중요하다고 말씀드릴 수 있는데요. 그 이유는 이 단계를 최적화하면 똑같은 사용자 수를 획득하더라도 별도의 투자비용 없이, 더 많은 전환(성과)을 기대할 수 있기 때문입니다.먼저, 분석의 첫 단계인 MARKETING에 대해 알아보겠습니다. 마케팅 예산이 넉넉하여 다양한 채널을 운영하면 좋겠지만, 대부분 제한적인 예산으로(특히 스타트업 경우) 운영되기 때문에, 마케터는 퍼포먼스가 높은 채널을 도출하여 해당 채널에 대한 집중이 요구됩니다. 그렇기 때문에 MARKETING 단계에서 분석으로 얻고 싶은 인사이트는 최소의 비용으로 최대의 마케팅 효율(ROI)을 내는 광고 채널을 도출하는 것입니다.이 때, 필요한 데이터는 마케팅 채널의 설치 및 활동 데이터, 그리고 이 데이터를 세분화할 사용자 정보입니다.# 마케팅 채널 분석( 위 데이터는 설명을 위해 임의로 만든 데모 데이터 입니다. )1) 단일 지표로 판단하지 말기만약 채널의 효과를 설치수, 방문수 등 하나의 지표로만 판단한다면, 위 데이터에서 가장 효과 좋은 채널은 네이버입니다. 그러나 성과 지표와 함께 보니 네이버는 앱 실행을 유도하는 데는 유효하나 원하는 주문까지의 전환율은 저조함을 알 수 있습니다. 이처럼, 채널을 분석할 때 데이터 없이 해당 채널(매체)의 이용고객 수만 믿고 집행하거나 또는 설치수 등 단일 지표로만 채널의 가치를 판단하는 것은 위험할 수 있기 때문에, 꼭 설치 이후의 행동결과 값에 대한 데이터를 함께 살펴봐야 합니다.2) 파생지표 활용하기파생지표란 두 개 이상의 지표를 연산하여 생성된 지표로 평균 체류시간(총 체류시간/총 방문수), 주문율(주문수/방문수), ROI 등등이 있습니다. 이 파생지표는 효율을 판단하는 데 빠른 이해를 돕습니다. 위 데이터에서 아담의 경우 설치 및 방문이 네이버보다 적어도 설치 후 방문했을 때 주문율은 네이버에 3배가 넘고, 아담으로 설치한 사용자들이 앱에서 지출하는 금액도 2배 이상 높게 나타나 효율이 높은 채널임을 알 수 있습니다.3) 세분화로 원인 파악하기채널의 효율을 파악했다면, 마지막으로 해야 할 작업은 왜 특정 채널에서 긍정적(or 부정적) 결과를 보였는지에 대한 원인 분석입니다. 여기서는 광고를 터치한 사용자의 이해가 필요하기 때문에 사용자 정보로 데이터를 세분화해야 합니다.사용자 데이터는 인구통계학 정보가 될 수도 있고, 디바이스 정보, 행동결과 값 등 다양합니다. 위 예시는 채널을 플랫폼별로 세분화한 예시입니다. 확실히 아담이란 채널은 안드로이드보다 iOS 사용자에게 반응이 좋게 나타나고 있음을 알 수 있습니다.좀 더 알아보기 위해 성별을 조합해서 데이터를 보니, 아담이란 채널은 iOS 스마트폰을 사용하는 여성 유저에게 반응이 높다는 결론을 도출할 수 있습니다. 이러한 결과를 바탕으로 아담 광고의 타겟을 효과가 높았던 대상으로 재설정한다면 전보다 향상된 아담채널의 ROI를 기대할 수 있을 것입니다.이처럼 하나의 채널이라도 각기 다른 유형의 사용자들이 앱에 유입될 수 있고, 그들은 모두 다른 의도와 다른 행동을 지니고 있습니다. 이런 현상을 파악해서 우리에게 적합한 효과적이고 세분화된 마케팅 전략을 수립/실행한다면 그 결과는 정량적 데이터로 충분히 입증할 수 있을 것입니다.[모바일 앱분석] Step2. EXPERIENCE (사용자경험 분석) 에서는 효과적으로 유입시킨 사용자에게 긍정적인 앱 경험을 주기 위한 분석 방법에 대해 살펴보겠습니다. * WISETRACKER는 모바일 광고 성과 측정부터 In-app 이용자/컨텐츠 분석, 푸시메시지 최적화까지 지원하는 모바일 통합 분석/타겟팅 솔루션입니다. 와이즈트래커 솔루션의 무료체험을 원하실 경우 여기를 클릭해주세요.* WISETRACKER가 제공하는 무료 데이터 분석 컨설팅를 원하신다면 여기를 클릭해주세요.#와이즈트래커 #마케팅 #데이터사이언스 #데이터분석 #인사이트 #조언