개발자로서 우리는 빈번하게 성능에 대해 이야기하고, 브라우저에 더 빠른 페이지 로딩 속도를 요구합니다. 하지만 브라우저 속도가 빨라지면 우리는 또 다시 더 나은 성능을 원하곤 합니다.

구글 크롬 팀의 알렉스 러셀^{Alex Russel}이 개발자가 브라우저 성능을 남용하는 문제에 대한 고찰을 공유했습니다. 그리고 브라우저에 놀랄 만큼 빠른 렌더링 엔진을 탑재했음에도 여전히 웹사이트 속도가 느린 이유를 설명했습니다. 러셀은 우리가 엉뚱한 것에 집중하고 있다고 말합니다. 이 글은 저사양의 컴퓨터와 브라우저에서 빠르게 웹을 구동할 수 있는 해결책을 제시하는 대신, 코드 묶음의 크기를 더 늘리고 폴리필^Polyfills과 변환된 코드로 가득 채우고 있다고 지적한 올리버 윌리엄스^{Oliver Williams}의 글과 궤를 같이합니다.

평소 하던 것과 다른 방식으로 사용자 편의성을 위해 코드 묶음의 크기를 최소화하는 것이 쉬운 변화는 아닙니다. 그러나 이를 가능하게 하는 기술이 존재합니다. 평범하지 않은 방식에 대해 연구하는 것입니다. 그리고 실사용자에 집중하는 것입니다. 프로젝트 워크플로우를 설정하기 전에 말이죠.

 

업데이트 소식

• 파이어폭스 버전 60이 출시되었습니다. ECMA 스크립트 모듈과 웹 인증 API가 지원됩니다.

• 크롬 버전 66이 정식 업데이트되면서 오디오와 관련된 중요한 내용이 들어갔습니다. 새로 추가된 백그라운드 자동재생 방지 기능이 웹RTC 클라이언트에서 문제를 일으키는 것으로 드러났습니다. 따라서 크롬 팀은 해당 기능을 철수하고 올 가을 출시 예정인 크롬 버전 70에 다시 포함함으로써 개발자가 이와 관련된 사항을 준비할 수 있는 시간적 여유를 제공하기로 했습니다.

• 크롬 버전 66의 출시와 곧이어 업데이트될 파이어폭스의 최신 버전을 고려할 때, 이제 2개의 주요 브라우저가 2016년 6월 이전에 발표된 모든 시만텍 인증서를 신뢰하지 않기로 했습니다. 분명한 건 아직도 해당 인증서를 갱신하지 않고 있는 웹사이트가 많다는 것이죠. 그런 웹사이트는 이제부터 크롬을 통해 접속할 수 없으며 곧 파이어폭스에서도 차단됩니다.

• 깃허브 페이지가 커스텀 도메인에도 HTTPS 지원을 시작했습니다. 이전까지는 *.github.io 도메인이나 클라우드플레어 같은 외부 서비스를 통해서만 HTTPS가 지원됐습니다.

• 곧 출시될 크롬 버전 67에서는 향후 버전 69부터 완전히 지원 중단 예정인 몇 가지 기능을 준비 차원에서 우선 지원 계획에서 제외됩니다. 제외되는 기능 중에는 HTTP 기반 공개키 피닝^pinning과 안전하지 않은 맥락에서의 앱 캐시 사용 등이 있습니다.

• 윈도우10의 4월 업데이트에 포함된 에지 브라우저 버전 17에는 탭 음소거, 입력 폼 자동 입력, 종이를 절약할 수 있는 새로운 ‘웹사이트 프린트’ 모드, 서비스 워커와 푸시 알림 기능이 추가되었습니다. 그리고 가변 서체, 미디어 캡처 API를 통한 실시간 통신 스크린 캡처, 하위 자원 무결성(SRI), Upgrade-Insecure-Requests 헤더 요청 지원 등이 추가되었습니다.

• npm 버전 6이 주요 보안성 개선과 함께 출시되었습니다. 새로 추가된 npm audit 명령어를 통해 종속성의 취약 여부를 검사할 수 있습니다. 뿐만 아니라 종속성을 추가할 때마다 npm이 자동으로 취약성 검사를 실행하고 결과를 알려줍니다. 그리고 지속적 통합(CI) 업무 속도를 향상시킬 npm ci 커맨드와 그 외 몇 가지 요소들이 추가되었습니다.

• 노드 버전 10이 출시되었습니다. 제너레이터와 비동기 함수, N-API가 완벽하게 지원되고 검사 프로토콜^{Inspector Protocol}이 지원됩니다. 올해 10월부터 이 버전이 차기 장기 지원 브랜치^{Next long-term support branch}로 정해집니다.

• 마이크로소프트의 코드 검사 도구 소나월^Sonarwhal의 첫 안정화 버전이 출시되었습니다.

 

일반 소식

• 올리버 윌리엄스가 웹사이트 제작 방식을 재고하는 것과 ‘점진적 개선’을 실행하는 것이 더 훌륭한 웹을 만들기 위해 얼마나 중요한 일인지에 대한 생각을 공유했습니다. 생각해보면 ECMA 스크립트 코드를 생각 없이 전부 자동 변환하고 수많은 자바스크립트 폴리필^Polyfill을 사용해서 이미 느린 컴퓨터와 오래된 소프트웨어를 사용하고 있는 사용자의 웹 경험을 더 악화시키는 역할을 한 건 우리였죠.

• 이안 페더^{Ian Feather}가 버즈피드^BuzzFeed 웹사이트의 전체 자바스크립트 요청 중 1%가 타임아웃 오류를 발생시킨다는 것을 공개했습니다. 횟수로 따지면 한 달에 약 1300만 건의 요청인 셈입니다. 안정적인 대비과 점진적 개선, 해결책 중요한 이유를 다시금 상기시켜주네요.

• 5월 25일 시행된 유럽 개인정보보호법(GDPR)에 대응하기 위한 기업의 개인정보 정책 업데이트 이메일이 끊임없이 날아오고 있는 상황입니다. 그런데 아직 한 가지 불확실한 점은 어떤 서비스가 데이터 처리 조약(DPAs)을 제공할 수 있는지 여부입니다. 조스키 쿱할^{Joschi Kuphal}이 데이터 처리 조약을 제공하는 서비스의 목록을 정리했는습니다. 이를 통해 서비스 목록을 한눈에 파악할 수 있고 사본을 얻을 방법도 알 수 있습니다. 이 목록 작성에 참여하고 싶다면 깃허브 풀 리퀘스트를 통해 가능합니다.

 

UI/UX

• 재리드 M 스풀^{Jared M. Spool}이 사용자가 싫어하는 건 변화나 리디자인이 아니라 잘못된 디자인 결정 사항인 이유를 정리했습니다.

• 어도비의 프로토타이핑 툴 XD에 관한 큰 뉴스입니다. 이제부터 스타터 플랜을 통해 어도비 XD를 무료로 사용할 수 있게 되었습니다. 유료 플랜과의 차이점은 저장 공간이 제한되어 있고, 1개의 프로토타입만 공유가 가능하며(공유하지 않은 프로토타입의 개수는 제한 없음), 무료 타입킷 라이브러리만 사용할 수 있습니다. 스케치, 포토샵과의 연동이 강화되었으며, 심볼을 교체할 수 있고, 여러 개의 아트보드에 붙여 넣기를 할 수 있으며, 디자인 상세 정보를 비밀번호로 보호할 수 있게 되었습니다.

• 메이 장^{Mei Zhang}이 제품 카드 UI 하나만 사용해서 더 나은 제품 디자인을 위한 원칙을 설명했습니다.

 

 

보안

• 아마존의 라우트 53 DNS 일부를 해킹하여 해당 서비스 사용자의 트래픽을 가로채 조작하는 사건이 있었습니다. 이를 통해 다시 한 번 인터넷 핵심 부분인 DNS가 얼마나 취약한지 엿볼 수 있습니다.

• 파이어폭스의 최신 버전이 웹 인증 API를 지원합니다. 패스워드 없는 웹을 만들기 위한 큰 도약이죠. 사용 중인 웹 브라우저와 웹 서비스가 모두 웹 인증 API를 지원한다면 이를 통해 유비키^YubiKey와 같은 하드웨어 키를 사용해 로그인할 수 있습니다. 크롬 버전 67의 베타 버전 역시 이를 지원하는 것으로 알려졌습니다. 크롬 팀이 이에 대한 기술 제작 가이드를 공유했습니다.

• 파이어폭스 버전 60부터 쿠키 정보에 same-site 속성을 명시할 수 있게 됩니다. 이를 통해 웹 애플리케이션이 브라우저로 하여금 해당 쿠키가 생성된 웹사이트에서만 쿠키를 전송할 수 있게 됩니다. 더 자세한 사항은 발표 내용을 담은 블로그에서 볼 수 있습니다.

 

프라이버시

• GDPR 체크리스트는 곧 시행될 유럽 개인정보보호법에 웹사이트가 부합하는지 확인할 수 있는 유용한 도구입니다.

• 블룸버그가 오픈소스 개인정보보호 프로젝트인 파이홀^Pi-hole의 존재 이유와 목적에 관한 기사를 배포했습니다. 저도 이 소프트웨어를 매일 사용해서 직장과 가정에서의 네트워크 사용을 보호하고 있습니다.

 

 

웹 퍼포먼스

• Postgres 버전 10이 나온 지는 꽤 되었다. 하지만 개인적으로 아직까지 Postgre의 모든 훌륭한 기능을 사용할 방법을 찾지 못해서 힘들었죠. 가브리엘 엔슬라인^{Gabriel Enslein}이 Postgres 10의 퍼포먼스 업데이트를 프리젠테이션 슬라이드로 정리해서 공유했습니다. 내장된 JSON 지원, 대규모 데이터셋의 네이티브 분할, 해시 인덱스 회복력에 대해 설명했습니다.

• 앤드루 베츠^{Andrew Betts}는 수많은 웹사이트에서 구식 헤더를 사용하는 것을 발견했습니다. 베츠는 구식 헤더를 사용하지 말아야 하는 이유와 그 대안에 관한 글을 공유했습니다.

 

 

접근성

• 마시 수튼^{Marcy Sutton}이 위키피디아가 링크 미리보기를 만들 때 어떻게 뛰어난 접근성을 확보했는지에 관한 내용을 공유했습니다. 사용자는 마우스뿐 아니라 키보드만 사용해서도 해당 기능을 사용할 수 있죠. 그리고 위키피디아 디자이너 니자르 판가르카^{Nirzar Pangarkar}의 글을 통해 이 기능의 제작 과정을 더 알아볼 수 있습니다.

• 스콧 오하라^{Scott O’Hara}가 접근 가능한 리치 인터넷 애플리케이션(ARIA)에서 hidden과 none 키워드의 차이점이 무엇이고 어떤 경우에 사용해야 하는지에 대해 설명했습니다.

 

 

CSS

• 수년간 거의 논의가 없었지만 CSS 테이블은 아직도 많은 웹사이트에서 데이터를 테이블로 보여주기 위해 사용됩니다(그렇게 사용해야 하는 것이 맞고요). 하지만 CSS 테이블은 기본적으로 반응형이 아니기 때문에 테이블로 구현하기 위해 항상 골치 아파야 하고, 대부분의 경우 자바스크립트를 사용해 모바일 화면에서 작동하도록 하죠. 리아 베루^{Lea Verou}가 CSS로 반응형 테이블을 만들 수 있는 두 가지 새로운 방법을 발견했습니다. 한 가지는 text-shadow 속성을 이용해 글자를 다른 열에 복사해 넣는 방법이고, 다른 하나는 element() 값을 사용해 <thread> 태그 전체를 다른 열에 복사해 넣는 방법입니다. 리아가 어떻게 이 방법을 찾아냈는지 알 수 없지만 정말 대단하네요.

• 레이철 앤드루^{Rachel Andrew}가 2018년 현시점에서 프린트를 위한 스타일시트 만드는 방법에 대해 글을 썼습니다. 프린터가 없는 사용자에게도 이 내용이 중요한 이유를 설명했습니다.

• 오스발다스 밸루티스^{Osvaldas Valutis}가 ‘우선순위 플러스’라 불리는 내비게이션 패턴을 대부분 CSS만으로 구현하는 방법을 공유했습니다(적어도 최신 브라우저에서는 작동합니다). 구버전의 브라우저를 지원하기 위해서는 추가 작업이 필요하지만 이것만으로도 자바스크립트를 지나치게 사용하지 않고 해당 패턴을 제작하는 좋은 출발점인 것 같습니다.

• 레이철 앤드루^{Rachel Andrew}가 앞으로 출시될 CSS 그리드 2단계와 하위 그리드^Subgrid 상세 내역에 대해 설명했습니다. 이것으로 어떤 문제를 해결할 수 있는지, 그리고 브라우저에서 구동 단계에서 어떻게 사용할 수 있는지에 대하여 공유했습니다.

 

자바스크립트

• 크리스 애쉬튼^{Chris Ashton}이 ‘자바스크립트 비활성화하고 하루 동안 웹 사용하기’를 공유했습니다. 이 글로 웹사이트에서 자바스크립트가 구동되지 않을 경우를 고려하고 그 대책을 준비하는 것이 중요한 이유에 대해 생각해볼 수 있습니다.

• 샘 소로굿^{Sam Thorogood}이 ‘웹의 자체적인 취소^Undo, 복구^Redo 기능’을 구현하는 방법을 공유했습니다. 취소와 복구 기능은 많은 텍스트 편집기, 게임, 기획 및 그래픽 소프트웨어와 드래그 앤 드롭 순서 정렬 방식에서 자주 사용되죠. 이를 구현하는 것이 쉽지는 않지만 샘 소로굿의 글은 이 기능의 개념과 기술적 측면을 설명하여 이 복잡한 문제를 이해할 수 있도록 돕고 있습니다.

• 여러분의 애플리케이션에서 객체/컨테이너 쿼리를 구현할 수 있는 새로운 방법이 나왔습니다. 이퀴오^eqio라는 교차로관찰자^{IntersectionObserver}를 사용하는 작은 라이브러리입니다.

 

일과 삶

• 요하네스 사이츠^{Johannes Seitz}가 프로젝트 출발점에서의 프로젝트 관리에 관한 자신의 생각을 공유했습니다. 사이츠는 이 방법론을 반복 단계 출발점이라는 의미의 ‘이터레이션 제로^{Iteration Zero}’라고 명명했습니다. 프로젝트 경험이 충분하지 않은 사람이더라도 프로젝트 로드맵을 구축할 때 프로젝트 범위와 위험성을 잘 이해할 수 있도록 도와주는 흥미로운 개념입니다.

• 아레스티아 로젠버그^{Arestia Rosenberg}는 프리랜서에게 해줄 수 있는 최고의 조언은 ‘순간에 충실하라’인 이유에 관해 이야기했습니다. 일을 할 수 있을 때 일을 하고, 일을 효과적으로 할 수 없을 때는 그 기회를 활용해 다른 것을 하라는 의미입니다. 그 결과는 행복한 삶과 더 높은 일의 능률로 나타난다고 합니다. 개인적으로 저는 이 방법을 사용할 수 있는 사람 모두에게 전달하고 싶습니다. 물론 프리랜서 경우에 가장 적합하긴 합니다.

• 샘 알트만^{Sam Altman}이 생산성에 관한 몇 가지 팁을 공유했습니다. 단지 ‘10가지 방법’ 같은 리스트가 아니라 실제로 생산성에 도움이 되는 내용입니다.

 

 

그 외 소식

• 이단 마콧^{Ethan Marcotte}이 구글 듀플렉스^{Google Duplex}가 사람의 목소리를 흉내 내도록 설계되었고 이를 접하는 사람들이 그것이 기계인지 인간인지 알아채지 못한다는 사실에서 윤리적 문제를 지적했습니다. 기술적 측면에서는 분명히 흥미롭습니다. 그러나 가짜 뉴스 문제를 더 악화할 수 있다는 점과 인간 목소리와 기계 목소리의 차이를 구분하는 데 겪을 어려움에 대한 논쟁은 뜨거울 것으로 보입니다.

• 우리가 사는 세상은 약속 위에 지어졌습니다. 이 글은 아무리 어렵더라도 그 약속을 지켜내는 것이 중요한 이유를 이야기합니다.

• 팔란티어^Palantir에 대해 들어본 사람은 많지 않을 것입니다. 팔란티어는 피터 틸^{Peter Thiel}이 투자한 데이터 마이닝 기업인데요, 세계 모든 사람으로부터 가능한 최대의 데이터를 긁어모으는 것을 목표로 합니다. 여러 법조 기관은 물론 군대와도 관련된 기업으로 알려져 있습니다. 개인적으로 바라는 것은 새로 지정되는 유럽의 개인정보보호법으로 인해 회사가 어려움을 겪었으면 합니다. 유럽연합이 팔란티어의 무자비한 데이터 수집을 중단시켰으면 합니다. 페이스북의 데이터 관련 논란은 팔란티어에 비하면 아무것도 아니니까요.

• 새로운 스마트폰 구입은 기존 핸드폰을 10년간 사용하는 것만큼 에너지를 소비한다는 연구 결과가 나왔습니다. 당분간 제 아이폰7을 교체할 일은 없을 듯합니다. 아직도 충분히 제 역할을 하고 있는 이유이기도 합니다.

• 안톤 스텐^{Anton Sten}이 문맥상 숫자와 통계를 공유하는 일반적인 방식인 허무 지표^{Vanity Metrics}에 대한 생각을 공유했습니다. 허무 지표의 적합성을 알게 된 이후 안톤 스텐은 투자나 서비스 사용 데이터 등 가장 일반적이고 읽기 쉬운 데이터에 대한 생각이 달라졌습니다. 문맥을 모르면서 단순 비교를 위해 숫자를 읽는 것은 아무런 도움이 되지 않습니다. 이 점을 명심합시다.