[스매싱 매거진 5월 총정리] 힘겨운 시간을 위한 학습 자료

스매싱 매거진의 인기 주제

우리는 웹 산업에서 현재 일어나고 있는 다양한 주제들에 대해 매일 새로운 글을 올립니다. 그동안 독자 여러분이 즐겁게 읽고 추천한 글들을 소개합니다.

• 웹팩^Webpack과 바벨^Babel을 사용하는 최신 리액트 프로젝트에 타입스크립트^Typescript 설정하기–블레싱 크로페가 ^{Blessing Krofegha}
  이 글에서는 타입스크립트를 소개합니다. 타입스크립트는 자바스크립트의 슈퍼 스크립트로 정적 타입 기능을 통해 개발자들이 코드를 쓸 때 오류를 잡아내고 성능을 높여 강력한 상업 응용 프로그램을 만들 수 있도록 해줍니다. 또한 <종이의 집^{Money Heist}>(넷플릭스 드라마-옮긴이) 에피소드 선택기 앱을 만들고, 타입스크립트와 useReducer, useContext를 비롯한 리액트 훅스^{React hooks}의 기능들과 리치 라우터 ^{Reach Router}에 대해 알아봅니다.
• 기계식 키보드에 대한 완벽 가이드 –벤 프레인^{Ben Frain}
  기본 입력 장치에 대해 어느 정도 신경 쓰시나요? 여러분의 컴퓨터 인터페이스가 얼마나 좋아질 수 있는지 생각해본 적이 있나요? 이 글에서는 기계식 키보드의 가능성에 대해 심도 있게 알아봅니다. 다양한 레이아웃, 스위치 유형 및 키캡 재질까지. 줄 꽉 잡으세요. 아주 깊이 파고들어갈 거니까요!
• 마이크로 타이포그래피: 간격을 맞추고 문장 부호와 기호의 꼬리를 처리하는 방법–토머스 봄^{Thomas Bohm}
  우리는 수백 년 동안 타이포그래피에 공백을 사용했습니다. 2020년에는 어떻게 구두점과 기호에 간격을 넣고, 좌우 간격을 어떻게 쉽고 일관적으로 조정할 수 있을까요? 사실 쉽고 빠르지는 않습니다.
• 뷰JS ^vue.js의 컴포넌트끼리 데이터를 전달하는 법–매트 마리복^{Matt Maribojoc}
  컴포넌트 사이에서 데이터를 공유할 수 있는 다양한 방법이 존재하므로 상황에 따라 적합한 기술을 알아야 합니다. 뷰JS에서 데이터를 전달하는 일반적인 세 가지 방법을 분석해보겠습니다.
• 디자인 리스크 줄이기–에릭 올리브^{Eric Olive}
  시장 출시를 서두르고 사용성 조사에 들어가는 것은 위험이 따르는 일입니다. 이 글은 리스크를 줄이고 소비자들에게 더 좋은 경험을 제공하는 디자인을 만들 수 있도록 네 가지 실용적인 테크닉을 소개합니다. 편의성보다는 맥락에 집중하기, 타협, 더 나은 디자인 결정하기, 디자인 축소가 그것입니다.

뉴스레터 베스트 글

솔직히 말하자면 스매싱 뉴스레터의 분량을 유지하기 위해 격주로 고생하고 있습니다. 멋진 프로젝트를 진행하는 뛰어난 사람들이 너무 많거든요. 프로젝트에 참여한 모두에게 박수를 보냅니다!

P.S. 이 글을 작성하고 준비해준 코시마 미엘케^{Cosima Mielke}에게 감사의 말을 전합니다.

접근 가능한 색상 팔레트 생성하기

완벽한 색조나 음영을 찾는 것은 취향의 문제일 뿐 아니라 접근성의 문제이기도 합니다. 무엇보다 색상 대비가 부족하면 최악의 경우 시각장애가 있는 사람들이 제품을 사용하지 못할 수도 있습니다. 잠재적 문제점을 미리 감지할 수 있는 데 도움이 되는 매우 세부적인 색상 대비 검사기를 소개합니다. 지아눌카 지니^{Gianluca Gini}에서 만든 지니스^Geenes입니다.

이 도구를 통해 색조 범위와 채도를 조정하고 세 가지 UI 목업 중 하나를 선택해 적용할 수 있습니다. 적용 후에 다양한 종류의 시각장애를 시연해 사람들에게 색상이 어떻게 보이는지 확인할 수 있고 최종적으로는 팔레트에 가장 적합한 색상을 결정할 수 있습니다. 색상을 즉시 사용하려면 코드를 복사해 붙여넣거나 스케치^Sketch로 내보낼 수 있습니다.

커맨드 라인 애호

보통 기술 문서는 건조하고 무섭게 느껴집니다. 특히 새로운 도구를 처음 사용하는 사람들이라면 더욱 그렇죠. 매뉴얼을 읽거나 이해하기 어렵고 설명은 너무 장황한데 예제가 부족하면 실망하기도 합니다.

대시 대시^{Dash Dash}는 유닉스^Unix(리눅스^Linux, BSD, 맥OS) 오픈 소스 매뉴얼 페이지를 아름다운 형태와 레이아웃을 가진 콘텐츠로 바꿨습니다. 모든 명령어에 대한 설명뿐 아니라 검색, 예제, 짧은 요약까지 제공합니다. 커맨드 라인의 기술^{The Art of Command Line}은 기본부터 시스템 디버깅까지 커맨드 라인으로의 여행으로 여러분을 이끌 것입니다. 고급 커맨드 라인 기술을 사용하고 싶다면 cmdchallenge에서 한 줄의 배시^bash 명령어로 작업을 해결할 수 있습니다.

접근이 편한 컴포넌트 라이브러리들

우리가 만드는 많은 컴포넌트 라이브러리가 대부분의 요소(아코디언, 표, 캐러셀, 드롭다운 및 타이포그래피, 색상 및 박스 그림자)를 구현하려 노력하지만 애덤 실버^{Adam Silver}의 스타일 없는 디자인 시스템^{No Style Design System}은 주로 접근성과 웹 폼에 집중하고 있습니다.

폼 디자인 패턴에 대한 책을 위해 만들어지고 사용된 애덤의 라이브러리는 자동 완성과 체크박스, 암호 표시에서부터 라디오와 셀렉트 박스, 스테퍼에 이르기까지 모든 구성 요소에 접근할 수 있는 구성 요소 세트를 제공합니다. 대부분 짧은 CSS 스타일로 깔끔하고 접근하기 쉬운 마크업 형태를 가지고 있습니다. 조금 더 고급 구성 요소가 필요하다면 헤이던 피커링^{Heydon Pickering}의 인클루시브 컴포넌트^{Inclusive Components}가 있습니다. 사용하기 쉬운 카드를 비롯해 데이터 테이블, 알림, 슬라이더, 탭 인터페이스, 툴 팁, 메뉴, 토글에 대한 포괄적인 튜토리얼을 제공합니다.

사용자 정의 CSS 종속

미리엄 수잔^{Miriam Suzanne}이 사용자 정의 속성의 종속을 정의하는 영리한 방법을 확인할 수 있는 데모를 만들었습니다. 값을 정의하는 방법의 특수성에 대해 걱정할 필요 없이 어떤 값이 우선순위를 갖는지 판단할 수 있도록 도와줍니다.

See the Pen Custom Cascades by Smashing Magazine (@smashingmag) on CodePen.

미리엄 수잔의 코드펜 커스텀 캐스케이드를 확인하세요.

미리엄은 버튼을 예로 들어 어떻게 작동하는지 보여줍니다. 종속의 규칙을 따라 기본 버튼은 늘 –btn-bg–default의 속성이 적용됩니다. disabled 속성을 넣을 경우 정의된 요소에 관계없이 항상 다른 색상은 무시됩니다. 새 버튼을 만들 때 –btn-bg–type 을 입력하면 상태를 제외한 기본값만 무시됩니다. 이 접근법은 상황에 따라 다른 값들을 적용해줍니다. 고도로 설정된 인라인 스타일은 일반적인 위험을 피할 수 있는 괜찮은 해결책입니다.

프론트엔드 즐겨찾기

어떤 사람들은 웹에서 만난 좋은 글과 강의들을 하나의 즐겨찾기 폴더에 넣곤 하죠(종종 원하는 것을 찾는 일이 어려워지긴 합니다만). 또 다른 사람들은 좀더 체계화된 방법을 택하죠. 마누엘 마투조비치^{Manuel Matuzović}처럼 말입니다.

마누엘은 HTML, CSS, 자바스크립트에 관한 글과 강연을 모아 프론트엔드 북마크^{Front-End Bookmarks}에 올려두었습니다. 요소, 특성, 속성, 선택자, 메소드, 표현을 알파벳 순으로 정리했습니다. 여러분이 aria-labelledby 의 사용법이나 ::marker 의사 요소가 무엇인지에 관한 정보를 찾고 있다면 바로 이것입니다. 마누엘이 이미 주제별로 훌륭한 자료를 정리해 두었답니다. 참고로 여기에 빠진 자료가 있다면 주저 말고 깃허브에 기고해주세요.

깃허브를 위한 팁과 기법

여러 커밋을 하나의 커밋으로 합치는 방법에 대해 알고 있나요? 아니면 깃허브 명령어 인터페이스를 통해 브라우저에서 저장소를 여는 법에 대해서는 어떤가요? 조 프레비트^{Joe Previte}가 모은 깃허브를 위한 팁과 기법이 여러분에게 필요할지도 모르겠네요.

짧은 비디오에서 조는 작지만 강력한 팁을 공유해 깃허브의 작업흐름을 한 단계 높여줍니다. 그리고 비디오보다 글을 통한 학습법을 선호하는 사람들을 위해 대부분의 팁은 블로그에 짧은 글로 제공합니다. 시간을 절약해주는 편리한 글이죠.

동료들의 소리

사무실에서 일하는 것보다 재택근무가 좋은 점이 있겠지만 솔직히 동료가 없으면 조금 외로울 수도 있습니다. 집이 너무 조용한 것 같고 집중력을 유지하는 데 적당한 소음이 필요하다면 동료들의 소리가 여러분에게 도움이 될 수도 있겠네요.

동료들의 소리는 실제로 사무실에서 나는 소리를 섞어서 여러분만의 사무실 소음을 만들어줍니다. 사람들이 컴퓨터 자판 치는 소리, 떠드는 소리, 전화벨 소리, 커피머신 소리, 프린터 소리 등 작은 소음들을 섞어 집에 사무실 분위기를 만들어줍니다. 어쩌면 여러분의 생산성을 높여줄지도 모르잖아요?

미니멀리즘 최신 미디어 플레이어 라이브러리

여러분의 사이트에 미디어 플레이어를 넣고 싶다면 바임^Vime에 관심을 가져보세요. 이 오픈 소스 라이브러리는 Videojs 및 Plyr에 대한 대체품으로 HTML5, HLS, 대시^Dash, 유튜브^YouTube, Vimeo 및 데일리모션^Dailymotion을 지원합니다.

바임은 미니멀하고 세련된 외관을 지녔을 뿐 아니라 반응형 디자인 및 접근성, 모듈식, 경량 기능을 제공합니다. 외부 의존성이 없으므로 필요에 따라 다양한 패키지가 제공되어 경우에 따라 필요한 기능을 선택할 수 있습니다. 미니멀리스트란 단조로움을 의미하는 것이 아니기 때문에 바임은 맞춤형 컨트롤, 설정, 툴 팁 등 다양한 플러그인으로 꾸밀 수 있습니다. 모든 최신 브라우저의 마지막 두 버전을 지원합니다. IE11도 포함해서.