Skip to content

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

매달, 스매싱팀에서는 그간의 일을 모아 소개합니다. 지난 몇 주는 좀 어려웠습니다. 코로나19, #BlackLivesMatter 등 전 세계에서 수많은 일이 벌어지고 있습니다. 그 사이 일어난 일들을 소개해드립니다.

스매싱 매거진 인기 주제

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

 

뉴스레터 베스트

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

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

 

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

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

Modern CSS Solutions

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

 

모두를 위한 일러스트

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

Blush

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

 

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

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

Flexbox30

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

 

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

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

Fast or Slow

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

 

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

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

BrowserFrame

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

 

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

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

SVG Path Visualizer

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

 

도래한 미래

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

AR Copy Paste

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

 

블랙 일러스트레이션

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

Black Illustrations

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

 

눈으로 보는 이징 커브

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

Easings

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

 

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

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

2020 Developer Survey

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

 

Div 하나로 만드는 CSS 예술

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

A Single Div

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

 

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

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

Observable

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

 

 

도서 소개


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

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


맨위로