요즘은 장기적인 계획을 세우기가 정말 어렵습니다. 새로 나온 기기는 짧게는 수개월, 길어봐야 수년 만에 구식이 됩니다. 사람들은 새로 산 물건을 며칠 혹은 몇 주 만에 내다버리는 시대니까요. 그러다 보니 ‘노력’이라는 단어가 새로운 의미를 얻게 된 것 같습니다.

최근 야트나^Yatnah(역주: ‘노력’이라는 의미의 산스크리트어)에 관한 에세이를 하나 읽었습니다. 지난 몇 주간은 야외에서 많은 시간을 보내며 자그마한 땅에 채소를 키우기도 했고요. 과수 접목 기술을 배우려고 워크숍에 참석하기도 했습니다. 나무를 잘라 보면 빠르고 단발적인 우리 삶의 방식이 자연과 얼마나 다른지 새삼 깨닫게 됩니다. 제가 접목한 나무는 앞으로 수십 년을 자랄 것입니다. 40년 된 나무를 자르면 비슷한 높이까지 자라는 데 또 40년이 걸리겠지요.

저는 더 오래 지속하는 결과물을 만들기 위해 노력하는 모습을 좋아합니다. 수십 년을 가는 소프트웨어 말이죠. 그런 소프트웨어를 만들기 위해서는 배움의 노력을 멈추면 안 됩니다. 노력에 관한 글 하나 소개하고 4월 웹 개발 소식을 전하겠습니다.

“현대 사회에는 노력을 몇 마디 긍정 사고로 대신하고픈 유혹이 분명 존재한다. 하지만 결국 훈련을 대체할 수 있는 건 아무것도 없다.” – 키노 맥그레고르^{Kino Macgregor}

 

업데이트 소식 

• 사파리 테크놀로지 프리뷰 버전 52부터 어도비 플래시 플러그인을 제외한 모든 NPAPI 플러그인 지원이 중단됩니다. 그리고 HTTP 요청이 서버로 전송되기 전에 연결을 설정할 수 있는 preconnect 링크 헤더가 지원됩니다.

• 구글 크롬 버전 66 베타부터 CSS형 객체 모델, 비동기 클립보드 API, 오디오 워클렛을 지원합니다. CSS 미디어쿼리에서는 calc(), min(), max() 속성을 사용할 수 있게 됩니다. 또한 select와 textarea 필드에 autocomplete 속성을 사용할 수 있고, 자바스크립트 오류 처리에 사용되는 try문 catch 절을 매개변수 없이 사용할 수 있게 됩니다.

• iOS 버전3이 출시되었습니다. 이미 예고한 대로 iOS도 프로그레시브 웹앱(PWA)을 지원하기 시작했습니다. 맥시밀리아노 퍼트맨^{Maximiliano Firtman}이 이것의 의미와 현시점에서 무엇이 가능하고 무엇이 불가능한지 정리했습니다.

• 사파리 버전3이 출시되었습니다. 이번에 포함된 새로운 웹킷^WebKit 기능 요약을 이곳에서 확인할 수 있습니다.

 

일반 소식 

• 애닐 대쉬^{Anil Dash}가 웹이 탄생했을 당시의 본래 의도를 되새기고 지금의 웹이 그때와 어떻게 다른지 비교했습니다. “수백만 사람이 오늘날 가장 큰 규모의 웹사이트에 대한 신뢰를 잃고 있는 시점에서 웹의 본래 목적은 수없이 많은 작은 웹사이트의 조합이었다는 점을 되새겨볼 필요가 있습니다. 그러한 목적을 달성할 수 있지만 현실에서는 경시되고 있는 기술을 정리했습니다.”

• 모튼 랜드 헨드릭슨^{Morten Rand-Hendriksen}이 웹 디자인 윤리란 무엇인지 이야기합니다. 그리고 우리가 해결책을 제시하고, 새로운 디자인이나 기능을 만들 때 스스로 어떤 질문을 해야 하는지 이야기했습니다. 특별히 디자이너가 ‘스마트’한 것을 만들고 있다고 생각할 때, 그 ‘스마트’한 것이 정말로 사람들에게 도움이 되는지 스스로 질문하는 것이 중요합니다.

• 페이스북 캠브리지 애널리티카 스캔들에 관해 페이스북 권한 설정 방식의 기술 결함을 지적하는 비판의 목소리가 높아지고 있습니다. 하지만 문제의 핵심은 페이스북이라는 기업이 어떤 방식으로 디자인되었고, 어느 정도의 윤리 기준을 갖고 있는가에 있습니다. 이런 일이 다시 발생하지 않으려면 우리가 원하는 서비스를 디자인하는 것이 우리의 몫이겠죠.

• 브렌단 도스^{Brendan Dawes}가 URL 시스템을 걸작이라고 생각하는 이유와 URL 그 자체만으로도 사용자 경험에 속한다는 견해를 공유했습니다.

• 찰리 오웬^{Charlie Owen}은 ‘개발자 여러분, 웹의 주인공은 여러분이 아닙니다‘ 강연에서 개발자가 단지 개발 과정뿐 아니라 사용자에게 무엇이 도움이 되며, 어떻게 그것을 구현할 수 있는지에 대해 고민해야 하는 이유를 잘 정리한 요약본입니다.

 

UI/UX

• 칸 카부스턱^{B. Kaan Kavuştuk}이 아무리 오랜 경력자이더라도 한 번의 시도로 완벽한 디자인을 하거나 코드를 짤 수 없는 이유를 설명했습니다. 또한 작지만 지속적인 개선이야말로 완벽을 향해 나아갈 수 있는 방법임을 강조했습니다.

• 트리느 팔베^{Trine Falbe}가 윤리 디자인에 관한 실용적 입문 안내서를 공유했습니다. 이 글은 우리가 비즈니스를 하거나 제품을 만들 때 생각해야 하는 것과 대안에 대해 이야기합니다. 여러분이 사업가인지, 개발자인지, 디자이너인지, 영업 담당인지는 중요하지 않습니다. 윤리 디자인의 핵심은 사용자를 위한 서비스를 만들고, 실제적이고 지속적인 신뢰 가능한 기반을 만드는 데 있습니다.

• 조쉬 러브조이^{Josh Lovejoy}가 포용적 기술 해결책^{Inclusive tech solutions}을 개발하며 배운 것과 포용적 기술 구현이 단지 선한 의지만으로는 가능하지 않은 이유를 설명했습니다. 이 글은 어째서 인간의 판단이 편견에 기반을 둘 때가 많은지 이야기합니다. 그로 인해서 다양한 사람을 동등하게 대우하는 알고리즘을 설계하고 개발하기 쉽지 않은 이유도 깊이 있게 다룹니다.

• HSB(색상, 채도, 명도) 색 체계는 특별히 새로운 것은 아니지만 여전히 많은 사람이 HSB의 장점을 이해하지 못합니다. 에릭 D 케네디^{Erik D. Kennedy}가 HSB 색 체계 기본 원리와 이점에 대해 알기 쉽게 설명했습니다.

• 최근 포용적 디자인^{Inclusive design}에 관한 논의가 점점 많아지고 있습니다. 그러나 대부분 접근성이나 기술적 결정이라는 큰 주제 안에서만 다루고 있습니다. 로버트 델 프라도^{Robert del Prado}는 포용적 디자인 사고가 얼마나 중요한지, 그리고 포용적 디자인이 특정 부류나 장애를 가진 사람보다 일반 사용자에게 더 많이 해당하는 이유에 대해 설명했습니다. 포용적 디자인은 사용자가 어떤 사람인지, 어디에 살고 있는지, 경제적 상황이 어떠한지와 무관하게 사람을 한데 모을 수 있습니다. 생각해보면 모든 제품의 목적은 가능한 많은 사람으로부터 사용되는 것 아닐까요? 이 주제는 아마 마케터와 함께 논의해야 할 것 같습니다.

• 안톤 로브치코프^{Anton Lovchikov}가 디자인 구성요소에서 시각적 보정을 개선하는 방법에 대해 공유했습니다. 아주 작은 변화가 어떻게 커다란 차이를 만들 수 있는지 보여주는 흥미로운 주제입니다.

 

도구

• 브라이언 슈래더^{Brian Schrader}가 깃^Git에서 아이디어를 빠르게 테스트할 수 있지만 잘 알려지지 않은 기능인 깃 노트^{Git Notes}를 소개했습니다. 깃 노트를 사용해서 객체를 변경하거나 커밋할 필요 없이 객체에 노트를 추가하고 제거하거나 읽을 수 있습니다.

• 대부분의 프로젝트에서 저는 걸프^Gulp나 다이렉트 웹팩 태스크^{Direct Webpack tasks}보다 npm 스크립트 사용을 선호합니다. 마이클 쿤넬^{Michael Kühnel}이 이와 관련하여 유용한 npm 스크립트 팁 몇 가지를 공유했는데요, 커맨드라인 인터페이스(CLI)에서 매개변수 옵션을 허용하는 방법과 태스크에서 에러가 발생 시 알림을 받을 수 있는 방법 등이 포함되어 있습니다.

• 안톤 스텐^{Anton Sten}이 새로운 도구가 언제나 생산적이지는 않은 이유에 관해 설명했습니다. 우리는 스케치, 피그마, 어도비 XD, 인비전 스튜디오 등 계속해서 등장하는 새로운 디자인 도구들을 좋아하지요. 이런 도구들이 일반적인 문제를 해결하고 작업을 더 쉽게 도와주는 부분이 있지만, 생산성을 증진시킬 수 있는 건 해결하고자 하는 문제에 적합한 도구이지, 새로 나온 도구가 아닙니다. 여러분이 목업 디자인을 만들려고 하고, 가장 익숙한 도구가 포토샵이라면 그것을 사용하지 않을 마땅한 이유가 있을까요?

• 클라우드플레어^Cloudflare가 더 빠른 DNS서비스를 새롭게 런칭했습니다. 마침내 구글 DNS 서버의 더 나은 대안이 나온 것인데요, 1.1.1.1의 IP주소로 접속할 수 있습니다. 이 새로운 DNS는 현존하는 가장 빠른 DNS이며, 아마 보안성도 가장 높을 것 같습니다. 클라우드플레어는 서비스를 암호화하기 위해 많은 노력을 했고 모질라^Mozilla와 협업하여 DNS를 HTTPS 상에서 구동할 수 있도록 하여 그동안 모든 브라우징 데이터가 DNS 제공 기관에 유출되던 문제를 해결했습니다.

• iOS의 머신러닝에 대한 이야기는 많이 들었는데요, 머신러닝이 클라우드로 아무것도 전송하지 않고도 기기 내에서 자체적으로 구동 가능하다는 점이 아주 흥미롭지만, 사실 아직 이걸로 어떤 앱을 만들 수 있을지에 대한 예시를 찾지 못했었습니다. 다행히도 마누 링크^{Manu Rink}가 초보자를 위한 iOS 머신러닝이라는 글을 통해 이를 설명해 주었네요.

• 깃을 GUI로 사용하는 것을 선호하는 분들에게 좋은 소식이 있습니다. 타워^Tower가 새롭게 공개한 베타 버전에는 풀 리퀘스트^{pull request}, 인터랙티브 리베이스 워크플로우^{Interactive rebase workflows}, 빠른 실행^{Quick actions}, 레퍼런스 로그^reflog, 검색 기능들이 추가되었습니다. 작업속도를 크게 향상시켜줄 수 있는 훌륭한 업데이트 인것 같네요. 심지어 저처럼 커맨드라인으로 깃을 사용하는 것을 선호하는 사람에게조차 고려해볼만한 옵션인것 같네요.

 

 

 

보안

• HTTP 전송 계층 보안 강화 프로토콜^{Strict Transport Security, HSTS} 프리로딩^preloading은 호스트명^Hostname에 안전히 접속할 수 있는 최선의 방법으로 오랫동안 여겨졌습니다. 하지만 일부 광고주들이 HSTS를 통해 사용자를 추적할 수 있는 방법을 발견하고 HSTS를 이른바 ‘슈퍼 쿠키’라 불리는 영구적 사이트 간 식별자로 사용했습니다. 웹킷^WebKit 개발자들은 이에 대응하여 사용자 프라이버시를 보호하기 위해 HSTS의 신뢰성을 호스트명 범위 내로 제한하고 차단된 도메인에 대한 하위 자원 요청을 위한 HSTS 상태를 무시하도록 변경했습니다.

• 페이저듀티^PagerDuty가 내부 보안 교육용 자료의 오픈소스 버전을 공개했습니다. 일반적인 보안 문제와 전략에 대한 흥미롭고 이해하기 쉬운 설명으로 가득합니다. 기술적 지식이 없는 사람도 이해할 수 있는 자료이기 때문에 유용할 것 같습니다.

• 크리스토프 럼펠^{Christoph Rumpel}이 콘텐츠 보안 정책^{Content Security Policy, CSP}을 라라벨^Laravel의 응답 캐싱^{Response Caching} 패키지와 함께 사용할 수 있는 방법에 대해 설명했습니다.

• 아르곤2^Argon2는 해싱^Hashing 알고리즘(예: 비밀번호 사용)을 위한 현존하는 최선의 도구입니다. 하지만 아르곤2를 사용하는 개발자가 대비해야 할 몇 가지 문제점이 있습니다. 일례로 아르곤2를 사용해 스스로에게 DOS 공격을 가할 수도 있죠. 이를 방지하기 위해 쿼리 제한을 설정하는 것이 중요합니다.

• 제임스 피셔^{James Fisher}는 넷플릭스의 사례에서 지메일^Gmail 사용자를 상대로 사기를 치는 것이 어떻게 가능한지에 관한 흥미로운 사례를 공유했습니다.

 

웹 퍼포먼스

• 압축 이미지를 사용하는 것이 아직도 좋은 방식인가에 대한 토론이 이번 주에 있었습니다. 팀 카들렉^{Tim Kadlec}은 이를 기회로 압축 이미지에 대해 다시 조사했습니다. 그 결과로 앞으로 더는 압축 이미지 기술을 사용하지 말아야 한다는 결론을 내렸습니다. 왜냐하면 이 방식은 메모리를 과도하게 사용하기 때문입니다. 이에 대한 대안으로 <picture> 또는 srcset, sizes 같은 속성을 사용하자고 제안했습니다.

• 에릭 포티스^{Eric Portis}가 이미지 태그의 w 설명자와 sizes 속성의 원리에 대해 설명했습니다. 다소 기술적이지만 새로운 반응형 이미지 속성의 작동 방식을 이해할 수 있는 흥미로운 글입니다.

• 팀 옥슬리^{Tim Oxley}가 프로그래밍할 때 되도록 else문 사용을 피하고 최대한 빠르게 return 값을 반환하도록 하는 이유를 설명했습니다. 저 역시 신입 개발자 시절에는 이런 방식으로 코딩하다가 어느 시점부터 신경을 쓰지 못했지만 최근에는 다시 이 방식으로 코딩을 하고 있습니다. 복잡도를 줄이고 함수 내에서 더 단순한 로직을 짤 수 있는 것이 이 방식의 가장 큰 이점이라고 생각합니다.

• 제레미 와그너^{Jeremy Wagner}가 이미지와 비디오를 레이지로드^{Lazy loading}하는 방식의 가장 좋은 사례를 공유했습니다. 이 방법이 결코 손쉬운 해결책은 아니지만 이 글을 통해 최신 브라우저 기술로 최적의 경험과 성능을 구축하는 방법을 엿볼 수 있습니다.

 

접근성

• 마시 수튼^{Marcy Sutton}이 액스^Axe 버전 0의 새로운 기능을 설명했습니다. 이번 버전부터 자동화 테스트를 구동할 수 있는 섀도 돔^{Shadow DOM}이 지원됩니다.

• 패트릭 H 로크^{Patrick H. Laucke}가 새로운 CSS 가상 선택자^{Pseudo-selector}인 :focus-visible에 대해 설명합니다. 이를 지원하지 않는 브라우저에 대응하기 위한 작성 방법도 함께 공유합니다.

• 마르코 제헤^{Marco Zehe}가 파이어폭스 브라우저의 새로운 개발자 도구인 접근성 인스펙터^{Accessibility Inspector}를 소개했습니다. 접근성 이슈를 검사하는 것이 이전보다 훨씬 편해질 듯합니다. 아주 좋은 소식입니다.

 

CSS

• 앰버 윌슨^{Amber Wilson}이 복잡한 프로젝트에서 CSS 스타일을 작성한 경험에서 비롯한 통찰을 공유했습니다. 그녀는 “CSS가 쉽다고 아무도 말하지 않았다”라고 분명히 이야기합니다. 또한 개발자들이 불편한 환경을 마주함으로써 관련 지식을 넓혀야 하는 중요성을 강조합니다.

• 아나 투도르^{Ana Tudor}는 뛰어난 CSS 기술로 유명합니다. 그녀가 이번에는 CSS에서 둥글게 파인 모서리 효과를 내는 방법에 관해 설명했습니다.

 

 

 

자바스크립트

• 웹킷의 클립보드 API가 업그레이드 되었습니다. 그리고 웹킷의 개발팀이 클립보드 API가 작동하는 방식과 사파리 브라우저가 클립보드 데이터(예: 이미지)를 다룰 때 자주 발생하는 문제를 처리하는 방식에 대해 설명했습니다.

• 프론트엔드에서만 보관되는 키 값 저장소^{Key value stores}가 필요하다면 IDB-Keyval은 인덱스DB^IndexedDB와 로컬스토리지^localStorage와 함께 사용할 수 있는 가볍고 훌륭한 라이브러리입니다.

• 데이터를 손그림이나 스케치 느낌의 그래픽으로 표현하고 싶은 적이 있었다면 러프JS^Rough.js는 정확히 그 목적을 위한 라이브러리입니다. 더 좋은 성능과 적은 데이터 사용을 위해 캔버스^Canvas를 주로 사용하지만 SVG 패스^{SVG Paths}로도 구현할 수 있습니다.

• 드래그 앤 드롭 방식의 재정렬 모듈이 필요하다면 부드럽게 구동되고 사용이 쉬운 dragon-drop이 좋은 해결책입니다.

• 오랜 시간 동안 CSS에서는 이미 계산된 값만을 사용할 수 있었습니다. 그 방법이 유연하지 못하고 사용하기 불편했지만 말이죠. 하지만 이제 CSS는 제대로 된 객체 기반 API인 CSS형 객체 모델^{CSS Typed Object Model}을 통해 자바스크립트에서 CSS의 값을 제어할 수 있습니다. 현재로서는 곧 출시될 크롬 브라우저 버전 66을 통해서만 사용할 수 있지만 빠른 시일 내에 꼭 사용해보고 싶은 매력적인 기능에는 틀림없습니다.

• 리액트JS^React.js의 개발 문서에 UI 접근성을 확보하기 위해 구조적으로 포커스 상태^{focus states}를 제어하는 방법에 대한 내용이 추가되었습니다.

• 제임스 밀너^{James Milner}가 중단 가능 페치^{Abortable Fetch}를 사용해서 요청을 취소할 수 있는 방법에 대해 공유했습니다.

• 웹 푸시 알림^{Web Push Notification}에 관한 글은 이미 많지만 올렉시 루덴코^{Oleksii Rudenko}가 새롭게 쓴 웹 푸시 알림 시작 가이드는 기본 원리를 잘 설명하는 훌륭한 입문용 글입니다.

• 지난 수년간 자바스크립트 플랫폼에는 정말 많은 새로운 기능이 추가됐습니다. 라자 라오 DV^{Raja Rao DV}가 ‘에크마스크립트^ECMAScript 2016, 2017, 2018에 새롭게 추가된 기능’을 총정리했습니다.

 

일과 삶

• 제임스 베넷^{James Bennet}이 단순한 실수를 찾아내는 데 걸린 오랜 시간에 대한 경험을 통해 이런 상황이 드문 것이 아님을 알리고자 했습니다. 실수는 저나 여러분, 또는 제임스만 저지르는 것이 아닙니다. 우리는 모두 실수를 하고 그 순간만큼은 정말 실수가 부끄럽죠. 그러나 사실 실수에 낙담할 필요는 없습니다.

• 아담 블랜차드^{Adam Blanchard}는 “사람은 기계다. 그래서 우리도 수리가 필요하다”고 이야기합니다. 그는 우리가 스스로를 돌봐야 하고, 또 우리를 돌봐줄 누군가가 필요한 이유를 엔지니어가 이해할 수 있도록 기계와 사람을 비교합니다. 피플 엔지니어^{People Engineer}가 하는 일과 기업이 그런 역할을 담당하는 인력을 채용하는 것이 팀 건강을 위해 얼마나 중요한지를 설명하는 통찰력 있는 글입니다.

• 레베카 다운스^{Rebecca Downes}가 원격근무 팀에 대한 박사 논문을 쓰며 얻은 통찰을 공유했습니다. 원격근무 팀에 적합한 환경과 부적합한 환경에 대한 설명도 포함되어 있습니다.

 

그 외 소식

• 페이스북이나 구글처럼 중앙 집중화되어 있는 서비스의 문제점에 대해 알고 나니 탈중앙화가 독립적 웹의 구원자로 보입니다. 하지만 기술과 관련된 인도주의 문제를 해결하려는 시도 없이는 아무것도 변하지 않을 것이 분명합니다.

• 자율주행 차량의 첫 번째 사망 사고에 관한 기사를 접했을 것입니다. 자율주행 기술이 얼마나 신뢰하기 어려운 것인지를 보여주는 슬픈 이정표가 아닐까 싶네요. 자율주행 시스템에 의존할 수 있는 날은 아직도 먼 것 같습니다.

• 10년 전 스마트 기기들은 우리가 생각하고 교류하는 방법을 바꿀 것으로 장담했죠. 그리고 그 약속은 지켜졌습니다. 하지만 스마트 기기가 우리를 더 스마트하게 만들지는 않았습니다. 에릭 앤드루지^{Eric Andrew-Gee}가 디지털 방해^{Digital distraction}가 우리 정신을 망가뜨린다는 과학적 근거를 공유했습니다.

• 프레드 피어스^{Fre Pearce}가 세계 최대 데이터 센터를 어떻게 더 효율적으로 만들 수 있는지에 대한 글을 썼습니다. 이것이 왜 중요한 목표인지 공감할 수 없다면 이러한 데이터 센터가 전 세계 CO² 배출량의 3%를 차지한다는 사실을 알아야 합니다. 항공 산업과 맞먹는 규모라는 사실을요.

• “폐쇄된 석탄화력발전소가 가상화폐 발굴에 필요한 전기를 공급하기 위해 재가동한다”는 소식에는 뭐라 덧붙일 말이 없네요.