브랜딩에 관한 이야기브랜딩을 총괄 책임지고 계시는 김성철 상무이사님의 브랜딩 강연에 관한 내용입니다.강연이 시작되기 전 이사님이 한 말씀해주셨습니다.'사람들의 인사이트에는 답은 없다'시작하겠습니다.결정과 실행 / 블루오션은 존재하지 않는다1. 브랜딩 '강점'을 무기로 삼아라- 약점을 보완하는 방법을 하면 모두가 실패하는 법,차라리 브랜딩의 중요한 요소는 자사가 소유한 가장 큰 '강점을 무기로 삼아야 한다.2. 경쟁사가 아닌 소비자를 공략하라 (제안하기)- 정말 누군가 이기는 게임을 하는 게 옳은 방법은 아니다.- 지금 현재 중요한 단어'내가 소비자에게 어떤 걸 제안할 수 있는지' 그러한 제안이 수요창출을 만들 수 있는지 고민해야한다.- 소비자를 공략할 게임을 찾아야한다. 이기겠다는 명목하에 한다면 질 수 밖에 없다.3. 씨줄과 날줄 안에 소비자를 가둬라.- Life Time Value- 애플을 개인적으로 좋아하지 않는다. 하지만 애플은 씨줄과 날줄을 정말 잘  만든다 (itunes)- 플랫폼을 잘 봐라. 자신들의 플랫폼에 소비자를 가둬 넣었다.4. 브랜드의 경계를 뛰어 넘아라.- 업의 경계를 뛰어 넘어라. 네이버는 삼성과 싸워야한다. 전통방식으로는 내 업종이 아니라 무시할 수 있지만,코어벨류를 생각하라.5. 알리지 말고 표현하라.- 전통적 광고의 시대는 끝났다.- 모든 것들의 접점에서 표현하라.- 내가 어떤 사람인지를 표현하는 방법을 연구해야한다.ex) 현대카드는 '교회오빠'를 싫어한다. 삐뚤어지고 시장의 질서를 깨려는 브랜딩의 느낌을 만들고 있다.6. 자신만의 고유한 화법이 표현을 완성한다.- '애플의 30년'이라는 책이 있다. 그 책은 애플의 제품 역사가 담겨 있는데,컴퓨터 사양과 같은 내용은 없고 그냥 이미지만 있다. 비싼 컴퓨터인데, 제품 사용 설명서도 허접하다.그게 애플의 표현 방식이다.7. 스피릿을 공유하라- 철학과 정신은 정말 중요하다.- 내가 가진 확실한 정신을 알아야한다.- 설령 제품에도 철학과 정신이 있어야한다. ex) 아이리버와 아이팟 누가 성공했나?- 아이팟이 성능면에서는 떨어졌지만 사람들은 아이팟을 선택했고, 결국 애플이 이겼다.철학과 정신이 새겨있지 않으면 사람들은  관심있게 못 본다.8. '게임의 규칙은 내가 정한다' (제일 중요한 부분)- 기울어진 운동장에서는 축구를 하면 기울어진 쪽이 유리하고 이긴다. 그러면 따라가지 말고 차라리 물을 채워서 수영을 해라.- 말도 안되는 시장에서 내 마음대로 정해라- 현대카드 : 대한민국 신용카드가 손해가 연 2000억인데 신용카드 발급하면 돈을 못 번다. (그래도 한다. 싸움은 늘 내가 하고 싶은대로 해야한다.브랜드 = 만능의 열쇠?1. Quality2. Awareness3. Assocition4. Loyalty아니다. 생각이 바뀔 수 있다.새로운 정의파워브랜드는 약속하지 않는다. 다만 기대하게 만들 뿐이다.생각해보자 아마존, 페이스북, 애플이 약속을 한 적이 있나?한번 자세하게 알아보자한국 대기업들은 '고객을 믿습니다' 맨날 고객타명만 한다.이케아를 '정직한 가격에 스타일리쉬한 제품을 만듭니다' 이게 브랜딩입니다. 약속 ㄴㄴ해요핵심- 더 좋은 이념을 정립하라- 소비자들이 알아서 구매할 것이다.- 싸움의 법칙을 가져가서 해라김성철 상무이사님은 '황금펜타곤'이라는 프로그램에서 심사역을 맡았다.거기서 만난 스타트업은 '호텔나우','마이리얼트립' 등이 있었다.이들의 회사 신념은 명확하고 단순했다.호텔나우 : 실시간으로 싼 호텔 공급하겠다.마이리얼트립 : 지긋한 패키지 여행 싫다. 시장을 바꿀 것이다.존재 이유에 대해 확립하는게 제일 중요하다.Quantum leap = 브랜드는 축적의 과정축적은 시간으로 만드는게 아니라 이념과 신념의 누적치이다.사례를 한번 보자.반기문 유엔사무총장이 대선 후보로 참여했지만, 결국 포기했다. 왜?여러가지 이유가 있었겠지만사람들에게'유엔사무총장의 브랜드는 있었지만''반기문이라는 브랜드는 없기 때문이다'브랜드는 명사가 아니라. 동사다. 동사로 자리잡는 것을 공부해야 한다.+ 질문 나온 이야기"디자인과 브랜딩은 중요하다. 로고라든지 인지를 시키기 위한 전략적 지침에 대해 설명해달라"현대카드는 3가지 키워드로 구성되어 있다.- 심플: 모든 커뮤니케이션을 간단하게- 골드: 아웃스탠딩한 남들이 안하는 걸 심플하게- 위티: 보다 사람들과 웃을 수 있도록브랜드가 가져야할 단어 2~3개를 가지고 디자인에 비쥬얼 매칭이 되는지 중요하다.추가 이야기소비자의 인사이트를 안다?아니다"소비자는 하고 싶은대로 하는거에요. 정답과 트렌드가 없기 때문에 브랜딩이 어렵다고 하는거죠"실시간 질문앱 오누이에서 마케팅을 담당하는 건포어입니다 :)저도 강연을 들으며 새삼 브랜딩에 대해 고민을 해야하는 시간을 가져야겠습니다.나중에 "오누이"에 대한 브랜딩 이야기도 글로 써보겠습니다 ^^#오누이 #인사이트 #경험공유 #브랜딩 #브랜드 #마케팅 #마케터 #이벤트참여 #후기

<button type="button">메뉴</button>* 오역 및 오탈자가 있을 수 있습니다. 발견하시면 댓글로 제보해주세요!** 브런치 에디터의 한계로 마크다운 적용이 되지 않아 가독성이 떨어지고 복사 기능이 지원되지 않습니다. 이왕이면 이곳에서 보시기를 권장합니다. >> 가독성 좋은 문서로 보기React 공식 튜토리얼 바로가기시작하기 전에무엇을 구현할 것인가대화형 틱택토 게임을 구현하려고 합니다.원한다면 최종 결과물을 여기에서 확인할 수 있습니다. 아직 코드가 이해되지 않거나 문법이 낯설어도 걱정하지 마세요. 튜토리얼에서 차근차근 틱택토 게임을 구현하는 방법을 배울테니까요.게임을 플레이해보세요. 이동 리스트에 있는 버튼을 클릭하여 클릭한 때로 돌아가고, 그 때로 돌아간 후 보드가 어떻게 보이는지 확인할 수 있습니다.게임에 익숙해지셨다면 탭을 닫으세요. 다음 섹션에서 간단한 템플릿을 가지고 시작할 것입니다.사전 준비HTML과 JavaScript에 익숙할 것으로 생각합니다. 하지만 HTML과 JavaScript를 사용해본 적이 없더라도 튜토리얼을 따를 수 있어야 합니다.JavaScript를 다시 봐야한다면 이 가이드를 추천합니다. 튜토리얼에서 JavaScript의 최신 버전인 ES6의 몇 가지 특징들인 화살표 함수, 클래스, let, const를 사용할 것입니다. Babel REPL을 사용하여 ES6 코드가 어떻게 컴파일되는지 확인해볼 수 있습니다.튜토리얼을 공부하는 방법튜토리얼을 공부하기 위한 두 가지 방법이 있습니다. 브라우저에서 코드를 작성하거나 컴퓨터의 로컬 개발 환경을 설치할 수 있습니다. 편한 방법을 선택하여 공부하시면 됩니다.브라우저에서 코드를 작성하기 원한다면가장 빨리 시작할 수 있습니다!새로운 탭에서 시작 코드를 여세요. 빈 틱택토 필드를 볼 수 있습니다. 튜토리얼에서는 이 코드를 수정하여 진행합니다.다음 섹션인 로컬 개발 환경 설정을 스킵할 수 있습니다. 바로 개요 섹션으로 넘어가세요.사용하던 에디터에서 코드를 작성하기 원한다면다른 방법으로 사용하는 컴퓨터에 프로젝트를 설치할 수 있습니다.이 방법은 필수가 아닌 선택 사항입니다!더 많은 준비 작업이 필요하지만 에디터의 편리함을 누리며 공부할 수 있습니다.만약 이 방법으로 공부하기를 원한다면 필요한 단계들이 있습니다.  1. 설치된 Node.js가 최신 버전인지 확인해보세요.2. 새로운 프로젝트를 생성하기 위해 설치 방법을 따르세요.$ npm install -g create-react-app$ create-react-app my-app3. 새 프로젝트의 src/ 폴더에 있는 모든 파일들을 삭제해주세요. (폴더 안의 내용만 삭제하되 폴더는 삭제하지 마세요)$ cd my-app$ rm -f src/*4. 이 CSS 코드를 src/ 폴더에 index.css 파일로 추가해주세요.5. 이 JS 코드를 src/ 폴더에 index.js 파일로 추가해주세요.6. src/ 폴더에 있는 index.js의 최상단에 아래 세 줄을 추가해주세요.import React from 'react';import ReactDOM from 'react-dom';import './index.css';이제 프로젝트 폴더에서 npm start 명령어를 실행하고 브라우저에서 http://localhost:3000 를 여세요. 빈 틱택토 필드를 볼 수 있습니다.에디터에서 문법 하이라이팅 설정을 하고 싶다면 이 문서를 따르세요.도와주세요! 막히는 부분이 있어요!막히는 부분이 생겼다면 지원하는 커뮤니티를 확인해보세요. 특히 Reactiflux chat은 빠르게 도움을 받을 수 있는 좋은 방법입니다. 어떤 커뮤니티에서도 필요한 대답을 듣지 못했다면 이슈를 제출하세요. 우리가 도와드립니다.다 끝났으면 시작해봅시다!개요React란 무엇인가요?React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.React는 여러 종류의 컴포넌트들을 가지고 있지만 우리는 React.Component의 서브클래스를 사용하여 시작할 것입니다.  class ShoppingList extends React.Component {  render() {    return (            Shopping List for {this.props.name}                Instagram         WhatsApp         Oculus                );  }}// Example usage:XML과 비슷한 재밌는 태그들을 사용할 것입니다. 작성한 컴포넌트는 React에게 무엇을 랜더링하고 싶은지 알려줍니다. 그러면 React는 데이터가 변경될 때 올바른 컴포넌트들을 업데이트하고 랜더링합니다.여기에서 ShoppingList는 React 컴포넌트 클래스 혹은 React 컴포넌트 타입입니다. 하나의 컴포넌트는 props라 불리는 파라미터를 사용하고, render 메서드를 통해 표시할 뷰 계층 구조를 반환합니다.render 메서드는 랜더링하길 원하는 내용을 반환하면 React는 그 내용을 가져와 스크린에 랜더링합니다. 특히 render는 랜더링할 간단한 내용인 React 엘리먼트를 반환합니다. 대부분의 React 개발자들은 이 구조를 더 쉽게 작성할 수 있게 해주는 JSX라는 특별한 문법을 사용합니다.라 쓰면 빌드 시 React.createElement('div')로 변환됩니다. 위의 코드는 아래의 코드와 동일합니다.  return React.createElement('div', {className: 'shopping-list'},  React.createElement('h1', /* ... h1 children ... */),  React.createElement('ul', /* ... ul children ... */));전체 코드는 여기에서 볼 수 있습니다.createdElement()에 대해 더 많은 내용이 궁금하다면 API reference 에 자세한 설명이 있습니다. 튜토리얼에서는 createdElement()를 직접적으로 사용하지 않습니다. 대신 JSX를 사용할 것입니다.JSX에서는 중괄호 안에 JavaScript 문법을 사용할 수 있습니다. 각 React 엘리먼트는 변수에 저장하거나 프로그램에 여기저기에 전달할 수 있는 실제 JavaScript 객체입니다.ShoppingList 컴포넌트는 내장된 DOM 컴포넌트만 랜더링하지만  코드를 작성하여 커스텀 React 컴포넌트를 쉽게 구성할 수 있습니다. 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있습니다. 이때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있습니다.시작하기시작 코드를 가지고 시작해봅시다.이 코드는 우리가 구현할 틱택토 게임의 틀을 가지고 있습니다. 필요한 스타일들을 준비해두었기 때문에 JavaScript만 신경쓰면 됩니다.세 가지 컴포넌트로 구성되어 있습니다.- Square- Board- GameSquare 컴포넌트는 하나의 <button>을 랜더링합니다. Board 컴포넌트는 9개의 사각형을 랜더링합니다. Game 컴포넌트는 나중에 우리가 채워 넣어야 할 공백이 있는 하나의 보드를 랜더링합니다. 지금 이 컴포넌트들은 아무런 동작도 하지 않습니다.props를 통해 데이터 전달하기본격적으로 시작하기 위해 Board 컴포넌트에서 Square 컴포넌트로 데이터를 전달해봅시다.Board의 renderSquare 메서드에서 Square 컴포넌트 prop에 value 값을 전달하도록 코드를 변경해주세요.  class Board extends React.Component {  renderSquare(i) {    return ;  }value 값을 보여주기 위해 Square 컴포넌트의 render 메서드 안의 코드 {/* TODO */}를 {this.props.value}로 변경해주세요.  class Square extends React.Component {  render() {    return (      <button className="square">        {this.props.value}      </button>    );  }}변경 전:변경 후: 랜더링된 결과에서는 각 사각형 안에 숫자가 위치합니다.지금까지의 코드는 이곳에서 볼 수 있습니다.대화형 컴포넌트클릭 시 "X"로 채워지는 Square 컴포넌트를 만들어봅시다. Square의 render() 함수에서 반환된 버튼 태그를 다음과 같이 변경해주세요.  class Square extends React.Component {  render() {    return (      <button className="square" onClick={() => alert('click')}>        {this.props.value}      </button>    );  }}이제 사각형을 클릭하면 브라우저에서 알럿창이 뜨는걸 확인할 수 있습니다.새로운 JavaScript 문법인 화살표 함수를 사용하였습니다. onClick prop에 함수를 전달하였습니다. onClick={alert('click')} 코드를 작성하고 버튼을 클릭하면 알럿창 대신 경고가 뜨게됩니다.React 컴포넌트는 생성자에서 this.state를 설정하여 상태를 가질 수 있습니다. 상태는 각 컴포넌트마다 가지고 있습니다. 사각형의 현재 value 값을 상태에 저장하고 클릭할 때 바뀌도록 만들어봅시다.먼저 상태를 초기화하기 위해 클래스에 생성자를 추가해주세요.  class Square extends React.Component {  constructor(props) {    super(props);    this.state = {      value: null,    };  }  render() {    return (      <button className="square" onClick={() => alert('click')}>        {this.props.value}      </button>    );  }}JavaScript 클래스에서 서브클래스의 생성자를 정의할 때 super(); 메서드를 명시적으로 호출해줘야 합니다.Square의 render 메서드에서 현재 상태의 value 값을 표시하고 클릭할 때 바뀌도록 수정해주세요.- <button> 태그 안의 this.props.value 를 this.state.value로 변경해주세요.- () => alert() 이벤트 핸들러를 () => this.setState({value: 'X'})로 변경해주세요.<button> 태그는 다음과 같습니다.  class Square extends React.Component {  constructor(props) {    super(props);    this.state = {      value: null,    };  }  render() {    return (      <button className="square" onClick={() => this.setState({value: 'X'})}>        {this.state.value}      </button>    );  }}this.setState가 호출될 때마다 컴포넌트가 업데이트되므로 업데이트된 상태가 전달되어 React가 이를 병합하고 하위 컴포넌트와 함께 다시 랜더링합니다. 컴포넌트가 랜더링될 때 this.state.value는 'X'가 되어 그리드 안에 X가 보이게 됩니다.이제 사각형을 클릭하면 그 안에 X가 표시됩니다.지금까지의 코드는 이곳에서 볼 수 있습니다.개발자 도구크롬과 파이어폭스의 React 개발자 도구 확장 프로그램은 React 컴포넌트 트리를 브라우저의 개발자 도구 안에서 검사할 수 있게 해줍니다.트리 안의 컴포넌트들의 props와 상태를 검사할 수 있습니다.설치 후 페이지에서 검사하길 원하는 컴포넌트를 오른쪽 클릭하고 "Inspect"를 클릭하여 개발자 도구를 열면 오른쪽 마지막 탭에 React 탭이 보입니다.CodePen을 사용하여 이 확장 프로그램을 동작시키고 싶다면 추가적으로 필요한 작업들이 있습니다.1. 로그인 혹은 회원가입을 하고 이메일을 인증받으세요.2. "Fork" 버튼을 클릭하세요.3. "Change View"를 클릭하고 "Debug mode"를 선택하세요.4. 새롭게 열린 탭에서 React 탭이 있는 개발자 도구를 볼 수 있습니다.상태 들어올리기이제 틱택토 게임을 위한 기본 블록들이 있습니다. 하지만 아직 각 Square 컴포넌트 안에 상태들이 캡슐화되어 있습니다. 더 원활하게 동작하는 게임을 만들기 위해 한 플레이어가 게임에서 이겼는지를 확인하고 사각형 안에 X와 O를 번갈아 표시해야 합니다. 누가 게임에서 이겼는지 확인하기 위해 Square 컴포넌트들을 쪼개지 않고 한 장소에서 9개의 사각형의 value 값을 모두 가지고 있어야 합니다.Board가 각 Square의 현재 상태가 무엇인지만 확인해야 한다고 생각할 수도 있습니다. 이 방법은 기술적으로 React에서 가능하기는 하나 코드를 이해하기 어렵고 불안정하고 리팩토링하기 힘들게 만듭니다.각 Square에 상태를 저장하는 대신에 Board 컴포넌트에 이 상태를 저장하는 것이 가장 좋은 방법입니다. 이 Board 컴포넌트는 이전에 각 사각형에 인덱스를 표시한 방법과 동일한 방법으로 무엇을 표시할지 각 Square에게 알릴 수 있습니다.여러 하위 컴포넌트로부터 데이터를 모으거나 두 개의 하위 컴포넌트들이 서로 통신하기를 원한다면 상위 컴포넌트 안으로 상태를 이동시키세요. 상위 컴포넌트는 props를 통해 하위 컴포넌트로 상태를 전달해줄 수 있습니다. 그러면 하위 컴포넌트들은 항상 하위 컴포넌트나 상위 컴포넌트와 동기할 수 있습니다.이와 같이 상태를 상위 컴포넌트로 들어올리는 것은 React 컴포넌트들을 리팩토링할 때 가장 많이 사용하는 방법입니다. 이 기회를 통해 연습해봅시다. Board에 생성자를 추가하고 9개의 사각형과 일치하는 9개의 null을 가진 배열을 포함한 상태로 초기화하세요.  class Board extends React.Component {  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),    };  }  renderSquare(i) {    return ;  }  render() {    const status = 'Next player: X';    return (             {status}                 {this.renderSquare(0)}         {this.renderSquare(1)}          {this.renderSquare(2)}                        {this.renderSquare(3)}          {this.renderSquare(4)}          {this.renderSquare(5)}                        {this.renderSquare(6)}          {this.renderSquare(7)}          {this.renderSquare(8)}                );  }}나중에 이것을 다음과 같이 생긴 보드로 채울 예정입니다.  [  'O', null, 'X',  'X', 'X', 'O',  'O', null, null,]현재 Board의 renderSquare 메서드는 다음과 같습니다.    renderSquare(i) {    return ;  }Square에 value prop를 전달하도록 수정하세요.    renderSquare(i) {    return ;  }지금까지의 코드는 이곳에서 볼 수 있습니다.이제 우리는 사각형이 클릭되면 발생할 변경 사항을 구현해야 합니다. Board 컴포넌트는 어떤 사각형이 채워졌는지 저장하고 있습니다. 그렇기 때문에 Square가 Board가 가지고 있는 상태로 업데이트할 방법이 필요합니다. 사각형의 컴포넌트 상태가 각자 정의되고 있기 때문에 Board가 Square의 상태를 가지고올 수 없습니다.보통의 패턴은 사각형이 클릭될 때 호출되는 함수를 Board로부터 Square에 전달하는 것입니다. Board 안의 renderSquare를 다시 변경해봅시다.    renderSquare(i) {    return (              value={this.state.squares[i]}        onClick={() => this.handleClick(i)}      />    );  }가독성을 위해 리턴 안의 요소들을 여러 줄로 나누고, 괄호를 추가하여 JavaScript가 세미콜론 없이 코드를 마무리하도록 했습니다.Board에서 Square로 value와 onClick 두 개의 props를 전달합니다. onClick Square의 rennder에 있는 this.state.value 를 this.props.value로 변경하세요.- Square의 rennder에 있는 this.state.value 를 this.props.value로 변경하세요.- Square의 rennder에 있는 this.setState() 를 this.props.onClick()로 변경하세요.- 더이상 각 Square가 상태를 가지지 않도록 Square에 정의한 constructor를 삭제하세요.모든 변경 사항을 구현한 Square 컴포넌트는 다음과 같습니다.  class Square extends React.Component {  render() {    return (      <button className="square" onClick={() => this.props.onClick()}>        {this.props.value}      </button>    );  }}이제 사각형이 클릭될 때 Board로부터 전달되는 onClick 함수를 호출합니다. 어떤 일이 일어나는지 되짚어봅시다.1. 내장된 DOM <button> 컴포넌트의 onClick prop는 React에게 클릭 이벤트 리스너를 설정하라고 알립니다.2. 버튼이 클릭될 때 React는 Square의 render() 메서드 안에 정의된 onClick 이벤트 핸들러를 호출합니다.3. 이 이벤트 핸들러는 this.props.onClick()을 호출합니다. Square의 props는 Board에서 명시한 것입니다.4. Board는 onClick={() => this.handleClick(i)}을 Square에 전달하고, 호출될 때 Board의 this.handleClick(i)가 동작합니다.5. Board에 있는 handleClick() 메서드는 아직 정의되지 않았으므로 코드는 오류가 발생합니다DOM <button> 엘리멘트의 onClick 속성이 React와는 다른 의미를 가집니다. Square의 onClick prop나 Board의 handleClick 메서드와는 다릅니다. React 애플리케이션에서는 속성에 on* 이름을 사용하고 핸들러 메서드에 handle* 을 사용하여 처리하는 것이 일반적입니다.사각형을 클릭해봅시다. handleClick을 아직 정의하지 않았으로 에러가 발생합니다. Board 클래스에handleClick 메서드를 추가해봅시다.  class Board extends React.Component {  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),    };  }  handleClick(i) {    const squares = this.state.squares.slice();    squares[i] = 'X';    this.setState({squares: squares});  }  renderSquare(i) {    return (              value={this.state.squares[i]}        onClick={() => this.handleClick(i)}      />    );  }  render() {    const status = 'Next player: X';    return (             {status}                 {this.renderSquare(0)}          {this.renderSquare(1)}          {this.renderSquare(2)}                        {this.renderSquare(3)}          {this.renderSquare(4)}          {this.renderSquare(5)}                        {this.renderSquare(6)}          {this.renderSquare(7)}          {this.renderSquare(8)}                );  }}지금까지의 코드는 이곳에서 볼 수 있습니다.이미 있는 배열을 수정하는 대신 squares 배열을 복사하기 위해 .slick()를 호출합니다. 왜 immutability이 중요한지 알고 싶다면 이 섹션으로 이동해주세요.이제 사각형을 클릭하여 다시 사각형을 채울 수 있어야 하지만 상태가 각 Square가 아닌 Board 컴포넌트에 저장되어 있어 게임을 계속 구현해나가야 합니다. Board의 상태가 변경될 때마다 Square 컴포넌트들은 자동으로 다시 랜더링됩니다.Square은 더 이상 각 상태를 유지하지 않습니다. 이들은 상위 Board 컴포넌트로부터 데이터를 전달받고, 클릭될 때 알립니다. 우리는 이 제어된 컴포넌트 같은 컴포넌트들을 호출합니다.왜 immutability가 중요할까전의 예제 코드에서 이미 존재하는 배열을 수정하지 않고 변경 사항을 반영하기 위해 squares 배열을 .slice()연산자를 사용하여 복사하였습니다. 이는 무엇을 의미하며 왜 이 컨셉이 중요할까요.mutation을 사용한 데이터 변경  var player = {score: 1, name: 'Jeff'};player.score = 2;// Now player is {score: 2, name: 'Jeff'}mutation을 사용하지 않은 데이터 변경  var player = {score: 1, name: 'Jeff'};var newPlayer = Object.assign({}, player, {score: 2});// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}// Or if you are using object spread syntax proposal, you can write:// var newPlayer = {...player, score: 2};mutation을 사용하지 않더라도(기본 데이터를 변경하여도) 결과적으로는 다를게 없습니다. 하지만 컴포넌트와 전체 애플리케이션의 성능을 향상시키는 장점이 있습니다.쉽게 Undo/Redo와 시간 여행하기immutability는 이 복잡한 기능들을 훨씬 더 쉽게 구현할 수 있게 해줍니다. 예를 들어 이 튜토리얼에서 우리는 게임의 다른 단계들 사이에 시간 여행을 구현할 것입니다. 데이터 변경을 피하면 우리가 이전 버전의 데이터를 계속 참조할 수 있게 해주고 원할 때 변경할 수 있게 해줍니다.변경 사항 트래킹하기변경되는 객체가 변경 사항이 있는지 아는 방법은 변경 사항이 객체로 만들어지기 때문에 복잡합니다. 그러면 이전 버전을 복사하기 위해 전체의 객체 트리를 현재 버전과 비교하고 각 변수와 값들을 비교해야 합니다. 이 과정은 갈수록 복잡해집니다.immutable 객체가 변경 사항이 있는지 아는 방법은 쉬워집니다. 만약 참조되고 있는 객체가 이전과 다르다면 이 객체는 변경된 것입니다. 이게 끝입니다.React에서 언제 다시 랜더링할지 결정하기React에서 immutability의 가장 큰 장점은 간단한 순수 컴포넌트들이 다시 랜더링될 때를 결정하기 쉽다는 점입니다.shouldComponentUpdate()에 대해 더 배우고 싶고 어떻게 순수 컴포넌트들을 성능 최적화 할 수 있는지 알고 싶다면 이 글을 보세요.함수 컴포넌트우리는 생성자를 지웠습니다. 사실 React는 render 메서드만으로 구성된 Square와 같은 컴포넌트 타입을 위해 함수 컴포넌트라 불리는 간단한 문법을 지원합니다. React.Component를 확장한 클래스를 정의하는 것보다 간단하게 props를 가져오고 랜더링 해야할 것을 반환하는 함수를 작성하는 것이 좋습니다.다음과 같은 함수를 사용해 Square 클래스를 변경하세요.  function Square(props) {  return (    <button className="square" onClick={props.onClick}>      {props.value}    </button>  );}여기서는 this.props를 둘 다 props로 바꿔야 합니다. 애플리케이션에 있는 여러 컴포넌트들은 함수 컴포넌트로 구현할 수 있습니다. 함수 컴포넌트는 더 쉽게 작성할 수 있고 React가 더 효율적으로 최적화할 수 있습니다.코드를 깔끔하게 만들면서 onClick={() => props.onClick()}을 onClick={props.onClick}으로 바꿨습니다. 함수를 전달하는 것은 이 코드만으로 분합니다. onClick={props.onClick()}는props.onClick을 호출하기 때문에 동작하지 않습니다.지금까지의 코드는 이곳에서 보실 수 있습니다.변화 가져오기지금 우리의 게임의 단점은 오로지 X만 플레이할 수 있다는 점입니다. 고쳐봅시다.기본적으로 첫 이동을 'X'가 되도록 설정해봅시다. Board 생성자에서 초기 상태를 수정해주세요.  class Board extends React.Component {  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),      xIsNext: true,    };  }이동할 때마다 xIsNext의 불린 값은 바뀌면서 상태에 저장되어야 합니다. Board의 handleClick 함수를xIsNext 값이 바뀔 수 있도록 수정해봅시다.    handleClick(i) {    const squares = this.state.squares.slice();    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }이제 X와 O가 순서대로 번갈아 나타납니다. 다음에 무엇이 표시될 때 보여주기 위해 Board의 render에서 "status" 텍스트를 바꿔봅시다.    render() {    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    return (      // the rest has not changed변경 사항을 적용한 Board 컴포넌트는 다음과 같습니다.  class Board extends React.Component {  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),      xIsNext: true,    };  }  handleClick(i) {    const squares = this.state.squares.slice();    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }  renderSquare(i) {    return (              value={this.state.squares[i]}        onClick={() => this.handleClick(i)}      />    );  }  render() {    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    return (             {status}                 {this.renderSquare(0)}          {this.renderSquare(1)}          {this.renderSquare(2)}                        {this.renderSquare(3)}          {this.renderSquare(4)}          {this.renderSquare(5)}                        {this.renderSquare(6)}          {this.renderSquare(7)}          {this.renderSquare(8)}                );  }}지금까지의 코드는 이곳에서 볼 수 있습니다.승자 알려주기언제 게임에서 이기는지 표시해봅시다. 파일 맨 하단에 헬퍼 함수를 추가해주세요.  function calculateWinner(squares) {  const lines = [    [0, 1, 2],    [3, 4, 5],    [6, 7, 8],    [0, 3, 6],    [1, 4, 7],    [2, 5, 8],    [0, 4, 8],    [2, 4, 6],  ];  for (let i = 0; i < lines>    const [a, b, c] = lines[i];    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {      return squares[a];    }  }  return null;}Board의 render 함수에서 누가 게임에서 이겼는지 확인할 수 있도록 호출할 수 있습니다. 또 누군가 이겼을 떄 "Winner: [X/O]" 상태 텍스트를 표시할 수 있습니다.Board의 render에서 status를 선언을 수정해주세요.    render() {    const winner = calculateWinner(this.state.squares);    let status;    if (winner) {      status = 'Winner: ' + winner;    } else {      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    }    return (      // the rest has not changedBoard에서 handleClick을 일찍 반환하여 이미 누군가 이긴 게임에서 클릭하거나 이미 칠해진 사각형을 클릭하는 경우 무시하도록 변경할 수 있습니다.축하합니다! 틱택토 게임을 완성하셨습니다! 이제 React의 기초를 알았습니다. 여기서 진짜 승자는 여러분입니다.지금까지의 코드는 이곳에서 볼 수 있습니다.히스토리 저장하기보드의 이전 상태로 되돌려 이전 상태가 표시되도록 만들어봅시다. 이동이 있을때마다 새 squares 배열을 만들었습니다. 덕분에 이전 상태의 보드를 쉽게 저장할 수 있습니다.상태에 이와 같은 객체를 저장해봅시다.  history = [  {    squares: [      null, null, null,      null, null, null,      null, null, null,    ]  },  {    squares: [      null, null, null,      null, 'X', null,      null, null, null,    ]  },  // ...]우리는 이동 리스트를 표시하여 응답할 수 있는 더 수준 높은 Game 컴포넌트를 만들고 싶습니다. 그래서 Square 상태를 Board로 들어올린 것처럼 Board의 상태를 Game으로 들어올려 최 상위 레벨에서 필요한 모든 정보를 저장해봅시다.먼저 생성자를 추가해 Game의 초기 상태를 설정해주세요.  class Game extends React.Component {  constructor(props) {    super(props);    this.state = {      history: [{        squares: Array(9).fill(null),      }],      xIsNext: true,    };  }  render() {    return (                                              {/* status */}         {/* TODO */}                );  }}그 다음 Board를 수정하여 props를 거쳐 squares를 가져오고 이전에 Square에서 했던 것처럼 Game에서 지정한 onClick prop를 만들어줍시다. 각 사각형의 위치를 클릭 핸들러로 전달하여 어떤 사각형이 클릭되었는지 알 수 있습니다. 필요한 변경 사항은 다음과 같습니다.- Board의 constructor를 삭제하세요.- Board의 renderSquare에 있는 this.state.squares[i]를 this.props.sqaures[i]로 대체하세요.- Board의 renderSquare에 있는 this.handleClick(i)를 this.props.onClick(i)로 대체하세요.변경 사항을 반영한 Board 컴포넌트는 다음과 같습니다.  class Board extends React.Component {  handleClick(i) {    const squares = this.state.squares.slice();    if (calculateWinner(squares) || squares[i]) {      return;    }    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }  renderSquare(i) {    return (              value={this.props.squares[i]}        onClick={() => this.props.onClick(i)}      />    );  }  render() {    const winner = calculateWinner(this.state.squares);    let status;    if (winner) {      status = 'Winner: ' + winner;    } else {      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    }    return (             {status}                 {this.renderSquare(0)}          {this.renderSquare(1)}          {this.renderSquare(2)}                        {this.renderSquare(3)}          {this.renderSquare(4)}          {this.renderSquare(5)}                        {this.renderSquare(6)}          {this.renderSquare(7)}          {this.renderSquare(8)}                );  }}Game의 render는 히스토리 전체를 보고 게임 상태를 계산하여 가져올 수 있어야 합니다.  render() {    const history = this.state.history;    const current = history[history.length - 1];    const winner = calculateWinner(current.squares);    let status;    if (winner) {      status = 'Winner: ' + winner;    } else {      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    }    return (                                  squares={current.squares}            onClick={(i) => this.handleClick(i)}          />                        {status}         {/* TODO */}                );  }Game에 상태를 랜더링하고 있기 때문에{status}를 지우고 Board의 render 함수로부터 상태를 계산하는 코드를 지울 수 있습니다.  render() {    return (                      {this.renderSquare(0)}          {this.renderSquare(1)}          {this.renderSquare(2)}                        {this.renderSquare(3)}          {this.renderSquare(4)}          {this.renderSquare(5)}                        {this.renderSquare(6)}          {this.renderSquare(7)}          {this.renderSquare(8)}                );  }그 다음 Board에서 Game으로 handleClick 메서드를 옮겨야 합니다. Board 클래스에서 잘라내기를 하고 Game 클래스로 붙여넣을 수 있습니다.Game 상태는 다르기 때문에 수정해야 할 것이 조금 있습니다. Game의 handleClick은 히스토리 항목을 연결하여 새로운 배열을 만들어 스택에 푸시해야 합니다.  handleClick(i) {    const history = this.state.history;    const current = history[history.length - 1];    const squares = current.squares.slice();    if (calculateWinner(squares) || squares[i]) {      return;    }    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      history: history.concat([{        squares: squares,      }]),      xIsNext: !this.state.xIsNext,    });  }여기에서 Board는 renderSquare와 render만 필요합니다. 상태 초기화와 클릭 핸들러는 둘 다 Game에서 동작합니다.지금까지의 코드는 이곳에서 보실 수 있습니다.이동 표시하기지금까지 게임에서 진행된 이동을 표시해봅시다. 이전에 React 컴포넌트가 클래스로 JS 객체이고 그 덕에 데이터를 저장하고 전달할 수 있다고 배웠습니다. React에서 여러 아이템들을 랜더링하기 위해 React 요소의 배열을 전달했습니다. 배열을 빌드하는 가장 흔한 방법은 데이터 배열에서 map을 이용하는 것입니다. Game의 render 메서드에서 해봅시다.    render() {    const history = this.state.history;    const current = history[history.length - 1];    const winner = calculateWinner(current.squares);    const moves = history.map((step, move) => {      const desc = move ?        'Go to move #' + move :        'Go to game start';      return (                 <button onClick={() => this.jumpTo(move)}>{desc}</button>             );    });    let status;    if (winner) {      status = 'Winner: ' + winner;    } else {      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');    }    return (                                 squares={current.squares}            onClick={(i) => this.handleClick(i)}          />                        {status}         {moves}                );  }지금까지의 코드는 이곳에서 볼 수 있습니다.히스토리의 각 단계에서 <button>이 있는 리스트 아이템을 만들었습니다. 이 리스트 아이템은 우리가 곧 구현할 클릭 핸들러를 가지고 있습니다. 코드에서 다음과 같은 경고 메시지와 함께 게임에서 만들어지는 이동 목록을 볼 수 있습니다.Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.경고: 배열이나 이터레이터에 있는 각 자식은 유니크 "key" prop을 가져야한다. "Game"의 render 메서드를 확인해보세요.이 경고의 의미가 무엇인지 얘기해봅시다.Keys아이템 리스트를 랜더링할때 React는 항상 리스트에 있는 각 아이템에 대한 정보를 저장합니다. 만약 상태를 가진 컴포넌트를 랜더링한다면 컴포넌트가 어떻게 실행되는지와 관계없이 상태는 저장 되어야 하고 React는 네이티브 뷰의 뒤에 참고할 것을 저장한다.리스트를 업데이트할 때 React는 무엇을 바꿀지 결정해야 합니다. 리스트에 아이템들을 추가하고, 지우고, 재배열하고, 수정할 수 있습니다.이 코드가 아래의 코드로 변경된다고 상상해봅시다.  Alexa: 7 tasks leftBen: 5 tasks leftBen: 9 tasks leftClaudia: 8 tasks leftAlexa: 5 tasks left사람의 눈에는 Alexa와 Ben의 자리가 바뀌고 Claudia가 추가된 것처럼 보인다. 하지만 React는 단순한 컴퓨터 프로그램이므로 여러분의 의도를 알지 못합니다. React는 리스트의 각 요소에서 key 속성을 지정해달라고 요청합니다. 문자열은 형제로부터 각 컴포넌트들을 구분합니다. 이 경우에 alexa, ben, claudia는 구분할 수 있는 키가 됩니다. 만약 아이템들이 데이터베이스의 객체와 일치시켜야 한다면 데이터베이스 ID을 사용하세요.{user.name}: {user.taskCount} tasks leftkey는 React에서 제공되는 특별한 속성입니다(ref에서 더 확장된 기능). 엘리먼트가 만들어질때 React는 key 속성을 가져오고 반환된 엘리먼트에 직접적으로 key를 저장합니다. key가 props의 한 부분으로 보일지라도 이것은 this.props.key로 참조할 수 없습니다. React는 어떤 하위 엘리먼트가 수정될지 결정하는 동안 알아서 key를 사용합니다. 컴포넌트가 자신의 키를 알 수 있는 방법은 없습니다.리스트가 랜더링될 때 React는 새로운 버전의 각 엘리먼트를 가져오고 이전 리스트에서 매칭되는 키를 가진 것을 찾습니다. key가 세트에 추가될 때 컴포넌트는 만들어집니다. 키가 삭제될 때 컴포넌트는 소멸됩니다. 키들은 React가 각 요소를 구별할 수 있도록하여 다시 랜더링하는 것을 무시하고 상태를 유지할 수 있게 합니다. 만약 컴포넌트의 키를 바꾼다면 완전히 지운 후 새롭게 생성됩니다.동적으로 리스트를 빌드할 때마다 적당한 키를 할당할 것을 강력 추천합니다. 만약 적당한 키를 가지지 못한다면 이를 위해 데이터를 재구성하여야 할지도 모릅니다.특정한 키를 구분하지 못한다면 React는 경고를 주고 배열 인덱스를 키로 사용합니다. 이는 올바른 선택이 아닙니다. 만약 리스트에 있는 엘리먼트들을 정렬하거나 리스트에 있는 버튼을 통해 지우거나 추가하면 명시적으로 key={i}를 전달하는 방법을 사용한다면 경고를 표시하지는 않지만 동일한 문제를 발생시키므로 대부분의 경우에 추천하지 않습니다.컴포넌트의 키가 전부 다를 필요는 없지만 관련있는 형제들 사이에서는 유니크해야 합니다.시간 여행 실행하기이동 리스트를 위해 우리는 각 단계에서 유니크 ID를 가졌습니다. Game의 render 메서드에서 키는로 추가하면 경고는 표시되지 않습니다.    const moves = history.map((step, move) => {      const desc = move ?        'Go to move #' + move :        'Go to game start';      return (                 <button onClick={() => this.jumpTo(move)}>{desc}</button>             );    });지금까지의 코드는 이곳에서 보실 수 있습니다.아직 junmTo가 정의되지 않았기 때문에 이동 버튼을 클릭하면 에러가 발생합니다. 지금 표시된 단계가 무엇인지 알기 위해 Game 상태에 새로운 키를 추가해봅시다.먼저Game의 constructor에  stepNumber: 0를 추가해주세요.class Game extends React.Component {  constructor(props) {    super(props);    this.state = {      history: [{        squares: Array(9).fill(null),      }],      stepNumber: 0,      xIsNext: true,    };  }그 다음 각 상태를 업데이트하기 위해 Game의 jumpTo 메서드를 정의해봅시다. 이 메서드에서는 xIsNext를 업데이트하고, 이동의 인덱스가 짝수라면 xIsNext를 true로 설정합니다.Game 클래스에jumpTo 메서드를 추가해주세요.handleClick(i) {    // this method has not changed  }  jumpTo(step) {    this.setState({     stepNumber: step,      xIsNext: (step % 2) === 0,    });  }  render() {    // this method has not changed  }Game handleClick에 상태를 업데이트 하기위해 stempNumber:history.length를 추가하여 새로운 이동이 있을 때마다  stepNumber를 업데이트 합니다. 현재 보드의 상태를 읽을 때 handleClick이 stepNumber라고 보고 클릭하는 시간대로 상태를 되돌릴 수 있습니다.  handleClick(i) {    const history = this.state.history.slice(0, this.state.stepNumber + 1);    const current = history[history.length - 1];    const squares = current.squares.slice();    if (calculateWinner(squares) || squares[i]) {      return;    }    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      history: history.concat([{        squares: squares      }]),      stepNumber: history.length,      xIsNext: !this.state.xIsNext,    });  }이제 히스토리의 각 단계를 알기 위해 Game의 render를 수정할 수 있습니다.  render() {    const history = this.state.history;    const current = history[this.state.stepNumber];    const winner = calculateWinner(current.squares);    // the rest has not changed지금까지의 코드는 이곳에서 보실 수 있습니다.이제 이동 버튼을 클릭하면 보드는 즉시 그때 표시된 게임으로 변경됩니다.마무리틱택토 게임을 플레이 해보세요.- 틱택토 게임을 플레이 해보세요.- 한 명의 플레이어가 게임에서 이길 때를 이를 알려줍니다.- 게임이 진행되는 동안 이동 기록이 저장됩니다.- 게임 보드의 에전 버전을 표시하기 위해 시간을 되돌릴 수 있습니다.잘 동작하네요! React가 어떻게 동작하는지 잘 아셨기를 바랍니다.최종 결과물은 여기에서 확인하세요.시간이 더 있거나 새로운 스킬들을 연습해보고 싶다면 해볼 수 있는 몇 가지 아이디어가 있습니다. 점점 더 어려운 순으로 배치해두었습니다.1. 움직임 리스트에서 (col, row) 형태에 각 움직임 위치를 표시하세요.2. 움직임 리스트의 선택된 아이템을 볼드처리하세요.3. 하드 코딩한 것들 대신 사각형을 두 개의 루프를 사용하여 Board를 다시 작성하세요.4. 오름차순 혹은 내림차순 뭐든지 움직임을 정렬하는 버튼을 추가해보세요.5. 누군가 이겼을 때 무엇 때문에 이겼는지 세 개의 사각형을 하이라이트하세요.튜토리얼이 진행되는 동안 우리는 엘리먼트, 컴포넌트, props, 상태를 포함한 React의 수많은 컨셉들을 다뤘습니다. 각 주제에 대한 깊은 설명을 원한다면 남은 문서를 확인하세요. 컴포넌트 정의에 대해 더 많이 배우고 싶다면 이 문서를 확인하세요.#트레바리 #개발자 #안드로이드 #앱개발 #Node.js #백엔드 #인사이트 #경험공유 #React #리액트 #리액트가이드 #한글 #번역 #문서번역

간만에 일 얘기로 좀 돌아왔어요. 오늘은 일잘러 얘기랍니다. 브런치나 구글, 일분, 카카오채널, 블로그, 팟캐스트, 유튜브...등등 모든 채널에 '일' 에 대한 얘기가 가득해요. 대부분 두 가지 아젠다가 있더군요. 1. 일을 잘하는 방법2. 일을 못하는 이유이겁니다. 모두의 행복한 업무생활을 위한 좋은 콘텐츠들이지만, 이런 테마가 넘쳐나고 이래저래 공유되면서 모든 사람들이 일을 잘해야 하고, 일을 못하는 건 일종의 죄...? 처럼 여겨지는 부분도 생기는 듯 해요. 일정부분 동의해요. 일을 못하는 건 어떤 측면에서 민폐가 될 수 있겠죠. 개냉정한 말이지만, 결국 당신의 일못함은 다른 누군가의 피해와 희생을 요구하거든요. 그러니 업무적으로 여러가지 열폭 컨텐츠가 등장하는 것이 이해는 갑니다. 하지만 좀 불편한 부분이 있었어요. 소위 자칭 일잘러들의 미묘한 깔아봄이 있더라구요? 마치 일 잘하는 사람이 조금 더 나은 우성종자같은 행세를 하고 다닌다는 거죠. 그리고 자꾸 일손이 느리거나 실수가 잦은 누군가를 가르치려 들거나(기분나쁘게) 또는 깝깝하다는 듯한 제스쳐를 취하는 모습을 자주 보곤 했어요. 문득 그런 생각이 들죠. 뭐지 저 자의식은?... 어디서 일잘함 인증이라도 받아온 건가..싶은.물론 그럴 수 있죠. 진짜 일처리가 AI마냥 정확한 종족들이 있어요. 그럼 그냥 본인에게 좋은 일이죠. 빨리 끝내고 빨리 퇴근하고 쉴 수 있으니 부모님께 감사하면 될 일입니다. 그래요 이분들은 인정합니다.하지만 종종.. 아무리 봐도 일을 잘하지 않는데... 본인이 일을 잘한다고 착각하는 분들이 있더라구요.  오늘은 자칭 일잘러들의 슬픈 착각을 좀 까보려고 합니다. 1. 멋진 단어 VS 쉬운 단어일잘러는 중학생들도 블록체인을 이해할 수 있게 설명하는 분들입니다. 자칭 전문가라며 말도 안되는 영어와 약어, 전문용어를 마구 섞어서 말씀하시는 분들이 있는데 대충 느낌은 알겠습니다. 의사들의 처방전같은 전문성을 어필하고 싶었던 모양입니다. 하지만 그것은 파스타 속의 브로콜리마냥 굉장히 거슬리는 거에요. 빼고 먹고싶은데 자꾸 달팽이관에 걸려서 불편하달까요. (전 브로콜리를 싫어해요.)2. 말이 많은 것 VS 말을 잘하는 것LA들어간다 귀벌려본인의 주장을 설명하기 위해 수백마디의 근거와 예시가 필요하다면 이미 그 주장은 힘이 없는 거예요. 가끔 목소리 크고 또박또박한 발성으로 몇 시간 내내 트렌드와 동향, 방대한 자료와 근거를 들어 주절주절 멋진 일대일 강의를 하시는 분들이 있는데... 그건 '말을 잘 하는 것 처럼' 보여요. 하지만 귀에 남는 건 아무것도 없다구요. 계졀밥상에서 2시간 내내 계속 다른 메뉴먹는 느낌이야. 배는 부른데 뭘 먹었는지 모르겠어. 짧고 간결하지만 쏙쏙 이해되는 어휘로 명확한 근거 하나로 부연하는 게 능력이예욤.3. 냉철한 것 VS 싸가지없는 거일을 할 때 냉정한 것과 싸가지가 없는 건 다릅니다. 일을 하라고 했지 인격을 건들라고는 안했거든요. 가끔 '결과를 잘 내기 위해서' 냉정하고 사정 봐주지 않는 오더를 내리시는 분들이 있는데, 진짜 일을 잘 하시는 분들은 사람의 소중함을 먼저 캐치하시지 않을까요? 도깨비방망이마냥 사람을 갈아넣으면 어떤 일이든 할 수 있습니다. '다음'이 없을 뿐.4. 빨리 하는 것 VS 대충하는 것이렇게 빨리해도 잘해야지.빨리하라고 했지 대충하라곤 안했습니다. 쟈긴 막 일잘한다고 후다다닥 끝내놓고 커피 한 잔 마신다고 어디 나가있고 그러는데..막상 인수인계 받아서 작업해보면...빈 구석이 너무 많아서 다시 피드백 정리하거나 요청하고, 아님 내가 그냥 만드느라 더 느려져요. 성격급하고 빠르게 일처리 해놓고 딩가딩가하는 건 일을 잘하는 게 아닌 것 같아요. 빠르고 정확하게 해야죠.5. 완벽주의 VS 그냥 일손이 느린 타입'어우 저는 완벽주의 라서요!.. 꼼꼼하게 하나하나 보는 타입이예요.'꼼꼼하게 보고 완벽하게 하는 거 다 좋은데, 마감시간은 맞췄으면 합니다. 그냥 일손이 느린 거에 대한 묘한 변명같아요. 6. 프로다움 VS 그냥 드러운 성격거들먹거리는 말투로 '나랑 일하기 힘들 거야.' 이라고 자기어필 하시는 사수가 있더라구요. 뭐 어쩌라는 걸까요? 싸우자는 걸까요..오지말라는 걸까요. 그게 소위 프로다움이라고 여기시는 분들이 종종 있더라구요. 밑에 부사수를 조져서 일을 '가르쳐줄거다' 그러니 너가 내 속도에 따라와라.. 하는 건데. 여긴 군대가 아니에요. 그건 프로다운 게 아니라, 사람을 다루지 못하는 미숙함이고 그냥 성격이 더러운 게 아닐까 싶습니다.7. 빠른 의사 결정 VS 독선과 고집의사결정이란 건 일단 듣고 각 의견의 장단점을 구분해서 취사선택 또는 합의점을 도출하는 거에요. 팀원들이 20가지 아이디어를 내고 10가지 피드백을 냈는데 결국 피드백은 쌩까고 본인이 낸 아이디어를 선택했다면 그건 의사결정일까요? 종종 이런 독단을 '난 쿨하게 의사결정하는 편이야! 길게 끌지 않아.' 라고 생각하는 분들이 있는데 그거 아닙니다. 그냥 고집쟁이세요.8. 자기반성 VS 정신승리페북에다가 자꾸 자기반성 글 쓰시는 분들 있어요. 회고 비슷하게. 알겠는데, 자기반성은 개선점이 행동으로 드러나야 의미가 있는 겁니다. 페북에다가 의지만 불태우는 건 그냥 정신승리에요. 뭔가 문제가 있었고 갈등이 있었다면 재빨리 해결하고 당사자에게 사과를 구하고 행동으로 보여주면 될 일입니다. 9. 일잘러 VS 뒷담쟁이일을 잘 한다는 건 벼슬이 아닙니다. 누군가를 깔 일도 아니죠. 항상 내가 일 잘하는 것처럼 느껴질 때는 그런 생각이 든단 것 자체가 '지금 내가 좆밥이구나' 라는 걸 잘 기억해야 합니다.10. 이론쟁이 VS 재수탱이일을 어디 교과서로 배웠는지 자꾸 연습문제 뒷장에 '생각해봅시다.' 같은 질문들만 던지고는 팔짱을 끼는 분들이 있어요. 이런 사람들이 잘 팔아먹는 단어가 '기획'과 '전략' 인데.... 기획은 책상앞에서 펜대굴리면서 하는 게 아니더라구요. 이론만으로 하는 것도 아니고. 아이디어만(그것도 시덥잖은) 내놓고 자꾸 데카르트같은 딴지만 거는 분이 있다면 조용히 귓속에 집에 가라고 속삭여주세요. 지금 발로 뛰면서 현장서베이 다니고 레퍼런스 찾기도 바쁘니까.11. 인사이트 VS 헛소리인사이트..라는 단어가 21세기 멋진 단어 BEST5에 등극한 모양인데 인사이트라는 건 심도를 꿰뚫는 깊이와 다양한 근거를 바탕으로 내는 가설이자 관점입니다. 페북에서 공유해온 글3,4개 읽고 떠들고 다니는 '내 생각' 정도가 아니라고 생각해요. 어디서 복제해온 정보들을 내 것이라고 착각하면 안돼요. 12. 유도리 VS 가라일을 유연하고 상황에 맞춰 해결하는 능력은 매우 중요합니다. 우린 이걸 유연성 내지는 유도리라고 하죠. 근데 이게 모든 일을 그냥 대충 그때 그때 임시방편으로 처리하란 얘기가 아니에요. 가끔 말예요. 직급이 올라가고 권한이 생길 수록 이 유도리를 시도때도 없이 써먹는 분들이 있더라구요. '그냥 대충 해, 내가 잘 말할께!''아 그분 내가 아는 분이야, 그냥 그렇게 한다고 해''이번거 그냥 사, 내가 이사님한테 말할께. 술 사드리면 풀려.'직원입장에선 개쿨하고 능력쩌는 상사같아 보일 수도 있겠지만..결국 이런 식의 일처리는 어느 지점에선 터지게 되어있거든요. 가라와 유도리는 좀 다릅니다. 정상적인 절차 내에서도 효율적인 결론을 만들 수 있어야 레알 일잘러죠. 13. 용기있는 1인 VS 딴지쟁이모두가 YES라고 말할 때 NO라고 말하는 소신있는 일잘러분들이 있어요. 좋아요. 그런 자세. 모두에게 좋은 결과를 위해 전투적으로 리스트를 도출하고 어필하는 거 좋습니다. 뭐 한 편으론 '불평만 말하지 말고, 해결책을 가져와라' 라는 말도 있던데, 솔직히 해결책 안가져와도 됩니다. 리스크를 발견한 것만도 대단한 거에요. 문제는 그 리스크가 진짜 '유의미'한 리스크인가 하는거죠. 괜히 색이 맘에 안들고, 디자인이 어떻고, 뭔가 그냥 느낌적으로 별로인 것 같고, 사람들이 그냥 안좋아할 것 같고, 자기 친구들3명한테 물어봤는데 이거 아니라더라....이런식의 피드백은 졸라 그냥 딴지일 뿐입니다. 남의 말 잘라먹고 자기 주장 좋아하고 불평을 똑부러진 말투로 늘어놓는 것 뿐이죠.  일을 잘 하는 건 기획안을 몇 분안에 만들 수 있느냐..로 평가되는 게 아니라고 생각해요. 게다가 또박또박과 똑부러짐, 전문적이고, 말빠르고, 목소리크고, 성격급하고, 까칠하고, 고집있는 건 일잘러와는 사실 별 상관이 없어요. 그건 그냥 성격이나 성향문제일 뿐이죠. 회사와 동료 앞에는 모두 co- 접두어가 들어가잖아요. 일의 본질은 '함께' 하는 겁니다. 지가 못하는 게 있으면 도움을 빠르게 요청하고, 내가 잘 하는 게 있으면 부족한 분과 콜라보해서 빨리 끝내고. 일을 '돌아가게' 만드는 사람이 진짜 일잘러가 아닐까욤..

 이 글은 Business Insider의 This Is The Internal Grading System Google Uses For Its Employees — And You Should Use It Too를 번역한 글입니다.A slide from the Doerr deck. Screenshot 구글이 1년도 채 안되었을 때, 목표와 핵심 결과 설정법(Objectives and key Results, 이하 OKRs)을 발명한 인물 중 한 명인 John Doerr(이하 존)는 구글이 이 조직적인 시스템을 쓰는 것에 대해 발표하였습니다. OKR 시스템은 인텔에서부터 왔습니다. 구글은 빨리 OKRs를 적용하였고 그때부터 계속 사용해오고 있습니다. OKRs는 회사, 팀, 개인에게 구조적으로 일할 수 있게 하는 가장 쉬운 방법입니다. 여러분의 회사가 OKRs를 사용하고 있지 않더라고 여러분의 개인적인 삶이나 개인적인 업무에서 사용하면 많은 도움이 될 것입니다.목표(Objective):일이 실행될 수 있을 만한 모델 개발하기. 계획은 아래와 같이 측정될 수 있다.핵심 결과(Key Results):1. 주어진 시간 안에 프레젠테이션 끝내기2. 3개월간의 목표와 핵실결과 샘플 세트 완성하기3. 관리 부서로부터 3개월간의 시험 적용기간 동의받기 작년에 구글 벤처스의 파트너인 Rick Klau(이하 릭)은 1시간 20분간 어떻게 OKRs이 작동하는지에 대한 프레젠테이션을 발표했습니다. 릭은 이 발표에서 구글이 어떻게 운영되는지에 대해 엄청 매력적으로 설명하였습니다. 이 방법은 목표를 완수할 수 있게끔 간단하고 쉽게 따라 할 수 있는 시스템을 만들고 싶은 회사나 개인에게 정말 유용할 것입니다. 자, 한 번 살펴봅시다. 먼저, 여러분은 목표를 설정합니다. 그리고 여러 개의 "핵심 결과"를 설정합니다. 핵심 결과는 정량적이어서 목표를 달성할 수 있도록 설정해야 합니다. 여러분의 목표는 확실해야 하며 측정이 가능해야 합니다. 예를 들어, 나는 내 웹사이트를 예쁘게 만들고 싶다고 하지 마세요. 그 대신 나는 내 웹사이트를 30% 빠르게 만들고 싶다거나 계약을 15% 늘리고 싶다고 정하세요. 릭이 구글의 Blogger에서 일할 때, 그는 각 분기별로 몇 개의 목표를 설정하였습니다. 한 분기의 한 목표는 "Blogger의 평판을 높이자"였습니다. 사이트가 꽤 컸음에도 불구하고 Tumblr와 같이 유명세를 타기 시작한 플랫폼과 비교했을 때 Blogger는 지위를 잃고 있었습니다. Blogger의 평판을 높이기 위해 오른쪽의 슬라이드와 같이 릭은 쉽게 측정 가능한 4개의 결과를 설정하였습니다.릭은 구글이 1년 단위, 분기 단위로 OKRs를 설정한다고 말했습니다. 1년 단위 OKRs는 1년을 위한 큰 우산 아이디어(umbrella idea)이고, 돌같이 변하지 않는 것이 아니라 언제든 진화(evolve)할 수 있습니다. 그러나 분기별 OKRs는 변하지 않습니다.목표(Objective):Blogger의 평판 높이기핵심 결과(Key Results):- 3개의 산업 이벤트에서 Blogger의 리더십을 재정립하기 위한 발표하기- Blogger의 10주년 홍보 계획 잡기- 상위 xx Blogger 사용자를 찾고 개인적으로 접근하기- 음악 블로그를 살리기 위한 DMCA(디지털 밀레니엄 저작권법) 프로세스 확립하기- 정기적으로 re: Blogger 제품에 대한 토론을 열기 위한 @blogger 트위터 계정 만들기 또한 릭은 구글이 회사 레벨, 팀 레벨, 경열 레벨, 개인 레벨의 OKRs를 가지고 있다고 말했습니다. 그들은 회사를 지속적으로 궤도에 올리기 위해 함께 일하죠. 릭은 구글 임직원들이 분기에 4-6개의 OKRs를 실행한다고 했습니다. 만약 여러분이 그것보다 많이 설정한다면 엄청 들들 볶일 거예요(fried). 분기의 마지막에는 여러분이 직접 핵심 결과를 평가합니다. 구글은 0-1 단위의 평가 지표를 가지고 있습니다. 각 결과에 대해 1점을 받는 것이 최종 목표는 아니에요. 여러분은 0.6-0.7점을 받는 것이 목표입니다. 만약 여러분이 1점을 받았다면 너무 쉬운 핵심 결과를 설정한 것이 됩니다.(릭이 덧붙였듯이 "만약 당신이 1을 받는다면 당신은 그것을 부순 것이 아니라 샌드백을 친 것과 다름없다")(Or as he puts it, "If you get 1s, you’re not crushing it, you’re sandbagging."). 만약 여러분이 0.4 이하를 받는다면, 무엇을 잘못했는지 진지하게 살펴보아야 한다고 했습니다. 릭의 예제로 돌아와서, 우리는 그의 목표에 대해 얼마나 잘했는지 살펴볼 수 있습니다. 산업 이벤트에서 발표하기는 쉬웠고 1점을 받을 수 있었지요. 그는 DMCA를 위해 노력했지만 그 과정은 너무나 험난했기 때문에 결과가 좋지 않았다는 것을 이해할 수 있습니다. 또한 릭은 평가는 단 몇 분이면 충분하다고 했습니다. 평가를 위해 많은 시간을 쏟지 말고 목표 달성을 위해 시간을 쓰라고 이야기합니다. 구글에서는 모든 OKRs는 심지어 Larry Page(구글 CEO)의 OKRs 마저도 공개됩니다. 구글의 임직원들은 동료들의 OKRs가 무엇인지 확인할 수 있습니다. 그들의 내부 프로필의 한편에서 바로 확인할 수 있습니다. 당신은 동료들의 OKRs를 확인할 수 있을 뿐만 아니라 지금까지 그들이 달성한 점수 또한 볼 수 있죠. 이것은 우리를 협박하는 것처럼 보일 수 있지만, 이것은 구글러들이 다른 사람이 일하는 것을 이해하는 방식입니다. 릭은 그가 유튜브의 홈페이지를 만드는 일을 맡았을 때를 예를 들어 설명했습니다. 몇몇 동료들은 유튜브에 그들의 제품에 대한 비디오를 업로드하여 홍보하기를 원했습니다. 그들은 릭의 OKRs를 찾아보고 그가 다음 분기 동안 무슨 일을 할지 알았고, 홈페이지에 홍보하기 위해 프레젠테이션을 구성하거나 릭이 다음 분기에 새로운 OKRs를 그릴 수 있도록 그의 머리에 밑밥을 깔아 놓는(plant a seed in his head) 방법을 택할 수 있었습니다.이익(BENEFITS)왜 목표와 핵심결과(OKRs)를 사용해야 하는가- 사고를 훈련하는 방법(주요 목표가 표면화된다)- 정확하게 커뮤니케이션(모두에게 뭣이 중헌지 알게하라)- 진척도를 측정하기위한 지표 확립(우리가 얼마나 왔는지 보여준다)- 노력의 집중(조직이 지속적으로 함께 전진할 수 있다) OKRs는 승진을 위한 관리 툴로 사용되어서는 안 됩니다. 그러나 OKRs는 임직원들이 스스로 얼마나 달성하였는지 살펴보는 툴로는 사용될 수 있습니다. 릭은 만약 자신이 승진을 원한다면, 회사를 위해 그가 무엇을 해야 하는지 OKRs를 통해 알아낼 빠르고 쉬운 시스템을 만들었을 것이라고 말합니다. 이 방법은 꽤나 간단하고 직관적인 거라고 생각되지만 그것은 OKRs의 장점의 극히 일부분일 뿐입니다. 여러분이 일에 집중하는 것을 돕기 위해서는 짧은 리스트만 있으면 되니까요. 아래에 어떻게 OKRs가 작동하는가에 대한 영상이 있습니다:https://youtu.be/mJB83EZtAjc#비주얼캠프 #인사이트 #경험공유 #조언

회사 복도에서 "커머스 관련 실무를 하시면서 도움을 받았던 책을 소개해주세요" 라는 말을 듣고 추려보았습니다. 제가 소속되어 있는 회사인 블랭크코퍼레이션 (blankcorp) 는 제품 기획부터, OEM 공장을 통한 생산/발주 관리, 자사몰 및 외부 유통망을 통한 판매, 제품에 대한 고객상담 응대 등을 인하우스에 직접 하는 곳입니다. 이 과정을 운영하며 단계별로 막혔을 때, 큰 도움을 받았던 책 6권을 소개하고 추천드립니다.  제품을 기획하고 판매하는 과정을 크게 나누면 이렇게 6가지로 나눌 수 있을텐데요. 각 단계별로 책을 1권씩 선정했습니다. 1) 제품을 기획하고: 퇴사준비생의 도쿄2) 디자인하고: 무인양품 디자인3) 생산/유통 프로세스를 관리하고: 무인양품은 90%가 구조다4) 유통망에서 입점 및 배포하여 판매하고: 돈키호테 CEO5) 고객의 문의에 응대하고: 딜리버링 해피니스6) 점진적으로 브랜드를 구축한다 : 코카콜라 어니스티의 기적  제품을 기획하는 단계에서 : 퇴사준비생의 도쿄*책 제목 클릭 시 서점으로 이동합니다. (이하 동일) 퇴사준비생의 도쿄, 이동진 외 지음일본 도쿄에서 발견한 제품 및 브랜드, 공간에서 저자가 느낀 인사이트를 담고 있습니다. 스쳐지나갔다면 알기 어려웠을 일본 특유의 디테일함을 잘 짚어주어 직간접 적으로 제품에 서비스에 반영할 수 있었습니다. 또한 지난 2017년 1월에는 책에 나와있는 장소 위주로 개인적으로 인사이트트립을 다녀왔습니다. 도쿄는 같은 동아시아권에 라이프 사이클이 한국보다 약간 더 빨라 제품기획참고 및 브랜딩경험 답사로 많이 가는 도시이니 직접 다녀오시는 것과 책으로 간접 경험 하시는 것 둘 다 추천 드립니다! (경험은 늘 옳습니다) 인사이트 트립 관련하여 지난 2017년 1월에 저와 남편이 같이 다녀온 장소들을 구글지도로 공유합니다.라이프스타일 브랜드가 많이 입점해 있는 곳과 매장 디스플레이에서 배울 점이 있는 곳, <퇴사준비생의 도쿄> 에 수록된 장소 등을 고려하여 40여곳 선정하였습니다. 장소 좌표 https://drive.google.com/open?id=19Qjy0KJ6pMQEi_apzodbbz9pNh8&usp=sharing인사이트트립에서는 제품패키지, 유행하는 제품파악, 미래기술, 공간 체험 등 주로합니다. 사진보니 또 가야겠네요!디자인하는 단계에서 : 무인양품디자인무인양품디자인, 닛케이디자인 지음21세기 제품 기획과 판매에서 무인양품을 빼놓고는 말하기 어렵죠.제가 도움을 받은 부분은 part 3의 매장 디자인 부분입니다. 무인양품 아오야마 산초메, 삿포로 팩토리, 도쿄 미드타운 등 무인양품의 대표 매장을 어떤 논리로 디자인했는지를 설명하는데요. 역으로 제품을 만드는 입장에서 오프라인 매장에 제품이 들어갔을 때 어떻게 보일 지를 생각하게 되었습니다. 책 중간에 삽입 되어있는 하라 켄야 등 무인양품의 메인 디자이너의 인터뷰를 읽어보시는 것도 쏠쏠한 재미입니다. 생산 관리하는 단계에서 : 무인양품은 90%가 구조다무인양품은 90%가 구조다, 마쓰이 타다미쓰 지음무인양품의 마쓰이 타다미쓰 대표가 직접 지은 책입니다. 읽으면서 '정말 실무 하시는 분이 쓰셨구나'라는 말이 연신 나왔습니다. 바로 실무에 적용할만한 포인트도 그만큼 많았고요. 책의 요지는 시스템화를 통한 관리입니다. 제품 생산공장에게 수발주 및 안전재고 관리하는 부분뿐만 아니라 그 윗 단계인 전사적인 자원관리의 개념을 배울 수 있습니다. 책이 온통 밑줄로 가득 찰 정도로 열심히 읽은 책입니다. :)무인양품 마쓰이 타다미스 회장 인터뷰https://youtu.be/2j6ufIWnIDQ유통망에서 제품을 판매하는 단계에서 : 돈키호테CEO 돈키호테CEO, 야스다 다카오 지음창업 후 27년간 단 한 번의 매출 하락 없이 승승장구해온 (스고이!) 일본 잡화점 돈키호테의 CEO, 야스다 다카오가 직접 쓴 책입니다. 책이 얇고 쉬운 언어로 작성되어 잡고 나면 후딱 읽힙니다. 여기도 27년의 실무 노하우가 아주 많은데요. 창업 초기 (대략 20~30여 년 전)의 방법론을 직접 적용하기보단, 어떤 원리로 플랫폼을 만들었는지에 주목하며 보았습니다. 특히 제품을 유통하는 직원이 고객 최접선에 있다는 사실을 인정하며 많은 자율권을 분 부분에서 큰 배움을 얻었습니다. 고객의 문의에 응대하는 단계에서 : 딜리버링해피니스딜리버링 해피니스, 토니 셰이 지음커머스를 하시는 분 중에서 이 책 안 읽어보신 분은 없을 거라 생각합니다. 아마존에 인수된 자포스의 CEO인 토니 셰이가 쓴 책입니다. "고객 행복을 극대화하라"라는 큰 메세지하에 자포스의 초기부터 아마존 인수 때까지의 여정을 그리는데요. 저는 고객 LTV (life time value) 관점을 인상 깊게 보았습니다. 고객 행복이 결국 LTV를 증가시켜 훨씬 더 큰 이익을 보장할 수 있다는 믿음을 얻었습니다. 다만, 자포스(신발 전문 포털사이트)와 같은 플랫폼의 LTV와 개별 커머스 쇼핑몰(자사몰 등)의 LTV의 계산 공식이 같을 수는 없으니 이 부분은 독자분이 취사선택하여 읽으시면 좋겠습니다. 브랜딩을 진행하는 단계에서 : 코카콜라가 감동한 어니스트 티의 기적코카콜라가 감동한 어니스트티의 기적, 세스골드먼/베리 네일버프 지음미국에서 찻 잎을 직접 우린 티를 만들고 코카콜라에 인수된 어니스트 티의 두 창업자 세스 골드먼과 베리 네일버프 교수가 쓴 책입니다. 만화로 되어 있어 더욱 몰입감 있게 읽히는데요. 제품 기획부터 패키지 디자인, 직접 생산, 그리고 공장을 매입하고 규모 있게 양산해가는 과정과 역경이 생생하고 재밌게 담겨있어 전방위적으로 배울 것이 많습니다만, 다른 책과 달리 창업자가 티(tea)를 만들면서 제품 철학을 담은 패키지 디자인을 하고, 이후 생산과정에서 철학을 지키는 부분이 잘 나타나 있기에 브랜딩 부분으로 특히 추천드립니다. 창업자 두분은 이렇게 생기셨습니다. (출처: 교보문고)창업자분들 사진과 그림이 많이 닮았죠? 만화라서 쉽게 읽히지만 내용은 결코 가볍지 않습니다. 커머스를 시작하기 전에 가장 먼저 읽어야 할 책이 무엇이냐고 물으면,전 <어니스트 티의 기적> 을 추천하겠습니다. 이렇게 이상 6권의 책을 소개하고 추천드렸는데요. 전체 책 6권 중 4권이 창업자 혹은 현직 CEO가 쓴 책인 것을 보니 생생한 경험이 녹아있는 책을 선호하는 개인의 성격이 반영되지 않았나 생각합니다. 그럼 이번 주말에 쉬엄쉬엄 읽어보시면 어떨까요? 고민하시는 부분의 작은 실마리가 되길 바라겠습니다.  장아라blankcorp

 최대한 개발자, 디자이너, 기획자 어느 한 직군으로서가 아닌 중립적 입장에서 이야기하고 싶지만, 저는 기획을 가장 중점으로 하였고, 다른 부분들에는 아무래도 많은 배경지식이 상대적으로 매우 적어서 지금부터는 기획자로서 기획에 관하여 더 집중적으로 설명드리도록 하겠습니다. "기획"의 사전적 의미는 "어떤 대상에 대해 그 대상의 변화를 가져올 목적을 확인하고, 그 목적을 성취하는 데에 가장 적합한 행동을 설계하는 것을  뜻함."입니다. 즉, 서비스 제작을 시작하면서 그 서비스가  어떤 문제점을 어떤 방식으로 어떻게 해결할 것인지를 설계하고, 어떤 결과가 있을 것인지 예측하고, 이를 위해 어떻게 서비스를 제작할 것인지를 판단하는 모든 업무를 기획이라고 합니다. 그리고 이를 위해선 이용자들이 이해하는 서비스보다 두 단계 세 단계 더 깊은 서비스에 대한 인사이트를 발전시켜 나가야 합니다. 그리고 이러한 기획과 계획을 팀원들(디자이너/ 개발자/ 마케터들 등)과 공유하고, 모두가 원하는 서비스를  제작할 수 있도록 개선하는 것이 기획자의  업무입니다.  이를 위해 기획자는 시장과 산업에 대한 조사를 진행하고, 예상 이용자들을 사람들을 만나고, 또 Legit 한 기획서를 작성하고, 서비스에 대한 프레임워크, 목업 등을 작성하는 등 다양한 업무를 진행해야 합니다. 그렇기 때문에 기획이란 업무 자체도 커뮤니케이션, 서비스 제작 관리, 서비스 기능에 대한 간결하고 정돈된 상세 설멍 등의 전문성이 필요한 분야이고, 계속해서 공부를 놓으면 안 되는 분야일 뿐만 아니라, 많은 창의성을 필요로 하는 분야입니다. 그래서 이번장에서는 1. 기획자로서의 핵심적 요소 2. 기획자의 업무들/ 기획자들이 사용하는 용어 정리 3. 기획서를 두서 있게 잘 작성하는 방법  을 위주로 설명해 드리도록 하겠습니다. 다른 팀원들이 전문적인 소프트웨어를 사용하고, 내가 모르는 전문적인 지식을 가지고 업무에 일하는 것을 보고 "내가 하고 있는 분야에 대한 전문성이 떨어지는 것이  아닐까..."라고 생각하시는 분들도 있을 거라 생각됩니다. 그렇다고 기획자의 업무가 절대 다른 분야들에 비해서 전문성이 떨어진다는 생각은 절대로 하지 마세요. 서로의 업무에 관해서 존중이 필요한 것과 같이, 여러분이 하시는 업무 역시도 전문성을 기반으로 하는 업무이고, 책임감을 가지고 더 열심히 어떤 부분을 공부해야 더 효율적인가를 끊임없이 찾아 공부하셔야 더 좋은 기획, 더 좋은 아이디어를 가질 수 있다는 것이 저의 생각입니다!#코인원 #블록체인 #기술기업 #암호화폐 #스타트업인사이트

[라이더소개 #15. '아름다운' 라이더, '자밀라']자밀라를 소개합니다! :)Q1. 자밀라, 어떻게 아띠인력거를 처음 시작하게 된거야?작년 아띠에서 열었던 욜로윈(Yoloween: YOLO + Halloween 아띠스타일의 할로윈파티) 파티에 온이 날 초대했는데 그때 이후로 시작하게 됐어. 그 전에도 아띠에 대해서 알고는 있었어~ 내가 그때 대학교에서 청강을 하는 수업 과제 주제로 ‘아띠인력거’나 ‘사직동 그 가게’로 하자는 의견이 있어서 아띠랑 그 가게에 둘 다 컨택을 하면서 IJ 인터뷰를 했었거든. 아띠에 대해 더 자세히 알게 됐고, 매력적이라고 느꼈지. 그래서 욜로윈 파티에 가는 것까지 이어진 거야. 모르는 사람들 만나는 낯선 자리였는데도 분위기도 정말 좋고, 아띠 애들도 너무 좋더라고~ 아띠인력거를 끄는 사람들을 처음 만났을 때 그 느낌 때문에 라이더에 도전하게 됐어.사실 그 전에 알고 있던 아띠는 그렇게 날 확! 끌어당기진 않았거든. 그런데 매력적이라고 생각이 들면 일단 해보라고 하더라고! 정말로 아띠의 진면목은 직접 해보지 않고서는 알 수 없는 것 같아.(웃음) 나도 아띠가 멋있다고 생각은 했지만, 그건 그냥 막연한 거였지, 진짜 마음으로 느끼지는 않았던 거야. 그런데 그 막연했던 것들이 구체적으로 변하게 된 계기는 IJ와 온을 통해서 아띠에 대해 계속 알아가고, 또 욜로인파티를 갔을 때 아띠 멤버들을 보고서 ‘와, 진짜 멋있다’라고 느낀 거였어. 그리고 직접 해보고 나니 더 매력적이었어.Q2. 첫 라이딩했을 때는 어땠어?아, 죽을 것 같았어.(웃음)힘들긴 되게 힘들더라구. 솔직히 말하면, 30분 코스는 할 수 있을 것 같은데1시간 라이딩하면1시간은 쉬어줘야 할 수 있을 것 같아.(웃음) 근데 나는 돈 때문에 시작한 게 아니었기 때문에 지금처럼 뉴비로 공짜로 태워드리든, R1이 되어서 돈을 받고 태우든 그건 나한테 그렇게 중요하진 않은 것 같아. 그냥 아띠 유니폼을 입거나,아띠인력거를 타고서 라이딩을 할 때 느낄 수 있는 그 자유로움이 있어. 왜 그런 거 있잖아.길을 가다가 아무 연고지도 없는데 옆 사람한테 말을 걸면 그건 이상한 사람이야!근데 아띠는 그 벽을 다 뛰어넘게 해줘.난 그게 되게 매력적이라고 느꼈어.아띠의 정체성에도 이게 포함되어있는 것 같아. 인력거를 타면 나이든 인종이든 제한 없이 길가는 사람한테 웃으면서 인사해도 ‘쟤 뭐야’ 이렇게 썩소를 날리지 않아.(웃음) 그런 게 되게 좋았어.사람과 사람 사이의 벽을 허물 수 있게 만들어주는 것 같아.인력거를 처음타고서 그런 느낌이 제일 좋았고,그래서 해보고 싶다는 생각이 계속 들었던 것 같아.Q3. 제일 기억에 남는 손님은 어떤 손님이이야?저번에 내가 업어줬던 남매! Q4. 아, 그 사진! 대체 왜 업었던거야?(웃음)한옥마을쪽으로 가는 길이 살짝 오르막길이잖아. 눈에 확 띄는 언덕보다 살짝, 길게 있는 오르막길이 더 힘들거든. 근데 다른 사람 눈에는 평지처럼 보이는 길이라 생색도 못내는 그런 오르막길.(웃음)아무튼 그때 그 오르막길을 오르면서 힘들게 겨우겨우 도착했는데, 남자 아이가 인력거를 더 타고 싶다고 너무 신이 나서 쌩쌩 날아다니는거야. 그래서 어떻게 할까 생각을 하다가, ‘우리 한옥마을까지 달리기 경주를 하자!’ 한거야. 이 아이들을 인력거에 태우고 달리는 것 보다, 달리기 경주하는 게 훨씬 수월하다고 생각이 들었던 거지! 그래서 신나게 달리기 경주를 하고나니까 그 아이가 이제 힘들다면서 못 걷겠다고 하더라고! 그래서 나한테 업어달라고 한거야. 그래서 업었지.(웃음)근데 업고나서 드는 생각은, ‘그래도 이 아이를 업는 게, 인력거 태우고 달리는 것 보다 가볍다!’였어(웃음)Q. 아이구~ 그 정도로 힘들었어?왜냐면, 일단 라이딩을 할 때는 다리만 쓰잖아. 근데 업고 걸을 때는 위쪽 몸을 써서 움직이니까 더 가볍게 느껴졌던 거야. 가볍다고 또 업고 뛰었어.(웃음)그렇게 잘 놀고 내려오는데, 갑자기 또 애가 쉬 마렵다고 바지를 아무대서 내리려고 하는 거야!(웃음) 한옥마을은 거주지잖아! 화장실 여기에는 없고 아래쪽에 식당이 있으니까 조금만 참아보라고 했는데도 못 참겠다고 그러더라고. 그래서 마침 한옥집 앞에 계신 아주머니한테 양해를 구해서 가까스로 화장실까지 찾아서 데리고 갔지.그런데 그 친구가 이번엔 자기가 인력거를 끌고 싶다고 하는거야. 그래서 끄는 건 안 되고, 사진 찍어 줄테니까 ‘끄는 척’하라고 하면서 안전장치 해놓고 사진도 찍어줬어.(웃음) 나중에는 그 아이 누나가 부모님 만나서는 동생이 이 언니 너무 괴롭혔다고 말하더라고. 걔라도 알아줘서 너무 고마웠어.(웃음)나도 남동생이 둘인데, 나도 어렸을 때 이랬겠구나 싶더라고. 남동생 케어하면서 주변에 피해주지 않으려는 누나가 짠하기도 하고. 여러모로 감회가 새로웠어. 워낙 말썽꾸러기였고, 최근이어서 그런지 가장 기억에 남아. 아무튼 좋았어. 아이러니하게도.Q5. 대단하다! 가장 힘들었을 때도 이때였겠네?응. 근데 또 있어.(웃음) 현아랑 초등학생 3명씩 태웠던 적이 있는데, 30분만 태우기로 했었는데 현아가 45분정도로 더 태워줬던 거야. 그때 4시까지 카페에 바톤터치하러 갔어야 됐는데, 거의 3시 50분까지 라이딩을 했던 것 같아. 애들은 빨리 달려달라고 하고, 카페에는 빨리 가야하고, 그래서 정신적으로, 육체적으로 힘들게 투어를 간신히 끝내고 미친 듯이 달려갔는데, 허벅지가 천근만근이더라고. 그 때 엄청 힘들었지.(웃음)초등학생 아이들 태웠을 때 제일 힘든 것 같아.내가 마치 말인 것처럼 애들이 나한테 체찍질하면서자꾸 빨리 달려달라고 하니까.(웃음)힘들긴 한데 그래도 나름 재미있어!Q6. 자밀라가 제일 좋아하는 길은 어디야?윤보선가에서 안국역까지 내려가는 길이 가장 좋아. 내리막길로 슝~ 내려가는 그 길! 그렇게 역까지 데려다주는 코스가 제일 좋아.(웃음) 코스라고 하기엔 좀 그런.. 그냥 길이지만. 외국에는 인력거를 이렇게 택시처럼 이용하는 경우가 되게 많아. 나한테는 매우 매력적인 길이야(웃음)Q7. 여자라서 힘든건 없었어?여자라서 그런 건 힘들지 않았어. 어차피 인력거를 타고 현장에 나가면 남자랑 가든 여자랑 가든 각자 따로따로 움직일 수밖에 없거든. 그래서 오히려 홀로 있는 데에 익숙해지고 뻘쭘해하지 않을 수 있어야 하는 것 같고, 여자건 남자건 그건 크게 중요치 않은 것 같아.유대감 같은 건 카페에 오거나, 점심을 같이 먹거나 뒷풀이할 때 생기는 것 같아. 인력거 끌면서도 친해질 수 있지만, ‘네가 힘들었던 그 코스를 나도 갔었다’라는 그런 공감대형성이라는 부분에서 오는 친밀함이 있는 것 같아.Q8. 자밀라 바쁘지만 라이딩 하고싶을 때는 언제든 나와!내 개인 스케쥴 상으로 마지막 순간, 그 ‘라스트 미닛’에 결정되는 일들이 많아서 미리 미리 사인업하는 게 조금 힘들더라구. 그렇다고 했다가 취소할 수는 없잖아. 갑자기 당일에 시간이 되는데 미리 사인업을 못해서 라이딩을 못할 때가 가끔 있었어. 그래서 드는 생각인데, '라스트 미닛'에도 참석할 수 있는 이벤트 같은 날이 있으면 좋을 것 같아! 그런데 그렇다고 기본적인 룰에 어긋나는 예외적인 상황을 만드는 건 안 좋은 것 같아. 이게 여러 번 쌓이다보면 장기적으로 봤을 때 아띠에게 좋지 않은 것 같아서 그런 부분은 최대한 내가 자제하려고 하지. 어쩌다 한 두 번은 괜찮을지 모르겠지만, 나도 사람인지라 그게 습관이 되면 무서운 거거든. 그런 예외가 한번 무뎌지는 순간이 와. 그래서 왠만하면 룰에 벗어나는 거는 안하고 싶은 거지. 난 아띠가 잘됐으면 좋겠어!(웃음) 그리고 오래가려면 기본에 충실해야하고, 조직화가 잘 되어있어야 돼. 그런데 어떤 조직이든지 그러다보면 딱딱해지거든. 아띠가 성장하는 만큼 아띠의 정체성을 잃지 않으려면 뭔가 끊임없는 반전이 한번 씩 필요한 것 같아! 그런 재미를 어떻게 만들어가느냐가 되게 중요한 Key가 될 것 같아.Q9. 마지막으로 아띠인력거 라이더에 관심이 있는 사람들에게 한마디 한다면? 주저하지 말고 해보고 싶다는 마음이 들었다면 도전해봤으면 좋겠어. 내가 봤을 때 아띠의 매력은 들어오지 않고는 느낄 수 없어! 그래서 겉으로 봤을 때 매력적이라고 느꼈으면 들어와서 직접 느껴봤으면 좋겠어. 그런데 누구에게나 아띠가 맞을 거라고 생각하지는 않아. 하지만 분명히 맞는 사람도 있어. 그러니까 들어와서 느껴보고 경험해봐! 일단 질러봐!(웃음)아띠인력거의 이웃사촌 & 아지트 '카사 자밀라'의 자밀라였습니다!언제나 열린마음으로 끊임없이 도전하는 자밀라를 응원하며 인터뷰를 마칩니다. :)#아띠라이더스클럽 #팀원소개 #팀원인터뷰 #팀원자랑 #기업문화 #조직문화 #사내문화

“남들이 부러워하는 직장을 왜 그만둬?”제가 가족, 친구들에게 이직을 생각하고 있다고 얘기했을 때 제일 많이 들은 말이었습니다.저는 2003년부터 최근까지 짧지 않은 기간을 모건 스탠리(Morgan Stanley), UBS 홍콩과 서울에서 Research Analyst로 근무했습니다. Analyst는 담당 산업 전문가로 자신의 이름을 건 리포트를 발간하고, 전 세계에 있는 이른바 ‘큰손’ 기관투자자들에게 발표하는 직업입니다. 애널리스트라는 직업에는 여러 가지 매력이 있습니다. 명예와 금전적인 부분들도 있지만 가장 매력적인 부분은 훌륭한 사람들을 많이 만날 수 있다는 점입니다. 저도 좋은 회사 동료들과, 유수의 기업의 최고경영자들을 포함한 많은 분들, 국내외 기관투자자들, 그 외에도 담당 산업의 최고의 전문가들을 만날 수 있는 기회가 많이 있었습니다.애널리스트로 근무하던 시절 받은 트로피들UBS 아시아태평양 지역 본부인 홍콩에서 근무하던 시절대학교를 졸업하고 첫 직업으로 analyst가 될 수 있었다는 것은 참으로 감사한 일이었습니다. 그런데 왜 이직을 했냐고요?Analyst라는 직업은 기본적으로 외부 투자자의 입장에서 담당 산업과 이에 속한 기업들을 분석하여 주식의 가치를 평가하는 것입니다. 다른 사람들의 경영의 결과를 외부에서 평가하는 일이라고 볼 수 있습니다. 저는 이러한 업무를 하면서 '내가 직접 경영에 참여해보고 싶다'는 생각을 하게 되었습니다.외부의 시선을 넘어 내부에서 직접 실행하기로 기존의 익숙한 영역에서 벗어나 새로운 사업에 뛰어들기 위해서 필요한 도전의식, 기획력, 실행력은 제가 이제껏 동경하였으나 경험해보지 못한 부분들이었습니다. 이제 30대 후반의 나이, 더 늦기 전에 저도 그런 부분들에 도전해보고 싶었습니다.또 analyst라는 직업은 많은 것이 주어지는 만큼 계속 결과물을 내놓아야 하는 직업이기도 합니다. 출장도 잦고 사무실에서 긴 시간을 보내야 하는 날들도 많았습니다. 결혼하고 아이가 생기면서 이런 부분에 대한 고민도 생겼습니다.그런 고민들을 하던 중에 핀다를 만났습니다. 대기업 전략팀에서 근무하다가 연쇄 창업가로 성공한 이혜민 대표와 미국에서 대학원을 졸업하고 유수의 금융사에서 근무하던 박홍민 대표가 함께 금융상품의 아마존을 만들겠다는 얘기를 들었을 때 무척이나 매력적인 아이템이라고 생각했습니다. (핀다의 공동대표인 박홍민 대표는 고등학교 그리고  대학교에서 같은 반이었던 오랜 친구이기도 합니다. 참 질긴 인연이죠.)국내 온라인 쇼핑은 이미 전체 소매 시장의 20% 차지하고 있는 데에 반해, 은행들과 보험사들의 경우 온라인의 비중이 아직 5%에도 못 미친다는 점 그리고 금융기관들이 지출하는 중개 비용이 굉장히 큰 규모라는 점을 고려했을 때 좋은 사업 기회가 될 것이라고 생각했습니다.애널리스트였을 때 저의 역할은 사업 아이템 얘기를 들었을 때 ‘좋은 기회 같아 보이네’라고 평가를 하고 기업이 그 아이템을 실제 사업으로 잘 현실화하는지 외부에서 지켜보는 것이었습니다. 하지만 이제는 핀다의 CFO로 그 사업을 현실화시키기 위해서 핀다의 모든 팀원들과 함께 노력해야 합니다.Startup CFO:  from Finance to BusinessCFO로서의 기본적인 역할은 재무적인 부문을 관리하는 것이지만 스타트업 회사의 특성상 여러 가지 업무를 같이 합니다. 이혜민 대표, 박홍민 대표와 핀다의 전략과 목표들을 설정하고, 금융기관들을 만나서 핀다와 협력하자고 설득하고, 계약서를 작성하고, 어떻게 많은 이용자들이 핀다를 찾게 할지 또 어떻게 해야 핀다를 찾은 이용자들이 편리하게 자신에게 딱 맞는 금융상품을 찾을 수 있을까 고민합니다.핀다에서 저는 두 공동대표 외에도 (이전 직장에서는 접할 기회가 없었던 분야인) 마케팅, 개발, 디자인 전문가분들과도 함께 일하고 있습니다. 젊고 활기찬 분위기에 함께 회사를 만들어가는 생동감 넘치는 에너지가 느껴져서 설렙니다. 제가 이전 직장에서 일하면서 얻은 분석력과 재무 지식, 금융시장에 대한 이해를 활용하고, 아울러 다른 팀원들에게 새로운 분야를 배워나가면서 함께 최고의 핀테크 회사를 만들고 싶습니다.2017년 5월 핀다에서 첫 발걸음을 내딛으며Finda's CFO 배정훈 드림Josh Junghoon Bae #핀다 #스타트업CFO #스타트업일상 #조직문화 #기업문화

나의 첫 휴학을 마무리하며 쓰는 글약 1년간 팀원들과 함께 그려왔던 보맵이 드디어 출시되었다. 보험 = 엄마가 관리하는 것 이라는 만연한 생각을 가지고 있던 나에게 보험을 팔지 않는 보험지갑앱은 굉장히 매력적으로 다가왔었다. 남녀노소에게 알리고 싶은 앱이자 굉장한 파급력을 지닌 앱이 될 것이라는 판단을 시작으로 레드벨벳벤처스와 함께한지 11개월. '보험'이라는 두 단어만으로 사람들이 느끼는 불신과 부정적인 인식은 내가 상상한 것보다 훨씬 그 이상이었다. 실적제의 보험설계사들이 보험을 판매하는 구조인 우리나라에서 어쩌면 이 구조 자체가 크고 작은 보험사기가 만연하게 되는 이유라고 생각했다. 하지만 소비자 개개인의 보험지식 확대와 빅데이터 분석을 통해 개인화된 고객 맞춤 서비스가 제공된다면 그 어떠한 인식이라도 차차 바꿔나갈 수 있을 것이다. 결국 이 글의 목적은 보험시장의 새로운 페러다임을 항해 보맵이 큰 한 발짝을 내딛었음을 알리는 것. 보맵 화이팅! 레드벨벳벤처스 화이팅!#보맵 #레드벨벳벤처스 #인사이트 #팀워크 #팀원 #성장

관리선어항2019년 어항관리선 어항정화활동 개시- 청결한 어항환경과 안전한 어항 조성을 위한 어항관리선 활동 개시 -  지난해 어항관리선 12척은 국가·지방어항 229개항을 대상으로 항내의 해양폐기물을 24,771톤을 수거하여 쾌적한 어항환경조성에 노력하였다. 올해에도 한국어촌어항공단의 어항관리선이 쾌적하고 아름다운 어항환경 조성을 위해 어항정화 활동을 개시한다.   어항관리선 12척 (50톤급 9척, 100톤급이상 3척)이 상호연계정화를 통하여 2월부터 11월까지 10개월간 동·서·남해안에서 225개의 국가·지방어항을 중심으로 1척당 120일씩, 해양폐기물 24,780톤 수거를 목표로 정화활동을 실시하여 지속적으로 어업인의 삶의 터전인 어항환경개선을 위해 노력할 예정이다.  이를 위해 지난 1.24~25일 2019년 어항관리선 상반기 업무협의회를 개최하여 △ 청결한 어항환경 조성을 위해 어항관리선 상시수거시스템 구축 △ 어항환경개선효과 측정을 위한 어항환경모니터닝 실시 △ 선박 해난사고 급증 관련 선박 안전관리 강화 등 올해의 운영 중점 추진방향에 대한 업무협의를 진행하였다. 청결한 어항환경 조성을 위해 지자체, 수협 및 어업인의 정화요청 의견을 수렴하여 225개항(국가어항 102개항, 지방어항 123개항)을 선정하고 효과적인 어항정화를 위해 해역별, 항구별 특성에 맞는 정화활동을 하고, 태풍·적조·괭생이 모자반 등 국가재난 발생 시 긴급출동으로 다목적 어항관리선 기능을 최대한 발휘하여 국가재난 해소에도 적극 지원할 계획이다. 또한 어항정화개선효과 측정을 위하여 해역별 5개항(총15개항)을 대상으로 어항정화 전·후 환경개선 효과를 모니터링하여 어항환경변화에 대한 기초자료를 구축하고 있다. 마지막으로 어항오염 사전예방 및 사후관리 활동을 강화하기 위해 지역학교 및 어업인 대상 어항환경 정책교육 및 “쾌적한 항, 다시 찾고 싶은 항” 캠페인 실시 등 어항이용자를 대상으로 어항오염 사전예방활동도 지속적으로 진행할 계획이다.#한국어촌어항공단 #FIPA #기업문화 #업무환경 #직무정보 #어항환경개선 #공공기관

이투데이 청춘반란 시리즈의 6번째 인터뷰이(inverviewee)로 핀다(Finda) 이혜민 대표님이 소개되었습니다. 핀다와 핀다의 금융상품 정보 에 대해 더 깊게 알아보는 기회가 되시기를 바랍니다! 이투데이 기사 원문보기 260개 금융기관 7000여개 상품 정보 이해하기 쉽게 표준화…맞춤형 비교·검색 고객에 최적 상품 추천… 月 30만명 방문 똑부러진 목소리와 열정이 담긴 눈빛. 이혜민(35) ‘핀다’ 대표는 3차례의 창업 경험으로 잔뼈가 굵은 스타트업 대표답게 인터뷰 내내 뚜렷한 목표와 방향성을 제시했다. 창업 시장에서 산전수전 다 겪은 그가 선택한 네 번째 창업 아이템은 바로 ‘금융’이다. <이혜민 핀다 대표는 2일 이투데이와의 인터뷰에서 “단순한 금융 서비스를 제공하는 데서 더 나아가 개인 맞춤형 자산관리 서비스를 제공하는 게 목표”라고 말했다. 사진=이동근 기자 정보의 비대칭성 해소하고 금융도 쇼핑하듯 이용하자“정보 격차가 가장 심한 분야는 금융이라고 생각합니다. 30년 전이나 지금이나 어렵고 불친절한 금융 서비스를 누구나 쉽고 편하게 이용할 수 있게 만들고 싶었습니다.” 이 대표가 금융정보 서비스 앱 ‘핀다’를 창업하게 된 계기는 자신의 경험에서 나온 운명적인 선택이었다. 대출을 받으려고 은행을 찾았던 그는 창구에 앉자마자 머리가 백지 상태가 됐다. 당시 이렇다 할 수입이 없던 그에게 은행은 높고 두꺼운 벽처럼 다가왔다. 게다가 금융 지식이 없던 그는 은행원의 설명을 하나도 알아들을 수 없었다. 심지어 어떤 금융 서비스가 필요한지 감도 잡히지 않았다. 그는 “필요성을 느끼면 주위에 확인하는 걸 습관적으로 한다”며 “나만 필요한 게 아니라 모든 사람이 느낀다면 사업성이 있다고 생각하는데 마침 주위에 나와 비슷한 고민을 하는 사람들의 의견을 들을 수 있었다”고 말했다. 본능적으로 창업을 떠올렸다. 그는 곧바로 팀을 꾸리고 2015년 10월 금융 정보를 서비스하는 ‘핀다’를 설립한다. 핀다는 판매자와 구매자, 공급자와 수요자 간 금융 정보의 비대칭을 해소하기 위해 탄생했다. 금융 서비스도 쇼핑몰에서 옷을 구매하듯 구매자가 1분 안에 원하는 상품의 정보를 얻고 선택할 수 있도록 도와줘야 한다는 생각이 창업의 바탕이 됐다. 핀다는 국내 260여 개 금융기관의 7000여 개 금융상품 정보를 수집, 사용자들이 이해하기 쉽게 표준화해 제공하고 있다. 금융감독원의 오픈 API(응용프로그램 인터페이스)뿐 아니라 제휴 금융기관의 API를 통해 상품 정보를 직접 전달받는다. 제휴사는 신한은행, KEB하나은행, KB국민카드, 우리카드, 신한카드, 삼성카드, 현대카드, 케이뱅크 등 금융사와 렌딧, 어니스트펀드 등 핀테크사 31곳이다. 이를 통해 주택담보·신용·자동차·P2P 등 대출, 예·적금과 P2P투자 및 펀드 등 투자, 신용·체크카드, 보험상품 등 카테고리별로 상품 비교를 통해 고객에게 최적화된 상품을 추천해준다. 월 방문자 수는 30만 명을 기록 중이며, 지난해 4분기부터 매출이 발생하고 있다. 특히 지난해 11월에는 대화형 상담이 가능한 챗봇 기능을 도입했다. 챗봇에 들어가는 상품 추천 알고리즘과 대화 로직은 6개월의 개발 기간을 거친 순수 자체 기술이다. 이 대표는 “이달 정식 모바일 앱 출시에 앞서 오픈베타 버전을 내놨다. 현재 신용정보사와 기밀유지협약(NDA)을 검토 중으로 조만간 정식 앱 서비스를 시작할 수 있을 것으로 보인다”며 “앞으로 개인의 데이터를 토대로 맞춤형 금융서비스, 궁극적으로는 자산 관리 서비스를 제공하는 것이 목표”라고 말했다.  성공에 안주하지 않고 끊임없이 도전 이 대표는 2007년 STX에 입사해 해외영업을 담당했는데, 금액이 큰 대기업의 글로벌 사업인 만큼 호흡이 길었다. 일은 재미있고 배울 것도 많았지만 업무가 피부에 와닿지 않았다. 그는 5년차가 되던 2011년 고민 끝에 회사를 나와 창업 시장에 뛰어든다. 자신의 의사 결정이 곧바로 회사 경영에 반영되고 현실화될 수 있는 일을 찾기 위한 도전이었다. 잘나가던 대기업을 때려치우려니 주위의 만류도 많았다. 성공에 대한 확신도 없었다. 이 대표는 “내가 가장 취약한 부분, 악조건을 골라 창업해 보고 싶었다”며 “대기업에서는 항상 선택하는 입장에서 영업에 취약했고, 이 부분을 가장 어렵게 느꼈던 터라 발품을 팔고 영업하는 업종으로 창업을 결심했다”고 회상했다. 자본금이 넉넉지 않았던 그는 ‘로켓인터넷(Rocket Internet)’이라는 독일의 벤처 투자 및 육성 회사의 투자, 인큐베이팅을 받아 ‘글로시박스’라는 화장품 정기 배송 스타트업을 창업한다. 미국의 ‘버치박스(Birch Box)’에서 아이디어를 얻은 국내 최초 화장품 정기 배송 업체다. 창업 6개월 만에 손익분기점에 이를 정도로 빠르게 성장했고 스타트업으로선 꿈 같은 일인 해외 진출도 이뤄냈다. 이후 유아용품·유기농 식재료 정기 배송 서비스 ‘베베앤코’를 창업했다. 화장품에서 유기농 식재료로 내용을 바꾼 것이다. 이 대표는 “태풍이나 자연재해로 인해 식재료 수급이 어려웠고, 무엇보다 당시 유기농에 대한 인식이 그리 높지 않을 때라 사업을 성장시키기 어려워 결국 접었다”고 말했다. 이 대표는 세 번째 사업을 구상하던 중 미국 뉴욕의 워크스마트랩스라는 건강관리 관련 앱 개발회사를 알게 된다. 이 팀과 협업을 결정하고 건강관리 앱 회사 ‘눔’을 만든다. 뉴욕에 본사를 둔 눔에서 그는 한국 법인 대표를 맡는다. 사업 1년 만에 137만 명의 회원 유치에 성공, 건강관리 앱계의 ‘우버’로 불리면서 화려하게 재기한다. 4차례의 창업을 통해 이 대표는 본인만의 경영 철학을 구축했다. 그는 “대중이 공감할 수 있는지가 가장 중요하다”며 “사업을 시작할 때 더 나은 상황으로 만들 수 있다는 확신이 서야 한다”고 강조했다.#핀다 #CEO #인터뷰 #기업문화 #스타트업CEO #철학 #인사이트

촬영기자는 TV 뉴스의 영상을 책임집니다.촬영기자는 역사의 현장에 함께 합니다.그 곳은 눈물의 바다를 이루는 남북 이산가족 상봉의 현장일 수도...무너져 내린 빌딩의 잔해더미 속일 수도...총성이 울리고 포탄이 오가는 전쟁터일 수도 있습니다. 흔히 촬영기자들은 ′역사를 기록하고 있다′라고 말합니다.따라서 촬영기자는 객관적, 보편적 가치관을 가져야 합니다. 현대사회는 영상미디어 시대입니다.따라서 촬영기자의 능력에 따라 TV뉴스의 질과 성격이 달라집니다. 사회현상의 본질을 꿰뚫는 냉철한 이성을 지니고, 보도영상에 대한 뜨거운 열정을 지닌 젊은이들을 기다립니다.현재 전국 KBS에는 220여명의 촬영기자들이 있으며, 또한 미국, 유럽, 일본 등 세계의 중심이 되는 곳에 특파원들이 진출해 있습니다.본사는 업무의 성격에 따라 영상취재부, 영상편집부가 있습니다. 데일리 뉴스를 취재하는 영상취재 뉴스파트, 심도 있는 보도특집을 제작하는 영상취재 특집파트, 스포츠 뉴스를 담당하는 영상취재 스포츠파트, 뉴스 영상편집을 전담하는 영상편집파트 등으로 나누어져 있으며 파트간 순환근무를 실시하고 있습니다.#한국방송공사 #KBS #KBS공채 #직무정보 #직무소개