[2018년 7월 웹 개발 동향] - 실용적 웹 개발, 더 높은 윤리 의식

웹은 계속해서 저를 놀라게 합니다. 웹에서 발생하는 다양하고 새로운 변화에 특정한 패턴이 존재한다고 하더라도 그 패턴을 찾아내기란 어렵습니다. 하지만 기능이 새롭게 추가되기도 하고, 중요도가 떨어짐에 따라 배제되기도 하는 변화와, 사용자를 악의적 공격으로부터 보호하기 위한 웹 브라우저의 지속적인 발전을 지켜보는 것은 멋진 일입니다. 브라우저 보안 기능이 개발자를 위한 기능만큼이나 이목을 끄는 것은 흥미로운 현상입니다. 이는 개인정보 보호와 보안의 중요성을 강조하며 한편으로는 과거 웹이 얼마나 불안정하고 취약했는지를 보여줍니다.

무엇보다도 이 모든 변화가 알려주는 핵심은 우리에게 주어진 것을 충실히 활용해야 한다는 점입니다. 매번 자체적인 해결책을 만들기보다 이미 존재하는 시스템을 사용하는 것이 훨씬 나은 선택인 경우가 많습니다. 기존 시스템을 사용하는 것은 훨씬 안전할 뿐 아니라 네이티브 DOM 객체를 기반으로 커스텀 요소를 확장하는 것이 커스텀 객체를 아예 처음부터 개발하는 것보다 더 많은 브라우저를 지원할 수 있으면서도 수고를 덜 수 있습니다. 우리가 자체적으로 사용할 SSL을 개발할지 아니면 이미 존재하는 SSL 소프트웨어를 사용할지를 고민한다면, 어째서 a나 button 객체의 기본 작동을 조정해서 사용하지 않고 전혀 무관한 객체를 기반으로 클릭 가능한 객체를 개발하는 걸까요? 그리고 웹 브라우저가 이미 리소스 호스트 검증을 위한 API를 제공함에도 불구하고 우리는 왜 자체적으로 개발할까요? 이번 달 소식은 이런 주제를 염두에 두고 선정되었습니다.

제 머리를 떠나지 않는 또 다른 한 가지는 안드레아 지아마르키^{Andrea Giammarchi}가 쓴 글 ‘과대 확장 없는 웹’인데요, 이 글은 개발자들이 최신 ECMA 스크립트에 부합한 자바스크립트를 작성하기 위해 얼마나 생각 없이 바벨^Babel을 사용하는지를 지적합니다. 하지만 우리는 최신 브라우저에서 최신 코드를 구동하기 위해 전부 트랜스파일링^transpiling하는 것이 결코 효율적인 방식은 아니라는 점을 깨닫지 못합니다. 그런 면에서 안드레아가 이와 같은 상황과 우리가 만드는 웹앱의 퍼포먼스를 향상시킬 수 있는 몇 가지 아이디어를 제안했다는 점이 반갑습니다. 모든 브라우저에 대응하기 위한 코드 트랜스파일링을 하지 않음으로써 번들 사이즈를 3분의 1로 줄일 수 있다면 정말 멋지지 않을까요?

 

업데이트 소식

• 사이트 격리^{Site Isolation} 기능은 신뢰할 수 없는 웹사이트가 다른 웹사이트상의 사용자 계정에 접근하거나 정보를 가로채는 것을 어렵게 만듭니다. 크롬 버전 67부터 이 기능이 포함되었습니다. 크로스도메인 간 접근 금지^{Cross-Origin Read Blocking} 기능은 더 이상 image 태그를 통해 JSON 파일을 불러오는 방식을 허용하지 않습니다. 이뿐 아니라 이러한 변화는 풀페이지 레이아웃^{full-page layout}의 동기화를 장담할 수 없다는 것을 의미합니다. 혹시 여러분이 자바스크립트를 통해 객체의 계산된 크기를 읽어오거나 unload 이벤트 리스너를 사용하고 있다면 새롭게 추가된 사이트 격리 기능의 영향을 피할 수 없을 것입니다. 따라서 이에 관해 미리 확인하고 여러분의 사이트가 문제없이 구동하는지 점검하세요.
• 이제 우리는 개발자가 특정 리소스 로드를 호스트 이름별로 제한할 수 있는 기능인 콘텐츠 보안 정책에 대해 어느 정도 알게 되었습니다. 하지만 브라우저 제작사들은 ‘기능 정책^{Feature Policy}’이라는 새로운 것을 고안해냈습니다. 이를 통해 웹 개발자들은 브라우저에서 특정 API와 웹 기능의 동작을 선택적으로 활성화/비활성화하거나 수정할 수 있습니다. 흡사 CSP와 비슷해 보이지만 보안성이 아닌 기능을 조작한다는 점에서 차이가 있습니다. 에릭 바이델만^{Eric Bidelman}이 기능 정책의 모든 것을 설명하는 소개서를 썼습니다.
• 브레이브 브라우저 개발팀이 사용자 개인정보를 보호하기 위해 토르 네트워크^{Tor Network}를 통해 웹에 연결할 수 있는 탭 기능을 선보였습니다.

 

일반 소식

• 안톤 스텐^{Anton Sten}이 ’기술 분야의 가치는 무너졌는가?’라는 질문을 던지는 글을 썼습니다. 이 글에서 그는 애플, 마이크로소프트, 구글, 아마존뿐 아니라 중소기업들의 마케팅 전략을 분석했습니다. 그러한 분석을 토대로 우리는 어떻게 더 의미 있는 일을 할 것이며, 단지 마케팅 수단이 아닌 우리 가치를 존중할 것인지에 대해 이야기했습니다.
• 기술 분야가 세상 모든 것을 디지털로 전환하고 있기 때문에 많은 사람이 우리 분야에 더 높은 윤리 의식을 요구합니다. 대부분의 경우 더 높은 윤리 의식이란 상당히 막연한 목표입니다. 디지털의 한 분야인 프론트엔드 개발에 이를 적용해보도록 하겠습니다. 프론트엔드 개발자로서 우리는 어떻게 더 윤리적으로 일할 수 있으며, 그러기 위해 무엇을 할 수 있을까요? 히데 드 브리스^{Hidde de Vries}가 이 주제에 관한 글을 공유했습니다.

 

보안

• 티켓마스터^Ticketmaster의 고객 데이터가 유출된 것으로 파악됐습니다. 유출 원인은 외부 스크립트를 포함하기 위한 한 줄의 코드 때문인 것으로 드러났습니다.

 

UI/UX

• 유진 이샤누^{Eugen Eşanu}가 우리가 아직도 범하는 10가지의 작은 디자인 실수에 대해 이야기했습니다. 그리고 어떻게 해야 이런 실수를 하지 않고 더 사용자 친화적인 디자인을 할 수 있는지를 설명했습니다.

프라이버시

• 구글이 외부 앱 개발자로 하여금 앱 인증 과정에서 권한을 부여함으로써 사용자의 지메일^Gmail을 읽을 수 있도록 하는지에 관한 흥미로운 기사입니다. 문제는 이를 쉽게 예방할 방법이 없다는 것입니다. 만약 지메일을 회사 업무에 사용한다면 보안 정책과 유럽 개인정보보호법(GDPR)에 관련된 문제를 야기할 수 있습니다.

 

웹 퍼포먼스

• 맥스 버크^{Max Böck}가 네트워크 인포메이션 API를 사용해서 실제 기기의 통신 속도에 대응하는 컴포넌트를 개발하는 방법을 공유했습니다. 현재로서는 크롬과 삼성 인터넷 브라우저에서만 구현할 수 있지만 시도할 만한 가치가 있습니다. 해당 브라우저를 사용하는 사용자에게는 도움이 될 테니까요.
• 때때로 웹 퍼포먼스를 향상하기 위해 CSS 선택자 최적화의 중요성을 언급하는 글을 찾아볼 수 있습니다. 이 내용은 수년 전 연구 결과를 기반으로 한 것인데, 이반 추리치^{Ivan Čurić}가 같은 주제로 다시 연구를 진행했습니다. 그리고 CSS 선택자 최적화가 퍼포먼스 향상과 무관하다는 사실을 밝혀냈습니다.

 

접근성

• 마이크로소프트 개발팀이 접근성에 관한 실용적인 내용을 담고 있는 유튜브 목록을 공유했습니다. 프리젠테이션을 최적화하는 방법, 포용적인 언어, 웹사이트에서 ‘메뉴 건너뛰기^{Skip navigation}’ 기능을 제대로 구현하는 방법 등이 목록에 있습니다.
• 사라 노박^{Sara Novak}이 색맹 체험을 통해 세상을 다르게 보는 사람들을 이해하고 공감하게 된 내용을 공유했습니다.
• 파이어폭스 브러우저 개발자 도구에 접근성 검사^{Accessibility Inspector} 모드가 추가되었습니다. 어떻게 활성화하고 사용할 수 있는지 이 링크에서 확인할 수 있습니다.

 

 

자바스크립트

• 레온 레빌^{Leon Revil}이 웹 컴포넌트^{Web Components}를 통해 기존의 네이티브 DOM을 확장하는 방법을 공유했습니다. 사용자 설정 요소^{Custom elements}를 제작할 때 기존 템플릿을 사용하여 시간을 크게 절약할 수 있을 뿐 아니라, 모든 최적화와 기본값(시맨틱, 접근성, 브라우저 기능)을 무료로 사용할 수 있고 여전히 이를 기반으로 새로운 동작을 제작할 수 있습니다. 최소한 우리가 사용자 설정 요소^{Custom Elements}를 사용할 수 있다면 해당되는 이야기입니다.
• 제라도 로드리게즈^{Gerardo Rodriguez}는 우리가 어떻게 서비스 워커^{Service Workers}와 페치^Fetch API를 사용할 때 얼마나 쉽게 웹사이트 성능 최적화에 실패할 수 있는지, 그리고 어떻게 브라우저에서 할당량 예외^{quota exception}로 이어질 수 있는지를 보여줬습니다. 다행히 그 이유를 알아냈고 적절한 CORS 헤더를 설정함으로써 단일 캐시의 불투명한 반응 문제를 해결하고 이 문제를 피할 수 있는 방법을 공유했습니다.
• 파일폰드^Filepond는 파일 업로드를 위한 아주 좋은 오픈소스 자바스크립트 라이브러리입니다. 릭 셰닌크^{Rik Schennink}가 파일폰드 개발 과정에서 직면했던 과제에 대해 이야기했습니다.
• 안드레아 기아마치^{Andrea Giammarchi}가 바벨^Babel을 사용한 자바스크립트 번들링 문제점과 코드를 트랜스파일링하는 것이 더 이상 최고의 해결책이 아닌 이유에 관해 이야기했습니다. 대신 번들의 크기를 줄이고 성능을 향상시키기 위해 브라우저별 지원 여부에 따라 각각 다른 번들을 제공하는 방법을 생각해봐야 합니다.
• 저스틴 퓰러^{Jusitn Fuller}가 곧 추가될 자바스크립트의 세 가지 훌륭한 기능을 공유했습니다. 이것은 선택 체인^{Optional chaining}, 널리시 통합^{Nullish coalescing}, 파이프라인 연산자^{Pipeline operator}를 통해 더 이해하기 쉬운 코드를 작성하도록 도와줄 것입니다.
• 애디 오스마니^{Addy Osmani}와 마시아스 바이넨스^{Mathias Bynens}가 오늘날 웹에서 자바스크립트 모듈을 사용하는 방법에 관한 입문서를 작성했습니다.

 

CSS

• 인터넷 익스플로러에서 CSS 그리드 자동 배치와 갭을 흉내 낼 수 있는 방법에 관한 시리즈가 있어 소개합니다.
• CSS 그리드는 좋지만 인터넷 익스플로러 11에서 지원하지 않기 때문에 사용할 수 없다는 이야기를 종종 듣곤 합니다. 하지만 정확한 정보가 아닙니다. 인터넷 익스플로러 11은 CSS 그리드 이전 버전을 지원하고 있고, 자동 프리픽서^autoprefixer를 통해 쉽게 트랜스파일할 수 있기 때문입니다. 다니엘 토논^{Daniel Tonon}이 CSS 그리드의 차이점과 기능별 가용 여부를 설명하고, 추가로 더 많은 팁을 공유했습니다.
• 많은 사람에게 CSS 그리드는 여전히 새롭습니다. 그리드 기반 레이아웃을 제작할 때 CSS 그리드를 사용해서 다양한 문제를 해결할 수 있습니다. 하지만 현재 버전에서는 아직까지 구현할 수 없는 것들이 몇 가지 있습니다. CSS 그리드 레벨2에서는 서브 그리드^Sub-grids가 지원될 예정인데 이에 대해 레이철 앤드루^{Rachel Andrew}가 서브 그리드 사용 예에 대해 설명했습니다.
• ‘자바스크립트 내 CSS^CSS-in-JS’는 좋은 것일까요 나쁜 것일까요? 우리는 분명한 승자가 없을 때 소모적인 논쟁을 벌입니다. 이 글은 이러한 질문과 더불어 진보에 대해 어떻게 인식하고 맥락 안에서 상황을 바라봄으로써 어떻게 더 발전할 수 있는지에 관한 글입니다.

 

일과 삶

• 인내심과 지속 가능한 무언가를 만들기 위한 노력이 비즈니스에서 더 주목받아야 하는 이유는 뭘까요. 다른 글을 읽으면서 떠오른 생각인데 많은 사람이 그 배경이 된 제 생각에 공감하는 것 같습니다.
• 이단 마콧^{Ethan Marcotte}은 자신이 고객을 선택하는 방법과 윤리적으로 지원할 수 있는 고객만을 선택하는 것이 얼마나 중요한지 이야기합니다. 그러나 최근 마이크로소프트 법률 기관과의 협력 사례를 통해 알 수 있듯이 이것이 얼마나 어려운 일인지도 보여줍니다.