URBANBASE TECH BLOG

Class vs Factory Function, 더 나은 선택은?

Sun, 28 Mar 2021 16:00:00 +0000

안녕하세요. API 개발팀 이정준 입니다. ECMAScript6 에서 class가 추가되었습니다. Class Function과 Factory Function의 차이를 알아보고, 어떤 Function을 사용할지 생각해 봅시다.

1.기본 사용 방법

기본 사용 방법은 다음과 같습니다.

Class Function

class TodoModel {
  constructor(data) {
    this.todos = [];
    this.data = data;
  }
    
  addData() {
    console.log(`${data} addData`); 
  }

  add() { console.log('add'); }
}

const todoModel = new TodoModel('input');
todoModel.addData();        // input addData

Factory Function

function TodoModel(data){
  const todos = [];

  function addData() {
    console.log(`${data} addData`);
  }

  function add() { console.log('add'); }

  return Object.freeze({
    addData,
  });
}

const todoModel = TodoModel('input');
todoModel.addData();        // input addData

2. 캡슐화(Encapsulation)

내부 변수 또는 감추고 싶은 함수에 접근이 가능 여부 입니다.
캡슐화가 안되면 보안에 이슈가 생길 수 있습니다.

Class Function

const todoModel = new TodoModel('input');
console.log(todoModel.todos);       // []
console.log(todoModel.data)         // input
todoModel.add();                    // add

Factory Function

const todoModel = TodoModel('input');
console.log(todoModel.todos);       // undefined
console.log(todoModel.data)         // undefined
todoModel.add();                    // todoModel.add is not a function

기본적으로 function은 캡슐화가 되지만 class는 캡슐화가 되지 않습니다.
그러나 nodejs 12.0.0 버전부터는 Private class fields를 사용하면 class도 캡슐화를 할 수 있습니다.

Private class fields

class TodoModel {
  #todos;

  constructor(data) {
    this.#todos = [];
    this.data = data;
  }

  addData() {
    console.log(`${data} addData`);
  }

  #add() { console.log('add'); }
}

const todoModel = new TodoModel('inputData');
console.log(todoModel.todos);       // undefined
todoModel.add();                    // todoModel.add is not a function

3. 불변성(Immutable)

정의된 함수를 변경할 수 있는지를 말합니다.
보안이나 코드 이해를 위해서는 함수가 변경되지 않는 것이 좋습니다.
특수한 상황에 따라서는 함수 변경이 필요할 수도 있으나 권장하는 방식은 아닙니다.

Class Function

todoModel.add = function() {
  console.log('a new add');
}
todoModel.add();            // a new add

Factory Function

todoModel.add = function() {
  console.log('a new add');
}
todoModel.add();            // add

Class Function에서는 함수를 변경할 수 있으나 Factory Function에서는 변경되지 않습니다.
이 부분은 static을 사용하면 개선할 수 있으나 인스턴스화 되지 않으므로 사용법에 주의해야 합니다.
그리고 static은 method를 정적으로 만드는 것이기 때문에 상황에 따라서는 static을 사용하는 것이 맞지 않을 수 있습니다.

static

class TodoModel {
  #todos;

  constructor(data) {
    this.#todos = [];
    this.data = data;
  }

  addData() {
    console.log(`${data} addData`);
  }

  static add() { console.log('add'); }
}

TodoModel.add();            // add
TodoModel.add = function() {
  console.log("a new add");
}                           // Invalid left-hand side in assignment

4. 상속과 구성 (Composition and inheritance)

class에서는 상속을 사용하지만 factory에서는 구성을 만들어 사용합니다.
예시를 통해 비교해 보면 다음과 같습니다.

Class Function

class Person {
  eat() {
    console.log('I am eating');
  }
  breathe() {
    console.log('I am breathing');
  }    
  swim() {
    console.log('I am swimming');
  } 
}
class Wizard extends Person {
  trick() {
    console.log('I am doing a trick');
  }
}
const harry = new Wizard();
const ron = new Wizard();

// Harry can:
harry.eat();          // I am eating
harry.breathe();      // I am breathing
harry.swim();         // I am swimming
harry.trick();        // I am doing a trick

// Ron can:
ron.eat();        // I am eating
ron.breathe();    // I am breathing
ron.swim();       // I am swimming
ron.trick();      // I am doing a trick

Factory Function

const Person = () => {
  return {
    eat: () => {
      console.log('I am eating');
    },
    breathe: () => {
      console.log('I am breathing');
    },
    swim: () => {
      console.log('I am swimming');
    },
  };
};
const Trick = () => {
  return {
    trick: () => {
      console.log('I am doing a trick');
    },
  };
};

const Wizard = () => {
  return {
    eat: Person().eat,
    breathe: Person().breathe,
    trick: Trick().trick,
  };
};
const Muggle = () => {
  return {
    eat: Person().eat,
    breathe: Person().breathe,
    swim: Person().swim,
  };
};

// Harry can:
const harry = Wizard();
harry.eat();            // I am eating
harry.breathe();        // I am breathing
harry.trick();          // I am doing a trick

// Ron can:
const ron = Muggle();
ron.eat();            // I am eating
ron.breathe();        // I am breathing
ron.swim();           // I am swimming

class는 상속을 받기 때문에 상속 받은 모든 method를 사용해야 하지만, factory는 구성을 하기 때문에 선별적으로 사용할 수 있습니다. factory와 같이 사용하려면 새로운 class를 생성하거나 class person에서 swim()을 제거한 뒤 새로운 class로 상속 받아야 합니다.

5. this

class에서는 this 문법을 사용할 수 있으나 factory function에서는 this 문법을 사용할 수 없습니다.
this 문법을 사용할 때에는 컨텍스트 손실 문제가 발생할 수 있기 때문에 사용할 때 유의해서 사용해야 합니다.

컨텍스트 손실 문제란?
context가 손실되는 문제로 아래 예시를 참고하시기 바랍니다.

class TodoModel {
    constructor(){
        this.todos = [];
    }
    
    reload(){ 
        setTimeout(function log() { 
          console.log(this.todos);
        }, 0);
    }
}
todoModel.reload();                   //undefined

6. 메모리

class의 모든 메서드는 프로토 타입 객체에서 한번 생성되고 모든 인스턴스에서 공유됩니다.
그런데 수 많은 동일한 객체를 만들 때 factory 함수의 메모리 비용이 많이 필요합니다.
메모리 테스트 결과는 아래와 같습니다.

The memory cost (in Chrome)
+-----------+------------+------------+
| Instances | 10 methods | 20 methods |
+-----------+---------------+---------+
| 10        | 0          |  0         |
| 100       | 0.1Mb      |  0.1Mb     |
| 1000      | 0.7Mb      |  1.4Mb     |
| 10000     | 7.3Mb      | 14.2Mb     |
+-----------+------------+------------+

7. 결론

메모리 사용에 있어서는 Class Function이 효율적입니다.
그러나 개발하는 내용에 따라 Factory Function이 보다 안전할 수도 있기 때문에 Class Function을 사용할지, Factory Function을 사용할 지는 사용 용도에 맞춰서 결정할 수밖에 없을 듯 합니다.

참고 사이트

프론트엔드 에러 로그 시스템 Sentry 적용기

Thu, 04 Mar 2021 10:00:00 +0000

안녕하세요. 프론트엔드 개발을 하고 있는 gyu입니다. 어반베이스에서는 현재 운영되고 있는 서비스들의 화면과 기능을 개발하고, API 적용, 3D SDK 개발 등의 업무를 진행하고 있습니다.

서비스를 개발하고 운영하면서 꼭 필요했던 클라이언트의 에러 로그 트래킹 시스템 도입기를 정리해보았습니다.

클라이언트 사이드 에러 로그 트래킹이 필요한 이유?

SPA(Single Page Application) + CSR(Client Side Rendering) 로 구성된 서비스들이 많아지고 있습니다. 어반베이스의 서비스들도 대부분 SPA + CSR로 개발 및 운영되고 있는데요. 서비스를 운영하다보면 개발자의 예상과는 다르게 예기치 못한 오류가 발생하게 됩니다. 서버 사이드의 에러가 아닌 클라이언트 단에서 발생한 에러는 어떻게 파악할 수 있을까요?

프론트엔드 개발자의 입장에서 클라이언트 단의 오류를 파악하는 가장 확실한 방법은 해당 브라우저의 개발자 도구 콘솔을 통해 오류 내용을 파악하는 것입니다.

이럴 경우 통상적인 방법으로 아래 두가지가 있습니다만,

오류가 발생한 클라이언트 장비에 원격 접속해 직접 웹 브라우저를 확인한다.
서비스를 이용 중인 고객에게 직접 ‘웹 브러우저의 개발자 도구를 열고 > 콘솔에 찍힌 오류내용을 캡쳐해주세요.’ 라는 요구를 한다. (개발자가 아닌 일반인들에게는 굉장히 번거로운 요구..)

이런 번거로운 상황을 만들지 않고 개발자가 직접 프론트엔드(클라이언트 단)의 오류를 트래킹할 수 있다면 좀 덜 수고스럽게 이슈 대응을 할 수 있지 않을까요?

Sentry란?

Sentry는 어플리케이션에서 오류가 발생하면 알려주는 에러 트래킹 서비스입니다. (무료 혹은 유료) 클라이언트의 오류 발생시 메일을 보내주고, 슬랙과 연동하면 슬랙 메시지를 통해 오류 발생과 해당 오류에 대한 정보 파악이 가능합니다.

Javascript, vue.js, node.js, java, python 등의 다양한 언어, 프레임워크, 라이브러리를 지원하여 여러 프로젝트의 이슈를 한 곳에서 관리함으로써 에러 모니터링을 일원화 할 수 있습니다.

[지원하는 언어, 플랫폼 및 인티그레이션]

또한 오류를 파악할 수 있는 다양한 정보도 제공합니다.

[오류에 대한 다양한 정보들]

이름	설명
Device	오류가 발생한 장비 정보 (Family(Android, iOS … etc), Model, Architecture, Memory, Capacity, Simulator, BootTime, Timezone)
EXCEPTION	에러가 발생한 코드 라인과 에러 메시지
App	오류가 발생한 어플리케이션 정보 (ID, Start Time, Device, Build Type, Bundle ID, Bundle Name, Version, Build)
Browser	오류가 발생한 브라우저 정보 (Name, Version, Headers)
Operating System	유저가 사용하는 OS (Name, Version, Kernel Version, Rooted)
BREADCRUMBS	유저가 오류 발생시 거친 과정 및 경로

[실제 누적된 Error 정보]

오류에 대한 상세한 정보 및 오류 내용
오류가 발생한 클라이언트 환경에 대한 정보
오류가 발생한 Vue Component에 대한 정보

[무료 사용시 제한 사항]

멤버 수 제한 : 하나의 계정으로 로그인해야 해당 이슈들을 조회할 수 있습니다. (유료 사용의 경우 무제한)
에러 수 제한 : 무료 사용시 5,000개로 제한 (유료 사용시 100,000개 이상 ~ )
히스토리 저장 : 오류에 대한 히스토리를 30일만 저장 (유료 사용시 90일)
기타 소소한 추가 기능들은 링크를 통해 확인 가능합니다. Sentry 유료 정책

현재 개발중인 프로젝트에 적용해보기

1) Sentry Vue 용 SDK 설치하기

# Using yarn
$ yarn add @sentry/vue

# Using npm
$ npm install @sentry/vue

2) Vue 컴포넌트에서 에러 발생시 해당 컴포넌트의 이름과 props 정보를 알기위한 tracing 설치하기

# Using yarn
yarn add @sentry/tracing

# Using npm
npm install @sentry/tracing

3) Sentry.io 사이트에서 회원가입하고 프로젝트 생성하여 DSN 키 발급받기

회원가입
각 플랫폼에 맞는 프로젝트 생성하기
Sentry에서 발급해주는 DSN 값을 예제 코드를 통해 노출

4) 프로젝트 최상위 컴포넌트(앱 진입점)에서 Sentry 선언하기

   import * as Sentry from "@sentry/vue";
   import { Integrations } from "@sentry/tracing";

Sentry SDK 와 vue integration을 선언합니다. 그후 컴포넌트 최상위 마운트 시점에 아래와 같이 초기화 합니다.

5) Sentry 초기화 및 옵션 설정

  Sentry.init({
   Vue,
   dsn: '', // 발급받은 DSN키 입력
   integrations: [new Integrations.BrowserTracing()], // Vue 설정
   tracingOptions: { // 하위 구성 요소를 추적하고 렌더링 프로세스에 대한 자세한 내용을 보기
      trackComponents: true,
   },
   attachProps: true, // 로깅을 위해 모든 Vue 구성 요소의 props를 보기
   tracesSampleRate: 1, // 0에서 1 사이의 숫자로 주어진 트랜잭션이 Sentry로 전송 될 확률을 제어
   beforeSend: (event, hint) => this._sendErrorMessage(event, hint), // 에러를 Sentry에게 전달하기 전 처리할 수 있는 hook
});

각 옵션에 대한 설명은 코드 주석으로 대신하였습니다.

이외에 많은 옵션들은 Sentry 공식 문서를 참고하시어 다양한 설정들을 해보시면 좋을 것 같습니다.

텔레그램으로 Sentry 에러 알림받기

beforeSend 메소드는 에러가 발생하면 Sentry로 넘기기 전에 따로 처리할 게 있다면 추가할 수 있습니다.

현재 설정해 놓은 Sentry는 대표로 설정한 이메일로 에러 알림 메일이 전송됩니다. Slack 메신저에는 이러한 알림을 지원하고 있지만 현재 어반베이스에서 사용 중인 Telegram 메신저는 지원하지 않습니다.

이에 beforeSend 메소드를 직접 선언하여 에러 발생 후 Telegram으로 메시지를 전송하도록 기능을 추가했습니다.

_sendErrorMessage: function(event, hint) {
  let errorMsg = '';

  if (( !event || !event.contexts || !event.contexts.vue ) &&
    ( !hint || !hint.originalException || hint.syntheticException )) {
    return null;
  }

  const vue = event.contexts.vue;
  const hintMsg = hint.originalException || hint.syntheticException;

    errorMsg = `<b>[Error]</b>: \n
        >>> URL: ${htmlEntity(event.request && event.request.url)} \n
        >>> Message: ${htmlEntity(hintMsg.message)}\n
        >>> Method: ${htmlEntity(vue.lifecycleHook)}\n
        >>> At: ${htmlEntity(vue.componentName)}\n
        >>> Props: ${htmlEntity(vue.propsData)}`;

    const body = {
      chat_id: '@UB_CHAT_ID', // 텔레그램의 CHAT_ID
      text: errorMsg,
    };
    axios({
      method: 'POST',
      url: 'https://api.telegram.org/봇아이디/sendMessage',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
      data: body,
    }).then(() => {
      console.log('Error logged!', hint.originalException || hint.syntheticException);
    });

  return event;
}

텔레그램 메시지에 전송될 errorMsg 변수 안에는 다음과 같은 내용을 담았습니다.

에러가 발생한 URL
에러 메시지
에러가 발생한 vue 컴포넌트의 라이프사이클 메소드
에러가 발생한 vue 컴포넌트 명
상위로부터 전달받은 props

[실제 전달된 텔레그램 메시지]

[추가적으로 이슈 필터링이 가능한 옵션들]
Sentry의 프로젝트 설정에 들어가면 위와 같이 많은 옵션들로 오류 알림을 필터링 할 수 있습니다. 로컬환경에서는 에러를 안보내도록 설정할 수 있고, 브라우저에 따라 에러를 무시하게끔 셋팅할 수도 있습니다.

현재 어반베이스의 신규 프로젝트들은 클라이언트 이슈 발생 시 개발부문 대표 계정으로 메일 알림을 받고 있고, 텔레그램 메시지를 통해서도 에러 알림이 오도록 설정해 두었습니다.

아직까지는 무료로 제공되는 기능도 충분한 것 같아 유료화 전환보다는 효율적으로 내부 오류 처리 프로세스를 정립해 나가고 있는데요. 훗날 트래픽이 많아지거나 개발자들이 더 많아진다면 유료 전환을 고려해볼 수도 있을 것 같습니다.

클라이언트 오류 발생시 지향하는 내부 오류 처리 프로세스는 다음과 같습니다.

에러 알림이 많아질 경우, 팀내 공통의 계정을 만들어 모든 팀원이 Sentry에 접근 가능하도록 한다.
팀내 이슈 담당자를 정해두고 메일이 오면 Sentry를 통해 발생한 에러를 Jira에 등록한다. (Sentry 내에서 Jira연동이 가능)
텔레그램으로 알림이 온 경우, 본인의 담당 여부를 빠르게 파악하여 담당자에게 알린다.
등록된 이슈가 해결되면 담당자에게 알리고, 담당자는 해당 에러를 정리한다.(Sentry 내 관리)
팀 계정이 없고 담당자를 바꿔야할 상황이면 해당 담당자가 새로운 Sentry 계정을 등록하여 관리한다.

현재는 이정도로 사용하고 있고 앞으로도 더 좋은 방법을 고민하고 연구할 생각입니다. 많은 프론트엔드 개발자들이 저희의 Sentry 도입 예시를 참고하셔서, 예기치 못한 클라이언트 이슈 발생의 원인 파악과 해결을 빠르고 수월하게 하셨으면 좋겠습니다~

익숙해지면 좋을 깃(git) 명령어 모음집

Fri, 15 Jan 2021 10:00:00 +0000

안녕하세요. API팀 김세현입니다. 어반베이스에서는 Server Side 설계, API 개발을 담당하고 있습니다. git을 항상 사용하고 있지만 스스로 기본적인 이해가 부족한 것 같아, 공부하는 마음으로 주요 명령어를 한번 정리해보았습니다. 모든 명령어 뒤에 --help 옵션을 사용하여 활용 가능한 옵션을 알 수 있습니다.

git init

git 초기화. git으로 버전관리를 할 경로에서 사용합니다. .git 폴더가 생성 되며 아래와 같은 구조입니다.

HEAD
config
description
/branches
/hooks
/objects
/refs

git status

현재 git 프로젝트에서 파일들의 상태를 보여줍니다. git의 영역과 상태에 대한 자세한 설명은 아래의 두 문서를 참고해 주세요.

git add

파일의 변경 내용을 스테이징 영역(staging area)에 추가하기 위해 사용하는 명령어입니다. 스테이징 영역으로 추가된 변경 이력만 commit할 수 있습니다.

# 모든 변경점 추가
git add -A

# 현재 경로의 모든 변경점 추가
git add .

# README.md 파일만 추가
git add README.md

git rm

파일을 지우거나 스테이지에서 해제할 때 사용합니다.

# 파일 삭제
git rm README.md

# README.md 파일을 추적되지 않은 상태로 만듦
git rm --cached README.md

git restore (2.23)

워킹 트리(Working tree)의 변경된 파일을 복원해 주는 역할을 합니다.

# Unstaged 상태의 변경 파일을 원상복구
git restore [파일명]

# git add로 Staging 된 파일을 Unstaged 상태로 되돌림
git restore --staged [파일명]

git clean

추적되지 않은 상태(untracked)의 파일을 삭제합니다. 삭제가 되면 복구할 수 없으니 stash 를 고려해보는 것도 좋습니다.

# 디렉토리를 제외한 파일만 삭제
git clean -f 

# 디렉토리포함 삭제
git clean -f -d

# .gitignore 에 설정된 파일도 삭제
git clean -f -d -x

# 가상 실행
git clean -n

git commit

변경된 내용을 저장합니다.

# 메시지와 함께 커밋
git commit -m 'First Commit'

# 신규 파일을 제외한 변경사항을 Staging 후 커밋
git commit -a

# 이전 커밋 변경
git commit --amend

git log

commit 목록을 볼 수 있습니다. 굉장히 많은 옵션이 있으니 git log --help 명령어로 자신에게 맞는 조합을 활용하시기 바랍니다.

# branch 그래프를 추가하여 보기
git log --graph

# 모든 branch 보기
git log --all

# commit 메시지 제목만 한줄로 보기
git log --oneline

git show

commit 의 상세 정보를 확인합니다.

# 현재 branch의 가장 최근 commit 정보를 확인
git show

# 특정 commit 정보를 확인
git show [commit 해시값]

# 특정 branch의 가장 최근 commit 정보를 확인
git show [branch 명]

git reset HEAD [file]

commit 을 취소할 수 있습니다.

  # commit을 취소하고 해당 파일들은 스테이징 영역에 보존
  git reset --soft HEAD^

  # commit을 취소하고 해당 파일들은 Unstaging
  git reset --mixed HEAD^
  git reset HEAD^

  # commit을 취소하고 해당 파일들의 변경점 삭제
  git reset --hard HEAD^

push를 취소할 수 있습니다.

  git reset HEAD^
  git push -f origin 브랜치명
  git pull

git remote

원격 저장소(remote repository)를 관리하는 명령어 입니다.

# 설정된 원격 저장소 보기
git remote -v

# test 라는 이름으로 원격 저장소 추가하기
git remote add test https://github.com/test/test

git push

원격 저장소(remote repository)에 코드 변경분을 업로드합니다.

# 기본 사용법
git push [저장소명] [branch]

# 최초 1회 저장소, branch 지정. 이 후, 생략 가능
git push -u [저장소명] [branch]

# 로컬에서 생성한 branch를 push
git push --set-upstream [저장소명] [branch]

git branch

branch에 관련한 명령어 입니다.

# 로컬 branch 목록 확인
git branch

# 원격 저장소를 포함한 모든 branch 목록 확인
git branch -a

# test 라는 branch 생성하기
git branch test

# test 로컬 branch를 origin이라는 원격 저장소의 test branch에 연결
git branch --set-upstream-to=origin/test test

# test branch 삭제
git branch -d test

# test branch 강제 삭제
git branch -D test

git switch (2.23)

branch를 변경하는 명령어 입니다. checkout 에서 복원하는 기능을 제거했다고 합니다.

# test branch로 변경하기
git switch test

# test2 라는 branch를 새로 생성하고 test2 branch로 변경하기
git switch -c test2

git checkout

branch를 변경하고 워킹 트리(Working tree)에서 변경점을 복원하는 명령어 입니다. switch, restore 명령어를 사용하는 것을 추천합니다.

# test branch로 변경하기
git checkout test

# test2 라는 branch를 새로 생성하고 test2 branch로 변경하기
git checkout -b test2

# Unstaged 상태의 파일을 원래대로 되돌림
git checkout -- [파일명]

# Unstaged 상태의 현재 경로의 모든 파일을 원래대로 되돌림
git checkout -- .

git fetch

원격 저장소(remote repository)의 데이터를 가져옵니다. pull 로 병합하기 전에 어떤 변경점이 있나 살펴볼 때 사용하기 좋습니다.

# origin 이라는 원격 저장소의 데이터를 가져옴
git fetch origin

# 모든 원격 저장소의 데이터를 가져옴
git fetch --all

# 원격 저장소에서 삭제된 branch를 로컬에서도 삭제
git fetch --prune

git pull

원격 저장소(remote repository)의 데이터를 가져온 후 로컬 branch에 병합합니다.

# git fetch --all && git pull 과 같습니다
git pull --all

git stash

현재 작업중인 변경점을 임시 저장하거나 불러올 수 있습니다. 현재와 다른 branch로 가서 작업을 하기전에 사용하면 유용합니다.

# 현재 변경점 testStash 라는 이름으로 저장하기
git stash save testStash

# stash 목록(stack) 확인하기
git stash list

# testStash 라는 stash를 불러와 적용하기
git stash apply testStash

# testStash 라는 stash를 불러와 적용하는데, Staged 상태까지 적용하기
git stash apply testStash --index

# 가장 최근의 stash를 가져와 적용하고 스택에서 삭제하기
git stash pop

# 가장 최근의 stash 제거하기
git stash drop

# testStash라는 stash를 제거하기
git stash drop testStash

git blame

특정 파일의 수정 이력을 확인할 수 있습니다. 각 라인별로 누가, 언제 마지막으로 수정 했는지 알 수 있습니다.

# test.txt 파일의 수정 이력을 확인
git blame test.txt

# test.txt 파일의 5부터 10번 라인까지만 확인
git blame -L 5,10 test.txt

# 파일명이 변경 되었다면, 변경전의 파일명과 함께 확인
git blame -C newTest.txt

# 공백 변경을 무시
git blame -w test.txt

git diff

소스를 비교하여 볼 수 있습니다.

# 마지막으로 커밋된 소스와 현재 Unstaged 상태의 변경점과 비교
git diff

# 마지막으로 커밋된 소스와 현재 Staging 된 변경점과 비교
git diff --staged

# 커밋간 비교
git diff [커밋해시1]..[커밋해시2]

# branch간 비교
git diff [branch1] [branch2]

git revert

지정한 커밋으로 되돌려 커밋합니다. 되돌린 이력이 남기때문에 충돌이 발생할 위험이 적으며 협업 상황에서 사용하는 것을 추천합니다.

# 특정 커밋으로 되돌리고 커밋
git revert [커밋해시]

# 특정 태그로 되돌리고 커밋
git revert [태그명]

# 특정 커밋으로 되돌리지만 커밋은 안한채로 Staging 상태
git revert [커밋해시] -n

# 병합한 커밋으로 되돌릴 때 메인이 되는 커밋을 지정하여 되돌리기
git revert [커밋해시] -m 1

git tag

특정 커밋에 표기하는 기능입니다. 주로 릴리즈 시 이용합니다. 두 가지 종류가 있는데 Lightweight 태그와 Annotated 태그입니다. Lightweight 태그는 단순히 버전등의 이름을 남길 때 사용합니다. Annotated 태그는 만든 사람의 이름, 이메일, 날짜, 메시지까지 저장하며 GPG(GNU Privacy Guard)로 서명까지 가능합니다.

# 현재 HEAD에 v1.0.0이라는 Lightweight 태그 생성
git tag v1.0.0

# 현재 HEAD에 v1.0.0이라는 Annotated 태그 생성
git tag -a v1.0.0 -m 'message'

# 특정 커밋에 v1.0.0이라는 Lightweight 태그 생성
git tag v1.0.0 [커밋해시]

# v1.0.0 태그를 원격 저장소에 푸시하기
git push origin v1.0.0

# 모든 로컬 태그를 원격 저장소에 푸시하기
git push origin --tags

# 로컬의 v1.0.0 삭제
git tag -d v1.0.0

# 원격 저장소의 v1.0.0 태그 삭제
git push -d origin v1.0.0

git merge

현재 브랜치를 특정 브랜치의 소스와 병합합니다. merge 하기 전엔 워킹 디렉토리를 stash 등으로 깔끔하게 정리하고 진행하는 것을 추천합니다.

# master branch를 병합
git merge master

# 병합 충돌(Conflict) 발생 시 취소
git merge --abort

# 공백으로 인한 병합 충돌을 무시하고 병합
git merge -Xignore-all-space

git rebase

저는 rebase를 쓰지 않지만, 알아두면 좋으니 간단하게 정리하겠습니다. merge처럼 branch를 합치는 기능을 하는데요. 작동 방식이 merge 와는 다릅니다. 자세한 설명과 개념은 아래 링크의 문서로 대신 하겠습니다.

https://git-scm.com/book/ko/v2/Git-브랜치-Rebase-하기

이런 경우에 사용하면 좋을 것 같습니다.

예) master 브랜치에서 feature 브랜치로 분기하여 커밋 후, master 브랜치의 새로운 커밋이 있을 때 feature 브랜치가 master 브랜치의 새로운 커밋을 병합해야 할 때, merge 커밋을 남기기 싫을 경우.
쉽게 말해서, 작업하는 branch를 병합할 branch에 병합 이력없이 변경 커밋만 남기고 싶을 때 사용하면 좋습니다.

# 모든 원격 저장소의 데이터를 가져옴(최신화)
git fetch --all

# 원격 저장소(origin)의 master 브랜치로 rebase
git rebase origin/master  # git merge origin/master 와 결과는 같으나 병합 이력 커밋이 없다

중요한 점은 원격 저장소에 올라가 사용중인 커밋을 rebase 하는 것은 최대한 지양해야 한다는 것입니다.

마치며

git의 강력하고 다양한 기능을 전부 다루진 못했습니다. 그래도 이 정도만 숙지해도 개발하는데 적지 않은 도움이 될 거라 조심스레 생각합니다.

git을 GUI(소스트리)툴로 처음 접했습니다. 그런데 현재는 터미널에서 써드파티 앱의 도움과 명령어로 git을 사용하고 있습니다. GUI 툴은 마우스로 클릭해서 조작하기 편하고 눈으로 보기 좋은 장점이 있습니다만, 조금 느리고 답답하다는 느낌이 들 때가 있었기 때문입니다. 저와 같은 불편함을 겪었거나 아직 CLI환경에 익숙하지 않다면, 이제부터는 직접 명령어를 입력하고 그러한 명령어를 모아 자동화하는 재미를 찾아보는 것은 어떨까요?

부록 및 참고

롯데하이마트 앱은 AR을 어떻게 도입하게 됐을까?

Thu, 17 Dec 2020 10:00:00 +0000

안녕하세요. 어반베이스 어플리케이션팀 팀장 이우석입니다. 저희팀은 AR뷰어(AR Viewer)를 개발하고 있는데요, AR Viewer는 Android와 iOS에서 AR(증강현실)을 쉽게 적용하고 사용할 수 있도록 만든 어반베이스의 SDK(Software Development Kit)입니다. 요즘 코로나로 인해 비대면/언택트 기술 도입에 대한 관심이 그 어느 때보다 높은 만큼 롯데하이마트가 어반베이스의 AR Viewer를 사용해 자사 앱에 AR 서비스를 적용한 과정을 소개하려 합니다.

개발 과정

롯데하이마트 AR 프로젝트는 두달 반 정도 걸렸고, 아래와 같은 단계로 업무를 나누어 진행했습니다.

가장 먼저 요구사항을 정의 하였습니다.

프로젝트 기획서를 검토하면서 어떤 AR 기능을 넣을 것인지 화면은 어떻게 구성할 것인지 이야기합니다. 그 후에는 어떤 기능이 개발돼야 하고, 어느 정도 일정이 필요한지 산정합니다. 이렇게 논의를 진행하다보면 항상 궁금해 하시는 부분이 있습니다.

그럼 저희는 어떤 부분을 개발하면 되나요?

이 과정이 역할분담입니다. AR Viewer는 여타 SDK처럼 UI를 제외한 기능을 제공하고 있습니다. 따라서 UI 개발은 앱 파트에서 개발을 해야 하는데요.

왼쪽에 에어비앤비 앱은 숙소를 검색하는 화면에서 Google Map SDK 를 사용하고 있습니다. 구글맵은 지도를 특정 위치에 포커싱하는 기능이나 지도 확대와 같은 기본 기능들만 지원해주고 그 외의 UI(녹색 테두리)는 에어비앤비 브랜드 톤에 맞게 구현을 했습니다.

오른쪽을 보시면, 롯데하이마트도 마찬가지로 제품 로드, 회전, 확대 등의 기본적인 AR 기능은 어반베이스의 AR Viewer SDK에서 지원받고, 이외 UI(하늘색 테두리)는 하이마트 측에서 구현했습니다.

@IBAction func captureSelected(_ sender: UIButton) {
    let capturedImage = arViewer.captureScene()
    UIImageWriteToSavedPhotosAlbum(capturedImage, self, #selector(image(_:didFinishSaving:contextInfo:)), nil)
}

< 앱에서 캡쳐 기능을 구현한 예 >

이렇게 역할 분담이 끝나면, 요구사항에 논의된 기능을 개발하고 약속된 개발 기간을 거쳐 SDK를 적용한 뒤 테스트를 진행합니다.

많고 많은 AR SDK 중, 왜 어반베이스 AR 이었을까?

이전 글에도 언급한 적이 있지만 AR을 개발한다는 것은 그리 단순한 과정이 아닙니다. 모바일 개발 환경에 익숙해야함은 물론이고 3D 환경에 대한 전반적인 지식이 필요하기 때문입니다. 뿐만 아니라 제품을 3D 파일로 제작해야 하는데 플랫폼(Android, iOS)에 따라 다른 포맷으로 관리가 되어야 하며 그에 따른 속성 관리에도 깊은 이해와 시행착오를 수반합니다.

많은 기업들이 AR을 처음부터 개발하기 보다는 기존에 나와 있는 SDK를 활용해 AR 서비스를 출시하는 이유일 겁니다. 사실 AR SDK는 유니티(AR Foundation), PTC(Vuforia) 등 내로라하는 기업들에서 이미 개발 및 운영을 하고 있습니다. 저희 어플리케이션팀에서는 이들과는 차별화된 기능을 중점적으로 개발하고 있고 롯데하이마트에서도 그 기능들을 높게 평가한 것으로 보입니다.

간편한 적용

유니티의 AR Foundation은 모바일 개발환경이 아닌 유니티에서 AR 기능을 개발해야 한다는 단점이 있습니다. 그냥 간단하게 앱에 AR 기능을 넣고 싶었을 뿐인데 유니티 개발자가 필요한 상황이 생기는거죠.더군다나 유니티로 개발된 AR 기능은 .xcodeproj 같은 프로젝트 파일 형태로 생성되기 때문에 이미 개발하고 있는 앱이 있을 경우에 앱에 있는 코드를 유니티에서 생성된 .xcodeproj 에 옮겨야 하는 엄청난 작업을 진행해야 합니다.

그렇다면 PTC의 Vuforia는 어떨까요? 다행히 AR Foundation처럼 유니티에서 개발해야 할 필요는 없습니다만 샘플코드를 받아서 열어보니… 카메라 키고 제품 하나 배치하는 단순한 내용인데도 참조해야 할 파일들이 이렇게나 많습니다.

반면, AR Viewer는 정말 이게 끝입니다.

직관적이고 쉬운 기능

AR Foundation이나 Vuforia를 프로젝트에 적용하고 나면 제품을 어떻게 보여주고 동작할 것인지 구현을 해야합니다. 구현 과정에서 필연적으로 3D 관련 지식이 필요하고 적지 않은 러닝커브가 발생하게 됩니다. AR Viewer는 커머스(commerce)에 특화된 기능들이 이미 구현되어 있고, 구현된 기능을 직관적인 클래스 구조와 함수로 제공하고 있습니다.

아래는 AR Viewer iOS 버전의 기능을 간략하게 뽑은 내용입니다. 함수명과 파라미터가 간단하고 직관적이어서 AR에 대한 지식 없이도 원하는 기능을 쉽게 구현할 수 있습니다.

/// A Boolean value indicating whether the current device supports ARViewer.
public static func isSupported() -> Bool

/// Requests that the `Figure` to be loaded.
/// - Parameters:
///   - assetId: `asset_id` of `UBAsset`
public func requestFigure(assetId: String = ARViewer.kSampleAssetId)

/// Cancels the `Figure` being loaded.
public func requestCancel()

/// Sets that determines whether the light casts shadows.
/// - Parameter enabled: if the value of this property is `true`, set to enable shadows. The default value is `true`
public func setShadow(enabled: Bool)

/// Removes the figure from the scene.
/// - Parameter figure: The figure to remove.
public func deleteFigure(figure: ARViewer.Figure)

/// Sets the feature type
/// - Parameter feature: The type of feature which you want to use
public func setViewerMode(feature: ARViewer.FeatureType)

롯데하이마트에 적용된 AR 핵심 기능들

롯데하이마트 앱의 AR 서비스에는 AR Viewer의 어떤 기능이 적용되었을까요? 세세한 기능까지 다 말씀드리면 너무 TMI가 될 것 같아 굵직한 기능들만 소개해 드립니다.

360도 돌려보기

제품을 AR로 배치하기 전에 360도 돌려보기를 체험할 수 있습니다. 한 사이드에서만 볼 수 있었던 모양이나 색상을 다양한 각도로 돌려보며 디테일하게 확인해볼 수 있습니다.

제품 사이즈 보여주기

제품의 실측 사이즈를 바로 확인할 수 있습니다. 텍스트로 제품의 가로-세로-너비를 수치로 확인하는 것보다 AR 환경에서 사이즈를 확인하는 것이 훨씬 더 직관적입니다. 왠만한 사람들은 17cm가 어느 정도로 짧은지 47cm가 어느 정도 길이인지 잘 가늠하지 못하니까요.

AR로 배치하기

마음에 드는 제품을 우리집 공간에 놓아볼 수 있습니다. 지금 공간과 제품의 디자인이 어울리는지 공간에 비해 제품이 큰지 작은지 등을 가늠해볼 수 있어요. 제품을 배치한 후에도 자유자재로 움직이며 조작 가능합니다.

옵션 변경하기

컬러 등 제품의 스타일을 바꿔보면서 확인할 수 있습니다. 벽지 디자인에 실버가 어울리는지 골드가 어울리는지 바로 바로 확인이 가능합니다.

마치며

AR을 개발하는 과정이 아직까지 순조롭지만은 않습니다. SDK와는 별개로 AR 기능 구현 수준이 완벽하게 올라오지 않았고, ARCore와 ARKit의 기능 지원에도 차이가 있다보니 분명 같은 제품인데도 안드로이드 앱과 아이폰 앱에서 똑같은 색상으로 보이지 않는 일도 있습니다. AR 기능을 사용하면 핸드폰이 뜨거워지기도 하고요.

하지만 AR은 가장 주목받고 있는 언택트 기술인만큼 구글, 애플 등 글로벌 기업들이 앞다투어 AR 기술과 하드웨어 디바이스를 업데이트 하고 있고, 저희 어플리케이션팀 또한 AR Viwer 고도화에 박차를 가하고 있습니다. 머지않아 AR이 인공지능과 더불어 4차 산업의 주요 트렌드로 자리잡을 것으로 보이니 아직 도입을 망설이고 있다면 빨리 로켓에 올라 타시기를 바랍니다.

마지막으로 AR Viewer 못지 않게 열심히 개발하고 있는 Urbanbase AR 앱도 많은 관심 부탁드립니다. 감사합니다!

아직도 Amazon GuardDuty 도입을 안 하셨다면?

Sun, 01 Nov 2020 10:00:00 +0000

안녕하세요. API 개발팀장 최진욱입니다. 어반베이스에서는 Serverless 기반 RESTful API Architecture 설계 및 개발을 담당하고 있습니다. 여느 스타트업처럼 저희도 기술 사이드에 방점을 두고 서비스 퀄리티를 높이는 데 집중했었는데요, 서비스가 차츰 안정화되다 보니 보안 이슈가 중요해지더라고요. AWS에서 다양한 보안 위협 탐지 서비스를 제공하고 있는데, 저희는 그중에서 모든 리전에서 지원 가능한 GuardDuty 도입을 고려하게 됐습니다.

Amazon GuardDuty?

Amazon GuardDuty는 AWS 계정 및 워크로드를 보호하는 지능형 위협 탐지 보안 서비스로, 잠재적 무단 활동과 악의적 활동을 지속적으로 모니터링하여 감지합니다. GuardDuty는 AWS Region 내에서 AWS CloudTrail 로그, Amazon VPC (Virtual Private Cloud) 플로우 로그 및 DNS (Domain Name System) 로그의 데이터를 처리합니다. 아래 이미지의 탐지 영역에 Amazon GuardDuty가 위치하는 것을 볼 수 있습니다.

자, 그럼 셋팅해봅시다!

저희는 Amazon CloudWatch Events 트리거를 이용해 알림을 2가지 방식으로 받고 싶었습니다. 1) 이메일 알림을 받기 위한 아마존 SNS 설정 2) ~~이메일은 놓치기 쉬우니~~ 사내에서 사용 중인 텔레그램 알림을 받기 위한 Lambda 함수 설정

먼저, Amazon GuardDuty를 활성화 할 동일 리전에 SNS 주제를 생성하고 구독을 설정합니다.

// 주제 생성
$ aws sns create-topic --region ap-northeast-2 --name urbanbase-api-team

// 구독
$ aws sns subscribe \
      --topic-arn arn:aws:sns:ap-northeast-2:{AWS_ACCOUNT}:urbanbase-api-team \
      --protocol email \
      --notification-endpoint my-email@example.com

AWS Lambda (Node.js)

/**
 * AWS SNS 통해 오는 알림을 텔레그램으로 전달 한다.
 * @param event
 * @param context
 * @returns {Promise<{statusCode: number}|boolean>}
 */
exports.handler = async (event, context) => {
  try {
    // info: health-check
    if (event.hasOwnProperty('healthCheck') && event.healthCheck === true) {
      return true;
    }

    const severityEmoji = (Number(event.detail.severity)) >= 7 ? '🔴' : '🟠';
    const sampleDataEmoji = ('sample' in event.detail.service.additionalInfo && event.detail.service.additionalInfo.sample === true) ? '⭕' : '❌';

    const guardDutyURL = `https://console.aws.amazon.com/guardduty/home?region=${event.region}#/findings?search=id%3D${event.id}`;
    const options = {
      parse_mode: 'Markdown',
      reply_markup: {
        inline_keyboard: [
          [
            {
              text: 'For more details',
              url: guardDutyURL,
            },
          ],
        ],
      },
    };

    const text = `
*[GuardDuty Alarm]*

*타이틀*: ${event.detail.title}
*샘플유무*: ${sampleDataEmoji}
*스테이지*: ${stage[process.env.STAGE]}
*심각도*: ${event.detail.severity}(${severityEmoji})
*타입*: ${event.detail.type}
*리전*: ${event.region}
*설명*: ${event.detail.description}
`;

    await bot.sendMessage(process.env.TELEGRAM_ID, text, options);
  } catch (e) {
    console.error(`Final Catch in ${__filename}:`, e);
  }
  return {
    statusCode: 200,
  };
};

Amazon CloudWatch Events (Console)

규칙 생성

1단계 규칙 생성 화면은 ‘이벤트 소스’와 ‘대상’으로 구분됩니다. 이벤트 소스는 이벤트 패턴을 작성하거나 사용자를 지정, 대상을 호출할 일정을 설정할 수 있습니다. 저는 사용자 지정 이벤트 패턴을 선택해서 아래와 같이 작성했습니다.

이벤스 소스 설정하기

이벤트 소스는 guardduty, 세부 유형은 Finding, 세부 조건은 심각도 보통 이상으로 지정했습니다.

{"source":["aws.guardduty"],"detail-type":["GuardDuty Finding"],"detail":{"severity":[4,4.0,4.1,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,5.0,5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6.0,6.1,6.2,6.3,6.4,6.5,6.6,6.7,6.8,6.9,7,7.0,7.1,7.2,7.3,7.4,7.5,7.6,7.7,7.8,7.9,8,8.0,8.1,8.2,8.3,8.4,8.5,8.6,8.7,8.8,8.9]}}

대상 설정하기

먼저 SNS는 해당 리전에서 주제를 생성하셔야합니다. (생성 방법은 검색 고고) 생성하셨다면, 이벤트가 이벤트 패턴과 일치하거나 일정이 트리거될 때 호출할 대상을 지정해보겠습니다.

대상 추가 버튼 클릭
셀렉트박스에서 SNS 주제 선택
주제란에서 Amazon SNS 에서 생성한 주제 선택
입력 구성에서 입력 변환기 선택
입력 경로(첫번째 텍스트 상자)에 아래 코드 (5. 입력 경로) 붙여넣기
입력 템플릿(두번째 텍스트 상자)에 아래 코드 (6. 입력 템플릿) 붙여넣기
끝~

// 5. 입력 경로
{"severity":"$.detail.severity","Finding_ID":"$.detail.id","Finding_Type":"$.detail.type","region":"$.region","Finding_description":"$.detail.description"}

// 6. 입력 템플릿
"You have a severity <severity> GuardDuty finding type <Finding_Type> in the <region> region."

Lamda 함수 추가

이제 Lambda 함수를 추가해보겠습니다.

대상 추가 버튼 클릭
셀렉트박스에서 Lambda 함수 선택
함수란에서 텔레그램으로 메시지를 전송해 줄 함수 선택
입력 구성에서 일치하는 이벤트 선택
끝~

이제 하단의 세부 정보 구성 버튼을 클릭합니다.

규칙 세부 정보

2단계 규칙 세부 정보 화면에서는 이름과 설명, 상태를 설정할 수 있습니다. 이름과 설명을 기재하시고 규칙 설정 버튼을 클릭하시면 이벤트 규칙 설정이 완료됩니다.

Amazon CloudWatch Events (CLI)

규칙 생성

$ aws events put-rule --region ap-northeast-2 --name "guardDuty-trigger-production" --event-pattern "{\"source\":[\"aws.guardduty\"],\"detail-type\":[\"GuardDuty Finding\"],\"detail\":{\"severity\":[4,4,4.1,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,5,5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6,6.1,6.2,6.3,6.4,6.5,6.6,6.7,6.8,6.9,7,7,7.1,7.2,7.3,7.4,7.5,7.6,7.7,7.8,7.9,8,8,8.1,8.2,8.3,8.4,8.5,8.6,8.7,8.8,8.9]}}"

대상 설정하기

$ aws events put-targets --region ap-northeast-2 --rule "guardDuty-trigger-production" --targets "[{\"Id\": \"Id100000000000\",\"Arn\": \"arn:aws:sns:ap-northeast-2:{AWS_ACCOUNT_ID}:urbanbase-api-team\",\"InputTransformer\": {\"InputPathsMap\": {\"Finding_ID\": \"$.detail.id\",\"Finding_Type\": \"$.detail.type\",\"Finding_description\": \"$.detail.description\",\"region\": \"$.region\",\"severity\": \"$.detail.severity\"}, \"InputTemplate\": \"\\\"You have a severity <severity> GuardDuty finding type <Finding_Type> in the <region> region.\\\"\"}}]"

InputTemplate 는 String 값만 입력을 받는데 위 이미지처럼 InputTemplate 란에 “You have a severity GuardDuty finding type in the region." 을 등록하고 싶으면 \"\\\"You have a severity GuardDuty finding type in the region.\\\"\" 처럼 사용하면 됩니다.

Amazon GuardDuty 활성화

Console

GuardDuty 활성화 버튼을 클릭합니다.

CLI

$ aws guardduty create-detector --region ap-northeast-2 --enable \
      --finding-publishing-frequency "FIFTEEN_MINUTES" \
      --data-sources "{\"S3Logs\": {\"Enable\": \"true\"}}"

Node.js

let AWS = {};

const getAWS = (region) => {
  const localAWS = require('aws-sdk');
  localAWS.config.region = region;

  // multiple profile 사용 시
  const credentials = new localAWS.SharedIniFileCredentials({ profile: 'profileId' });
  localAWS.config.credentials = credentials;
  return localAWS;
};

(async () => {
  try {
    let params;
    const region = 'ap-northeast-2';

    AWS = getAWS(region);
		const guardduty = new AWS.GuardDuty();

    console.log(`Current Region: ${region}`);
    // info: guardDuty 설정
    params = {
      Enable: true,
      FindingPublishingFrequency: 'FIFTEEN_MINUTES',
      DataSources: {
        S3Logs: {
          Enable: true,
        }
      },
      Tags: {
        region: region,
      },
    };

    const result = await guardduty.createDetector(params).promise();
    console.log(result);
	} catch (e) {
    console.error(e)
  }
})();

S3 Protection (S3 보호)

기존 Amazon Macie 에서 사용할 수 있었던 Amazon S3 활동에 대한 이상 및 위협 탐지가 Amazon GuardDuty의 일부가 되면서 비용도 80% 이상 감소했다고 합니다. 이 기능을 통해 S3 데이터 액세스 이벤트 및 S3 구성을 지속적으로 모니터링하고 프로파일링하여 비정상적인 지리적 위치에서의 요청과 같은 의심스러운 활동을 감지할 수 있습니다. 또한 아래와 같은 예방 제어를 비활성화 할 수도 있습니다.

S3 블록 퍼블릭 액세스
잘못 구성된 버킷 권한을 검색하려는 시도와 일치하는 API 호출 패턴

샘플 결과 작성

탐지 예제

S3 버킷 하나를 생성한 뒤 버킷 정책에 익명 사용자에게 읽기 전용 권한을 부여해보았습니다.

// bucket policy
{
    "Version": "2008-10-17",
    "Id": "allow for anonymouse",
    "Statement": [
        {
          "Sid":"PublicRead",
          "Effect":"Allow",
          "Principal": "*",
          "Action":["s3:GetObject"],
          "Resource":["arn:aws:s3:::sample/*"]
        }
    ]
}

일정 시간이 지나면 Amazon GuardDuty에서 탐지하게 되고,

위에서 설정한 Amazon CloudWatch Events 로 트리거가 동작하여 아래와 같이 알림이 옵니다.

Amazon SNS를 통한 이메일 수신

AWS Lambda 를 통한 텔레그램 메시지 수신

여기까지 Amazon GuardDuty 활성화 및 Amazon CloudWatch Events 연동을 통해 알림을 수신하는 방법에 대해 알아보았습니다. 읽어주셔서 감사합니다.

참고 문헌

https://aws.amazon.com/ko/blogs/aws/new-using-amazon-guardduty-to-protect-your-s3-buckets/

https://docs.aws.amazon.com/ko_kr/guardduty/latest/ug/guardduty_findings_cloudwatch.html#guardduty_findings_cloudwatch_format

[AR개발 Tip] Sceneform에서 바닥인식 벗어난 곳으로 Node 이동 시키기

Fri, 06 Mar 2020 10:00:00 +0000

안녕하세요. 어반베이스 안드로이드 개발자 심재원입니다. 어반베이스에서는 ARViewer와 SpaceViewer의 개발을 담당하고 있습니다.

Android AR 개발을 하시는 많은 개발자 분들이 Google의 ARCore를 사용해서 개발을 하실거라 생각합니다. 하지만 ARCore를 사용해 완성도 있는 결과를 얻기 위해서는 3D 및 OpenGL, 렌더링 등의 높은 기술력이 뒷받침 되어야 합니다.
이 때문에 Google에서는 AR 개발에 대한 진입 장벽을 낮추기 위해 Sceneform 이라는 멋진 녀석을 제공하고 있습니다. Sceneform을 사용하면 ARCore를 사용할 때보다 좀 더 쉽게 AR 개발을 할 수 있습니다.

이번 포스트에서는 Sceneform을 사용하여 개발하던 중 고객사의 어려운 요구사항이 들어왔고, 그것을 해결했던 노하우를 공유하려 합니다.

Why Use Sceneform?

일단 이 멋진 녀석 Sceneform이 어떤 것인지, 왜 사용하고 있는지 잠시 소개하겠습니다.

Sceneform이란?
ARCore에서 기술 장벽이 높은 OpenGL을 통해 직접 구현해야하는 렌더링, AR Session 관리 등을 쉽게 처리 할 수 있어서 개발자는 AR 앱 서비스 자체에 집중 할 수 있다.
렌더링 엔진인 filament가 포함되어 있어 렌더링 퀄리티가 높다. (Sceneform 1.10.0 이상의 버전에서 적용 됨)

우리가 해결해야 할 문제는 무엇일까요?

고객사가 요구했던 것은 다음과 같았습니다.

"카메라 상에서 멀리 있는 곳까지는 Node가 이동이 되지 않아요. 자연스럽게 멀리까지 이동되게 해주세요."

멀리 있는 곳까지 제품을 이동 시켜 달라는 요구사항..

AR 기능의 가장 기본은 바닥을 찾는 것입니다. 바닥을 찾아야 그 곳을 기준으로 Node를 배치 할수 있는 것이죠.

그런데 내가 있는 위치에서 멀리 떨어진 곳은 바닥으로 인식이 안 될 것이고, 따라서 현재 버전에서는 멀리 있는 곳까지 제품이 이동이 되지 않는 것이 일반적입니다. Sceneform의 전제 조건은 바닥으로 인식 된 곳에 Node를 배치 할 수 있는 것인데, 그 전제 조건을 부정해야 하는 경우가 생겨 버린 것입니다.

하지만 일단 요구사항이 왔으니 검토는 해야만 하는것이 인지상정!

TransformableNode를 살펴보자

현재 우리가 사용중이며 Sceneform에서 가장 많이 사용하는 Node인 TransformableNode 를 살펴봅시다.

TransformableNode란? (참조 : 구글 개발자 사이트 & Sceneform Github)

public TransformableNode(TransformationSystem transformationSystem) {
    super(transformationSystem);

    translationController =
        new TranslationController(this, transformationSystem.getDragRecognizer());
    addTransformationController(translationController);

    scaleController = new ScaleController(this, transformationSystem.getPinchRecognizer());
    addTransformationController(scaleController);

    rotationController = new RotationController(this, transformationSystem.getTwistRecognizer());
    addTransformationController(rotationController);
  }

코드를 살펴보면 3개의 컨트롤러를 이용해서 터치 제스처를 등록하고, 해당 컨트롤러에서 Node를 관리하고 있습니다.

TranslationController를 살펴보자

Node를 이동시키는 것은 TranslationController이므로 해당 클래스를 상속받아 커스터마이징을 하도록 합시다.

@Override
  public boolean canStartTransformation(DragGesture gesture) {
    Node targetNode = gesture.getTargetNode();
    if (targetNode == null) {
      return false;
    }

    BaseTransformableNode transformableNode = getTransformableNode();
    if (targetNode != transformableNode && !targetNode.isDescendantOf(transformableNode)) {
      return false;
    }

    if (!transformableNode.isSelected() && !transformableNode.select()) {
      return false;
    }

    Vector3 initialForwardInWorld = transformableNode.getForward();
    Node parent = transformableNode.getParent();
    if (parent != null) {
      initialForwardInLocal.set(parent.worldToLocalDirection(initialForwardInWorld));
    } else {
      initialForwardInLocal.set(initialForwardInWorld);
    }

    return true;
  }

  @Override
  public void onContinueTransformation(DragGesture gesture) {
    Scene scene = getTransformableNode().getScene();
    if (scene == null) {
      return;
    }

    Frame frame = ((ArSceneView) scene.getView()).getArFrame();
    if (frame == null) {
      return;
    }

    Camera arCamera = frame.getCamera();
    if (arCamera.getTrackingState() != TrackingState.TRACKING) {
      return;
    }

    Vector3 position = gesture.getPosition();
    List<HitResult> hitResultList = frame.hitTest(position.x, position.y);
    for (int i = 0; i < hitResultList.size(); i++) {
      HitResult hit = hitResultList.get(i);
      Trackable trackable = hit.getTrackable();
      Pose pose = hit.getHitPose();
      if (trackable instanceof Plane) {
        Plane plane = (Plane) trackable;
        if (plane.isPoseInPolygon(pose) && allowedPlaneTypes.contains(plane.getType())) {
          desiredLocalPosition = new Vector3(pose.tx(), pose.ty(), pose.tz());
          desiredLocalRotation = new Quaternion(pose.qx(), pose.qy(), pose.qz(), pose.qw());
          Node parent = getTransformableNode().getParent();
          if (parent != null && desiredLocalPosition != null && desiredLocalRotation != null) {
            desiredLocalPosition = parent.worldToLocalPoint(desiredLocalPosition);
            desiredLocalRotation =
                Quaternion.multiply(
                    parent.getWorldRotation().inverted(),
                    Preconditions.checkNotNull(desiredLocalRotation));
          }

          desiredLocalRotation =
              calculateFinalDesiredLocalRotation(Preconditions.checkNotNull(desiredLocalRotation));
          lastArHitResult = hit;
          break;
        }
      }
    }
  }

  @Override
  public void onEndTransformation(DragGesture gesture) {
    HitResult hitResult = lastArHitResult;
    if (hitResult == null) {
      return;
    }

    if (hitResult.getTrackable().getTrackingState() == TrackingState.TRACKING) {
      AnchorNode anchorNode = getAnchorNodeOrDie();

      Anchor oldAnchor = anchorNode.getAnchor();
      if (oldAnchor != null) {
        oldAnchor.detach();
      }

      Anchor newAnchor = hitResult.createAnchor();

      Vector3 worldPosition = getTransformableNode().getWorldPosition();
      Quaternion worldRotation = getTransformableNode().getWorldRotation();
      Quaternion finalDesiredWorldRotation = worldRotation;

      // Since we change the anchor, we need to update the initialForwardInLocal into the new
      // coordinate space. Local variable for nullness analysis.
      Quaternion desiredLocalRotation = this.desiredLocalRotation;
      if (desiredLocalRotation != null) {
        getTransformableNode().setLocalRotation(desiredLocalRotation);
        finalDesiredWorldRotation = getTransformableNode().getWorldRotation();
      }

      anchorNode.setAnchor(newAnchor);

      // Temporarily set the node to the final world rotation so that we can accurately
      // determine the initialForwardInLocal in the new coordinate space.
      getTransformableNode().setWorldRotation(finalDesiredWorldRotation);
      Vector3 initialForwardInWorld = getTransformableNode().getForward();
      initialForwardInLocal.set(anchorNode.worldToLocalDirection(initialForwardInWorld));

      getTransformableNode().setWorldRotation(worldRotation);
      getTransformableNode().setWorldPosition(worldPosition);
    }

    desiredLocalPosition = Vector3.zero();
    desiredLocalRotation = calculateFinalDesiredLocalRotation(Quaternion.identity());
  }

TranslationController에서 이동을 시키는 코드를 확인해 보면

canStartTransformation : 터치 시점을 기준으로 이동이 시작되는 단계에서 호출
onContinueTransformation : 드래그 제스처 등을 통해 이동이 진행중인 단계에서 호출
onEndTransformation : 터치가 끝나는 시점을 기준으로 이동이 마무리되는 단계에서 호출

이렇게 3가지 단계로 Node에 대한 이동 처리를 하는 것으로 보입니다.

우리의 목적인 멀리까지 이동하기 위해서는 onContinueTransformation 소스를 분석해야 할 것 같습니다.

onContinueTransformation 소스를 분석해보자

코드의 마지막 부분에서 힌트를 발견했는데요.

public void onContinueTransformation(DragGesture gesture) {
  ...
  중략
  ...
  List<HitResult> hitResultList = frame.hitTest(position.x, position.y);
  for (int i = 0; i < hitResultList.size(); i++) {
    HitResult hit = hitResultList.get(i);
    Trackable trackable = hit.getTrackable();
    Pose pose = hit.getHitPose();
    if (trackable instanceof Plane) {
      Plane plane = (Plane) trackable;
      if (plane.isPoseInPolygon(pose) && allowedPlaneTypes.contains(plane.getType())) {
  ...
  중략
}

위 부분을 보면 조건문 중에 “if (plane.isPoseInPolygon(pose) && allowedPlaneTypes.contains(plane.getType()))” 조건이 보입니다. 아마도 저 “plane.isPoseInPolygon(pose)” 에서 바닥으로 인지한 영역에서만 위치를 할수 있게 제한을 하는 것으로 생각됩니다.

그럼 저 조건만 해제하면 쉽게 처리 되겠네~ 유후~~

조건을 해제하고 확인 해보니!!

…
…
…

해당 조건을 해제해도 Node가 멀리까지 이동되지는 않았습니다. orz..
어째서… 도대체 왜…ㅠㅠ

좀 더 분석해 본 결과!!

단순히 isPoseInPolygon 조건을 제거 한다고 해도, HitResult의 getHitPose()에서 얻어올수 있는 Pose 값이 제한적이어서 Node의 이동이 되지 않는 것이었습니다.

Frame에서 hitTest(x, y)를 통해 가져오는 HitResult의 경우 바닥 인식을 통해 최소 Trackable(바닥 인식 취소 단위)로 인지가 된 영역에 대해서만 HitResult를 반환 해준다는 것을 확인!!

바닥으로 인식 되지 않은 곳을 터치한 x,y좌표에 대해서 HitResult 값을 가져올 수는 없는지..

추가 분석한 결과!

Sceneform에서 제공해주는 클래스로는 바닥으로 인식한 영역 외에 터치한 x,y 좌표에 대한 HitResult를 가져올 방법이 없다는 사실에 또 한번 좌절… HitResult를 바탕으로 이동을 시켜야 하는데 HitResult를 가져올 수 없다니…ㅠㅠ

아… 이렇게 이번 요구사항은 적용할 수 없다고 회신을 보내야 하나…..

아니다.. 여기서 포기 할 순 없어..!!

HitTestResult의 발견

포기하지 않고 HitResult를 임의로 생성할 수 있는 방법이 없는지 찾아보던 중..

유레카!

HitTestResult라는 클래스를 발견했습니다.

HitTestResult 데이터는 Node에 한해서는 내가 어디를 선택했는지에 대한 AR상 위치를 가져올 수 있다는 것을 알아냈습니다. (노드의 특정 부분를 터치 했을 때 AR상 그 위치를 가져올 수 있음) Scene에서 터치한 곳에 해당되는 노드를 가져올 수 있는 기능을 활용해서 노드를 찾고 HitTestResult 에서 RayHit을 통해 Point 와 Distance 등을 가져올 수 있습니다.

Scene.hitTestAll (참조 : 구글 개발자 사이트 & Sceneform Github)

이 데이터를 활용하는 것으로 방식을 변경하기로 합니다.

임의의 Node를 바닥과 가깝게 깔아놓고 그 Node상에서 내가 터치한 좌표에 모션이벤트를 발생시켜서 해당 좌표를 가져올 수 있습니다.
쉽게 말하면 Sceneform에서 제공해주는 Plane을 이용한 바닥 정보를 사용하지 않고 바닥에 넓은 Node를 하나 놓아 두고 그 바닥용 Node 위에서만 이동할 수 있도록 처리하는 것입니다.

이렇게 하면 내가 바닥에 둔 바닥용 Node 안에서는 멀리까지도 각 제품 별 Node를 자연스럽게 이동할 수 있습니다.

바닥 노드 이용한 거리 좌표 계산 소스

public void onContinueTransformation(DragGesture gesture) {
  ...
  중략
  ...
// Scene 에서 강제로 터치 좌표에 모션 이벤트를 발생 시킨다.
  List<HitTestResult> testResultList = scene.hitTestAll(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, position.x, position.y, 0));
  for (HitTestResult testResult : testResultList) {
      Log.e("TAG", "HitTestResult [" + testResult.getNode().getName() + "]. point : " + testResult.getPoint().toString() + ", distance : " + testResult.getDistance());
      if (testResult.getNode() != null && testResult.getNode().getName().equals("AnchorNode")) {  // 터치한 좌표에 해당되는 바닥노드를 찾는다
          Log.e("TAG", "HitTestResult [" + testResult.getNode().getName() + "]. node size : " + ((Box) testResult.getNode().getCollisionShape()).getSize().toString());
          // 바닥노드에 터치한 좌표를 바탕으로 이동할 Pose를 생성
          mInfinityMovePose = Pose.makeTranslation(testResult.getPoint().x, testResult.getPoint().y, testResult.getPoint().z);
          setPoseAndRotation(mInfinityMovePose);
      }
  }
  ...
  중략
}

이번 요구사항은 위와 같은 방식을 이용해서 직경 50미터짜리 바닥 노드를 생성해 바닥인식의 한계를 조금 우회해서 요구사항을 맞출 수 있었습니다.

단 위와 같은 방식에도 단점은 존재합니다.

바닥에 놓아두는 Node(이하 바닥Node)를 구분 할수 있는 유니크한 이름으로 줄 것
바닥Node를 AR 상에 위치시키기 위해 최초 1회 이상은 정확한 바닥인식을 통해 바닥 Node를 배치 해야 한다는 점 (정확하지 않은 바닥Node가 배치되면 제품 Node 또한 정확한 위치를 할 수 없습니다.)
바닥Node와 실제 바닥의 Anchor가 다를 수 있다는 점 (실제 바닥은 지속적으로 트래킹을 통해 업데이트를 하고 있으나 바닥에 위치한 Node는 업데이트 하지 못합니다.)
바닥Node의 크기를 임의로 정해야 한다는 점에서 실내의 경우 정확하지 않을 수 있는 점

끝내며

아직 AR 기능은 바닥 인식이나 기타 여러가지 면에서 조금 부정확한 건 사실입니다. 저와 같이 Sceneform을 사용하는 개발자들 모두 Sceneform 자체의 커스터마이징의 한계 때문에 여러 좌절을 겪어 보았을 것입니다. 시간이 지나면 Sceneform도 많은 기능을 커스터마이징 할 수 있게 풀어 주지 않을까… 하는 작은 소망이 있습니다.

기술이 발전해서 카메라로 완벽한 바닥인식 및 거리인식을 하게 되는 날이 오면 AR 기능의 활용도는 정말 무궁무진 해 질겁니다. 그런 날이 오겠죠… AR 개발이 지금보다 무척 재미 있어 질 그런 날이…

유니티 스크립트 활용해 절차지향 모델링 기본요소 구성하기

Wed, 22 Jan 2020 10:00:00 +0000

안녕하세요. 어반베이스 3D 그래픽스팀의 윤인하입니다. 어반베이스에서는 비전문가들도 손쉽게 건물 단면도를 모델링 할 수 있는 라이브 스케치(Live Sketch)라는 툴을 개발하고 있습니다.

라이브 스케치를 활용하면, 캐드나 여타 3D모델링 툴(3DsMax, Maya, Blender, SolidWorks, Raino)과는 달리 고도의 학습 없이도 빠르고 쉽게 원하는 건물 단면도를 제작 할 수 있습니다.

라이브 스케치는 기존 모델링 툴에서 제작된 에셋을 가져다가 쓰는 것이 아니라 사용자가 동적으로 모델링을 만들어야 합니다. 물론 일부 심시티 같은 게임은 미리 제작되어 정적으로 보관되어 있는 블럭을 조립하는 식으로 건축물을 제작하기도 하지만, 이런 경우 수정과 편집이 번거롭고 컴퓨터의 연산량도 많아진다는 단점이 있습니다.

그렇기 때문에 일련의 규칙대로 프로그램 런타임에 모델링을 수행할 필요가 있었는데, (소위 절차지향 모델이라고 부릅니다) 이런 절차지향 모델링을 특정 프레임워크에서 수행하기 위해서는 opengl, direct 와 같은 graphic library 에서의 랜더링 기본 구성요소는 물론 구현방식을 우선적으로 알 필요가 있습니다.

유니티 엔진은 비단 게임제작 뿐만 아니라 비게임분야(건축, 영화, 증강현실 등)에도 적용이 가능한 범용 엔진이기 때문에 프로그래밍 코드로도 모델링을 가능하게 하는 기능들도 기본적으로 포함되어 있습니다. 이번 포스팅에는 유니티엔진의 script를 이용하여 model의 기본요소들을 구성하는 내용을 다루겠습니다.

Modeling 구성요소

opengl 혹은 direct 계열의 rendering engine에서 사용 가능한 modeling file에는 수많은 구성요소가 존재합니다. 이를 모두 설명하는데는 한계가 있으므로 기본적인 모양을 만들 수 있는 구성요소만 다루도록 하겠습니다. 더불어 유니티의 C# script를 이용하여 유니티 상에서 구현하는 예제를 진행하겠습니다.

*Source: 위키백과

Polygon
- 3D graphics의 기본 표현 단위
- 3차원 좌표를 가진 3개의 점으로 이루어진 구조체
Edge: 두 점을 잇는 선
Face: 세 점 이상을 이을때 생기는 폐곡면
Mesh: model의 모양을 나타내는 edge 구조
Mesh 구성요소
- vertex: 정점 위치정보
- triangles: polygon을 구성하는 vertex의 순서
- normal: face의 법선 vector
- uv: texture mapping을 위해 각 vertex가 가지고 있는 2차원 좌표(uvw라는 3차원 정보도 있으나 특수한 경우 아니면 2차원 uv만 사용)
- vertex color: 정점의 색정보(texture 없이 색을 표현하는 경우나 부가적인 표현을 위한 texture masking에 사용하기도 하나 일반적인 상황에서는 사용하지 않는다.)

Mesh 구성 예제(unity)

unity에서 mesh를 구성하기 앞서 숙지해야 할 부분은 vertex array와 triangles index의 순서에 따라 mesh 구성이 달라진다는 점입니다.

*Source: opengl wiki

triangles index는 vertex array의 vertex index를 의미하는데, 이것의 배열 순서에 따라 면과 법선 방향이 결정됩니다.

*Source: opengl wiki

법선은 면으로부터 수직 방향을 나타내는 방향입니다. triangles index의 배열 순서가 CW인지 CCW인지에 따라 법선의 방향이 결정되고, 이 법선벡터에 의해 랜더링할 면을 결정하게 됩니다. (일반적으로는 랜더링 부하 때문에 거의 드러나지 않는 면은 랜더링에서 제외하기 때문. Opengl 에서는 glFrontFace(GLenum mode)로 랜더링 방향을 결정. unity는 shader의 Cull로 결정)

polygon(triangle) 생성

이제 Unity에서 C# script를 이용한 기본 삼각형오브젝트를 제작해보겠습니다. (사용된 Unity version: 2018.3.0f2)

빈 gameobject에 PolygonMaker라는 script를 만든 후 component로 추가합니다.

그리고 PolygonMaker class에 단순한 삼각형 polygon을 만드는 다음 메소드를 만들어 줍니다.

    public GameObject MakePolygon(Vector3 p1, Vector3 p2, Vector3 p3)
    {
        GameObject go = new GameObject("Poligon");
        Mesh mesh = new Mesh();
        MeshFilter mf = go.AddComponent<MeshFilter>();
        MeshRenderer mr = go.AddComponent<MeshRenderer>();
        Material mt = new Material(Shader.Find("Standard"));

        Vector3[] vertices = { p1, p2, p3 };
        Vector2[] uvs = { new Vector2(0, 0), new Vector2(1, 0), new Vector2(1, 1) }; 

        int[] tris = { 0, 2, 1 };
        mt.mainTexture = (Texture)Resources.Load("Texture/1941165_0");
        mesh.vertices = vertices;
        mesh.triangles = tris;
        mesh.uv = uvs;        
        mf.mesh = mesh;
        mr.material = mt;        
        
        return go;
    }

다음과 같이, 세 점의 위치 vector를 parameter로 하는 polygon 제작함수를 만들었습니다. 주의할 점은, Unity의 standard shader default setting에서는 tris의 vertices index 월드좌표 기준으로 순서가 CW(clockwise)이면 랜더링 되는 면이 위를 향하고, CCW(counter clockwise)이면 아래를 향할 것입니다.

mesh의 uv는 쉽게 말하자면 model의 전개도로, x,y축으로 최대값 1을 갖고, uv의 index는 vertices의 index와 매칭됩니다. 즉, 해당 index의 버텍스의 uv좌표가 uv 배열의 해당 index를 가리킵니다. 만일 최대값 1을 넘길 시, texture는 반복적으로 나타나게 됩니다.

    void Start()
    {
        MakePoligon(new Vector3(0, 0, 0), new Vector3(1, 0, 0), new Vector3(1, 0, 1));
    }

그리고 제작한 메소드에 P1(0,0,0), P2(1,0,0), P3(1,0,1)의 세 점을 입력하여 폴리곤을 만듭니다.

결과화면

위와 같이 월드좌표 기준 P1(0,0,0), P2(1,0,0), P3(1,0,1)을 꼭지점으로 하는 기본단위 폴리곤인 삼각형이 만들어진 것을 확인할 수 있습니다.

Unity에서 랜더링 할 수 있도록 GameObject를 만들고, MeshRenderer component와 MeshFilter component를 추가했으며, image를 불러서 입혀주는 일련의 과정을 모두 MakePolygon method 에서 수행하였습니다.

polygon(Quad) 생성

이번에는 동일한 방법으로 사각형 판(Quad) 오브젝트를 만들어 보겠습니다.

사각형을 만들때는 위와 같은 순서(예: 0,1,2,2,1,3)로 vertices index를 mesh의 triangles에 배치해야 합니다. 세개의 vertex를 triangles에 배치하고 나면, 자동으로 다음의 vertex 세개를 다른 triangle로 구분합니다. (사용된 Unity version : 2018.3.0f2)

    public GameObject MakeQuad(Vector3 p1, Vector3 p2, Vector3 p3, Vector3 p4)
    {
        GameObject go = new GameObject("Quad");
        Mesh mesh = new Mesh();
        MeshFilter mf = go.AddComponent<MeshFilter>();
        MeshRenderer mr = go.AddComponent<MeshRenderer>();
        Material mt = new Material(Shader.Find("Standard"));
        mt.mainTexture = (Texture)Resources.Load("Texture/corodinateChecker");

        Vector3[] vertices = { p1, p2, p3, p4 };
        Vector2[] uvs = { new Vector2(0, 0), new Vector2(1, 0), new Vector2(0, 1), new Vector2(1,1) };

        int[] tris = { 0, 1, 2, 2, 1, 3 };
        mesh.vertices = vertices;
        mesh.triangles = tris;
        mesh.uv = uvs;
        mf.mesh = mesh;
        mr.material = mt;

        return go;
    }

    void Start()
    {
        MakeQuad(new Vector3(0, 0, 0), new Vector3(0, 0, 1), new Vector3(1, 0, 0), new Vector3(1, 0, 1));
    }

mesh의 triangle index 순서에서 중요한 것은, 세 점이 삼각형을 이루는지와 점배치의 회전방향입니다. 시작점이 어떠한 것인지는 상관없습니다. 위 method에서 예를 들면 (0,1,2,2,1,3)의 순서 뿐만 아니라 (2,0,1,2,1,3), (2,0,1,3,2,1) 등의 순서도 가능합니다.

결과화면

polygon(Submesh quad) 생성

submesh란 하나의 geometry가 다수의 mesh로 이루어진 것을 말합니다. 이 구조는 각각의 mesh가 각기 다른 material 정보를 참조할 수 있기 때문에 하나의 오브젝트에서 여러 종류의 재질표현이 가능하지만, 하나의 오브젝트를 랜더링하기 위하여 여러 개의 material을 call 해야 하기때문에 랜더링 성능을 더 많이 소비합니다.

unity c# script에서도 submesh 생성이 다음과 같이 가능합니다. (사용된 Unity version : 2018.3.0f2)

  public GameObject MakeSubmeshQuad(Vector3 p1, Vector3 p2, Vector3 p3, Vector3 p4, Vector3 p5, Vector3 p6)
    {
        GameObject go = new GameObject("subQuad");
        Mesh mesh = new Mesh();
        MeshFilter mf = go.AddComponent<MeshFilter>();
        MeshRenderer mr = go.AddComponent<MeshRenderer>();
        Material[] mts = new Material[2];

        mts[0] = new Material(Shader.Find("Standard"));
        mts[1] = new Material(Shader.Find("Standard"));
        mts[0].mainTexture = (Texture)Resources.Load("Texture/corodinateChecker");
        mts[1].mainTexture = (Texture)Resources.Load("Texture/corodinate");

        Vector3[] vertices = { p1, p2, p3, p4, p5, p6 };
        Vector2[] uvs = { new Vector2(0, 0), new Vector2(1, 0), new Vector2(0, 1), new Vector2(0, 1), new Vector2(1, 0), new Vector2(1, 1) };

        int[] subTris1 = { 0, 2, 1 };
        int[] subTris2 = { 4, 3, 5 };
        mesh.vertices = vertices;
        mesh.subMeshCount = 2;
        mesh.SetTriangles(subTris1, 0);
        mesh.SetTriangles(subTris2, 1);
        mesh.uv = uvs;
        
        mf.mesh = mesh;
        mr.materials = mts;      
        return go;
    }

submesh에서 특징적인 것은, 서로 다른 submesh들은 vertex를 공유하지 않는다는 겁니다. 그렇기 때문에 만일 4개의 꼭지점을 갖고 2개의 submesh를 갖는 geometry를 만들려면 총 6개(3 + 3)의 vertex가 필요합니다. 물론 꼭지점의 갯수는 4개이므로, 위치가 서로 겹치는 vertex들이 존재하게 됩니다.

상기 code에서 볼 수 있듯이, mesh의 SetTriangles method를 이용하여 나누고자 하는 vertices의 index를 나누어 각각의 subMesh들을 등록합니다. 첫번째 parameter는 triangle int 배열, 두번째 parameter는 subMesh의 index입니다. subMesh의 갯수는 subMeshCount 변수를 이용해서 선언합니다.

    void Start()
    {
        MakeSubmeshQuad(new Vector3(0, 0, 0), new Vector3(1, 0, 0), new Vector3(0, 0, 1), new Vector3(0, 0, 1), new Vector3(1, 0, 0), new Vector3(1, 0, 1));
    }

vertex가 6개인 quad(두개의 submesh triangle들이 하나의 quad를 이룬 경우) MakeSubmeshQuad에서 각기 다른 texture와 material을 생성한 후, 적용한 결과 각각의 submesh에 각기 다른 material이 적용되었음을 확인할 수 있습니다.

Transform matrix

Affine space & Affine transform

affine plane과 affine space는 유클리드 공간의 affine 기하학적 성질을 일반화해서 만들어지는 구조로, 점좌표에서 점좌표를 빼서 vector를 얻거나 점좌표에 vector를 더해 다른 점좌표를 얻을 수 있습니다. 이를 affine transform 이라고 부릅니다.

affine transform은 유클리드 3차원 공간에서 좌표의 이동, 스케일, 회전 등을 간단한 4X4 행렬식의 곱을 이용하여 변환하기 유용한 개념으로, vertex 및 오브젝트의 이동 등에 사용합니다. 라이브 스케치에서는 평면을 사출하여 체적을 만드는 알고리즘으로 벽 mesh를 생성하고 있습니다. 비단, object의 사출뿐만 아니라 변위가 생기는 모든 경우에 적용이 가능하므로 게임에서도 유용하게 사용됩니다.

하지만, Unity에서는 이런 affine transform 공식을 누구나 쉽게 쓸 수 있도록 Object 단위로 제어 가능한 transform method들을 쓰기 쉽게 만들어 놓았기 때문에 vertex 제어같은 드문 경우에서나 주로 사용합니다. 하지만 원리를 알아두면 예상치 못한 케이스들이나 native graphic framework들에 대한 대응도 가능하므로 개략적인 개념은 파악해두면 좋습니다.

우선 다항연립방정식을 효과적으로 처리할 수 있는 방식인 행렬연산을 이용하면 수월하게 계산 및 표기가 가능하기에(행렬연산이 발명된 이유이기도 하죠), 좌표관련 연산에는 행렬식이 무척 자주 쓰입니다.

3차원 유클리드 좌표계임을 가정했을때, x,y,z라는 세개의 parameter가 있고, 각 항에 곱해서 최종 아웃풋을 결정하는 비례계수가 존재합니다. 각 output X,Y,Z에는 input x성분, y성분, z성분의 합으로 나타나는데, 이것은 각 최종 좌표가 세가지 input parameter에 유기적으로 변하기 때문입니다. 예를 들어, 간단한 2차원 원방정식만 해도 각각의 x, y항을 구하기 위해서는 x와 y간의 연산을 필요로 합니다.

물론 연산된 식은 상당히 복잡하게 상수와 변수가 혼재되어 있으나 좌항과 우항이 homogeneous(동차적) 형태이므로, 비례계수를 변수에 곱해주는 식으로 변형이 가능해집니다.

(여기서 2차원 원방정식의 예시는 왜 항을 구할때 각 항의 덧셈과 같은 구조가 되는지와 동차적 구조에 대한 설명을 위한 것으로 affine transform에서는 동차가 아니기 때문에 원방정식을 쓰지는 않습니다. 그래서 affine 변환에서의 회전은 차원 형태를 맞추기 위해서 삼각함수를 이용합니다. 이 방법에 대해서는 뒤에 회전변환때 설명하겠습니다.)

유클리드 공간의 vector를 나타낸 비례상수와 x,y,z parameter의 곱과 합을 다음과 같은 행렬식으로 전환할 수 있습니다.

하지만 이 식에서는 방향성분만 존재합니다. 방향을 이동한다는 것은 불가능하므로, 위치에 대한 정보도 필요합니다. 그러므로 3차원 공간에 대한 위치행렬 t를 더해보면 다음과 같은 형태가 됩니다.

이 행렬의 덧셈을 정사각 행렬로 하나로 묶어주는 것도 가능합니다. 그렇게 하기 위해서는 가상의 차원을 하나 더 늘립니다.

이런 4차원 형태로 만드는 이유는, 이동, 회전, 확대 변환행렬들의 곱을 더 쉽게 할 수 있는 형태로 만들고, 또 transform의 방향성(w)도 지정할 수 있기 때문입니다.

이제 행렬을 이용한 affine 공간에서의 회전에 대해 설명하겠습니다. 2차원에서의 회전행렬은 다음과 같은 식으로 나타납니다.

이를 증명하기 위해서는 간단한(?) 삼각형의 정의와 선형수학만 있으면 됩니다.

다음과 같은 직사각형이 존재한다고 하고, 우측의 두 점을 길이가 각각 x, y인 P, Q 라고 정의합니다.

이 직사각형을 euler 각도 θ만큼 회전하였을때 P, Q의 위치를 P’, Q’라고 하면, 이 P’, Q’의 좌표는 P’(xcosθ - ysinθ, xsinθ + ycosθ), Q’(xcosθ, xsinθ)가 됩니다. 쓰인 개념은 피타고라스의 정리와 삼각함수의 정의, 삼각형의 정의 뿐이고, 도식으로도 충분히 이해가 가능합니다.

행렬의 성질에 의해 다음과 같이 회전행렬을 적용할 수 있고,

도출된 식의 P(x, y)를 P’(xcosθ - ysinθ, xsinθ + ycosθ)의 형태로 나오게 분해해보면 다음과 같은 회전행렬식을 도출할 수 있습니다. 또한 각 축에 대해 회전변환 행렬을 순차적으로 곱해주면 순서대로 회전시킨 최종 결과를 얻을 수 있습니다.

2차원 상에서의 회전행렬이지만 3차원은 결국 xy평면, yz평면, xz평면에서 회전을 하면 2차원과 같은 구조이므로, 다음과 같은 유사한 형태의 식을 도출할 수 있습니다. (3차원 회전식의 경우에는 원리는 같지만 복잡성이 늘어나므로, 증명과정의 기술은 생략하도록 하겠습니다. 더 자세한 설명은 선형대수학을 참고하시면 됩니다.)

affine 공간에서의 scale 식은 간단합니다. 행렬의 분배법칙에 의해서 단위행렬 I에 scale factor를 더해준 형태가 scale 식이기 때문에 다음과 같은 형태가 됩니다.

이렇게 구한 transform, rotation, scale 행렬을 서로 곱해주면, affine 공간에서 이동, 회전, scale이 적용된 최종 아웃풋을 얻을 수가 있습니다. 단, 행렬의 특징중, 교환법칙은 성립되지 않기 때문에, 반드시 transform, rotation, scale 순으로 각 행렬들을 곱해줘야 제대로 된 결과를 얻을 수 있습니다.

TRS test code

여지껏 수학적 증명을 하면서 trs 행렬과 변환을 설명한 이유는, unity의 3D 공간이 affine space이기 때문입니다. 하지만 unity를 하면서 이러한 행렬연산을 접하지 않으신 분들은 의아해 하실수도 있습니다. 사실은 unity에서 제공하는 transform class의 method들이 이런 행렬식을 이용해 만들어진 method들이지만, 패킹되어있기 때문에 내용 확인은 어렵습니다.

하지만 이러한 transform class는 gameObject 기준으로 사용에 제한이 있기 때문에 vertex 제어에는 불편함이 따릅니다. 그래서 vertex의 trs변환을 위해서 이러한 matrix 곱을 사용하는게 좋습니다. 이러한 경우를 상정했던 것인지, UnityEngine namespace의 Matrix4x4 class에서는 affine space에 적용 가능한 행렬곱 method들이 잘 준비되어 있습니다. 그러므로 unity에서 행렬곱까지 직접 구현할 필요는 없으나, 원리와 구조를 알아야 이 method들을 적재적소에 활용 가능합니다.

vector translate

위에서 설명한 이동행렬을 code로 쓰면 다음과 같습니다.

    //vector의 이동
    public static Matrix4x4 Translate(Vector3 aPosition)
    {
        var m = Matrix4x4.identity; // 1   0   0   x
        m.m03 = aPosition.x;        // 0   1   0   y
        m.m13 = aPosition.y;        // 0   0   1   z
        m.m23 = aPosition.z;        // 0   0   0   1
        return m;
    }

vector rotation

회전 같은 경우는 x, y, z축을 각각 회전시켜서 나온 행렬을 순서대로 곱해주면 x, y, z축 모든 방향으로 돌린 결과가 나옵니다.

     //vector의 회전
    public static Matrix4x4 RotateX(float aAngleRad)
    {
        Matrix4x4 m = Matrix4x4.identity;     //  1   0   0   0 
        m.m11 = m.m22 = Mathf.Cos(aAngleRad); //  0  cos -sin 0
        m.m21 = Mathf.Sin(aAngleRad);         //  0  sin  cos 0
        m.m12 = -m.m21;                       //  0   0   0   1
        return m;
    }
    public static Matrix4x4 RotateY(float aAngleRad)
    {
        Matrix4x4 m = Matrix4x4.identity;     // cos  0  sin  0
        m.m00 = m.m22 = Mathf.Cos(aAngleRad); //  0   1   0   0
        m.m02 = Mathf.Sin(aAngleRad);         //-sin  0  cos  0
        m.m20 = -m.m02;                       //  0   0   0   1
        return m;
    }
    public static Matrix4x4 RotateZ(float aAngleRad)
    {
        Matrix4x4 m = Matrix4x4.identity;     // cos -sin 0   0
        m.m00 = m.m11 = Mathf.Cos(aAngleRad); // sin  cos 0   0
        m.m10 = Mathf.Sin(aAngleRad);         //  0   0   1   0
        m.m01 = -m.m10;                       //  0   0   0   1
        return m;
    }
    //최종 회전 결과
    public static Matrix4x4 Rotate(Vector3 aEulerAngles)
    {
        var rad = aEulerAngles * Mathf.Deg2Rad;
        return RotateY(rad.y) * RotateX(rad.x) * RotateZ(rad.z);
    }

vector scale (world coordinate)

scale은 간단한 형태로 다음과 같습니다.

    //vector의 확대/축소
    public static Matrix4x4 Scale(Vector3 aScale)
    {
        var m = Matrix4x4.identity; //  sx   0   0   0
        m.m00 = aScale.x;           //   0  sy   0   0
        m.m11 = aScale.y;           //   0   0  sz   0
        m.m22 = aScale.z;           //   0   0   0   1
        return m;
    }

TRS Test

앞서 생성했던 quad mesh를 이용하여 간단한 TRS Test를 해보겠습니다.

public class PolygonMaker : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        //quad object size 
        const float width = 1;
        const float height = 1; 
        //gameObject 생성
        Mesh mesh = MakeQuad(new Vector3(-width/2, 0, -height/2), new Vector3(-width/2, 0, height/2), new Vector3(width/2, 0, -height/2), new Vector3(width/2, 0, height/2)).GetComponent<MeshFilter>().mesh;         1)).GetComponent<MeshFilter>().mesh;        
        GameObject go = new GameObject("extruded Mesh");
        Material mt = new Material(Shader.Find("Standard"));
        go.AddComponent<MeshFilter>();
        go.AddComponent<MeshRenderer>().material = mt;

        //변환값을 저장할 새로운 위치 리스트
        List<Vector3> newVert = new List<Vector3>();

        //mesh의 vertices의 갯수 만큼 반복
         foreach (Vector3 v in mesh.vertices)
        {
            Matrix4x4 fx;
            Matrix4x4 fxT;
            Matrix4x4 fxR;
            Matrix4x4 fxS;

            //변환행렬곱 수행 
            fxT = Translate(new Vector3(2f, 0f, 0f));
            fxR = Rotate(new Vector3(45f, 0f, 0f));
            fxS = Scale(new Vector3(0.5f, 2f, 2f));
            //변환행렬 합성 (x축으로 2만큼 평행이동, x축기준 45도 회전, x축기준 0.5배 scale)
            fx = fxT * fxR * fxS;
            newVert.Add(fx.MultiplyPoint(v));
        }
        //mesh의 위치정보 갱신
        mesh.vertices = newVert.ToArray();
    }

결과화면

object의 pivot은 유지한채로 geometry만 변화시키므로, pivot을 다시 설정하는 상황에 써도 적합합니다.

맺음말

간단한 형태의 mesh 동적 생성과 affine space와 TRS 변환에 대해 알아보았습니다.

절차지향 모델링은 깊은 수학적 지식과 논리력을 필요로 합니다. (우리가 당연하게 생각했던 3ds max나 maya, blender같은 modeling tool들은 사실은 수학 및 논리적 algorithm의 집합체입니다.)

원리에 대한 이해가 없이 라이브러리나 다른 사람들이 만들어 놓은 api를 사용한다면 당장은 쉽게 갈 수 있을지 모르나, 결국 문제가 발생하면 한계에 봉착하고 다시 되돌아가서 생각하게 됩니다. 포스팅을 진행하면서 저 또한 스스로 더 노력해야 한다는 마음가짐을 갖게 되었습니다.

더 많은 내용을 쓰고 싶은 욕심도 있었으나 하다보니 분량이 늘어나서.. 더 깊은 내용은 다음 기회에 포스팅 하도록 하겠습니다. 감사합니다.

Sagemaker에서 PyTorch를 활용한 딥러닝 이미지 분류 모델 학습 및 배포

Tue, 17 Dec 2019 10:00:00 +0000

안녕하세요. 어반베이스 Machine Learning 개발자 백윤아입니다. 어반베이스에서는 공간 분석 서비스인 Space 개발을 담당하고 있습니다. Space는 컴퓨터 비전 영역의 딥러닝을 활용하여 공간을 분류하고, 공간에서 사물을 검출하며 공간의 특성을 분석하는 서비스를 제공합니다.

이번 글에서는 Space의 API를 만들었던 과정에 대해 이야기 해보려고 합니다. AWS 클라우드를 활용하여 간단한 딥러닝 모델 학습부터 서버리스 API 구축까지에 대한 과정인데요. 전체 내용을 두 가지 파트로 나누자면, 1. 딥러닝 모델 개발과 2. Serverless API 개발으로 나눌 수 있을 것 같습니다.

딥러닝 모델 개발 : Amazon SageMaker에서 PyTorch를 활용한 딥러닝 이미지 분류 모델 학습 및 배포
Serverless API 개발 : Django Rest Framework를 이용한 RESTful API 개발 & Zappa를 이용해 AWS Lambda에 Django 올리기

오늘은 AWS Sagemaker에서 간단한 딥러닝 이미지 분류기의 학습부터 배포까지의 과정에 대해 알아보겠습니다.

Amazon SageMaker에서 PyTorch를 활용한 딥러닝 이미지 분류 모델 학습 및 배포

우선 간단한 이미지 분류기를 만들기 위해서 학습에 사용할 데이터가 필요합니다.

이번 튜토리얼에서는 최근 핫(?)한 딥러닝 프레임워크인 PyTorch를 사용하여 모델 학습을 해보려고 하는데, PyTorch에는 Computer Vision 분야를 위한 torchvision이라는 패키지가 만들어져 있습니다.

여기에는 ImageNet이나 CIFAR10, MNIST 등과 같이 널리 사용되는 유명한 데이터셋(datasets)과 모델 아키텍처(models) 및 이미지용 데이터 변환기(transforms)가 포함되어 있습니다. 이 패키지를 사용하면 편리하게 대량의 이미지 데이터를 불러오고, 데이터 변환도 손쉽게 할 수 있습니다. 여기서는 나만의 데이터셋으로 세 종류의 고양이를 분류하는 모델을 만들기 위해서 torchvision의 ImageFolder 모듈을 사용합니다.

<사전환경설정>

1. Custom Dataset 구성하기

데이터셋의 구성은 아래와 같습니다. root 디렉토리를 하나 생성하고, train/validation 디렉토리로 데이터를 나누어줍니다. 학습하고자하는 데이터셋의 레이블(Label)을 그 아래 디렉토리 이름으로 지정하고, 레이블 이름의 디렉토리 안에 그 레이블에 해당되는 이미지를 준비합니다. train data는 레이블당 각각 800장 내외, validation data는 레이블당 각각 200장 내외로 준비했습니다.

cat_data
    ├── train
    │ 	  ├── chartreux
    │     │       ├── chartreux_1.jpg
    │     │       ├── chartreux_2.jpg
    │     │       ├── chartreux_3.jpg
    │     │       └── ...
    │ 	  ├── persian
    │     └── ragdoll
    └── validation
            ├── chartreux
            │       ├── chartreux_1.jpg
            │       ├── chartreux_2.jpg
            │       ├── chartreux_3.jpg
            │       └── ...
            ├── persian
            └── ragdoll

2. Amazon SageMaker 노트북 환경 설정하기

이제 딥러닝 모델 학습을 시작하기 위해 노트북 인스턴스를 만들어 보겠습니다. AWS Management Console에 로그인하고 Amazon SageMaker 서비스를 선택한 다음 콘솔 대시 보드에서 노트북 인스턴스 생성을 선택하여 다음 페이지를 엽니다.

노트북 인스턴스의 이름을 정하고 원하는 인스턴스 유형을 선택한 후, Create notebook instance 버튼을 누르면 새로운 노트북 인스턴스가 생성됩니다.

화면 상단에 있는 New 버튼을 누르고 아래와 같이 conda_pytorch_p36 을 선택하여 새로운 노트북을 생성합니다. Conda 패키지를 이용하여 Python3 PyTorch 환경이 설정되어 있는 노트북입니다.

노트북에서 Python과 PyTorch의 버전을 확인해보겠습니다.

from platform import python_version
import torch

print("Python", python_version())
print("PyTorch", torch.__version__)

Python 3.6.5
PyTorch 1.2.0

잘 설치 되어있네요!

그럼 SageMaker Session, 데이터 및 모델을 저장할 Amazon S3의 bucket과 prefix(bucket 내의 folder 이름), IAM role을 설정하겠습니다.

import sagemaker
# Session
sagemaker_session = sagemaker.Session()
# Amazon S3
bucket = sagemaker_session.default_bucket()
prefix = 'DEMO-pytorch-cat-classifier'
# IAM role
role = sagemaker.get_execution_role()

3. Data 불러오기

이제 데이터를 학습에 사용할 수 있도록 간단한 전처리를 하고 불러오도록 하겠습니다. 우선 앞에서 구성했던 데이터셋 디렉토리(cat_data)를 터미널을 사용해서 노트북과 같은 경로에 업로드 합니다. 앞서 언급한 것처럼 이미지 데이터를 불러오기 위해서 torchvision의 ImageFolder를 사용하고 transforms으로 여러 가지 이미지 전처리를 할 수 있습니다. 여기서는 이미지 크기를 일정하게 바꿔서 tensor로 변환해주고 정규화시켜주는 기능만 사용했습니다.

import os
import torch
import torch.utils.data
from torchvision import datasets, transforms

root_dir = 'cat_data'

transforms = transforms.Compose([
    transforms.Resize((96, 96)),
    transforms.ToTensor(),
    transforms.Normalize((0.5, 0.5, 0.5), (0.5, 0.5, 0.5))
])

trainset = datasets.ImageFolder(os.path.join(root_dir, 'train'), transform=transforms)
testset = datasets.ImageFolder(os.path.join(root_dir, 'validation'), transform=transforms)

train_loader = torch.utils.data.DataLoader(trainset, batch_size=4, shuffle=True)
test_loader = torch.utils.data.DataLoader(testset, batch_size=4, shuffle=True)

DataLoader를 사용해서 주어진 데이터셋을 지정한 batch_size 만큼 iterable하게 불러올 수 있습니다. 데이터가 잘 로드되었나 확인하기 위해서 학습 데이터셋을 무작위로 불러와 보겠습니다.

import numpy as np
import torchvision, torch
import matplotlib.pyplot as plt

# labels list
classes = trainset.classes

# function to show an image
def imshow(img):
    img = img / 2 + 0.5     # unnormalize
    npimg = img.numpy()
    plt.figure(figsize=(10, 10))
    plt.axis("off")
    plt.imshow(np.transpose(npimg, (1, 2, 0)))

# get some random training images
dataiter = iter(train_loader)
images, labels = dataiter.next()

# show images
imshow(torchvision.utils.make_grid(images))

# print labels
print('     ', '        '.join('%9s' % classes[labels[j]] for j in range(4)))

4. Data를 Amazon S3에 업로드하기

sagemaker.Session.upload_data 함수를 사용하여 데이터셋을 Amazon S3에 업로드합니다. 함수의 반환 값은 데이터셋이 저장된 S3 경로입니다.

inputs = sagemaker_session.upload_data(path=root_dir, bucket=bucket, key_prefix=prefix+'/data')

<학습하기>

1. Training Script 작성하기

모델을 학습시키기 위해서는 PyTorch 프레임워크를 사용하여 작성된 스크립트가 필요합니다. 스크립트에는 모델을 training하고 hosting하는 데 필요한 모든 코드가 있어야 합니다. 이 스크립트는 SageMaker 외부에서 실행할 수 있는 training 스크립트와 유사하지만, 아래와 같은 다양한 환경변수를 추가하여 학습 환경 속성에 액세스할 수 있도록 해주어야 합니다. Using PyTorch with the SageMaker Python SDK에서 더 자세한 내용을 확인할 수 있습니다.

SM_HOSTS: 모든 host를 포함하는 JSON encoded list
SM_CURRENT_HOST: 현재 컨테이너의 이름
SM_MODEL_DIR: 모델 아티팩트를 저장할 디렉토리 경로를 나타내는 문자열
SM_NUM_GPUS: 현재 컨테이너에서 사용 가능한 gpu 수
SM_CHANNEL_TRAINING: ‘training’ 채널에 데이터가 저장된 디렉토리의 경로를 나타내는 문자열

아래 코드는 이번 튜토리얼에서 사용한 training script 전체 코드입니다. 고양이의 품종을 분류하기 위해서 간단한 CNN(Convolution Neural Network)을 정의했습니다.

전체 코드 펼치기

import argparse
import json
import logging
import os
import sagemaker_containers
import sys
import torch
import torch.distributed as dist
import torch.nn as nn
import torch.nn.functional as F
import torch.optim as optim
import torch.utils.data
import torch.utils.data.distributed
from torchvision import datasets, transforms

logger = logging.getLogger(__name__)
logger.setLevel(logging.DEBUG)
logger.addHandler(logging.StreamHandler(sys.stdout))


class Net(nn.Module):
    def __init__(self):
        super(Net, self).__init__()
        self.conv1 = nn.Conv2d(3, 6, 7)
        self.conv2 = nn.Conv2d(6, 16, 3)
        self.conv3 = nn.Conv2d(16, 64, 3)
        self.fc1 = nn.Linear(64 * 9 * 9, 500)
        self.fc2 = nn.Linear(500, 250)
        self.fc3 = nn.Linear(250, 120)
        self.fc4 = nn.Linear(120, 84)
        self.fc5 = nn.Linear(84, 3)
        
        self.pool = nn.MaxPool2d(2, 2)
        self.dropout = nn.Dropout(.2)
        self.final_act = nn.LogSoftmax(dim=-1)

    def forward(self, x):
        x = self.pool(F.relu(self.conv1(x)))
        x = self.pool(F.relu(self.conv2(x)))
        x = self.pool(F.relu(self.conv3(x)))
        x = x.view(-1, 64 * 9 * 9)
        x = F.relu(self.fc1(x))
        x = F.relu(self.fc2(x))
        x = F.relu(self.fc3(x))
        x = F.relu(self.fc4(x))
        x = self.final_act(self.fc5(x))
        return x

def average_gradients(model):
    # Gradient averaging.
    size = float(dist.get_world_size())
    for param in model.parameters():
        dist.all_reduce(param.grad.data, op=dist.reduce_op.SUM)
        param.grad.data /= size


def train(args):
    is_distributed = len(args.hosts) > 1 and args.backend is not None
    logger.debug("Distributed training - {}".format(is_distributed))
    use_cuda = args.num_gpus > 0
    logger.debug("Number of gpus available - {}".format(args.num_gpus))
    kwargs = {'num_workers': 1, 'pin_memory': True} if use_cuda else {}
    device = torch.device("cuda" if use_cuda else "cpu")

    if is_distributed:
        # Initialize the distributed environment.
        world_size = len(args.hosts)
        os.environ['WORLD_SIZE'] = str(world_size)
        host_rank = args.hosts.index(args.current_host)
        os.environ['RANK'] = str(host_rank)
        dist.init_process_group(backend=args.backend, rank=host_rank, world_size=world_size)
        logger.info('Initialized the distributed environment: \'{}\' backend on {} nodes. '.format(
            args.backend, dist.get_world_size()) + 'Current host rank is {}. Number of gpus: {}'.format(
            dist.get_rank(), args.num_gpus))

    # set the seed for generating random numbers
    torch.manual_seed(args.seed)
    if use_cuda:
        torch.cuda.manual_seed(args.seed)
    
    # data loader
    logger.info("Loading Cat dataset")
    transform = transforms.Compose([
        transforms.Resize((96, 96)),
        transforms.ToTensor(),
        transforms.Normalize((0.5, 0.5, 0.5), (0.5, 0.5, 0.5))
    ])
    trainset = datasets.ImageFolder(os.path.join(args.data_dir, 'train'), transform=transform)
    testset = datasets.ImageFolder(os.path.join(args.data_dir, 'validation'), transform=transform)
    
    train_sampler = torch.utils.data.distributed.DistributedSampler(trainset) if is_distributed else None
    
    train_loader = torch.utils.data.DataLoader(trainset, args.batch_size, shuffle=train_sampler is None, sampler=train_sampler)
    test_loader = torch.utils.data.DataLoader(testset, args.test_batch_size, shuffle=True)
    
    # model 
    logger.info("Model loaded")
    model = Net().to(device)
    if is_distributed and use_cuda:
        # multi-machine multi-gpu case
        model = torch.nn.parallel.DistributedDataParallel(model)
    else:
        # single-machine multi-gpu case or single-machine or multi-machine cpu case
        model = torch.nn.DataParallel(model)
    
    criterion = nn.NLLLoss().to(device)
    optimizer = optim.SGD(model.parameters(), lr=args.lr, momentum=args.momentum)

    for epoch in range(1, args.epochs + 1):
        model.train()
        for batch_idx, (data, target) in enumerate(train_loader, 1):
            data, target = data.to(device), target.to(device)
            optimizer.zero_grad()
            output = model(data)
            loss = criterion(output, target)
            loss.backward()
            if is_distributed and not use_cuda:
                # average gradients manually for multi-machine cpu case only
                average_gradients(model)
            optimizer.step()
            if batch_idx % args.log_interval == 0:
                logger.info('Train Epoch: {} [{}/{} ({:.0f}%)] Loss: {:.6f}'.format(
                    epoch, batch_idx * len(data), len(train_loader.sampler),
                    100. * batch_idx / len(train_loader), loss.item()))
        test(model, test_loader, device)   
    save_model(model, args.model_dir)


def test(model, test_loader, device):
    model.eval()
    criterion = nn.NLLLoss().to(device)
    test_loss = 0
    correct = 0
    with torch.no_grad():
        for data, target in test_loader:
            data, target = data.to(device), target.to(device)
            output = model(data)
            loss = criterion(output, target)
            test_loss += loss.item()  # sum up batch loss
            pred = output.max(1, keepdim=True)[1]  # get the index of the max log-probability
            correct += pred.eq(target.view_as(pred)).sum().item()

    test_loss /= len(test_loader.dataset)
    logger.info('Test set: Average loss: {:.4f}, Accuracy: {}/{} ({:.0f}%)\n'.format(
        test_loss, correct, len(test_loader.dataset),
        100. * correct / len(test_loader.dataset)))

    
def save_model(model, model_dir):
    logger.info("Saving the model.")
    path = os.path.join(model_dir, 'model.pth')
    torch.save(model.cpu().state_dict(), path)
    
    
def model_fn(model_dir):
    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
    model = torch.nn.DataParallel(Net())
    with open(os.path.join(model_dir, 'model.pth'), 'rb') as f:
        model.load_state_dict(torch.load(f))
    return model.to(device)



if __name__ == '__main__':
    parser = argparse.ArgumentParser()

    # Data and model checkpoints directories
    parser.add_argument('--batch-size', type=int, default=4, metavar='N',
                        help='input batch size for training (default: 4)')
    parser.add_argument('--test-batch-size', type=int, default=4, metavar='N',
                        help='input batch size for testing (default: 4)')
    parser.add_argument('--epochs', type=int, default=10, metavar='N',
                        help='number of epochs to train (default: 10)')
    parser.add_argument('--lr', type=float, default=0.001, metavar='LR',
                        help='learning rate (default: 0.001)')
    parser.add_argument('--momentum', type=float, default=0.9, metavar='M',
                        help='SGD momentum (default: 0.9)')
    parser.add_argument('--seed', type=int, default=1, metavar='S',
                        help='random seed (default: 1)')
    parser.add_argument('--log-interval', type=int, default=100, metavar='N',
                        help='how many batches to wait before logging training status')
    parser.add_argument('--backend', type=str, default=None,
                        help='backend for distributed training (tcp, gloo on cpu and gloo, nccl on gpu)')

    # Container environment
    parser.add_argument('--hosts', type=list, default=json.loads(os.environ['SM_HOSTS']))
    parser.add_argument('--current-host', type=str, default=os.environ['SM_CURRENT_HOST'])
    parser.add_argument('--model-dir', type=str, default=os.environ['SM_MODEL_DIR'])
    parser.add_argument('--data-dir', type=str, default=os.environ['SM_CHANNEL_TRAINING'])
    parser.add_argument('--num-gpus', type=int, default=os.environ['SM_NUM_GPUS'])

    train(parser.parse_args())

training script를 다음과 같이 크게 4가지 부분으로 나눌 수 있습니다.

1) model network 부분

class Net(nn.Module):
    def __init__(self):
        super(Net, self).__init__()
        self.conv1 = nn.Conv2d(3, 6, 7)
        self.conv2 = nn.Conv2d(6, 16, 3)
        self.conv3 = nn.Conv2d(16, 64, 3)
        self.fc1 = nn.Linear(64 * 9 * 9, 500)
        self.fc2 = nn.Linear(500, 250)
        self.fc3 = nn.Linear(250, 120)
        self.fc4 = nn.Linear(120, 84)
        self.fc5 = nn.Linear(84, 3)
        
        self.pool = nn.MaxPool2d(2, 2)
        self.dropout = nn.Dropout(.2)
        self.final_act = nn.LogSoftmax(dim=-1)

    def forward(self, x):
        x = self.pool(F.relu(self.conv1(x)))
        x = self.pool(F.relu(self.conv2(x)))
        x = self.pool(F.relu(self.conv3(x)))
        x = x.view(-1, 64 * 9 * 9)
        x = F.relu(self.fc1(x))
        x = F.relu(self.fc2(x))
        x = F.relu(self.fc3(x))
        x = F.relu(self.fc4(x))
        x = self.final_act(self.fc5(x))
        return x

2) training 실행(data loader 포함) 부분

def train(args):
    is_distributed = len(args.hosts) > 1 and args.backend is not None
    logger.debug("Distributed training - {}".format(is_distributed))
    use_cuda = args.num_gpus > 0
    logger.debug("Number of gpus available - {}".format(args.num_gpus))
    kwargs = {'num_workers': 1, 'pin_memory': True} if use_cuda else {}
    device = torch.device("cuda" if use_cuda else "cpu")

    if is_distributed:
        # Initialize the distributed environment.
        world_size = len(args.hosts)
        os.environ['WORLD_SIZE'] = str(world_size)
        host_rank = args.hosts.index(args.current_host)
        os.environ['RANK'] = str(host_rank)
        dist.init_process_group(backend=args.backend, rank=host_rank, world_size=world_size)
        logger.info('Initialized the distributed environment: \'{}\' backend on {} nodes. '.format(
            args.backend, dist.get_world_size()) + 'Current host rank is {}. Number of gpus: {}'.format(
            dist.get_rank(), args.num_gpus))

    # set the seed for generating random numbers
    torch.manual_seed(args.seed)
    if use_cuda:
        torch.cuda.manual_seed(args.seed)
    
    # data loader
    logger.info("Loading Cat dataset")
    transform = transforms.Compose([
        transforms.Resize((96, 96)),
        transforms.ToTensor(),
        transforms.Normalize((0.5, 0.5, 0.5), (0.5, 0.5, 0.5))
    ])
    trainset = datasets.ImageFolder(os.path.join(args.data_dir, 'train'), transform=transform)
    testset = datasets.ImageFolder(os.path.join(args.data_dir, 'validation'), transform=transform)
    
    train_sampler = torch.utils.data.distributed.DistributedSampler(trainset) if is_distributed else None
    
    train_loader = torch.utils.data.DataLoader(trainset, args.batch_size, shuffle=train_sampler is None, sampler=train_sampler)
    test_loader = torch.utils.data.DataLoader(testset, args.test_batch_size, shuffle=True)
    
    # model 
    logger.info("Model loaded")
    model = Net().to(device)
    if is_distributed and use_cuda:
        # multi-machine multi-gpu case
        model = torch.nn.parallel.DistributedDataParallel(model)
    else:
        # single-machine multi-gpu case or single-machine or multi-machine cpu case
        model = torch.nn.DataParallel(model)
    
    # loss function and optimizer
    criterion = nn.NLLLoss().to(device)
    optimizer = optim.SGD(model.parameters(), lr=args.lr, momentum=args.momentum)

    for epoch in range(1, args.epochs + 1):
        model.train()
        for batch_idx, (data, target) in enumerate(train_loader, 1):
            data, target = data.to(device), target.to(device)
            optimizer.zero_grad()
            output = model(data)
            loss = criterion(output, target)
            loss.backward()
            if is_distributed and not use_cuda:
                # average gradients manually for multi-machine cpu case only
                average_gradients(model)
            optimizer.step()
            if batch_idx % args.log_interval == 0:
                logger.info('Train Epoch: {} [{}/{} ({:.0f}%)] Loss: {:.6f}'.format(
                    epoch, batch_idx * len(data), len(train_loader.sampler),
                    100. * batch_idx / len(train_loader), loss.item()))
        test(model, test_loader, device)   
    save_model(model, args.model_dir)

3) model 저장/로드 부분

def save_model(model, model_dir):
    logger.info("Saving the model.")
    path = os.path.join(model_dir, 'model.pth')
    torch.save(model.cpu().state_dict(), path)
    
    
def model_fn(model_dir):
    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
    model = torch.nn.DataParallel(Net())
    with open(os.path.join(model_dir, 'model.pth'), 'rb') as f:
        model.load_state_dict(torch.load(f))
    return model.to(device)

4) 환경변수 및 학습 파라미터 설정 부분

if __name__ == '__main__':
    parser = argparse.ArgumentParser()

    # Training parameters
    parser.add_argument('--batch-size', type=int, default=4, metavar='N',
                        help='input batch size for training (default: 4)')
    parser.add_argument('--test-batch-size', type=int, default=4, metavar='N',
                        help='input batch size for testing (default: 4)')
    parser.add_argument('--epochs', type=int, default=10, metavar='N',
                        help='number of epochs to train (default: 10)')
    parser.add_argument('--lr', type=float, default=0.001, metavar='LR',
                        help='learning rate (default: 0.001)')
    parser.add_argument('--momentum', type=float, default=0.9, metavar='M',
                        help='SGD momentum (default: 0.9)')
    parser.add_argument('--seed', type=int, default=1, metavar='S',
                        help='random seed (default: 1)')
    parser.add_argument('--log-interval', type=int, default=100, metavar='N',
                        help='how many batches to wait before logging training status')
    parser.add_argument('--backend', type=str, default=None,
                        help='backend for distributed training (tcp, gloo on cpu and gloo, nccl on gpu)')

    # Container environment
    parser.add_argument('--hosts', type=list, default=json.loads(os.environ['SM_HOSTS']))
    parser.add_argument('--current-host', type=str, default=os.environ['SM_CURRENT_HOST'])
    parser.add_argument('--model-dir', type=str, default=os.environ['SM_MODEL_DIR'])
    parser.add_argument('--data-dir', type=str, default=os.environ['SM_CHANNEL_TRAINING'])
    parser.add_argument('--num-gpus', type=int, default=os.environ['SM_NUM_GPUS'])

2. PyTorch Estimator 생성하기 (모델 학습)

자! 이제 드디어 학습을 시작할 수 있는 준비가 끝났습니다~~ SageMaker에서 Pytorch 프레임워크를 이용하여 모델을 학습시키기 위해 모델의 학습부터 배포까지 end-to-end로 처리해주는 PyTorch Estimator를 생성해줍니다.

from sagemaker.pytorch import PyTorch

estimator = PyTorch(entry_point='classifier.py',
                    role=role,
                    framework_version='1.2.0',
                    train_instance_count=1,
                    train_instance_type='ml.p2.8xlarge',
                    hyperparameters={
                        'epochs': 30,
                        'backend': 'gloo'
                    })

여기서 사용한 estimator의 기본적인 parameters를 살펴보도록 하겠습니다.

entry_point : training script 경로를 나타내는 문자열
role : 초반에 설정했던 IAM role
framework_version : 모델 학습 코드를 실행하는 데 사용하는 PyTorch 버전
train_instance_count : 학습에 사용될 인스턴스의 개수
train_instance_type : 학습에 사용될 인스턴스 유형
hyperparameters : 학습에 사용될 하이퍼파라미터. training script에 argument로 설정한 파라미터들

이번 분류 모델 학습에서는 ‘ml.p2.8xlarge’ 인스턴스를 1개 사용하여 30 epochs을 설정 해주었고, 나머지 파라미터들은 training script에서 설정해준 기본값을 사용했습니다. 이제 학습을 시작해보도록 하겠습니다.

estimator.fit({'training': inputs})  # inputs : dataset이 저장된 S3 경로

2019-12-17 07:12:40 Starting - Starting the training job...
2019-12-17 07:12:42 Starting - Launching requested ML instances......
2019-12-17 07:14:10 Starting - Preparing the instances for training.........
2019-12-17 07:15:18 Downloading - Downloading input data...
2019-12-17 07:16:11 Training - Downloading the training image........bash: cannot set terminal process group (-1): Inappropriate ioctl for device
bash: no job control in this shell
2019-12-17 07:17:23,431 sagemaker-containers INFO     Imported framework sagemaker_pytorch_container.training
2019-12-17 07:17:23,511 sagemaker_pytorch_container.training INFO     Block until all host DNS lookups succeed.
2019-12-17 07:17:26,577 sagemaker_pytorch_container.training INFO     Invoking user training script.
2019-12-17 07:17:26,827 sagemaker-containers INFO     Module classifier does not provide a setup.py. 
Generating setup.py
2019-12-17 07:17:26,827 sagemaker-containers INFO     Generating setup.cfg
2019-12-17 07:17:26,828 sagemaker-containers INFO     Generating MANIFEST.in
2019-12-17 07:17:26,828 sagemaker-containers INFO     Installing module with the following command:
/opt/conda/bin/python -m pip install . 
Processing /opt/ml/code
Building wheels for collected packages: classifier
  Building wheel for classifier (setup.py): started
  Building wheel for classifier (setup.py): finished with status 'done'
  Created wheel for classifier: filename=classifier-1.0.0-py2.py3-none-any.whl size=9670 sha256=238042f454d144dadbf700d338582f45f0074e9ba049cad42834e13f762f1bee
  Stored in directory: /tmp/pip-ephem-wheel-cache-wtxhriws/wheels/35/24/16/37574d11bf9bde50616c67372a334f94fa8356bc7164af8ca3
Successfully built classifier
Installing collected packages: classifier
Successfully installed classifier-1.0.0
WARNING: You are using pip version 19.3; however, version 19.3.1 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
2019-12-17 07:17:28,975 sagemaker-containers INFO     Invoking user script

Training Env:

{
    "additional_framework_parameters": {},
    "channel_input_dirs": {
        "training": "/opt/ml/input/data/training"
    },
    "current_host": "algo-1",
    "framework_module": "sagemaker_pytorch_container.training:main",
    "hosts": [
        "algo-1"
    ],
    "hyperparameters": {
        "backend": "gloo",
        "epochs": 30
    },
    "input_config_dir": "/opt/ml/input/config",
    "input_data_config": {
        "training": {
            "TrainingInputMode": "File",
            "S3DistributionType": "FullyReplicated",
            "RecordWrapperType": "None"
        }
    },
    "input_dir": "/opt/ml/input",
    "is_master": true,
    "job_name": "pytorch-training-2019-12-17-07-12-39-842",
    "log_level": 20,
    "master_hostname": "algo-1",
    "model_dir": "/opt/ml/model",
    "module_dir": "s3://sagemaker-ap-northeast-2-444682503693/pytorch-training-2019-12-17-07-12-39-842/source/sourcedir.tar.gz",
    "module_name": "classifier",
    "network_interface_name": "eth0",
    "num_cpus": 32,
    "num_gpus": 8,
    "output_data_dir": "/opt/ml/output/data",
    "output_dir": "/opt/ml/output",
    "output_intermediate_dir": "/opt/ml/output/intermediate",
    "resource_config": {
        "current_host": "algo-1",
        "hosts": [
            "algo-1"
        ],
        "network_interface_name": "eth0"
    },
    "user_entry_point": "classifier.py"
}

Environment variables:

SM_HOSTS=["algo-1"]
SM_NETWORK_INTERFACE_NAME=eth0
SM_HPS={"backend":"gloo","epochs":30}
SM_USER_ENTRY_POINT=classifier.py
SM_FRAMEWORK_PARAMS={}
SM_RESOURCE_CONFIG={"current_host":"algo-1","hosts":["algo-1"],"network_interface_name":"eth0"}
SM_INPUT_DATA_CONFIG={"training":{"RecordWrapperType":"None","S3DistributionType":"FullyReplicated","TrainingInputMode":"File"}}
SM_OUTPUT_DATA_DIR=/opt/ml/output/data
SM_CHANNELS=["training"]
SM_CURRENT_HOST=algo-1
SM_MODULE_NAME=classifier
SM_LOG_LEVEL=20
SM_FRAMEWORK_MODULE=sagemaker_pytorch_container.training:main
SM_INPUT_DIR=/opt/ml/input
SM_INPUT_CONFIG_DIR=/opt/ml/input/config
SM_OUTPUT_DIR=/opt/ml/output
SM_NUM_CPUS=32
SM_NUM_GPUS=8
SM_MODEL_DIR=/opt/ml/model
SM_MODULE_DIR=s3://sagemaker-ap-northeast-2-444682503693/pytorch-training-2019-12-17-07-12-39-842/source/sourcedir.tar.gz
SM_TRAINING_ENV={"additional_framework_parameters":{},"channel_input_dirs":{"training":"/opt/ml/input/data/training"},"current_host":"algo-1","framework_module":"sagemaker_pytorch_container.training:main","hosts":["algo-1"],"hyperparameters":{"backend":"gloo","epochs":30},"input_config_dir":"/opt/ml/input/config","input_data_config":{"training":{"RecordWrapperType":"None","S3DistributionType":"FullyReplicated","TrainingInputMode":"File"}},"input_dir":"/opt/ml/input","is_master":true,"job_name":"pytorch-training-2019-12-17-07-12-39-842","log_level":20,"master_hostname":"algo-1","model_dir":"/opt/ml/model","module_dir":"s3://sagemaker-ap-northeast-2-444682503693/pytorch-training-2019-12-17-07-12-39-842/source/sourcedir.tar.gz","module_name":"classifier","network_interface_name":"eth0","num_cpus":32,"num_gpus":8,"output_data_dir":"/opt/ml/output/data","output_dir":"/opt/ml/output","output_intermediate_dir":"/opt/ml/output/intermediate","resource_config":{"current_host":"algo-1","hosts":["algo-1"],"network_interface_name":"eth0"},"user_entry_point":"classifier.py"}
SM_USER_ARGS=["--backend","gloo","--epochs","30"]
SM_OUTPUT_INTERMEDIATE_DIR=/opt/ml/output/intermediate
SM_CHANNEL_TRAINING=/opt/ml/input/data/training
SM_HP_BACKEND=gloo
SM_HP_EPOCHS=30
PYTHONPATH=/opt/conda/bin:/opt/conda/lib/python36.zip:/opt/conda/lib/python3.6:/opt/conda/lib/python3.6/lib-dynload:/opt/conda/lib/python3.6/site-packages

Invoking script with the following command:

/opt/conda/bin/python -m classifier --backend gloo --epochs 30



2019-12-17 07:17:21 Training - Training image download completed. Training in progress.Distributed training - False
Number of gpus available - 8
Get train data loader
Get test data loader
Processes 2399/2399 (100%) of train data
Processes 597/597 (100%) of test data
NCCL version 2.4.8+cuda10.0
Train Epoch: 1 [400/2399 (17%)] Loss: 1.111847
Train Epoch: 1 [800/2399 (33%)] Loss: 1.074032
Train Epoch: 1 [1200/2399 (50%)] Loss: 1.168240
Train Epoch: 1 [1600/2399 (67%)] Loss: 0.983421
Train Epoch: 1 [2000/2399 (83%)] Loss: 1.053726
Train Epoch: 1 [1800/2399 (100%)] Loss: 1.011850
Test set: Average loss: 1.0778, Accuracy: 240/597 (40%)

Train Epoch: 2 [400/2399 (17%)] Loss: 1.025982
Train Epoch: 2 [800/2399 (33%)] Loss: 0.859558
Train Epoch: 2 [1200/2399 (50%)] Loss: 0.866786
Train Epoch: 2 [1600/2399 (67%)] Loss: 0.679422
Train Epoch: 2 [2000/2399 (83%)] Loss: 0.887831
Train Epoch: 2 [1800/2399 (100%)] Loss: 0.989252
Test set: Average loss: 0.9589, Accuracy: 309/597 (52%)

.
.
.

Train Epoch: 30 [400/2399 (17%)] Loss: 0.000451
Train Epoch: 30 [800/2399 (33%)] Loss: 0.016253
Train Epoch: 30 [1200/2399 (50%)] Loss: 0.095858
Train Epoch: 30 [1600/2399 (67%)] Loss: 0.035938
Train Epoch: 30 [2000/2399 (83%)] Loss: 0.009349
Train Epoch: 30 [1800/2399 (100%)] Loss: 0.009735
Test set: Average loss: 1.0286, Accuracy: 447/597 (75%)

Saving the model.
2019-12-17 08:13:55,151 sagemaker-containers INFO     Reporting training SUCCESS

2019-12-17 08:14:05 Uploading - Uploading generated training model
2019-12-17 08:14:05 Completed - Training job completed
Training seconds: 3527
Billable seconds: 3527

마지막 epoch의 모델 정확도가 약 75%로 기록이 되었네요~

<평가하기>

1. PyTorch Predictor 배포하기 (Endpoint 생성)

학습이 끝나면 PyTorch Estimator의 object를 사용하여 PyTorch Predictor를 빌드하고 배포합니다. 그러면 추론을 수행하는 데 사용할 수 있는 호스팅된 endpoint가 생성됩니다. 학습할 때와 마찬가지로 추론에 사용될 인스턴스의 수와 유형을 설정할 수 있습니다.

predictor = estimator.deploy(initial_instance_count=1, instance_type='ml.m4.xlarge')

2. Test dataset 으로 모델 평가하기

Endpoint가 생성이 되었으면 모델을 test dataset으로 학습이 잘 되었는지 평가해보겠습니다. 모델이 예측한 output과 진짜 정답(Ground-truth)을 비교하는 방식으로 확인합니다.

# get some test images
dataiter = iter(test_loader)
images, labels = dataiter.next()

# print images
imshow(torchvision.utils.make_grid(images))
print('GroundTruth:', '     '.join('%4s' % classes[labels[j]] for j in range(4)))

# model prediction
outputs = predictor.predict(images.numpy())

_, predicted = torch.max(torch.from_numpy(np.array(outputs)), 1)

print('Prediction: ', '     '.join('%4s' % classes[predicted[j]] for j in range(4)))

잘 맞춘것도 있고, 그렇지 않은것도 있습니다. 아무래도 학습 데이터셋의 양이 2400장 정도로 매우 적기도 하고, 모델 신경망의 layer도 깊지가 않아서 학습이 어려웠나봅니다. 이런 상황에서 모델의 정확도를 높이기 위해 전이 학습(Transfer Learning) 을 이용할 수 있습니다!

3. Transfer Learning

여기서는 전이 학습 시나리오 중에서 대용량의 데이터셋으로 사전 학습된 모델을 로드하여 final fully connected layer만 나만의 데이터셋에 맞게 재설정하는 Fine Tuning 방식을 사용하겠습니다. 사전 훈련된 모델은 torchvision의 models 패키지에서 제공하는 resnet101 모델을 사용했습니다. 위에서 사용했던 training script에서 model을 불러오는 부분과 손실함수 부분만 아래와 같이 바꿔준 뒤에 나머지 코드는 그대로 두고 똑같이 학습시키기만 하면 됩니다.

# pretrained model loaded
model = models.resnet101(pretrained=True)
num_ftrs = model.fc.in_features
model.fc = nn.Linear(num_ftrs, 3)
model = model.to(device)

# loss function
criterion = nn.CrossEntropyLoss().to(device)

Train Epoch: 1 [400/2399 (17%)] Loss: 1.562547
Train Epoch: 1 [800/2399 (33%)] Loss: 3.192161
Train Epoch: 1 [1200/2399 (50%)] Loss: 0.412022
Train Epoch: 1 [1600/2399 (67%)] Loss: 0.915290
Train Epoch: 1 [2000/2399 (83%)] Loss: 1.298079
Train Epoch: 1 [1800/2399 (100%)] Loss: 1.683719
Test set: Average loss: 0.1399, Accuracy: 460/597 (77%)

Train Epoch: 2 [400/2399 (17%)] Loss: 0.949771
Train Epoch: 2 [800/2399 (33%)] Loss: 0.222953
Train Epoch: 2 [1200/2399 (50%)] Loss: 0.070903
Train Epoch: 2 [1600/2399 (67%)] Loss: 0.313359
Train Epoch: 2 [2000/2399 (83%)] Loss: 0.872189
Train Epoch: 2 [1800/2399 (100%)] Loss: 0.908455
Test set: Average loss: 0.1076, Accuracy: 512/597 (86%)

Train Epoch: 3 [400/2399 (17%)] Loss: 0.076400
Train Epoch: 3 [800/2399 (33%)] Loss: 1.142258
Train Epoch: 3 [1200/2399 (50%)] Loss: 0.511040
Train Epoch: 3 [1600/2399 (67%)] Loss: 0.163432
Train Epoch: 3 [2000/2399 (83%)] Loss: 0.191089
Train Epoch: 3 [1800/2399 (100%)] Loss: 0.380600
Test set: Average loss: 0.1487, Accuracy: 436/597 (73%)

.
.
.

Train Epoch: 19 [400/2399 (17%)] Loss: 0.013524
Train Epoch: 19 [800/2399 (33%)] Loss: 0.015956
Train Epoch: 19 [1200/2399 (50%)] Loss: 0.000095
Train Epoch: 19 [1600/2399 (67%)] Loss: 0.000208
Train Epoch: 19 [2000/2399 (83%)] Loss: 0.003590
Train Epoch: 19 [1800/2399 (100%)] Loss: 0.000108
Test set: Average loss: 0.1088, Accuracy: 532/597 (89%)

Train Epoch: 20 [400/2399 (17%)] Loss: 0.002296
Train Epoch: 20 [800/2399 (33%)] Loss: 0.000026
Train Epoch: 20 [1200/2399 (50%)] Loss: 0.000077
Train Epoch: 20 [1600/2399 (67%)] Loss: 0.000241
Train Epoch: 20 [2000/2399 (83%)] Loss: 0.001908
Train Epoch: 20 [1800/2399 (100%)] Loss: 0.001944
Test set: Average loss: 0.1191, Accuracy: 535/597 (90%)

학습 결과를 비교해보면 20 epochs만 학습했는데도 정확도가 훨씬 올라간 것을 볼 수 있습니다. 전이 학습을 시킨 모델도 test dataset 으로 평가를 해보겠습니다.

고양이 품종을 잘 분류하고 있네요! 이 정도면 학습이 잘 된 것 같습니다~ 정확도를 더 올리기 위한 여러 가지 다른 방법들이 있지만, 이번 포스트에서는 여기서 마무리 하도록 하겠습니다.

4. Endpoint 삭제하기

추론을 끝냈다면, endpoint를 삭제하여 연관된 인스턴스를 해제합니다.

estimator.delete_endpoint()

끝내며…

지금까지 Amazon Sagemaker에서 PyTorch 프레임워크를 활용하여 간단한 딥러닝 이미지 분류 모델을 만들어 보았습니다. 다음 기회에는 이렇게 학습에서 배포까지 한번에 처리하여 생성된 Endpoint와 Django Rest Framework(DRF)를 사용하여 Severless RESTful API를 개발하는 방법에 대해 알아보도록 하겠습니다.

AWS S3 정적호스팅 SPA에 동적 메타태그 적용하기

Mon, 25 Nov 2019 10:00:00 +0000

안녕하세요. 프론트엔드 개발자 나상권입니다. 어반베이스에서는 개발자사이트와 ARScale을 비롯한 사내 웹서비스 전반을 개발하고 관리하고 있습니다.

프레임워크의 폭풍 속에 프론트엔드 개발자들은 그야말로 하루하루가 마라톤 같습니다. 하루가 멀다하고 쏟아져 나오는 기술들은 새롭고 빠른 개발 경험과 흥미를 주는 한편 새로운 문제점을 동반하기도 합니다.

오늘은, 최근 프론트엔드 트렌드인 SPA가 가져온 골칫거리와 그것을 해결했던 이야기를 공유하려고 합니다.

SPA? MPA?

SPA는 Single Page Application 의 약자로, 말 그대로 한 페이지만 있는 웹 애플리케이션(혹은 웹사이트) 입니다.

반면 MPA는 Multiple Page Application, 여러 장의 페이지로 이루어져 있는 애플리케이션을 의미합니다. 사용자의 요청에 따라 새로운 페이지를 만들어 보여주는 전통적인 방식이죠.

그런데 오늘날 사용자들은 어느 것이 SPA인지 MPA인지 구분하지 못합니다. SPA는 페이지가 하나이기 때문에 브라우저가 보여주는 주소가 항상 똑같을 것 같지만,

그렇지 않습니다!

SPA 들도 다양한 주소를 가집니다. 다만 “가상의 주소” 이기 때문에 아래에 소개할 끔찍한 문제가 발생합니다.

그래서 어떤 문제가 생겼나요?

SPA는 기본적으로 우리가 사용하는 브라우저(클라이언트) 에서 렌더링합니다. 리소스도 크게 문제가 없는 한 한번만 로딩하고 이후에는 가상의 페이지 이동이나 컴포넌트의 상태 변경에 따라 수정된 페이지를 보여주게 됩니다.

컴포넌트 단위로 개발하기 때문에 생산성이 좋습니다. 또한, 리소스가 부분적으로 로딩되고 클라이언트가 연산을 처리해 성능 면에서도 매우 큰 이점이 있습니다. 그러나 기본적으로 한 페이지, 가상의 주소이기 때문에 지정된 경로를 통해 접속하지 않거나 검색엔진봇, SNS 스크랩봇은 허탕만 치고 갑니다.

자바스크립트 코드들은 실행도 되지 않습니다.

주소를 쳤는데 페이지를 찾을 수 없습니다.

SNS 스크랩봇에서는 이미지와 정보 아무것도 없습니다.

검색엔진에서는 서비스 메인페이지만 노출됩니다.

이미 일은 저질러졌습니다. 개발된 SPA 어플리케이션을 MPA로 바꾸기에는 이미 늦었습니다. 그럼 우리는 어떤 길로 가야할까요?

SSR의 유혹

Server Side Rendering 의 약자입니다. 윗부분에서 조용히 지나갔지만, CSR(Client Side Rendering)을 보완하기 위한 방안이었습니다.

“클라이언트가 꾹꾹 눌러 찾아들어 오기 전에 우리 서버에서 미리 페이지로 렌더링 해놓으면 문제들이 해결될 거야!”

맞습니다. 아주 친절하고 매우 바람직하며 쉬운 답입니다. 그런데 여기에는 단순한 조건이 붙습니다.

SERVER

웬걸, 우리가 추구하는 방향은 서버리스, S3 정적 호스팅 이네요.

SSR은 일단 서버가 필요합니다. (Lambda를 이용하면 Nuxt서버를 직접 올려 사용할 수 있다는데, 이러면 FE의 영역과 API의 영역 경계가 모호해집니다.)

S3에 동적페이지 모두를 Prerender 해서 넣을 수는 없습니다.

결론은…

우리 서비스에서는 쓸 수 없다.

그럼 우린 어디로 가야 하나요?

0. 개발환경

여기서는 VueJS + NuxtJS 프레임워크를 이용하고, AWS Lambda API를 호출하여 통신하며, S3에 클라이언트를 업로드하여 호스팅하는 구조를 가정해봅시다.

1. 가상의 주소를 쳐서 들어갈 수 있게 해보자.

신비롭게도 정적 파일로 컴파일하기 전, 개발용 서버(개인 PC)에서는 가상의 주소처럼 보이는 주소를 직접 쳐도 아주 잘 뜹니다. 아무래도 NuxtJS 내장 서버는 가상의 주소를 받아도 실제로 보여줄 수 있게 만드는 신비로운 힘을 가졌나 봅니다.

정적 호스팅용으로 컴파일해서 일반 호스팅으로 올리면, 페이지에 접속할 때 그저 404 Not Found 라는 문구만 만나게 됩니다. 이 부분은 살짝만 리서치해 보면 해결점이 보입니다.

S3뿐만 아니라 Apache, NginX 같은 정적 호스팅(서버)에는 호스팅 조건을 설정할 수 있습니다. 주소를 치고 들어왔을 때, “조건에 맞으면 특정 페이지를 대신 열어줘”라고 설정해놓고, 이 특정 페이지에서는 “아 어떤 조건 따라 들어왔구나!” 하고 가상의 페이지로 다시 보내줍니다.

Index.html을 ‘일단은 받기 때문에’ 잠시 메인페이지가 뜨는 현상이 생길 수 있습니다. 이는 로딩화면이나 빈 화면을 넣으면 티 안 나게 넘어갑니다.

S3 에서는 정적 사이트 호스팅에서 리디렉션 규칙을 다음과 같이 설정합니다.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>${HOSTNAME}</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

VueJS의 메인 페이지 라이프사이클에 다음과 같이 등록합니다.

const { hash } = this.$route;
if (!hash || hash.length <= 2) {
  this.$router.replace('/');
  return;
}
this.$router.replace(hash.substring(2));

그럼 기가 막히게, 분명히 파일이 없는 가상의 주소일 텐데도 잘 열립니다.

이걸 어떻게 해야 하지 고민하던 그 시점에 애플리케이션 팀에서 어떤 요청이 들어왔습니다.

“파이어베이스 다이내믹 링크 좀 적용해주세요.”

구글의 파이어베이스에서 제공하는 다이내믹 링크는 멀티플랫폼(iOS, Android, Desktop)에 대응하여 원하는 대로 작동하는 링크라고 합니다.

아래는 구글 공식문서 내용입니다.

Firebase 동적 링크는 앱 설치 여부에 관계없이 여러 플랫폼에서 원하는대로 작동하는 링크입니다.

동적 링크를 사용하면 링크를 연 플랫폼에서 사용자에게 최상의 환경을 제공할 수 있습니다. iOS 또는 Android에서 동적 링크를 연 사용자를 기본 앱의 링크된 콘텐츠로 직접 이동시킬 수 있습니다. 같은 동적 링크를 데스크톱 브라우저에서 열었다면 웹사이트의 해당 콘텐츠로 안내할 수 있습니다.

또한 동적 링크는 앱 설치 여부에 따라 적절히 작동합니다. iOS 또는 Android에서 앱을 설치하지 않은 사용자가 동적 링크를 열면 앱을 설치하는 화면으로 안내되고, 앱을 설치하고 시작하면 최초 링크에 그대로 액세스할 수 있습니다.

그러니까 파이어베이스로 생성된 동적링크로 들어가면,

이런 절차를 따라 각 플랫폼에 맞는 애플리케이션을 로드하게 됩니다. 이는 내부적으로 파이어베이스 서버의 redirection(301) 기능을 이용하기 때문에 매우 빠릅니다.

단일링크를 통해 여러 플랫폼에 대응하는 주소를 만든다는 게 좋다는 건 알겠는데, 이게 글의 내용과 무슨 관련이 있을까요?

바로 다음에 소개할 기능 때문입니다.

소셜 메타데이터로 링크 미리보기 생성

동적 링크를 만들때 소셜 메타데이터를 지정하면 앱 및 사이트에서 동적 링크가 표시되는 방식을 개선할 수 있습니다. 이 메타데이터는 지원 서비스에 소셜 메타 태그 형태로 전달되며, 서비스에서는 이 태그를 사용하여 링크를 보기 좋게 표현합니다.

예를 들어, 소셜 애플리케이션은 공유된 동적 링크를 표현할 때 메타데이터를 사용하여 제목, 링크된 콘텐츠의 설명, 미리보기 이미지가 포함된 카드로 표현할 수 있습니다.

또한 iOS에서 동적 링크를 열 때 표시되는 앱 미리보기 페이지에서는 메타데이터가 제공될 경우 이 메타데이터를 사용하여 링크 콘텐츠의 미리보기를 표시합니다.

바로 이부분!

컨텐츠의 제목과 설명 그리고 대표이미지를 설정하면, SNS 공유할 때 아래 이미지처럼 잘 표시됩니다.

하지만 위에 언급한 “1. 가상의 주소를 쳐서 들어갈 수 있게 해보자” 가 꼭 선행되어야 합니다.

최근에는 구글의 파이어베이스 외에도, 브랜치(branch) 라는 서비스가 있어 각자의 요구사항에 맞추어 선택하면 SNS 공유하기까지는 어느 정도 해결할 수 있습니다.

그런데, 이렇게까지 했는데도 찝찝합니다.

SNS 공유용으로 주소를 생성해야 하고 꼭 그 주소를 사용해야만 합니다.
다른 사이트들처럼 주소창 복붙, 공유를 하면 공유가 안 됩니다.
검색엔진에서는 메인페이지 말고는 못 읽어갑니다.

어쩌면 좋죠?

다행히 파이어베이스에서 얻은 힌트가 있습니다. 서버의 리디렉션 규칙을 이용해 내부적으로 다른 페이지를 보여주는 것입니다. 아쉽게도 이 부분에서는 Lambda의 서버역할이 필요합니다.

위와 같은 순서로 진행될 것입니다.

동적데이터가 필요하지 않은 페이지 부분은 위의 1번에서 적용한 내용과 같습니다. 동적데이터가 필요한 페이지 부분이 핵심입니다.

<RoutingRules>
<RoutingRule>
  <Condition>
    <KeyPrefixEquals>{Lambda를 적용할 페이지 경로 Prefix}</KeyPrefixEquals>
  </Condition>
  <Redirect>
    <Protocol>{Lambda의 네트워크 프로토콜(http(s))}</Protocol>
    <HostName>{Lambda 호스트}</HostName>
    <ReplaceKeyPrefixWith>{Lambda 엔드포인트}{Lambda를 적용할 페이지 경로 Prefix}</ReplaceKeyPrefixWith>
  </Redirect>
</RoutingRule>
<RoutingRule>
  <Condition>
    <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
  </Condition>
  <Redirect>
    <HostName>{hostname}</HostName>
    <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
  </Redirect>
</RoutingRule>
</RoutingRules>

첫번째 라우팅 룰을 보면 경로를 통째로 치환하여 Lambda 로 보내버립니다. 이 요청을 받은 Lambda 는 페이지 경로를 받아 분석하고 사용합니다.

코드 방식입니다.

// bot check
let bBot = false;
const userAgent = headers['User-Agent'];
if (userAgent.match(/baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator/i)) {
  bBot = true;
}
 
// 봇일 경우
{
  statusCode: 200,
  headers: {
    'Content-Type': 'text/html',
  },
  body: '<html><head><meta .... /></head>....</html>', // 여기에 meta open graph 를 넣으면 된다. db연동으로 동적인 meta tag를 넣어주고 og:url 만 원래 redirect전의 것으로 입력한다.
}
 
 
// 봇이 아닐경우
{
  statusCode: 301,
  headers: {
    Location: `${host}/#!/${원래가려던경로}`
  }
}

봇이 아닐 경우

사용자가 직접 들어간 경우로 볼 수 있기 때문에 단순 리디렉션을 진행해줍니다. 다만 이 경로 앞에는 #!/를 붙여 index.html이 가상 라우팅을 받아들일 수 있도록 합니다. 그럼 사용자가 들어갈 때는 원래 작동하던 그대로 작동할 것입니다.

봇이 맞을 경우

굳이 리디렉션을 해줄 필요가 없습니다. 봇의 목적은 페이지 HTML 문서의 내부를 읽어 정보를 도출하는 작업을 하기 때문입니다.

위의 작업을 진행해주면 봇이 접근할 때, “아 여기는 단순하게 html로 이루어진 페이지이구나!” 하고 정상적으로 읽어낼 것입니다. 여기서 html은 Lambda가 DB의 정보를 가져오는 등 여러 가공을 거친 동적 페이지 입니다.

Lambda가 생성할 html은 그 형식을 자유롭게 지정하는 것이 가능하기 때문에 SNS 스크래퍼가 이용하는 Open Graph 메타태그나, 그 외 HTML5 대표 엘리먼트 등을 이용해 SEO 를 적용할 수도 있습니다.

끝내며

SSR의 유혹을 그대로 받아들여 보는 일을 고려하고 있습니다. Nuxt에는 동적페이지를 SSR 할 수 있는 방법을 제공하고는 있습니다. 다만, 주기적으로 컴파일(렌더링)하고, S3에 추가해야 하며, 이걸 언제 해야 할지 어떻게 올려야 할지 시점을 잡는 것은 고민입니다. 그렇지만 이게 된다면 오히려 1,3번 방법을 무시해도 해결이 될테니 매우 구미가 당기는 일입니다.
최근 검색엔진 봇이나 SNS-메신저 스크래퍼들이 개발중이라는 소식이 들려오고 있습니다. 어쩌면 위의 고민들이 자연스럽게 해결되는 시기가 올 수도 있을 것 같습니다.
지금 어반베이스 서비스는 여기까지 적용해보았습니다. 그리고 더 나은 방법을 고민하고 있습니다.

클라우드 환경에서 머신러닝 서비스 프로토타입 빠르게 만들어보기

Thu, 24 Oct 2019 10:00:00 +0000

안녕하세요. 머신러닝 엔지니어 김수민입니다. 어반베이스에서 Space의 머신러닝을 이용한 기술 개발을 하고 있습니다.

Space는 컴퓨터 비전 영역의 딥러닝을 활용하여 공간을 분류하고, 공간에서 사물을 검출하며 공간의 특성을 분석하는 서비스를 제공합니다. 이것은 AWS의 Sagemaker를 활용하여 학습을 위한 모델 선택부터 배포까지 관리하고 있습니다.

*Source: Sagemaker 공식

데이터만 있다면 Sagemaker에서 제공하는 고성능 알고리즘을 사용하여 쉽게 학습해 볼 수 있습니다. 머신러닝 모델의 학습부터 서비스 배포까지 모든 관리 또한 가능하며, AWS의 ML 서비스는 물론 다른 서비스와 통합하여 빠르게 머신러닝 서비스 프로토타입을 만들어 볼 수 있습니다.

Space의 경우 Sagemaker가 제공하는 기본 모델뿐만 아니라 Google의 Tensorflow Object Detection API를 활용하여 정확도를 더욱 높일 수 있는 모델을 검토했습니다. 그 과정에서 시행착오들이 있었는데요. 예를 들면, object detection은 다른 머신러닝 모델 대비 입출력의 데이터 형식이 복잡하다는 특징이 있죠.

이런 시행착오에서 배운 것들을 모아 모델 학습부터 배포까지 빠르게 프로토타입을 만들 수 있는 튜토리얼을 소개해보겠습니다. 그럼 시작 전에 어떤 모델과 데이터를 사용할 지 정리하겠습니다!

Tensorflow Object Detection API

Tensorflow Object Detection API에서 튜토리얼로 제공되는 Oxford-IIIT Pets dataset 과 faster_rnn_resnet_101_coco 모델을 사용합니다.

1) Oxford-IIIT Pets dataset

oxford-pet

개와 고양이의 품종 별로 클래스 레이블이 있고, 각 이미지 데이터에는 짝으로 개와 고양이의 얼굴 영역과 segmention용 mask 레이블링을 한 데이터가 있습니다.

데이터셋을 다운받으면 images와 annotations 파일이 있는데, images는 이미지 데이터이고 annotations에는 사물 검출 학습에 필요한 검출 상자의 위치, 상자가 가리키는 클래스 정보 등을 담고 있는 xml 파일이 있습니다.

2) Faster R-CNN Resnet-101

object detection에서 two stage 계열의 RCNN 모델 중 속도가 가장 빠른 모델입니다. two stage는 검출 영역을 생성하는 RPN stage와 검출 영역이 정확한 지 판단하는 classifier stage로 나누어져 있습니다. SSD와 YOLO 같은 one stage 계열 모델과 함께 사물 검출 분야에서 많이 사용되고 있는 모델입니다.

Faster R-CNN Resnet-101는 ImageNet 데이터베이스의 이미지를 사전 학습한 Resnet-101를 backbone 네트워크로 사용하는 Faster R-CNN 모델입니다.

다른 모델로 학습하고 싶다면 Object Detection API에서 제공하는 모델 (detection_model_zoo)에서 확인할 수 있습니다.

그럼 시작해볼까요?

Google Colaboratory

그 전에 잠깐, 다른 클라우드 서비스인 colaboratory를 소개하겠습니다.

“Colaboratory는 설치가 필요 없으며 완전히 클라우드에서 실행되는 무료 Jupyter 노트 환경입니다. Colaboratory를 사용하면 브라우저를 통해 무료로 코드를 작성 및 실행하고, 분석을 저장 및 공유하며, 강력한 컴퓨팅 리소스를 이용할 수 있습니다.”

*Source: Colaboratory 공식

왜 Sagemaker가 아닌 다른 서비스를 갑자기 언급했는지 의아하시겠지만, 우리에게 익숙한 jupyter 노트북 환경에 무료로 Tesla K80 GPU를 12시간이나 사용할 수 있다니 안 써 볼 수가 없죠! 12시간보다 긴 학습 시간을 요구하는 모델일 경우에는 충분하지 않겠지만 간단한 학습을 할 때 유용하게 활용할 수 있습니다.

본격적으로 Object Detection API를 사용해봅시다!

1) colab 환경 설정하기

colab notebook을 생성하고 제일 처음으로 할 작업은 GPU 환경으로 설정하기 입니다.

상단 메뉴의 수정 > 노트 설정 을 선택하고 하드웨어 가속기 > GPU 로 변경하면 GPU 환경의 런타임으로 변경됩니다.

gpu_setting

두번째 작업은 파일을 읽고 쓰기 편하게 하기 위해 구글 클라우드의 드라이브를 마운트하는 작업입니다.

왼쪽 슬라이드바에서 파일 > 드라이브 마운트 (Files > MOUNT DRIVE) 아이콘을 클릭하면 자동으로 코드 스니펫을 생성해줍니다. 셀 실행 시 나오는 링크를 누르고 권한을 허락하면, 드라이브를 마운드하는 키를 발급해줍니다. 이 키를 셀의 출력에 뜬 입력 창에 붙여넣기하면 끝입니다.

import os
from google.colab import drive

if not os.path.exists('/content/gdrive'):
  drive.mount('/content/gdrive')

2) Tensorflow Object Detection API 환경 설정하기

Object Detection API github 레포지토리에는 API를 실행할 때 필요한 환경 설정과 학습, 배포에 관련된 튜토리얼들이 잘 정리되어 있습니다.

설치 튜토리얼을 따라 학습 환경 설정을 colab 환경에서 설정하겠습니다.

먼저 필요한 라이브러리를 설치합니다.

!apt-get install protobuf-compiler python-pil python-lxml python-tk
!pip install Cython
!pip install jupyter
!pip install matplotlib

내 드라이브(My Drive)로 경로를 이동하고 Tensorflow Object Detection API 라이브러리를 다운받습니다.

!cd /content/gdrive/'My Drive'

!git clone https://github.com/tensorflow/models.git

학습 중 모델의 성능 평가를 위해 COCO evaluation metrics api를 설치합니다. 설치 경로를 /content/gdrive/'My Drive'/models/research/로 지정합니다.

!git clone https://github.com/cocodataset/cocoapi.git

!cd cocoapi/PythonAPI; make; cp -r pycocotools /content/gdrive/'My Drive'/models/research/

Tensorflow Object Detection API는 Protobuf를 모델을 설정할 때 사용합니다. Protobufs를 사용할 수 있도록 라이브러리를 컴파일해줍니다.
컴파일할 경로인 /content/gdrive/'My Drive'/models/research/로 이동합니다.

!cd /content/gdrive/'My Drive'/models/research

!protoc object_detection/protos/*.proto --python_out=.

Object Detection API의 라이브러리를 setup.py 파일로 설치합니다. 설치할 setup.py 파일이 두 가지가 있는데, 첫번째는 /content/gdrive/'My Drive'/models/research에 있는 파일, 두번째는 /content/gdrive/'My Drive'/models/research/slim에 있는 파일입니다.

!python setup.py build
!python setup.py install

slim 폴더에 있는 setup.py를 설치합니다.

!cd /content/gdrive/'My Drive'/models/research/slim

!python setup.py build
!python setup.py install

라이브러리를 PYTHONPATH에 추가합니다. 이 작업은 /content/gdrive/'My Drive'/models/research/에서 합니다.

!cd /content/gdrive/'My Drive'/models/research

%set_env PYTHONPATH=/content/gdrive/'My Drive'/models/research:/content/gdrive/'My Drive'/models/research/slim

마지막으로 Tensorflow Object Detection API의 설치가 제대로 되었는지 확인합니다.

!python object_detection/builders/model_builder_test.py

짝짝짝! 마지막 줄에 OK가 출력되었다면 성공적으로 설치를 마쳤습니다!

3) Oxford-IIIT Pets dataset 다운 후 tfrecord 형식으로 빌드하기

데이터셋을 다운받고 각각 images 폴더와 annotations 폴더에 압축을 풉니다.

!wget http://www.robots.ox.ac.uk/~vgg/data/pets/data/images.tar.gz
!wget http://www.robots.ox.ac.uk/~vgg/data/pets/data/annotations.tar.gz
!tar -xvf images.tar.gz
!tar -xvf annotations.tar.gz

tfrecord 형식으로 빌드할 때 데이터셋의 레이블을 명시한 label map 파일이 필요합니다. 튜토리얼용 pet_label_map.pbtxt는 이미 object_detection/data/에 준비되어 있지만, 커스텀 데이터셋으로 학습을 하는 경우에는 Object Detection API의 pbtxt 파일 형식에 맞추어 준비합니다. 그리고 나머지 데이터의 위치(--data_dir)와 빌드된 tfrecord 파일이 저장될 위치(--output_dir)를 지정해주고 명령을 실행합니다.

!python object_detection/dataset_tools/create_pet_tf_record.py \
  --label_map_path=object_detection/data/pet_label_map.pbtxt \
  --data_dir=/content/gdrive/'My Drive'/models/research \
  --output_dir=/content/gdrive/'My Drive'/models/research

다음 명령어로 생성된 tfrecord 파일을 확인할 수 있습니다.

ls *.record*

4) Pre-trained된 모델 다운받기

coco 데이터셋으로 미리 학습된 모델을 사용하여 전이학습(trasfer learning)을 합니다. 새로운 모델로 학습할 때보다 이미지에 대한 분포를 더 많이 학습했기 때문에 효율적으로 학습할 수 있는 장점이 있습니다. Object Detection API의 detection model zoo 페이지 COCO-trained-models 항목에서 모델을 다운받거나 링크를 복사해서 드라이브에 바로 다운받을 수 있습니다.

필요한 모델인 faster_rcnn_resnet101_coco을 다운받습니다.

!wget http://download.tensorflow.org/models/object_detection/faster_rcnn_resnet101_coco_2018_01_28.tar.gz
!tar -xvf faster_rcnn_resnet101_coco_2018_01_28.tar.gz
!cp faster_rcnn_resnet101_coco_2018_01_28/model.ckpt.* .

5) config 파일 수정하기

Tensorflow Object Detection API는 모델의 구조나 학습을 위한 파라미터, 파이프라인을 모두 .config 파일로 관리합니다. 튜토리얼을 위한 템플릿 config 파일은 object_detection/samples/configs 폴더에 있습니다.

파라미터들은 기본값을 쓰겠지만 12시간 안에 학습하도록 num_steps를 25000으로 바꾸겠습니다. Oxford-IIIT Pets dataset에는 총 7349개의 이미지가 있고, train dataset으로 70%를 사용합니다. 한 스탭에 사용하는 데이터 양을 뜻하는 batch_size가 1이기 때문에 지정한 25000번 동안 train dataset을 약 4번 반복(4 epoch)하면서 학습합니다.

그리고 PATH_TO_BE_CONFIGURED 부분을 각 파일이 위치한 경로로 수정해야 합니다.

fine_tune_checkpoint 경로는 4)에서 다운받은 model.ckpt.* 가 저장되어 있는 경로인 /content/gdrive/My Drive/models/research/model.ckpt로 수정합니다.
각 train과 evaluation tfrecord의 경로는 /content/gdrive/My Drive/models/research 로 수정합니다. record의 이름도 동일한지 확인합니다.(pet_faces_train/pet_faces_val)
pet_label_map.pbtxt 파일의 경로도 /content/gdrive/My Drive/models/research/object_detection/data/ 로 수정합니다.

이 작업을 직접 드라이브에서 다운받고 수정 후 재업로드해도 되고, 코드로도 할 수 있습니다.

!cp object_detection/samples/configs/faster_rcnn_resnet101_pets.config .

!sed -i “s|PATH_TO_BE_CONFIGURED|/content/models/research|g” faster_rcnn_resnet101_pets.config

!sed -i “s|/content/models/research/pet_label_map.pbtxt|/content/models/research/object_detection/data/pet_label_map.pbtxt|g” faster_rcnn_resnet101_pets.config

6) 학습하기

여기까지 잘 하셨습니다! 그럼 뚜둔 드디어 학습을 해보겠습니다.

PIPELINE_CONFIG_PATH: faster_rcnn_resnet101_pets.config 파일이 있는 경로를 기입합니다.
MODEL_DIR: 학습 도중 event와 checkpoint 파일을 저장할 위치를 지정합니다.

\# From the tensorflow/models/research/ directory

PIPELINE_CONFIG_PATH='/content/gdrive/"My Drive"/models/research/faster_rcnn_resnet101_pets.config'
MODEL_DIR='/content/gdrive/"My Drive"/models/research/model_ckpt'
SAMPLE_1_OF_N_EVAL_EXAMPLES=1

!python object_detection/model_main.py \
  --pipeline_config_path={PIPELINE_CONFIG_PATH} \
  --model_dir={MODEL_DIR} \
  --sample_1_of_n_eval_examples=$SAMPLE_1_OF_N_EVAL_EXAMPLES \
  --alsologtostderr

Created TensorFlow device (/job:localhost/replica:0/task:0/device:GPU:0 with 10805 MB memory) -> physical GPU (device: 0, name: Tesla K80, pci bus id: 0000:00:04.0, compute capability: 3.7) 가 출력되었다면 GPU 환경에서 학습이 진행됩니다.

그럼 학습이 끝날 때까지 기다립니다…

…학습이 잘 끝났나요?
학습이 잘 되었다면 model_dir 인자로 지정한 경로에 checkpoint가 저장되어 있습니다.

성능 평가는 다음과 같습니다.

위 성능 결과는 COCO evaluation metrics를 사용합니다. 평가에 대한 정보는 여기를 참고해 주세요. 이 튜토리얼에서는 생략했지만 colab에서 tensorboard를 통해서 학습이 어떻게 진행됐는지 확인이 가능하니 참고 바랍니다.

그럼 이제 배포를 하고 결과값을 확인해볼까요? 배포에는 Tensorflow Serving을 사용합니다.

Tensorflow Serving

“제품 환경을 위해 디자인 되었으며, 머신러닝 모델을 위해 유연하며 고성능의 서빙 시스템을 제공합니다. 텐서플로우 서빙을 통해 같은 서버 아키텍쳐와 API를 유지하는 동안, 새로운 알고리즘과 실험을 쉽게 배포할 수 있습니다.”

*Source:Tensorflow Serving 공식

Tensorflow Serving은 Docker 기반으로 여러 플랫폼에서 유연하게 구축이 가능한 장점이 있습니다. AWS에서도 Tensorflow 모델에 대한 배포 이미지로 Tensorflow Serving을 사용할 수 있도록 지원합니다.

Tensorflow Serving 구조

Servables
- 클라이언트가 계산을 수행하는데 사용하는 기본 object(perform computation)
- model 저장
- 4개의 component의 중심
Loaders
- servable(model)의 life cycle 관리
- manager를 위한 임시 저장소(temporary storage for the manager)
Sources
- contain servables
- gateway
- loader로 올림
- 모델의 다른 버전 track
Managers
- full lifecycle 관리

*Source: https://zzsza.github.io/data/2018/07/12/tensorflow-serving-tutorial

그럼 colab 환경에서 학습이 완료된 모델을 이어서 배포까지 해보겠습니다.

Colab 환경에서 Tensorflow Serving 테스트 해보기

1) 수정된 `exporter.py` 만들기

Tensorflow Serving은 SavedModel 포맷*의 saved_model.pb와 모델을 복구하기 위한 체크포인트 정보가 담긴 variable 파일이 필요합니다. Tensorflow Object Detection API의 exporter.py로 SavedModel을 추출할 때 그 기능이 없기 때문에 코드의 수정이 필요합니다.

(* 참고 SavedModel은 변수값과 상수를 포함하고 직렬화된 시그니처와 이를 실행하는 데 필요한 상태를 담은 디렉토리입니다.)

코드를 수정한 참고 github의 코드를 exporter_savedmodel.py로 저장하고 다음과 같이 수정합니다.

> Line 72: change optimize_tensor_layout=True ==>  layout_optimizer=True
>
> Line 327-329:<p>
> preprocessed_inputs, true_image_shapes = detection_model.preprocess(inputs)<p>
> output_tensors = detection_model.predict(preprocessed_inputs, true_image_shapes)<p>
> postprocessed_tensors = detection_model.postprocess(output_tensors, true_image_shapes)

Object Detection API가 저장되어 있는 /content/gdrive/My Drive/models/research/object detection 에 파일을 업로드합니다.

2) SavedModel 포맷 만들기

import tensorflow as tf

from object_detection.utils.config_util import create_pipeline_proto_from_configs
from object_detection.utils.config_util import get_configs_from_pipeline_file
import object_detection.exporter_savedmodel

# export하는 학습 모델의 Configuration 파일 경로
config_pathname = '/content/gdrive/My Drive/models/research/faster_rcnn_resnet101_pets.config'

# export하는 학습 모델의 checkpoint 경로
trained_model_dir = '/content/gdrive/My Drive/models/research/model_ckpt' 

# Configuration 파일에서 proto를 생성
configs = get_configs_from_pipeline_file(config_pathname)
pipeline_proto = create_pipeline_proto_from_configs(configs=configs)

# model checkpoint 경로에서 .ckpt와 .meta 파일을 읽기
checkpoint = tf.train.get_checkpoint_state(trained_model_dir)
input_checkpoint = checkpoint.model_checkpoint_path

# 모델 버전
model_version_id = 1

# Output 디렉토리 경로
output_directory = '/content/gdrive/My Drive/models/research/pet_saved_model' + '/' + str(model_version_id)

# 모델 export 하기
object_detection.exporter_savedmodel.export_inference_graph(input_type='encoded_image_string_tensor', pipeline_config=pipeline_proto, trained_checkpoint_prefix=input_checkpoint, output_directory=output_directory)

exporter는 세 가지 input 방식을 지정할 수 있습니다. export_inference_graph의 input_type 인자를

input_type='image_tensor'로 하면 image tensor를 json serializion 합니다.
input_type='encoded_image_string_tensor'로 하면 base64를 json serializion 합니다.
input_type='tf_example'로 하면 tf example를 json serializtion 합니다.

이번에는 두 번째 방법으로 export 했습니다.

export된 saved_model에 대한 정보를 볼 수 있습니다.

!saved_model_cli show --dir '/content/gdrive/My Drive/models/research/pet_saved_model/1' --all

3) Tensorflow Serving 다운받고 설치하기

!echo "deb http://storage.googleapis.com/tensorflow-serving-apt stable tensorflow-model-server tensorflow-model-server-universal" | tee /etc/apt/sources.list.d/tensorflow-serving.list && \
curl https://storage.googleapis.com/tensorflow-serving-apt/tensorflow-serving.release.pub.gpg | apt-key add -

!apt update

!apt-get install tensorflow-model-server

4) Tensorflow Serving 실행하기

Tensorflow Serving을 시작하고 모델을 로드합니다. Tensorflow Serving은 gRPC와 REST API 두가지 방식으로 처리할 수 있습니다. 이번에는 REST API 방식으로 합니다.

rest_api_port: REST 요청을 받을 포트 번호를 씁니다. gRPC는 8500, REST는 8501을 주로 사용합니다.
model_name: REST 요청의 URL에 사용할 이름을 지정합니다.
model_base_path: 로드할 모델을 저장한 경로를 지정합니다.

os.environ["MODEL_DIR"] = '/content/gdrive/My Drive/models/research/pet_saved_model'

%%bash --bg 
nohup tensorflow_model_server \
  --rest_api_port=0.0.0.0:8501 \
  --model_name=fashion_model \
  --model_base_path='/content/gdrive/My Drive/models/research/pet_saved_model' >server.log 2>&1

!tail server.log

다음과 같은 결과가 나오면 잘 구동이 된 것입니다.

5) Tensorflow Serving에 추론 요청 보내기

요청을 보내기 위한 이미지를 구글에서 가져옵니다.

그런 다음 학습한 모델이 잘 추론하는지 확인해보겠습니다.

!pip install -q requests

추론할 이미지를 base64로 변환 후 Tensorflow Serving 호출 방식인 json에 serialize 합니다.

import json
import base64
import request

filepath = '/content/gdrive/My Drive/models/research/object_detection/test_images/<TEST_IMAGE>.jpeg'

with open(filepath, "rb") as image:
  image_data = image.read()
  encoded_input_string = base64.b64encode(image_data).decode('utf-8')

data = json.dumps({"signature_name": "serving_default", "instances": [{"inputs": {'b64': encoded_input_string}}]})

이제 Tensorflow Serving에 추론 요청을 보내겠습니다.

headers = {"content-type": "application/json"}
json_response = requests.post('http://0.0.0.0:8501/v1/models/pet_object_detection:predict', data=data, headers=headers)

print(json_response.text)

다음과 같이 추론 결과가 반환됩니다!

Object Detection API의 튜토리얼에 있는 시각화 코드로 검출 결과를 시각화 할 수 있습니다.

여기서는 결과 이미지만 보겠습니다. 나머지 자세한 코드는 아래에 링크된 colab notebook을 확인해주세요.

오! 높은 확률로 잘 검출한 것 같습니다! 이미지에는 안 보이지만 추론 결과를 보면 american_pitbull_terrior는 97% 의 확률이네요.

이렇게 학습, 배포, 추론을 colab 환경에서 해보았습니다!

Sagemaker에서 배포하기

이제 테스트를 끝내고 서비스할 수 있도록 Sagemaker에 endpoint를 생성하겠습니다.

1) Docker 설치

“Docker는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼입니다. Docker는 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 이 컨테이너에는 라이브러리, 시스템 도구, 코드, 런타임 등 소프트웨어를 실행하는 데 필요한 모든 것이 포함되어 있습니다. Docker를 사용하면 환경에 구애받지 않고 애플리케이션을 신속하게 배포 및 확장할 수 있으며 코드가 문제없이 실행될 것임을 확신할 수 있습니다.”

*Source: AWS 공식, Docker란 무엇입니까?

도커는 Tensorflow Serving울 구동하는 가상 환경 이미지를 생성하고, Sagemaker는 EC2 인스턴스에서 배포 이미지를 서비스하는 방식으로 endpoint를 생성합니다. 다음 링크를 참고하여 로컬 운영체제에 맞게 도커를 설치해주세요.

2) dockerfile 구성하기

Sagemaker가 Docker image를 실행하고 Tensorflow Serving을 구동할 수 있도록 필요한 파일을 구성합니다. 이 과정은 local에 임의의 폴더(여기서는 object-detection-tf-serving)를 만들어서 진행합니다.

dockerfile: docker image를 빌드할 때 패키지나 데이터를 추가하기 위한 명령어를 나열한 파일입니다.
nginx.conf: Sagemaker endpoint에 요청된 것을 docker image 상에서 구동된 Tensorflow Serving으로 보내는 역할을 합니다.
saved_model_pet_object_detection: Tensorflow Serving에 로드할 모델을 준비합니다.

Dockerfile

# 공식 tensorflow serving image 를 사용하기 위해 base image로 설치합니다.
FROM tensorflow/serving:latest-gpu

# Sagemaker에서 TF Serving으로 추론을 리버스 프록시하는 역할인 NGINX를 설치합니다.
RUN apt-get update 
RUN apt-get install -y --no-install-recommends nginx git

# 모델 폴더를 컨테이너로 복사합니다.
COPY saved_model_pet_object_detection /saved_model_pet_object_detection

# NGINX 설정 파일을 컨테이너로 복사합니다.
COPY nginx.conf /etc/nginx/nginx.conf

#  NGNIX와 TF Serving을 실행하고 모델을 바라보도록 합니다.
ENTRYPOINT service nginx start | tensorflow_model_server --rest_api_port=8501 \
 --model_name=pet_object_detection \
 --model_base_path=/saved_model_pet_object_detection

Nginx.conf

events {
    # determines how many requests can simultaneously be served
    # https://www.digitalocean.com/community/tutorials/how-to-optimize-nginx-configuration
    # for more information
    worker_connections 2048;
}

http {
  server {
    # 서버가 포트 8080를 확인하도록 합니다.
    listen 8080 deferred;
    
    client_max_body_size 5m;

    # Sagemaker에서 TF Serving으로 리다이렉트 합니다.
    location /invocations {
      proxy_pass http://localhost:8501/v1/models/pet_object_detection:predict;
    }

    # Sagemaker의 상태 확인을 합니다.
    location /ping {
      return 200 "OK";
    }
  }
}

saved_model_pet_object_detection 폴더 구성

saved_model_pet_object_detection
├── 1
|   ├── variables
|   |   ├── variables.data-00000-of-00001
|   |   ├── variables.index
|   └── saved_model.pb

3) AWS Credentials

AWS CLI를 활용해 local ECR로 Docker image를 업로드하기 위해서 지격 증명 파일의 정보를 구성합니다. 다음의 AWS CLI 구성을 참고합니다.

4) ECR 업로드

AWS ECR(Amazon EC2 Container Registry)에 Docker Image를 업로드합니다. 먼저 ECR에 레포지토리를 만들고 제공되는 업로드의 각 과정을 복사&붙여넣기 하면 쉽게 진행할 수 있습니다.

업로드 되었습니다!

5) Sagemaker에서 엔드포인트 만들기

업로드가 완료된 ECR에서 Image URI를 복사한 후 Sagamaker 서비스에서 endpoint를 생성해보도록 하겠습니다. endpoint가 생성이 되면 과금이 발생합니다. 테스트가 끝나면 꼭 삭제합니다.

a. Sagemaker의 메뉴 창, 추론(Inference) 메뉴의 모델(Models)에서 모델 생성(Create Model)을 합니다. Container definition 1에서 ECR에서 생성한 이미지 URL을 적용합니다.

b. 엔트포인트 구성 메뉴에서 엔트포인트 구성(Create endpoint configuration)을 합니다. Endpoint configuration name에 구성 이름을 정하고 Add model에서 모델 컨테이너를 연결합니다. Actions의 Edit에서 Instance type, Elastic Inference를 지정할 수 있습니다.

c. 엔트포인트를 생성합니다. Endpoint name으로 이름을 지정하고, Endpoint configuration에서 앞에서 생성한 엔드포인트 구성을 선택합니다. 엔드포인트가 InSerive 상태가 되면 배포 완료입니다! 이제 endpoint를 호출하여 추론을 할 수 있습니다.

6) endpoint 테스트 해보기

local 환경에서 boto3 라이브러리를 사용하여 테스트해보겠습니다. 검출 결과값이 많기 때문에 5개까지만 잘라서 출력하겠습니다.

import boto3
import json

# if __name__ == "__main__":
sagemaker_client = boto3.client('sagemaker-runtime')

encoded_input_string = '/BASE64_ENCODED_IMAGE/'

data = json.dumps({"signature_name": "serving_default", "instances": [{"inputs": {'b64': encoded_input_string}}]})

json_response = sagemaker_client.invoke_endpoint(
        EndpointName='tf-api-deploy-endpoint',
        ContentType='application/json',
        Body=data
        )
        
res_json = json.loads(json_response['Body'].read().decode("utf-8"))

predictions = res_json['predictions'][0]

detection_boxes = list(predictions['detection_boxes'])[:5]
detection_classes = list(predictions['detection_classes'])[:5]
detection_scores = list(predictions['detection_scores'])[:5]

results = { 'detection_boxes': detection_boxes,
            'detection_classes': detection_classes,
            'detection_scores': detection_scores}

print(results)

짠! 결과가 잘 나오네요!

{'detection_boxes': [[0.0770117491, 0.335314453, 0.606289506, 0.907420695], [0.454768121, 0.15355204, 0.831059933, 0.491320789], [0.461009324, 0.162188172, 0.83212477, 0.526690304], [0.447054714, 0.122707099, 0.838318646, 0.455764949], [0.0833700597, 0.383151501, 0.608162284, 0.911972463]], 'detection_classes': [3.0, 12.0, 6.0, 21.0, 11.0], 'detection_scores': [0.983398438, 0.919820845, 0.121932738, 0.0491105691, 0.0431650393]}

더 나아가서 Space에서는 AWS의 다른 서비스(lambda, API gateway)와 연결하여 서버리스 기반의 REST API로 서비스를 하고 있습니다. 이것에 대한 자세한 내용은 다음 기회에 다루어보도록 하겠습니다!

7) endpoint 제거하기

잊지 않고 delete 버튼으로 endpoint를 삭제합니다.

이상입니다!
이렇게 클라우드 환경에서 머신러닝 서비스를 구성하면 복잡한 과정들이 많이 간소화되고 빠르게 프로토타입을 만들어 볼 수 있습니다.

—

튜토리얼 colab 링크

Tensorflow Object Detection API 학습하기

Tensorflow Serving로 추론하기

출처

Training Tensorflow for free: Pet Object Detection API Sample Trained On Google Colab

Deploying Object Detection Model with TensorFlow Serving — Part 1

Train and serve a TensorFlow model with TensorFlow Serving

How to Create a TensorFlow Serving Container for AWS SageMaker

URBANBASE TECH BLOG

Class vs Factory Function, 더 나은 선택은?

1.기본 사용 방법

2. 캡슐화(Encapsulation)

3. 불변성(Immutable)

4. 상속과 구성 (Composition and inheritance)

5. this

6. 메모리

7. 결론

프론트엔드 에러 로그 시스템 Sentry 적용기

클라이언트 사이드 에러 로그 트래킹이 필요한 이유?

Sentry란?

현재 개발중인 프로젝트에 적용해보기

텔레그램으로 Sentry 에러 알림받기

익숙해지면 좋을 깃(git) 명령어 모음집

git init

git status

git add

git rm

git restore (2.23)

git clean

git commit

git log

git show

git reset HEAD [file]

git remote

git push

git branch

git switch (2.23)

git checkout

git fetch

git pull

git stash

git blame

git diff

git revert

git tag

git merge

git rebase

마치며

부록 및 참고

롯데하이마트 앱은 AR을 어떻게 도입하게 됐을까?

개발 과정

그럼 저희는 어떤 부분을 개발하면 되나요?

많고 많은 AR SDK 중, 왜 어반베이스 AR 이었을까?

간편한 적용

직관적이고 쉬운 기능

롯데하이마트에 적용된 AR 핵심 기능들

360도 돌려보기

제품 사이즈 보여주기

AR로 배치하기

옵션 변경하기

마치며

아직도 Amazon GuardDuty 도입을 안 하셨다면?

Amazon GuardDuty?

자, 그럼 셋팅해봅시다!

Amazon SNS (Console)

Amazon SNS (CLI)

AWS Lambda (Node.js)

Amazon CloudWatch Events (Console)

규칙 생성

이벤스 소스 설정하기

대상 설정하기

Lamda 함수 추가

규칙 세부 정보

Amazon CloudWatch Events (CLI)

규칙 생성

대상 설정하기

Amazon GuardDuty 활성화

Console

CLI

Node.js

S3 Protection (S3 보호)

샘플 결과 작성

탐지 예제

참고 문헌

[AR개발 Tip] Sceneform에서 바닥인식 벗어난 곳으로 Node 이동 시키기

Why Use Sceneform?

우리가 해결해야 할 문제는 무엇일까요?

"카메라 상에서 멀리 있는 곳까지는 Node가 이동이 되지 않아요. 자연스럽게 멀리까지 이동되게 해주세요."

1) 수정된 `exporter.py` 만들기