Skip to content

[스매싱 매거진 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입니다.

Geenes

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

커맨드 라인 애호

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

Dash Dash

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

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

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

Accessible Component Libraries

폼 디자인 패턴에 대한 책을 위해 만들어지고 사용된 애덤의 라이브러리는 자동 완성과 체크박스, 암호 표시에서부터 라디오와 셀렉트 박스, 스테퍼에 이르기까지 모든 구성 요소에 접근할 수 있는 구성 요소 세트를 제공합니다. 대부분 짧은 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ć처럼 말입니다.

Front-End Bookmarks

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

깃허브를 위한 팁과 기법

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

GitHub Tips And Tricks

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

동료들의 소리

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

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

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

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

Vime

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

 

도서 소개


크리스 코이어의 《실용적인 SVG》
SVG는 크기 조정이 자유롭고, 파일 크기가 작습니다. 모든 해상도에서 독립적이고 어떤 크기에서든 선명하게 보이며 대부분의 브라우저에서 지원됩니다. 이 책에서는 SVG의 가장 실용적인 사용 방법, SVG를 선택할 시기, 사이트에 SVG를 적용하는 방법을 설명합니다. 또 일러스트레이터 같은 정교한 소프트웨어에서 그런트 같은 명령줄 도구에 이르기까지 작업을 돕는 도구를 소개하고, 아이콘 시스템 만들기, 성능을 높이는 최적화, 실감 나는 애니메이션 만들기 등을 알아봅니다. SVG 기본 개념부터 꼭 알아야 할 것만 담은 이 책과 함께라면 웹 이미지를 다루는 강자가 될 수 있을 것입니다.

저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Learning Resources In Challenging Times: Online Workshops, Meetups And Events에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다.
books@webactually.com

Smashing Magazine 기사 모아보기



맨위로