2021년으로 향하는 카운트다운

정말 정신없는 한 해였네요. 그 덕에 새해와 새 시작에 기대해야 할 이유가 더 많아지지 않았나요? 뭐, 당장 몇 달 앞에 어떤 일이 기다리고 있을지 알 수는 없지만 이 행성에 사는 모든 사람이 자신들이 할 수 있는 일에 최선을 다할 거라는 것은 확실합니다. 전 세계 사람들에게 좋은 일은 적고, 나쁜 일이 많은 한 해였지만 저희가 스매싱에서 했던 일들이 삶을 조금 더 쉽게 만드는 데 도움이 됐길 바랍니다.

온라인 워크숍으로 한 해를 미리 준비하세요

저희 워크숍에 아직 참여를 안 하셨다고요? 스매싱 이벤트 팀은 함께 배우기 위해 전 세계에서 모인 환상적인 참가자들과 함께 워크숍을 진행할 때마다 흥분된답니다. 라이브 디자인과 라이브 코딩 세션 덕에 많은 아이디어가 현실화될 수 있었고, 많은 사람이 새로운 친구들을 사귈 수 있었죠!

이제 더 좋아졌습니다. 진행 중이거나 다가올, 또 예정돼 있는 워크숍들 중에서 원하는 코스를 세 개나 다섯 개, 심지어 열 개까지 선택할 수 있는 워크숍 번들 상품이 나왔답니다!

위 목록 중에서 여러분의 프로젝트나 경력 진로에 맞는 워크숍을 하나라도 찾았길 바랍니다. 만약 이 중에 없다면 트위터로 연락해주세요. 원하는 워크숍이 열릴 수 있도록 최선을 다하겠습니다.

스매싱 뉴스레터 베스트 글

주간 뉴스레터를 통해 여러분들께 유용한 콘텐츠를 제공하고 웹 업계에서 일하고 있는 사람들의 멋진 작업을 소개하고 있습니다. 정말 뛰어난 프로젝트를 진행하고 있는 엄청난 사람들이 너무 많습니다. 여러분이 이 프로젝트들을 널리 알리고 그들의 기여를 인정해주면 더욱 힘이 될 것입니다!

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

CSS 그리드로 레이아웃 변경 막기

CSS 그리드가 복잡한 레이아웃을 만드는 데 훌륭한 도구라는 것은 새로운 소식이 아니죠. 하지만 레이아웃 변경을 막는 데 도움을 준다는 사실도 알고 있었나요? 위베르 사블로비에흐^{Hubert Sablonnière}가 자신이 작업한 UI 컴포넌트에서 상태를 변경할 때 레이아웃 변경 문제가 발생한다는 사실을 알아내고는 해결책을 떠올렸습니다. 바로 레이아웃 변경을 방지하는 그리드 쌓기입니다.

절대 위치로 레이아웃 변경을 막는 방법과 비교하면 위베르의 그리드 기반 해결법은 두 개 이상의 패널이 필요한 복잡한 상황들도 해결할 수 있습니다. 또 다른 장점은 전체 컴포넌트의 크기를 알려주는 기준이 될 패널을 만들 필요가 없다는 것입니다. 더 깊이 알아보고 싶은 사람들을 위해 위베르가 수직/수평 변경을 막는 데 필요한 정보들을 소개한 실용적인 블로그 글을 작성해뒀습니다.

고정 헤더와 이동 링크

고정 헤더와 이동 링크의 조합을 구현하는 데 꽤 지칠 수 있습니다. 어쩌면 같은 문제에 부딪힌 경험이 있을지도 모르겠습니다. 링크를 클릭했을 때 이동 링크가 원하는 요소로 이동시켜주지만 고정 헤더가 해당 요소를 가려버리게 됩니다. 이전에는 이런 문제를 해결하려면 엄청 복잡한 코딩이 필요했습니다. 다행히 요즘은 직관적이고 지원이 잘되는 CSS 해결책이 있습니다.

그 방법은 바로 scroll-margin-top 입니다. 헤더에 해당 속성을 지정하면 position: fixed가 지정된 헤더는 더 이상 이동 링크로 옮아간 요소를 가리지 않게 됩니다. 짧은 코드 한 줄이 큰 차이를 만드는 것이죠.

clamp()로 구현하는 유동적인 타이포그래피

유동적인 크기 변화를 위해 CSS가 멋진 새 기능들을 제공했습니다. clamp()와 min(), max()입니다. 브라우저의 크기가 커지고 작아짐에 따라 글자의 크기를 제한하거나 변화시킵니다. min()과 max()는 전달된 값들 중에서 현재의 최솟값과 최댓값을 반환하며 clamp()는 브라우저가 사용할 최솟값, 최댓값을 모두 전달받습니다.

트리스 머드포드^{Trys Mudford}가 알려주듯, 크기에 따라 100% 정확하지 않고 광범위하게 유동적인 타이포그래피를 원한다면 clamp()가 도움이 됩니다. 그가 새 기술에 대해 깊이 살펴본 글에서는 clamp()를 사용하는 유용한 팁들을 공유합니다.

오픈소스 화면 녹화 및 표시 도구

무료로 쉽게 사용할 수 있는 화면 녹화 도구를 찾고 있다면 알리사 X^{Alyssa X}의 오픈소스 화면 녹화기 스크리니티^Screenity보다 더 좋은 것을 찾기는 어렵습니다.

스크리니티는 녹화 영상을 캡처하거나 표시, 편집하는 것처럼 프로젝트에 대한 상황별 피드백을 주거나 자세한 설명을 제공하거나 잠재 고객에게 제품을 홍보하려 할 때 도움이 될 만한 기능을 갖추고 있습니다. 게다가 결과 영상에도 시간 제한이 없죠. 예를 들어 화면에 그림을 그리거나 텍스트, 화살표를 추가할 수 있습니다. 또 클릭 위치를 강조하거나 마우스 위치를 표시하고, 눌러서 목소리를 녹음하는 등의 기능도 있죠. 스크리니티는 크롬^Chrome에서 받을 수 있습니다.

인간 친화적인 날짜 선택기

날짜 선택기가 제대로 작동하는 것은 어렵습니다. 토미 펠트^{Tommy Feldt}가 만든 인간 친화적이고 접근성이 좋은 날짜 선택기를 확인해보세요.

자연어 입력을 지원하는 크로노JS^Chrono.js 덕에 사용자는 날짜 선택을 위해 ‘내일’ ‘12월 2일’ ‘5일 후’ 등을 입력할 수 있습니다. 단축 버튼은 가장 가까운 날짜를 선택하는 데 도움을 줍니다. 날짜 선택기는 키보드와 스크린리더로 접근할 수 있습니다(스크린리더나 키보드 사용자를 위한 도움말 기능도 있습니다). 자바스크립트나 CSS로 사용할 수 없으면 기능이 떨어집니다. 매우 훌륭한 콘셉트 아닌가요?

잼스택 탐험가가 되어보세요

여러분에게 아직 잼스택^Jamstack은 미지의 영역인가요? 잼스택 익스플로러^{Jamstack Explorer}가 그 사실을 바꿔드립니다. 이 프로젝트의 미션은 바로 여러분에게 최신 도구와 기술로 웹을 만들도록 알려주는 것이죠.

여러분이 세 가지 코스 중에서 하나를 선택해 잼스택의 세계를 탐험해나갈 때마다 그 과정을 추적해 보상합니다. 타라 Z. 매닉식^{Tara Z. Manicsic}은 앵귤러^Angular의 야생을 안내하고, 필 혹스워스^{Phil Hawksworth}는 네틀리파이^Netlify를 활용해 여러분 사이트의 여러 버전을 제공하고 추적하는 방법을 알려줍니다. 또 캐시디 윌리엄스^{Cassidy Williams}는 넥스트JS^Next.js의 모든 필수 사항을 안내하지요. 세 가지 임무를 모두 끝마치면 수료증을 받을 수 있을 뿐만 아니라 스스로를 최신 도구를 사용해 강력하고 성능이 뛰어나며 안전한 잼스택 탐험가라고 부를 수 있습니다.

원격 디자인을 제대로 하는 법

디자인 검토와 스프린트, 피드백 등 원격으로 디자인을 하다 보면 몇몇 난관에 부닥칠 수 있습니다. 인비전^InVision에서 도움이 되는 유용한 자료들을 모아 여러분과 여러분의 팀이 문제를 해결하도록 했습니다.

이 콘텐츠는 원격 작업에서 가장 까다로운 부분인 창의력 키우기, 협업 돕기, 집중하기 세 가지를 다룹니다. 원격 디자인팀을 운영하는 모범 사례를 알려주기 위해 인비전은 무료 전자책을 발행해 30개국에 퍼져 있는 700명의 직원이 사무실 없이 원격으로 근무하는 경험을 그려냈습니다.

흐름을 유지해주는 전체 화면 카운트다운 타이머

긴 화상 통화나 대화, 워크숍을 진행한다면 일정을 지키는 것이 어려울 수 있습니다. 세션이 흐름을 유지할 수 있도록 쿠스 루이제스테인^{Koos Looijesteijn}은 빅 타이머^{Big Timer}를 만들었습니다.

대담하지만 간단한 이 타이머는 브라우저 창에서 남은 시간을 보여주며 카운트다운합니다. 실수로 브라우저 탭을 닫거나 기기를 다시 시작해도 계정에 방해 요소를 기록합니다. 키보드 단축키를 사용하면 기간을 쉽게 조정하고 카운트다운을 일시중지하거나 정지할 수 있습니다. 북마크에 저장해두기 좋습니다.

집중에 도움이 되는 소리와 음악

주변이 조용하면 제대로 집중하지 못하나요? 그러면 지금 소개하는 도구들 중 하나가 생산성을 더 높여줄지도 모릅니다. 집에서 일할 때 익숙한 사무실 소리가 그립다면 사무실이 그리워^{I Miss The Office}가 집으로 사무실 환경을 불러올 수 있습니다.

사무실 소리가 집중을 돕기보다 오히려 더 산만하게 만들었다고요? 그럼 노이지오^Noizio가 맞을지도 모르겠네요. 이 앱은 자연과 도시의 소리를 섞어서 여러분만의 주변 음악을 만들 수 있게 해줍니다. 집중력을 높여주는 또 다른 접근법으로는 브레인^Brain.fm이 있습니다. 과학자와 음악가, 개발자로 구성된 팀에서 원하는 정신 상태를 위한 기능성 음악을 만들었습니다. 마지막으로 포커스앳윌^Focus@Will 역시 신경과학을 기반으로 만들어져 적절한 간격으로 음악의 특성을 변경해 집중력을 높이도록 해줍니다. 평소 듣던 재생 목록에 훌륭한 대체재가 될 수 있습니다.

2020 웹 연감

2020년을 되돌아보면 올해 웹은 어떤가요? 매년 발표되는 웹 연감^{Web Almanac}은 앞선 질문에 HTTP 아카이브의 통계와 트렌드에 웹 커뮤니티의 전문성을 결합해 질문에 대한 심층적인 답변을 제공합니다. 결과는 750만 개 이상의 웹사이트와 신뢰할 수 있는 웹 전문가에게서 모은 실제 데이터로 뒷받침됩니다.

올해 연감은 22개 챕터로 구성돼 있습니다. 콘텐츠, 경험, 퍼블리싱, 배포 네 부분으로 나뉘어 있고 각 부분을 다양한 각도에서 살펴봅니다. 게다가 웹 성능의 현황에 대한 통찰력 있는 시각까지 포함돼 있습니다.

사이트의 리퀘스트 맵 생성

사이트에서 전송되는 모든 바이트는 어디에서 왔을까요? 서드파티 구성 요소를 자세히 분석하는 것은 시간이 많이 걸리는 작업이지만 사이트에 있는 서드파티 자료와 그 출처를 파악하는 것이 중요합니다.

사이먼 헌^{Simon Hearne}의 리퀘스트 맵 생성 도구는 입력된 URL에 있는 모든 리퀘스트의 노드 맵을 시각화합니다. 맵의 노드 크기는 전체 용량의 비율에 비례하며 노드 위로 마우스를 가져가면 해당 노드의 크기, 응답 및 로딩 시간에 관한 정보를 얻을 수 있습니다. 안 좋은 일로 놀랄 일은 없죠.

자바스크립트 번들 수정하기!

자바스크립트 코드가 사용되면서 여러분의 자바스크립트 번들도 구식이 됐을 수 있습니다. 구식의 폴리필이 있거나 살짝 오래된 자바스크립트 문법을 사용할지도 모릅니다. 하지만 이런 병목현상을 식별하고 영구적으로 수정하는 데 도움이 되는 도구가 있습니다.

ES티메이터^EStimator는 최신 자바스크립트 구문으로 전환할 때 사이트의 용량과 성능이 향상될 수 있는 정도를 계산합니다. 수정할 수 있는 번들과 수정 시 전체 성능이 얼마나 개선될 수 있는지 보여줍니다. 코드는 깃허브^Github에서도 확인할 수 있습니다.