Skip to content

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

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

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

 

보안

 

UI/UX

사용자는 필요 이상의 것을 읽을 시간이 없지만, 디자이너는 여전히 많은 텍스트를 사용하는 경향이 있다. 왜냐하면 디자이너는 사용자가 그 내용을 필요로 한다고 생각하기 때문이다. (이미지 출처)

프라이버시

 

웹 퍼포먼스

 

접근성

 

정보를 표시할 때 색에만 의존하면 않되는 중요한 이유를 사라 노박이 설명했습니다. 기호나 오류 메시지가 사용자에게 훨씬 더 유용할 수 있습니다(그림은 색상으로 상태를 표시하는 폼Form을 보여주고 있습니다. 왼쪽은 일반적인 시각을 가진 사람이 인지하는 폼의 형태이고, 오른쪽은 녹색약자deuteranomalous가 인지하는 폼의 형태입니다). (이미지 출처)

 

자바스크립트

 

CSS

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

 

일과 삶

 

도서 소개

레이철 앤드루의 신간 『새로운 CSS 레이아웃』
그리드를 사용한 레이아웃을 기존 레이아웃과 비교해서 살펴볼 수 있습니다. 예제를 통해 그리드 레이아웃이 어떻게 활용되는지 확인해보세요. 레이아웃만을 다룬 ‘그리드 레이아웃’ 전문서 『새로운 CSS 레이아웃』입니다. 새로운 웹 디자인 시대 흐름에 뒤처지지 않으려면 반드시 읽어야 할 책입니다!!
저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹 디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다. books@webactually.com


맨위로