[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 페이지를 ‘안전하지 않음’으로 표기하기로 했습니다.

 

 

일반 소식

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

 

UI/UX

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

 

도구

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

 

보안

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

 

 

프라이버시

• 미국 시민 자유 연합^ACLU은 아마존이 법 집행 기관과 공식적으로 협력하여 세계 몇몇 도시에서 이미 사용되고 있는 집단 얼굴 인식 기술을 제공하고 있다는 사실을 발견했습니다.

 

웹 퍼포먼스

• 키 CDN^KeyCDN이 웹 퍼포먼스에 대해 잘 알고 있는 15명의 전문가에게 독자와 공유할 수 있는 최고의 조언을 물었습니다. 2018년 여러 가지 유용한 퍼포먼스 팁을 공유했는데요 저도 몇 마디를 보탰습니다.
• 스테판 주디스^{Stefan Judis}가 HTML 헤더 태그 link rel=“modulepreload”를 추가함으로써 크롬 버전 66에서 이미 ECMA 스크립트 모듈을 프리로드할 수 있다는 사실을 발견했습니다.

 

접근성

• 로딩 스피너^{Loading spinner}를 만드는 것은 그리 어렵지 않습니다. 단일 페이지 애플리케이션^{Single Page Application}에서 로딩 중에 사용하는 경우를 예로 들 수 있습니다. 하지만 로딩 스피너의 접근성을 고려하는 경우는 드뭅니다. 스튜어트 넬슨^{Stuard Nelson}이 어떻게 하면 접근성을 확보한 로딩 스피너를 만들 수 있는지 공유했습니다.
• 폴 스탠튼^{Paul Stanton}이 최적의 결과를 위해 사용해야 할 접근성 도구에 대해서 이야기했습니다.

 

자바스크립트

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

 

CSS

• 올리버 쇤도르퍼^{Oliver Schöndorfer}가 웹에서 가변 서체^{Variable fonts}를 사용하는 방법과 CSS로 가변 서체를 스타일링하는 방법에 대해 공유했습니다. 가변 서체 사용 시 고려해야 할 부분과 발생할 수 있는 문제점까지 정리한 훌륭한 요약본입니다.
• 곧 출시될 맥OS 모하비가 ‘다크 모드’를 지원하기로 함에 따라 사파리 브라우저는 ‘다크 모드^{dark mode}‘ 상태에서 background-color가 설정되지 않은 페이지의 배경색을 자동으로 검은색으로 표시합니다. 이는 브라우저들이 저마다의 기본 스타일을 변경할 수 있으며, 이에 따라서 웹사이트 기본값을 조심스럽게 설정해야 한다는 것을 다시금 돌아보게 하는 사례입니다. 개인적으로는 다크 모드가 CSS 미디어 쿼리에 접근 가능하게 돼서 웹사이트가 이를 지원할 수 있으면 좋겠습니다.
• 라파엘라 페로^{Rafaela Ferro}가 CSS 그리드를 활용해 단순히 좋음을 넘어 훌륭한 포토 갤러리를 만드는 방법을 공유했습니다. 이 글에는 제가 평소에 CSS 그리드에 대해 이야기할 때 자주 듣게 되는 많은 질문에 대한 답이 포함되어 있습니다.
• 마신 윈차리^{Marcin Winchary}가 많은 시간을 들이지 않고 CSS 커스텀 속성을 활용해서 다크 테마를 만드는 방법을 설명했습니다.

 

일과 삶

• 안톤 스텐^{Anton Sten}이 우리가 만든 앱의 도덕적 영향력에 관한 글을 썼습니다. 인공지능, 사람들 삶에 영향을 미치는 소셜 네트워크, 유럽 개인정보보호법(GDPR)에 의한 프라이버시 문제 등을 다뤄야 하는 현실에서 더 이상 ‘빠르게 움직이고 틀을 깨뜨리는 것’이 긍정적으로 평가될 수 없는 이유를 이야기하는 의미 있는 글입니다.
• 프로젝트 관리 도구인 베이스캠프^Basecamp가 프로젝트 상태를 나타낼 수 있는 새로운 차트 형태를 추가했습니다. 이른바 ‘힐 차트^{Hill chart}’라 불리는 이 차트는 단순한 프로그레스 바 형태보다 더 많은 맥락을 보여줄 수 있습니다.
• 벤 워드뮐러^{Ben Werdmüller}가 이력서에 대한 개인적인 생각과 당신이 어떤 사람인지, 어떤 일을 하는지, 왜 당신이 채용되어야 하는지를 이력서가 반영하는 데 매번 실패하는 이유에 대해 공유했습니다.