[2018년 2월 웹 개발 동향] 개선된 내용, 다양한 브랜드 소식, 브라우저의 빠른 발전

사람들은 저마다 속한 전문 분야에서 본인에게 맞는 세부 영역을 찾곤 합니다. 오늘날의 웹 디자인과 개발 분야도 이와 다르지 않습니다. 15년 전 제가 첫 웹사이트를 만들 때 사용했던 기술은 프레임셋과 HTML 4.0, 이미지 파일, 그리고 지금에 비하면 극히 제한적인 CSS와 현란한 GIF 이미지, 인라인 자바스크립트(예를 들면 onclick="" 속성) 등이었습니다. 이러한 기술의 기본을 익히는 데는 나흘 정도 걸렸던 것 같습니다.

하지만 이제는 많은 것이 달라졌습니다. 요즘의 웹 기술을 들여다보면 이 분야에서 새로 시작한다는 것이 과거보다 얼마나 어려워졌는지 금방 알 수 있는 것도 이때문이죠. 웹 개발 프로세스 중 한 분야에만 집중하고 싶다는 사람들의 말에 충분히 공감합니다. 이제는 HTML과 CSS에 대해 충분히 알지 못하는 자바스크립트 개발자나, 모던 자바스크립트 스택에 익숙하지는 않지만 CSS만큼은 훌륭히 다룰 줄 아는 개발자들이 많이 있습니다. 심지어 웹 폰트 로딩, 웹 퍼포먼스, 보안, 프라이버시, 사용성 등의 세부 분야에만 특화된 전문가들도 존재합니다.

웹 개발은 이제 하나의 독립적 전문 분야로 성장했습니다. 이 분야에서 전문성을 갖추기 위해서는 상당한 양의 지식이 필요합니다. 이제는 며칠 만에 필요한 정보를 습득할 수 있는 분야가 아닙니다. 그 대신 웹을 기반으로 한 소프트웨어를 만들 수 있고, 제가 이 분야에 뛰어들었던 15년 전에는 상상도 할 수 없었던 것을 웹에서 구현할 수 있게 됐습니다. 웹 개발이 요구하는 수고의 양은 목공에 견줄 만합니다. 어떤 목공 기술자는 원하는 결과물을 몇 시간 만에 만들기도 합니다. 하지만 견고하고 좋은 품질의 아름다운 결과물을 완성하기 위해서는 다양한 지식과 경험, 실패, 그리고 인내가 필요하죠. 마찬가지로 훌륭한 웹 경험을 만드는 과정도 이와 다르지 않습니다.

 

브라우저 소식

• 웹 브라우저 제작사들로부터의 큼직한 뉴스는 끊이질 않네요. 구글은 2018년 7월에 배포될 예정인 크롬 버전 68부터 HTTPS를 사용하지 않는 HTTP 웹사이트들을 모두 ‘안전하지 않음’으로 분류하고 표기하기로 했습니다. 사실상 HTTP 웹사이트의 종말이 도래한 셈입니다. 이번 업데이트로 인해 소규모 비즈니스 웹사이트 또는 포트폴리오 웹사이트를 보유한 많은 사람이 낙담할 것은 자명합니다. 웹을 더 안전한 곳으로 만들려는 방향성은 박수칠 만합니다. 그러나 가끔은 이런 변화의 결정권자들이 인터넷을 사용하는 수많은 소규모 단체와 개인에게 직접 미치게 될 영향력에 대해서도 충분히 고려해봤는지 짚어 봐야 할 것입니다.

• 사파리 버전 49의 테크로놀로지 프리뷰를 살펴보면 새로 추가될 흥미로운 기능들을 찾아볼 수 있습니다. 지능형 트래킹 방지 기능을 위한 디버그 툴이 실험 모드를 통해 제공되고 CSS column-gap 속성이 %(백분율) 값을 지원하게 됩니다. 또한 접근성 향상을 위한 active-descendant 속성 역시 지원됩니다. 그리고 웹 표준에서 제외된 AppCache가 사용될 경우 콘솔창에 경고 메시지가 뜹니다.

• 프로그레시브 웹앱(PWA) 지원을 선언하는 메이저 브라우저 제조사들의 소식이 이어지고 있습니다. 이번에는 마이크로소프트의 윈도우 10과 에지 브라우저입니다. 에지 버전 17부터 서비스 워커와 푸시 알림이 지원될 예정인데, 이보다 더 흥미로운 소식은 마이크로소프트가 운영체제 레벨에서 PWA를 지원할 계획을 밝혔다는 점입니다. 개발자들은 마이크로소프트 스토어에 PWA를 등록할 수 있게 되는데 이는 웹앱을 네이티브 앱처럼 사용하는 날을 크게 앞당길 수 있는 의미 있는 변화입니다. 만일 이런 변화가 윈도우 이외의 다른 운영체제들에도 나타나게 된다면 수많은 일렉트론 기반 앱들의 효용성이 사라질 수도 있지 않을까 생각해봅니다.

• 최근 출시된 구글 크롬 버전 64에는 기존보다 더 효과적인 팝업 방지 메커니즘으로 활용될 수 있는 ResizeObserver가 추가됐습니다. 그리고 더 이상 window.alert 메서드로 포커스를 제어하는 것은 허용되지 않습니다. 또한 데이터 남용을 방지하기 위해 미디어 사전 로딩은 파일이 아닌 메타데이터만 가능해집니다.

• 향후 출시될 크롬 버전 65부터 시만텍의 레거시 공개키 기반 구조에서 발행된 인증서는 차단될 예정입니다. 사용자의 안정성 확보를 위해 크로스 도메인 간의download 속성값 사용 역시 차단됩니다.

• 파이어폭스 버전 58이 큰 성능 향상과 함께 이번 주에 배포됐습니다. 백그라운드 탭의 CPU 자원 사용에 타임아웃이 적용됐고, font-display CSS 속성이 지원되며, 자바스크립트 Intl.PluralRules 객체 역시 지원됩니다. 그리고 맥OS에서 WebVR API 활성화가 기본값으로 설정됐고, WebAssembly에는 훌륭한 스트리밍 컴파일러가 탑재됐습니다.

 

파이어폭스 버전 58에서는 기존의 최적화 컴파일러보다 10~15배 빠른 속도로 컴파일할 수 있는 2단 컴파일러가 소개됐다. (이미지 출처)

 

• 사파리 11.1이 iOS 버전 11.3과 맥OS 버전 10.13.4와 함께 출시됐습니다. 구버전인 맥OS 10.12.6과 10.11.6에서도 사용할 수 있습니다. 이번 업데이트에는 서비스 워커, 애플 페이가 포함된 결제 API, HTMLImageElement.decode(), 파일과 디렉터리 목록 API, 비콘 API, <img> 태그의 비디오 파일 지원, iOS용 사파리에서 암호화된 미디어 확장 프로그램 지원, WebRTC와 미디어 캡처에서 allow="camera" 지원, 웹폰트의 로드와 디스플레이 여부를 컨트롤할 수 있는 CSS font-display 속성 추가, 웹앱 매니페스트까지 포함됐습니다. 보안 관련으로는 하위 자원 완전성 지원, ‘안전하지 않은 웹사이트’ 경고문 추가, 유저 에이전트 스트링 업데이트가 추가됐습니다. 이번 업데이트는 애플이 사파리의 지속적 업데이트를 위해 많은 노력을 하고 있음을 증명하는 이정표로 보입니다. 또한 사파리가 사용자의 저장 공간을 낭비하지 않기 위해 오랫동안 사용되지 않은 서비스 워커를 자동으로 드롭시키기로 한 점도 흥미롭습니다.

 

일반 소식

• 프랭크 키메로^{Frank Chimero}가 그의 글에서 끊임없는 기술의 변화로 인해 겪는 괴로움이 정상적인 이유를 설명했습니다. 새로운 비즈니스의 시작부터 제품의 세부적인 부분을 파고들기까지의 여정 또한 흥미롭습니다.
• 에릭 마이어^{Eric Meyer}는 CSS의 초창기부터 개발에 참여해왔고 그 과정에 대해 깊이 있게 이해하고 있는 사람 중 하나죠. 그가 오늘날 CSS가 초창기보다 얼마나 복잡해졌는지에 대한 생각을 공유했습니다.
• 비탈리 프리드만^{Vitaly Friedman}은 우리와 같은 개발자와 창업자들이 사용자를 존중해야 함을 다시 한 번 강조하고, 그것이 왜 모두에게 중요한 것인지에 대해 이야기했습니다.
• 맷 루드윅^{Matt Ludwig}은 시간이 갈수록 떨어지는 소프트웨어의 일관성 문제와 그 대안으로 프로그레시브 웹앱으로의 전환이 50년 후에도 소프트웨어 일관성을 유지할 수 있는 해결책임을 제안하는 글을 작년에 썼습니다. 하지만 여기에서 오류는 웹이 25년 전과 동일하다고 가정한 점입니다. 오늘날 브라우저들은 등장한 지 몇 년밖에 되지 않은 수많은 API를 다시 제거하고, 기존의 기능들을 HTTPS의 장막 뒤로 감추며, 개발자들은 얼마 지나지 않아 내버려지는 수많은 종속 프로그램에 기반을 둔 코드를 작성합니다. 우리가 만약 웹 표준을 준수하지 않은 무언가를 기반으로 새로운 것을 개발한다면 그것이 결코 지속 가능하리라고 장담할 수는 없을 것입니다.
• 팀 카들렉^{Tim Kadlec}이 구글 AMP의 양면성에 대해 의문을 제기했습니다. 그는 이것이 구글의 검색 마케팅 도구가 될 수도 있고, 다른 한편으로는 오픈 웹의 성능을 강화하는 도구가 될 수도 있다고 말했습니다. 하지만 구글이 원하는 대로 그 두 가지의 결과가 공존하기는 어려울 것으로 예측했습니다.
• 존 코브^{John Cobb}가 왜 그가 코드 퀄리티에 대해 다른 생각을 갖게 됐는지, 그리고 코드 리뷰어들이 단지 코드를 읽는 것에 그치지 않고 더 깊이 관여해야 하는 이유에 대한 생각을 공유했습니다.

 

UI/UX

• 독일의 대표 항공사인 루프트한자의 브랜드 디자인 케이스 스터디를 통해 그들이 어떤 방식으로 디자인 언어와 로고를 진화시켜왔는지 볼 수 있습니다. 미묘하면서도 큰 변화가 있었던 최근의 브랜드 개선과 브랜드의 시각적 요소를 발전시키기 위해 작은 디테일에 신경 쓰는 것이 얼마나 중요한지를 확인해보시죠.
• 나에마 바스칸데리^{Naema Baskanderi}가 모달_modal 창과 대화상자의 모범 사례라는 글을 통해 잘 알려진 기존의 사례들을 분석하고 개선 가능성에 대한 생각을 공유했습니다.

 

모달 창은 종종 성가신 요소로 인식되고, 따라서 사용자들은 반사적으로 이런 형태의 창들을 닫아버리는 경향이 있다. 나에마 바스칸데리는 쉽게 무시되지 않는 모달 창을 디자인하기 위해 어떤 노력을 할 수 있는지도 정리했다. (이미지 출처)

 

프라이버시

• 파이어폭스는 꽤 오랫동안 사생활 추적 보호 기능을 제공해왔습니다. 이제 그 경험으로 배우게 된 것과 어떻게 하면 웹의 좋은 요소들을 저해하지 않으면서 프라이버시도 강화할 수 있을지에 대한 글을 전했습니다.
• 홀게르 바텔^{Holger Bartel}는 비탈리 프리드만이 썼던 ‘언제나 존중이 우선이다’라는 글을 토대로 사용자를 존중하는 것의 중요성을 강조하고자 아주 흥미로운 질문을 던집니다. 누구나 더 나은 사용자 경험을 만들고 싶어 합니다. 하지만 당신은 그것을 위해 어떤 것을 할 의향이 있습니까? 이에 대한 명쾌한 답을 찾거나 실무에서 이를 위해 새로운 방법을 고안하는 것은 쉽지 않습니다. 그러나 제품을 만드는 과정에 있어 중요한 부분임은 틀림없습니다.

 

보안

• 자바스크립트 라이브러리 믹스패널^Mixpanel의 오토트랙 기능이 의도치 않게 지난 수개월간 사용자들의 비밀번호를 수집해온 것으로 보입니다. 혹시 믹스패널을 사용한다면 빠른 시일 내에 최신 버전으로 업데이트하세요.

 

도구

• 모니카 딘큘레스큐^{Monica Dinculescu}가 구글 크롬 팀이 개발한 라이브러리인 퍼피티어^Puppeteer를 사용해 헤드리스_headless 크롬의 자동화를 통해 시각적 차이 발견을 자동화하는 스크립트를 작성했던 경험을 공유했습니다.
• 곧 출시되는 크롬 버전 65에 추가될 아주 유용한 개발자 툴 중 하나로 색 조합의 대비를 측정할 수 있는 색상 대비율 측정 도구가 컬러 피커_{color picker}에 포함될 예정입니다.

 

크롬 개발자 도구 컬러 피커에 곧 색상 대비율 측정 도구가 추가될 예정이다.(이미지 출저)

• 웹팩 4의 정식 출시가 다가오고 있습니다. 기존보다 월등히 향상된 미사용 코드 제거 기능_{tree shaking}으로 번들 사이즈를 눈에 띄게 줄일 수 있게 된 웹팩은 이제 적수가 없는 독보적 번들러가 될 듯합니다.

 

웹 퍼포먼스

• 벤 로버트슨^{Ben Robertson}이 비디오를 레이지 로드하는 방법과 네트워크 연결 상태에 맞는 퀄리티를 자동으로 선택하는 방법을 공유했습니다.
• 세바 자이코프^{Seva Zaikov}는 모든 웹을 단일 페이지 애플리케이션(SPA)으로 개발하는 최근의 트렌드가 과연 유저에게 이로운 것일지 의문을 던지고, SPA가 웹사이트의 속도를 저하시키는 것은 아닌지 본인의 의구심을 데이터로 증명하려 합니다. 이 글의 논점은 리액트와 같은 특정 툴에 대한 불만을 털어놓는 것이 아니라 우리가 새로운 프로젝트의 기술적 구조를 설계하기에 앞서 스스로 물어봐야 할 중요한 질문을 논하는 것입니다.

 

HTML & SVG

• HTML 테이블의 웹 접근성을 확보하기 위해서는 caption 속성이 포함돼야 한다는 것을 알고 있습니까? 스테판 주디스_{Stefan Judis}가 그 방법을 설명합니다.

 

자바스크립트

• 새롭게 등장한 자바스크립트 프레임워크인 스티뮬러스_Stimulus 는 이미 존재하는 기존의 HTML 코드와 완벽히 호환되고, 더 나아가 정적 페이지의 사용자 경험을 향상시켜줍니다.

 

자바스크립트 프레임워크 스티뮬러스는 당신의 HTML을 강화하기 위해 고안됐다. (이미지 출처)

• 데이브 루퍼트^{Dave Rupert}가 자바스크립트로 CSS 커스텀 속성을 컨트롤함으로써 패럴랙스_parallax 효과를 만들 수 있는 간단하면서도 새로운 방법을 공유했습니다.
• 단일 방향의 데이터 플로우를 구축할때 우리는 주로 웹소켓을 사용합니다. 하지만 HTTP 프로토콜의 두 번째 버전인 HTTP/2를 사용할 경우에는 Server-Sent Events를 사용할 수 있습니다. 마틴 차오프_{Martin Chaov}가 이에 대해 훌륭하게 설명했습니다.

 

CSS

• 자바스크립트를 활용해 CSS 기능을 확장할 수 있게끔 해주는 후디니^Houdini에 관한 소식은 수차례 전한 바 있습니다. 이제 크롬 버전 65부터 ‘Houdini의 paint worklet’이라고도 알려져 있는 CSS Paint API가 지원될 예정이며 수르마_Surma가 이것의 구동 방식에 관해 설명했습니다. 기존에는 이미지 파일과 SVG가 반드시 필요했던 CSS의 여러 속성이 이러한 제약에서 벗어나 더 다양한 시도가 가능해질 것으로 보입니다.
• 사라 데이안^{Sarah Dayan}이 SVG 심볼과 CSS 변수를 사용해 컬러풀한 아이콘을 만드는 방법에 관해 설명했습니다.

 

접근성

• 마시 서튼^{Marcy Sutton}의 프리젠테이선 ‘접근성 테스트와 지속적 통합으로 얻게 되는 마음의 안정’의 슬라이드를 통해 어떻게 하면 웹 접근성을 지속해서 테스트할 수 있을지에 대한 힌트를 얻을 수 있습니다.

 

일과 삶

• 존 골드^{Jon Gold}가 ‘배기구 찾기’라는 글을 통해 기술이 우리의 삶에 어떤 영향을 미치는지에 대해 이야기했습니다.
• 잘나가는 테크 기업들은 끊임없이 새로운 인력을 충원하는 것이 일반적입니다. 하지만 베이스캠프_Basecamp는 너무나도 잘나가는 이 시점에 채용을 중단하기로 했고, CTO인 다비드 하이네마이어 한슨^{David Heinemeier Hansson}이 이 결정의 이유를 설명했습니다.
• 만들어 놓은 것을 언제 개선해야 할지, 그리고 언제 처음부터 다시 만들어야 할지 어떻게 결정해야 할까요? 저는 스스로 이 질문을 자주 던져왔습니다. 어떻게 하면 제가 만들었던 것들을 더 좋게 바꿀 수 있을지에 대한 나름의 결론을 글로 정리했습니다.

 

그 외 소식

• 스테픈 일라디^{Stephen Ilardi}가 개인화된 기술이 우리를 우울하게 만드는 이유에 대해 이야기했습니다.
• 마이크 기포드^{Mike Gifford}가 사무실의 쓰레기를 줄이는 방법에 대한 그의 생각을 공유했습니다. 흔히 다루는 주제는 아니지만 현재 상황을 개선하고 미래의 환경을 아름답게 바꾸는 것은 생각보다 간단할 수 있음을 보여줍니다.

 

마지막으로 슬랙 알림에 대처하는 방법과 단어의 첫 글자만 따서 만드는 두문자어의 사용이 왜 해로운지에 대해 쓴 제 글을 공유합니다. 이와 관련해 의견이나 질문이 있다면 언제든 댓글이나 트위터로 알려주세요.