Mobile Convergence

플랫폼의 핵심 기능중 하나가 Open API이다. 해당 기능을 이용하려면 인증(Authetication)하고 권한 부여(Authorization)할 수 있는 약속을(프로토콜) 새롭게 만들어야 했고 그 결과물이 OAuth이다. 초기 1.0에서 보안결함을 해결한 1.0a 와 최신 2.0 버전을 가장 많이 사용을 하고 있다. 

개념

예전의 OpenID방식은 인증(로그인)만을 처리하는 것이고, RESTful Open API 호출시 권한 체크를 하지 않으므로 이에 대한 권한체크도 필요하다. OAuth는 두개의 역할을 다 수행한다 

  - 인증 : 우리가 흔히 사용하는 Login시 ID/Password 를 통하여 인증을 받는다 - Request_Token

  - 권한 : 권한이 있는 기능만을 호출할 수 있다 - Access_Token

버전

  - v1.0 : 보안 결함 발견 v1.0a가 IETF 표준 프로토콜, 웹만 인증 가능

  - v2.0 : v1.0의 key_signature 복잡함등의 제거, 웹뿐만 아니라 애플리케이션도 인증 가능 

V1.0 

  - User : 특정 서비스에 사용하는 유저 예) Smart Visualization 사용자

    Consumer : 특정 서비스이면서 OAuth 제공자(서비스 제공자)에게 인증과 권한을 요청 예) Smart Visualization

    Service Provider : OAuth 제공자 예) 트위터

  - Request Token 으로 인증을 처리하고 Access Token으로 권한

  - 장점

  - 총정리

V2.0 

  - 3가지 종류 존재 : bearer token 방식 사용. 나머지 두가지는 계속 수정중 

  - 간단해 졌고, 더 많은 인증 방법을 제공, 대형 서비스로 확장을 지원한다 

사용하기 

  - 다양한 언어별 라이브러리 존재 

<참조>

  - OAuth v2.0 만능 도구상자 (KTH)

  - OAuth v1.0와 춤을 (NHN)

OAuth 트위터에서 Consumer/Acces Key를 생성한 후, Node.js 상에서 EveryAuth를 이용하여 인증방법에 대해서 알아보자 

Twitter 키 생성하기 

  - https://dev.twitter.com/apps/new  에서 생성함

  - 이름, 설명, url -예, http://sv.mobiconsof.co.kr -, 약관체크, CAPCHA등록하고 submit을 하면 키생성 화면이 나온다 

  - 추가로 "access token"을 생성할 수도 있다

     단 여기서 중요한 것은 "Callback URL"을 입력하는 것이다. (sv.mobiconsoft.co.kr은 /etc/hosts파일에 설정한 테스트 도메인)

  - 만들어 놓은 자신의 키들은 https://dev.twitter.com/apps 에서 애플리케이션 별로 확인을 할 수 있다 

Twitter 키 사용하기 

  - Node.js에서 everyauth 모듈을 통하여 사용하는 예를 보자

  - Key 생성시 url로 "http://sv.mobiconsoft.co.kr" 를 입력하였다면 - 각자의 public 또는 test url을 입력하면 된다 - hosts 파일에 등록하고 dig 와 ping 명령으로 확인을 한다 

  - Express.js, Angular.js 와 Bootstrap을 이용한 코드를 사용할 것이다. 

  - app.js 안에서 트위터에 대한 consumerKey와 consumerSecret을 입력한다 

  - Node.js 를 수행한다 

  - 브라우져에서 호출하기 : 우측 "Login"에서 "Sign in with Twitter" 버튼을 클릭한다 

 - 트위터 승인 화면이 나온다 : "애플리케이션 승인" 버튼을 클릭하면 다시 원래 화면으로 돌아온다 

 - Node.js 콘솔에 뿌려진 사용자 정보를 보자 : 해당 정보를 저장하여 애플리케이션에서 사용을 하면 된다 

<참조> 

  - How to get twitter key

  - Express에서 EveryAuth 사용하기 

  - Facebook에서 EveryAuth 적용하기

디자인이라고 말하면 일반 개발자들은 포토샵과 일러스트레이터를 다루는 그래픽 디자이너를 생각하게 된다. 하지만 특정 도메인을 표현하는 제품 입장에서 디자이너와 함께 일하기 위하여 일반적으로 기대하는 수준은 사뭇 다르다. 나 또한 B2B 솔루션을 3개 정도 런칭해 보았지만 일반 그래픽만 다루던 디자이너와 일했을 때 도메인 컨텍스트를 이해시키고 설득하는데 많은 시간과 노력 그리고 스트레스를 어떻게 받게 되었는지 잘 안다. 어떻게 하면 훌륭한 디자인을 할 수 있는지? 자신의 Golden Path는 어떻게 만들 수 있는지 알아보자 

프러덕트 디자이너가 작업전 알아야 할 것은?

  - 프러덕트 디자인을 하기전 디자이너는 회사의 미션과 비젼을 알아야 한다 (참조)

  - 프러덕트의 아키텍쳐를 알아야 한다 

    아키텍쳐는 기술적 표현보다는 좀 더 추상화되고 구조화된 표현이다 

   + Facebook 예

  + 구조화된 표현

프러덕트 디자인의 접근법

  - 디자인시 4개의 층이 있고 Top->Down으로 접근한다 

  - Outcome -> Structure -> Interaction -> Visual

    최종 결과물의 모습 : 우리가 해결하길 원하는 사람들의 문제는 무엇인가? 서비스(프러덕트)를 정확히 정의한다 (서비스 참조)

    레이아웃 구조 : 의도한 시스템 구축을 위해 필요한 컴포넌트와 그들의 관계에 대해서 맵핑하는 디자인을 한다  

    화면 상호작용 : 애니메이션효과 화면전환의 흐름등의 상호작용을 자세히 디자인한다

    시안의 시각화 : 아름다운 그리드, 색감, 타이포그라피, 아이콘등의 look and feel의 아름다움을 디자인한다 

2013년 트랜드인 Flat Design 관점 

  - 애플 iOS7에서 플랫디자인을 선보이고, 구글은 전사 서비스를 플랫디자인으로 도배하고 있다. 

  - 프러덕트 디자이너가 Visual 단계에서 바라본 플랫디자인의 요소 5가지 (참조)

     + Use of simple elements 

        심플한 아이콘 : 사각, 원형의 단순 모형에 배치, 컬러, 형태로 표현 -> 사용자가 UI 를 쉽게 인식하고 사용토록 만든다 

     + Absence of depth 

        배제된 효과 : 그림자, 입체감, 그라데이션등의 현실감있게 하는 3D적 효과를 배제하여 직관적으로 만든다  

     + Typography

        타이포그래피 : 화려한 폰트를 배제하고 간결한 폰트를 사용한다. 예) 산세리프 

     + Color

        단순한 칼라 : 2~3가지 또는 5~6가지의 색상만을 사용하여 간결하고 과감하고 표현한다. 핑크, 그린, 블루가 대세  

     + Minimalism

        미니멀리즘 : 미니멀리즘과 부합 - 간단하고 심플하게 표현으로 다양한 웹, 모바일에 적응이 쉽다  

서비스 디자인이라는 관점

  - 서비스을 만들 때 우리는 어떻게 접근하여야 할까 단지 디자인이 문제가 아니라 UX라는 사용자 경험을 고려하여 사람과 컴퓨터의 상호작용을 생각해 보아야 하고, 우리가 만들려는 프로덕트나 서비스에 어떻게 녹아 있어야 하는지 연구하고 새롭게 창조하는 과정에 대해 알아보자 

  - 서비스 디자인 이란 무엇인가? - 개념 이해

  - 서비스 디자인을 어떻게 하는지 알아보자 - 접근 방법 

InfoGraphic 에서 바라본 디자인 관점 예  

  - 정보를 시각화 하는 인포그래픽에 대한 접근법은 어떻게 될까? 10단계에 대해 알아보자 (참조)

  1) 자료 모으기 - Gathering Data

  2) 모든 것을 알기 - Reading Everything

  3) 서사구조를 찾아내기 - Finding the narrative

  4) 문제를 확인하기 - Identifying Problems

  5) 계층을 만들기 - Creating Hierarchy

  6) 뼈대를 만들기 - Building a Wireframe

  7) 표현형식 고르기 - Choosing a Fromat

  8) 시각적 접근법 결정하기 - Determining a Visual Approach

  9) 개선과 시험 : Refinement and Testing

  10) 세상에 출시하기 : Releasing into the World 

  - 프러덕트 디자이너 관점에 인포그래픽을 바라 본 다면 다음과 같이 나눌 수 있지 않을까 개인적으로 작위적 분류를 해본다 

     (특성상 상호작용은 제외함)

     1) ~ 4) == OutCome

     5) ~ 6) == Structure

     7) ~ 9) == Visual 

  - 서비스 다지안 관점에서도 작위적으로 분류해 본다 

     1) ~ 4) == 탐색 

     5) ~ 6) == 정의 

     7) ~ 9) == 만들기

     10) == 출시하기  

프러덕트 디자인을 한다는 것은 이제 예전의 단순 그래픽 디자인에서 -> 결과물(프러덕트)의 전반적인 미션과 비젼을 이해하고 -> 어떻게 사람과 컴퓨터가 상호작용해야 하는지 이해한 후 사용자 경험을 극대화 하는 작업으로 변하였다. 최근은 모바일기기의 확대로 그 경험의 비쥬얼에 플랫디자인이 대세를 이루고 있으며 이는 사용에게 궁극적으로 감정적 만족감과 행복감을 주는 방향으로 가고 있다.

<참조> 

  - 원문 : 디자인의 드리블화 

  - 플랫 디자인의 특징

  - 몇가지 플랫 디자인 예들

  - 놀라운 인포그라픽을 만드는 10단계

  - 빅데이터 관점의 서비스 디자인

  - HCI Cousera 강좌 : Human Computer Interaction

차트는 많은 정보를 내포한다. 사람들끼리 차트를 공유하고 싶을 경우 보통은 엑셀에서 작업을 하고, 보고서를 MS-Word 또는 HWP로 만들어서 메일을 보내거나 채팅창으로 파일을 전송하게 된다. 여러 복잡한 과정을 통하여 자신의 데이터에 대하여 의미를 내포한 차트로 공유하기까지의 과정이 너무 길고 많은 시간이 소요된다. 그리고 지속적인 관심을 가진 데이터라면 이들에 대한 히스토리는 개별 문서마다 보관이 될 것이고, 합쳐서 보고자 할 때 번거로운 재작업을 거쳐야 한다. 우리가 사용하는 페이스북이나 기존 SNS 사용방식처럼 데이터를 시각화한 차트에 대해 공유하여 볼 수 있고, 코멘트를 달고 관련 차트끼리 연결지어서 더 낳은 정보로 만들어 갈 수 있으면 얼마나 재미있을까? 관련성있는 차트들을 모아 보면서 회의에 사용하거나 바로 스마트 기기에서 확인함으로써 업무 효율화를 가져올 수도 있다

이러한 가치하에서 Smart Visualization에 대한 목업화면을 그려 보았다. 

Share Place 

  - Search 입력에 어느 그룹, 코멘트, 의견등의 내용을 검색하여 관련있는 차트 목록을 볼 수 있다

  - 공유하는 공간이다. 차트별로 상단에 자신의 것인지, 어느 그룹과 공유되는 것인지 보이고 등록 시간이 나온다 

     Place : personal 또는 group-01

  - 상단 Place 또는 시간을 클릭하면 해당 차트에 대한 상세 내역을 보여주는 화면이 나온다 

  - 차트 하단에는 해당 차트에 대한 Comment와 관련 차트(Related Chart)를 연결지을 수 있다 

  - 상단 우측에는 현재 채팅진행중이 확인되지 않은 내역 건수와 메세지 건수를 Badge 로 보여준다

Register Place

  - 일정 형식의 .csv 파일을 업로드한다 

  - 해당 차트의 Place (속할 그룹)과 차트 종류를 선택하고 등록한다 

Slide Menu

  - "Smart Visualization" 좌측의 아이콘을 클릭하면 메뉴가 나온다 

  - 개인 또는 그룹을 검색하여 친구맺기를 할 수 있고, 상대가 응답을 해주면 상호 연결이 되어 Share Place에서 차트를 공유한다 

  - 기존 대화목록이나 메세지를 열람할 수 있다

  - 메뉴 상단에 "사용자"검색이나 "그룹" 검색이 들어가겠다

데이터 시각화 차트의 공유에 벗어나는 레이아웃은 제거할 것이다.

* 개념이 유사한 사이트

  https://plot.ly/

  https://infogr.am/

자바스크립트의 상속과 성능향상을 위하여서는 Prototype Pattern을 갖는 Prototypal Inheritance를 이용한다.

개념

  - ECMAScript 5에서 Object.create 로 가능하다 

var myCar = {
  name: "Ford Escort",
  drive: function () {
    console.log( "Weeee. I'm driving!" );
  },
  panic: function () {
    console.log( "Wait. How do you stop this thing?" );
  }
};

// Use Object.create to instantiate a new car
var yourCar = Object.create( myCar );

// Now we can see that one is a prototype of the other 

  - 오브젝트 확장할 때 

var vehicle = {
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model );
  }
};

// 두번째 인자에서 확장한다 Mixin...
var car = Object.create(vehicle, {
  "id": {
    value: MY_GLOBAL.nextId(),
    // writable:false, configurable:false by default
    enumerable: true 
  },

  "model": {
    value: "Ford",
    enumerable: true
  }
}); 

  - Object.create를 사용하지 않고 Construct Function의 prototype 프로퍼티를 이용하여 prototypal inheritance 구현 

var vehiclePrototype = {
  init: function ( carModel ) {
    this.model = carModel;
  },
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model);
  }
};

function vehicle( model ) {
  function F() {};
  // 일급 클래스 펑션의 prototype을 vehiclePrototype객체로 정의 
  // 상단 이미지에서 Foo의 프로퍼티인 propertype 변수에 Foo.prototype 객체를 참조한다
  F.prototype = vehiclePrototype;

  // new를 하면 vechiclePrototype객체가 f 변수에 할당 된다 
  var f = new F();
  f.init( model );
  return f;
}

var car = vehicle( "Ford Escort" ); 

다른 방법으로 proto 전달 

var beget = (function () {
    function F() {}
    return function ( proto ) {
        F.prototype = proto;
        return new F();
    }; 

다양한 Object creation으로 메소드 확장하기

  - 메소드안에 정의 

    + getInfo는 Car 생성때 마다 생성되므로 메모리를 차지한다 (안좋음) 

  - 메소드를 외부에서 Prototype에 지정하기 

    + 필요한 시점에 메소드를 추가할 수 있다 예) Car.prototype.accelerate 

  - Prototype Pattern을 이용

    + prototype에 필요한 메소드를 Literal 객체로 지정한다 

  - Revealing Prototype Pattern을 이용

    + prototype에 객체를 생성하여 할당한다 

<참조>

  - 원문 : The Prototype Pattern

  - Some Prototype Pattern 사용하기 

  - Revealing Prototype Pattern 사용하기

  - 드미트리 소스시코브의 JavaScript Core