Skip to content

[2018년 4월 웹 개발 동향] 노력, 편견, 생산성에 관하여

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

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

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

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

 

업데이트 소식 

  • 사파리 테크놀로지 프리뷰 버전 52부터 어도비 플래시 플러그인을 제외한 모든 NPAPI 플러그인 지원이 중단됩니다. 그리고 HTTP 요청이 서버로 전송되기 전에 연결을 설정할 수 있는 preconnect 링크 헤더가 지원됩니다.
  • 구글 크롬 버전 66 베타부터 CSS형 객체 모델, 비동기 클립보드 API, 오디오 워클렛을 지원합니다. CSS 미디어쿼리에서는 calc(), min(), max() 속성을 사용할 수 있게 됩니다. 또한 selecttextarea 필드에 autocomplete 속성을 사용할 수 있고, 자바스크립트 오류 처리에 사용되는 trycatch 절을 매개변수 없이 사용할 수 있게 됩니다.
  • iOS 버전3이 출시되었습니다. 이미 예고한 대로 iOS도 프로그레시브 웹앱(PWA)을 지원하기 시작했습니다. 맥시밀리아노 퍼트맨Maximiliano Firtman이 이것의 의미와 현시점에서 무엇이 가능하고 무엇이 불가능한지 정리했습니다.
iOS가 프로그레시브 웹앱을 지원하기 시작했다. 전체 화면, 오프라인 모드 사용이 가능하다. 심지어 아이패드의 독Dock에 추가할 수도 있다. (이미지 출처)

 

일반 소식 

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

 

UI/UX

  • 트리느 팔베Trine Falbe윤리 디자인에 관한 실용적 입문 안내서를 공유했습니다. 이 글은 우리가 비즈니스를 하거나 제품을 만들 때 생각해야 하는 것과 대안에 대해 이야기합니다. 여러분이 사업가인지, 개발자인지, 디자이너인지, 영업 담당인지는 중요하지 않습니다. 윤리 디자인의 핵심은 사용자를 위한 서비스를 만들고, 실제적이고 지속적인 신뢰 가능한 기반을 만드는 데 있습니다.
  • 조쉬 러브조이Josh Lovejoy포용적 기술 해결책Inclusive tech solutions을 개발하며 배운 것과 포용적 기술 구현이 단지 선한 의지만으로는 가능하지 않은 이유를 설명했습니다. 이 글은 어째서 인간의 판단이 편견에 기반을 둘 때가 많은지 이야기합니다. 그로 인해서 다양한 사람을 동등하게 대우하는 알고리즘을 설계하고 개발하기 쉽지 않은 이유도 깊이 있게 다룹니다.
  • HSB(색상, 채도, 명도) 색 체계는 특별히 새로운 것은 아니지만 여전히 많은 사람이 HSB의 장점을 이해하지 못합니다. 에릭 D 케네디Erik D. KennedyHSB 색 체계 기본 원리와 이점에 대해 알기 쉽게 설명했습니다.
  • 최근 포용적 디자인Inclusive design에 관한 논의가 점점 많아지고 있습니다. 그러나 대부분 접근성이나 기술적 결정이라는 큰 주제 안에서만 다루고 있습니다. 로버트 델 프라도Robert del Prado포용적 디자인 사고가 얼마나 중요한지, 그리고 포용적 디자인이 특정 부류나 장애를 가진 사람보다 일반 사용자에게 더 많이 해당하는 이유에 대해 설명했습니다. 포용적 디자인은 사용자가 어떤 사람인지, 어디에 살고 있는지, 경제적 상황이 어떠한지와 무관하게 사람을 한데 모을 수 있습니다. 생각해보면 모든 제품의 목적은 가능한 많은 사람으로부터 사용되는 것 아닐까요? 이 주제는 아마 마케터와 함께 논의해야 할 것 같습니다.
아기는 두려운 걸까 화가 난 걸까? 우리가 판단하는 아기의 감정 상태는 우리가 생각하는 아기의 성별에 따라 좌우된다. 조쉬 러브조이가 개인의 편견과 판단이 어떻게 불공평한 제품으로 이어지는지에 대해 설명했다. (이미지 출처)

 

도구

  • 브라이언 슈래더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, 검색 기능들이 추가되었습니다. 작업속도를 크게 향상시켜줄 수 있는 훌륭한 업데이트 인것 같네요. 심지어 저처럼 커맨드라인으로 깃을 사용하는 것을 선호하는 사람에게조차 고려해볼만한 옵션인것 같네요.

 

 

마누 링크가 iOS에서 머신러닝이 어떻게 작동하는지를 오프라인 손글씨 인식 기능을 구축하는 과정을 통해 설명했습니다. (이미지 출처)

 

보안

  • HTTP 전송 계층 보안 강화 프로토콜Strict Transport Security, HSTS 프리로딩preloading은 호스트명Hostname에 안전히 접속할 수 있는 최선의 방법으로 오랫동안 여겨졌습니다. 하지만 일부 광고주들이 HSTS를 통해 사용자를 추적할 수 있는 방법을 발견하고 HSTS를 이른바 ‘슈퍼 쿠키’라 불리는 영구적 사이트 간 식별자로 사용했습니다. 웹킷WebKit 개발자들은 이에 대응하여 사용자 프라이버시를 보호하기 위해 HSTS의 신뢰성을 호스트명 범위 내로 제한하고 차단된 도메인에 대한 하위 자원 요청을 위한 HSTS 상태를 무시하도록 변경했습니다.
  • 페이저듀티PagerDuty내부 보안 교육용 자료의 오픈소스 버전을 공개했습니다. 일반적인 보안 문제와 전략에 대한 흥미롭고 이해하기 쉬운 설명으로 가득합니다. 기술적 지식이 없는 사람도 이해할 수 있는 자료이기 때문에 유용할 것 같습니다.
  • 아르곤2Argon2는 해싱Hashing 알고리즘(예: 비밀번호 사용)을 위한 현존하는 최선의 도구입니다. 하지만 아르곤2를 사용하는 개발자가 대비해야 할 몇 가지 문제점이 있습니다. 일례로 아르곤2를 사용해 스스로에게 DOS 공격을 가할 수도 있죠. 이를 방지하기 위해 쿼리 제한을 설정하는 것이 중요합니다.

 

웹 퍼포먼스

  • 팀 옥슬리Tim Oxley가 프로그래밍할 때 되도록 else문 사용을 피하고 최대한 빠르게 return 값을 반환하도록 하는 이유를 설명했습니다. 저 역시 신입 개발자 시절에는 이런 방식으로 코딩하다가 어느 시점부터 신경을 쓰지 못했지만 최근에는 다시 이 방식으로 코딩을 하고 있습니다. 복잡도를 줄이고 함수 내에서 더 단순한 로직을 짤 수 있는 것이 이 방식의 가장 큰 이점이라고 생각합니다.
  • 제레미 와그너Jeremy Wagner이미지와 비디오를 레이지로드Lazy loading하는 방식의 가장 좋은 사례를 공유했습니다. 이 방법이 결코 손쉬운 해결책은 아니지만 이 글을 통해 최신 브라우저 기술로 최적의 경험과 성능을 구축하는 방법을 엿볼 수 있습니다.

 

접근성

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

 

CSS

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

 

둥글게 파인 모서리? 아나 투도르가 그 방법을 설명했다. (이미지 출처)

 

 

자바스크립트

  • 프론트엔드에서만 보관되는 키 값 저장소Key value stores가 필요하다면 IDB-Keyval은 인덱스DBIndexedDB와 로컬스토리지localStorage와 함께 사용할 수 있는 가볍고 훌륭한 라이브러리입니다.
  • 데이터를 손그림이나 스케치 느낌의 그래픽으로 표현하고 싶은 적이 있었다면 러프JSRough.js는 정확히 그 목적을 위한 라이브러리입니다. 더 좋은 성능과 적은 데이터 사용을 위해 캔버스Canvas를 주로 사용하지만 SVG 패스SVG Paths로도 구현할 수 있습니다.
  • 드래그 앤 드롭 방식의 재정렬 모듈이 필요하다면 부드럽게 구동되고 사용이 쉬운 dragon-drop이 좋은 해결책입니다.
  • 리액트JSReact.js의 개발 문서에 UI 접근성을 확보하기 위해 구조적으로 포커스 상태focus states를 제어하는 방법에 대한 내용이 추가되었습니다.
  • 웹 푸시 알림Web Push Notification에 관한 글은 이미 많지만 올렉시 루덴코Oleksii Rudenko가 새롭게 쓴 웹 푸시 알림 시작 가이드는 기본 원리를 잘 설명하는 훌륭한 입문용 글입니다.

 

일과 삶

  • 제임스 베넷James Bennet단순한 실수를 찾아내는 데 걸린 오랜 시간에 대한 경험을 통해 이런 상황이 드문 것이 아님을 알리고자 했습니다. 실수는 저나 여러분, 또는 제임스만 저지르는 것이 아닙니다. 우리는 모두 실수를 하고 그 순간만큼은 정말 실수가 부끄럽죠. 그러나 사실 실수에 낙담할 필요는 없습니다.
  • 아담 블랜차드Adam Blanchard“사람은 기계다. 그래서 우리도 수리가 필요하다”고 이야기합니다. 그는 우리가 스스로를 돌봐야 하고, 또 우리를 돌봐줄 누군가가 필요한 이유를 엔지니어가 이해할 수 있도록 기계와 사람을 비교합니다. 피플 엔지니어People Engineer가 하는 일과 기업이 그런 역할을 담당하는 인력을 채용하는 것이 팀 건강을 위해 얼마나 중요한지를 설명하는 통찰력 있는 글입니다.
사람도 수리가 필요하다. 그리고 그것이 피플 엔지니어가 다뤄야 할 문제다.
(이미지 출처)

 

그 외 소식

 

저작권 정보이 글은 Smashing Magazine에서 나온 글을 번역한 것으로, 웹액츄얼리 북스팀이 저작권자로부터 허가를 받고 올린 글입니다. 원본은 Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리 북스팀에서 웹 디자인 관련 영문 번역자를 찾습니다. 관심 있는 분은 메일 보내주세요. books@webactually.com
  • khadimg5544@gmail.com 2020-03-18 20:29:55





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • khadimg5544@gmail.com 2020-03-18 20:29:57





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • khadimg5544@gmail.com 2020-03-18 20:29:58





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • khadimg5544@gmail.com 2020-03-18 20:29:59





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • khadimg5544@gmail.com 2020-03-18 20:29:59





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • khadimg5544@gmail.com 2020-03-18 20:29:59





    Digital image processing, What is Image Enhancement and Image Restoration
    In computer science, digital image processing is the use of a digital computer to process

    digital images through an algorithm. As a subcategory or field of digital signal processing,
    digital image processing has many advantages over analog image processing.

  • fukatsoft 2020-08-27 16:19:11

    How to Make Application Using Deep Learning Architecture
    Deep Learning is fundamentally changing everything around us.
    A lot of people think that you need to be an expert to use power
    of deep learning in your applications. However, that is not the case.

  • fukatsoft 2020-08-31 15:08:13

    How to Make Application Using Deep Learning Architecture
    Deep Learning is fundamentally changing everything around us.
    A lot of people think that you need to be an expert to use power
    of deep learning in your applications. However, that is not the case.

  • barbaroslar episode 1 in urdu 2021-09-30 14:52:07




    Comment for barbaroslar episodes: Go and Watch the Turkish Drama Series of Engin Altan's "Barbarosslar" in Urdu only on our youtube channel "My Kids Tube".
    Please subscribe and Stay Tuned!


    https://www.youtube.com/watch?v=qmJQOLaK2IM

  • fukatsoft 2021-09-30 16:17:02




    Comment for barbaroslar episodes: Go and Watch the Turkish Drama Series of Engin Altan's "Barbarosslar" in Urdu only on our youtube channel "My Kids Tube".
    Please subscribe and Stay Tuned!

  • kurulus osman series in urdu 2021-11-22 18:31:58


    https://www.youtube.com/watch?v=byGJN5eHWH4


    Comment: Go and Watch the Latest Episode of Kurulus Osman Season 3 in Urdu. Only on our youtube channel.


  • kurulus osman series in urdu 2021-11-23 16:17:09

    https://www.youtube.com/watch?v=byGJN5eHWH4


    Comment: Go and Watch the Latest Episode of Kurulus Osman Season 3 in Urdu. Only on our youtube channel.





맨위로