[스매싱 매거진 4월 총정리] 연결을 지속하고 서로에게서 배우세요.

스매싱 매거진의 인기 주제

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

• “리액트 훅스에 대한 최고의 실습” – 아데네이 데이비드 아비오던^{Adeneye David Abiodun}
  리액트 훅스의 규칙과 프로젝트에 효과적으로 리액트 훅스를 도입하는 방법을 설명합니다. 이 글을 자세히 따라가려면 리액트 훅스 사용 방법을 알아야 합니다.

• “허브 루발린에게 배우는 디자인적 결정” – 앤디 클라크^{Andy Clarke}
  강력한 헤더와 콜투액션(클릭 유도 버튼)을 만들려면 요소들을 어떻게 합쳐야 할까요? 다양한 요소들을 정확히 제어하기 위해 <pre> 태그와 SVG 내 텍스트 요소를 어떻게 이용해야 할까요? SVG는 어떻게 최적화하고, SVG 내 텍스트는 어떻게 접근 가능하게 만들 수 있을까요? 이 글에서 살펴봅니다.

• “구조화된 데이터를 디자인 과정으로 구워내는 법” – 프레데릭 오브라이언^{Frederick O’Brien}
  검색 엔진 최적화 개선은 지금까지도 훌륭했습니다. 하지만 메타데이터 기술이 더 똑똑해지며 시작 단계에서 디자인 과정에 메타데이터를 만드는 것도 중요해졌습니다.

• “Git으로 인생을 더 쉽게 만드는 법” – 셰인 허드슨^{Shane Hudson}
  댕글링 블롭^{dangling blobs}에서 트리 전체를 알 필요는 없습니다. 매일 Git을 사용하지만 손이 너무 많이 드는 것 같다면 인생을 조금 더 쉽게 만들어줄 트릭과 팁이 있습니다.

 

뉴스레터 베스트 글

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

 

원격근무 팀을 이끄는 팁

원격근무 팀을 이끄는 것은 꽤 부담스러운 일처럼 느껴질 수 있습니다. 특히나 처음이라면 더욱 그렇습니다. 다행히도 같은 일을 겪은 사람들이, 원격근무 팀원이 모두 어디에 있건 생산적이고 효율적으로 팀을 이끌 수 있는 전략을 만들어냈습니다. 마크 볼튼도 그중 한 명입니다.

최근 상황으로 많은 팀이 원격근무를 도입했습니다. 마크는 원격근무 팀을 이끌어가는 데 도움이 된 간단하면서도 유용한 접근법들을 요약했습니다. 팀의 정기 행사를 유지하는 법부터 팀원 간의 연락이 계속 될 것이라는 믿음을 유지하는 법, 원격근무로 인한 우여곡절을 관리하는 법까지 마크가 알려주는 팁은 적용하기 어렵지 않으면서 차별화될 수 있습니다.

 

CSS 뷰포트 단위를 이해하는 법

CSS의 뷰포트 단위는 자바스크립트 없이도 유동적이며 역동적인 방향으로 크기를 조정할 수 있도록 해줍니다. 아직 깊이 알아볼 기회가 없었다면 아마드 섀디드^{Ahmad Shadeed}가 쓴 CSS 뷰포트 단위에 대한 유용한 가이드를 읽어보세요.

가이드에서는 뷰포트 단위인 vw, vh, vmin, vmax에 대한 일반적인 이해부터 뷰포트 단위가 퍼센트와 어떻게 다른지, 어떤 실용적인 방식으로 사용되는지, 프로젝트에 어떻게 적용하는지도 설명합니다. 여러분 머릿속 스위치를 켜줄 좋은 글입니다.

 

웹을 위한 더 좋은 파일 업로더

웹을 위한 더 좋은 파일 업로더를 만드는 것. 이 아이디어는 자바스크립트 이미지 업로더 업로드^Uppload를 만들게 된 배경입니다. 아난드 초더리^{Anand Chowdhary}가 만든 이미지 업로더는 오픈소스로 모든 파일 업로드 백엔드와 활용할 수 있습니다. 30개 이상의 플러그인으로 변형도 가능하답니다.

사용자는 파일을 드래그 앤드 드롭해 업로드하거나 카메라, URL 또는 소셜 미디어와 여러 서비스에서 불러올 수도 있습니다(URL 입력만으로 스크린샷을 찍어 업로드하는 기능도 있습니다). 업로드하며 이미지에 효과를 적용하고 밝기, 대비, 채도 같은 필터를 조정할 수도 있습니다. 만약 여러분의 프로젝트에는 너무 많은 기능이라면 필요한 것 외에는 털어낼 수 있습니다. 업로드는 IE10까지 브라우저를 지원합니다. 간편하지 않나요.

 

오픈소스 플립 카운터 플러그인

이벤트 당일까지 카운트다운하거나, 모금 캠페인을 시각화하거나, 시계나 판매량 카운터를 보여줘야 할 일이 있나요? 릭 스헤닝크^{Rik Schennink}의 플립 카운터^{Flip Counter}가 여러분에게 필요할 수도 있습니다. 이 플러그인은 오픈소스로 모바일 친화적이고 설치가 편하며 어떤 의존성도 필요 없습니다.

쉽고 유연하게 사용할 수 있는 점 외에도, 숫자가 적힌 카드가 부드럽게 넘어가는 애니메이션을 만드는 데 사용할 수도 있습니다. 어떻게 사용하느냐에 따라 여러분만의 플립 카운터를 만들 수 있는 몇 가지 사전 설정이 있습니다. 스타일은 CSS로 커스터마이징할 수 있습니다. 작은 디테일들이 사랑스럽답니다.

 

좋은 이메일 코드를 작성하는 법

HTML 이메일 코드를 작성해야 하지만 모범사례에 더 집중한 때가 있을 것입니다. 여러분이 도전에 성공하도록 돕기 위해 마크 로빈스가 좋은 이메일 코드들을 모은 라이브러리를 만들었습니다. 그저 코드를 복사하고 붙여넣기만 하면 여러분의 이메일에 사용하거나 그 이론에 대해 배울 수 있습니다.

마크가 말한 것처럼 코드를 의미있고 기능적이며 접근 가능하고 사용자의 기대에 부합하도록 만드는 것이 우선입니다. 이메일 클라이언트의 일관성과 픽셀까지 맞는 디자인도 물론 중요하지만 이것은 그다음입니다. 북마크에 추가해두세요.

 

툴팁, 팝오버, 드롭다운을 위한 완벽한 솔루션

툴팁, 팝오버, 드롭다운, 메뉴에 대한 쉬운 솔루션을 찾는다면 Tippy.js를 확인해보세요. 이 라이브러리는 여러분의 문서에서 UI 위로 오버레이될 수 있는 요소들을 만드는 데 필요한 원리와 스타일링을 모두 제공합니다.

Tippy.js는 플립과 오버플로를 막고, WAI-ARIA를 준수하며 최신 브라우저는 모두 지원하고 저가 장치에서도 고성능의 기능을 제공할 수 있습니다. 사용자 지정 CSS로 요소를 스타일링 할 수 있으며 타입스크립트^TypeScript도 기본 지원합니다. 간편합니다!

 

제품 목업 애니메이션을 만들기 위한 오픈소스 도구

특정 목적을 위한 도구가 없다면 어떻게 해야 할까요? 직접 만들면 됩니다. 알리사 X^{Alyssa X}도 제품을 보여줄 수 있는 GIF와 비디오를 만들기 위한 도구를 찾다가 직접 만들었습니다. 결과물이 여기 있습니다. 애니목업^Animockup입니다.

애니목업을 사용하면 장치 목업 내에서 돌아가는 제품을 보여줄 수 있습니다. 브라우저 도구로 일부 화면을 드래그하면 애니목업은 자동으로 원하는 위치에 영상을 적용합니다. 텍스트와 이미지를 넣고 스타일을 조정할 수 있으며, 사전 설정을 선택해 트위터와 드리블, 인스타그램 등에 올릴 수 있는 최적화된 영상을 받을 수도 있습니다. 유용한 작은 친구입니다.

 

CSS 색상 그레이디언트를 쉽게 만들기

색상 그레이디언트를 만들기 위해 색을 직접 고르려면 디자인 경험과 색의 조화에 대한 이해가 필요합니다. 배경색이나 UI 요소를 위해 그레이디언트를 사용해야 하는데 직접 처리할 자신은 없을 때 (혹은 바쁠 때) My Brand New Logo가 만든 색상 그레이디언트 생성기가 여러분을 도와드릴 것입니다.

색상 그레이디언트 알고리즘으로 구동되는 생성기는 색상을 선택하면 그를 바탕으로 균형감 있는 그레이디언트를 만듭니다. 진주층^{mother-of-pearl} 같은 효과 혹은 강렬하고 깊은 색의 그러데이션 같은 네 가지 그레이디언트를 얻을 수 있습니다. 슬라이더로 그레이디언트를 조절해 원하는 결과물이 나오면 CSS 코드를 복사/붙여넣기로 프로젝트에서 사용할 수 있습니다. 훌륭합니다!

 

협동하는 다이어그램

빠른 다이어그램으로 아이디어를 시각화할 때 펜과 종이만한 것이 없습니다. 아날로그 도구만큼 간단하고 사용하기 쉬운 디지털 대체품을 찾고 있다면 엑스칼리드로^Excalidraw를 권해봅니다.

엑스칼리드로는 그림을 그릴 수 있는 가상 화이트보드입니다. 다양한 도형 중에서 원하는 것을 선택한 후 화살표나 선으로 연결하고 텍스트 및 색상을 추가할 수 있습니다. 스타일을 만들 수 있는 다른 설정들도 있지만 여러분이 아이디어를 시각화라는 가장 중요한 가치에 집중할 수 있도록 간단히 유지하고 있습니다. 요즘같이 원격근무하는 팀이 많을 때 매우 편리한 기능이 있습니다. 팀원이나 고객과 공동 작업 세션을 공유할 수 있습니다. 물론 내보내기나 저장 기능도 포함되어 있고요.

 

BEM 명명 규칙 격파하기

BEM은 코드에 확장성과 재사용성을 부여하고 코드가 지저분해지는 것을 막으며 팀워크를 더 편하게 만들어줍니다. 하지만 경력 많은 CSS 개발자도 명명 규칙 때문에 고생하곤 합니다. BEM의 세계에서 길을 잃지 않도록 9elemets 멤버들이 BEM 치트시트를 만들었습니다. 브레드크럼 탐색과 버튼, 카드, 목록, 탭, 폼 체크박스, 사이드바 등 많이 사용되는 웹 구성 요소의 이름을 제안했습니다.

BEM 방법론을 더 자세히 알고 싶다면 루크 화이트하우스^{Luke Whitehouse}가 공유한 팁을 읽어보세요. BEM에 늘 존재하는 문제점인 블록이 아닌 다른 요소에 묶인 요소, 즉  그랜드칠드런을 처리하는 법을 알려줍니다. 루크는 이 문제를 해결하기 위해 세 가지 접근법을 살펴봅니다. 그랜드칠드런에 새로운 블록을 만들어 부모 요소와 아무 관련이 없게 간략화한 뒤 BEM 명명 규칙을 적용합니다. 좋은 글입니다.

 

고전 게임 저장소

1980년과 1990년대에 했던 비디오게임을 생각하면 향수가 일어나나요? 지금처럼 멋진 효과 없이도 게임이 즐거웠던 그때로 되돌아가고 싶진 않나요?

클래식리로드^{ClassicReload}는 레트로 게임들과 버려진 OD/인터페이스 6,000개를 모아 브라우저에서 플레이할 수 있게 해줍니다. 과거 즐겨했던 게임을 검색하거나 이름, 연도, 장르, 플랫폼으로 탐색해 새 게임을 찾는 것도 좋겠습니다. 오레고 트레일, 페르시아의 왕자, 데인저러스 데이브 등 여러분을 계속 잡아뒀던 게임들 말입니다. 자리만 잘 잡았다면 이 사이트에서 실컷 즐길 수 있을 것입니다.

 

HTML DOM 관리하고 제이쿼리 대체하기

HTML DOM을 바닐라 자바스크립트만으로 어떻게 관리할 수 있을까요? 푸옥 응우옌^{Phuoc Nguyen}이 DOM 스크립트 스니펫과 사용법에 관한 설명 100가지를 모았습니다. 스니펫은 요소가 포커싱되었는지 감지하는 정도의 기초부터 표를 CSV로 내보내거나 슬라이더를 만들어내는 어려운 실습까지 난이도를 표기하고 있습니다.

바닐라 사용에 관한 이야기가 나왔으니 말인데 프로젝트에 제이쿼리를 사용하고 있다면 몇 줄의 간편한 코드로 일을 해결할 수 있는데 굳이 추가적인 의존성을 만들어야 하는지 확인해볼 필요가 있습니다. “제이쿼리가 필요하지 않을 수도 있습니다”는 제이쿼리를 대체할 수 있는 좋은 코드 스니펫들을 소개합니다.

 

지나치게 친절한 색상 팔레트

다음 프로젝트에서 스네일페이스 소프트 핑크^{snail-paced soft pink}, 언실드 마호가니^{unsealed mahogany}, 라우지 워터멜론^{lousy watermelon} 색상을 함께 사용할 생각을 해본 적 있나요? 처음엔 좀 이상한 소리같이 들리지만 colors.lol의 콘셉트입니다. 애덤 푸어^{Adam Fuhrer}가 말하듯, “지나치게 친절히 설명하는 색상 팔레트”입니다.

트위터봇 @colorschemez에서 직접 선택한 색상을 모아 재미있는 조합을 발견할 수 있도록 해줍니다. 피드는 무작위로 색상 조합을 생성하고 20,000개가 넘는 단어 목록에서 형용사와 각 색상을 일치시킵니다. 독특한 이름들 뒤에는 물론 실제 헥스 값을 소개합니다. 예를 들어 아까 소개한 스네일페이스 소프트 핑크부터 차례로 #FDB0C0, #4A0100, #FD4659입니다. 색을 바라보는 독특한 프로젝트네요.

 

SVG 마스크 유연하게 반복시키기

가끔은 프로젝트에서 잡고 있는 작은 아이디어나 세부사항이 여러분을 붙들고 딱 맞는 해결책이 나올 때까지 떨어지지 않을 것 같습니다. 언뜻 보기엔 큰일처럼 보이지 않지만 틀에서 벗어난 생각을 해야 합니다. 타일러 고^{Tyler Gaw}의 작은 세부사항은 변형되는 헤더로 아래 쪽이 직선이 아닌 구불구불한 선이었습니다. 비결은 이후에도 헤더가 제대로 작동하도록 CSS로 색상을 조정할 수 있고 끊임없이 반복되는 수평 패턴을 사용하려 한 것이었습니다.

타일러는 목표를 이루기 위해 유연하게 반복되는 SVG 마스크를 사용했습니다. SVG는 모양을 유지하고 CSS는 색상을 처리하며 mask-image는 모양과 맞지 않는 기본 div에 모든 것을 숨길 수 있습니다. 재미있는 실험의 기반이 될 수 있는 똑똑한 접근법입니다.