Skip to content

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

많은 일들이 벌어지고 있는 지금 스매싱의 새 소식들을 모두 한곳에서 살펴보는 것이 좋겠죠. 스매싱 팀이 한 달 동안 뭘 하고 지냈는지, 어떤 자료가 뉴스레터 상위권에 올랐는지 알아보세요!

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

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

 

스매싱 뉴스레터: 베스트

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

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

 

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

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

Awesome Figma Tips

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

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

 

SVG 사각원 제작기

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

SVG Squircicle Maker

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

 

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

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

The Ultimate Guide to UX Research

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

 

다크 모드 완벽 가이드

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

Light and dark mode on DuckDuckGo

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

 

결제 과정 단순화하기

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

Simplified checkout experience

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

 

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

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

The Maturity Of UX Writing

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

 

개발자 생태계 현황 2020

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

The State of Developer Ecosystem 2020

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

 

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

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

Inline validation in a form

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

 

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

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

Measure

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

 

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

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

JavaScript The Right Way

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

 

테일윈드 vs. BEM

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

Tailwind versus Bem

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

 

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

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

Interactive Origami Simulation

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

 

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

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

Enhancing User Experience With CSS Animations

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

 

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

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

The Bézier Game

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

 

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

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

JavaScript Debugging

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

 

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

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

 

 

도서 소개


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

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

Smashing Magazine 기사 모아보기



맨위로