Skip to content

[스매싱 매거진 10월 총정리] 가이드와 자료로 풍성한 가을

새로운 월간 웹 동향 시간입니다! 지난 한 달 동안 일어난 최신 소식과 즐겁게 읽은 글들을 소개해드리죠.

코드로 미술작품을 만들고 싶다creating artworks through code는 마음이 들었거나 못생긴 웹사이트 정책 공개 페이지ugly website policy disclosure pages 때문에 스트레스를 받고 계시다면 저희가 도와줄 수 있다는 걸 잊지 마세요. 스매싱에서는 효과가 있는 것과 없는 것을 구분하고, 호기심을 증폭시키며, 사람들이 기술과 워크플로를 개선하도록 돕고, 일과 삶의 균형을 맞추기 위해 최선을 다하고 있습니다.

함께 더 발전할 수 있는 가장 좋은 방법은 서로서로 배우는 겁니다. 웹 업계에서 새로운 아이디어를 키워 더욱 발전시키는 데 이만큼 좋은 방법이 또 어디 있겠어요. 계속해서 늘어나는 가이드를 쭉 둘러보면 저희 스매싱은 모든 사람이 새로운 것들을 알아보고 배우는 데 도움이 될 수 있는 다양한 주제를 모으고 있다는 것을 알 수 있을 거예요.

언제든지 트위터, 페이스북, 링크드인에서 저희를 팔로하거나 RSS 피드를 구독할 수도 있지만 그래도 중요한 사항들을 한곳에 모아서 살펴볼 수 있는 게 더 좋겠죠.

스매싱 매거진 추천글

뉴스레터 베스트 픽

매주 스매싱 뉴스레터를 발송하면서 더 짧고 주제 중심적인 뉴스레터를 목표로 하고 있습니다. 지금까지 CSS, 프론트엔드 접근성, 자바스크립트, UX에 초점이 맞춰진 에디션을 발행했습니다. 작지만 유용한 도구와 브라우저 확장 프로그램도 소개했지요. 물론 모두를 위한 정보를 제공하기 위해 다양한 주제를 혼합해 추가하는 것도 잊지 않았습니다!

저희는 웹 업계 사람들이 하는 멋진 일들을 소개하는 것을 좋아합니다. 여러분도 소식을 알리는 데 동참해주세요. 다음으로 저희 구독자들이 가장 흥미로워하고 가치 있다고 생각하는 프로젝트들을 소개합니다.

 

믿을 만한 데이트 피커

정말 다양한 데이트 피커 라이브러리가 존재하지만 모든 브라우저에서 작동하고 의존성이 높지 않으며, 합리적으로 잘 짜여 모든 주요 접근성 요구 조건을 충족하는 믿을 만한 라이브러리가 있다는 건 고무적인 일입니다.

A Reliable Date Picker Library

듀엣 데이트 피커Duet Date Picker가 딱 그런 라이브러리입니다. 접근성이 좋고, WCAG 2.1을 준수하는 데이트 피커로 모든 자바스크립트 프레임워크에서 사용할 수 있으며, 프레임워크가 없는 환경에서도 활용할 수 있습니다. 선택 가능한 날짜의 허용 범위를 설정할 수 있는 기능이 내장돼 있으며 용량은 최소화된 버전이 약 10kb으로 Gzip 처리되었습니다(모든 스타일과 아이콘이 포함됐습니다).

대안이 필요한 경우 에어비엔비Airbnb에서 출시한 라이브러리 리액트 데이트React Dates를 확인해보세요. 국제화에 최적화된 동시에 접근이 편리하고 모바일 친화적인 라이브러리입니다.

 

탁월함의 도구함

영감이 전혀 떠오르지 않아 빈 페이지를 마주하고 있는 상황이 종종 벌어지지 않나요? 전 세계에 있는 창조적인 사람들과 경쟁하는 상황에서 계속해서 새로운 아이디어를 내기란 쉽지 않은 일입니다. 특히 모든 아이디어를 누군가 먼저 떠올렸을 거라 생각했을 때는 더욱 어렵죠.

The Deck of Brilliance

탁월함의 도구함Deck of Brilliance은 여러분에게 짧은 시간 동안 아이디어를 낼 수 있도록 도와주는 52개의 무료 도구를 제공합니다. 여러분이 할 일은 도구를 하나씩 선택하고 아이디어가 떠오르면 적어 내려갈 준비를 하는 겁니다. 많은 아이디어를 떠올릴수록 큰 걸 건질 가능성이 커진답니다!

 

접근성 좋은 만화

웹에서 약간 복잡한 모양과 레이아웃을 사용하다 보면 가끔은 그냥 전경이나 배경 이미지로 저장한 뒤 화면 크기에 따라 다른 이미지를 제공하는 편이 훨씬 쉬울 것 같은 생각이 듭니다. 이런 상황은 오래전에 봤던 말풍선이 있는 만화뿐 아니라 복잡한 차트나 그래프에도 적용됩니다. 하지만 경험 자체를 완전히 다시 생각해본다면 어떨까요?

 

Comics Accessibility

코미컬리Comica11y는 모두를 포용하는 온라인 만화 독서 경험을 만들기 위해 폴 스펜서Paul Spencer가 진행 중인 실험입니다. 만화에 다른 독서 방식을 적용할 수 있다면 어떨까요? 음성 표현 자막, 패널 간 시야 이동 안내, 고대비 모드, SVG 색맹 필터, 프로그래밍된 말풍선, 선택과 번역 가능한 텍스트, ltr 언어 및 rtl 언어 지원, 폰트 크기 조정까지 말이죠. UI적인 도전에 대응해 경험을 증대시키기 위해 웹을 이용하는 아주 훌륭한 사례입니다.

 

프로덕트 디자이너를 위한 무료 자원 라이브러리

요즘은 더 배우고 싶은 주제에 관해 조사하는 데 많은 시간이 걸리지 않습니다. 해답은 말 그대로 클릭 한 번이면 충분합니다. 혹시 마지막으로 브라우저 즐겨찾기 목록을 둘러본 게 언제였는지 기억하나요? 페이지를 나중에 읽기 위해 저장해두는 건 유용하지만 우리에게 영감을 주는 원천을 한곳에 모아 볼 수 있다면 좋지 않을까요?

Design Notes

프로덕트 디자인을 하는 분들에게는 디자인 노트Design Notes가 여러분의 시간을 줄여줄 겁니다. 334개의 자원을 연결해 원하는 주제에 따라 필터를 쓸 수 있게 해줍니다. 사용자 경험부터 디자인, 프로토타이핑 도구까지 말이죠. 모두가 이 사이트에 기여할 수 있으니 빠진 게 있다면 편하게 추가해주세요!

 

은행 업무 UX

모든 은행이 저마다 최고의 뱅킹 경험을 제공한다고 주장하지만 그렇지 않은 이유는 뭘까요? 그렇게 주장하는 은행들이 어디에 차별성을 뒀는지 알아보기 위해 UX 전문가 피터 램지Peter Ramsey가 몇 가지를 테스트하기로 결정했습니다.

The UX Of Banking

우선 영국의 실제 은행 12곳에 계좌를 개설하고 모든 것을 기록했습니다. 그런 다음 자신이 겪은 사용자 여정을 여섯 개의 세부적인 챕터로 정리했습니다. 계좌 개설, 첫 결제, 카드 동결, 해외 결제, 오픈 뱅킹, 마지막으로 중요한 고객 지원까지 말이죠. 더 나은 경험을 만드는 데 도움을 주는 환상적인 가이드입니다!

 

모든 곳에서 데이터 테이블 작동하기

테이블을 디자인할 때 가장 큰 난관 중 하나는 작은 화면이나 큰 화면에서도 테이블 전체(적어도 전체 구조)를 보여줄 수 있는 방법을 찾는 것입니다. 내비게이션 같은 경우는 탭이나 아코디언, 캐러셀로 해결할 수 있지만 테이블은 다른 짐승입니다. 그럼 어떻게 길들일 수 있을까요? 앤드루 코일Andrew Coyle은 기사 더 좋은 데이터 테이블 만드는 법Design Better Data Tables을 통해 실제로 적용할 수 있는 몇 가지 디자인 패턴을 소개합니다(예: 사용자가 열을 표시 또는 숨길 수 있게 하거나 행을 카드로 나누도록 허용하기).

How To Make Data Tables Work Everywhere

몰리 헬무스Molly Hellmuth데이터 테이블 디자인을 위한 최고의 가이드The Ultimate Guide To Designing Data Tables는 테이블을 디자인하기 위한 예시들과 무료 키트를 제공합니다. 복잡한 웹 테이블 설계법How To Architect Complex Web Tables에서는 크기 조정을 비롯해 필터링, 자르기 같은 기능과 셀별로 다양한 상태를 적용해 복잡한 테이블을 유지·관리할 수 있는 시스템을 만드는 방법을 소개합니다. 혹시 모바일에서 작동하는 테이블을 만들어야 하나요?

모바일용 복합 테이블 설계Designing a Complex Table for Mobile에서는 복잡한 기업용 테이블을 행마다, 열마다 탐색하여 모바일에서 관리할 수 있는 카드, 필터 및 보기 집합으로 변환하는 방법을 보여줍니다. 까다로운 테이블을 다룰 때 손을 뻗어 도움을 요청할 수 있는 훌륭한 글 모음입니다!

 

깃 치트시트

이런 깃Git! 상황마다 딱 맞는 올바른 명령을 모두 기억하기란 어려운 일이므로 치트시트cheatsheet를 몇 개 가지고 있으면 매우 유용할 겁니다. 깃 로그Git log는 변경된 내용을 추적하거나 커밋을 검색하는 일반적인 방법을 제공합니다. 깃 브랜치 치트시트Git Branch cheatsheet는 브랜치를 나열하고, 새 브랜치를 생성하고, 브랜치 이름을 바꾸고 전환하고 삭제하는 방법을 알려줍니다.

 

Git Cheatsheets

좀더 고급 기능을 알려주는 치트시트가 필요한가요? 아틀라시안Atlassian깃 치트시트Git Cheatsheet는 깃의 기본 사용법, 변경 취소법, 히스토리 재작성, 깃 브랜치 및 원격 리포지터리에 대해 자세히 설명하며 깃허브GitHub 치트시트는 검사 및 비교, 경로 변경 추적, 공유 및 업데이트, 패턴 무시, 임시 커밋 추가 방법 등을 보여줍니다.

 

계속 늘어나는 접근성 자료들

솔루션이나 기술을 찾고 있을 때 원하는 것을 발견하기란 정말 힘들고 오랜 시간이 필요한 작업일 겁니다. 한나 밀란Hannah Milan올리리소스A11yresources는 기사와 웹 브라우저 확장 프로그램을 비롯해 뉴스레터와 팟캐스트, 동영상에 이르기까지 접근성과 관련된 자원 목록과 도구들을 제공합니다.

 

Growing List Of Accessibility Resources

 

접근성 문제를 빠르게 해결하기 위해 필요한 모든 걸 구조화해 정리했습니다. 즐겨찾기에 추가하세요!

 

디자인 시스템 및 프로토타이핑 현황 2020

다른 전문가들의 성공 사례나 실패담을 탐색하는 일은 언제나 흥미진진합니다. 그 과정을 통해 얻는 교훈들을 우리 상황에 적용해볼 수 있으니까요. 스파크박스Sparkbox가 진행한 2020 디자인 시스템 설문조사2020Design Systems Survey는 디자인 시스템을 제대로 작동하도록 하는 데 많은 투자를 한 조직들의 연례 설문조사 결과를 소개합니다. 이 설문조사에서는 일반적인 디자인 시스템에 생기는 과제와 이를 극복하기 위한 전략에 대해 자세히 설명하고 있습니다. 또한 사내 디자인 시스템, 디자인 시스템 성숙도 및 해당 조직의 긍정적 문화와 디자인 시스템의 기여도에 대해 자세히 살펴봅니다.

The State of Design Systems and Prototyping 2020

프레이머Framer 팀이 진행하는 프로토타이핑 현황The State of Prototyping 2020은 31페이지 분량의 PDF 보고서를 통해 프로토타이핑에서 겪는 어려움과 프로토타이핑의 장점에 대해 알려줍니다. 응답자의 3분의 1만이 12시간 안에 프로토타입을 만들 수 있다고 합니다. 많은 사람이 도구를 처음 사용할 때 학습 난이도가 높은 것을 가장 어려운 문제로 꼽았고, 다음으로 프로토타이핑 도구가 요구 사항에 맞지 않는 경우를 들었습니다. PDF를 읽으려면 먼저 이메일 등록이 필요합니다.

 

커맨드라인으로 모든 일 처리하기

커맨드라인을 보면서 어떤 사람들은 프로그래머의 가장 친한 친구라 생각하지만 그밖의 사람들은 위협적인 적이라고 생각합니다. 사실 터미널로는 멋진 일들을 많이 할 수 있습니다. 마르셀 비숍Marcel Bischoff유용한 명령 줄 앱으로 가득한 목록list that is jam-packed with useful command line apps을 정리했습니다.

Awesome Command Line Apps

이 목록에는 자동화 및 백업에서부터 암호화, 생산성, 버전 관리 등에 이르기까지 개발자의 삶을 보다 윤택하게 하는 데 필요한 모든 일이 포함돼 있습니다. 게임조차도 긴 코딩 세션을 달콤하게 만들어줍니다. 좋아하는 명령 줄 앱이 아직 목록에 없나요? 물론 여러분도 힘을 보탤 수 있답니다. 즐겨찾기에 추가해두세요.

 

더미 데이터로 폼 확인하기

폼을 테스트하는 일은 많은 시간이 요구되는 작업이지만 자동화하기 쉬운 일이기도 합니다. 브라우저 확장 프로그램 페이크 필러Fake Filler가 그 역할을 해줍니다.

Fake Filler

크롬파이어폭스에서 사용 가능한 페이크 필러는 여러분이 폼을 빠르고 효율적으로 확인할 수 있도록 모든 폼 입력창에 더미 데이터로 채워주며 라디오 버튼, 드롭다운 메뉴, 체크박스를 무작위로 선택해줍니다. 이 도구는 maxlength 속성을 지원하며 캡차CAPTCHA나 hidden, disabled, readonly 필드들은 무시합니다. 모든 개발자가 도구 모음에 추가할 만한 훌륭한 도구랍니다.

 

배경 소음 없이 단체 통화하는 법

개 짖는 소리, 아이들의 비명 소리, 창 밖에서 들려오는 공사 소음까지. 집에서 일하는 게 새로운 표준이 된 요즘 전화 통화나 원격회의를 방해하는 소음이 많습니다. 끊임없는 다양한 소리들에 둘러싸여 통화 상대가 방해받을까 걱정된다면 AI로 상황을 완화해보세요.

Krisp

AI 기반 프로그램 크리스프Krisp가 그런 역할을 해줍니다. 버튼을 클릭하면 사용자가 말할 때 통화 상대에게 전달되는 음성 외의 소음은 제거됩니다. 소음 없는 가상회의를 원하는 사람들이나 아파트가 번화한 거리에 있는 사람이 팟캐스트를 녹화하려면 800개 이상의 회의, 음성 메시지, 스트리밍 및 녹음 앱에서 작동하는 크리스프를 활용하세요. 오디오 처리는 로컬에서 이루어지므로 음성이나 오디오가 장치에서 나가지 않습니다. 시도해볼 만하죠.

 

도서 소개


헤이던 피커링의 《인클루시브 디자인 패턴
누구라도 접근 가능한 인터페이스를 만드는 데 실제로 적용할 수 있는 인클루시브한 디자인 패턴을 알려드립니다. HTML과 CSS·자바스크립트 라이브러리, WAI-ARIA 역할 및 웹 콘텐츠 접근성 지침의 올바른 사용법, 반응형 디자인에서 일반적인 접근성 문제를 해결하는 방법, 건너뛰기 링크를 다루는 방법, 내비게이션 영역 및 랜드마크의 효율적인 활용법, 버튼이나 폼을 유지하는 방법 등을 구체적으로 설명합니다.

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

 

 

Smashing Magazine 기사 모아보기



맨위로