딥링크란?

http 혹은 https로 시작하는 인터넷 주소는 모두 특정페이지로 이동하는데 앱에서도 이와 유사한 기능을 제공하는데 이를 딥링크라고 합니다. 딥링크를 적용하기위해선 앱의 매니페스트파일상에 설정을 해주어야하고 웹에서 접근 시 앱에서 지정한 경로를 지정해줘야 합니다.

제공방식은 3가지로 구분된다.

• URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용
• 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용
• 유니버셜 링크 (Universal Link) : iOS 제공 - 도메인 주소를 이용한 딥링크 사용

'URI Scheme' 방식의 딥링크

URI 스킴 방식은 Scheme://Path라는 두개의 요소로 구성됩니다. Scheme 는 앱의 이름, Path는 접근 경로 (host) 를 지정합니다.

안드로이드 매니페스트 설정

<activity​ android:name=".MainActivity"​ android:screenOrientation="portrait"> 
    <intent-filter> 
        <action android:name="android.intent.action.MAIN" /> 
        <category android:name="android.intent.category.LAUNCHER" /> 
    </intent-filter> 
    <intent-filter> 
        <action android:name="android.intent.action.VIEW" /> 
        <category android:name="android.intent.category.DEFAULT" /> 
        <category android:name="android.intent.category.BROWSABLE" /> 
        <data​ android:host="main_web"​ android:scheme="myappandroi" /> 
    </intent-filter> 
</activity>​

Javascript 이동 링크

// 앱이 있으면 앱 실행, 없으면 마켓 이동
let pakageName = 'com.myappandroi.m'
location.href ='intent://main_web#Intent;scheme=myappandroi;package=com.myappandroi.m;end';

안드로이드 공식 홈페이지 참고하면 더 자세한 내용들이 많습니다.

참고자료 딥링크의 이해 예제1 - 전체적인 참고 예제2 - 웹 사용 포멧 참고 안드로이드 공식 홈페이지 - 딥링크

아마존은 Culture of Innovation 를 가지고 있는 기업입니다.

Amazon Flywheel

• Price
• Selection
• Convenience

1. 문화 => LeaderShip (16가지) 혁신

전직원이 리더라는 인식을 갖게하는 스프링 LP (Leadership Principles) 를 통한 의사결정

• Invent and Simplify 내 아이디에만 전착하지말고 다른 조직원의 아이디어에도 적용할 수 있어야 한다. 혁신할때는 미친사람취급을 받을 각오를하고 견뎌내라.

• Working Backwards is a process 같은 인풋의 원하는 아웃풋을 내기위한 기존 서비스는 경제성분석 후 서비스를 출시 후 고객의 피드백을 받는 방식이라면, 아마존은 이 과정을 역으로 진행합니다.

고객 Press release 후 FAQ 를 진행 후 고객의 pain point 를 해결하기위한 솔루션 제시를 하게됩니다. (=> 대상고객과 무엇을 이룰지 정함) 이후 솔루션을 제시 받은 고객의 경험에 대한 value propotion 이 해결되었는지 체크합니다. Customer FAQs / Stakeholder FAQs (왜 이서비스가 성공할거라고 믿는지, 고객이 이서비스로 움직이지 않는다면 어떤일을 할 수 있는지) Visuals => 고객이 실제 어떤 경험을 얻을지 확인

해당 체크포인트를 기준으로 working backwards is a process 를 진행하게됨

AWS 의 대표적인 NoSQL Database 서비스 알아보기

무료교육과정

유니티 Unity Hub 를 다운로드하여 Unity 프로그램을 설치한다. 주의 할 점은 프로젝트 설치 경로안에 한글이 포함될 경우 오류가 발생할 가능성이 있으니 모두 영문폴더의 경로에 설치할 것 https://unity.com/kr/download

2. unity 프로젝트 생성

필자는 3D로 프로젝트를 진행 중이어서 3D로 프로젝트를 하나 생성했습니다. (프로젝트명에 공란 없이 | 프로젝트 생성 경로에 한글이 포함되지 않도록 주의)

3. 간단한 예제 및 C# 스크립트 작성

1) 통신을 위해 간단한 Text 와 Button 을 생성해 주었습니다.

2) C# 코드에 버튼을 클릭하면 Text 가 1씩 증가되는 코드를 작성 했습니다. 3) unity 상태창 우클릭으로 Create Empty 하여 C# 코드를 드래그로 추가해 주고, 기존에 만든 UI Text 도 드래그 하여 C# 에서 만든 UnityEngine.UI의 Text 객체와 연결해 주었습니다. 4) Button 같은 경우 On Click 메서드에 C# 파일을 매칭시켜 버튼이 클릭 되었을때 호출을 원하는 메서드와 연결해 주었습니다.

4. npx create-react-app 으로 react 프로젝트를 설치해 주었습니다.

리엑트 실행 시 Module not found: Can't resolve 'web-vitals' 오류 해결 https://qodbtn.tistory.com/374

5. 리엑트에서 webgl 통신이 가능하도록 연결해주는 라이브러리를 설치 합니다.

// react-unity-webgl 설치
npm i react-unity-webgl

아래 4단계는 npm 문서 확인하며 진행 했습니다.

• Getting Started
• Understanding the Unity Context Object
• Communication from React to Unity
• Communication from Unity to React

참고 : react-unity-webgl

참고로, 유튜브에선 대략적인 흐름을 참고하고, 라이브러리 사용부턴 npm 문서를 위주로 참고하시는 게 좋습니다.

• 참고자료 뚜르TV

서버 환경

Ubuntu 18.04 bionic -> 필자의 서버 환경
Ubuntu 16.04 xenial 
Ubuntu 14.04 trusty -> kurento 에서 지원중단

1. 쿠렌토 저장소 추가

sudo apt-key adv --keyserver keyserver.ubuntu.com:80 --recv-keys 5AFA7A83

터미널에 그대로 입력

sudo tee "/etc/apt/sources.list.d/kurento.list" >/dev/null <<EOF
# Kurento Media Server - Release packages
deb [arch=amd64] http://ubuntu.openvidu.io/6.9.0 bionic kms6
EOF

한줄한줄 그대로 따라 작성 첫번째 줄은 "/etc ~" 에 파일생성 및 아래 입력하는 내용을 입력하겠다는 명령어 이고 두번째줄과 세번째 줄 입력 후 네번째 줄 (EOF) 입력할 시 입력이 완료됩니다.

2. 쿠렌토 설치하기

sudo apt-get update
sudo apt-get install kurento-media-server

패키지 업데이트 후, kurento-media-server을 설치한다. 아래는 공식홈페이지에서 안내하는 명령어

sudo apt-get update && sudo apt-get install --no-install-recommends --yes \
    kurento-media-server

3. 쿠렌토 미디어 서버 시작 & 종료

sudo service kurento-media-server start
sudo service kurento-media-server stop

4. 쿠렌토 설치 확인

$ ps -fC kurento-media-server
UID        PID  PPID  C STIME TTY          TIME CMD
kurento   7688     1  0 13:36 ?        00:00:00 /usr/bin/kurento-media-server

$ sudo netstat -tupln | grep -e kurento -e 8888
tcp6  0  0  :::8888  :::*  LISTEN  7688/kurento-media-

5. 도메인 주소 변경 시

curl \
  --include \
  --header "Connection: Upgrade" \
  --header "Upgrade: websocket" \
  --header "Host: 127.0.0.1:8888" \
  --header "Origin: 127.0.0.1" \
  http://127.0.0.1:8888/kurento

/etc/kurento/kurento.conf.json 파일에서 변경이 가능합니다.

6. 쿠렌토 예제

# 예제를 복제합니다
git clone https://github.com/chapin666/kurento-group-call-node.git

# 복제한 폴더로 이동합니다.
cd kurento-group-call-node

# sfu 방식으로 브랜치 전환
git checkout sfu

# bower 을 다운받는다.
npm install bower -g

# node-module 을 install 함 (get 명령어에 npm install 명령어 기재되어 있음)
npm run get

# ./server/index.js 경로의 주소를 내 서버 주소로 변경해준다.

const argv = minimst(process.argv.slice(2), {
    default: {
        as_uri: 'https://localhost:3000',
        ws_uri: 'ws://127.0.0.1:8888/kurento'   // your KMS uri
    }
})

# node 실행 명령어
node index.js

내 경우 aws 인스턴스 내에 설치했기 때문에 kurento 서버에서 사용하고있는 포트넘버를 보안그룹에서 포트포워딩도 함께 진행했다. 그리고 클라이언트 코드를 http 에서 실행하게 될 경우 Navigator.getUserMedia() 에서 에러가 나는데 이는 http 상에서 유저의 미디어를 호출 할 수 없기때문에 https 설정을 해줘야 한다.

• 참고자료 공식홈페이지 : 로컬 설치 쿠렌토(Kurento)미디어 서버 설치 쿠렌토 예제 https://github.com/chapin666/kurento-group-call-node

사용중인 디스크를 확인했다.

1. 디스크 확인

df -h
명령어를 입력해 확인해보니 디스크를 모두 사용하고 있는걸 확인할 수 있었다.
df -i
명령어는 inode 공간을 확인하는 명령어이다. (inode의 자세한 내용은 참고자료에 있다.)

가장 많은 공간을 사용하고 있는 폴더를 확인해 필요없는 파일들을 삭제한다.

2. 찾기

du -sh *

## 해당 경로에서 바로 용량 확인하기
du -h --max-depth=1

## 폴더별 용량 sort해서 보기 
du -hs * | sort -rh | head -5

* 찾아보니, 로그 파일이 엄청 용량을 차지하고 있었음

3. 로그파일 비우기

## kern.log 용량 0으로 바꾸기
cat /dev/null > /var/log/kern.log 

## syslog 용량 0으로 바꾸기
cat /dev/null > /var/log/syslog

## 나머지 삭제 등등
sudo rm -rf syslog.*

4. 휴지통 비우기

## 마지막으론 휴지통의 내용들도 삭제했다.
rm -rf ~/.local/share/Trash/files/*

• 참고자료 [RaspberryPi] 기본 관리(No space left on device) “No space left on device”- Running short of Inodes.

WebRTC 란?

WebRTC(Web Real-Time Communication) 은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다.

• MDN의 WebRTC 문서 인용

MDN 에서 기술한 내용을 참고해 보면 웹 애플리케이션과 사이트가 통신을 하기위해 내 위치 (IP Adress) 를 어떻게 알 수 있는거지? 라는 의문이 발생하게 됩니다.

WebRTC 가 실시간으로 웹에서 데이터교환을 할 수 있는 이유는 시그널링이라고 일컬어지는 NAT 우회 과정을 거치기 때문입니다.

관련하여 어떤 과정들이 일어나게 되는지 아래 기술드리겠습니다.

WebRTC 프로토콜

WebRTC는 TCP와 UDP 기반의 다양한 프로토콜로 이뤄진다.

우선 대략적으로 WebRTC가 위에서 말했던 프로토콜들을 아래와 같이 사용한다.

1. Signalling
2. Connecting
3. Securing
4. Communicating

조금 더 자세한 버전을 확인하고 싶다면 W3의 예시 문서를 참고 하길 권한다. https://www.w3.org/TR/webrtc/images/ladder-2party-simple.svg https://www.w3.org/TR/webrtc/#simple-peer-to-peer-example

각 단계별 프로토콜은 아래와 같다.

Signalling

XMLHttpRequest long polling WebSocket MQTT Over WebSocket SDP (Session Description Protocol)

Connecting

ICE (Interactive Connectivity Establishment)

Securing

DTLS (Datagram Transport Layer Security) SRTP (Secure Real-time Transport Protocal)

Communicating

RTP (Real-time Transport Protocol) SCTP (Stream Control Transmission Protocol) RTCP (Real-time Transport Control Protocol)

WebRTC 주요 기술 살펴보기

SDP (Session Description Protocol)

세션 기술 프로토콜(Session Description Protocol, SDP)은 스트리밍 미디어의 초기화 인수를 기술하기 위한 포맷이다. 이 규격은 IETF의 RFC 4566로 규정되어 있다. WEB RTC는 시그널링 서버의 구현은 별도의 제약이 없다. 따라서 Http Long polling, Web socket, MQTT, SIP등을 사용해서 자유롭게 구현이 가능하다.

WebSocket 이나 SIP등을 통해 공유 신호 채널(시그널링)을 도입 후, WebRTC 연결을 하는데 필요한 첫 단계로 SDP는 매체를 운반하지 않는 대신, 운반할 매체의 종류, 네트워크 전송 수단, 사용 코덱과 그 설정, 대역폭 정보등 메타데이터와 같은 전반적인 커넥션의 특성을 나열한 세션프로필을 설명한다. 아래와 같이 스트링을 직접 전송도 가능하고, XMPP(XML) 로 매핑하기도 한다.

https://ko.wikipedia.org/wiki/XMPP https://webrtc.github.io/samples/src/content/peerconnection/munge-sdp/ 에서 단계별로 실험을 해볼 수 있다.

자세한 정보는 크롬의 내장 WebRTC 분석도구를 통해서 확인 가능하다.

• chrome://webrtc-internals

ICE, STUN, TRUN

클라이언트는 STUN을 통해 자신의 공인 IP를 확인을 한 뒤 상대 Peer에게 본인의 공인 IP를 알려준다. 상태 Peer 또한 본인의 공인 IP 정보를 제공한다.

다만 이 Stun으로 모든 것을 해이 어려운 경우가 있는데, Client와 상대 Peer이 같은 네트워크에 존재 할 때는 이것만으로 해결이 어렵다고 한다. 또한 Symeetric NAT의 경우에도 Application이 달라지면 NAT 매핑테이블이 바뀔 수 있어 연결이 어렵다고도 한다.[3]

이런경우 TRUN을 이용하여 수집을 한다. ICE(Interactive Connectivity Establishment, RFC 5245)라는 프레임워크가 수행한다. ICE는 두개의 단말이 P2P 연결이 되도록 최적의 경로를 찾아주는 프레임워크다.

ICE 프로토콜 (RFC 5245)를 사용하면 직접연결이 어려울때는 Stun을 사용하고 그래도 실패하면 turn을 사용한다.

이렇게 클라이언트는 ICE에 사용할 Candidate(후보)를 수집한다. 각 후보는 미디어를 수신 할 수있는 잠재적 주소와 포트. 일반적으로 세 가지 유형의 후보자가 생성된다.[2]

• Host Candidate: Private IP with Port
• Server Reflex Candidate: Public IP with Port by STUN, TRUN
• Relay Candidate: Turn server IP with Port by TURN

더 친절한 도움은 아래 링크를 보자

• Introducing-WebRTC

Connection 동작 개요

각 Peer 간 연결 호 수립이 완료 되면 미디어 데이터를 주고 받는다. 이때 사용하는 프로토콜은 RTP와 RTCP가 있다.

RTP (Real-time Transport Protocol)

실시간 데이터 전송을 위한 표준 패킷형식으로 오디오, 비디오 등 실시간 데이터를 멀티캐스트나 유니캐스트로 전송하기 적합한 기능 제공

RTCP (Real-time Transport Control Protocol)

RTP 와 함께 쓰이며, QoS, 모니터링, 수신자 정보수집, 전송율 계산등을 제공 실시간 전송 프로토콜(Real-time Transport Protocol, RTP)은 IP 네트워크 상에서 오디오와 비디오를 전달하기 위한 통신 프로토콜이다. RTP는 전화, 그리고 WebRTC, 텔레비전 서비스, 웹 기반 푸시 투 토크 기능을 포함한 화상 통화 분야 등의 스트리밍 미디어를 수반하는 통신, 엔터테인먼트 시스템에 사용된다. RTP는 일반적으로 사용자 데이터그램 프로토콜(UDP)로 동작한다. RTP는 RTCP(RTP Control Protocol)와 결합하여 사용된다. RTP가 오디오/비디오와 같은 미디어 스트림을 전달하는 반면, RTCP는 전송 통계와 QoS를 모니터링하고 다중 스트림의 동기화를 도와준다.

• 참고자료 https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcpeerconnection

• 별도 참고자료 WebRTC SFU Load Testing

브라우저 렌더링 엔직 동작 원리 https://all-young.tistory.com/22

브러우저 렌더링 과정 이해해기 https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

1) 가상 돔 (Virtual Dom) 이 나오게 된 이유

https://dev-cini.tistory.com/10

2) 가상 돔 (Virtual Dom) 이란?

https://dev-cini.tistory.com/11

1. False인 값

• undefined
• null
• 0
• -0
• NaN
• false
• ''
• ""

위에 명시된 값들을 제외한 빈 문자열을 포함한 모든 값들은 true 이다.

2. True인 값

• '0' (0을 포함하는 문자열)
• 'false' (false를 포함하는 문자열)
• [] (빈 배열)
• {} (빈 객체)
• function () {} (빈 함수)

2.1 사용예시

if (0) {
  console.log("Hello I am inside if statement");
}

if (" ") {     // 공백이 하나 있는 문자열
  console.log("Hello I am inside second if statement");
}

// 첫번째 if구문 : false
// 두번째 if구문 : true

3. 비교연산자

JavaScript는 값을 비교하기 전에 각 값을 문자열 표현으로 변환하기 때문에 ==로 비교할 때는, 서로 다른 값이 true가 된다.

// all true
 1 == '1';
 1 == [1];
'1' == [1];

따라서 비교연산자를 사용할 경우 == 보단, 값의 유형까지 비교하는 할 수 있는 === 사용을 권장한다.

// all false
1 === '1';
1 === [1];
'1' === [1];

유용한 응용 사용법

Nullish coalescing operator ?? 란

왼쪽 표현식이 null 또는 undefined 인 경우 오른쪽 표현식 결과를 반환한다.

// leftExpr ?? rightExpr
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

Logical OR operator || 란

하나 이상이 참인 경우에만 참이며, 지정된 피연산자 중 하나의 값을 반환 왼편이 참인경우 왼편의 값을 리턴하며 왼편이 falsy인 경우 오른쪽 값을 리턴

// expr1 || expr2
const foo = null || 'default string';
console.log(foo);
// expected output: "default string"

• 참고자료 https://www.sitepoint.com/javascript-truthy-falsy/

프로그램의 구조를 명확히 파악하기에도 좋으며, 의사결정과정에서 구조적으로 구분된 자료를 통해 빠른 의사결정을 하기에도 용이하다.

IA 의 구성요소

• 정보구조 (Organization System) 의 정의
• 네이게이션 (Navigation System)
• 레이블링 (Labeling System)
• 검색 (Search System)
• 컨텐츠 디자인(Contents Design)

IA 의 구성요소 (5단계)

정보구조 (Organization System) 의 정의

시각차이, 언어의 모호성, 언어의 이질성, 내부정책 등에 따라 정보를 분류해낼 수 있다. 주제별로 분류해 낼 수도 있으며, 이용자별, 작업지향형, 기능별, 상징별, 은유형 등으로 데이터 및 정보를 분류해 낼 수 있다.

서비스의 목정에 따라 정보를 분류하되, 내부정책 및 전략에 근거하여 최종 정보분류 작업에 들어간다. 이는 사용자가 얼마나 이해하기 쉽게 접근하기 위한 가장 기초적인 작업니다.

네이게이션 (Navigation System)

서비스제공 공간에서 상호작용을 설계하는 것이며 따라서 사용자의 경험을 이용하여 사용자의 두뇌에 인식하도록 만드는 것이다.

목적 : 네비게이션은 목적 중심적이며 행동 지향적이다.

<주요 요소들>

• 여기는 어디인가?
• 갈 수 있는 곳은 어디인가?
• 갈 수 있는 방법은 무엇인가?
• 예정에 갔던 곳을 어떻게 다시 갈 수 있는가?

레이블링 (Labeling System)

레이블링은 메뉴의 각 명명법, 컨텐츠에 사용되는 모든 사용법의 단어들 또는 지시하거나 도와주거나 설명하는 언어로 사용되는 텍스트를 의미한다.

이런 레이블은 고객 언어와 같은 언어를 사용해 만들어야하며 전문용어 대신 고객이 어떤언어를 사용하는지 주의깊게 관찰하는 습관이 필요하다.

<중요 포인트!>

• 일관성 있는 레이블링을 만들어야 한다. ex) 숫자 : 1,2,3 | one,two,three ex) 버튼명 : 검색 | Search

검색 (Search System)

• Knowing-item Searching : 이미 무엇을 찾을 지 구체적으로 구상하고 나서 찾는 검색행위로 이니 유저가 무엇을 찾을 것 인지 구체적인 목적이 명확한 상태를 의미

• Casual-Browsing : 우연에 기인한 검색. 유저가 무엇을 찾을 것인지 구체적인 목적은 없지만 어떤 주제, 어떤 분야 등의 대략적 개념을 가지고 사이트의를 탐색하는 검색행위

• 존재 가능성 검색 : 내가 찾는 정보가 있는 사이트인지 없는 사이트인지 '존재 가능성'에 대한 검색이 수초 안에 이루어지며 없다고 판단될 시에 바로 다른사이트로 이동하며 검색하는 행위.

• 포괄적이며 전반적인 검색 : 어떤 키워드에 대한 전반적인 정보를 찾는 유저의 경우 하나의 사이트이상에서 정보를 포괄적으로 수직하게되는 경우를 뜻함.

컨텐츠 디자인(Contents Design)

Contents Design, Disposition System 콘텐츠 설계 및 배치, '스토리 보드 및 UI설계서'로 만들어지는 컨텐츠를 배치하는 부분을 의미하며 하나의 화면에서 보여지게 될 정보를 어떻게 배치 해야 하는가에 대한 설계도 포함한다.

• 전략적으로 좌상단, 중상단, 좌중단 순으로 주요정보를 배치한다.
• 이사이트의 목적이 무엇이며 무엇을 봐야 하는지 2~3개 컨텐츠를 집중한다.
• 사용성이 적은 컨텐츠는 과감히 삭제하며 메뉴로 브라우징 할 수 있도록 한다.
• 디자인적인 요소가, 컨텐츠 설계, 배치에 영향을 주지 않도록 한다.
• 최대 7개 이상의 메인메뉴를 배치하지 않는다.

프로젝트의 작업 진행과정

1) 프로젝트시작 및 프로덕트미팅 MVP (Minimum viable product) - 정말 기본적인 기능 먼저, 빠르게런칭 PRD (Product Requirements Document) - 제품이 가진 문제/필요한 기능들을 문서화한것 == Use Case 사용자가 원하는 것을 갖기 위해 취하는 액선을 스텝별로 정의해놓은 리스 2) 리서치(이해/분석/정의) 3) 아이디어 스케치&선택 - user flow, 와이어프레임, user experience 4) 디테일한 UX/UI 작업 5) 테스트

#2 ~ #4 에 해당하는 부분을 좀 더 심층있는 조사를 진행하기 위한 방법으론 아래와 같은 과정을 추가할 수 있다.

[리서치 자료] 리서치 자료 타입은 2가지가 존재합니다. 정량적자료(Quantitative Data), 질적자료(Qualitative Data) 정량적 자료로는 숫자로 이루어진 자료 질적자료는 설문조사등을 통한 문자로 이루어진 자료입니다.

• 프로젝트요약 설명

• 조사와 발견 (리서치) - Target 정립

• 설문조사

• 설문조사 결과

• 유저프로필

• 문제설정 (Problem statement)

• 사용자 목표, 비즈니스 목표 (Goals - Users bUsiness) 유저들이 해당서비스를 통해서 뭘 얻고싶어할지

• 타겟플랫폼 정립

• 사용자 요구사항 (User needs)

• 팔요조건 (Requirements)

• 아이디어구상 - 브레인스토밍

• 경쟁사 조사 분석 (Competitors analysis) - 경쟁사 특징, 좋은점, 나쁜점

• 유저와 시스템간 상호작용 표현 (Scenarios & Use case)

• 프로토타입 (와이어 프레임)

• IA (Information Archtexture) - 유저가 이해하기 쉬운 속성들은 navigation 형태로 제공하여 유저가 이해하기 쉽게 유도하기 위함, 혹은 프로젝트의 전체 흐름을 파악하기위한 용도

참고문서

• SUS(시스템 사용성 척도) 를 평가하는 방법
• UX 리서치 기법

같이 읽어보면 좋은 자료 UI 디자인 트렌드, 변화는?