[스매싱 매거진 11월 총정리] 스매싱하기 딱 좋은 때입니다!

온라인 콘퍼런스나 워크숍이란 개념에 익숙해지는 데 그리 오래 걸리지 않았습니다. 비대면 행사가-지금도, 앞으로도-대면 행사보다 보람 있게 느껴지지 않겠지만 나름의 장점도 있죠. 온라인 행사는 모든 사람이 자기 책상을 떠나지 않아도 참여할 수 있고, 각자만의 페이스로 배우거나 네트워킹할 수 있습니다. 훨씬 저렴하고, 멀리 떠나지 않아도 되기 때문에 어린이가 있는 가족이나 여행을 선호하지 않는 사람도 행사에 참여할 수 있습니다.

저희는 4월부터 온라인 워크숍을 진행해왔습니다. 모든 행사 하나하나가 굉장한 경험이었습니다. 전 세계에서 서로서로 배우기 위해 모인 훌륭한 참석자들은 라이브 디자인과 코딩 세션을 통해 정말 많은 아이디어를 실현시켰습니다.

스매싱 뉴스레터: 베스트 글

저희는 주간 뉴스레터를 통해 유용한 콘텐츠와 웹 업계 사람들이 만든 멋진 것들을 공유하고 있습니다. 뛰어난 많은 사람이 대단한 프로젝트들을 진행 중이죠. 그래서 여러분이 이 프로젝트들을 널리 알리고 그들의 기여를 인정해주면 더욱 힘이 될 것입니다!

뉴스레터를 구독해도 서드파티 메일 서비스나 숨겨진 광고는 없습니다. 여러분의 지원은 저희 청구서에 정말 도움이 됩니다. ❤

피그마 작업 수준을 다음 단계로 높여봅시다

피그마^Figma의 인기가 높아지면서 그 인기와 더불어 브라우저 기반 디자인 도구를 더욱 원활하게 사용할 수 있는 플러그인, 템플릿을 비롯해 일반적인 팁과 요령의 수도 증가하고 있습니다. 혹시 피그마를 사용 중이거나 가입 계획이 있다면 유용한 리소스를 소개해드릴게요.

먼저 피그마에서 더 빠르게 작업할 수 있도록 트롱 응우옌^{Trong Nguyen}이 정리한 작지만 강력한 팁 모음집 “어섬 피그마 팁^{Awesome Figma Tips}“을 소개합니다. 작업 중인 디자인이 디자인 시스템을 바탕으로 진행 중이라면 디자인 시스템 매니저^{Design System Manager} 플러그인이 도움이 됩니다. 바로 하나의 패널에서 디자인 토큰을 정의하거나 업데이트할 수 있으며 피그마 디자인을 통해 계단식 변경 사항을 즉시 확인할 수 있습니다.

브레이크포인트Breakpoints는 디자인 프로그램에 크기 조절이 가능한 프레임을 추가해주는 플러그인으로 빠르게 크기를 조절해 분기점마다 동적 레이아웃을 만들 수 있도록 돕습니다. 마지막으로, 디자인이 준비되고 팀이나 관계자에게 시연하고 싶을 때 템플리터리Templatery 를 사용하면 피그마 프레젠테이션에 무료 템플릿을 적용할 수 있습니다. 작업 수준을 한 단계 끌어올리고 시간도 절약해주죠.

SVG 사각원 제작기

세상에는 정사각형과 원이 있지만 모서리가 둥근 정사각형도 있답니다! 조지 프란시스^{George Francis}의 스쿼클리Squircley는 모든 종류의 시각적 이미지와 배경 이미지를 위해 유기적인 형태를 생성해줍니다. 회전율, 배율, 곡률, 색상을 선택하면 나머지 작업은 도구가 해결해줍니다.

생성기는 HTML/CSS 코드에 바로 입력하거나 디자인 프로그램에서 사용할 수 있도록 SVG를 내보냅니다. 재미있는 프로그램입니다. 이것으로 부족하다면 겟웨이브^GetWaves를 이용해 물결 모양 SVG 를 만들거나 블롭메이커^Blobmaker 를 사용해 멋진 거품을 만들 수도 있답니다. 행복한 실험해보세요!

UX 리서치를 위한 최고의 가이드

사용자 경험 리서치는 인간 중심 디자인 과정에서 가장 중요한 요소입니다. 하지만 어떻게 조사하고, 그 조사 과정을 팀의 작업에 녹여낼 수 있을까요? 여러분이 직접 시도할 수 있도록 메이즈^Maze에서 “UX 리서치를 위한 최고의 가이드^{Ultimate Guide to UX Research}”를 엮었습니다.

이 포괄적인 가이드는 UX 리서치의 기초와 조사의 다양한 방법들을 알려줍니다. UX 리서치란 무엇인지, 좋은 제품을 만드는 데 UX 리서치가 중심이 되는 이유를 자세히 들여다보는 것부터 다양한 조사법과 도구를 분석하고, 조사 계획을 세우고, UX 리서치 과정을 세우는 데 필요한 팁들까지 공유합니다. UX 디자이너와 제품 관리자가 읽어야 할 페이지입니다.

웹 다크 모드 완벽 가이드

애플과 윈도우, 구글이 운영체제에 다크 모드를 구현한 이후 다크 모드는 빠르게 사용자 환경 설정에 자리 잡았습니다. 하지만 웹에서는 어떨까요? 아두함^Aduham은 웹에서 다크 모드를 구현하는 데 필요한 다양한 설정과 접근 방식을 살펴보는 광범위한 가이드^{comprehensive guide}를 작성했습니다.

가이드는 우선 다크 모드 구현에 필요한 기술적 고려 사항을 알려줍니다. 테마 전환에 접근하는 다양한 방식과 사이트 전체 적용은 물론, 이후 방문에도 일관되게 적용될 수 있도록 사용자 환경 설정 저장법도 다룹니다. color-scheme 메타 태그로 사용자 에이전트 스타일을 처리하는 팁은 이후 일어날 수 있는 FOIT (Flash of Invisible Text; 내용이 보이지 않는 상태에서 폰트가 변경되며 갑자기 텍스트가 나타나는 현상-옮긴이) 현상을 방지합니다. 디자인 고려 사항을 비롯해 다크 모드에 적합한 이미지나 그림자, 타이포그래피, 아이콘, 색상을 얻는 데 필요한 유용한 팁도 다룹니다.

결제 과정 단순화하기

56번. 고객이 아메리칸 에어라인^{American Airlines}에서 티켓을 사려면 거쳐야 하는 행동의 횟수입니다. 인정하자고요. 결제 양식이 너무 길고 채우기도 복잡합니다. 최악의 경우 고객은 그 과정을 포기하기도 합니다. UX플래닛^{UX Planet}이 2017년에 4부짜리 시리즈를 통해 결제 과정을 단순화하는 법을 다뤘습니다.

첫 번째 글에서는 결제 경험이 잘못되는 사례와 원인을 살펴봅니다. 두 번째 글에서는 모든 결제 양식을 개선하는 데 도움이 되는 16가지 팁을 통해 중요한 사항들을 정리합니다. 세 번째 글에서는 양식 유효성 검사나 고객이 일으킬 수 있는 오류를 줄이는 방법을 다룹니다. 또한 디자인 차이에서 생기는 B2C 시장과 B2B 시장 간 차별성을 가까이에서 들여다봅니다. 마지막 글에서는 카드 번호를 감지하고 확인하는 법, 다른 결제 양식을 처리하는 방법을 알려줍니다. 길어도 읽어볼 만한 글입니다.

완벽히 자리 잡은 UX 라이팅 현황

지난 5년간 많은 기업과 디자이너들이 글쓰기의 중요성에 집중했습니다. 콘텐츠가 정확하고 의미 있는 경험을 디자인할 수 있다는 사실을 알게 된 거죠. 하지만 UX라이팅^{UX Writing}이란 무엇이고, 왜 중요할까요?

UX라이팅 월드와이드 리포트^{UX Writing Worldwide Report}에 따르면 UX라이팅은 사용자에게 집중해 그들의 요구에 맞는 경험을 만들어낼 수 있도록 해줍니다. 조사 결과는 전 세계 기업 내 UX라이터^{UX Writer}의 역할을 이해하는 데 도움이 되므로 꽤 흥미롭고 유용합니다.

개발자 생태계 현황 2020

개발자들 사이에서 가장 인기 있는 프로그래밍 언어는 무엇일까요? 개발자는 어떤 언어로 이동할 계획을 갖고 있을까요? 가장 많이 공부한 언어는 무엇일까요? 이 질문들은 개발자 생태계 현황 2020^{State of Developer Ecosystem 2020}이 답해주는 질문 중 일부입니다.

올해 초 젯브레인^JetBrains은 약1만9700명의 개발자를 대상으로 도구, 기술, 프로그래밍 언어 및 개발 세계의 여러 측면에 대한 최신 동향을 파악했습니다. 몇 가지 핵심 내용을 정리해보죠. 가장 널리 사용되는 기본 프로그래밍 언어는 자바^Java이고, 전체 프로그래밍 언어 중에서 가장 많이 쓰이는 것은 자바스크립트^JavaScript입니다. 새로운 언어를 채택할 때 가장 선호하는 언어는 고^Go, 코틀린^Kotlin, 파이썬^Python 순입니다. 이와 같은 확실한 현황 외에도 오픈소스 기여나 협업 도구, 생활 습관, 정보 탐색에 대해서도 자세히 살펴볼 수 있습니다. 개발 커뮤니티를 움직이는 원동력이 무엇인지 알아보는 귀중한 통찰력을 제공합니다.

인라인 양식 유효성 검사 경험 디자인하기

가끔씩 몇 년이 지났어도 여전히 대단한 힘을 발휘하는 기사를 마주치게 됩니다. 미하엘 코니에비치^{Mihael Konjević}가 쓴 인라인 유효성 검사에 관한 글^{Post about Inline Validation}처럼 말이죠. 미하엘은 인라인 유효성 검사 오류를 표시해야 할 때 가장 괜찮은 사용자 경험이 무엇인지 알아내기 위해 다양한 사이트를 분석했습니다. 연구 결과에 따르면 유효성 검사 처리에 대한 법칙은 없지만 올바른 질문을 하면 버그가 없고 사용자 친화적인 환경을 디자인할 수 있습니다.

미하엘은 “보상은 빠르게 처벌은 느리게”라는 접근법을 제안합니다. 사용자가 유효한 상태의 양식에 데이터를 입력하는 경우 데이터 입력 이후 유효성 검사를 수행합니다. 하지만 유효하지 않은 상태의 양식에 데이터를 입력한다면 데이터 입력 중 유효성 검사를 수행하는 겁니다. 물론 양식마다 요구 사항이 다르므로 그에 따라 접근 방식을 조정해야 합니다.

웹사이트의 성능을 높여주는 도구들

사용할 이미지 선택부터 웹 서버 성능에 이르기까지 웹디자인과 웹 개발의 대부분은 사이트 로딩 속도에 영향을 미칩니다. 측정 도구는 로컬 환경에서만 테스트해서 확인하지 못할 수 있는 병목현상을 발견할 수 있도록 도와줍니다. 이러한 데이터를 쉽게 수집하고 해석할 수 있는 몇 가지 편리한 도구를 모아봤습니다.

여러분의 사이트가 잘 작동하는지 확인하기 위해 web.dev에서 제공하는 메저^Measure가 성능과 모범 사례, SEO, 접근성을 심사하고 사용자 경험을 개선하는 데 도움이 되는 팁을 알려줍니다. 테스트는 모바일 장치를 빠른 3G 네트워크 기준으로 해서 CPU 성능을 4분의 1로 맞춰 시뮬레이션해 진행합니다. 라이트하우스에서 제공하는 라이트하우스 메트릭스^{Lighthouse Metrics}역시 전체적인 성능 통찰을 나타내며 6개 지역에서 사이트에 접속할 때 성능을 발휘합니다. 마지막으로 구글의 페이지스피드 인사이트^{PageSpeed Insights}는 제한된 환경에서 수집한 실험실 데이터와 실제 UX를 캡처하기 위해 수집한 현장 데이터를 바탕으로 모바일 환경과 데스크톱 환경에서의 페이지 성능을 확인해줍니다. 성능 향상을 위해 더 많은 도움이 필요하다면 체크리스트, 기사 및 강연을 모은 새로운 성능 가이드^{performance guide}를 확인해보세요.

제대로 배우는 자바스크립트

새로운 언어를 배우기란 쉽지 않은 입니다. 특히 자바스크립트처럼 최대한 활용할 수 있는 도구나 프레임워크가 너무 많다면 더욱 그렇겠죠. 모든 가능성에서 길을 잃지 않고 처음부터 모범 사례를 배울 수 있도록 윌리엄 올리베이라^{William Oliveira}와 앨런 에스퀴나^{Allan Esquina}가 “제대로 배우는 자바스크립트^{JavaScript The Right Way}”라는 가이드를 작성했습니다.

초보자와 숙련된 개발자를 대상으로 자바스크립트 모범 사례를 살펴보기 위해 쓰인 이 가이드는 기본부터 코드 스타일, 도구, 프레임워크, 게임 엔진, 참고 자료, 영상 강의까지 개발자의 삶을 편하게 만들 수 있는 글과 팁, 트릭을 모았습니다. 이 가이드는 8개 언어(한국어 포함)로 제공됩니다. 자바스크립트의 지혜로 가득 찬 금광인 셈이죠.

테일윈드 vs. BEM

CSS를 작성하고 유지하는 두 가지 접근법으로 테일윈드^Tailwind와 BEM이 있습니다. 하지만 언제 어떤 걸 사용해야 할까요? 에릭 베일리^{Eric Bailey}가 지적하듯 둘의 비교는 사과와 오렌지를 견주는 것과 같습니다. 수년간 여러 프로젝트와 다양한 규모에서 테일윈드와 BEM을 사용한 경험을 바탕으로 장점과 단점을 요약했습니다.

미리 작성된 클래스를 사용하는 테일윈드의 유용한 CSS 접근 방식은 분산된 여러 프로젝트 및 팀의 구현들을 유사하게 만들어 프로젝트 사이에 통일성을 줍니다. 하지만 테일윈드가 CSS의 모든 기능, 특히 최신 기능을 반영하지는 않습니다. 반면 BEM은 유연하며 모듈식에 확장성을 가져 대부분의 사용자 인터페이스 구성 요소를 표현할 수 있기 때문에 예술 지향적인 작업에 적합합니다. 두 접근법은 서로 다른 강점을 가지고 있지만 에릭의 요약 리스트를 보면 프로젝트가 가진 문제를 해결할 수 있는 방법을 찾는 데 도움을 받을 수 있습니다. 혹시 큐브 CSS^{CUBE CSS}에 대해 들어보셨나요? 두 가지 접근 방식이 가진 장점을 활용한 해결책으로 한 번 자세히 살펴볼 만합니다.

상호작용적인 종이접기 시뮬레이션

오랫동안 종이접기는 전 세계에서 가장 재미있는 공예로 알려져 왔습니다. 하지만 화면에서는 그것이 어떻게 보일까요? 아만다 가세이^{Amanda Ghassaei} 역시 같은 궁금증을 가지고 종이접기가 화면에서 어떻게 구현되는지 패턴을 시뮬레이션하는 앱을 만들려고 했습니다.

쓰리.js^Three.js와 제이쿼리^jQuery 같은 외부 라이브러리의 도움으로 종이접기 시뮬레이터^{Origami Simulator}가 완성되었습니다. 이 앱은 동적 GPU 가속 해결책을 이용해 접힌 (또는 부분적으로 접힌) 종이접기의 기하를 계산하고 접힌 재료의 물리적 특성을 보여줍니다. 또한 웹VR^WebVR을 사용해 몰입되는 상호작용 VR 모드를 지원합니다. 감동적입니다!

CSS 애니메이션으로 사용자 경험 증대시키기

애니메이션은 지난 몇 년간 사용자 경험을 개선하는 인기 있는 방법이 되었습니다. 하지만 CSS 애니메이션과 전환이 장식이 아니라 사용자에게 의미를 주는 존재라는 사실은 어떻게 확인할 수 있을까요? 지난 8월 온라인 시프트리모트^{Shift Remote} 콘퍼런스에서 스테파니 월터^{Stéphanie Walter}는 CSS 애니메이션으로 UX를 향상시키는 방법을 발표했습니다. 스테파니가 발표를 놓친 분들을 위해 알아야 할 모든 것을 이야기와 함께 블로그 게시물로 요약했습니다.

스테파니는 전환과 애니메이션을 구축하기 위한 CSS 문법을 살펴보는 것을 비롯해 다른 애니메이션보다 특정 애니메이션이 더 잘 작동하는 이유를 탐구합니다. UI 애니메이션이 제대로 느껴지도록 올바른 타이밍과 지속 시간을 찾는 팁을 공유하고 애니메이션이 사용자 경험 개선에 기여하는 이유와 방법을 설명합니다. 큰 힘에는 큰 책임감이 따르는 법. 애니메이션이 멀미를 유발하지 않도록 하는 방법도 자세히 살펴볼 수 있습니다. 참조하기에 훌륭한 가이드입니다.

펜 도구 기술을 향상시키는 간단한 게임

여러분은 펜 도구를 얼마나 잘 다루고 있나요? 포토샵, 일러스트레이터, XD나 기타 프로그램으로 작업할 때 펜 도구가 고민이라면 베지에 게임^{Bézier Game}을 이용하면 빠르고 재미있는 방법으로 능력을 한 단계 더 향상시킬 수 있습니다.

따로 설명이 필요 없는 튜토리얼을 완료한 뒤에 도전이 시작됩니다. 첫 번째 레벨에서는 가급적 최소한의 노드를 사용해 다시 그릴 수 있는 어렵지 않은-하지만 매우 까다로운- 작은 자동차 모양이 기다리고 있습니다. 각자 제자리로 맞아떨어지는 노드와 곡선은 무지개색으로 경로 일부를 보여주고 펜 도구의 고수가 되는 데 한 걸음 더 가까이 다가갈 수 있도록 도와줍니다. 첫 시도에서 성공하지 못했다고 절망하지 마십시오. 모든 것이 그렇듯, 연습이 완벽하게 만들어줄 것입니다.

자바스크립트 디버깅에 필요한 팁과 비법

버그가 발생했을 때 현명하게 대처하는 방법을 알고 있는 것이 좋겠죠. 자바스크립트 코드를 디버깅해야 할 경우에 대비해 션 히긴스^{Sean Higgings}가 모범 사례를 준수하면서도 올바른 디버깅 접근법을 찾고 문제를 해결하는 데 도움이 되는 편리한 글을 작성했습니다.

가끔 자바스크립트 이벤트를 디버깅하기 위해 콘솔에 이벤트를 기록하고 싶을 때가 있습니다. 이런 상황을 위해 마티아스 쿠퍼슈미트^{Matthias Kupperschmidt}는 브라우저 이벤트를 여러 번 보내고 추적하는 것을 방지하는 멋진 트릭을 공유합니다. 양식에서 보내는 제출 이벤트 수를 확인하는 데 적합합니다.

계속 스매싱과 함께해주세요. 다음에 만나요!

월간 동향이 도움이 되셨나요? 새해와 함께 새로운 도전이 찾아오는 만큼 앞으로는 좋은 시간이 더 많을 거예요. 지속적인 지원과 관심에 감사드립니다. 진심으로 감사해요! 우리 함께 헤쳐나가요!