Skip to content

[2018년 3월 웹 개발 동향] 서비스 워커, CDN 만들기, 디자인 팁

서비스 워커Service Worker는 아마도 가장 잘못 소개되고 있는 웹 기술 중 하나일 것 같습니다. 대부분 이 기술을 논할 때 오프라인 모드에서 앱을 사용하는 방법에 관한 이야기만 하죠. 하지만 서비스 워커는 그보다 훨씬 많은 것을 할 수 있습니다. 최근에는 서비스 워커가 얼마나 훌륭한 기술인지에 관한 글을 매주 새로 보는 것 같네요. 예를 들어 이달에는 서비스 워커를 사용해서 브라우저 탭끼리 메시지를 전달하는 방법과 백그라운드 동기화Background Sync API를 통해 요청을 백그라운드에서 처리할 수 있는 방법이 소개되었습니다. 이제는 브라우저가 제공하는 도구만 잘 활용해도 네트워크 연결 상태와 관계없이 훌륭한 웹 경험을 구축할 수 있게 된 듯합니다. 사용자의 사랑을 받을 만한 웹 경험을 만드는 것은 이제 우리의 능력에 달린 것 같습니다. 사실 그게 제일 어려운 부분이기는 하죠.

 

업데이트 소식

스케치 버전 49가 출시됐다. 이번 버전에 새롭게 추가된 프로토타이핑 기능으로 앱 전체의 흐름을 인터랙티브한 형태로 구현할 수 있다. (이미지 출처)

일반 소식

  • 에드 엘슨Ed Ellson이 구글 크롬의 백그라운드 동기화Background Sync API가 요청을 실행하는 방식을 구현해보고 이를 글로 정리했습니다. 데이터를 전송하려는 첫 번째 시도가 실패했을 때 백그라운드에서의 동기화를 허가함으로써 네트워크 연결이 아주 불안정하거나 아예 끊어진 상태에서의 웹 경험을 개선할 수 있습니다.

UI/UX

서체의 크기 대신 색과 굵기의 차이를 사용하여 시각적 우선순위를 만드는 방법은 애덤 와단과 스티브 쇼거가 공유한 실무에 바로 적용할 수 있는 일곱 가지 디자인 팁 중 하나다. (이미지 출처)

보안

  • GraphQL을 사용하면 언제든 원하는 데이터를 정확하게 쿼리할 수 있습니다. GraphQL은 API를 위한 훌륭한 쿼리 언어지만 한편으로는 복잡한 보안성 문제를 가지고 있죠. 정당하고 유용한 데이터를 요청하는 대신 누군가가 악의적으로 방대하고 복잡한 쿼리 요청을 통해 서버, 데이터베이스, 네트워크에 과부하를 일으킬 수도 있습니다. 이러한 문제를 방지하기 위해 맥스 스토이버Max StoiberGraphQL API의 보안성을 어떻게 확보할 수 있는지에 대해 설명했습니다.

프라이버시

  • 웹킷WebKit이 저장소 접근 APIStorage Access API를 도입하기로 했습니다. 이것은 현재 사파리의 지능형 트랙킹 방지Intelligent Tracking Protection (ITP)와 관련된 중요한 문제에 대응하기 위함인데요, 접속 중인 사이트를 통해서 외부 서비스의 콘텐츠에 접근하는 과정에서 프라이버시 관련 문제가 있었습니다(예를 들면 블로그 글에 포함된 유튜브 비디오 같은 경우). 저장소 접근 API는 사용자가 접속 중인 사이트에서 외부 서비스를 사용할 때 외부 서비스가 접속 중인 사이트의 쿠키 정보에 접근 요청을 할 수 있도록 허가합니다. 사용자 프라이버시 보호를 기본값으로 하고 예외 사례에만 요청에 의해 허가하는 방식의 좋은 해결책입니다.

웹 퍼포먼스

  • 야노스 파스토Janos Pasztor는 콘텐츠 전송망Content Delivery Network(CDN)을 직접 구축했습니다. 외부 서비스를 사용하는 것보다 직접 만드는 것이 더 나은 방법이라고 판단했기 때문이라고 하네요. 그리고 그 소스 코드를 깃허브에 공개했습니다. 일반적인 해결책을 조금 다른 관점에서 접근한 웹 퍼포먼스에 관한 좋은 글입니다.
  • 페이스북이 Cache-Control: Immutable 지시어를 광범위하게 사용한다고 발표한 지 1년이 지난 지금, 웹에서 몇몇 거대기업을 제외하고 이 지시어가 얼마나 사용되고 있는지를 폴 칼바노Paul Calvano가 알아봤습니다. 흥미로운 조사이지만 한편으로는 이 유용한 퍼포먼스 도구가 너무나 적게 사용되고 있다는 점이 안타깝습니다. 제 회사인 콜로크Colloq에서는 이 기술을 정말 많이 사용하는데요, 서버의 트래픽과 부담을 크게 줄여줄 뿐 아니라 재방문하는 사용자에게 많은 페이지를 거의 즉각적으로 제공할 수 있기 때문입니다.
야노스 파스토Janos Paszto가 구축한 CDN의 글로벌 통계 (이미지 출처)

HTML & SVG

 

자바스크립트

CSS

접근성

접근성 체크리스트는 당신의 프로젝트 내 역할이나 프로젝트 진척도와 무관하게 접근성 관련 요소를 놓치지 않도록 도와줄 것입니다. (이미지 출처)

일과 삶

  • 저는 이번 주에 알렉스 듀로즈Alex Duloz의 글을 읽었는데요 이 부분이 유독 기억에 남습니다. “우리가 새로운 앱을 개발할 때, 인터넷에 콘텐츠를 올릴 때, 무언가를 대중이 접근할 수 있도록 할 때, 그것이 어린이와 청소년에게 해로운 것은 아닐지 잠깐은 고려해봐야 합니다. 만약 그렇다면 그것을 인터넷에 공개해서는 안 됩니다.” 사실 저를 포함한 대부분 사람이 인터넷에 뭔가 올릴 때 이런 부분은 잘 고려하지 않습니다. 우리는 그저 재밌는 글, 웃긴 사진, 멍청한 콘텐츠를 통해 유명세를 얻고 싶어 하죠. 하지만 현실에서 그러한 콘텐츠는 사회에 영향을 미칩니다. 청소년이 그저 우리가 재밌다고 생각하는 것들만 접하지 않고, 우리의 지식으로부터 무언가 얻을 수 있도록 유용한 정보를 제공하고 이를 즐길 수 있게 도와줍시다. “우리는 청소년이 우리가 만들어내는 것을 어떻게 사용할지 항상 고려해야 합니다.”
  • MIT 오픈코스웨어MIT OpenCourseWare많은 양의 동영상(음성) 강좌를 공개했습니다. 많은 사람이 훌륭한 콘텐츠를 접할 수 있게 되었네요. 아주 좋은 소식입니다.
  • 제이크 냅Jake Knapp훌륭한 일을 위해서는 이상주의와 냉소주의가 모두 필요하다고 주장합니다. 그리고 이 이론을 뒷받침할 탄탄한 근거도 제시하네요. 읽어볼 만한 글입니다.
  • 2000년 이후 미국인의 불행지수가 얼마나 증가했는지에 관한 중요한 글을 공유합니다. 물론 소득불평등이 주요 원인 중 하나이지만, 더 중요한 측면은 젊은 세대 중 디지털 미디어를 많이 소비하는 사람들이 하루에 한 시간만 사용하는 사람들보다 더 불행하다는 것입니다. 흥미로운 부분은 디지털 미디어를 전혀 사용하지 않는 사람들 역시 불행지수가 높다는 점인데요, 이 결과는 우리가 디지털 미디어를 적어도 개인적인 용도로는 적정 수준만 사용해야 한다는 것을 보여주는 것 같습니다. 한번 시도해보면 큰 변화를 겪게 될 겁니다
  • 마이클 브래들리Michael Bradley의 이론에 따르면 성공적인 프로젝트를 위해 반드시 로드맵이 필요하지는 않다고 합니다. 대신 그는 프로젝트의 존재 이유와 목적이 무엇인지를 판단할 수 있는 나침반을 만들라고 제안합니다.

그 외 소식

 

저작권 정보이 글은 Smashing Magazine에서 나온 글을 번역한 것으로, 웹액츄얼리 북스팀이 저작권자로부터 허가를 받고 올린 글입니다. 원본은 Monthly Web Development Update 3/2018: Service Workers, Building A CDN, And Cheating At Design에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리 북스팀에서 웹디자인 관련 영문 번역자를 찾습니다. 관심 있는 분은 메일 보내주세요. books@webactually.com
참여를 기다립니다!내용 중에 오번역, 오탈자를 발견하신 경우에는 알려주세요. books@webactually.com


맨위로