[스매싱 매거진 7월 총정리] 웹의 음지에서 들려오는 이야기

올해가 예년과 달랐다는 것에는 모두 동의하겠죠. 모두 어떤 식으로든 고비를 겪었습니다. 뉴 노멀이 올드 노멀과 같지 않죠. 물론 모두가 여전히 안전과 행복에 우선순위를 두고 있습니다. 거기에 공동체에서 창의적인 건강에 대한 생각과 감정을 나누는 것도 중요하죠.

안타깝게도 코로나19가 전 세계적으로 퍼져 있어 스매싱 팀은 올해 계획을 크게 변경해야 했습니다. 스매싱 매거진의 레이철 앤드루^{Rachel Andrew}가 멋진 말을 했습니다.

“전염병은 많은 사람의 인생을 예측할 수 없고 두렵게 만들었습니다. 스매싱에서는 훌륭한 콘텐츠를 제공하는 새로운 방법을 빨리 알아내야 했습니다. 비즈니스와 발표자, 워크숍을 지원하는 방식으로 말이죠. 우리는 커뮤니티의 열정과 응원의 메시지, 새로운 포맷을 시도하려는 의지에 감동받았습니다.”

스매싱 매거진 인기 주제

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

• “2020년 7월 CSS뉴스”- 레이철 앤드루^{Rachel Andrew}
• “리액트^React 컨텍스트 API 입문”- 유서프 파룩^{Yusuff Faruq}
• “뷰JS^Vue.js에서 컴포넌트끼리 데이터 전달하기”- 맷 마리보요크^{Matt Maribojoc}
• “이미지에서 height, width 값 설정하기가 다시 중요해졌다”- 베리 폴라드^{Barry Pollard}
• “정적 생성 사이트와 서버사이드 렌더링 앱의 차이점”- 티미 오모예니^{Timi Omoyeni}

뉴스레터 베스트 글

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

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

개성 있는 무료 폰트

타이포그래피는 강력한 커뮤니케이션 도구이자 아이디어 표현 방식이며 창의력을 촉발시키는 방아쇠입니다. 그런 정신을 바탕으로 아르헨티나의 활자 주조 기업 로스타입^Rostype이 개인적·상업적으로 모두 사용할 수 있는 무료 폰트를 만들었습니다.

현재는 15개 폰트를 사용할 수 있고 각 폰트에는 독특한 개성이 있습니다. 어떤 폰트는 가독성만을 위해 특별히 디자인되었습니다. 또 다른 폰트로는 완벽한 디스플레이용 폰트, 눈에 띄는 폰트, 복고풍 폰트, 미래적인 폰트, 역동적인 폰트 등이 있습니다. 코로나 바이러스로 인한 로크다운에서 영감을 받은 폰트도 있습니다. 좀더 독특한 서체를 찾는 분들에게는 보물상자나 다름없습니다.

글씨체 제작 과정

다른 디자인 팀이 작업하고 생각하는 방식을 엿보는 것은 통찰력을 얻는 데 많은 도움이 됩니다. 유튜브^YouTube의 디자인 디렉터 크리스 베티그^{Chris Bettig}가 자신과 팀이 브랜드를 알리기 위해 맞춤 제작한 폰트 유튜브 산스^{YouTube Sans}가 어떻게 탄생됐는지 흥미로운 사례 연구를 공유합니다.

새로운 서체가 등장하기 전까지 유튜브는 상징적인 재생 버튼과 얼터네이트 고딕^{Alternate Gothic}을 수정해 사용했습니다. 크리스 베티그의 설명에 따르면 명확한 폰트 디자인 지침도 없었습니다. 유튜브 제품 전체에서 작동하며 플랫폼의 세계관과 이용자 커뮤니티를 표현하도록 디자인된 유튜브 산스가 이를 바꿔놓았습니다. 폰트 탄생 과정과 디자인 팀이 그 과정에서 맞선 도전들에 대한 통찰력을 얻고 싶다면 사례 연구를 확인해보십시오.

브라우저 폰트 렌더링 불일치 처리하기

버그가 말 그대로 벌레처럼 귀찮게 군다는 것을 알고 있지만 해결책을 알 수 없는 순간이 있습니다. 스테파니 스티맥^{Stephanie Stimac}도 같은 문제에 부딪혔습니다. 사파리^Safari에서 개인 웹사이트에 접속하자 다른 브라우저에서 접속할 때와 홈페이지 제목이 다르게 나온다는 사실을 알았습니다. 이것은 생각보다 어려운 문제였죠.

렌더링이 다른 이유를 찾기 위해 스테파니는 브라우저의 유저 에이전트 스타일시트와 컴퓨티드^Computed CSS 속성 간 차이점을 분석하기 시작했습니다. 곧 크롬^Chrome과 파이어폭스^Firefox, 엣지^Edge의 혼란스러운 행동을 비교하다가 어느 순간 토끼굴에 빠진 자신을 발견하게 되었습니다. 어떤 브라우저가 스타일을 올바르게 처리하는지 간단하게 설명한 답은 구하지 못했지만 여러 번의 테스트를 통해 스테파니는 브라우저가 font-weight 속성을 이용해 폰트의 굵기를 바꾸는 것을 막아내는 방법을 알아냈습니다. 숫자 값으로 입력하는 것이죠. 큰 차이를 만드는 작은 디테일입니다.

쉽게 하는 반복적 성능 측정

웹사이트를 론칭할 때 퍼포먼스 테스트를 시행해 사이트가 빠르고 모범 사례를 잘 따르는지 확인하는 것은 흔한 일입니다. 하지만 배포를 매일 진행한다면 그때마다 어떻게 빨리 처리할 수 있을까요? 스피드라이파이^Speedlify는 이 질문에 대한 재크 레더맨^{Zach Leatherman}의 답입니다.

스피드라이파이는 라이트하우스^Lighthouse와 액스^Axe를 사용해 적어도 하루에 한 번, 최대 한 시간에 한 번씩 계속해서 성능을 추측하고 그 결과 통계를 게시하는 오픈소스 리포지터리를 공개하는 정적 사이트입니다. 컴퓨터에서 로컬로 수동 실행하고, 리포지터리에 데이터를 입력할 수 있습니다. 만약 넷라이파이^Netlify를 사용한다면 완전히 독립된 상태로 쓸 수 있습니다. 성능을 유지하는 가장 좋은 방법입니다.

푸시 알림의 원리

푸시 알림은 2009년 iOS에서 처음 공개되었고 5년 후 웹 푸시까지 소개되었습니다. 현재 iOS및 안드로이드에서 아마존 에코^{Amazon Echo}, 윈도우, 크롬, 사파리, 파이어폭스, 엣지 등 다양한 플랫폼과 브라우저가 지원하고 있습니다. 이 플랫폼들이 각자 조금씩 달라서 푸시 알림을 깊이 파다 보면 디자이너들은 머리를 감싸 쥐게 됩니다.

리 먼로^{Lee Munroe}가 유용한 정보를 공유했습니다. 그는 플랫폼마다 텍스트가 몇 줄 필요한지, 이미지는 어떻게 넣어야 하는지, 글자 수 제한이 있는지 기억하기 어려운 세부 사항들을 요약했습니다. 또 요약을 통해 액세스할 수 없는 운영체제에서 알림의 모양을 확인하는 데 유용합니다. 북마크에 넣어두세요.

애니메이션 키프레임 실시간으로 편집하기

애니메이션을 만들 때 수정하면서 실제로 애니메이션을 보는 것은 도움이 됩니다. 하지만 텍스트 편집기와 브라우저 사이를 왔다갔다해야 한다는 단점이 있죠. 미치 사무엘스^{Mitch Samuels}는 계속되는 전환에 지쳐 시간을 아끼기 위한 방법을 고안해냈습니다. 키프레임^{Keyframes.app}을 만든 것입니다.

이 도구는 시각적 타임라인 편집기를 통해 CSS 키프레임 애니메이션을 만들 수 있습니다. 타임라인에 단계를 추가하고 간단한 UI를 사용해 각 단계마다 대상 요소에 원하는 CSS 속성을 조정하고 애니메이션 미리보기를 실시간으로 업데이트합니다. 결과에 만족하면 CSS를 복사해 프로젝트에서 바로 사용할 수 있습니다. 키프레임은 크롬 확장 프로그램으로도 제공됩니다. 시간을 정말로 절약해주죠.

프로젝트에 가장 적합한 빌드 도구 결정하기

빌드 도구는 워크플로를 간소화하고 모범 사례를 체계화해 개발자의 삶을 편하게 만들어주려고 합니다. 하지만 프로젝트에 맞는 빌드 도구를 찾기란 어려운 일입니다. 보다 정확한 결정을 할 수 있도록 구글 크롬 개발자 경험 팀에서 툴링리포트^{Tooling.Report}를 만들었습니다.

툴링리포트는 빌드 도구가 모범 사례를 얼마나 준수하는지 평가하는 테스트를 바탕으로 다양한 번들러와 그 기능에 대한 개요를 보여줍니다. 프로젝트에 가장 적합한 도구를 신속하게 결정하는 데 도움이 될 뿐 아니라 기존 코드베이스에 모범 사례를 통합하기 위한 참조 자료가 되기도 합니다. 장기적 목표는 모든 빌드 도구를 개선하고 웹 생태를 개선하는 것입니다.

 

평면 이미지를 접힌 포스터로 바꾸기

어떤 코딩 사례는 숙련된 개발자도 놀라게 합니다. 그 사례를 실제로 매일 사용하지 않을지라도 동료 개발자가 고정관념에서 벗어나 웹 기술로 무엇이 가능한지 탐색하는 것을 지켜보는 것은 언제나 고무적인 일입니다. 린 피셔^{Lynn Fisher}가 CSS만 사용해 만든 접힌 포스터 효과가 바로 그런 사례입니다.

린은 약간의 CSS 코드로 일반적인 이미지를 접힌 포스터처럼 보이게 만들었습니다. 종이 주름이 가로와 세로로 이미지 위를 달리고, 포스터에 3D 효과를 주는 배경 그림자도 있습니다. CSS로 아름답게 해낼 수 있는 것을 보여주는, 작지만 멋진 프로젝트입니다.

기본 셀렉트 박스와 사용자 지정 셀렉트 박스 요소 사이 균형잡기

셀렉트 박스 요소를 외부뿐 아니라 내부도 스타일하고 싶다면 어떻게 빌드해야 할까요? 산드리나 페레이라^{Sandrina Pereira}가 자신의 글 “기본 셀렉트 박스와 사용자 지정 셀렉트 박스 요소 사이 균형잡기”를 통해 기본 요소의 기능을 최대한 가져오는 잘생기고 접근성 좋은 셀렉트 박스를 만들려는 시도를 공유했습니다.

비법은 바로 “하이브리드” 셀렉트 박스를 만드는 것. 기본 <select>와 디자인 패턴을 따라 스타일을 지정한 셀렉트 박스 대체재를 만드는 것입니다. 보조 기술 사용자에게는 기본 <select> 요소를 제공하지만 마우스를 사용하면 셀렉트 박스 요소를 작동하도록 스타일이 지정된 상자가 제공됩니다.

CSS 변수와 MAX( )를 사용한 하이브리드 위치 지정

어떤 아이디어를 떠올리기 위해서는 고정된 틀에서 벗어나 생각하고 새로운 길을 찾아야 합니다. 이런 경우를 상상해보세요. 페이지 한편에 페이지 탐색을 두고 싶습니다. 헤더가 제일 위에 있을 때는 바로 아래에 있게 하고 싶죠. 헤더가 시야 밖으로 이동하면 탐색창은 스크롤하는 동안 최상단에 있어야 합니다. 이게 바로 레아 버로^{Lea Verou}가 최근 프로젝트로 하고 싶었던 작업입니다.

여러분은 position: sticky를 쓰면 될 문제라고 말할지 모르지만 레아는 더 세밀하게 조정된 방법을 보여줍니다. 자바스크립트를 쓰지 않고도 말이죠. 그녀의 해법은 CSS 변수와 CSS 속성에서 최소·최대 조건을 적용할 수 있는 max( ) 함수를 사용합니다. 거기에다 max( )를 지원하지 않는 브라우저를 위한 대안도 제공하죠. 참 영리하죠!

웹의 음지에서 들려오는 이야기

해커, 데이터 유출, 비밀 정부 활동, 사이버 범죄, 핵티비즘^hacktivism 등 웹의 어두운 면에서는 다양한 일들이 벌어지고 있습니다. 하지만 이런 활동 뒤에는 어떤 사람들이 있을까요? 그들의 ‘임무’는 뭘까요? 잭 라이사이더^{Jack Rhysider}가 네트워크의 숨겨진 곳에서 일어나는 이야기들을 들려주는 팟캐스트 다크넷 다이어리^{Darknet Diaries}를 만들었습니다.

비디오 포커 기계에서 버그를 찾아 엄청난 돈을 번 도박꾼의 이야기나 건물에 침입한 침투 시험자 이야기, 다른 국가의 회사를 해킹하는 국가적 해킹단 등 다크넷 다이어리는 비밀 세계에 대한 통찰력으로 가득합니다. 팟캐스트는 사실 확인과 정보에 대한 윤리적 소싱을 통해 저널리즘의 표준을 준수함과 동시에 훌륭한 엔터테인먼트 역할도 합니다. 또한 사이버 보안를 둘러싸고 있는 문화를 설명해 청취자들의 반응을 유도하고 시민들에게 디지털 생활에 대한 정보를 제공하는 것이 그들의 목표입니다. 꼭 한 번 들어보세요.