[GN#57] Uber 의 Domain-Oriented Microservice Architecture

2020-08-03 ~ 2020-08-09 사이의 주요 뉴스들
Uber는 2012년경부터 Microservice Architecture(MSA)를 도입한 굉장히 선구적인 회사입니다. 물론 MSA는 개념적으로는 그 몇 년 전부터 계속 얘기되어 왔지만 마틴 파울러가 개념을 잘 정리한 Microservices 라는 글을 2014년 3월에 공유하고 나서 더 유명해졌다고 봅니다. 2016년부터 이미 Uber는 천개가 넘는 마이크로서비스 들을 운영하고 있다고 얘기가 나와서 너무 많은 거 아닌가? 생각이 들었는데요. 2,200개나 되는 마이크로서비스를 내부에서 어떻게 관리하는지를 정리한 글이 우버 엔지니어링 블로그에 올라왔습니다. 다만 글이 올라오고 나서 이에 대한 찬반 의견이 있었는지 공식 블로그에서는 삭제되긴 했는데요. 제가 요약 번역한 글과 원본의 백업본 링크가 있으니 글 내용 자체는 읽어보실 만 합니다.

운동하는 분들이 많이 사용하는 Garmin의 서비스가 7월 말에 며칠간 접속 불가가 되었던 적이 있었는데요. 랜섬웨어에 걸려서 서비스 복구를 못 하다가 끝내는 수백만 달러를 주고 사태를 수습했다고 알려졌습니다. 이와 비슷하게 미국의 B2B 대상 여행관리회사인 CWT도 랜섬웨어에 걸려서 역시 수백만 달러를 주고 복구를 했는데, 이 상황을 해결하기 위해 CWT 측의 담당자와 해커가 나눈 대화내역이 공개되어서 화제가 되었습니다. 돈을 보내고 나니 해커가 앞으로 이런 일 당하지 않기 위한 보안 어드바이스를 줬다는 게 더더욱 아이러니 합니다.


✓ 사내에서 슬랙을 쓰신다면 뉴스채널에 GeekNews SlackBot 을 추가하여 편하게 새 글을 받아보시고, 멤버들에게도 공유해주세요.
✓ 주위분들께 긱뉴스 위클리 - https://news.hada.io/weekly 를 추천해 주세요.
✓ 스팸함에 들어가지 않게 news@hada.io 를 주소록에 추가해주세요.
Twitter , Facebook 에서도 긱뉴스를 받아 보실 수 있습니다.

매주 월요일 아침, 지난 일주일간의 GeekNews 중 엄선한 뉴스들을 이메일로 보내드립니다.


Uber 의 Domain-Oriented Microservice Architecture

* 원글이 우버 엔지니어링 블로그에서 삭제되어서 임시로 Wayback Machine 링크로 교체해둡니다.

DOMA는 2200개의 마이크로서비스를 가진 우버가 MSA의 유연성을 유지하면서, 복잡도를 줄이기 위해 취한 방법
- DDD,SOA,OO,CA 등에서 가져와서 큰 조직의 대규모 분산시스템에 맞게 설계
- 꽤 오랜기간 MSA를 운영한 우버의 오랜 경험이 집약된 글

DOMA의 기본 원칙
1. Domain 단위로 마이크로서비스를 컬렉션으로 모음
2. Layer 라고 부르는 도메인 컬렉션을 만들어서, 각 레이어안에서는 종속성을 가질수 있도록 함 → Layer Design
3. 각 컬렉션에 대한 단일 진입점으로 깔끔한 인터페이스를 제공하는 Gateway 를 만듬
4. 각 도메인은 다른 도메인에 대해 독립적이어야 함. 하지만, 다른 도메인의 로직을 포함해야할 경우가 많으니 이를 잘 지원하는 Extension 아키텍처를 제공

** Uber의 구현

- Domains
ㅤ→ 논리적으로 그루핑된 하나이상의 마이크로서비스 모음.
ㅤ→ 도메인별로 서비스가 10개 이상이 있을수도 있고, 한개만 있을수도 있음
ㅤ→ 예) 지도 검색, 요금, 매칭플랫폼(라이더와 운전자) 등이 하나의 도메인
ㅤ→ 회사의 조직구조를 따르지는 않아서 Uber의 지도 관련 조직은 3개의 도메인, 80개의 마이크로서비스, 3개의 게이트웨이로 되어 있음

- Layer Design
ㅤ→ "어떤 서비스가 다른 서비스를 부를수 있을수 있나요?"에 대한 답
ㅤ→ "separation of concerns at scale" 또는 "dependency management at scale"
ㅤ→ Uber는 5개의 Layer로 구성
ㅤㅤ1. Infrastructure : 모든 조직이 쓸수 있는 기능. 스토리지/네트워킹 등
ㅤㅤ2. Business : 비즈니스 단위에서 쓸수 있는 기능. 특정 제품 카테고리나 Rides, Eats, Freight 등의 LOB(Line Of Business) 에 한정되지 않음
ㅤㅤ3. Product : 특정 제품 카테고리및 LOB에 연관 된 기능이지만, 여러 앱에서 같이 사용하는 "Request a ride" 같은 것도 가능
ㅤㅤ4. Presentation : 사용자 대상 어플리케이션 관련 기능들 ( 모바일 / 웹 )
ㅤㅤ5. Edge : 우버 서비스를 외부에 안전하게 공개하는 것. 모바일 어플리케이션과도 연계

- Gateways
ㅤ→ 마이크로서비스의 API Gateway와 크게 다르지 않음. 다만, Domain 에 연결되는 단일 진입점(Single Entry-point)으로 생각
ㅤ→ 내부에서 외부와의 단일 종속성을 가지게 되므로 마이그레이션,디스커버리,시스템 복잡성이 전반적으로 감소

- Extensions
ㅤ→ 서비스의 구현을 변경하거나 안정성에 영향을 주지않고 도메인을 확장하는 메커니즘
ㅤㅤ1. Logic 확장 : Provider 또는 Plugin 패턴을 이용하여 서비스 로직을 확장
ㅤㅤ2. Data 확장 : 코어 데이터가 느는걸 방지하기 위해 임의의 데이터를 연결하는 메커니즘. Protobuf 의 Any 타입을 활용
ㅤㅤ3. Custom 확장 : 도메인에 맞게 각 팀이 알맞는 패턴으로 확장

온보딩 타임이 25~50% 줄어드는 효과
2200개의 마이크로서비스를 70개의 도메인으로 분리했음.

Uber에서 마이크로서비스의 반감기는 1.5년으로 계산되었음. 즉, 1.5년마다 마이크로서비스의 50%가 사라짐
게이트웨이가 없다면 이렇게 없어질때마다 마이그레이션 헬이 펼쳐짐.
우버에선 DOMA를 사용해서 설계된 플랫폼이 훨씬 확장이 쉽고, 유지보수가 용이한 것으로 입증.

다른 회사들을 위한 실용적 조언

- 스타트업 :
ㅤ→ "MSA를 언제 채택해야 할까요?" "우리 조직에 쓸만할까요?" 라는 질문이 중요.
ㅤ→ MSA는 많은 엔지니어가 있는 조직엔 운영상의 이점이 있지만, 복잡성을 증가시켜 기능을 더 어렵게 만들수 있음
ㅤ→ 소규모 조직에서는 운영상 이점보다 아키텍처 복잡성의 증가만 가져올수도 있고, 비용이 더 들수도 있음.
ㅤ→ 천천히 도입하는 것도 무리가 없으며, MSA로 가기로 했다면 "대규모 분산 프로그램" 으로 생각해서 마이크로 서비스간에 분리해야함.
ㅤ→ 첫 마이크로서비스 들이 비즈니스의 핵심 기능을 설명할때 중요하고 오래 지속 될 것

- 중간 사이즈 회사 :
ㅤ→ 회사가 여러팀으로 나눠지고, 플랫폼간 관심사 분기가 되기 시작하면 MSA가 더 유용해짐
ㅤ→ 이 단계에서 마이크로서비스 간에 계층구조를 고려해볼 수 있고, 더 많은 서비스들이 사용하면서 종속성 관리가 중요해 짐
ㅤ→ 아직 마이크로 서비스의 수는 많지 않으므로 클러스터링은 의미가 없을수 있지만, 도메인 지향적으로 생각하는 것은 유용

- 큰 회사 :
ㅤ→ 대규모 엔지니어링 조직엔 수백의 엔지니어, 마이크로서비스 및 종속성이 있으므로 DOMA가 완전히 유용
ㅤ→ 게이트웨이를 가진 도메인으로 쉽게 그룹화 할수 있고, 레거시를 리팩터링 또는 재작성 할때도 게이트웨이가 유용

Uber에서도 DOMA를 점차 많은 팀들이 도입하고 있음. ( Uber의 모든조직에서 60명정도가 같이 참여해서 2년간 만들었다고 )

 
미국의 여행사 CWT가 랜섬웨어에 걸려서 약 53억원을 지불한 대화내역이 공개

- Ragnar Locker 랜섬웨어에 걸려서 비트코인으로 $4.5M을 주고 해결
- 해커랑 마치 비즈니스 관계의 대화 처럼 협상이 진행되는게 눈길을 끔
1. 3만대의 기기가 감염되었으니, 암호 해제와 자신들이 다운로드한 데이터를 자신들의 서버에서 다 지우는 조건으로 $10M를 요구
2. 천만달러면 우리가 이 자료를 공개했을때 니네가 입게될 법적 소송이나 평판하락 같은거에 비하면 싼거야~
3. 랜덤으로 몇개의 파일을 "무료"로 풀어줘서 자신들이 해제할 수 있다는 걸 보여줌
4. 2일내에 연락하면 특별가로 할인해 준다면서 $10M은 비싼거 아니야? 라고 물어봄
5. (화면에 없지만 아마도 20%할인한 $8M을 제시한듯)
6. $8M은 우리 매출을 두배로 늘리지 않는한 어려워. 오늘 당장 마련해서 줄 수 있는 현금이 $3.7M 밖에 없어
7. 20%도 크게 할인해준거고 5%정도까지는 추가로 가능한데 그 가격은 힘들어.. $4M 정도면 암호해독기 먼저 받고, 나머지를 나중에 주면 우리가 가진 니네 데이터를 지우거나 하는건 어때?
8. 돈 지불후, "앞으로 이런 일 안 생기게 하려면 이렇게 하는걸 추천해" 하면서 보안 어드바이스를 던져줌

- 로컬 암호는 꺼.
- 관리자 세션은 강제 종료시켜.
- 그룹 정책에서 WDigest 값을 0으로 설정해. UseLogonCredential 값이 0 이면 메모리에 저장 안하거든
- 매달 암호는 바꿔.
- 사용자에게 준 권한을 확인해서 최소화 하고 자신들이 딱 필요한 앱에서만 접근하게 해
- 대부분의 경우 Applocker 정도면 다 지킬수 있어
- 꼭 필요한 어플리케이션만 실행하도록 승인해
- 안티바이러스만 믿지마. 장기적인 감염이나 공격에는 도움될지 몰라도, 대부분이 도움 안됨
- EDR(Endpoint Detection and Response Security)을 설치하고 IT 관리자들한테 그거 사용하라고 해
- 큰 회사들은 적어도 3명의 시스템 관리자가 24시간 일하는걸 추천하고, 4명의 관리자가 하루에 8시간씩 3교대 하는 정도면 충분할꺼야

* CWT는 회사들의 출장/회의/인센티브/전시회 등을 관리해주는 B2B 대상 전문 여행관리 회사로, 1994년에 창업해서 145개국을 커버하는 직원수 18000명의 회사입니다. 년 매출은 1.8조원쯤 됩니다.

얼마전 Garmin도 랜섬웨어에 걸려서 시스템이 몇일동안 셧다운되어서 난리였다가 몇백만불 주고 해결했는데요. 큰 회사일수록 더더욱 보안에 신경써야 할듯.

https://engadget.com/garmin-cyber-attack-ransomware-payment-180211805.…

 
Kindle 개발 초기에 Jeff Bezos에게 배운 것

킨들팀의 첫번째 멤버였던 Dan Rose의 트윗 쓰레드

1. 배우고 적응하기 : 아마존의 CD판매는, 애플이 음악을 디지털화 했을때 거의 소멸. 베조스는 iPod/iTunes에서 얻은 교훈을 킨들에 적용

2. Ignore the "Institutional No" : 2004년은 닷컴붕괴로 아마존의 핵심 소매사업이 움츠러 들었다가 겨우 벗어나기 시작한 시점(그해에 AWS도 같이 시작). 모두 다 베조스에게 딴데 신경쓰지 말고 집중하라고 했지만, 무시했음.

3. Cannibalize Yourself : Steve Kessel 이 그 당시 아마존의 책/음악/DVD 등 미디어 비즈니스를 이끌고 있었고, 책이 아마존 현금흐름의 50%를 담당. 베조스는 스티브 케셀을 킨들에 배치하고 새로운 미션을 줌. "예전에 니가 맡았던 사업을 부숴라"

4. 다른 사람이 시도하고 실패했다고, 불가능하다고 가정하지 말 것 : 2개의 스타트업이 e북리더를 이미 실패했고, Sony도 시장에 있지만 관심을 끌지 못함. 그들의 실패는 베조스의 결정에 더 용기를 줬음.

5. 문제가 없다고, 더 좋게 만들지 못하는 것은 아님 : 베조스는 "인쇄된 책은 지금까지 가장 위대한 발명품중 하나고, 아무 문제도 없습니다. 우리는 어떻게 독서 경험을 향상 시킬수 있을까요?" 우리의 대답 : "더 가볍고, 휴대 가능하고, 동기화가 쉬울 것"

6. Invent! : 실패한 E북리더들은 LED스크린을 사용했고, 우린 e-ink를 처음으로 상용화. iPod은 케이블로 동기화 하지만, 우린 Wifi와 셀룰러로. 검색용 키보드를 추가(실패했지만 시도해볼 가치는 있었음). 우린 책을 디지털화 하는 새로운 방법을 발명했음.

7. 비현실적인 기대치를 설정할 것 : 베조스는 출시 시점에 $9.99 짜리 책 10만권이 스토어에 있길 바랬음. 이게 내 일이었고 불가능해 보였음. 출판사들은 두려움과 무관심 사이에서 결정을 못 내리고 있었음. 하지만, 베조스는 "No"를 듣기 싫어했음. 내 경력상에서 가장 힘든 미팅들이었음.

8. Make Magic : WiFi동기화는 혁신적이었고 우리팀은 자랑스러웠음. 하지만 베조스는 그게 매지컬하기엔 부족하다고 생각. 이동통신망을 통해서 동기화 하기를 주장했고, 고객에게 데이터요금은 청구하고 싶지 않았음. 우리는 불가능하다고 얘기 했지만, 어쨌든 그렇게 했음 (나중에 Kindle 페이퍼화이트와 오아시스에 도입)

9. 하드웨어는 어려움 : 모든 소프트웨어/인터넷 플랫폼은 결국에 하드웨어를 만들고, 매번 같은 교훈을 얻음. 소프트웨어를 만드는 것보다 훨씬 어려움. 느린 반복 주기, Atoms vs Bits 등. 유일하게 배울수 있는 방법은 출시해보는 것. Kindle v1 을 출시하는데 3.5년이 걸렸음.

10. Be Inspired : 전문경영인이 2004년의 아마존에서 킨들이나 AWS를 만드는 것을 불가능 했을 것. 그 당시 많은 미팅에서 핵심 비즈니스가 턴어라운드 하는 시기에 왜 우리가 이것을 하는지 사람들이 계속 물었던 것을 기억함. 저는 (베조스에게서) 영감을 받았습니다

 
Tailwind CSS: 사이드 프로젝트에서 수 백만 달러 비즈니스가 되기까지

- 지금 동업자가 된 친구와 Digest라는 사이드 프로젝트를 시도함
- Bootstrap의 팬이었는데, 4에서 Less를 빼고 Saas를 채택해서 버리고 Less로 직접 만들어 쓰기로 함
- 이후 여러 프로젝트에서 재활용하면서 점점 커짐
- 친구와 KiteTail이라는 사이드 프로젝트를 다시 시도.
- 만드는 과정을 유튜브로 공개했더니 너도 나도 CSS를 공유해달라고 요청.
- 오픈 소스화 하기로 결정
- 내놓자마자 반응이 너무 좋음
- 마침 자신이 쓴 Refactoring UI라는 책이 대박나서 모아둔 돈이 있어 전업으로 전향하기로 결심
- Tailwind UI(유료 템플릿이라고 보면 됨)를 만들어서 2년만에 200만 달러 매출 올림

Tailwind UI 처음에 나올때 아무리 Tailwind CSS 가 인기였다고 해도 유료 라이브러리가 얼마나 팔릴까? 싶었는데.. 예상을 뛰어넘더군요.
뭔가 서브스크립션 아니면 돈을 못 벌것 같은 분위기인 요즘에
라이프타임 라이센스 + 무제한 사용가능 + 인기도 ( 커뮤니티 ) 가 조합되면 이런 유틸리티성 라이브러리도 성공할 수 있다는 예를 보여준 것 같습니다.

 
Rando.js - 쓰기 편한 랜덤 라이브러리

rando() : 난수 생성
randoSequence() : 난수를 겹치지 않게 차례로 생성

rando
() : 0~1 float
(5) : 0~5 정수
(5,10) : 5~10 정수
(5,"float") : 0~5사이 float
(true, false) : 참/거짓
(["a", "b"]) : 배열중 하나
({a: 1, b: 2}) : 객체중 하나
($("div")) : 해당 jQuery객체중 하나
("gee willikers!") : 문자열중 한글자

randoSequence(5) : 0~5 까지의 정수를 랜덤 순서대로 겹치지 않게 [3, 0, 4, 1, 5, 2]
- 위 rando() 예제중 float 를 제외한 모든 방식에 적용 가능

 
$10 라즈베리 파이로 $2000 짜리 자전거 되살리기

Peloton과의 분쟁으로 홈바이크 서비스를 셧다운한 Flywheel의 가정용 자전거를 Zwift에 연결한 이야기
자전거의 블루투스 데이터를 리버스 엔지니어링 하는 과정이 매우 상세해서 배울게 많은 글
최종 결과물은 Gymnasticon 으로 이름 붙여서 오픈소스로 공개

* Peloton : 피트니스계의 넷플릭스. 실내에서 자전거/런닝머신을 하는데 구독모델을 제공해서 라이브 클래스를 제공. 2019년 상장. 코로나이후 급등
* Flywheel : 원래 실내용 자전거를 만들던 회사. 홈 바이크 서비스 관련해서 Peloton 과의 소송에서 져서 홈바이크 서비스는 종료.
* Zwift : 비디오 게임과 운동을 연결하여, MMO 게임하듯이 사람들과 같이 뛰고 경쟁하며 사이클/러닝을 즐기게 만든 서비스

 
1줄의 CSS로 만드는 모던 레이아웃

한 줄만으로도 유용한 레이아웃을 만들어주는 CSS 속성들
- 가운데로! → place-items: center
- 팬케이크 해체 → flex: [grow] [shrink] [baseWidth]
- 사이드바 → grid-template-columns: minmax([min],[max])
- 팬케이크 쌓기 → grid-template-rows: auto 1fr auto
- 클래식 웹 → grid-template: auto 1fr auto / auto 1fr auto
- 12-Span 그리드 → grid-template-columns: repeat(12, 1fr)
- RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))
- 사이 간격 유지 → justify-content: space-between
- 스타일 유지 → width: clamp([min], [actual], [max])
- 비율 유지 → aspect-ratio → [width] / [height]

 
유니코드 Whitespace(공백) 문자 모음

온라인에서 쓰이는 다양한 공백문자를 각각에 대한 설명과 함께 Copy & Paste 할 수 있는 페이지
아래 "" 사이에는 공백이 들어 있음
- Zero-width Space "​"
- Hair Space " "
- Six-per-em space " "
- thin space " "
- puctuation space " "
- four-per-em space " "
- three-per-em space " "
- figure space " "
- en space " "
- em space " "
- braille blank "⠀"

 
Snippet Shot - 코드 이미지 캡쳐 도구

- GitHub Gist 또는 코드를 직접 복사해서 JPG/PNG로 만들어 주는 도구
ㅤ→ 발표용 슬라이드에 넣는 용도
- 대부분의 프로그래밍 언어 와 SQL/JSON/XML/마크다운 등 신택스 컬러링 지원 ( 156가지 )
- 배경에 Gradient 처리
- 하단에 Attribution 텍스트 추가 (사이트/제품명 등)
- 코드창 Resize 가능

 
nuTab - 크롬의 빈 탭을 마크다운 노트로 사용하기

- 새 탭 열기 하면 보이는 빈 탭을 로컬 노트 작성도구로 변경하는 확장
- 마크다운 포매팅 지원 (B/I/U/List/Link/H1/체크박스)
- 키보드 단축키 및 Inline 툴바
- 상단에 즐겨찾는 사이트들 추가 가능
- 까먹지 말아야 할 것들을 적어두는 용도로 사용 가능

 
과학자들이 Excel이 날짜로 읽지 못하도록 유전자 이름을 변경

"어떨 땐 엑셀을 바꾸는거 보다 유전학(genetics)을 재작성하는게 쉬우므로"
엑셀이 MARCH1, SEPT1 같은 심볼을 날짜로 변환하니까 MARCHF1,SEPTIN1 으로 변경
지난 1년간 27개의 인간 유전자 이름이 변경되었음
2016년 한 연구에 따르면 3597개의 논문의 유전데이터중 5분의 1이 엑셀 오류에 영향을 받았다고.
이 자동 서식은 끄는게 불가능하고, 셀의 데이터 타입을 바꾸는것 밖에 방법이 없음.

그래서, 유전자 이름 표준화 기구인 HGNC(HUGO Gene Nomenclature Committee)는 이번주 발표를 통해서 "데이터 처리및 검색에 영향을 미치는 기호"를 포함해서 유전자 명명규칙을 변경

MARCH1 - “Membrane Associated Ring-CH-Type Finger 1” → MARCHF1

 
왜 MS는 틱톡을 원할까?

MS의 틱톡 인수 협상을 다룬 버지 기사 중 흥미로운 부분만 발췌했습니다.

- MS는 틱톡이 가진 일반(특히 십 대 청소년) 소비자 데이터를 원함, 비즈니스 사용자가 아닌 일반 소비자가 어떻게 서비스를 이용하는지 알 수 있을 것으로 기대

- MS는 엑스박스 라이브 서비스에서 얻은 데이터로 키넥트, 홀로렌즈 등 여러 하드웨어 연구에 도움을 얻은 경험이 있음

- 미국 십 대는 구글과 애플이 제공하는 제품과 서비스를 더 많이 사용하는 환경에서 자랐기 때문에 MS는 이들에 대해 잘 모르고 있음, 이는 미래의 비즈니스 사용자 니즈를 모른다는 말과 같음

- 사티아 나델라의 첫 성공적인 인수는 마인크래프트였고, 링크드인과 깃헙 인수도 성공적이란 평가를 받고 있음, 틱톡이 또 다른 사례가 될 지 관심

- 틱톡을 독립적으로 운영하면서 데이터를 활용하고 다른 서비스와 시너지를 이룬다면 MS가 항상 원했던 유튜브와 페이스북과 어깨를 나란히 할 수 있는 위치에 올라갈 것으로 기대

네이버 테크플러스 블로그에 버지 기사 전문 번역이 실렸네요. https://blog.naver.com/tech-plus/222050770256

MS입장에서는 대통령과 담판 지을법 하네요.

소송들어간 미 국방부 JEDI 클라우드 건도 그렇고, 트럼프한테 밉보인 아마존보다 MS가 이런 딜을 잘 끌어내는듯 합니다. (아마존과 틱톡은 상관없지만, 트럼프가 JEDI 이후로 MS를 이쁘게 보는거 아닌가 하는.. )

 
Remark42 - 셀프호스팅 가능한 오픈소스 코멘트 엔진

- 이메일 로그인 및 구글/트위터/페이스북/깃허브 소셜 로그인
- 익명 접속 가능
- 다단계 코멘트
- 모더레이터 가 삭제 및 사용자 차단 가능
- 추천, 고정, 인증 시스템
- 이미지 업로드
- 코멘트에 대한 RSS 지원
- 텔레그램 알림 가능
- 별도 외부 DB 필요없이, 싱글 데이터 파일로 임베드
- 도커로 쉽게 설치 가능
- 다크모드 지원하며 UI 커스텀 가능
- 한개의 인스턴스에서 멀티 사이트 지원
- Disqus 임포트
- 백엔드는 Go, 프론트는 TypeScript + SCSS

 
NSFW Filter - 부적절한 이미지를 가려주는 크롬/FF 확장

- NSFW : Not Safe for Work
- TensorFlow.js 를 이용하여 웹페이지에서 업무상 부적절한 이미지들을 자동으로 가려주는 플러그인
- 로컬에서 모든 걸 처리
- 일단 모든 이미지를 가린뒤 nsfwjs 로 검사하고 나서 적절하면 노출하는 방식
ㅤ→ 60+G 이상의 자료로 학습한 모델로 93%의 정확도를 가진다고

 
2020년과 이후 JavaScript(ECMAScript)의 동향

JavaScript의 역사적 순간에 따라 구분될 수 있는 큰 주기들을 살펴보고, TC39의 변화 그리고 최신 ECMAScript 명세들인 2020, 2021과 아직 완료되지 않았지만 흥미로운 새로운 명세에 대한 내용을 살펴보는 글.

- 2020년, 새로운 전환점의 시작
- 웹 엔진의 다양성은 도전받고 있나?
- 모듈 지원
- Node.js 모듈 로딩
- ESM 지원이 확장되면 번들러를 사용하지 않아도 될까?
- TC39: 누구나 표준에 참여할 수 있다.
- ECMAScript 명세 문서의 이해
- ECMAScript 2020
- ECMAScript 2021
- 새로운 또는 완료되지 않은 제안들
- TypeScript
- Transpiler(Babel)는 계속 필요할까?

글에도 나온 "JavaScript의 세번째 시대" 글의 간단 요약 https://news.hada.io/topic?id=2149

 
StoryCreator - 온라인 비디오 편집기

- After Effect 와 비슷한 기능을 웹브라우저에서 구현한 서비스
- 사진/비디오/텍스트/모션그래픽/사운드를 다양한 효과로 묶어서 만들기
- 팟캐스트/유튜브/이커머스등 소셜미디어용 동영상 편집에 적합
- 다양한 템플릿 지원

https://news.ycombinator.com/item?id=24054382
HN에 다들 극찬이길래 들어가서 잠깐 써봤는데 1명 개발자가 만든거라고 하기엔 엄청 훌륭하네요.
작년에 일 그만두고 1년쯤 개발했다고

 
No Hello - 채팅에서 그냥 "안녕하세요"라고 말하지 마세요.

- 채팅에서 안부를 묻는 행위가 어떻게 생산성을 낮추는가
- 안부를 묻고 응답을 기다리는 대신, 바로 질문을 함으로써 효율적인 비동기대화가 가능함

번역: https://www.notion.so/sduck4/No-Hello-d16d6868a6d940d2a8a1d43ab2e24cf3

 
Node 모듈은 전쟁중 : CommonJS vs ESM

CJS와 ESM은 구현체가 전혀 다름. 서로 호출은 가능하지만 귀찮음.
- CJS : require() 와 module.exports
- ESM : import 와 export

둘을 상세히 비교하고, 왜 다르고 연동이 귀찮은지 내부까지 설명한 글
작성자가 노드 라이브러리 개발자에게 권하는 가이드라인

1. CJS 버전을 제공하고
2. CJS 위에 thin ESM Wrapper를 제공한뒤
3. package.json 에 exports 추가

물론 ESM이 더 최신 방법이지만, 변경사항이 많고 CJS 위에 ESM 래퍼를 제공하는게 더 쉬우니 이게 현재로선 가장 나은 방법인거 같다고.

 
New Relic, 비즈니스 모델 변경 및 에이전트 오픈소스화

- 새로운 Telemetry Data Platform : 조직의 모든 이벤트/로그를 한 곳에서. OpenTelemetry 지원
- 기존 호스트기반 요금에서 데이터 기반 요금제로 변경
ㅤ→ 매달 100GB 무료로 평생 무료 티어 신설
ㅤ→ 추가 GB당 $0.25
- Agent, Instrumentation, Infrastructure Integration 들 SDK까지 모두 오픈소스로 공개

뉴렐릭 블로그에는 글이 여기저기 나눠져서 찾아봐야 할게 많아서, 통합해서 설명한 외부 블로그 글을 위에 링크했습니다.

새 플랫폼 설명 : Everything You Need to Know About Your New Observability Platform
https://blog.newrelic.com/product-news/…

새 요금제 설명 : Troubleshoot Your Stack, Not Your Monitoring Bill
https://blog.newrelic.com/product-news/simple-pricing/

오픈소스 관련 : The Future of Instrumentation Is Open: Introducing Open Source Agents and Projects at New Relic
https://blog.newrelic.com/product-news/…

 
FAST - MS가 만든 현대적인 웹을 위한 인터페이스 시스템

엔터프라이즈 레벨의 웹사이트,어플리케이션,컴포넌트,디자인 시스템 등을 만들기 위한 도구들을 묶은 통합스위트
- fast-elements : Web Components 호환 컴포넌트를 만들수 있도록 도와주는 라이브러리
- fast-foundation : Web Components 로 만든 컴포넌트를 묶어서 룩앤필/브랜딩을 관리. 자신만의 디자인 시스템을 만드는데 사용

현재는 이 두가지를 사용해서 만든 두개의 디자인 시스템이 있음
- fast-components (FAST frame)
ㅤ→ Web Components 기반의 다양한 컴포넌트를 제공하는 실험적인 디자인 시스템
ㅤ→ Angular,Vue,React,Blazor등과 같이 사용 가능
- fast-components-msft (Fluent UI)
ㅤ→ Fluent 는 MS의 통합 디자인시스템
ㅤ→ FluentUI 라는 별도의 페이지로 분리 되었음
ㅤ→ 차후에는 Fluent 디자인 시스템 기반으로 합쳐질 것

원 사이트보다 HN에 FAST 의 아키텍쳐 리드가 FAST를 소개한 글이 훨씬 이해가 편합니다. ( 위의 내용도 이에 기반해서 적었습니다.)
https://news.ycombinator.com/item?id=24086245

Fluent Design System : https://www.microsoft.com/design/fluent/

 
Pysa - 파이썬 코드의 보안을 점검해주는 정적 분석 도구

페이스북이 공개한 오픈소스. 타입체커인 Pyre에 함께 배포.
파이썬 코드를 정적 분석해서 잘못된 데이터 접근, XSS 와 SQL 인젝션 같은 문제들을 감지.
페북내에서는 인스타그램 서버가 가장 큰 파이썬 코드여서, 거기서 모든 코드변경마다 체크한다고.
기본에 Hack 코드를 정적 분석하던 Zoncolan 과 같은 알고리즘을 사용

수백만 라인정도 되는 인스타그램 코드에 대한 분석은 평균 약 65분 정도 걸린다고 하네요
기본적으로 페이스북은 파이썬 3.6+ 이상이지만 Pyre & Pysa 는 파이썬 2도 지원한다고.

 
Lead Generation 도구 27종 비교

리드 생성 : 비즈니스에 관심을 가지는 고객이 정보를 남기도록 해서 지속적으로 고객을 관리하는 마케팅 기법.
27종의 리드 생성 도구 장단점과 가격정보

1. OptinMonster
2. Constant Contact
3. Treck.co
4. Sendinblue
5. Hunter
6. AeroLeads
7. Voila Norbert
8. OutreachPlus
9. Hoovers
10. Datanyze
11. Lead Forensics
12. Growbots
13. Prospect.io
14. HubSpot
15. Pardot
16. SharpSpring
17. Contactually
18. Keap
19. Marketo
20. Nimble
21. OnePageCRM
22. Salesforce
23. HubSpot Sales
24. LinkedIn Sales Navigator
25. Pipedrive
26. Drift
27. Intercom

HubSpot/Pardot/Marketo/Salesforce/Drift/Intercom 까지만 알고 나머지는 대부분 첨 보는 것들이네요.

1번 OptinMonster 를 탑으로 꼽은거 보면 나머지가 순위일듯 한데, 가장 유명한 인터컴은 가격때문에 맨 마지막으로 떨어진듯.

리드 생성을 전문적으로 다루는 국내 도구는 아직 본적이 없는듯 하네요. (혹시 있는데 제가 모르는 걸지도)

http://channel.io/
https://happytalk.io/

위 서비스들보다 자유도(?)는 조금 떨어지지만 유용하게 쓸 수 있습니다.

 
애플, IPv6 / HTTP2 / TLS 1.3 / Multipath TCP 사용 권장

- IPv6의 연결셋업은 IPv4에 비해 1.4배 빠름 : NAT 사용이 줄고, 라우팅이 개선되기 때문
- HTTP/2 는 HTTP/1.1에 비해 1.8배 빠름
ㅤ→ macOS11 과 iOS14 에선 HTTP/3, e-DNS, DNS-over-HTTPS & TLS 지원 예정
- TLS 1.3은 TLS 1.2에 비해서 1.3배 빠름
- Multipath TCP 사용시 스트리밍 멈춤 현상이 13% 감소하고, 멈추는 시간도 22% 감소

* IPv6 와 HTTP/2 사용은 URLSession , Network.framework 같은 최신버전의 표준 네트워킹 API를 사용하면 자동으로 적용

 
구글에 접속하는 사용자의 1/3 이 IPv6 이용

- 매년 1월 기준 : 2015년 5%, 2016년 10%, 2017년 15%, 2018년 20%, 2019년 25% 등으로 매년 5%씩 상승
- 2020년 7월말 33.7%
- 국가별로는 독일 48%, 인도 47%, 미국 42%, 프랑스 40%, 일본/브라질 34%, 영국 30%, 호주 21%, 한국은 9.7%
- 아시아는 인도/말레이지아/베트남/대만 등이 모두 40% 이상

한국 통신사가 매월 비싼 요금 받아가면서 IPv6에 투자를 안한다고 해석할 수 있을 것 같습니다.

예상외로 IPv6 도입률이 높다는게 놀랍고, 한국이 엄청 낮다는데서 한번 더 놀라게 되는군요.

 
페이스북이 접근성 개선을 위해 한 작업

새 테크스택을 만들면서 초기부터 접근성에 대한 고려
- Linting & Flow : ARIA 강제
- 폰트 크기 조절 : rems 적용으로 가능하지만, 강제하기 쉽지 않아서 CSS pixel 값에서 자동변환 되도록
- Contextual headings : React Context로 헤딩이 복잡한 페이지에서도 항상 올바른 단계로 보이도록
- Contextual 단축키 : React Context로 단축키 등록을 하나의 API로 묶음
- 런티임에도 접근성 문제를 감지하고 알리는 기능을 백그라운드에서 실행
- Base 컴포넌트를 만들때 부터 접근성을 고려하도록 ARIA Practices Guide 를 적용
- 스크린 리더 및 Sighted 키보드 사용자를 위해서, 컴포넌트간에 옮겨다니면서도 Focus가 유지되도록 구현
- 스크린 리더용 피드백 Hook 제공

 
AWS CloudFront, 추가적인 Geolocation 헤더 지원

기존에는 국가코드 정도였는데, 훨씬 상세한 헤더를 제공하여 캐쉬 / Origin Request 정책에 세밀한 조정이 가능
Lambda@Edge에서도 이용 가능하며, 비용은 없음
- Country-Name
- Country-Region
- Country-Region-Name
- City
- Postal-Code
- Time-Zone
- Latitude
- Longitude
- Metro-Code

테스트 하려면 해외 개발자분이 만든 테스트 서버인 https://headers.owen.dev/ 에 접속해보시면 지금 CF가 보고 있는 정보들을 리턴해 줍니다. 한국은 Metro는 안나오는 것 같고, 위/경도 나 우편번호는 나오는데 아마도 통신사 서버쪽인듯 하네요.

Blip - 간단한 Geolocation 서버 https://news.hada.io/topic?id=2533
GAE 나 CloudFlare 를 이용한 방법도 있었는데, 이제 CloudFront 에서도 상세정보를 제공해주네요.
AWS CF 사용하는 조직에서는 편하게 사용가능 할 듯

 
테슬라 엔지니어가 초코칩 쿠키를 재설계하다

대부분의 초코칩 쿠키에 들어간 초콜렛은 TearDrop(눈물방울) 형태로 만들어진지 80년이나 되었지만 기능상 적절하게 디자인 된것이 아님. 산업적으로 제조하기 위해서 그렇게 만들어진 것일 뿐.
테슬라에서 태양광지붕 및 차량악세서리를 디자인하는 Remy Labesque는 초콜렛이 쿠키에 들어가서도 모양을 유지하고, 향과 맛을 극대화 및 입에서 사르르 녹게 만들기 위해 사각형의 얇은 피라미드 형태의 초콜렛을 만듬. 가열되어도 모양을 유지하면서 부드러운 질감을 유지한다고

* 이 초코칩쿠키를 만드는 Dandelion Chocolate 의 창업자들은 2002년에 Plaxo라는 온라인 주소록 서비스를 만들었다가 Comcast에 2008년에 회사를 팔았죠. Comcast는 이 서비스를 어찌저찌 유지하다가 2017년에 서비스를 접긴 했습니다만, 창업자 둘은 매각비용을 가지고 2010년에 초콜릿 회사를 차립니다. IT회사 하다가 갑자기 왠 초콜릿? 하겠지만 집에서도 카카오를 키울만큼 초콜릿을 좋아했던 둘은 굉장히 까다롭게 카카오빈을 선별하고 로스팅부터 초콜릿을 만들어내는 마지막 과정(bean-to-bar)까지 수작업으로 전통적인 제조법을 지키는 브랜드로 유명합니다.

 
크롬85 부터 지원되는 content-visiblity 로 페이지 성능개선하기

content-visibility: auto 적용만으로 화면에 안보이는 개체는 렌더링 하지 않게 해서 속도 개선
개체에 auto 지정시 CSS Containment 스펙중 layout,style,paint 가 적용되고, 해당 개체가 화면을 벗어나면 size도 적용
ㅤ→ 화면을 벗어나면 해당개체의 자손들은 전혀 안 그림
ㅤ→ 다시 화면근처에 오면 size 는 빠지고 hit-test 시작

contain-intrinsic-size 로 기본으로 그려야할 크기 지정 가능. 미지정시 0

content-visibility: hidden 지정시 화면 벗어난 것 처럼 전혀 렌더링 안함.
ㅤ→ 개체를 숨기고 렌더링도 유지하지만, 변경이 일어났다면 다시 보이게 될때 렌더링이 적용됨.
ㅤ→ display:none - 개체를 숨기고 렌더링 상태를 파괴. 즉 다시 보일때 새로 그리는거랑 마찬가지
ㅤ→ visibility:hidden - 개체를 숨기고 렌더링 상태를 유지. 실제로 문서에서 제거되지 않고 개체는 자리를 차지하며 클릭도 가능. 숨겨져 있지만 렌더링은 계속 되는 상태

 
카카오, 다음 웹마스터도구 베타 공개

Daum 검색이 나의 웹사이트를 어떻게 분석하고 있는지, Daum 검색 엔진에 최적화(SEO) 되어 있는지를 확인하는 도구

- 수집정보 : Daum 검색 크롤러가 수집한 정보를 기간별 통계 차트로 제공
- 색인정보 : Daum 검색엔진이 색인한 정보를 기간별 통계 차트로 제공
- 검색정보 : Daum 웹검색 결과가 해당 사이트 문서 노출 및 클릭 정보를 기간별 통계 차트로 제공
- 문서분석 : 문서 분석을 이용하여 타이틀, 내용, 날짜가 잘못 나오고 있다면, Daum 검색에 올바른 구조로 개선할 수 있도록 가이드
- 웹사이트 수집요청 수행

보도자료는 나왔는데, 정작 해당 페이지에는 설명이 별로 없네요.

사이트 인증(소유권 확인)하는 키를 robots.txt에 넣는 방식을 취해서 조금 특이하긴 합니다.

구글이나 Bing 은
- DNS에 레코드(TXT,CNAME)를 등록
- HTML 태그를 페이지에 삽입
- 특정 HTML / XML 파일을 업로드
등의 방식들중에서 선택이 가능하거든요.

robots.txt 는 다른 로봇들도 보는 파일인지라 특정값을 넣는게 좀 부담스럽습니다.

게다가 후발주자인 Bing 은 Google Search Console 에서 기존 사이트 정보를 임포트 하는 방식을 지원해서 편한데, 이런거는 베타기간 중에 따라서 도입하면 좋겠네요.

Bing, 새 Webmaster 도구 릴리즈 https://news.hada.io/topic?id=2577

 
애플, 게임 스트리밍 서비스는 앱스토어 정책 위반이라고 말해

9월에 런칭할 MS의 xCloud 같은 게임 스트리밍 서비스는 iOS에서 서비스 불가.
"GamePass를 통해서 스트리밍으로 서비스되는 모든 게임을 애플이 리뷰할수 없기 때문"
같은 이유로 구글의 Stadia도 애플 기기에서는 불가.

이 정책에 대해서 다들 한 목소리로 비판 하는중

MS의 공식 비판 "애플은 클라우드 게이밍에서 소비자를 거부하는 유일한 플랫폼. 인터랙티브 기능이 있는 다른 앱들은 관대하면서도, 게임만 다르게 취급."
- https://windowscentral.com/apple-responds-xbox-project-xcloud-ios-road…

페이스북도 동참 "페이스북 게이밍 앱 내부에 미니게임 기능을 애플때문에 삭제해야 했음"
- https://theverge.com/2020/8/…

Epic Games CEO인 Tim Sweeeney 도 동참 "애플은 메타버스를 추방했습니다. xCloud 뿐만 아니라 Stadia,GeForce Now, Fortnite, Minecraft, Roblox 모두"
- https://wccftech.com/apples-app-store-policies-are-now-making-microsof…

MS의 얘기처럼 넷플릭스의 밴더스내치 같은 인터랙티브 영화는 되면서 이건 왜 안되냐는 의견도 일리 있는듯.
과연 다들 이렇게 한 목소리를 낸다고 애플이 꿈쩍할지는 모르겠네요. 애플 아케이드는 할거도 없던데..

 
1Keys - JS1024 우승작 개발기

JavaScript 1K로 구동되는 피아노의 전체 코드 설명
WebAudio API 활용 및 사이즈를 줄이기 위한 노력들
- 한글자 변수명 : 전역-대문자 / 로컬-소문자
- document.getElementById() 대신 eval()
- 모든 문자열은 ” 대신 ` 으로 선언 ( body onload에 넣을때 별도 처리하지 않기 위해 )
- Terser-online 으로 Minify
- JSCrush로 JS 코드 압축

JS1024 2020 우승자 발표 https://news.hada.io/topic?id=2575