prefers-color-scheme 미디어 쿼리를 이용해서 라이트/다크 모드의 색상 변수를 선언하고 사용할 수 있지만 보통 웹사이트는 다양한 UI 요소가 있으므로 간단하지 않다.
HSL로 색은 반전시킬 수 있지만, UI 요소 중 배경색을 사용한 경우에는 제대로 반전되지 않는 부분이 생기기 마련이다.
디자인에서 사용하는 색의 개수는 정해져 있으므로 팔레트로 만들어서 색의 단계별로 HLS 변수를 만들어서 사용한다. HSL로 단계별로 지정했으므로 다크 모드에서는 반대되는 색을 쉽게 찾을 수 있다. 라이트 모드에서 gray-010는 다크 모드에서는 gray-090이 된다.
하지만 UI 요소가 늘어나면 변수도 2개씩 늘어나는 문제가 있다.
이 부분을 이용해서 색은 배경(background)와 전경(foreground)에 따라 역할이 다르다는 것에 착안해 10단계의 색조 팔레트를 배경/전경으로 나누고 이를 이용해서 라이트 모드와 다크모드의 변수를 정의한다. 이 많은 변수가 너무 많게 느껴질 수 있지만, UI 요소에 대응할 수 있어서 복잡한 사이트에서는 이렇게 사용하는 것이 더 낫다.
preconnect/preload는 선언적인 힌트로 다음 로딩 때 필요한 리소스에 사용한다.
prefetch/prerender는 추측성 힌트로 필요할 가능성이 높은 리소스를 브라우저에 추천할 때 사용한다.
B 페이지가 A 페이지 다음에 요청될 가능성이 높다고 했을 때
A 페이지에서 prefetch 힌트를 사용해서 B 페이지나 특정 리소스를 미리 받도록 브라우저에 알려준다.
A 페이지에서 prerender 힌트를 사용해서 미리 B 페이지를 렌더링하게 브라우저에 알려준다. 미리 렌더링 되었으므로 클릭 시 바로 화면을 볼 수 있다.
prefetch
다음 페이지 전체나 same-origin의 서브 리소스를 미리 가져올 수 있다.
캐싱할 수 있다면 HTTP Cache에 저장된다.(크롬은 5분간 저장)
prerender
크로미움에서 기존 구현체가 메모리를 너무 많이 사용해서 no-state prefetch로 다시 구현했다.
Quicklink, Guess.js 등의 서드파티 라이브러리가 있다.
WAI-ARIA란? : WAI(Web Accessibility Initiative)에서 리치 애플리케이션의 접근성 표준인 ARIA를 어떻게 사용해야 하는지 설명하고 있다. 사용했을 때 스크린 리더기에서 어떻게 동작하는지 영상을 같이 제공하고 있어서 이해하기 좋다.(한국어)
접근성을 제공하기 위해 태그에 추가 정보를 제공하지만, 태그의 의미 자체를 바꾸진 않아야 한다.
role로 컴포넌트나 요소의 역할을 정의한다.
aria-required, aria-label같은 프로퍼티를 컴포넌트의 특징을 정의한다.
그 밖의 개발 관련
Understanding AWK : 유닉스의 기본 스크립트로 입력 데이터를 처리해주는 awk의 사용법을 설명한다. awk가 어떻게 입력데이터의 행과 열을 다루는지를 보여주고 아마존의 1,900만 개의 리뷰의 데이터를 awk로 처리해서 랭크를 매겨주는 프로그램을 작성하면서 awk를 이해하게 해준다.(영어)
How much faster is Java 17? : 얼마 전 릴리스 된 Java 11의 성능을 벤치마킹한 글이다. OpenJDK 기준으로 11에서 17로 올렸을 때와 16에서 17로 올렸을 때를 비교했다.(영어)
G1GC 기준으로 17이 11보다 약 8.66% 빠르고 16보다는 2.41% 빠르다.
ParallelGC 기준으로 17이 11보다 약 6.54% 빠르고 16보다는 0.37% 빠르다.
17에서 ParallelGC는 G1GC보다 16.39% 빠르다.
뱅크샐러드 Data Discovery Platform의 시작 : 뱅크샐러드에서 필요한 데이터를 쉽게 분석할 수 있도록 플랫폼을 구축한 과정을 설명한다. 데이터가 워낙 많고 복잡하기 때문에 필요한 데이터를 보려고 할 때 쉽게 사용하기도 어렵고 SQL도 알아야 해서 분석팀에게 요청까지 해야 하는 불편함이 있어서 데이터 탐색 플랫폼을 구축하기 시작했다. 이를 위해 Linkedin의 Datahub와 Lyft의 Amundsen을 비교한 결과 Datahub가 더 쓰기 편하고 좋다는 결론에 이르러 Datahub를 플랫폼을 구축했다고 한다.(한국어)
인프라 관련
Debugging with eBPF Part 3: Tracing SSL/TLS connections : eBPF를 이용해서 SSL/TLS 연결을 추적하는 방법을 설명한다. BPF에서는 커널이 BPF 프로그램을 실행하고 다시 원래의 프로그램을 실행하기 때문에 프로그램에 영향을 적게 주고 네트워크 트래픽을 추적할 수 있다. 네트워크를 추적하기 위해 리눅스의 시스템호출인 send(), recv()에 BPF kprobe를 배치할 수 있는데 SSL/TLS는 암호화되므로 TLS 라이브러리에 SSL_write와 SSL_read에 BPF uprobe를 이용해서 SSL/TLS 트래픽을 추적한다.(영어)
남의집, 당근마켓에서 투자받다 : 모임을 연결해주는 남의집이 사업 방향에서 여러 시도를 하면서 투자를 받게 되는 과정을 설명한 글이다. 첫 IR에서 투자유치에 실패하고 대출금으로 남의집을 업무 공간으로 이용하는 홈 오피스를 런칭했으나 호스트보다 게스트가 많지 않아 실패했고 남은 돈은 많지 않았다. 자도 작년에 재택 하면서 좀 다른 곳에서 업무를 할까 하다가 남의집을 알게 되었다.(결국 이용은 안 했었지만...) 회사의 남은 돈을 직원들에게 공유하고 6개월 만에 새로운 시도를 해서 투자유치를 성공시키자고 각오를 세운 뒤 가게 점주들이 모임을 만들어서 제공하고 사람들이 참여하게 되면서 이 접근이 꽤 성공적이라는 것을 알게 되었고 이 가운데 회사가 풀고 푼 미션을 확실하게 정리할 수 있었다고 한다. 이후 이 사업 방향이 당근마켓하고 어울린다고 생각하게 되어 결국 당근마켓의 투자를 받게 되었다. 결과는 좋지만, 중간에 얼마나 맘고생이 심하셨을지가 느껴지면서 솔직하게 사업에 접근하는 부분이 좋았다.(한국어)
Comments