Skip to content

[2018년 6월 웹 개발 동향] - 복잡성, HTTPS를 통한 DNS, 푸시 알림

최근 웹 프로젝트는 하나같이 복잡합니다. 저희 매거진팀은 개별 기술이 얼마나 복잡해졌는지에 관한 수많은 글을 읽고 그에 대해 끊임없이 논의하고 있습니다. 깃Git과 같은 버전 관리 시스템 없이 FTP를 통해 웹사이트를 업로드 하던 시절을 지나 이제 빌드 시스템, 트랜스파일러transpilers, 프레임워크, 테스트, 지속적 통합Continuos Integration, CI 같은 기술을 이제는 아주 작은 프로젝트에도 사용하고 있습니다. 그 이유를 이해하는 데는 긴 시간이 필요하지 않습니다.

한편으로 웹 개발은 지난 15년간 엄청나게 성장함으로 인해 현재와 과거를 더 이상 비교할 수조차 없게 되었습니다. 어떤 부분에 있어서는 과거의 기술이 훨씬 간단했던 것처럼 보이기도 합니다. 때로는 현재 환경의 강점과 수많은 가능성을 무시하기도 합니다. 과거 코드 테스트를 하지 않았던 것은(사실 테스트 자체가 없었습니다) 성공을 위한 믿을 만한 테스트 방법이 없었다는 것을 의미하기도 합니다. 그리고 배포deployment 절차가 없었다는 것은 새로운 버전을 업로드하는 것이 아주 쉬웠던 만큼 문제를 일으키기도 쉬웠다는 것을 의미하며, 실제로 지속적 통합 시스템이 일반화된 오늘날보다 과거에 훨씬 많은 문제가 발생하기도 했습니다.

제프리 젤드먼Jeffrey Zeldman이 ‘복잡성에 대한 숭배The Cult of Complex’라는 글을 통해 우리가 불필요한 세부사항에 집착하고 문제를 과하게 해석한다는 점을 지적했습니다. 저는 지나치게 복잡하지 않으면서도 윤리, 개인정보 보호, 보안, 뛰어난 사용자 경험, 성능 측면에 충실하며 테스트, 배포, 가용성, 성능 등의 측면에서도 안정적으로 작동하는 시스템 구축 과제를 좋아합니다. 아마도 적절한 균형을 찾는 문제가 가까운 시일 내에 사라질 것 같지는 않습니다. 복잡성은 어디에나 있습니다. 다만 그것이 유용한 복잡성인지, 단순히 더 쉽다는 이유로 추가되었는지, 아니면 우리가 문제를 지나친 기술로 대응하고 있는지를 판단하면 됩니다.

 

업데이트 소식

  • 곧 출시될 사파리 버전 12가 애플 WWDC에서 공개되었습니다. 탭에서 아이콘 사용, 더 강화된 비밀번호, 이중 인증 컨트롤을 포함한 HTML 속성의 패스워드 생성기 컨트롤, 3D, 증강현실AR 모델 뷰어, 아이패드에서 전체화면 API 지원, font-display 그리고 가장 중요한 부분인 지능형 추적 방지 Intelligent Tracking Prevention 2.0이 새롭게 포함되었습니다. 지능형 추적 방지 기능은 그 어느 때보다 제한적이며 기존 웹사이트의 기능적인 부분에 큰 영향을 미칠 수 있습니다.
  • 헤드리스 크롬headless Chrome의 자동화 라이브러리인 퍼페티어Puppeteer가 버전 5로 업데이트되었습니다. 이는 고립되어 있는 쿠키와 여러 페이지에서 사용되는 데이터에 브라우저 맥락을 제공합니다. 또한 워커Workers가 웹 워커Web Workers와 상호작용할 수 있도록 지원합니다.
  • 구글이 제작한 성능 분석 도구의 세 번째 주요 버전인 라이트하우스Lighthouse 3.0이 배포되었습니다. 이번 업데이트에는 새로운 보고서 인터페이스, 일부 점수 측정 방식의 변화, CSV 파일로 내보내기 기능, 최초 컨텐트풀 페인트First Contentful Paint 측정 등이 추가되었습니다.
  • 크롬 버전 67이 출시되었습니다. 데스크톱에서 프로그레시브 웹앱 지원, 일반 센서 API, 인증 관리 API의 범위가 확장되어 USB를 통한 범용 이중 인증U2F authenticators이 지원됩니다.
  • 지난 몇 달간 브라우저 보안 인터페이스에 여러 가지 변화가 있었습니다. 첫째로 보안 연결(HTTPS)을 제공하는 사이트의 지원을 강화하고 사이트 보안 연결 제공 여부를 표기하기로 했습니다. 크롬은 올 가을부터 HTTPS를 기본값으로 설정하고 HTTP 페이지를 ‘안전하지 않음’으로 표기하기로 했습니다.

 

크롬 OS 버전 67부터 데스크톱에서도 프로그레시브 웹앱이 지원된다. 크롬 개발팀은 이미 맥OS, 윈도우에서도 프로그레시브 웹앱 지원을 준비하고 있다. (이미지 출처)

 

일반 소식

  • 복잡성에 대한 숭배The Cult of Complex’라는 글을 통해 제프리 젤드먼Jeffrey Zeldman은 우리가 하려는 모든 것과 프로젝트와 삶 전반에 있어 핵심이자 목표가 단순함이라는 사실을 우리가 얼마나 자주 망각하는지에 대해 지적했습니다. 제프리 젤드먼은 글에서 어째서 단순함을 이뤄내는 것이 어려운지, 반면에 복잡한 시스템을 파고드는 것은 훨씬 쉬우면서도 매혹적인지를 설명합니다. 저의 두고두고 읽어볼 만한 글 목록에 추가할 만큼 아주 좋은 내용입니다.
  • 헤이든 피커링Heydon Pickering이 웹 컴포넌트를 올바른 방식으로 개발하는 방법을 가르쳐주는 새롭고 흥미로운 글을 공유했습니다. 이 글에서 헤이든은 포용적인 반응형 ‘카드’ 모듈을 만드는 방법을 이야기합니다.

 

UI/UX

  • 쿨 백그라운드Cool Backgrounds는 모 아마야Moe Amaya의 멋진 사이드 프로젝트입니다. 쿨 백그라운드는 그라디언트가 포함된 다각형 백그라운드를 제작할 수 있는 온라인 도구로 다양한 모양을 만들 수 있습니다. 결과물을 보면 정말 아름답습니다.

 

도구

  • 벤 프레인Ben Frain이 거의 모든 최신의 코드 에디터에서 사용할 수 있는 몇 가지 유용한 텍스트 편집 기술을 공유했습니다.

 

보안

  • DNS를 통한 보안 공격이 화제가 되면서 HTTPS를 통한 DNS의 중요성이 점점 커지고 있습니다. 린 클라크Lin Clark가 이 기술을 쉽게 이해할 수 있도록 만화로 설명했습니다.
  • 윈도우 에지 브라우저가 same-site 쿠키 지원을 검사하고 있습니다. 지금보다 쿠키 사용을 더 통제하기 위한 이 속성은 이미 파이어폭스와 크롬에서는 지원하고 있습니다. 주요 브라우저 중 사파리만이 아직까지 지원하지 않고 있지만 다음 기술 프리뷰 버전에 포함될 것으로 예상합니다.

 

린 클라크가 HTTPS를 통한 DNS가 어떻게 사용자 개인정보를 더 잘 보호할 수 있는지를 만화를 통해 설명했다. (이미지 출처)

 

프라이버시

 

웹 퍼포먼스

 

접근성

 

자바스크립트

  • 자바스크립트는 최근 들어 엘름Elm, 러스트Rust, 타입스크립트TypeScript, 바벨Babel, 다트Dart를 선호하는 사람들에게 괴롭힘을 당해왔습니다. 하지만 자바스크립트는 절대 앞서 나열한 언어들보다 부족하지 않습니다. 안드레아 기아마치Andrea Giammarchi가 그 이유를 훌륭한 예시와 함께 설명했습니다. 이 글은 우리가 알고 있어야 할 몇 가지 함정을 보여준다는 점에서 앞의 언어를 사용하는 사람들에게 유용한 읽을 거리입니다.
  • 많은 프로젝트의 경우 사용자 정보를 수집하는 분석 도구나 기타 스크립트를 사용하고 싶어 합니다. 유럽 개인정보보호법(GDPR)의 발효와 함께 그러한 수집 도구를 사용하는 것이 훨씬 더 어려워졌습니다. Yett은 사용자가 동의하지 않는 한 개인정보를 수집할 수 없도록 막아주는 유용한 자바스크립트 툴입니다.
  • 라이언 밀러Ryan Miller가 프론트엔디언The Frontendian이라는 새로운 발행물을 개설했습니다. 그리고 지금껏 제가 본 것 중 가장 훌륭 교차 출처 자원 공유CORS에 대한 설명서이자 안내서를 공유했습니다.
  • 마이크로소프트 개발자들이 웹 푸시 알림이 어떤 모습으로 사용될 수 있고, 사용되어야 하는지에 관한 훌륭한 인터랙티브 데모 페이지를 제작했습니다. 아직 웹 푸시 알림을 접해보지 못한 이들에게는 웹 푸시 알림 작동 방식을 이해하고, 어떻게 하면 사용자에게 방해되지 않는 인터페이스를 구축할 수 있는지에 대한 좋은 입문서가 될 듯합니다.
  • 파일폰드Filepond는 파일 업로드 기능을 구현해주는 자바스크립트 라이브러리입니다. 파일폰드는 보기에 정말 멋질 뿐 아니라 리액트React, 뷰Vue, 앵귤러Angular, 제이쿼리jQuery 등과 함께 사용할 수 있습니다.
  • 리액트 버전 16.4가 출시되었습니다. 상당히 중요한 기능이 포함됐는데요, 바로 포인터 이벤트Pointer Events입니다. 이미 오래 전부터 요청된 기능이라 사용자 인터랙션을 다루기 더 쉬워질 것으로 예상합니다.
기본적인 점성학 아이디어와 푸시 알림 구조의 유사성으로부터 영감을 얻어 마이크로소프트 개발팀이 브라우저나 앱을 열지 않고도 사용자에게 푸시 알림을 보내는 방법을 설명했다. (이미지 출처)

 

CSS

 

일과 삶

  • 안톤 스텐Anton Sten우리가 만든 앱의 도덕적 영향력에 관한 글을 썼습니다. 인공지능, 사람들 삶에 영향을 미치는 소셜 네트워크, 유럽 개인정보보호법(GDPR)에 의한 프라이버시 문제 등을 다뤄야 하는 현실에서 더 이상 ‘빠르게 움직이고 틀을 깨뜨리는 것’이 긍정적으로 평가될 수 없는 이유를 이야기하는 의미 있는 글입니다.
  • 프로젝트 관리 도구인 베이스캠프Basecamp가 프로젝트 상태를 나타낼 수 있는 새로운 차트 형태를 추가했습니다. 이른바 ‘힐 차트Hill chart’라 불리는 이 차트는 단순한 프로그레스 바 형태보다 더 많은 맥락을 보여줄 수 있습니다.
  • 벤 워드뮐러Ben Werdmüller이력서에 대한 개인적인 생각과 당신이 어떤 사람인지, 어떤 일을 하는지, 왜 당신이 채용되어야 하는지를 이력서가 반영하는 데 매번 실패하는 이유에 대해 공유했습니다.
저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹 디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다. books@webactually.com


맨위로