새해, 새로운 시작

연초의 흥분도 가라앉아가고 모두의 새해 목표가 시험대에 놓이게 되었지만 저희는 천천히 일상적인 프로젝트로 돌아오고 있습니다. 그러면서 우리는 2021년 새로운 목표에 집중하기 시작했습니다. 접근성, 전환율, 참여율, 접속 시간은 물론 웹 성능까지 향상시키는 것이죠. 모두가 각자 다른 목표를 가지고 있지만 한 가지 사실이 우리를 하나로 묶었습니다. 모두를 위해 웹을 발전시키는 것이죠.

연말연시는 늘 진정하기에 좋은 때입니다. 하지만 새로운 조사나 생각, 글쓰기, 어쩌면 원하지 않던 코딩이나 디자인을 하기에도 좋은 때입니다. 그리고 연례행사처럼 비탈리는 2021년 프론트엔드 업계에서 일어난 모든 일을 다시 한번 프론트엔드 성능 체크리스트 2021로 묶었습니다.

이 가이드는 평가부터 도구, 프론트엔드 기술, 전략에 이르기까지 웹에서 빠른 경험을 만드는 데 필요한 모든 것을 소개합니다. 지난 몇 년간 많은 독자에게 유용하다는 게 입증되었기 때문에 올해도 여러분에게 유용할 거예요. 여러분이 직접 체크리스트(PDF, MS워드Doc 파일 애플 페이지^{Apple Pages})를 수정해 여러분의 수요에 맞게 사용하거나 여러분 조직에 필요한 체크리스트로 바꿀 수도 있답니다.

이제 망설이지 말고 스매싱 팀이 여러분을 위해 준비한 것들을 살펴보세요.

온라인 워크숍으로 올해를 미리 계획하세요

아직 워크숍에 하나도 참여하지 않았나요? 저희는 매번 함께 배우기 위해 전 세계에서 모인 훌륭한 참가자들과 함께 실용적인 온라인 워크숍을 진행하고 있는데 할 때마다 매우 기쁘답니다. 전 세계 사람들과 소통하고 경험을 실시간으로 공유하는 좋은 기회입니다. 라이브 디자인과 코딩 세션 덕에 많은 아이디어가 실현되었고 많은 사람이 새로운 친구를 찾았답니다!

게다가 점점 좋아지고 있습니다. 이제 워크숍 번들을 통해 원하는 워크숍을 세 개, 다섯 개 심지어 열 개까지 선택해 구매할 수 있어요. 진행 중인 워크숍을 비롯해 예정된 워크숍, 추후 열릴 워크숍까지 원하는 것을 선택할 수 있죠! 원하는 온라인 워크숍을 여러분과 팀, 에이전시에 가장 좋은 날짜에 선택해보세요. 워크숍 번들을 확인하세요.

올해 프로그램도 계속 진행하고 있고 아직 발표하지 않은 워크숍도 있답니다. 진행하고 싶은 워크숍이 있다면 트위터 DM으로 연락하세요. 그러면 워크숍이 열릴 수 있도록 최선을 다할게요. 그리고 여기서 구독하면 새 워크숍이 열릴 때 처음으로 알림을 받을 수 있답니다. 게다가 얼리버드 티켓도 받을 수 있어요.

스매싱 팟캐스트를 듣고 영감을 얻어가세요

지난해 저희는 스매싱 팟캐스트를 시작해 격주로 새 에피소드를 방영했고, 아주 놀라운 피드백을 받았답니다. 5만6000회의 다운로드(1주 평균 1000번인 셈이고 점점 늘고 있답니다)가 발생했고, 다양한 배경의 게스트 34명과 많은 이야기를 나눴습니다.

듣고 싶은 주제가 있거나 더 알고 싶은 주제가 보이지 않으면 호스트 드루 맥럴란^{Drew McLellan}에게 연락하거나 트위터 하는 데 주저하지 마세요. 여러분의 의견을 기다린답니다!

1월 26일에 공개될 새 에피소드를 기대해주세요!

스매싱 뉴스레터 베스트 글

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

아래는 최근 뉴스레터에서 공유했던 내용들 중 인기 있었던 글입니다.

기본 로컬 폰트 적합성 확인

기본 폰트는 운영체제에 따라 달라집니다. 특히 CSS font-family에서 사용할 수 있는 시스템의 기본 폰트에서 사용할 수 있는 폰트를 쉽게 찾도록 재크 레더맨^{Zach Leatherman}이 폰트 패밀리 리유니온^{Font Family Reunion}을 만들었습니다.

호환성 표는 기본 로컬 폰트로 만들어진 Can I Use처럼 작동합니다. font-family를 입력하면 지원 여부와 다섯 가지 표준 CSS 키워드(serif, sans-serif, monospace뿐만 아니라 잘 알려지지 않은 fantasy와 cursive)는 각 운영체제마다 별칭으로 지정됩니다. 즐겨찾기에 저장해두세요.

구글 폰트의 성능을 향상시키는 법

직접 호스팅하는 폰트 파일은 웹 폰트를 사용하는 데 있어 가장 빠른 방법으로 널리 알려져 있습니다. 그러나 구글 폰트^{Google Fonts}도 빨라질 수 있습니다. 특정 유저 에이전트와 플랫폼에 최대한 작은 폰트 파일을 제공하고 URL 파라미터 &display=swap를 통해 font-display를 지원하는 새로운 기능들 덕분이죠. 해리 로버츠^{Harry Roberts}가 보여주듯 구글 폰트의 성능을 훨씬 향상시키고 일반적으로 알려진 문제들을 완화할 수 있는 방법이 많습니다.

해리의 글 “가장 빠른 구글 폰트”는 CSS 비동기 로딩, 폰트 파일 비동기 로딩, FOFT 선택, 비동기로 CSS 파일 빨리 가져오기 및 외부 도메인 준비해두기 등 구글 폰트에서 가장 빠른 조합을 찾기 위해 성능 시험의 토끼굴로 여러분을 안내합니다.

쉽게 만들어진 반응형 이메일

모든 인기 이메일 클라이언트에서 훌륭한 경험을 제공할 수 있는 깨끗한 반응형 이메일을 코딩하는 데는 시간이 많이 걸립니다. 이걸 바꾸기 위해 HEML이 나왔습니다. 이 오픈소스 마크업 언어는 모든 이메일 문제를 처리할 필요 없이 HTML의 타고난 힘을 사용할 수 있게 해줍니다. 따로 익혀야 할 특별한 규칙이나 스타일 패러다임이 없으므로 HTML과 CSS를 알고 있다면 사용 가능합니다.

MJML은 반응형 이메일 작성 프로세스를 단순화하겠다는 동일한 발상을 기반으로 만들어졌습니다. 이 마크업 언어는 시맨틱 문법을 기반으로 해 과정을 간단하게 만들고, 오픈소스 엔진이 무거운 작업을 수행하며, MJML을 반응형 HTML로 변환합니다. 시간을 절약해주고 이메일 코드베이스를 가볍게 해주는 표준 컴포넌트 라이브러리입니다. 여러분만의 반응형 이메일을 만들고 싶다면 모듈러 템플릿 시스템 가이드^{Modular Template System Guide}도 도움이 될 것입니다. 기대하세요!

튼튼한 HTML 이메일 템플릿

이메일 클라이언트에 모두 통용되는 HTML 이메일을 만드는 건 쉽지 않습니다. 다행히도 여러분의 일을 쉽게 끝낼 수 있도록 도와주는 믿을 만한 도구들과 템플릿, 프레임워크가 많습니다. 예를 들어, 메이즐^Maizzle은 테일윈드 CSS를 사용해 HTML 이메일을 빠르게 만들 수 있게 해주고, 이메일에 특화된 고급 후처리를 제공하는 프레임워크입니다. 메이즐은 바로 시작할 수 있는 프로젝트(메이즐 스타터^{Maizzle Starters})도 제공합니다.

서버러스^Cerberus와 HTML이메일^{HTML Email}은 반응형 HTML 이메일에 사용할 수 있도록 지메일, 아웃룩, 야후, AOL등 50개 이상의 이메일 클라이언트에서 잘 테스트된 믿을 만한 견고한 패턴을 모아서 제공합니다. 이메일프레임.워크^{EmailFrame.work}는 60개 이상의 이메일 클라이언트를 지원하는 그리드 옵션과 기본 컴포넌트를 통해 반응형 HTML 이메일을 만들 수 있도록 해줍니다.

스트라이포^Stripo, 카메일리온^Chamaileon, 포스트카드^Postcards, 토폴.io^Topol.io, 비프리^{Bee Free}는 다양한 무료 HTML 이메일 템플릿을 제공하고, 리트머스^Litmus는 뉴스레터나 제품 업데이트, 영수증에 사용할 수 있는 반응형 이메일 템플릿을 제공하며, 캠페인모니터^{CampaignMonitor}는 드래그 앤드 드롭 기능을 지원하는 무료 HTML 이메일 템플릿 제작기를 서비스합니다.

CSS 그레이디언트에서 가짜 데이터까지

요소나 요소 비슷한 것을 만들고 싶을 때 CSS 삼각형 스타일을 찾기만 하면 된다고 상상해보세요. 어쩌면 이미 있는 색상의 색조나 음영을 조절해 새로운 색상 팔레트를 만들 수 있다고 생각해보세요. 또 페이지의 일부분을 위해 선형, 방사형 CSS 그레이디언트를 만들 수 있다면 어떨까요? 모든 걸 직접 만들거나 CSS 코드를 찾으려고 웹을 돌아다닐 필요가 없답니다. 오마츠리^Omatsuri에서 찾을 수 있으니까요.

일본어로 축제를 의미하는 오마츠리는 매일 이용할 수 있는 오픈소스 브라우저 도구의 작은 축제랍니다. 이 사이트에서는 삼각형 생성기와 색상 음영 생성기, 그레이디언트 생성기, 페이지 구분기, SVG 압축기, SVG→JSX 변환기, 가짜 데이터 생성기, CSS 커서, 키보드 이벤트 코드를 찾을 수 있습니다. 비탈리 르티슈체프^{Vitaly Rtishchev}와 블라드 실로프^{Vlad Shilov}가 디자인하고 만들었습니다. 웹사이트의 소스 코드도 확인할 수 있답니다.

CSS 그림자 생성기

아주 부드럽고 층이 진 box-shadow CSS 코드를 자동으로 생성해주는 도구를 찾고 있나요? 그렇다면 스무드셰도^SmoothShadow가 마음에 들 거예요. 토비어스 알린 비에르롬^{Tobias Ahlin Bjerrome}의 글에서 영감을 받은 이 멋진 도구는 모두 실무에서 필요한 코드를 생성할 수 있도록 돕기 위해 만들어졌습니다.

한번 시도해보면 사용하기 그리 어렵지 않을 겁니다. 이 작은 도구는 여러분이 시각적으로 층이 진 부드러운 box-shadow를 디자인할 수 있도록 해줄 뿐 아니라 알파 값, 오프셋, 흐림 효과, 모서리 다듬기 등을 할 수 있게 도와줍니다. 이 도구를 만든 필립 브룸^{Philipp Brumm}은 스무드셰도를 피그마 플러그인으로도 발매해 여러분의 작업 과정을 바라던 대로 간편화할 수 있게 됐답니다.

CSS 변수 이해하기

CSS 변수는 강력합니다. CSS 변수는 계단식으로 연결되고 상속되며, 코드를 재사용할 수 있게 해주며, 아주 다양하게 사용할 수 있습니다. 그런데 CSS 변수의 잠재력을 최대로 끌어내려면 어떤 걸 넣어야 할까요? 정확하지 못한 것들이 있어서 윌 보이드^{Will Boyd}가 블로그 글을 통해 가능성을 탐색해보았습니다.

윌은 단위 값부터 미리 정의한 키워드, 콘텐츠 문자열, 이미지, 멋진 애니메이션 값까지 CSS 변수의 조합으로 사용할 수 있는 가장 일반적인 사항들을 정리했습니다. 훌륭한 글입니다.

배우는 걸 멈추지 마세요

배움에는 끝이 없습니다. 유용하다고 느낀 작은 통찰과 코드 관련 정보, 팁들을 공유하기 위해 스테판 주디스^{Stefan Judis}가 “오늘 내가 배운 것^{Today I Learned}(국내에서는 Today I Learned의 약자인 TIL로 불립니다; 옮긴이)”을 시작했습니다.

SVG 필터가 CSS에 인라인으로 작성될 수 있다는 깨달음이나 사이트가 색 구성을 지원한다는 것을 브라우저에 알리는 방법처럼 스테판은 그날 배운 사실을 간략히 요약해 공유합니다. CSS 관련 내용뿐 아니라 접근성, 배시^bash, 깃^git, 그래프QL^GraphQL, HTML, 자바스크립트 등 다양합니다. 서맨사 밍^{Samantha Ming}의 코드 티드비츠^{code tidbits}는 빨리 적용할 수 있고 귀중한 웹 개발자들의 지혜를 담은 보물 상자로 여러분의 삶을 쉽게 만들 수 있답니다.

이게 끝이에요

올해는 웃음과 기억에 남는 순간들, 진정으로 놀라운 경험들이 가득한 환상적인 한 해가 되기를 진심으로 기원합니다. 한편으로는 여러분과 온라인이나 오프라인에서 만나길 기대하고 있지만 한 가지 사실은 확실해요. 우리는 여러분이 매달 훌륭하게 해냈다는 사실에 감사하고 또 영원히 감사할 거예요.