[스매싱 매거진 9월 총정리]국경 없는 웹디자인의 세계

스매싱 매거진이 처음 글을 게시한 날이 언제였는지 아시나요? 뭐 조금만 찾아도 알아볼 수 있답니다. 2006년 9월이었죠. 그때부터 웹은 말 그대로 엄청난 변화를 겪었습니다. 하지만 저희는 항상 한 가지 진심을 갖고 있었습니다. 바로 양질의 콘텐츠입니다. 대형 출판사가 되기를 바란 적은 한 번도 없습니다. 저희 팀은 소규모지만 자기 일을 진심으로 사랑하는 사람들이 모인 정말 멋진 팀이죠. 열정적이고 헌신적입니다. 정직하며 정중하고요. 전문적이지만 그리 딱딱하지도 않습니다. 그리고 아주 기발하고 개인적인 이야기들을 전해줍니다.

올해는 계획과 다르게 흘러갔지만 그래도 잘 대응한 것을 매우 자랑스럽게 생각합니다. 록다운이 발표되자마자 온라인 이벤트를 시작했고 놀라울 정도로 좋은 반응을 얻기도 했습니다. 저희 팀은 전 세계에 흩어져 있는 서로 다른 시간대의 사람들을 만나 즐거운 시간을 보내기도 했습니다.

온라인 출판을 해온 지 14년이 지난 지금, 우리는 생산성을 높이고, 디자인과 개발 능력을 향상시키고, 워라벨의 균형을 맞추기 위해 최선을 다하고 있답니다. 여러분이 늘 새로운 길을 살펴보고 배우는 데 저희 기사, 가이드, 팟캐스트, 전자책, 채용 공고, 콘퍼런스, 뉴스레터, 멤버십이 도움이 됐으면 좋겠습니다. 그게 바로 지금까지 저희가 늘 이야기해온 스매싱의 정신입니다. 😉

편집장 레이철 앤드루^{Rachel Andrew}는 지난해 스매싱 팀원들의 개인적인 이야기를 많이 공유했습니다. 하지만 스매싱 매거진을 최근 들어 읽기 시작했거나 한동안 듣지 못한 분들에게는 이곳이 어떻게 돌아가는지 자세히 알아볼 수 있는 가이드라인을 추천합니다. 저희는 항상 새로운 사람들을 만나고 가능성을 살펴볼 기회를 기다립니다. 여러분이 스매싱 팀의 일원으로 참여해도 환영한답니다.

스매싱 매거진 인기 주제

스매싱 매거진에서는 웹 업계와 관련한 글을 매일 적어도 하나씩 올립니다. 물론 언제든 구독할 수 있는 RSS 피드도 있답니다. 새 콘텐츠를 제일 먼저 만나보세요!

• “화면 멀미를 가진 사람들을 위해 동작 줄이기를 이용해 디자인하기^{Designing With Reduced Motion For Motion Sensitivities}” – 발 헤드^{Val Head}
• “파이어베이스^Firebase를 사용해 나만의 댓글 창 만들기^{How To Build Your Own Comment System Using Firebase}” – 아만 타커^{Aman Thakur}
• “피그마에 대해 개발자들이 알아야 할 모든 것^{Everything Developers Need To Know About Figma}” – 주른 반 위센^{Jurn van Wissen}
• “아이오닉 ^Ionic 리액트 ^React로 구현하는 폼과 검증^{Forms And Validation In Ionic React}” – 제리 나비^{Jerry Navi}
• “장고^Django의 마법 이해하기^{Demystifying Django’s Magic}” – 프레시어스 두부에즈^{Precious Ndubueze}

베스트 뉴스레터

매주 스매싱 뉴스레터를 보내지만 더 짧고 주제별로 구성된 뉴스레터를 목표로 하고 있습니다. 지금까지 CSS, 프론트엔드 접근성, 자바스크립트에 대해 다뤘습니다. 물론 모두에게 다가갈 수 있도록 여러 주제를 섞은 뉴스레터도 발행해보고 싶답니다!

저희는 웹 업계의 커뮤니티에서 활동하는 사람들이 진행하고 있는 멋진 프로젝트들을 공유하는 것을 좋아합니다. 여러분이 이 소식들을 멀리 퍼뜨리는 데 도움이 돼주면 좋겠습니다. 구독자 여러분이 가장 흥미로워하고 가치 있다고 생각할 만한 프로젝트 몇 가지를 소개하겠습니다.

무료 벡터 일러스트레이션과 애니메이션

외계인에게 납치된 소, 슬픈 얼굴의 아이스크림 콘, 물에서 나오는 로크네스 괴물(네스 호에 산다는 괴물). 픽셀트루스튜디오^{Pixel True Studios}에서 무료로 다운로드할 수 있는 벡터 일러스트레이션 및 애니메이션 세트의 재미있는 오류 상태 알림 애니메이션 중 일부입니다.

오류 상태 알림 애니메이션 외에도 보안, 검색, 연락처, 전자상거래, SEO 등 웹 프로젝트에서 필요한 일러스트레이션, 아이콘, 애니메이션 등 모든 것을 가지고 있답니다. 삽화는 SVG로 제공되며 애니메이션은 로티^Lottie로 제작됐습니다. MIT 라이선스에 따라 배포됐으며 개인 및 상업 프로젝트 모두에 무료로 사용할 수 있습니다. 디자인에 재미있고 친근한 터치를 추가하기에 좋은 방법입니다.

일본어와 키릴문자 웹디자인 탐방

웹은 전 세계에 걸쳐 있지만 웹디자인에 대해 이야기할 때 제시되는 예시와 멋진 결과물들은 주로 26자의 라틴 알파벳을 중심으로 구성돼 있습니다. 다른 언어 시스템은 토론의 대상이 아닐 때도 종종 있습니다. 훌륭한 웹사이트가 많은데도 이것이 사람들의 눈에 띄지 않는 원인이 되기도 합니다. 이제 그걸 바꿔야 합니다.

일본어로 된 웹디자인을 둘러보고 싶다면 반응형 웹디자인 JP^{Responsive Web Design JP}가 적합합니다. 이 모음집은 독특한 가벼움으로 빛을 발하며 본질에 집중해 일본어에 능숙하지 않아도 기술만 안다면 쇼케이스를 둘러볼 수 있습니다.

라틴 문자 체계 너머에서 영감을 받을 수 있는 사이트로, 키릴 문자를 사용하는 사이트에 집중해 살펴보면 키릴 디자인^{Cyrillic Design}이 있습니다. 아름다운 디자인을 많이 발견할 수 있고, 특히 대담한 표현을 위해 문자가 사용되는 모습은 흥미롭습니다. 우리의 안전지대 밖에서 영감을 얻을 수 있는 환상적인 두 조언가라고 할 만합니다.

쉽게 만들어진 클라우드 다이어그램

종종 복잡한 관계와 맥락을 가시화하는 데 긴 설명을 함축적으로 표현한 다이어그램이 대체될 수 있습니다. 마크 맨카리어스^{Mark Mankarious}는 클라우드 아키텍처를 시각화해야 할 때 도움이 되는 환상적인 도구를 제공합니다. 바로 아이소플로^Isoflow입니다.

아이소플로는 브라우저에서 바로 작동하며 사용하기 쉬운 인터페이스를 통해 단 몇 분 만에 아름다운 등각 투영 다이어그램을 만들 수 있게 도와줍니다. 필요한 요소를 캔버스에 끌어다 놓고, 연결하고, 레이블을 추가하기만 하면 됩니다. 만족스러운 결과를 인쇄 또는 웹용 다이어그램으로 내보낼 수 있습니다. 벡터 아이콘 덕분에 어떤 크기에서도 선명하게 보입니다. 정말 시간을 절약해주죠.

스크린 리더 사용자를 불편하게 만드는 웹사이트 기능들

대체 캡션의 누락, 자동 재생되는 비디오, 레이블이 지정되지 않은 버튼, 잘못된 제목 사용, 액세스할 수 없는 웹 양식 등은 시력이 좋은 사용자에게는 작은 문제처럼 보이는 요소일지 몰라도 시각 장애인에게는 혼자서 웹사이트를 사용할 수 있느냐 없느냐의 문제로 직결됩니다. 홀리 툭^{Holly Tuke}은 이 사실을 경험을 통해 알고 있습니다.

흔히 마주할 수 있는 접근성 문제에 대한 인식을 높이기 위해 홀리는 매일 스크린 리더 사용자로서 직면하는 웹사이트의 불편한 기능 다섯 가지와 이를 해결하는 방법을 요약했습니다. 작은 세부 사항이 큰 차이를 만들었습니다.

팀을 위한 접근성

접근성은 코드를 뛰어넘는 영역으로, 접근성 좋은 웹사이트를 제공하려면 팀 모두가 책임 의식을 가져야 합니다. 여러분의 팀이 접근성 문제를 해결하기 위한 올바른 전략을 아직 찾지 못했다고 생각한다면 페터 반 그리켄^{Peter van Grieken}의 가이드 ‘팀을 위한 접근성‘에서 도움을 받아보세요.

총 6부로 구성된 이 가이드는 제품 관리자, 콘텐츠 디자이너, UX 디자이너, 비주얼 디자이너, 프론트엔드 개발자는 물론, 접근성 테스트와 관련된 다양한 전문가를 대상으로 하는 문제를 해결해줍니다. 이 가이드는 현재 작업 중이며 제품 관리자 및 UX 디자이너를 위한 부분은 이미 발매됐습니다. 접근성을 처음부터 팀의 작업흐름에 통합시키는 데 도움이 되는 훌륭한 리소스입니다.

전 세계를 위한 디자인 시스템

효과적인 디자인 시스템은 UI 구성 요소를 재사용해 제품 전체에서 일관된 사용자 경험을 생성하는 데 도움을 줍니다. 디자인 시스템에 대한 영감이 필요하다는 생각으로 조시 쿠식^{Josh Cusick}은 전 세계 디자인 시스템 모음인 피그마를 위한 디자인 시스템^{Design Systems For Figma} 프로젝트를 시작했습니다.

아틀라시안^Atlassian, 아우디^Audi, 우버^Uber, 시카고시 ^{City of Chicago}, 애플^Apple, 골드만삭스^{Goldman Sachs}, 슬랙^Slack 등 45개 회사를 모았습니다. 모든 디자인 시스템은 피그마에서 생성됐으므로 피그마 사용자라면 파일을 복제하거나 다운로드해 디자인 시스템이 어떻게 만들어졌는지 살펴볼 수 있습니다. 다른 디자인 팀의 작업 방식에 대해 살펴볼 수 있는 귀중한 자료입니다.

인터페이스의 과거와 현재, 미래

우리는 왜 인터페이스를 만들까요? 2018년 제품 디자이너 에산 노워사레히^{Ehsan Noursalehi}가 밋업에서 강연한 주제입니다. 올 여름 몇 달간의 엄격한 이동제한을 겪으면서 에산은 기술과의 관계에 대한 새로운 시각을 가지고 자신의 관찰과 질문을 온라인 마이크로 북으로 변환하기로 결정했습니다.

우리는 왜 인터페이스를 만들까^{Why Do We Interface}는 인터페이스가 인간이란 존재의 의미를 근본적으로 바꿔온 방식대로 인터페이스를 역사적 측면에서 살펴보고 그 정보를 활용해 이해를 구축합니다. 1993년에 실패한 애플 뉴턴^{Apple Newton}부터 현재의 음성 우선 인터페이스와 미래가 가져올 도전에 이르기까지 생각을 자극하는 여정을 통해 디자이너란 직업이 가진 진정한 목적을 상기시켜줍니다.

쉽게 거품 만들기

‘거품은 거품이다’라는 말이 거품일까요? 그럴 리가요! 로키시 라젠드란^{Lokesh Rajendran}이 웹과 플러터 앱에서 쉽게 거품 모양을 만들 수 있는 멋지고 간편한 도구를 만들었습니다.

거품 생성기 블롭스^Blobs는 무작위의 또는 정해진 거품을 만들어냅니다. 여러분은 그저 거품의 무작위성이나 복잡성을 조정하기만 하면 됩니다. 거품의 색상도 변경할 수 있고 물론 거품 내부나 테두리 색으로 그러데이션을 적용할 수도 있습니다. 생성된 거품을 프로젝트에서 바로 사용하거나 애니메이션 효과를 내거나 자르기 등 편집을 하고 싶다면 생성기에서 제공하는 SVG와 플러터 코드를 쓰면 됩니다. 작은 UI 애니메이션이나 아이콘과 프레임뿐만 아니라 생각하는 모든 것이 배경에 딱 맞습니다. 거품놀이를 즐겨보세요!

브라우저에서 자바스크립트 가속하기

속도가 느리다고 놀림받던 자바스크립트는 이제 가장 최적화되고 성능이 뛰어난 동적 언어가 되었습니다. 그렇다면 실제 프로젝트에서 최대한의 성능을 낼 수 있는 방법은 무엇일까요? 조너선 다이너^{Jonathan Dinu}는 자바스크립트 애플리케이션의 속도를 높이는 방법을 선택할 수 있는 로드맵을 공유했습니다.

로드맵의 핵심은 바로 플로차트^flowchart입니다. 어떤 유형의 병목현상이 성능을 저하시키는지 파악하고 해결하는 방법을 선택할 수 있게 해줍니다. 조너선은 브라우저의 내장 API와 내장 기술을 활용해 자바스크립트 실행을 가속화할 수 있는 다양한 옵션을 소개하고 성능이 떨어졌을 때 사용할 수 있는 유용한 팁을 제공합니다. 스트리밍 데이터, 웹 워커, GPU 및 웹 어셈블리에 대해 깊이 다룹니다.

나만의 2D 게임 만들기

아케이드, 슈팅, 어드벤처, 퍼즐 중에서 여러분은 어떤 게임을 좋아하나요? 잘 모르겠다면 Ct.js가 딱입니다. 무료 오픈소스 게임 프레임워크이자 편집기를 사용해 모든 장르의 2D 게임을 만들면서 자바스크립트 능력을 확인해볼 수 있습니다.

이 모듈 라이브러리는 WebGL을 기반으로 작동하며, 시각적 편집기^{visual editor}를 통해 게임에 생명을 불어넣는 데 도움을 줍니다. Ct.js는 초보자에게도 친숙하게 설계됐고 튜토리얼, 수정할 수 있는 예제와 데모를 제공합니다. 실력 좋은 사용자는 자기만의 자바스크립트 라이브러리를 추가해 가능성을 확장할 수도 있습니다. 공식 문서에는 변수부터 속성, 조건문, 루프 및 연산까지 자바스크립트의 세계에 대한 간결한 소개가 포함돼 있어서 코딩의 첫 단계를 시작하는 학생들에게 훌륭한 리소스가 될 수 있습니다.

비즈니스 로직을 추출하는 리액트 기반 노드 편집기

여러분의 앱은 매우 다른 비즈니스 로직으로 사용자에게 서비스를 제공하나요? 다른 사용자를 위해 코드의 일부를 켜고 끄기 위해 ‘기능 플래그’를 자주 만드나요? 비즈니스 로직이 복잡하고 유지하기 어렵지 않나요? 이 질문 중 하나에라도 ‘예’ 하고 답했다면 플럼^Flume을 살펴보기 바랍니다.

리액트 기반으로 작동하는 노드 편집기이자 런타임 엔진인 플럼은 비즈니스 로직을 JSON 그래프로 모델링해 변화하는 외부 라이브러리에 따라 반응하는 탄력적인 앱을 만드는 데 도움을 줍니다. 플럼의 세련된 UI를 사용하면 쉽게 그래프를 만들고 편집할 수 있습니다. 또 빠른 엔진은 브라우저와 서버, 자바스크립트 환경, 노드 서버를 사용하지 않는 경우를 비롯해 JSON만 지원되면 어디서든 여러분의 로직을 실행해줍니다. 플럼은 MIT 오픈소스 라이선스로 출시되었습니다.