[스매싱 매거진 6월 총정리] 그동안 무슨 일이 있었나요?

스매싱 매거진 인기 주제

우리는 웹 산업에서 현재 일어나고 있는 다양한 주제들에 대해 매일 새로운 글을 올립니다. 그동안 독자 여러분이 즐겁게 읽고 추천한 글들을 소개합니다.

• “동등한 경험: 동등한 사고” – 에릭 베일리^{Eric Bailey}
• “사용자 인터뷰 질문을 개선하는 12가지 방법” – 슬라바 셰스토팔로프^{Slava Shestopalov}
• “뷰js 컴포넌트 사이에서 데이터 전달하기” – 매트 마리보요크^{Matt Maribojoc}
• “리액트 컨텍스트 API 알아보기” – 유서프 파루크^{Yusuff Faruq}
• “디자인 콘셉트의 효율성을 테스트하는 법” – 폴 보아그^{Paul Boag}

뉴스레터 베스트 글

솔직히 말하자면 스매싱 뉴스레터의 분량을 유지하기 위해 격주로 고생하고 있습니다. 멋진 프로젝트를 진행하는 뛰어난 사람들이 너무 많거든요. 프로젝트에 참여한 모두에게 박수를 보냅니다!

추신: 이 글을 작성하고 준비해준 코시마 밀케^{Cosima Mielke}에게 감사의 말을 전합니다.

최신 CSS로 오래된 CSS의 문제를 해결하는 법

때때로 CSS를 완벽히 이해하기 어렵다는 건 우리 모두 알고 있습니다. div를 가운데 정렬하는 법처럼 오래된 문제들을 생각해보세요. “최신 CSS로 오래된 CSS의 문제를 해결하는 법”에서는 스테퍼니 에클스^{Stephanie Eckles}가 13년간 프론트엔드 개발자로서 해결해온 크고 작은 CSS 문제들의 해결법을 분석해봅니다.

오래된 ‘가운데 정렬 문제’가 아니더라도 같은 높이의 요소 만들기, 드롭다운 메뉴에 접근성을 부여하는 법, 버튼 스타일링 등 다양한 도전적인 상황들에 대한 해법을 알려줍니다. 꾸준히 업데이트 중인 스테퍼니의 웹사이트를 여러분도 주기적으로 들어가보세요. 아주 대단합니다!

모두를 위한 일러스트

일러스트는 디자인에 개인적인 느낌^{personal touch}을 줄 수 있는 훌륭한 방법입니다. 하지만 모든 사람이 일러스트레이터만큼의 재능을 타고나지 않았고, 모든 프로젝트가 실력 있는 사람을 고용할 정도로 예산이 충분하지도 않습니다. 파블로 스탠리^{Pablo Stanley}와 친구들은 자가격리 기간에 그런 상황을 바꾸기로 마음먹고 누구든 미술 작품을 만들 수 있는 도구를 만들었습니다. 블러시^Blush를 만나보세요.

블러시는 전 세계 아티스트들이 만든 일러스트를 조합해서 라이브러리들로 구성한 모음집입니다. 캐릭터, 도시 경관, 식물, 음식, 추상화 뭐든 한 라이브러리에서 원하는 일러스트를 골라 모든 세부사항을 조정하여 원하는 이야기로 조합해보세요. 파블로의 말을 따르면 “벡터로 레고놀이를 하는 것”과 같습니다. 일러스트는 고화질의 PNG 파일로 내려받을 수 있습니다. 만약 일러스트레이터로서 다른 사람들이 여러분의 작품을 사용할 수 있도록 하고 싶다면 블러시에 참가해보세요. 서로를 위해 나누고 돕는 훌륭한 예입니다.

플렉스박스를 알려주는 코드

플렉스박스를 배우고 싶어도 전부 이해하기에는 좀 벅차 보이지 않았나요? 전부 이해할 필요는 없습니다. 플렉스박스의 마법을 완벽히 구사하려면 사실 짧은 코드 30개면 충분하답니다. 서맨사 밍^{Samantha Ming}이 여러분을 도와드릴 것입니다.

서맨사가 준비한 플렉스박스30^Flexbox30는 짧고 정확한 무료수업 30개로 플렉스박스를 알려줍니다. 플렉스박스의 핵심 개념을 배운 다음 부모와 자식 속성에 입력한 값에 따른 결과를 확인해보고 수업마다 참고할 치트시트를 제공합니다. 이 치트시트는 플렉스박스를 알고 있지만 일부 속성 때문에 고생하는 사람들에게 도움이 될 것입니다.

전 세계 기준의 웹사이트 속도 측정기

성능 벤치마크 도구는 보통 특정 위치에서의 성능을 측정합니다. 그렇다면 한곳에 살고 있지 않은 실사용자들에게 여러분의 사이트는 어떻게 작동할까요? 부문별로 더 정확한 결과를 얻기 위해 워드프레스의 보안 플러그인 워드펜스^Wordfence 제작자들이 전 세계 각 지역에서 실제 성능을 측정하는 도구 패스트 오어 슬로^{Fast or Slow}를 만들었습니다.

패스트 오어 슬로는 전 세계의 13개 도시에 있는 13개 서버로 구성된 네트워크에서 데이터를 받습니다. 각 서버는 같은 성능을 갖도록 조절돼 사이트가 실사용자가 어떻게 느끼는지 정확한 지표를 제공합니다. 패스트 오어 슬로에서 제공하는 성능 시험은 사이트 성능에 대한 전체 평가와 지리적 위치에 따른 결과, 성능을 떨어트리는 요소의 해결법인 CSS 최소화, 이미지 최적화, 캐시에 대한 평가를 보여줍니다. 패스트 오어 슬로는 무료입니다.

스크린샷을 위한 깔끔한 브라우저프레임

스크린샷을 찍을 땐 두 가지 선택지가 있습니다. 전체 브라우저 창을 촬영해 브라우저에 깔린 확장프로그램과 북마크를 함께 찍히게 하거나, 덜 복잡해 보이도록 아무런 테두리 없이 웹사이트 내부만 촬영하는 것입니다. 조금 더 정교한 결과물을 원한다면 브라우저프레임^Browserframe을 경험해보세요.

스크린샷을 드래그해 놓기만 하면 보기 좋은 브라우저프레임에 넣어줍니다. 이미지를 내려받기 전에 다양한 브라우저와 여러 운영체제, 원하는 테마를 선택할 수 있고 배경 색상, 그림자, 패딩 등 여러 세부사항을 조절할 수도 있습니다. 블로그 글이나 소셜미디어, 슬라이드 쇼 등 스크린샷을 쓰는 곳에 매우 좋습니다.

SVG 패스 데이터 문법 알아보기

SVG 패스 데이터 문법이 정확히 어떤 의미인지 알고 있나요? 마티외 뒤투르^{Mathieu Dutour}는 SVG를 이용한 지 꽤 됐지만 패스 데이터 구조를 이해하지 못해 고생했습니다. 그래서 패스 데이터를 시각화하는 도구를 만들었답니다.

SVG 패스 비주얼라이저^{SVG Path Visualizer}는 여러분이 입력한 SVG 패스 데이터를 시각화해주고 다른 명령어를 확인하게 해줍니다. 또한 다양한 예시를 통해 문법과 친근해지고, SVG의 본질적인 부분을 통찰력 있게 보도록 도와줍니다.

도래한 미래

프로젝트를 진행 중인데 책 사진을 넣고 싶어졌다고 해봅시다. 책상 옆에 놓여 있는 책을 휴대폰 카메라로 찍고 컴퓨터에 보내 포토샵으로 배경을 지운 뒤 파일에 사진을 첨부합니다. 그런데 현실에서 책을 복사해 넣고 싶은 화면에 붙여 넣는다면 어떨까요? SF 소설 같지만 사실 지금 가능한 일입니다.

연구용 프로토타입인 AR 카피 페이스트^{AR Copy Paste}는 주변에 있는 물건을 복사해 이미지 편집 소프트웨어에 붙여 넣을 수 있게 해줍니다. 이 과정에는 모바일 앱과 앱-포토샵 사이의 인터페이스 역할을 하는 로컬 서버, 이미지를 모양에 맞게 잘라주는 물체 인식 및 배경 삭제 서비스라는 3개의 독립적인 모듈이 관여합니다. AR(증강현실)의 미래를 보여주는 인상적인 예시입니다.

블랙 일러스트레이션

유색인은 일러스트나 시각 자료에서 잘 찾아볼 수 없습니다. 디지털 세계에 변화의 불씨를 일으키기 위해 5four는 다양성 있는 모습과 수많은 종류의 업무에 임하고 있는 유색인을 보여주는 일러스트를 모아 블랙 일러스트레이션^{Black Illustration}을 만들었습니다.

웹사이트나 마케팅 프레젠테이션, 인포그래픽 등 원하는 곳에 쓸 수 있는 여러 일러스트 팩을 제공합니다. 사무실에서 일하거나 재택근무를 하고 대화하는 모습은 물론 의료진의 모습도 보여주는 “오피스 허슬 팩^{The Office Hustle Pack}”과 #BlackLivesMatter(흑인의 생명은 소중하다), 인종 간 불평등에 대한 관심을 촉구하는 “무브먼트 팩^{The Movement Pack}”은 무료로 내려받을 수 있습니다.

눈으로 보는 이징 커브

현실에서의 움직임은 유연하고 거친 느낌이 없으며 시작과 끝이 분명하지 않고 일정한 속도도 없습니다. 이징 커브^{Easing curve}는 웹에서의 움직임에 자연스러운 느낌을 줍니다. 실제로는 바로 이해하기 어렵고 추상적인 편입니다.

폴 맥그레거^{Paul Macgregor}가 일반적으로 쓰이는 이징 커브의 효과를 시각화하려고 만든 유용한 도구 이징^Easing은 다양한 인터페이스를 이해하도록 도와줍니다. 갤러리 캐러셀부터 사이드 메뉴, 스크롤 잭, 모달까지도요. 그냥 원하는 이징 커브를 선택하면 실제 작동 과정을 볼 수 있고, 직접 만든 효과를 넣을 수도 있습니다. 북마크에 넣어두세요.

요즘 개발자들이 일하는 방법

스택 오버플로^{Stack Overflow}에서 매년 개발자 설문조사를 진행한 지 어느덧 10년이 되었습니다. 그 사이 코딩하는 사람들에게 가장 영향력 있는 설문조사로 자리잡았습니다. 올해는 다양성을 보여주고자 전 세계의 개발자 65,000명을 대상으로 공부하는 방법, 사용 도구, 희망사항을 조사했습니다. 2월에 실시된 설문조사 결과는 업계 내부의 통계를 종합적으로 보여줍니다.

이번 설문조사에서는 개발자의 전문적∙인구학적 배경을 비롯해 사용 도구나 인지도, 개발 환경의 모습, 문제를 배우는 법, 경력의 가치 판단, 일의 우선순위, 근무조건 같은 문제를 해결하는 방법을 소개합니다. 흥미로운 통찰을 얻을 수 있을 것입니다.

Div 하나로 만드는 CSS 예술

div 하나로 뭘 할 수 있을까요? 린 피셔^{Lynn Fisher}는 창조적인 답으로 CSS 미술 프로젝트 싱글 Div^{A Single Div}를 소개했습니다.

모든 그림은 단일 div 요소에 CSS로 만들어졌으며 템플릿을 위해 퍼그^Pug를, CSS 전처리를 위해 스타일러스^Stylus를 사용합니다. 글자와 기하학적 패턴부터 임의의 객체와 작은 문자에 이르기까지 CSS로 달성할 수 있는 멋진 예를 모두 보여줍니다.

데이터를 탐험해보는 마법의 노트북

오픈소스는 소프트웨어 개발과 공유, 협업, 투명성을 표준으로 만들었습니다. 오픈소스를 모델로 삼아 만들어진 옵저버블^Observable은 연결된 세계를 위해 데이터 과학의 재구성을 목표로 하며 데이터 과학을 더욱 접근하기 편하고 사용하기 쉽고 더욱 사회적이게 만듭니다.

“데이터를 탐색하고 코드적인 사고법을 익히기 위한 마법의 노트북”이라고 설명한 옵저버블로는 데이터로 스케치를 할 수 있습니다. 시각화를 프로토타이핑할 수 있고 웹 API에 연결하며 프로토타입이 변경될 때마다 ‘노트북’을 실시간으로 업데이트할 수 있습니다. 커뮤니티를 통해 서로 배우고 컴포넌트를 공유하고 재사용할 수 있게 만드는 것이 핵심 개념입니다. 팀은 실시간으로 노트북을 동시 편집할 수도 있습니다. 이제 이걸로 뭘 만들어볼까요? 보고서, 설명의 시각화, UI 프로토타입, 문서, 예술 프로젝트, 시각디자인 등 뭘 상상하든 만들 수 있습니다.