Skip to content

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

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

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

업데이트 소식

일반 소식

UI/UX

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

도구

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

보안

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

웹 퍼포먼스

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

 

TCP와 TLS는 클라이언트와 서버 간의 왕복을 위해 두 번의 핸드셰이크handshake를 필요로 하지만, QUIC는 한 번의 핸드셰이크만을 필요로 합니다. (이미지 출처)

HTML과 SVG

접근성

자바스크립트

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

 

자바스크립트의 실제 비용은 어떻게 될까요? 애디 오스마니의 연구가 밝혀낸 사실 중 하나는 2018년 기준으로 CNN.com에 접속하는 데 저가형 폰을 사용하는 경우 아이폰8을 사용하는 경우보다 32초가 더 걸립니다. (이미지 출처)

 

CSS

일과 삶

그 외 소식

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

 

도서 소개

최신 51버전으로 전면 개정된 『스케치』(개정판)
전판의 충실한 설명은 그대로, 최신 버전의 기능은 추가로, 스케치로 완성하는 ‘디자인 시스템’까지 『스케치』(개정판)의 내용은 더욱 풍부해졌습니다. 라이브러리, 중첩 심볼, 스케치클라우드, 프로토타이핑 등 스케치 핵심 요소를 그저 따라하다보면 자연스레 익힐 수 있습니다. 단순하고 반복적인 작업은 스케치에 넘기고 고객 중심 디자인에 집중할 수 있는 시간을 확보하세요! 전문가가 추천하는 스케치 교과서, 『스케치』(개정판) 
저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Monthly Web Development Update 8/2018: The Cost Of JavaScript, Ethics In Open Source, And QUIC에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹 디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다. books@webactually.com


맨위로