[2018년 12월 웹 개발 동향] WebP, UX 업계 상황, 오프라인에서 웹사이트를 사용하는 방법

올해 마지막 웹 개발 소식입니다. 2018년이 우리에게 준 것, 한 해 동안 일어난 일, 그리고 웹이 얼마나 발전했는지를 생각하면 정말 기쁩니다. 한 해 동안 배웠던 것을 돌아보고 떠올려봅시다. 올해 사용했던 기능, API, 라이브러리 중에서 무엇이 가장 유용했나요? 그리고 개인적으로는 어떤 변화가 있었나요?

이번 달 기사를 위해 많은 글을 모아봤습니다. 그럼에도 읽을 거리가 부족하다면 월간 웹 개발 동향 글을 모아 둔 아카이브를 방문하거나 에버그린 리스트에서 더 많은 글을 볼 수 있습니다. 한 해 마지막까지 스트레스받지 말고 행복하게 보내길 바랍니다. 그리고 내년에 만나요!

업데이트 소식

• 마이크로소프트가 에지 브라우저 정책을 변경한다고 발표했습니다. 기존에 사용하던 에지HTML^EdgeHTML 대신 크로미움^Chromium을 데스크톱용 브라우저 엔진으로 사용할 것이며 맥OS 전용 마이크로소프트 에지 역시 제공할 수도 있다고 합니다. 마이크로소프트는 블링크^Blink 엔진 개발에도 참여할 예정입니다.
• 국제화 API로 상대적 시간 기능을 지원하는 크롬 버전 71이 출시됐습니다. 새로운 기능인 음성 합성 기능에는 사용자 승인이 필요합니다.
• 사파리 개발자 프리뷰 71이 출시됐습니다. CSS에 supported-color-schemes 속성이 추가되고, 웹 인증이 실험 기능으로 추가됐습니다.
• 파이어폭스가 곧 모든 권한 요청을 자동 차단하는 브라우저 설정을 제공할 예정입니다. 이 기능은 자동 재생 비디오, 웹 알림, 위치 정보 요청, 카메라 및 마이크 접근 요청에 영향을 미칩니다. 요청 자동 차단 기능을 요구하는 목소리가 높다는 건 개발자들이 접근 요청 기능을 얼마나 심각하게 오용하고 있는지 보여주는 반증입니다. 웹RTC^WebRTC 같은 요청에 의존하는 통신 서비스 업계에는 슬픈 소식이군요.

일반 소식

• 드디어 웹사이트를 오프라인으로 접속하고 사용할 수 있는 놀라운 기술을 발견했습니다. 하지만 우리가 잊고 있던 건 지난 30년간 사람들에게 웹은 온라인이라고 가르쳤기 때문에 많은 사람이 오프라인 사용법이 존재한다는 사실조차 모르고 있다는 사실입니다. 사용자 경험 디자인에 대한 교훈과 우리가 만들고 있는 매체의 역사를 되돌아보는 일의 중요성을 동시에 가진 이야기입니다.

UI/UX

• 매튜 스트룀^{Matthew Ström}이 문제점을 나중에 고치는 것과 완벽하지 않으려고 노력하는 것의 중요성에 관해 이야기합니다.
• 2019년 UX 업계 상황에 관한 다소 풍자적인 자료입니다.
• 에리카 홀^{Erica Hall}이 ‘UX 디자인’ 대부분이 허상인 이유와 훌륭한 제품을 만들 때 왜 디자인뿐 아니라 올바른 제품 전략과 비즈니스 모델이 필요한지 그 예를 보여줍니다. 에리카가 언급한 예시 중 ‘버진 아메리카^{Virgin America}, 아르디오^Rdio, 구글 리더^{Google Reader}, 컴캐스트^Comcast 중 어떤 서비스가 좋은 경험을 제공했나요? 아직 살아있는 서비스는 어떤 거죠?’라는 대목은 왜 이 글을 읽어야 하는지 잘 보여줍니다. 다행히 이 글은 비관적이지 않고 적절한 전략과 디자인, 사업 모델을 활용해서 제품 향상에 어떻게 지식을 활용할 것인지에 대한 팁을 제공해 우리의 생각을 환기시킵니다.

 

도구

• 산디프 데바르콘다^{Sandip Devarkonda}가 포스트그레스^Postgres에서 구독한 그래프QL^GraphQL로 실시간 앱을 만드는 방법을 설명합니다.

HTML & SVG

• 미하엘 샤나글^{Michael Scharnagl}은 한 가지 코딩 언어만 선호한다는 이유로 사람을 괴롭히지 말아야하는 이유를 설명합니다.

접근성

• 스콧 오하라^{Scott O’Hara}가 컨트롤 요소의 스타일을 변경할 때 고유 기능과 접근성을 잊지 않는 것이 얼마나 중요한지 일깨워줍니다.

CSS

• CSS 환경 변수 기능이 등장합니다. 환경 변수가 사용자 정의 속성에 추가로 필요한 이유를 설명합니다.
• 앤디 벨^{Andy Bell}은 CSS 사용자 정의 속성을 사용해 레이아웃의 흐름과 리듬을 제어하는 방법을 알려줍니다. 사용자 정의 속성을 사용하는 완벽한 예는 색상 값으로 사용하는 겁니다.

자바스크립트

• 구글이 또 다른 API를 소개할 예정입니다. 배지 API^{Badging API}는 데스크톱용 웹 앱에 새 알림 같은 것을 표시합니다. 명세는 아직 논의 중이지만 개발진은 여러분의 생각을 듣고 싶어할 겁니다.
• 히데 드 브리스^{Hidde de Vries}가 모던 자바스크립트 API를 사용해 뷰포트^viewport 중앙에 특정 요소가 위치하도록 스크롤하는 방법을 설명합니다.
• 크롬 버전 71에서 사용할 수 있는 새로운 Background Fetch 기능은 영화처럼 불러오기 오래 걸리는 자료를 백그라운드에서 불러올 수 있게 합니다.
• 피트 르페이지^{Pete LePage}는 웹 공유 타깃 API^{Web Share Target API}를 이용해 서비스를 공유 타깃으로 등록하는 법을 설명합니다.
• 웹 폰트를 호출할 때 자바스크립트를 사용하는 것이 여전히 좋은 방법일까요? 잭 레더맨^{Zach Leatherman}은 상황에 따라 호출 방법을 선택해야 하는 이유와 모던 CSS, font-display: swap;를 사용하는 게 좋을 때도 있는 이유를 알려줍니다.
• 도카^Doka는 알아두면 좋은 새로운 단독형^standalone 자바스크립트 이미지 에디터입니다. 무료 제품은 아니지만 도카는 훌륭한 사용자 경험으로 무장한 매우 손쉬운 편집 기능을 갖추고 있습니다. 1년 요금을 결제하면 버그 수정과 지원을 받을 수 있습니다.
• ’웹 컴포넌트의 힘’은 웹 컴포넌트의 기본 개념과 사용법, HTML, CSS 클래스, 자바스크립트 트리거를 짜맞추기보다 자신만의 HTML 요소를 이용할 때 일이 편해지는 이유를 설명합니다.

보안

• 스콧 헬름^{Scott Helme}은 캐시, (로컬·세션·영구적)스토리지, 쿠키에서 웹사이트 운영자가 데이터를 삭제할 수 있는 Clear Site Data라는 새로운 보안 헤더에 관한 정보를 공유합니다. 이 헤더는 로컬스토리지에 저장된 민감하거나 개인 정보 혹은 인증 쿠키를 쉽게 삭제하는 데 유용합니다.
• target=_blank 링크 요소에 rel=noopener를 사용하는 게 좋다는 건모두 알고 있습니다. 파이어폭스가 보안 공격을 남용하지 못하도록 브라우저에서 rel=noopener를 자동으로 대체하는 실험을 합니다.
• 테렌스 에덴^{Terence Eden}은 결제 기능을 갖춘 대형 사이트들이 인증되지 않고 검증되지 않은 서드파티 자바스크립트를 얼마나 많이 사용하고 있는지 살펴봅니다. 테렌스는 이것이 무엇을 의미하며 왜 위험한지, 어떻게 해결하는지 자세하게 설명합니다. 하지만 결제 기능에 사용하는 자바스크립트 번들 스트라이프^Stripe 역시 하위 리소스 무결성^{Sub Resource Integrity} 검사를 지원하지 않네요.
• 유명한 npm 패키지에서 또 다른 보안 사고가 발생했습니다. 패키지 event-stream이 컴퓨터에서 특정 비트코인 지갑을 훔치는 멀웨어 코드를 포함한 채 배포됐습니다. 사용하는 머신의 의존성을 확인하고 패키지 버전을 최신으로 업데이트하세요. npm audit 역시 해당 문제를 확인할 수 있습니다.

프라이버시

• 남편이나 아내가 있나요? 자녀나 다른 가족은요? 그렇다면 가족의 데이터를 지키는 모든 방법을 읽고 실천해야 합니다. 인터넷은 안전한 공간이 아니기에 가족 스스로 인터넷에서 어떤 작업을 하는지 이해해야 합니다. 기본 설정을 알려주거나, 조정해서 가족을 지키는 건 여러분 몫입니다.

웹 퍼포먼스

• WebP 이미지 파일 크기를 가장 효율적인 JPEG 최적화와 비교하면 어떻게 될까요? 다니엘 알렉샌더슨^{Daniel Aleksandersen}은 수치를 통해 거의 모든 경우 WebP가 다른 최적화된 압축 방식을 훌륭하게 물리친다고 결론 내립니다.
• 이레 아데리노쿤^{Ire Aderinokun}이 요즘 WebP 이미지를 어떻게 사용할 수 있는지 보여줍니다. 파이어폭스가 나이틀리 빌드^{Nightly builds}에서 WebP를 지원하고 에지 역시 지난 버전 출시를 통해 WebP를 지원하는 요즘 이 글은 더 설득력이 있습니다.
• 아마존 클라우드 유닛이 ARM 기반 서버 칩을 개시함에 따라 웹 서버의 경우 가격이 45%로 감소할 수 있습니다. 이는 에너지 소비가 매우 적고 전체 효율이 높다는 의미로 지구에도 좋은 징조입니다. 기술이 기후에 미치는 영향을 줄어들게 하는 이런 혁신적인 인프라 업그레이드가 더 필요합니다.

 

일과 삶

• 샤나 린치^{Shana Lynch}가 무엇이 윤리적인 사업 리더를 만드는지, 어떤 가치가 중요한지, 일이 어려워질 때 어떻게 대처할지, 불편한 상황을 어떻게 대비할지 이야기 합니다.
• 오조메나 논조^{Ozoemena Nonso}가 우리가 가끔 행복하지 않은 이유를 설명하려 합니다. 행복을 훔쳐가는 도둑은 우리를 남과 비교하는 것이 아니라 올바른 비교 대상을 찾기 위해 노력하는 우리 자신입니다. 여러분이 남과 자신을 자주 비교하며 행복이 고통받는 걸 느낀다면 그 자체로 삶에 관한 대단한 조언입니다.
• 다른 사람을 안전 지대에서 몰아내는 것은 안 좋은 생각입니다. 흔하지 않은 조언이네요.
• 샌도르 다르고^{Sandor Dargo}가 어떻게 업무 시간에 주의 산만하지 않으면서 다시 업무에 집중했는지 이야기 합니다.
• 폴 로버트 로이드^{Paul Robert Lloyd}가 쉬운 예를 들어 윤리적 문제를 지적하며 체니드 보울^{Cennydd Bowles}의 책 ≪미래 윤리≫에 관한 글을 썼습니다.
• 제프리 실버스타인^{Jeffrey Silverstein}은 풀타임 교사로 근무하며 사이드 프로젝트를 위한 시간을 벌기 위해 많은 노력을 했습니다. 이제 그는 ‘풀타임 직업과 창의적 프로젝트 사이 균형잡기’라는 글로 자신이 찾은 해결법을 공유합니다. 저도 매우 공감하는 고무적인 글입니다.
• 벤 베르드뮐러^{Ben Werdmüller}가 왜 생활형 사업^{Lifestyle Business}이 매우 저평가되는지 자신의 생각을 나눕니다. 생활형 사업은 소유주가 일정선의 수입만 유지하고 더 벌지 않으며 벤처투자를 받지 않는 사업이라고 벤은 정의합니다. 사족을 붙이자면, 이 글에서 미국 서해안 지방의 임대료가 얼마나 미친 수준이 됐는지 확인할 수 있습니다.
• 제이크 냅^{Jake Knapp}이 6년 동안 이메일도 알림도 없는 무방해 스마트폰을 갖고 어떻게 살아남았는지 공유합니다. 제이크는 우리에게 시도해볼 수 있는 좋은 팁과 연습법도 알려줍니다. 저의 경우 최근 원하는 앱을 찾아 여는 행위가 그저 딴짓을 하려는 게 아닌 정말 그 앱을 실행하고 싶다는 걸 확실히 하기 위해 모든 앱을 두 번째 화면의 한 폴더 안으로 몰아넣었습니다.
• 라이언 어벤트^{Ryan Avent}가 왜 우리는 힘들여 일하는지 썼습니다. 이 글은 우리가 노동을 왜 중요하게 보는지, 왜 사랑에 빠지는지, 왜 우리의 생활 방식과 사회는 언제나 일을 열심히 하게끔 변하는지 잘 정리되어 있습니다.

 

그 외 소식

• ’디자이너는 누구를 위해 일하는가’는 책임감에 관한 아주 훌륭한 글입니다.
• 매리언 울프^{Maryanne Wolf}가 인간은 텍스트를 훑어볼 때 독서를 관장하는 뇌에서 복잡성을 받아들일 시간이 없어 감정을 느끼거나 아름다움을 인지하지 못한다는 연구 결과를 공유합니다. 이런 추세는 최근 10년 동안 더 악화됐습니다 .
• 32조 달러를 관리하는 국제 투자자들이 UN 기후 회담에서 탄소 배출량을 줄이고 모든 석탄 사용을 단계적으로 중지할 것을 각국 정부에 엄중히 경고했습니다. 그렇지 않으면 2008년 세계 금융위기 때보다 몇 배 더 심한 금융 붕괴에 직면할 거라고 하는군요.
• 2억 5000만 년 전 페름기^{Permian Period}에 일어난 지구 최악의 대멸종은 어떤 면에서 요즘 기후 변화와 평행을 이룰지도 모릅니다.