[2018년 8월 웹 개발 동향] 자바스크립트의 비용, 오픈소스 윤리, QUIC

기술과 소프트웨어를 만드는 것은 이제 커다란 책임이 따르는 일이 되었습니다. 우리가 만드는 제품은 사람들로부터 신뢰를 받고, 사람들의 삶에 커다란 영향을 미치기도 합니다. 이런 환경에서 단지 포용적 해결책을 고려하는 것 외에 윤리, 신뢰, 보안의 중요성을 적극적으로 옹호해야 합니다. 그럴 수 있는 힘은 우리의 위치로부터 나오니까요.

에릭 마이어^{Eric Meyer}가 HTTPS 전용 웹사이트가 발생시키는 문제에 대한 글을 썼습니다. 이 글에서 그는 최근 HTTPS 관련 업데이트로 인해 네트워크 상태가 좋지 못한 개발도상국에서 더 많은 웹사이트가 에러를 발생시키는 문제를 낳고 있다고 밝혔습니다. 벤 워드뮐러^{Ben Werdmüller}는 에릭 마이어의 글과 관련하여 ‘샌프란시스코만을 위한 개발을 멈추라’는 글을 게시했습니다. 이 글에서 그는 고성능 하드웨어와 기반 시설의 수혜를 누리는 개발자들의 문제를 지적합니다. 개발자들은 최신 아이폰과 맥북을 사용하고 기가비트나 초고속 4G 네트워크를 누리며 제품을 개발하지만 정작 제품 사용자 중 대부분은 개발자들보다 훨씬 열악한 환경에 놓여 있다는 점을 간과하곤 합니다. 웹을 보다 안전하게 만드는 것은 의심의 여지 없이 좋은 생각입니다. 그러나 최신 기술과 우리의 디자인 결정 사항이 다른 사람들에게 미칠 수 있는 영향 또한 염두에 두어야 합니다.

업데이트 소식

• 타입스크립트^TypeScript 버전 3.0이 출시되었습니다. 몇 가지 편리한 기능이 추가되었고 버그가 개선되었습니다.
• 크롬 브라우저에 탑재된 지 꽤 오래된 클라이언트 힌트^{Client Hints} 는 정말 유용한 기능입니다. 크롬 버전 67부터 개인정보 보호 강화를 위해 반응형 이미지에 관한 클라이언트 힌트의 기능에 변화가 있습니다. 콜린 벤델^{Colin Bendell}이 이전과의 차이점을 설명하고 클라이언트 힌트가 성능 강화를 위해 아주 유용한 이유도 설명합니다.
• 사파리 브라우저의 지능형 추적 방지 기능^{Intelligent Tracking Prevention, ITP}이 활성화된 상태에서 웹사이트를 디버그하는 방법에 관해 의문을 갖는 개발자들이 많았습니다. 이에 대응하여 웹킷^WebKit 팀에서 문제를 추적하기 위한 더 큰 유연성과 도구를 제공해주는 ITP 디버그 모드를 배포했습니다.
• 10월부터 대부분의 웹브라우저가 시만텍 TLS 인증서에 대한 신뢰를 중단하고, 아직까지 이 인증서를 사용하는 웹사이트에 대한 차단을 시작합니다. 아직 인증서 업데이트를 하지 않았다면 서둘러야 할 것 같습니다.
• 크롬의 최신 버전인 68부터 HTTP 기반의 페이지를 방문할 때 ‘안전하지 않음’을 표시하는 알림이 추가됩니다. 이를 숙지하고 여러분의 웹사이트도 업그레이드하기를 권유합니다. 크롬 버전 68에 추가되는 다른 업데이트로는 페이지 이벤트를 관리할 수 있는 페이지 라이프사이클 API, 그리고 결제 처리 API 등이 있습니다. 또한 다른 브라우저와 마찬가지로 크롬 역시 서비스 워커에 업데이트를 요청할 때 HTTP 캐시를 무시하게 됩니다. 그리고 마침내 CSS에서 cursor 속성의 grab과 grabbing 값이 접두어^prefix 없이 사용할 수 있게 되었습니다.

일반 소식

• 오픈소스 프로그램을 개발할 때 프로젝트에서 사용할 라이선스를 결정해야 하죠. 이제 새로운 라이선스인 저스트 월드 라이선스^{Just World License}를 사용할 수 있게 되었습니다. 이 라이선스는 ‘오픈소스 소프트웨어의 일반적인 원칙에는 동의하나 본인의 소프트웨어가 삶과 환경, 그리고 미래를 파괴하는 일에 사용되는 것이 불쾌한 개발자’를 위한 것이라고 합니다.
• 요즘 딥러닝 머신^{Deep-learning machines}이 큰 화두이지만 비디오 게임에서 딥러닝을 능가하는 수준의 알고리즘을 연구하는 사람들이 있습니다.
• 드류 드볼트^{Drew Devault}의 ‘단순함, 정확함, 속도: 이 순서대로’는 웹과 소프트웨어 개발에 있어서 올바른 우선순위를 상기시켜주는 훌륭한 글입니다.
• 조나단 풀튼^{Jonathan Fulton}이 ‘내가 웹 개발자로 시작할 때 알았더라면 좋았을 기본적인 설계 개념’이라는 유용한 글을 공유했습니다. 우리 업계에 초심자들이 웹 구조의 기초와 기본을 배울 수 있는 훌륭한 자료입니다.

UI/UX

• 디자인 윤리는 유럽 8개 도시의 12명의 디자이너와 연구원들이 디자인이 우리 사회에 미치는 (때로는 부정적일 수 있는) 영향과, 디자이너들이 단지 소수만이 아닌 모두의 삶을 개선하기 위해 무엇을 할 수 있을지를 의논하는 프로젝트입니다.

도구

• 프라상트 팔리커^{Prashant Palikeh}가 크롬 개발자 도구를 사용해 디버깅하는 기술에 관한 이야기를 공유했습니다. 브라우저 개발자 도구를 이해하기 위한 완벽한 자료이기 때문에 꼭 읽어보길 추천합니다. 혹시 크롬 외의 다른 브라우저를 사용하더라도 개발자 도구는 대부분 비슷하기 때문에 크게 문제되지 않을 것입니다.
• WebP는 여러 가지 훌륭한 기능을 갖춘 이미지 형식이며 자주 사용되는 JPEG/PNG를 제외하고는 가장 많이 알려진 형식 중 하나입니다. 하지만 WebP 이미지를 만드는 건 여전히 쉽지 않습니다. 제레미 바그너^{Jeremy Wagner}가 이미지를 WebP 형식으로 변환하는 방법에 관한 가이드를 공유했습니다.
• 더글라스 크리거^{Douglas Creager}가 새로운 네트워크 오류 로깅^{Network Error Loggin} 방식을 소개했습니다. 이를 통해 사용자 에이전트에게 서버 로그에 표시되는 것과 동일한 정보를 수집하도록 지시할 수 있습니다.
• 많은 개발자가 슬랙^Slack과 같은 커뮤니케이션 도구에 중독되어 있죠. 와일드빗^Wildbit의 구성원은 일주일간 슬랙 사용을 중단하기로 했는데요, 이것이 그들이 일하는 방식에 큰 영향을 미쳤다고 합니다. 우리가 유용한 도구에 지나치게 익숙해지고 필요 이상으로 사용하는 경향에 관한 흥미로운 연구 사례인 것 같습니다. 때로는 우리의 정신을 새롭게 가다듬는 것이 중요한 것 같습니다.
• 데니스 레이만^{Dennis Reimann}이 UI 주도 개발을 위한 워크벤치^Workbench인 UI엔진^UIngine의 첫 안정화 버전을 배포했습니다.

보안

• 새로운 관찰자^Observer 도구인 리포팅 옵저버 API^{The ReportingObserver API}를 사용하면 웹사이트가 지원이 중단된 API를 사용하거나 브라우저의 개입이 발생할 경우 알림을 받을 수 있습니다. 현재까지는 크롬 브라우저 버전 69에서 사용 가능한 기능입니다. 이 기능을 사용하면 이전에는 콘솔에서만 확인할 수 있었던 오류 내역을 백엔드나 오류 처리 서비스로 쉽게 전송할 수 있습니다.

웹 퍼포먼스

• QUIC^{Quick UDP Internet Connections}(빠른 UDP 인터넷 연결)을 기억하시나요? 구글이 내부적으로 사용하기 위해 설계한 이 프로토콜은 더 큰 규모로 사용될 수 있을 만큼 성장하고 있는데요, IETF^{Internet Engineering Task Force}(인터넷 엔지니어링 태스크포스)가 올해 연말 표준화를 목표로 작업을 진행하는 동안 클라우드플래어^Cloudflare 개발자들이 QUIC를 테스트한 경험을 공유했습니다.

 

HTML과 SVG

• 사용자가 제작한 콘텐츠를 화면에 출력하는 경우 콘텐츠가 하나의 요소만 가지고 있는지 또는 다수의 요소들로 이루어진 목록을 가지고 있는지 알 수 없는 경우가 많습니다. 저의 회사 콜로크^Colloq에서는 콘텐츠 체계를 명확히 하기 위해 컨테이너 안에 요소가 하나인 있는 경우 p 태그를 사용하고, 여러 개인 경우 ol 또는 ul 태그를 사용해 리스트 형태로 출력해주는 시스템을 개발했습니다.

접근성

• 데이브 루퍼트^{Dave Rupert}가 A11Y 영양소 카드^{A11Y Nutrition Cards}를 공개했습니다. 이는 컴포넌트 작성 시 접근성에 대한 기대치를 이해하고 단순화하기 위한 프로젝트입니다.
• 링크 건너뛰기는 일반적인 접근성 관련 기능이죠. 햄퍼스 세스포스^{Hampus Sethfors}가 왜 아직도 많은 링크들이 제대로 작동하지 않고 있으며 어떻게 바로잡을 수 있는지에 관한 글을 썼습니다.

자바스크립트

• 핀터레스트가 프로그레시브 웹 앱(PWA)을 선보인 지 1년이 지난 지금, 핀터레스트 개발팀의 잭 알가일^{Zack Argyle}이 그동안의 과정을 되짚어 봤습니다. 먼저 핀터레스트가 PWA를 제작하기로 한 이유를 이해하는 것이 중요한데요, ‘핀터레스트의 모바일 웹 경험이 저대역폭 네트워크 환경과 제한된 데이터 플랜을 사용하는 사람들에게 좋지 않았기 때문’이라고 이유를 밝혔습니다. 하지만 그들이 PWA 개발을 통해 얻은 결과는 사실 놀랍네요.
• 필립 월튼^{Philip Walton}이 새로운 페이지 라이프사이클 API를 선보였습니다. 이 API는 페이지가 백그라운드에 있어서 보이지 않는 상태, 활성화된 상태, 작동이 멈추거나 종료된 상태를 더 쉽게 파악할 수 있도록 도와줍니다.
• 자바스크립트의 eval() 함수를 사용하는 것이 좋지 않다는 것은 다들 알고 계시죠? 그래서 우리는 콘텐츠 보안 정책^{Content Security Policies}에서 이를 금지하곤 하는데요. 하지만 레피 샤프^{Remy Sharp}가 이와 동일하게 보안에 악영향을 미치는 또 다른 한 줄의 코드가 있다는 사실을 상기시켜주었습니다.
• 애디 오스마니^{Addy Osmani}가 2018년에 자바스크립트가 발생시킨 비용에 대해 조사했습니다. 자바스크립트 사용이 모바일폰에서 상호작용 성능을 현저히 저하시키기 때문에 모바일폰에 전송할 수 있는 자원 중 가장 많은 비용이 드는 것이 여전히 자바스크립트라는 증거를 공유했습니다. 특히 기술 산업과 관련이 없는 곳에서 사용되는 저성능 모바일폰의 경우 이 문제는 더 심각합니다.
• 히데 드 브리스^{Hidde de Vries}가 자바스크립트 단일 페이지 애플리케이션^{Single Page Application}에서 페이지 타이틀의 접근성을 높일 수 있는 방법을 설명했습니다.

 

 

CSS

• 맥스 버크^{Max Böck}가 몇 가지 CSS 그리드 기술을 사용해서 비교적 간단한 코드로 앞으로의 레이아웃을 설계하는 방법을 탐구해봤습니다.
• 사라 수이단^{Sara Soueidan}이 최신 HTML과 CSS를 사용해 포용적인 토글 스위치를 개발하는 방법을 설명했습니다.
• 젠 시몬스^{Jen Simmons}가 CSS 그리드를 사용할 때 범하는 흔한 실수와 그 해결 방법을 공유했습니다.
• 이단 마콧^{Ethan Marcotte}이 주로 CSS 그리드에서 사용되는 비교적 새로운 단위인 fr에 대하여 설명했습니다.

일과 삶

• 패리스 막스^{Paris Marx}가 디지털 노마드^{digital nomads}가 왜 우리의 미래가 아니라고 생각하는지에 대해 썼습니다. 막스는 그러한 위치 독립이 가능한 이유가 공공 기금을 통해 구축된 통신 설비 덕분이며, 그것을 남용하는 것은 공정하지 못하다고 주장했습니다.
• 이번 주에 저는 틀을 벗어나 생각하는 사고의 유용성, 그리고 원격 근무와 취미를 갖는 것이 기술적 문제를 해결하는 데 얼마나 도움이 될 수 있는지를 배웠습니다.
• 주 4일 근무를 시도하는 것이 이 사례가 처음은 아니지만, 어떻게 성공적으로 확립함으로써 직원과 업무 수행 모두에 도움이 되는지 엿보는 것은 좋은 것 같습니다.

그 외 소식

• 토비아스 반 슈나이더^{Tobias van Shneider}가 어떻게 사그마이스터-월시^{Sagmeister-Walsh} 스튜디오가 작은 규모를 유지함으로써 큰 성공을 이뤄낼 수 있었는지 들려줍니다. 큰 꿈을 갖고도 작은 규모를 유지하는 것이 창의적 사고를 위해 중요한 이유에 관한 글을 썼습니다.
• 벤 워드뮐러^{Ben Werdmüller}가 샌프란시스코 같은 곳에서 새로운 사업을 시작하는 것이 과거와 비교해서 얼마나 달라졌는지에 관한 생각을 공유했습니다. 이 글은 연 수입 11만 7천 달러가 ‘저소득’으로 분류되는 샌프란시스코와 같은 환경이 어떻게 아이디어를 제한하는지 보여줍니다.
• 제레미 나겔^{Jeremy Nagel}이 오픈소스 코드가 가진 영향력에 다시 생각해보게끔 합니다. 개발자로서 우리는 코드를 자유롭게 사용할 수 있도록 공개하는 것은 무조건 좋은 것이라고 믿습니다. 하지만, 이렇게 공개된 코드는 광산업을 비롯해 환경을 오염시키는 기업들, 코드를 오용함으로써 부를 쌓거나 간접적으로 타인에게 손해를 입히는 사람들에게도 자유롭게 사용될 수 있다는 점을 간과하곤 합니다. 우리가 이런 문제에 대해 아무것도 할 수 없는 것은 아닙니다. 문제를 인식하고 더 나은 라이선스를 적용하거나 별도의 성명서 등을 추가할 수 있습니다.
• 인도의 플라스틱 폐기물 문제는 심각합니다. 몇 달 전부터 몇 명의 어부들이 플라스틱 문제를 모른 척하지 않고 그물에 폐기물들을 모아 해안가로 가져가서 도로를 만드는 데 사용해오고 있습니다. 폐기물을 효율적으로 활용할 수 있는 좋은 아이디어 입니다.