Skip to content

[2018년 9월 웹 개발 동향] 프로젝트 기획할 때 어려운 점, PHP 7.0 곧 출시, 접근성의 진정한 의미

자바스크립트를 이산화탄소에 비유하는 것은 흥미로우면서도 설득력이 있습니다. 현재 웹이 처한 상황에 많은 통찰력이 있는 구글 크롬팀 소속 알렉스 러셀Alex Russel은 자바스크립트를 사용함에 있어, 점진적 진보나 후퇴의 과정을 거치지 않은 자바스크립트를 남용하거나 과도하게 의존하는 것은 이산화탄소의 지나친 사용이 지구 생태계를 파괴하는 것과 같은 결과를 초래할 것이라고 경고했습니다. 우리가 살아가기 위해 일정량의 이산화탄소가 필요하듯, 웹을 구동하기 위해선 자바스크립트가 필요합니다. 의미 있는 차이를 만들어내는 것은 과도하게 넘치지 않으면서도, 그렇다고 전혀 없어서도 안 되는 미세한 경계일 것입니다.

최근 네이티브 브라우저 API를 활용하면 지나치게 크기를 키우거나 자바스크립트에 전적으로 의존하지 않고도 훌륭한 웹 서비스를 개발할 수 있는 너무나 좋은 기회를 얻었다고 생각합니다. ES6 클래스를 사용함으로써 손쉽게 커스텀 엘리먼트 APICustom Elements API를 통해 네이티브 엘리먼트Native elements를 개선할 수 있으며, 이 과정에서 요구되는 코드의 양은 아주 적기 때문에 외부 프레임워크를 사용해서 직접 개발할 이유가 전혀 없습니다. 공교롭게도 최근 깃허브Github 개발팀이 그들의 플랫폼에서 어떻게 제이쿼리jQuery를 온전히 제외할 수 있었는지에 관한 글을 공유했습니다. 이제는 점진적으로 깃허브 플랫폼을 개선할 수 있는 네이티브 자바스크립트와 적은 양이면서 독립적이지 않은 코드로 대체했다고 합니다. 더 적은 코드의 양으로 더 높은 유지보수성과 안정성을 확보한 것입니다.

업데이트 소식

  • 크롬 버전 70의 베타 버전이 공개되었습니다. QR 코드 판독, 얼굴 인식, 이미지 내 텍스트 인식 등을 수행할 수 있는 형태 감지 APIShape detection API가 시험 단계로 탑재됐습니다. 웹 인증 APIWeb Authentication API가 일부 업데이트되었고, <script> 태그에서 referrerpolicy가 지원됩니다. 또한 이번 버전부터 커스텀 엘리먼트, HTML 임포트, 섀도우 DOM의0 이전 버전이 제외됩니다.
  • 모질라Mozilla의 파이어폭스Firefox 브라우저가 버전 62부터 마침내 :-moz-selection 대신 접두어prefix를 생략한 ::selection을 사용할 수 있게 됩니다. 자바스크립트 배열Array에 사용할 수 있는 flat()과 flatMap() 구문이 활성화되었고, 형태 패스 에디터Shape Path Editor가 개발자 도구에 추가됐습니다.
  • 크롬 버전 69가 출시되었습니다. 69 버전에는 CSS 스크롤 스냅 포인트CSS Scroll Snap Points, 아이폰 X과 같이 일명 ‘노치’라고도 불리는 컷아웃cutout 디스플레이를 효과적으로 활용할 수 있는 CSS viewport-fit 속성이 추가되었고, 단일 탭에서 스크립트가 구동되는 동안 비동기적으로 잠금을 설정하고, 구동이 완료되면 잠금을 풀 수 있도록 해주는 웹 잠금 APIWeb Locks API도 추가되었습니다. 이 외에도 CSS에서 원뿔형 그라디언트Conic gradient를 지원하며, toggleAttribute() 구문(toggle()과 비슷하지만 클래스명 대신 속성을 토글할 때 사용), 배열Arrays에 사용되는 flat()과 flatMap() 구문도 지원합니다. 한 가지 아쉬운 점은 이번 업데이트를 통해 크롬 브라우저가 URL을 표기하는 방식에 변화가 있다는 점인데요 사람들이 이 부분을 보안 관련 버그로 생각하는 것으로 보입니다. URL 표기 방식이 앞으로 어떻게 개선될지 지켜봐야겠습니다.
  • 파이어폭스가 버전 62부터 가변 서체를 지원합니다. 이로써 모든 메이저 브라우저가 가변 서체를 지원하게 됐습니다. 이제 가변 서체를 더욱 폭넓게 사용함으로써 성능을 향상하면서도 보다 창의적인 타이포그래피를 구현할 수 있게 됐습니다. 더불어 데이터 전송량도 크게 절약할 수 있습니다.
  • PHP 7.3버전이 곧 출시됩니다. 이번 업데이트에는 Herdoc과 Nowdoc 구문이 추가되었고, 함수 호출 시 마지막 매개변수 뒤에 붙는 쉼표가 허용되며, is_countable(), array_key_first(), array_key_last() 함수들이 추가되고, 아르곤2Argon2 암호 해싱 알고리즘이 향상됩니다.

일반 소식

  • 알렉스 러셀Alex Russell의 글 ‘개발자 경험’이라는 상술’은 현재 우리가 만들고 있는 오염된 웹 환경에서 자바스크립트가 이산화탄소에 비유될 수 있는 이유를 설명합니다. 소량의 자바스크립트와 이산화탄소는 필요하지만 남용할 경우 생태계 전체를 위험에 빠뜨릴 수 있습니다. 모두가 읽고, 공유하고, 기억했으면 하는 사려 깊은 글입니다.
  • 알렉사Alexa, 코타나Cortana, 시리Siri 심지어 고객지원용 챗봇까지도 일상이 되어감에 따라 이제 콘텐츠가 어떻게 보일지 뿐 아니라 어떻게 들릴지도 생각해야 합니다. 우리는 HTML과 ARIA를 사용해서 콘텐츠를 구조적이고, 적절하며, 무엇보다도 의미 있게끔 만들어야 합니다.

웹 퍼포먼스

보안

  • 나이트워치 사이버시큐리티Nightwatch Cybersecurity가 안드로이드 운영체제의 보안성 취약으로 인해 사용자 기기 정보가 실행 중인 모든 애플리케이션에 노출될 수 있다는 사실을 공개했습니다. 노출될 수 있는 정보로는 와이파이 네트워크명, BSSID, 로컬 IP주소, DNS 서버 정보, MAC 주소 등입니다. 개별 안드로이드 기기를 추적할 수 있는 꽤 많은 종류의 개인정보입니다. 안타깝게도 P/9 버전을 제외한 모든 안드로이드 버전이 이번 보안성 문제의 대상이며 오래된 버전에 대한 업데이트는 예정에 없는 것으로 보입니다.

CSS

  • CSS 셰이프CSS Shapes는 이미 꽤 오랜 역사를 가지고 있습니다. 어도비 웹 팀에 의해 소개되었으나 얼마 지나지 않아 브라우저 개발사들이 지원을 철회했었는데요, 지속적으로 개선된 사양과 구현을 통해 서서히 다시 주목을 받고 있습니다. 레이철 앤드루Rachel Andrew가 CSS 셰이프를 구현하는 방법을 공유했습니다.
  • 사라 수이단Sara Soueidan이 CSS 색상을 정의하는 방식을 HEX 또는 RGB에서 HSL로 바꾼 이유와 그로 인해 얻을 수 있는 이점이 무엇인지 이야기했습니다.
  • 웹의 성장과 함께 새로운 형태 요소와 사용 사례를 받아들이기 위한 새로운 기능들이 등장합니다. 그중 제가 특별히 관심을 두는 것은 color-adjust 속성입니다. color-adjust 속성은 CSS 컬러 모듈 레벨 4에서 처음 소개되었습니다. 이 기능은 웹이 저성능 디스플레이에서도 문제없이 보인다는 확인과도 같습니다.
HSL방식을 사용하면 색 조합을 만드는 것은 식은 죽 먹기입니다. (이미지 출처)

HTML & SVG

  • 스테판 주디스Stefan Judis가 HTML input 요소에 관한 모질라Mozilla의 문서를 읽던 중 여러분의 프로젝트에 유용할 만한 몇 가지 흥미로운 사실을 발견했습니다.

자바스크립트

접근성

  • 이단 마콧Ethan Marcotte은 접근성의 진정한 의미에 대해 생각하고, 그것이 일부 보조적 기술이나 소프트웨어와 호환되는 웹사이트를 만드는 것이 아니라 웹사이트를 사용하고자 하는 모든 사람이 기술과 무관하게 사용할 수 있도록 하는 것임을 깨달았습니다. 그의 접근 방식이 대단히 새로운 이유는 동일한 브라우저와 노트북을 사용하더라도 웹사이트의 내용을 읽는 데 어려움을 겪는 사람들까지도 포용하기 때문입니다. 그들이 어려움을 겪는 이유는 밝은 태양 빛 때문일 수도 있고, 작은 글씨 크기 때문일 수도 있고, 강한 색이나 애니메이션에 의해 주의가 산만해졌기 때문일 수도 있습니다.
  • 에릭 배일리Eric Bailey가 별도의 수고를 들여서 접근성을 테스트하는 것이 얼마나 중요한지를 강조했습니다.

일과 삶

  • 라이언 싱어Ryan Singer가 ‘상상 속의 일’을 통해 프로젝트를 계획하는 것의 어려움에 관해 살펴봤습니다. 상상하고 있는 일을 다른 시스템과 연동하는 것이 얼마나 어려울지 프로젝트 로드맵에 포함하기 전에 먼저 테스트부터 해야 하는 중요성에 대해 이야기합니다.
  • 다들 경험해본 적이 있을 겁니다. 머릿속에서 해결책을 상상하는 것과 그것을 실제로 구현하는 것은 전혀 다른 두 가지의 일이죠. (이미지 출처)
    도서 소개

    레이철 앤드루의 신간 『새로운 CSS 레이아웃』
    그리드를 사용한 레이아웃을 기존 레이아웃과 비교해서 살펴볼 수 있습니다. 예제를 통해 그리드 레이아웃이 어떻게 활용되는지 확인해보세요. 레이아웃만을 다룬 ‘그리드 레이아웃’ 전문서 『새로운 CSS 레이아웃』입니다. 본질의 웹 디자인 시대 흐름에 뒤처지지 않으려면 이 책을 꼭 읽어야 합니다!!
    저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Monthly Web Development Update 9/2018: Native Lazy Loading And Imaginary Work에서 확인할 수 있습니다.

    참여를 기다립니다!국내 웹 디자인계 발전에 도움 주실 분을 찾습니다. 최신 웹 기술에 관심 많은 프론트엔드 개발자이면서, 영어를 우리말로 옮기는 데 어려움 없는 분의 연락을 기다립니다. 번역물에 대한 소정의 번역료를 지급합니다. 메일로 연락주시면 안내드리겠습니다.
    books@webactually.com
ADVERTISEMENT
맨위로
감사합니다! 등록하신 이메일로
확인 메일을 보내드렸습니다 뉴스레터 구독 신청 완료를 위해
등록하신 이메일을 확인 해주세요