스토리 홈

인터뷰

피드

뉴스

조회수 2002

한국에서 SaaS 서비스 하기

와탭랩스 는 국내에서 보기드문 B2B SaaS 서비스 기업입니다. 그러다 보니 많은 도움도 받을 수 있었고 좋은 기업들도 많이 만날 수 있었습니다. 하지만 모든 것이 처음이다 보니 많은 실수들과 함께 커온 것도 사실입니다. 아래는 SaaS 기업들에게 꼭 필요한 내용들만 추렸습니다. 건너뛰거나 아직 진행 안한 내용들은 지금이라도 꼭 해보세요.  좋은 고객을 골라내세요. 와탭랩스는 서버 모니터링 서비스를 먼저 시작했습니다. 우리는 스타트업이 자사의 제품을 안정적으로 서비스하기 위해 우리의 제품을 사용할 거라 생각했습니다. 하지만 와탭에게 스타트업들은 생각처럼 좋은 고객은 아니였습니다. 그래서 우리는 서버 모니터링의 주요 고객층을 SMB 중에서 100대정도의 서버를 가진 기업으로 변경해야 했습니다. 우리는 초기에 좋은 제품을 만드는 일에 집중하고 좋은 고객을 찾는 과정을 허술히 생각했습니다만 그것은 큰 오판이였습니다. 우리는 우리가 만든 서비스를 사랑하는 사람들을 찾아 내는 데 최선을 다해야 합니다. 우리가 만든 제품의 가치를 지속적으로 발견해내는 고객들이 누군지 찾아 내야 합니다. 그러기 위해 계속 고객을 정의해 나가야 합니다."고객이 우리의 제품을 사는 것은 고객이 우리가 하는 일을 알아서가 아니라 우리가 고객이 하는 일이 무엇인지 알기 때문입니다." 계속, 끊임없이 고객을 분류하세요. 와탭의 서버 모니터링은 서비스에 가입하고 자사의 서비스에 에이젼트를 설치 한 후에 간단한 무료 모니터링을 시작으로 유료 기능까지 넘어가게 되어 있습니다. 반대로 와탭의 어플리케이션 모니터링은 가입 후 트라이얼 사용 후 유료 사용자로 넘어가게 구조화 되어 있습니다. 단계별 활성화 사용자와 비 활성화 사용자를 구별할 수 있어야 합니다. 단계별로 고객을 분류 할 수 없다면 분류할 수 있는 장치들을 마련해야 합니다.고객을 팬으로 만드세요. TV를 보면 많은 걸그룹과 남성그룹들이 나옵니다. 그리고 열성적이 팬들이 있죠. 그리고 팬들은 자신들만의 공간을 만들어 갑니다. 와탭도 그런 과정을 만들기 위해 노력하고 있습니다. 좋은 컨텐츠를 만들고 세미나를 열고 다양한 IT 행사를 지원합니다. 아직은 많이 어설프지만 와탭의 고객분들이 저희의 팬이 될 수 있도록 노력하고 있습니다. 와탭 사용자 분들은 앞으로 더 기대하셔도 좋습니다.  현재 줄 수 있는 가치로 고객을 유치하세요.항상 세일즈에게 당부드리는 이야기 입니다. 미래에 나올 기능으로 고객을 대하지 마라. 미래에 나올 A라는 기능을 대상으로 고객과 이야기 하면 고객은 A가 나올 때까지 기다립니다. SI 기술 영업인 경우에는 SI를 통해 제공 될 미래의 기능을 파는 것이지만 서비스를 파는 와탭랩스는 현재의 제공되는 서비스로 영업을 해야 합니다. 그렇기 때문에 현재 우리가 가지고 있는 제품이 고객에게 어떤 도움이 되는지 정확하게 이해하고 설명할 수 있어야 합니다. 이것은 와탭이 온라인 상에서 제공하는 마케팅에도 그대로 적용됩니다. 허황된 약속은 Churn Rate만 높일 뿐입니다. 우리가 고객에게 줄수 있는 가치를 정확히 전달해야 합니다. 이메일을 다양하게 사용하세요.와탭은 서비스를 오픈하고 처음에는 메일 서버를 만들어서 가입 인증 메일만 보냈습니다. 사용자가 쌓인 후에는 메일챔프를 사용해서 뉴스레터를 보내기 시작했죠. 이메일을 통해 튜토리얼을 보내거나, 교육 컨텐츠를 보내는 것도 좋은 방법입니다.Transactional Email을 사용하세요. 와탭도 이제 Transactional email을 추가하려고 준비 중에 있습니다. Transactional email은 가입 축하 / 유료 권유 / 패스워드 변경 등 가입 또는 사용 기간 및 상황에 맞쳐 자동으로 보내는 이메일 입니다. 대표적인 서비스로는 맨드릴 이 있습니다. Transactional Email을 사용해서 가입 축하 메일, 에이젼트 설치 튜토리얼 메일, 탈퇴 후 다시 돌아와 달라는 메일 등 다양한 메일을 보낼 수 있습니다.소셜 미디어를 사용하세요.제가 지금 사용하고 있는 브런치도 좋은 소셜 미디어 입니다. 제가 이 글 하나에 얼마나 많은 와탭링크를 남겼을까요? :) 유튜브 채널을 활용하는 것도 좋습니다. 페이스북은 이제 거의 필수죠. 회사마다 블로그도 운영하고 있을 것입니다. 슬라이드쉐어에 회사 관련한 많은 내용들을 올리는 것도 좋으며 큐오라도 적절하게 사용한다면 좋을 것입니다. 생태계를 배척하지 마세요. 와탭랩스는 클라우드협회의 회원사입니다. 클라우드 협외의 많은 분들이 다양한 경험을 바탕으로 국내 클라우드 사업과 SaaS 사업의 발전을 위해 노력하고 있습니다. 혹시 해외 사례와 비교하다보니 지엽적인 한계가 명확히 보일지도 모릅니다. 그럼 같이 들어와서 바꿔가면 됩니다. 와탭랩스가 서비스하는 IT 모니터링은 MSP(Managed Service Provider)와 영업을 전문으로 하는 리셀러사들이 복잡하게 얼켜있는 생태계를 구성하고 있습니다. 와탭은 좋은 솔루션을 제공하는 기업으로써 해당 생태계의 좋은 구성원이 되는 노력을 수년간 진행하고 있습니다. 자신의 생태계를 만들어 가세요. 최근 저희는 제2회 와탭 세미나를 개최했습니다. 이제 막 시작했지만 100명이나 모인 세미나였습니다. 규모를 키우다 보면 컨텐츠도 쌓일 것입니다. 와탭은 백엔드 서비스 기업들을 모인 백엔드클럽도 만들었습니다. 열심히 회원사로 활동도 해야겠지요. (아, 최근 열심히 못했습니다. 죄송합니다. ) 와탭은 성능 분석 전문가들이 모일 수 있는 플랫폼도 만들 계획입니다. 이처럼 직첩 다양한 생태계를 만들어 가는 것도 중요합니다. SaaS 세계에서는 이 모든 것들이 마케팅입니다. 회원 탈퇴를 숨기지 마세요.미국 엘리베이터에 닫음 버튼은 동작하지 않습니다. 장애인의 불편을 해소하고자 닫음 버튼을 막았지만 여전히 닫음 버튼이 엘리베이터에 있는 이유는 심리적 안정감(내가 엘리베이터의 문을 닫을 수 있다는)을 제공하기 위해서 입니다. 그런데 많은 서비스들이 회원 탈퇴를 숨기고 있거나 또는 애써 외면하고 있습니다. 숨긴다는 것보다는 신경을 안씀으로써 자연스레 숨겨지는 결과를 만들어 내는 것에 가까운것 같습니다. 이 또한 가입자에게는 심리적 압박감으로 다가올 수 있습니다. 그리고 사용하지 않는 사용자들만 사이트에 쌓이게 만드는 효과를 내기도 합니다. 차라리 탈퇴를 공개하고 탈퇴 시 이유를 묻는 과정을 넣는 것이 유리합니다. 탈퇴를 하는 이유를 조사하세요.정말 중요한 질문입니다. 왜 탈퇴를 하시는 건가요? 해당 질문은 탈퇴의 마지막 구간에서 집행하는 것이 좋습니다. 와탭랩스는 아직 해당 프로세스를 타고 있지 못합니다. 하지만 결국은 우리도 만들 예정인 프로세스입니다. 아쉽게도 한국은 서베이를 참 안해주는 국가로 알고 있긴 합니다. :)고객과 관계를 맺으세요.와탭은 무료 서비스와 트라이얼 서비스를 제공합니다. 물론 유료화가 최종 목표입니다. 그렇기 때문에 매일 아침 무료 고객과 트라이얼 고객의 서비스 이슈를 분석합니다. 알럿이 너무 많이 나온 고객에게 전화해서 이슈를 확인하고 도움을 드린다거나 설치에 곤란을 겪는 고객에게 전화를 드리고 시연을 진행하는 일들이 있습니다. 물료 유료 고객에게도 마찬가지입니다. 유료 고객에게는 성능 리포트를 무료로 제공해 드리기도 합니다. 신용카드를 통한 자동이체 프로세스를 만드세요. 대부부의 가맹점들이 공식적으로 지원하지 않는 것이 신용카드를 통한 자동이체 프로세스입니다. 특히 한국에서는 어떤 빌링사에서도 공식적으로 지원하고 있지 않습니다. 하지만 SaaS 서비스 기업이라면 꼭 진행하셔야 합니다. 혹 당장 안해준다면 고객을 조금만 모은다음에 다시 연결해 보세요. #와탭랩스 #와탭 #SaaS #인사이트 #운영 #SaaS서비스 #SaaS기업
조회수 963

[모바일 앱분석] Step1. MARKETING (마케팅 분석)

빅데이터 바람이 국내 강하게 불면서 다양한 툴을 활용한 데이터 수집 능력은 향상되고 있지만, 수집한 데이터로 무엇을, 어떻게 분석해야 할지 고민인 경우가 많습니다.앱분석은 어떻게 해야 할까? 무엇을 분석해야 최적화 하는 거지? 결코 어렵지 않고 누구나 도전할 수 있는 영역이지만, 생소함이 가장 큰 장벽일 것입니다. 이를 돕고자 앱분석 접근방법에 대해 개괄적으로 작성했습니다.앱분석은 크게 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가 제공하는 무료 데이터 분석 컨설팅를 원하신다면 여기를 클릭해주세요.#와이즈트래커 #마케팅 #데이터사이언스 #데이터분석 #인사이트 #조언
조회수 1287

정밀의료 = 소프트웨어 산업

정밀 의료는 소프트웨어 산업이다. 개인용 컴퓨터 = 게놈해독기로 본다면, 각종 소프트웨어 = 정밀의료 분석 소프트웨어가 된다.  게놈을 통한 정밀 진단은 그 목적에 맞는 알고리즘, IT 인프라, 컨텐츠, GUI 가 필요하다. 단순히 NGS 장비를 구비해 놓는 것으로 정밀의료가 완성되는 것이 아니고, 사업화 경쟁력이 생기는 것이 아니다. 이미 NGS 실험은 아웃소싱이 매우 낮은 단가. 굳이 NGS 실험의 internalize 를 위해 큰 돈을 들일 필요가 없다.그 노력을 소프트웨어 파워 증진에 투입하는 것이 월등히 현명하다. 제대로 하고 싶다면 남들이 하는 수준으로 서비스 하면 ok 가 아니라, 소프트웨어 혁신을 꾸준히 해 앞서나갈 경쟁을 생각해야 한다. 현재 국내의 player들은 이를 위한 대비를 충실히 잘 해내고 있는가? 그렇지 않아 보인다. 1. 인식 부재정밀의료를 대비하는 기관들의 결정권자/경영진들이 이에 대한 인식이 부족한 경우가 많다. 그럴 수밖에 없는 이유가 게놈 산업은 전통적으로 wet lab 전문가들이 득세한 곳이고 현재 결정권자들의 대부분 역시 web lab 기반으로 성장한 분들이 대부분이기 때문. '직접해보지 않은 일'은 간단하고 쉬워 보인다. 특히나 wet lab work 들에 비해 깔끔하게 해결되고 제품 개발도 완료되는 것 처럼 보이는 소프트웨어는 이런 wet lab 전문가들에게 상대적으로 매우 쉬워 보일 수 있다. 해보지 않은 일은 쉬워 보이고, 쉬워 보이면 '중요하지 않아' 보인다. 자연히 상대적으로 익숙한 wet lab 투자에 총력을 기울이고, 정작 가장 중요한 소프트웨어 투자에는 둔감하다. 개인적으로 국내 major 게놈 기관/회사들의 소프트웨어 수준은 A레벨 2-3명이 모인 스타트업에 비해서도 뒤지는 수준이라고 본다. 2. 인력 수준현재 국내 정밀의료 소프트웨어에 관한 일을 하는 사람들 특히 생명정보학(Bioinformatics) 인력으로 채용되어 일하는 분들의 대다수의 소프트웨어 개발 능력은 매우 낮은 수준에 머물러 있는 경우가 대부분이다. 학교에서 내내 연구를 위한 1회용 프로그래밍만 하다가 졸업 한 후에도 마찬가지로 계속 그런 정도의 일을 하고 있기 때문. 제일 큰 문제는 리더 역할을 하는 사람들의 수준이 이런 정도에 머물러 있는 경우, 소프트웨어를 통한 효율화, 혁신을 '가능한지도 모르기 때문에' 못하고, 계속 인력을 투입해 노가다 형태로 일을 해나가는 경우. 다들 만들어진 소프트웨어를 연결한 pipeline 을 구축하는 것에 급급한데, 정작 자신이 사용하는 소프트웨어들의 근간은 모른다.  BWA 를 쓰지만, 정작 genome alignment 알고리즘에 대한 기본도 모르는 경우가 대부분이고, GAKT 로 base calling 을 하지만, 어떤 방식으로 각 base 들을 scoring 하고 평가하는지 모른다. 기본이 되는 알고리즘을 모르니, 당연히 더 나은 알고리즘을 개발하는 것이 불가능하고, 아니 아예 그럴 시도 자체를 떠올리지도 못한다.  데이터가 내부에 많이 쌓여도 정작 이걸 활용할 insight 가 부족하다. 다양한 머신러닝을 활용해 knolwedge extraction을 해 내지 못한다.  쌓인 데이터로 정밀의료 제품의 sensitivity를 어떻게 높일 수 있을지 개념도 없다. 그저 남들이 쓰는 DB를 가져다 쓰는 것 외에는. 내 생각엔 '리더' 역할을 하는 위치에 제대로된 A 레벨 소프트웨어 능력이 있는 사람들을 배치하는 것이 중요하다고 본다. 리더의 수준이 높으면 팀의 수준이 높아지고, 전체 기관/회사의 수준이 향상될 수 있다. #3billion #운영 #인사이트 #스타트업 #마인드셋 #조언
조회수 2959

iOS 개발을 위한 11가지 노하우

Overview기고 제안을 받자마자 iOS 개발을 시작했을 때가 떠올랐습니다. 신대륙을 마주한 것 같았던 그때의 기분을 아직도 잊지 못하기 때문입니다. 당시까지만 해도 Android 개발만 했기 때문에 iOS는 그야말로 미지의 영역이었습니다. 게다가 개발을 시작하려고 조심스럽게 첫 발을 내딛은 순간, 입이 떡 벌어질 수밖에 없었죠.“이렇게 느린 IDE가 있다니…““개발자 프로그램이 뭐 이렇게 비싸?”XCodeXCode는 그동안 접했던 IDE 중에서도 가장 최악이었고, 개발자 프로그램 등록은 13만 원 상당의 비용을 지불해야 했습니다. 가장 중요한 건 맥 컴퓨터(Macintosh)를 보유해야만 했죠. 처음 개발을 시작하려니 넘어야 할 산이 매우 많았습니다. 맞습니다. 팜므파탈의 대명사 마타하리(Mata Hari)처럼 iOS 개발은 밀당과도 같습니다. 분명 매력적인 일이지만 XCode와 개발자 프로그램 등록은 빙산의 일각이기 때문입니다. iOS는 곳곳에 구덩이를 파고 초보 개발자들을 집어삼킬 준비를 하고있습니다. (예를 들면 리소스를 묶어놓은 R.java 파일 같은 레퍼런스가 없습니다. 흑.)그래서 준비했습니다. 수많은 초보 개발자들이 iOS의 구덩이를 피해갈 수 있는 팁을 말이죠.iOS의 구덩이를 피하는 11가지 방법1.비싼 맥(Macintosh)을 사세요.iOS 개발자에게 MacOS는 필수입니다. XCode가 MacOS만 지원하기 때문입니다. 오픈 소스로 공개된 Swift에는 제약이 없지만 XCode는 MacOS에서만 동작하는 제약이 있습니다. 따라서 맥은 iOS 개발자에게 가장 필요한 준비물입니다. 게다가 하드웨어 리소스를 많이 사용하는 XCode 탓에 더 크고, 더 비싸고, 더 아름다운 맥을 구매하셔야 합니다. Macbook이나 Macbook Air 모두 추천하지 않습니다. 15형 Macbook Pro 모델을 비롯해, Mac Pro나 iMac Pro 등의 고급 모델을 사용하면.. 개발이 잘 됩니다.2.돈을 내세요.iOS를 개발하려면 가장 먼저 Apple Developer Portal에서 연 129,000원의 개발자 프로그램에 등록해야 합니다. XCode를 사용해서 코드만 볼 것이라면 문제가 되지 않지만, 디바이스에 앱을 설치하고, 테스트하며, AppStore에 배포할 거라면 반드시 구매해야 합니다. 이 계정은 앞서 말한 것처럼 1년이 지나면 다시 구매해야 합니다. 만약 기업 개발자로 등록하려면 Enterprise Program이 따로 준비되어 있습니다. 기업을 위해 특화된 In-House 배포 등의 이점이 있습니다. 구매해야할 것이 꽤 많죠? 이제 익숙해져야 합니다.3.XCode를 설치하세요.XCode는 Mac App Store에서 설치할 수 있습니다. 용량이 크기 때문에 설치하기 전에 하드디스크 저장공간부터 확인하는 것이 좋습니다. 처음 실행하면 추가 컴포넌트를 다운로드하는 과정이 실행되고, 그 이후에 XCode를 사용할 수 있습니다. XCode와 관련된 자세한 내용은 아래에서 자세하게 다루겠습니다.4.어려운 것에 대비하세요.1)인증서‘들’XCode 설치 이후에도 몇 가지를 발급 받고, 셋업해야 합니다. 방 탈출 게임처럼 한 단계 한 단계 거치는 과정이 필요합니다. 첫 번째로 인증서‘들’을 발급받아야 합니다. 애플을 대신해 앱을 설치하고, 배포할 수 있는 권한을 위임 받는 과정입니다. 이 인증서들은 Apple Developer Portal의 ‘Certificates, IDS & Profiles’ 항목에서 발급 받을 수 있으며, MacOS의 키체인 앱을 이용해 개인 키를 생성하는 방식으로도 방식으로 발급 받을 수 있습니다. 2)디바이스 등록디바이스-iOS-에 개발한 앱을 설치하려면 애플 개발자 계정에 개발용 디바이스를 등록해야 합니다. 이 과정은 XCode에 신규 디바이스를 연결하고, 빌드 및 배포를 할 때 XCode가 알아서 합니다. 만약 디바이스를 보유하고 있지 않은 상황이라면 해당 디바이스의 UUID를 받아서 개발자 포털에 직접 등록할 수도 있습니다. 3)Bundle IDBundle ID는, 앱의 고유한 ID입니다. iOS가 앱을 식별할 때 사용하는 식별자이며, 보통 ‘com.companyname.appname’ 의 형식으로 회사나 개인의 도메인을 거꾸로 쓰는 것이 보편적입니다. 하지만 Bundle ID는 어디까지나 개발자가 결정하는 영역이므로 인스턴스 이름 지정하듯이 자신만의 고유한 방법을 사용해서 Bundle ID를 지정해도 문제가 없습니다. 4)Provisioning ProfileProvisioning Profile은 디바이스 정보와 앱 정보, 인증서 정보를 매핑해주는 Profile입니다. 최신 XCode에서는 이 Provisioning Profile을 자동으로 관리해주기 때문에 따로 신경쓰지 않아도 좋습니다.5.개발자 포럼에 질문하거나, StackOverflow에 질문하거나!질문하는 사람은 아름답습니다. 궁금하거나, 잘 안 풀리는 코드는 개발자 포럼에서 질문할 수 있습니다. 대신 영어 실력이 좋아야 합니다.크게 기대는 하지 않는 것이 좋습니다. 등록된 discussion에 대한 답글들이 ‘나도 같은 상황이다’, ‘나도 궁금한 점이다’ 등의 다른 개발자들의 답변 정도가 일반적이기 때문이죠.그들의 답변...저는 개발자 포럼보다 StackOverflow를 더 선호합니다. 참여하는 개발자 규모가 다르기 때문에 보다 양질의 정보를 빠르게 찾을 수 있습니다. (하지만 허위 정보도 존재합니다.) Vote 시스템으로 신뢰 높은 정보를 필터링할 수 있으나, 어떤 정보를 선택할지는 당신의 몫입니다.6. iTunesConnect와 친하게 지내세요.앱을 개발했다면, iTunesConnect를 통해 앱을 전 세계의 사용자들에게 배포할 수 있습니다. iTunesConnect는 iOS용으로 개발된 바이너리를 배포하는 등 앱 배포/테스트와 관련된 전반적인 사항들을 관리할 수 있는 포털입니다. AppStore에서 앱을 판매하려면 이 iTunesConnect를 통해 애플과 계약을 해야만 가능합니다. 출시할 앱을 등록하기도 하고, 앱의 사용자들이 어떤 경향을 보이는지 Trend Analysis를 확인할 수도 있습니다.iTunesConnectiTunesConnect에는 다양한 메뉴들이 있고, 앱을 배포하고 관리하는데 필요한 여러 툴이 있으므로 개발 중에 시선을 환기하고자 한다면 iTunesConnect를 한 바퀴 둘러보는 것도 좋습니다. 언젠가는 다 사용하게 될 테니까요.7.앱 개발을 마쳐도 XCode를 사용하세요.앱을 개발하고 iTunesConnect에 업로드하려면, XCode를 통해 간접적으로 바이너리를 업로드하게 됩니다. 서드파티 앱을 사용할 수도 있지만, 제가 주로 많이 사용하는 방식은 XCode입니다. 소스코드가 준비되었다면, XCode 메뉴의 Product > Archive 메뉴를 선택해 XCode가 배포용 앱을 빌드합니다. 빌드가 완료되면, 자동으로 Organizer 창이 열리면서 앱을 업로드할 수 있게 되죠. 이 때 미리 구매한 개발자 계정의 인증서가 준비되어 있어야 합니다. 모든 준비가 완료되고 아카이빙이 완료되면, Organizer의 Archives 탭에서 우측단의 ‘Upload to App Store…’ 버튼으로 바이너리 업로드를 진행할 수 있습니다.8.배포 전에 시험비행을 해봅시다.앱을 개발했다면, 테스트플라이트(TestFlight)를 통해 실제로 앱을 배포하기 전 ‘시험비행’을 할 수 있습니다. iTunesConnect에 관련 테스터들을 등록하고, 등록된 사용자들을 대상으로 미리 앱을 테스트할 수 있도록 요청하는 것이죠. 이 테스트플라이트에 배포된 바이너리를 그대로 AppStore에 배포하게 되므로, 테스트용으로 유용합니다.TestFlight테스트플라이트는 원래 iOS 배포 관리 솔루션을 제공하는 업체였지만 지금은 애플이 인수해 iTunesConnect에서 관리하도록 제공하고 있습니다.9.앱이 죽는다면 Organizer로 확인하세요.iOS는 충돌보고 Crash Report를 Organizer를 통해 오류를 확인합니다. 앱을 설치한 사용자가 동의하면 XCode는 iOS가 앱을 실행하면서 발생한 Crash Report를 애플에 자동으로 업로드합니다. 업로드된 Crash Report들은 XCode의 Organizer를 통해 다운로드하고, 확인할 수 있습니다. Organizer는 XCode > Window > Organizer 항목에서 실행하세요.Organizer와 Crash ReportCrash Report는 Organizer의 상단 Crashes 탭에서 확인이 가능합니다. 또 현재 보고 있는 Crash Report의 어느 부분에서 오류가 발생했는지 알고 싶다면 우측단의 ‘Open in Porject…’ 버튼을 눌러보면 됩니다.10.내 친구 XCode최근 XCode는 메이저 업데이트를 통해 사용성과 퍼포먼스를 향상시켰습니다. 하지만 이만큼 무겁고 느린 통합개발툴 IDE는 이클립스(Eclipse) 이후에 처음입니다. 안드로이드의 경우 IntelliJ 기반의 Android Studio로 쾌적한 개발환경을 제공하고 있는 반면, XCode의 업데이트는 퍼포먼스나 사용성 개선보다는 Swift의 메이저 버전 반영에 더 급급한 느낌입니다. (업데이트 때마다 속지만 ‘혹시 이번에는..’하고 또 속아 넘어갑니다.) XCode 사용을 위한 네 가지 팁을 소개합니다.1)XCode는 모노로그입니다.XCode는 로그를 따로 ‘예쁘게’ 볼 수 없습니다. 검은 화면에 흰 로그가 정리되지 않은 상태로 마구마구 출력됩니다. 개발자들에게는 쥐약같은 상황이죠. 이런 불편한 로그 출력 방식 때문에 저는 별도의 GlobalLogger 모듈을 작성해서 다음과 같은 스타일로 로그를 출력하도록 하고 있습니다.$$ BrandiLogger Error Log ##MESSAGE: Initial Parameter is not exist. ##LOCATION: BRLogPringer.swift @Line: 122 2)iOS개발자를 위한 휴식시간, 빌드 타임XCode의 빌드 타임은 개발자에겐 기나긴 휴식 시간입니다. 소스가 비대해질수록 퍼포먼스는 떨어지며, 담배 한 대를 태우고, 화장실에서 손을 씻고 들어와도 빌드가 절반도 안 된 상황을 마주할 겁니다. 빌드 타임을 줄이고자 구글링을 하면 몇 가지 팁을 발견할 수 있는데, 특히 빌드 타임을 가장 많이 단축할 수 있는 방법이 있습니다.짜잔! 공개합니다!먼저, 프로젝트 셋팅의 ‘Build Settings’ 항목에서 ‘Optimization Level’을 검색합니다. ‘Swift Compiler - Code Generation’ 항목을 찾을 수 있는데요. 여기서 Optimization Level의 Debug 항목을 ‘None’으로 설정하면, 빌드시간이 엄청나게 줄어든 것을 확인할 수 있습니다. Brandi iOS 버전의 소스코드는 원래 컴파일에 7분 이상이 소요되었지만, Optimization Level을 변경한 후 1분 내외로 단축되었습니다. Optimization Setting을 변경할 때는 꼭 Debug 항목만 변경하고, Release 버전은 기존 설정을 유지하는 것이 좋습니다. 그래야 빌드 과정에서의 버그를 막을 수 있기 때문이죠. 만약 이 설정으로 개발하던 도중 소스가 충돌되면 Command+Shift+K 단축키를 눌러 소스를 한 번 클린하고, 재빌드하세요. 충돌이 사라지는 경우가 많습니다. 빠른 빌드를 위해 종종 감수해야 하는 부분이기도 합니다. 3)Derived Data빌드가 자꾸 안되고 꼬일 때는 Derived Data 폴더를 삭제 해 보세요. Derived Data 폴더는 XCode > File > Project Settings(Workspace Settings) 항목에서 ‘Derived Data’ 항목 아래의 폴더 경로에서 접근할 수 있습니다. Derived Data 접근 경로Derived Data 폴더를 삭제하면 거짓말처럼 빌드 오류가 사라지는 기적을 만날 수 있습니다. 4)CocoaPods‘바퀴를 두 번 발명할 필요는 없다’는 격언이 있습니다. 이것을 개발에 적용하면 ‘잘 만들어진 라이브러리를 사용하라’ 정도가 되겠습니다. 개발자의 개발 시간을 현저하게 단축시키는 오픈소스 라이브러리. 이것들을 간편하게 사용하는 방식이 iOS에도 존재하는데, 바로 CocoaPods입니다. 프로젝트 Root 폴더에 Podfile을 생성하고, 원하는 오픈소스 라이브러리들을 명시한 후에 ‘pod install’ 명령어를 입력해주면….CocoaPods오픈소스 라이브러리가 설치되었습니다. 귀찮은 소스 다운로드와 임포트 과정을 거치지 않아도 됩니다. CocoaPods 설치와 사용에 관한 글은 구글링으로 쉽게 찾을 수 있습니다. 꼭 사용하길 권합니다.Mac App Store에서의 XCode 평점XCode는 느리고 불편합니다. 숨겨진 편의기능도 많지만 고질적인 빌드 문제와 사용성 문제를 마주하면 높은 평점을 줄 수가 없습니다. 그런데, 저만 그렇게 생각하진 않더라고요.(위 스크린샷 참조) XCode의 사용법은 기회가 되면 따로 정리하겠습니다.11.어떤 경우에도 대응할 수 있는 화면 구성을 원한다면, AutoLayoutiOS를 사용하면서, 금융권이나 쇼핑 앱들을 사용하다 보면 이런 상황이 발생합니다. 금융권 앱. 화면에 꽉 차지 않는 레이아웃 혹은 비정상적으로 커진 글씨본래 iOS는 단일 디바이스를 지향하는 플랫폼이었습니다. 아이폰 시리즈도 해상도가 변하지 않았기 때문에, 디바이스 종류가 많은 안드로이드처럼 다양한 스크린 사이즈를 지원할 필요가 없었습니다. 하지만 이제는 iPhone SE, iPhone 8, iPhone 8 Plus의 해상도에 iPhone X의 해상도까지 더해지면서 그야말로 ‘해상도 춘추전국시대’가 되었습니다.이런 다양한 해상도를 모두 지원하는 레이아웃을 구성하려면, iOS에서는 AutoLayout을 사용해야 합니다. AutoLayout은 Xib Editor에서 AutoLayout을 활성화하는 방식으로 사용할 수 있습니다. 거기에 한 가지 덧붙이면 Layout Constraints라는 개념도 있습니다. 레이아웃에 조건을 주는 방식입니다. 예를 들어 ‘어떤 해상도에서든 이 컴포넌트는 왼쪽 끝으로부터 10Point의 여백을 가지도록 한다’ 라는 식이죠. AutoLayout, Layout Constraint이 Layout Constraint를 이용하면 짧은 시간 안에 다양한 해상도를 지원하는 레이아웃을 쉽게 만들 수 있습니다. 가히 AutoLayout의 꽃입니다.ConclusionXCode/iOS 개발과 관련된 팁은 대부분 구글링으로 찾을 수 있습니다. 다룰 내용이 많지만 초보 iOS개발자들이 당황할 수 있는 내용을 중심으로 글을 썼습니다. 소소한 이야기지만, 분명 도움을 받을 수 있을 겁니다.글이정환 과장 | R&D 개발1팀[email protected]브랜디, 오직 예쁜 옷만#브랜디 #iOS #개발기 #업무환경 #인사이트 #경험공유 
조회수 1536

QA 끝! ADB 설치부터 사용까지

Overview안드로이드 개발자라면 모두 ADB(Android Debug Bridge)를 사용합니다. 안드로이드 SDK에 포함되어 있는 기능인데요. 쉽게 말하면 에뮬이나 안드로이드 단말과의 연결고리, 도구를 의미합니다. 특히나 QA(Quality Assurance)를 진행할 때 ADB를 사용하면 아주 유용하고, 있어 보입니다. 이번 글에서는 ADB를 잘 모르는 QA직군들을 위해 설치 방법과 간단한 사용법을 공유하려고 합니다. SDK, ADB 설치하기앞서 ADB는 SDK에 포함된 기능이라고 했죠? 우선 여기를 클릭해 SDK를 설치해주세요. 참, 안드로이드는 JAVA가 기본 언어! JAVA도 설치하고 환경 변수도 설정해주세요!SDK를 설치했다면 plalform-tools 폴더 안의 adb.exe파일을 찾아야 합니다. 저의 설치 경로는(C:\Users\brandi_171205_02\android-sdks\platform-tools) 네요.경로를 찾았다면 JAVA 환경 변수 설정하듯 ADB도 환경변수를 설정해야 합니다. ‘내 컴퓨터 마우스 오른쪽 > 속성 클릭’해주세요.고급 시스템 설정 클릭 (개인정보라 지웠습니다.)환경변수 클릭시스템변수 영역 path클릭 > 편집 클릭윈도우10은 앞뒤로 ;를 추가하지 않아도 됩니다. ADB 경로를 추가해주세요. (C:\Users\brandi_171205_02\android-sdks\platform-tools)cmd창을 열고 ADB를 입력하고, 엔터를 눌러주세요.아래와 같이 나오면 성공!잘 따라왔나요? 그 다음은 단말기입니다. 개발자 옵션 > usb디버깅 허용 후 단말을 pc와 연결해주세요. CRM창에서 adb devices 를 입력해주세요. 이 명령어는 에뮬이나 단말 연결을 확인하는 명령어 입니다.ADB 설치를 마쳤습니다. 참 쉽죠? 지금부턴 자주 쓰는 ADB 명령어를 알려드립니다. 한 번 사용해보세요. 한 번 써봤다는 사람은 봤어도, 한 번만 썼다는 사람은 못 봤습니다.자주 쓰는 ADB 명령어단말 재시작QA진행하시면 재시작 많이 하죠? 단말초기화..!adb rebootapk설치 내컴퓨터 > 단말 > 다운로드할 필요가 없어요. 바로 설치!!adb install -r [파일명].apkapk 삭제adb uninstall [패지지명]Android버전 확인adb shell getprop ro.build.version.releaseScreenshotadb shell /system/bin/screencap -p 장치내경로동영상 녹화 QA일하면서 필수입니다. 정말 유용해요.adb shell screenrecord /sdcard/[저장할파일명].mp4텍스트 입력 로그인, 텍스트 입력 테스트 진짜 좋습니다.adb shell input text “[입력할 텍스트]”마치며ADB엔 엄~청나게 많은 명령어가 있습니다. 더 많은 정보를 알고 싶다면 adb help를 입력해보세요. 명령어 도움말이 툭 나올 겁니다. ADB가 있다면 이슈 등록과 이슈 관리 정말 편해집니다. 우선 알려드린 7번까지만 사용해보세요. 당신의 QA가 편안해질 겁니다. 지금까지 브랜디 QA 문지기, 김치영이었습니다.글김치영 대리 | R&D PM팀[email protected]브랜디, 오직 예쁜 옷만#브랜디 #개발자 #개발팀 #인사이트 #경험공유
조회수 1601

현대오일뱅크 선배들의 이야기 - "당당하게 너 자신을 증명하라" 영업본부 LPG팀 조세현

현재 담당하고 있는 업무와 필요한 역량에 대해 소개해 주세요.영업본부 법인사업부문은 LPG팀, 법인영업팀, 특수제품팀으로 구성되어 있습니다. LPG팀은 CDU공정에서 제일 먼저 생산되는 프로판과 부탄을 전국에 있는 충전소 및 직매처에 판매합니다. 법인영업팀은 그룹 계열사, 대형 산업체 및 국가기관을 전담하고, 특수제품팀은 공장에서 생산되는 부산물을 적기에 판매하여 공장 안전가동을 이끌고 중간유분을 상품화해 신규수익을 창출 합니다. 저는 LPG팀에서 고속도로 휴게소 충전소를 담당하고 있습니다. 충전소에 주기적으로 방문하여 국제유가 및 LPG시장 동향, 마케팅 정보 등 충전소 운영에 필요한 정보를 충전소 소장님께 전달하고, 소장님의 요구와 불만을 선제적으로 해결하면서 이익 창출에 기여하고 있습니다. 영업 담당자에게 필요한 역량은 본인이 담당하는 ‘제품과 시장 동향에 대한 이해력’ 그리고 이를 거래처의 니즈에 맞게 잘 전달할 수 있는 ‘커뮤니케이션 능력’입니다. 이를 바탕으로 영업담당자는 담당 거래처에 필요한 정보를 정확하고 신속하게 전달할 수 있습니다. 특히, 커뮤니케이션 능력은 다양한 이해관계자를 상대해야 하는 영업담당자에게 필수적인 역량이라고 생각합니다.입사하기 위해 어떤 준비를 하셨나요?입사 후 어떤 부서에서 어떤 일을 하고 싶은지 확실히 정했습니다. 그 후 제 성격, 경험, 장점을 해당 부서에서 어떻게 활용할 것인지 자기소개서에 녹여냈습니다. 면접을 준비할 때는 현대오일뱅크의 재무제표, Annual Report, 사보, 보도자료, 홍보 영상 등을 찾아보며 현대오일뱅크의 현재 상황과 앞으로의 사업 방향을 파악했고, 제 역량과 비전을 바탕으로 어떻게 회사에 기여할 지 고민했습니다. 또한, 현대오일뱅크 입사를 위해 기울인 제 차별화된 노력과 열정을 면접에서 어떻게 보여드릴 지 생각했습니다. 이렇게 저 자신과 현대오일뱅크를 면밀히 공부하니 자신감을 가지고 면접에 당당하게 임할 수 있었고, 좋은 소식을 들을 수 있었습니다.지원자 여러분, 취업 준비라는 큰 산을 넘는 과정에서 항상 불안하고 때로는 지칠 것입니다. 하지만 여러분은 할 수 있습니다. 현대오일뱅크에 입사하여 어떤 꿈을 펼치고, 어떻게 성장해나갈 것인지 자신감을 가지고 당당하게 제시하십시오. 현대오일뱅크는 여러분을 기다리고 있습니다.#현대 #현대그룹 #현대오일뱅크 #영업본부 #법인사업부문 #LPG팀 #직무정보 #직무소개 #선배들의이야기 #현대오일뱅크공채 #현대오일뱅크채용
조회수 2544

비트윈 PC 버전 개발기 - VCNC Engineering Blog

 지난 10월 20일, 비트윈 PC 버전의 오픈 베타 테스트를 시작했습니다. PC 버전 덕분에 컴퓨터 앞에서 일과 시간을 보내는 직장인들도 편리하게 비트윈으로 연인과 대화할 수 있게 되었습니다. 이 글에서는 PC 버전에 어떤 기술이 사용되었는지 소개하고 약 4개월의 개발 기간 동안 겪은 시행착오를 공유합니다.비트윈 PC 버전 스크린샷개발 플랫폼 선택PC 버전 개발을 본격적으로 시작하기 전에 어떤 개발 플랫폼을 선택할 것인지 많은 고민을 했습니다. MFC나 WinForms 같은 네이티브 플랫폼, Qt 등의 크로스 플랫폼 라이브러리, 그리고 웹 기반 앱 등의 여러 후보를 가지고 토론을 거쳐 웹 앱으로 개발하기로 했습니다.웹 기반으로 개발하게 된 가장 큰 이유는 생산성입니다. PC 버전 팀이 웹 기술에는 이미 익숙하지만 다른 플랫폼은 경험이 많지 않았습니다. 또한, 비교적 자유롭게 UI를 구성할 수 있으며 기존의 각종 개발 도구를 이용하면 빠른 이터레이션이 가능할 것으로 예상했습니다.단, 사용자가 기존에 설치한 웹 브라우저를 통해 접속하는 방식이 아니라 브라우저 엔진을 내장한 실행 파일을 배포하는 방식을 택하기로 했습니다. 여러 브라우저 환경에 대응하지 않아도 되고, 브라우저에서 지원하지 않는 일부 시스템 기능을 직접 확장해서 사용할 수 있기 때문입니다.서버 아키텍처의 변화비트윈 서버의 서비스 로직은 Thrift 서비스로 구현되어 있습니다. 그리고 Alfred라는 자체 개발 라이브러리를 사용하여 Thrift 서비스를 Netty 기반의 서버로 구동합니다.기존의 비트윈 모바일 클라이언트는 채팅 서버와 Thrift의 바이너리 프로토콜로 통신하고 있습니다.1 그러나 웹 플랫폼에서는 서버와 지속적으로 양방향 연결을 유지하려면 WebSocket 프로토콜을 사용해야 하므로 Alfred에 WebSocket 프로토콜 지원을 추가하였습니다. 애플리케이션이 아닌 라이브러리 수준의 변화였기 때문에 기존 서비스 코드에 영향을 거의 주지 않고 새로운 프로토콜을 지원할 수 있었습니다.Alfred에 웹소켓 지원을 추가하였습니다.비트윈 PC 버전 셸비트윈 PC 버전은 크게 HTML과 자바스크립트로 작성된 웹 앱 부분과 웹 앱을 브라우저 엔진으로 구동해주고 플랫폼 API를 제공하는 셸 (Shell) 부분으로 구성되어 있습니다.비트윈 PC 버전 구조PC 버전 셸은 Chromium Embedded Framework (CEF)를 사용합니다. 이름에서도 알 수 있듯이 Chromium 브라우저 엔진을 애플리케이션에 내장하기 쉽도록 감싸놓은 라이브러리입니다. CEF는 Evernote나 Steam 등 웹 브라우저를 내장한 애플리케이션에서 널리 사용되고 있어 선택하게 되었습니다.2자바스크립트에서 셸이 제공하는 플랫폼 API를 호출할 때는 CEF의 Message Router를 사용하였습니다. Chromium은 멀티 프로세스 구조로 이루어져 있어, 렌더 프로세스에서 작동하는 자바스크립트 코드가 브라우저 프로세스에서 작동하는 C++ 코드를 호출하고 결과를 돌려받기 위해서는 별도의 처리가 필요합니다. Message Router는 이 두 프로세스 사이의 비동기 통신을 지원합니다. 이를 통해 창 투명도 조절이나 트레이 알림 표시 등 원래는 웹 플랫폼에서 지원하지 않는 기능을 확장하여 지원할 수 있었습니다.CEF에서는 Chrome 개발자 도구를 사용할 수 있어 디버깅이 용이했고, 디자이너 옆에서 바로바로 좌표나 색상 등을 바꿔볼 수 있어 협업에도 도움이 되었습니다.그러나 PC 버전을 개발하면서 가장 많은 시행착오를 겪은 부분이 CEF를 다루는 것이었습니다.문서화가 잘 되어있지 않습니다. 그래서 실제 작동 방식을 확인하기 위해 직접 소스 코드를 읽어야 하는 경우가 많았습니다일반적인 웹 브라우저에서는 잘 작동하는 API를 CEF가 자원하지 않거나 버그가 있어 다른 방식으로 구현해야 할 때가 있습니다.CEF에 노출된 API에만 접근할 수 있어 Chromium에서 제공하는 플랫폼 추상화 레이어를 활용할 수 없었습니다.비트윈 PC 버전 웹 앱비트윈 PC 버전의 주요 애플리케이션 코드는 HTML과 자바스크립트로 작성되어 있습니다. 자바스크립트로 큰 규모의 애플리케이션을 작성할 때 발생하는 여러 가지 어려움을 피하고자 React 라이브러리 및 최신 자바스크립트 기술을 적극적으로 활용하였습니다.ReactReact는 Facebook에서 개발한 오픈 소스 자바스크립트 UI 라이브러리입니다. 일반적인 웹사이트보다는 비교적 복잡한 인터페이스를 구현해야 했기 때문에 jQuery처럼 간단한 라이브러리로는 부족할 것으로 생각하여 비트윈 PC 버전은 처음부터 React를 사용하였습니다.전통적인 개발 방식에서는 UI를 변경해야 할 때 기존에 렌더링 된 DOM 요소에 명령을 내립니다. 예를 들어 어떤 항목을 삭제하려면 그 요소를 찾아서 삭제 명령을 내리게 됩니다. React를 사용할 때는 이와 달리 해당 요소가 사라진 DOM 트리 전체를 다시 생성하면 React가 이전 트리와 새 트리를 비교하여 바뀐 부분만 반영해줍니다. 전체를 다시 렌더링하기 때문에 기존에 DOM 트리가 어떤 상태였는지 신경 쓰지 않고도 원하는 상태로 쉽게 변경할 수 있어 UI 코드의 복잡도를 줄일 수 있습니다.또한, React의 컴포넌트 시스템은 독립적인 UI 요소들을 서로 영향을 주지 않고 조합할 수 있도록 해주어, 한가지 컴포넌트를 수정했을 때 의도하지 않은 다른 컴포넌트와 간섭하는 문제가 적게 발생합니다. 비트윈 PC 버전에는 약 40가지의 React 컴포넌트가 쓰이고 있습니다.자바스크립트 모듈 시스템모든 코드를 한 파일에 넣으면 코드를 관리하기가 힘들어집니다. 따라서 서로 관련 있는 코드끼리 모듈로 나누어야 하는데, 자바스크립트에는 모듈 시스템이 기본적으로는 제공되지 않습니다. 비트윈 PC 버전에서는 CommonJS 표준을 따라서 모듈을 나누고, 이를 웹 브라우저가 해석할 수 있는 형태로 합쳐주는 Webpack 빌드 툴을 사용했습니다.Webpack은 자바스크립트뿐만 아니라 CSS나 이미지, JSON 파일 등도 모듈로 취급할 수 있고, 플러그인으로 지원하는 모듈 종류를 추가할 수 있습니다. 비트윈 PC 버전을 빌드할 때 실제로 사용하는 플러그인은 다음과 같은 것들이 있습니다.jsx-loader: React에서 사용하는 JSX 코드를 자바스크립트로 변환합니다. 또한, 미래의 자바스크립트 문법을 현재 브라우저에서 지원하는 형태로 변환합니다.less-loader: LESS 파일을 CSS 파일로 변환합니다.css-loader: CSS에서 참조하는 외부 리소스를 인식하여 의존성을 파악해줍니다.url-loader: 파일 크기가 일정 이하인 리소스를 Base64 인코딩으로 내장해줍니다.ECMAScript 6ECMAScript 6는 차기 자바스크립트 표준입니다. 현재 자바스크립트의 불편한 점을 많이 해소하기 때문에 장점이 많이 있습니다. 일부 기능은 이미 브라우저에 구현되어 있지만, 아직 지원되지 않는 기능도 있어서 jstransform을 통해 ECMAScript 5 코드로 변환하여 사용하였습니다.화살표 함수: 익명 함수를 (a, b) => a + b와 같은 문법으로 훨씬 간단하게 선언할 수 있습니다. 또한, this 변수의 스코프를 현재 코드 상의 위치에 따라 결정해줍니다.클래스: 다른 언어와 유사한 클래스 문법을 제공합니다. 상속이나 접근 제한도 가능합니다.해체(destructuring) 대입: 객체의 필드를 바로 같은 이름의 변수에 대입할 수 있습니다. 예를 들어, var {a, b} = {a: 1, b: 2}; 같은 코드를 작성할 수 있습니다.기타 사용된 패키지RSVP.js: Promise/A+ 구현을 제공하는 라이브러리로, Promise 패턴을 사용하여 비동기 로직을 알아보기 쉬운 형태로 작성했습니다.FormatJS: 다국어, 국제화 지원을 위한 라이브러리입니다. UI 메시지 번역이나 날짜, 시간 등의 포매팅에 사용했습니다.정리비트윈 PC 버전은 개발 비용을 줄이기 위해 웹 플랫폼 기반의 네이티브 애플리케이션으로 개발되었습니다.비트윈 서버에서 사용하는 Alfred 라이브러리에 WebSocket 프로토콜 지원을 추가하였습니다.Chromium Embedded Framework를 브라우저 엔진으로 사용하여 웹 앱을 구동하고 웹 플랫폼에서 제공하지 않는 기능을 확장하여 사용했습니다.자바스크립트 코드의 복잡도를 줄이기 위해 React, CommonJS, ECMAScript 6 등의 기술을 활용하였습니다.VCNC Engineering Blog, 비트윈 시스템 아키텍처, 2013년 4월↩Wikipedia, Chromium Embedded Framework - Applications using CEF↩
조회수 1047

AR Interview, 베이비박스 프로젝트 김윤지

루트임팩트에서 걸어서 1분거리, 베이비박스 프로젝트 사무실에서준비하고 있는 일에 대해 필드 리서치를 하기 위해 작년에 3개월 정도 미국에 다녀왔어요. 실리콘 밸리의 한 커뮤니티 하우스에 묵게 되었는데, 방에 이층 침대만 몇 개 놓여져 있는, 시설만 보면 특별한 것이 없는 곳이었는데도, 매일 저녁마다 전세계에서 모인 사람들과 각자 하는 일에 대해 듣고 얘기하느라 시간가는 줄 몰랐어요. 얼마 후 디웰 살롱에서 진행하는 1%살롱 프로그램을 접하게 되었습니다. 평소 만나 뵙고 싶었던 명성진 목사님과 이수인 대표님의 토크쇼가 있다는 얘기를 듣고 바로 디웰 프렌즈에 가입했죠.베이비박스가 우리 사회의 많은 이슈와 관련된 광범위한 사안인 만큼, 사회구성원들과 함께 문제를 해결하는 오픈플랫폼을 구상하고 있었어요. 디웰 프렌즈를 통해서 이 문제에 대해 같이 고민하는 사람들, 본인이 가진 재능과 역량을 더해서 함께 문제를 해결하고자 하는 사람들을 만날 수 있었습니다. 첫 토토디* 자리에서, 당시 디웰살롱 매니저셨던 허지용 님이 다른 디웰 프렌즈분들께 베이비박스 프로젝트를 소개할 기회를 자연스럽게 만들어 주셨어요. 연이어 다음 달 토토디에서 정식으로 프레젠테이션을 할 기회가 생겼고, 다른 프렌즈들에게도 프로젝트를 소개하면서 많은 피드백과 조언을 얻었습니다. 가오픈 상태의 웹사이트만 보시고도 함께 하고 싶다고 연락주신 프렌즈 분들 덕분에 정말 큰 힘이 되었죠. 박연경 매니저님은 베이비박스 프로젝트를 소개할 다양한 기회를 연결해주셨습니다. 덕분에 연달아 사이드디쉬**에서도 발표할 기회가 주어졌구요. 박연경 매니저님은 프렌즈가 추진하는 프로젝트의 가능성을 믿고, 적절한 기회를 연결함으로써 탁월하게 밀고 끌어주셨어요. 디자이너인 제 파트너와 둘이서 프로젝트를 진행하다가, 디웰 덕에 더 넓은 세상으로 나오게 되었어요. 특히 사이드디쉬를 통해 만난 에너지 넘치고 소셜 이슈에 관심이 많은 엔지니어가 코어팀에 합류하게 되어, 프로젝트가 한층 탄력을 받게 되었습니다. 이후 11월에 디웰 프렌즈와 루트임팩트 멤버들을 모시고 소규모 비공개 라운드 테이블을 가졌고, 프로젝트 추진방향을 더 구체적으로 가다듬을 수 있었습니다. (*토토디: '토요일 토요일은 디웰'의 준말로, 매달 첫 째 주 토요일에 신입 멤버 오리엔테이션과 함께 진행되는 디웰프렌즈만의 네트워킹 파티다.**사이드디쉬: 본업이 아닌 사이드 프로젝트를 응원하기 위한 모임으로, 1회 당 3팀의 발표로 구성된다.) 베이비박스 프로젝트에 대해 설명하는 김대표회사 생활을 하면서 두 가지 느낀 점이 있었습니다. 첫째, 제 재능과 서비스를 진정으로 필요로 하는 사람은 따로 있다는 것이었고, 둘째, 제가 하는 일이 현장에서 어떤 임팩트를 만드는지 측정하기도, 보기도 어렵다는 것이었습니다. 그래서 ‘커뮤니케이션과 디자인을 통해서 사회문제를 직접 해결하자’라는 라이프 미션이 생겼습니다. 그러던 중 2013년경 뉴스 보도를 통해 베이비박스에 대해 알게 되었어요.  첫 몇 년은 베이비박스*** 아기들을 돌보는 봉사로 시작했는데, 해 마다 나오는 기사가 항상 같았어요. 베이비박스가 영아 유기를 조장하기 때문에 없어져야한다는 정부의 입장과 하나의 생명이라도 살리기 위해 베이비박스가 있어야한다는 교회의 입장. 베이비박스가 만들어진지 6년이 됐는데, 근본적으로 해결되는 것은 없고 같은 논쟁만 계속된다는 생각이 들자, 뭔가 해야겠다는 생각이 들었어요. (***베이비박스:  베이비박스는 부득이한 사정으로 아이를 키울 수 없게 된 부모가 아이를 두고 갈 수 있도록 마련된 상자로, 우리나라에는 주사랑공동체와 새가나안교회 두 곳에 설치되어 있다. 2009년 12월 처음 설치된 이후로, 2015년까지 800명이 넘는 아기가 베이비박스에 들어왔다.)베이비박스 (출처: 다정다감 변현준 정책기자) 첫째, 아기들은 백지로 세상에 태어나 앞으로 채워나갈 공백이 많기 때문에, 사회에 미칠 수 있는 영향력이 큰 존재라고 생각해요. 그 아기들에게 좋은 영향을 주면 사회구성원으로서 그 파장이 얼마나 클까라는 생각이 들었습니다. 둘째, 베이비박스는 입양, 미혼모, 장애, 빈곤과 같은 사회문제들이 복합적으로 얽혀있는 사안이기 때문에 이를 종합적이고 근본적으로 해결하는 것은 사회적인 파급력이 큰, 정말 가치있는 일입니다. 보스톤 글로브 2015년 5월 기사에 따르면, 한국의 입양은 우리 사회가 시대별로 배척하는 사회 이슈를 상징한다고 해요. 6.25 직후에는 혼혈아들, 이후엔 가난한 아이들, 지금은 장애 아이들을 해외로 입양 보낸다고 합니다. 베이비박스에 아기를 두는 부모들은 다양한 환경과 상황에서 베이비박스를 선택하는데, 이것만 분석해도 우리사회가 배척하고 소외시키는 문제들의 단면을 한 눈에 볼 수 있죠.  셋째, 지금까지 나와있는 해결책은 주로 아기가 베이비박스에 들어온 후의 상황 개선에 초점이 맞추어져 있어요. 물론 그 시도들도 의미가 있지만, 근본적인 문제해결을 위해서는 왜 베이비박스에 아기가 들어오는지에 대한 체계적이고 종합적인 접근이 필요하다고 생각합니다. 현재는 정확히 어떤 문제를 해결해야 하는지를 정의하기 위한 리서치 단계입니다. 베이비박스 아기들의 다양한 사례를 통해 가설을 세우고, 인터뷰, 미디어 분석 등을 통해 다각도에서 접근하고 있어요. 이 리서치 진행 과정을 커뮤니티와 새로운 방법으로 나누고자 해요. 그 첫 시도로, 오는 4월 30일 베이비박스 사안에 대해 브레인스토밍하는 커뮤니티 이벤트가 디웰 살롱에서 열릴 예정입니다.  현재까지나온 논의에서 예를 들자면, 최종 목표 중 하나는 <영아유기를 줄이려면 어떻게 해야하는가>가 될 것 같아요. 무엇보다도, 현장 데이터와 리서치에 기반하지 않은 상태로 선입견과 추측으로 임의의 목적을 만드는 것을 지양하고자 해요. 답을 미리 정해놓으면 현실에 존재하는 ‘진짜’ 문제를 놓칠 수 있다고 생각합니다. 사무실엔 다양한 책들이 놓여있다베이비박스에 대해 지금까지 나와 있는 사회적 토론의 중심은 존치 문제에만 포커스되어 있어요. 미디어에서는 순간적으로 많은 반응을 이끌어내기 위해 더욱 존치 여부에 초점을 맞추어 기사를 내고, 그에 따라 감정적인 댓글과 토론만이 오고가는데, 이는 정말 중요한 다른 문제들을 가리고 있다고 생각합니다. 반면에 디웰 커뮤니티는 문제에 공감하되 감정에 휩쓸리지 않고, 긍정적인 사회변화를 원하고 꿈꾸는 사람들이 모여있는 집단이에요. 디웰이야말로 이런 문제를 함께 해결하는 데에 진짜 필요한 커뮤니티가 아닌가 생각합니다.베이비박스 프로젝트 사무실의 유니크한 그림네, 이미 저보다 훨씬 더 경험이 많고 임팩트를 만들어낸 체인지메이커들에게 직접 질문하고 배울 수 있는 기회니까요. 그 분들이 사회문제를 해결해나가는 방식이나 조언을 생생하게 듣고, 베이비박스 프로젝트에 적용해 볼 수 있는 영감을 받아요. 도티기념병원의 최영아 과장님께서 노숙인들의 자립을 위한 공동체를 만드신 경험에 대해 듣고 베이비박스 프로젝트의 경우 미혼모들의 진정한 자립을 돕는 공동체를 만들려면 어떻게 해야할까에 대해 아이디어를 얻었어요. 여명학교의 조명숙 교감 선생님께는 체인지메이커로서 감정에 휩쓸리지 않는 노하우를, 정혜신 박사님께는 진정으로 존중받는 개인이 얼마나 큰 사회변화를 이끌어 낼 수 있는지에 대해 배울 수 있었습니다.  루트임팩트는 한 사람 한 사람이 자율적으로 움직이는데도, 모두들 일관적으로 같은 방향을 향해서 가고 있다는 점이 굉장히 인상적이었어요.루트임팩트 매니저님들은 제가 부탁드리기 전에 먼저 이 사람이 일을 잘하려면 뭐가 필요할까 항상 궁리하시는 듯, 다방면으로 제안해주시고, 어떤 상황에서도 가장 저다운 결정을 내리도록 격려해주시고 이끌어주신 점이 놀라웠어요. 조직이 주창하는 미션을 말뿐만 아니라 직접 행동으로 실현한다는 것은 어느 조직이나 하기 힘든 일인데, 우리 사회에 존재해줘서 참 고마운 조직입니다.베이비박스 프로젝트에 대해 더 많은 이야기를 듣고 싶으시다면, 아래 베이비박스 프로젝트 홈페이지를 방문하여 주세요 : ) BY. 루트임팩트
조회수 1166

똥바크 UX 디자인 이야기

나는 바크 (Bark)라는 이름의 개의 대화법을 적용하여 주변의 서로 모르는 사람들과 소소한 소통이 가능하게 만들어주는 위치기반 채팅 서비스를 운영하고 있다. 이에대한 디자인 이야기는 예전에 쓴 '대화의 장벽을 허무는 UX' 글을 참고하시길 바란다. 오늘 글에서는 이번에 새롭게 런칭한 신기능 이면에 고민했었던 UX 기획 이야기를 좀 풀어보고자 한다.소셜미디어 메인 인터페이스의 양대산맥: 타임라인 VS 카드스와이프개인적인 의견이지만, 세상의 수백가지의 소셜미디어 서비스들의 메인인터페이스는 사실 페이스북으로 대표되는 타임라인 방식과 틴터로 대표되는 카드스와이프 방식으로 양분된다고 생각한다. 타임라인 방식이란, 유저의 메인화면에 사람들이 포스팅한 컨텐츠를 순차적으로 (Chronological Order) 아래로 스크롤 하며 보여주는 방식을 말하고, 카드스와이프 방식이란 컨텐츠를 하나씩 메인화면에 띄워주고, 유저는 제안된 컨텐츠를 왼쪽/오른쪽으로 스와이프 하는 방식으로 컨텐츠를 소비하는 인터페이스를 말한다.유저 입장에서 위 인터페이스가 어떤 의미가 있는지 우선 생각해 보자. 우선 타임라인 방식의 경우 유저의 컨텐츠 소비 편의성에 초점이 맞춰져 있다. 유저가 수 많은 소셜미디어 계정에서 올라오는 컨텐츠를 직접 찾아다닐 필요 없이 그냥 메인 피드에서 순차적으로 보여지는 컨텐츠를 스크롤 쭉쭉 내려가며 소비하는, 마치 잘 차려진 밥상에서 내가 먹을 음식만 젓가락으로 콕콕 찝어가며 소비하는 방식이다. 옛날 원조 소셜미디어인 싸이월드나 마이스페이스와 비교해보면 이 타임라인 방식이 얼마나 편리한지 이해할 수 있다.싸이월드는 유저가 일일이 게정을 들어가서 컨텐츠를 소비하는 방식이였다. (사진 출처 - http://zodiacsword.tistory.com/211)반면, 틴더로 대표되는 카드 스와이프 방식은 타임라인 방식과 싸이월드같이 계정에 일일이 들어가서 컨텐츠를 소비하던 방식의 장점을 적절하게 섞은 방식이다. 타임라인 방식의 경우 발생하는 가장 큰 문제는 크게 1) 차려진 밥상에 음식이 너무 많을 경우 모든 음식을 맛보기가 힘들다는 것과 2) 계정보다는 컨텐츠가 부각되어 사람들을 '소셜라이징'하게 만들기 보다는 '수동적 소비'만 하게 만든다는 단점이 있다. (실제로 페이스북 계정의 45% 이상이 Lurkers, 즉 컨텐츠 업로드 없이 수동적으로 남의 컨텐츠만 쳐다보고 있는 사람들이라는 통계도 있다.)페이스북의 45%는 컨텐츠 공유 없이 타인의 컨텐츠만 소비하는 사람들이라고 한다.카드 스와이프 방식은 위에 언급된 단점을 절묘하게 개선하면서도 여전히 유저 편의성을 유지시키는 방식이라고 할 수 있다. 즉, 유저는 여전히 타임라인 방식 처럼 다른 사람 계정을 일일이 들여다 볼 필요 없이 잘 차려진 밥상을 수동적으로 소비만 하면 된다. 하지만 밥상에 있는 음식을 하나씩 내 앞에 들이밀어줌으로써 내가 직접 맛보면서 음식을 계속 먹을지, 버릴지를 결정할 수 있게 해 주고, 더 나아가 그 음식이 맘에 들었을 때 음식을 만든 사람과 추가적인 교류를 유도하는 방식인 것이다.위치기반+즉시성에 맞는 인터페이스란바크 앱이 유저에게 전달하고자 하는 핵심 경험은 '언제 어디서나 지금 바로 내 주변과의 교류'라고 할 수 있다. 즉, 바크에서 컨텐츠가 소비되는 방식의 핵심 성공요인은 (Key Success Factors) '지금 내 주변'이라는 위치기반의 맥락 조성, 그리고 '즉시 주변 사람들과 감정을 교류'한다는 컨텐츠 공유-소비의 즉시성 담보 이 두개에 모든게 달려있다고 해도 과언이 아니다. '개처럼 서로 짖다'의 UX 이면에는 사실 저 두가지 KSF를 달성하기 위한 중요한 목적이 있는 것이다. 이 목적을 달성하기 위한 새로운 컨텐츠 공유 인터페이스로 위에서 언급했던 타임라인 방식과 카드 스와이프 방식은 모두 다음과 같은 이유로 부적합하다.1) 즉시성이란 몇시간만 지나면 이미 즉시성의 가치를 잃고 만다.타임라인 방식은 스크롤을 아래로 조금만 내려가도 (카드스와입 방식은 스와입을 옆으로 10번만 해도) 이미 반나절 전, 어제, 심지어 몇일 전 컨텐츠 까지 쭉쭉 읽어 내려가기 마련이다. 이미 몇 시간 전의 일도 가물가물 해질 정도로 바쁜 세상에서 살아가는 현대인들에게 타임라인 방식으로는 즉시성이 담보된 컨텐츠를 교환한다는 목표를 달성시키기 어렵다. Short-term memory 연구로 유명한 Atkinson and Shiffrin의 논문에도 인간의 단기 기억 용량은 최대 30초를 넘기지 않는다고 나와있다. 즉, 이미 30초만 지나가도 해당 기억은 working-memory에서 long-term memory영역으로 넘어가거나 사라진다는 뜻이다. 물론 타인의 컨텐츠가 몇시간 전에 형성된거랑 본인의 단기기억과는 아무런 관련이 없는 얘기지만, 얘기하고자 하는 바는 인간의 '즉시성'이란 그만큼 하루, 이틀의 단위가 아닌 한시간, 두시간의 아주 짧은 term에 해당하는 영역이라는 걸 강조하기 위함이다.2) 밥상을 차려주는 순간 이미 위치기반의 맥락을 잃고 만다.타임라인이던 카드스와입 방식이던간에 대부분의 소셜미디어 메인화면은 자체 알고리즘에 의해 유저에게 컨텐츠 밥상을 차려주기 마련이다. 아무리 내 근처에 있는 컨텐츠를 위치순으로 정렬해 준다 하더라도 이미 밥상을 차려줘서 보여주는 순간 위치기반의 맥락을 형성시키기 매우 어렵다고 생각한다. 이유는 두가지가 있는데, 첫째, 위치 기반이란 '나'라는 객체와 '주변'이라는 객체들이 한 공간영역에서 구분 가능해야 형성되는 개념인데 타임라인, 카드스와입 방식 모두 '나'라는 객체는 생략해 버리기 마련이다. 또한 '주변'을 느끼게 만드는 인터페이스는 그저 필터에 '가까운 순'이라는 버튼 하나가 다이다. 유저가 그 '가까운 순'이라는 필터를 지속적으로 기억해주고 있지 않는 한 스크롤을 조금만 내려가도 이게 '위치기반 이구나' 하는 맥락 형성은 실패하게 된다.이런 이유로 바크에는 타임라인이나 카드스와입과는 다른 새로운 방식의 컨텐츠 소비 인터페이스 고안이 필요하게 되었다.Locale Mapping과 개의 대화법과의 결합위치기반 맥락을 가장 잘 살려줄 수 있는 인터페이스는 사실 우리에게 이미 너무나도 친숙한 인터페이스가 존재한다. 바로 지도기반 (Locale Mapping) 인터페이스 이다. 유저에게 유저 객체와 주변객체를 공간영역에 뿌려주는 지도기반만큼 위치기반 맥락을 잘 전달할 수 있는 인터페이스는 존재하지 않는다. 문제는, 이 로케일맵핑 방식을 소셜미디어의 컨텐츠 공유 방식과 적절히 결합시키는 것인데, 이게 쉬운 과제는 아니다. 이미 Periscope라는 라이브스트리밍 앱에서 지도기반의 스트리밍 인터페이스를 구현한 이력이 있지만, 유저 편의성 부분에서 단점이 많아 지금은 타임라인 방식과 지도기반을 병행해서 보여주고 있고, 타임라인 방식이 메인 인터페이스로 변화되가고 있다.유저가 직접 포인팅 된 컨텐츠를 클릭해서 들어갔다 나갔다를 반복해야 하는 로케일 맵핑은 소셜미디어 컨텐츠 공유 인터페이스로서 유저에게 절대로 편리한 방식이 아니고, 이를 아무리 변형한다 해도 기본 골격상 유저 편의성을 담보하기 쉬운 방식이 아니기 때문에, 우리는 아예 방향성을 바꿔서 유저로 하여금 이런 불편함을 감안해서라도 로케일 맵핑방식이 당연하다고 여기게끔 하는 스토리를 부여하고, 이를 컨벤션화 하는 방법을 선택했다. 바로, '개의 대화법'과의 결합이다.바크에서는 이미 모든 유저가 '개의 대화법'으로 소통한다는게 메인 컨벤션이 되어 있다. 개가 아무 맥락없이 서로 짖어대고 단타성 짙은 커뮤니케이션을 하듯이 바크에서도 모두가 뜬금없이 서로 짖어대고 아무 맥락없는 소소한 대화들을 (속된말로) 지껄여 대는 그런 공간이 형성되어 있는 것이다. 여기에서 더 나아가 우리는 '개가 메시지를 남기는 방법'에 대한 고민을 해 보기 시작했다. 즉, 서로 짖는게 사람의 경우 서로 실시간 대화를 나누는 행위라면, 사람들이 뭔가 쪽지를 남기거나 메시지를 전달하기 위해 하는 행위가 개의 경우 뭐가 있을까를 고민하다가 영감을 얻은 행위가 바로 개의 '똥을 누는' 배변행위이다.알다시피, 개는 똥/오줌과 같은 배변행위를 통해 본인의 메시지를 해당 장소에 남겨놓고, 다른 개들은 그 냄새를 통해 '이건 내 영역이다,' '나 오늘 참 행복하오' 등등의 메시지를 읽는다. (물론 생물학적으로 정확한 표현은 아니다. 그저 인간의 레벨에서 해석하기에 저런 행위를 할 것이라는 추측 정도이다.)이 행위를 인터페이스화 하기 위해 구현하게 된 것이 바로 '드랍 바크'라는 신기능이다. 유저는 마치 개가 현재 위치에 똥을 누듯이, 본인의 현재 감정이나 자랑하고 싶은 내용을 현재 위치에 떨어뜨려 놓는다. 이렇게 떨어뜨려진 '똥'들이 로케일 맵핑방식으로 내 주변에 형성되고, 메인화면에서 저렇게 '똥'으로 개체화된 컨텐츠로 보여준다. 이 '똥'을 열면 유저가 남긴 이미지+텍스트가 조합된 메시지가 보여지고, 유저들은 이 메시지에 대해 나도 같이 신난다는 의미의 'Happy,' 본 메시지가 별로거나 불쾌하다는 의미의 'Angry'를 사정없이 눌러댐으로써 본인의 감정을 표현할 수 있다.또한, 앞서 언급한 '즉시성'을 강조하기 위해 모든 메시지는 기본 4시간이 지나면 사라지는 휘발성 메시지로 디자인 했다. 위의 오른쪽 화면 중간에 있는 바가 현재 그 포스트의 남은 수명을 나타내는 바 이고, 4시간이 지나면 그 메시지는 맵에서 사라지게 된다. 마치 똥이 식어서 냄새가 사라지는 것 (또는 냄새가 약해져서 메시지로서 가치가 떨어지는 것)과 같은 것이다. 여기에 재미요소를 주기 위해 다른 유저들이 'happy'보트를 한번 할때 마다 포스트의 수명이 1분씩, 'angry'보트를 할때마다 1분씩 감소하도록 설계했다. 본 인터페이스의 더 자세한 내용은 다음 동영상을 참고해 주시길 바란다.https://www.youtube.com/watch?v=jAFZ5Upu_7k<iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/jAFZ5Upu_7k" frameborder="0" allowfullscreen="">드랍바크 소개영상안드로이드까지 정식 오픈한지 약 일주일이 안된 지금 하루 약 30% 이상의 활성유저들이 열심히 똥바크를 싸고 있다. 물론 모든 유저가 사용중인 기능도, 모든 사용자가 만족하고 있는 기능은 아니지만 현재까지 반응은 매우 긍정적인 편이고, 앱 내에서 뭔가 소비할 컨텐츠가 생겼다는 점, 그리고 '개의 대화법'이라는 앱의 컨셉을 더욱 공고히 하는 인터페이스라는 점에서 향후 앱의 체류시간 및 리텐션율을 높이는데 긍정적인 역할을 할 것으로 예상하고 있다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기
조회수 2456

[MOIN] 04. MOIN 디자이너를 소개합니다

동남아 뺨치게 덥던 날씨가 갑자기 훅! 선선한 가을로 바꼈습니다.다들 갑작스런 추위(?)에 잘 적응하고 계신가요?이번 에피소드는 여러분이 보시는 모인 로고, 웹사이트 등 모든 모인 비주얼을 창조(?)해내신 디자이너에 대해 소개하고자 합니다. 모인 비주얼을 창조(?)하신 김보람 디자이너- Professional Experience -2014.09 - 2015.07 리모택시코리아, UI/UX 및 그래픽 디자이너2013.03 - 2015.03 TODAIT, UI/UX 디자이너2013.12 - 2014.03 더디엔에이, 인턴 디자이너- Education -숙명여자대학교 시각영상디자인 학사- Awards -2014 드림엔터 IoT 해커톤 최우수상2013 SK플래닛&한국관광공사 주최 스마트관광앱 공모전 은상2013 Adobe ADAA Infographic Design Semi-Finalist2013부산국제광고제 (AD Stars) Outdoor Finalist▶     모인에서 어떤 부분을 담당하고 계신가요?디자인 A to Z를 담당하고 있습니다. 처음 MOIN에 들어왔을 때에는 UX/UI 디자이너로 들어왔었는데, 역할을정해 놓는 게 의미가 없더라고요. 창립 멤버였던 만큼 백지에서 출발해야 했습니다. 그러다 보니 브랜드 전략에서부터 제품(Website, Mobile Application), 홍보물 디자인 등 모두 저를 거쳐 나왔답니다!  디자인 뿐만 아니라제품 기획과 마케팅 관련한 일도 합니다.▶     시각디자인을 전공하게 된 이유가 있나요?원래는 그림 그리는 것을 즐겨해서 회화나 애니메이션을 전공하고 싶었어요. 그런데 좀 더 현실과 직결된 디자인분야가 매력적으로 보여서 전공하게 됐습니다. 디자인 분야가 정말 다양하거든요. 제품을 만드는 산업 디자인(3D), 공간을 디자인하는 환경 디자인(4D), 그래픽 관련된 모든 걸 하는 시각 디자인(2D), 패션 디자인 등 세세하게 나뉘는데, 저는 앞서 언급했다시피 그림 그리는 걸 좋아해서 그래픽 전반을 다루는 시각 디자인을 선택했어요. 디자인에 대해서는 알면 알 수록 더 재밌는 영역이라 생각합니다. 지금 제 삶은 디자인을 떼어 놓고는 생각할 수가없을 정도로 즐겁게 일 하고 있어요! ▶     수상 경력이 짱짱하십니다. 그 중에서 가장 애틋한(?) 수상 이력 하나만 이야기 해주실래요? 왜 가장 기억에남고 애틋했나요?사실 최근 몇 년 동안 공모전이나 해커톤 등 이런 저런 활동을 많이 해왔어요. 하나 하나 애정을 쏟아서 그런지 다기억에 남아요. 그래도 굳이 하나를 꼽자면 대학 졸업 전에 친구들과 함께 밤을 새어가며 준비한 Adobe Design Award입니다. 그 결과 Interaction Design 부문에서 Final을 수상했었죠. 지금 그 결과물을 보면 보완해야 할 점이 많이 있긴 하지만 준비 과정 자체가 애틋하게 느껴져요. 팀원들 각자의 장점을 살려 역할을 분배하고, 끊임없이 의논해가며 결과물을 만든 거거든요. 사실 디자이너들은 각자 색이 뚜렷하기 때문에 의견을 맞춰가는 게 다소 어려운 부분이 있어서... (^^;) 그런 과정 끝에 좋은 결과까지 얻어 더더욱 소중한 기억이 됐습니다.  동시다발적으로 일을 잘 해내는 게 어마무시한 특기(?)인 김보람 디자이너▶     어떻게 스타트업 세계에 들어오시게 됐나요?한참 사용자 경험 및 인터페이스에 대해 공부하던 대학생 때, 경험 삼아 참여한 여러 대외 프로그램에서 스타트업에 관련된 사람들을 만날 기회가 있었습니다. 그 전까지는 스타트업에 대해서 아무런 지식도, 관심도 없던 상태였죠. 그런데 주변에 하나둘씩 관련된 사람들이 모이니까 자연스럽게 흥미가 생기더라고요. 그러면서 본격적으로 스타트업 종사자를 만나게 됐고, 개발자들과 여러 프로젝트를 함께 수행해 볼 기회도 생겼습니다. 그 과정에서 직접서비스를 만들어 운영해보기도 하고 창업의 길도 걸어보고요. 생각해보면 제가 스타트업 세계에 들어오게 된 건자연스러운 현상이었던 것 같아요.▶     대표님은 어떻게 만나셨나요? 어떤 부분을 믿고 함께 창업을 하시게 됐죠?저는 예전부터 지인들과 함께 비영리 해커톤(개발자 경진대회)를 운영해오고 있습니다. 그 팀원들 중 한 분이 지금MOIN을 이끄시는 서일석 대표님과 아는 사이었는데, 마침 디자이너를 구한다는 사실을 전해 듣고는 저를 소개해주셨습니다. 앞으로 뭘 할지에 대해 고민하고 있던 찰나였던지라, 한 번 만나보겠다고 했습니다. 당시에 대표님과MOIN의 사업 아이템과 방향성, 가능성에 대해 이야기를 했어요. 핀테크 부분은 한 번도 해본 적은 없었지만, 이야기를 듣다 보니 사업에 대한 확신도 생기고 재밌을 거 같다는 기대도 하게 됐어요. 그래서 기쁜 마음으로 합류하게 되었습니다.김보람 디자이너에게 '함께 일하고 싶은 사람'이란?#열정 #탐구 #경청▶     가장 자신 있는 디자인 영역은 어딘가요? 혹시 디자인 외에도 욕심나시는 부분이 있을까요? 왜 이렇게 생각하셨나요?사용자 경험(UX)에 기반한 사용자 인터페이스(UI) 디자인이 제 전문 분야입니다. 가장 오래 공부해 오기도 했고아무래도 경험도 그 쪽으로 많이 쌓았기 때문에 자신이 있어요. 또 UX/UI 영역은 사용자 행동에 대해 탐구하고 분석하기 위해 끊임없이 고민해야 한다고 생각해요. 전 그 과정이 굉장히 즐겁습니다. 앞으로도 계속 해나가고 싶은영역이에요.  디자인 외의 영역에서는 개인적으로 프론트엔드(Front-end) 개발이 꼭 배우고 싶습니다. UI디자인 분야가 개발자와 협업이 중요한 분야인 만큼 이 정도의 개발을 공부하고 싶어요. 하지만 무엇보다도 디자이너로서 개발 의존도를 낮추고 싶거든요.제가 디자인한 걸 스스로 구현하는 게 더 정확하다 생각해요. 뿐만 아니라, 개발자와 저 둘 다에게 효율적이기도하구요. 곧 개발 스터디를 하는 디자이너로 찾아 뵙겠습니다! 크하핳ㅎㅎ! ▶     앞으로 더 키워나가고 싶은 역량은 어떤건가요? 그 이유는요?겸손함이요. 때때로 어떤 분야에 대해서 꽤 많이 안다고 생각하다가도, 아직 한참 멀었다는 사실을 깨닫곤 하거든요. 그리고 아무래도 자만하는 순간 더 이상 성장하지 못할 거 같다는 생각도 들어요. 벼는 익을 수록 고개를 숙인다고, 자만을 스스로 경계하도록 노력하겠습니다. 김보람 디자이너가 가장 좋아하는 도라에몽과 함께! (드루와 드루와)▶     창업한 지 약 반년이 지났습니다. 분위기가 많이 달라졌나요?분위기가 정말 많이 달라졌어요. 약 5개월 전 제가 MOIN에 처음 합류했을 때에는 서비스를 만드는 데에 집중했었습니다. 하지만 지금은 그 서비스를 세상에 내어 놓을 준비를 하고 있거든요. 달리기로 보자면, 출발 신호탄이터지기 직전인거죠. 앞으로 함께 뛰어 줄 동료들도 최근 합류하면서, 다같이 파워 야근을 하며 서비스 오픈을 준비하고 있습니다. 할 일이 정말 많은데도 다들 긍정적인 마음으로 일하고 있습니다. 앞으로 계속 동료가 늘어날텐데, 이 분위기를 계속 이어나갈 수 있었으면 좋겠어요. ▶     앞으로 어떤 디자이너가 되고 싶으신가요?제가 만들어 갈 서비스에 대한 통찰력을 가진 디자이너가 되고 싶습니다. 스스로 결정한 전략과 판단이 서비스를성장시키는 방향으로 나아갈 수 있도록 말이죠. 궁극적으로는 많은 사람들을 행복하게 만드는 디자이너, 사람을위한 디자인을 하는 사람이 되고 싶어요. 그런 의미에서 모인 화이팅!- 김보람이 꼽은 인생 명언 -해야 할 것을 하라.모든 것은 타인의 행복을 위해서,동시에 특히 나의 행복을 위해서이다.by. 톨스토이이번 주에는 한 편이 더 나갑니다.여름방학을 MOIN에서 불태우고 바로 개강을 맞은 비극(?)의 안드로이드 개발 인턴!그녀를 떠나보낼 준비를 하며 글쓴이는 꺼이꺼이 웁니다. #모인 #MOIN #디자이너 #디자인 #디자인팀 #팀원 #팀원소개 #팀원인터뷰 #인터뷰 #기업문화
조회수 300

시프티 사명과 코어 가치

폴 손 (Paul Sohn)은 그의 블로그에서 ‘문화는 어려움 속에서 반드시 전략을 초월한다’라고 썼습니다. (Here's How Leaders Create Healthy Organizational Culture, http://paulsohn.org/heres-how-leaders-create-healthy-organizational-culture/)시프티의 예를 들면, 비즈니스에 대한 경험이 전무한 두 명의 공동 설립자에 의해서 시작되었습니다. 사업이 계속 성장함에 따라 2017 년 9 월, 2 명의 팀원을 추가로 합류하였고 바로 그 때 시프티의 팀과 문화, 가치에 대해 다시 한 번 생각해 보기 시작했습니다.우리는 모든 회원들이 참여하기를 열망하는 독특한 문화를 육성하여 미래에 시프티 팀에 합류할 모든 구성원들에게도 자연스럽게 전달되게 하고자 했습니다. 시프티의 문화는 우리가 누구인지, 어떻게 사업을 함께 해 왔는지, 그리고 우리 모두가 시프티를 운영하는 데에 서로 동의하는 철학에서 비롯되었습니다. 그래서 우리 고유 문화를 구축하기 위해 2016 년 7 월 시프티 프로젝트가 시작된 후 첫 해를 되돌아 보고 팀과 공유할 시프티의 핵심 가치, 미션과 비전을 수립하였습니다.Unconventional첫 번째로, 우리는 우리가 누구인지, 다른 기업과 다른 차별성이 무엇인지를 아는 것이었습니다. 한 예로 우리는 한국에서는 다소 익숙하지 않을 수 있는 언어를 사용하여 기존 방식과 다른 제품 개발 프로세스를 수행했습니다. 또한 북미 지역에서는 스케줄링, 출퇴근 용 앱 또는 소프트웨어 시장이 상당히 포화 상태라고 말할 수 있지만 한국은 완전히 새로운 시장이었습니다. 중견 기업의 경우에도 오래된 방법으로 출퇴근을 기록하고 근무표 계획과 급여를 엑셀로 처리하는 전통적인 방법에 크게 의존하고 있습니다. 우리는 시프티의 익숙치 않은 언어를 기꺼이 배우고 일해줄 인력을 찾기 어려울 것이라는 예상과 새로운 시장을 개척한다는 위험을 가지고 시작하게 되었고 UNCONVENTIONAL이라는 가치는 시프티가 앞으로 나아가는 데에 있어 중요한 코어 가치가 되었습니다.Insight두 번째 핵심 가치는 INSIGHT입니다. 우리는 나날이 들어오는 사용자들에 신기했지만 많은 사람들이 시프티를 사용하지 않고 떠나는 것들으르 지켜보았습니다. 사용을 하든 떠나든, 우리는 그들의 요구와 불만을 듣는 데에 많은 노력을 했습니다. 이 과정 속에서 우리는 주로 많은 사용자들의 ‘원함’만을 들었습니다. 우선순위가 없는 의견들과 요청들이 난무하여 우선 순위를 정하는 데 어려움이 있었습니다. 시프티 서비스의 핵심과 사용자에게 제공하는 가치의 중심을 지키기 위해 합리적이지 않은 ‘원함’ 류의 피드백 대부분을 제거해야 했습니다. 우리는 비즈니스의 본질 인 사용자가 실제로 ‘필요’로 하는 것을 연구하기 시작했습니다. 우리는이 접근법을 취하면서 더 나은 통찰력을 가지게되었고 사용자가 정말 필요로 하는 기능을 구현할 수가 있었습니다. 우리는 팀에게 다음과 같은 메시지를 전하게 되어 자랑스럽습니다. “단순히 원하는 것이 아니라 사용자가 정말로 필요로 하는 본질을 찾자.”Flexibility제품 초기에는 MVP 만 있었기 때문에 대부분의 대기업 요구에 부응할 수 없었습니다. 그렇다고 당시에는 우리가 소상공인을 위한 문제를 완벽하게 해결할 수 있지도 않았습니다. 초기에는 제품의 성숙도가 낮아서 주요 타겟 시장으로 간주되는 소상공인의 니즈도 거의 처리하지 못했기 때문입니다. 저는 매일 새로운 자영업 사용자에게 시프티를 떠난 이유를 묻곤 했습니다. (MVP가 갓 나온 초기에 심각한 인게이지먼트와 리텐션 문제를 겪었습니다.) 시프티를 그만 두는 핵심 사유를 찾아내려는 많은 시도는 효과가 없었습니다. 많은 사용자는 시프티에서 무엇이 필요한 지를 정확히 표현하지 못했습니다. 우리는 마침내 소상공인으로부터 피드백을 얻는 것이 대기업의 피드백만큼 효과적이지 않다는 것을 알게 되었고, 사업의 방향성을 중소/대기업 중심으로 전환하게 되었습니다. 대기업은 직원 관리에 대한 절차가 확실하여 특정 기능 요청이나 귀중한 피드백을 세세히 제공할 수 있었기 때문입니다. 이러한 피드백들은 지금의 시프티로 성장하는 데에 결정적인 역할을 했습니다. 결국 시장반응에 빠르고 현명하게 변화하기 위해 pivot할 수 있었던 시프티의 세 번째 가치는 FLEXIBILITY입니다. (소상공인도 여전히 시프티를 편리하게 이용할 수 있습니다.)Customer Satisfaction and Openness마지막 두 가지 핵심 가치는 CUSTOMER SATISFACTION과 OPENNESS입니다. 우리는 고객의 니즈에 필수적인 서비스로 고객을 만족시키고자 합니다. 또한 팀 내에서 열린 문화를 가짐으로써 자유롭게 의견을 제시하고 협력을 촉진할 수 있는 환경을 만들고자 합니다. 우리는 계층적 보고 절차를 가진 전통적이고 엄격한 기업이 되고 싶지 않았기 때문입니다.핵심 가치:Unconventional: 다르다는 것을 두려워하지 않음Insight: 원하는 것을 제공하지 않고 사용자가 필요한 것을 제공Flexibility: 변화에 신속한 대응Customer Satisfaction: 고객을 만족시키기 위해 더 나아감Openness: 투명성과 협업을 수용, 구성원의 평등 추구우리가 위에서 확립한 다섯 가지 핵심 가치는 시프티 팀 내에서 공유될 것이며 궁극적으로 아래의 사명을 이루는 데에 기여할 것입니다.사명:올인원 솔루션을 제공하여 직원 근무일정 스케줄링, 출퇴근기록 및 급여정산 프로세스를 간소화합니다.기업의 운영 효율성을 향상시킵니다.고객이 직원 관리 비용을 절감 할 수 있도록 도와줍니다.#시프티 #고객가치 #핵심가치 #기업소개 #서비스소개

기업문화 엿볼 때, 더팀스

로그인

/