2024-07

📚 링크 & 읽을 거리

Web Engines Hackfest 2024

Web Engines Hackfest는 2009년 WebkitGTK+ Hackfest라는 이름으로 처음 시작된 이래 매해 진행되는 콘퍼런스다. 명칭에서 알 수 있듯이 브라우저와 관련 표준, 그리고 웹 엔진 주제들을 집중적으로 다룬다.

올해는 총 8개의 세션이 진행되었고, 흥미로운 몇몇 세션들은 다음과 같다.

• The Future of Source Maps (발표자료) - Jonathan Kuperman

  • 소스 맵은 2009년 처음 개발된 후로 사양은 크게 변하지 않았다. 이로 인해 기능 개발이 정체되어 왔으나, 2023년에 현대화를 위한 그룹이 구성되어 공식 TC39 테스크 그룹으로 승격되었다. 이 세션은 사양에 포함될 흥미로운 신규 기능들을 소개한다.

• Firefox Wayland post mortem (발표자료) - Martin Stransky -Firefox는 최근 디스플레이 프로토콜인 Wayland를 기본값으로 전환했다. 전환에 따른 장단점과 사용자의 반응에 대한 포스트 모템을 공유한다.

• Nova JavaScript Engine – Exploring a Data-Oriented Engine Design (발표자료) - Aapo Alasuutari

  • 데이터 지향 접근 방식을 사용하여 Rust에서 기본 JavaScript 엔진을 작성할 때의 장/단점을 살펴본다.

• Sustainable Futures: Funding the Web Ecosystem (발표자료) - Stephanie Stimac

  • 웹은 세계 사회 기반 시설을 담당하고, 현대 사회의 일과 삶을 형성하고 있다. 그러나 웹 생태계의 지속성은 취약하며 지속 불가능한 상태에 처해 있다. 미래 세대가 안정적이고 지속 가능한 정보 접근을 유지할 수 있도록 문제를 해결할 수 있는 가능한 방법들을 다룬다.

• History of WebGPU in Deno (발표자료) - Leo Kettmeir

  • Deno는 2021년 초부터 WebGPU를 지원해 왔지만, 성능이 뛰어난 WebGPU 구현을 제공하는 데에는 몇 가지 어려움이 있었다. 이 세션은 지원을 달성하는 데 필요한 일련의 이벤트와 변경 사항을 소개한다.

• Status of the Layer-Based SVG Engine in WebKit (발표자료) - Nikolas Zimmermann

  • HTML 및 SVG 렌더링 파이프라인을 통합하기 위한 새로운 Webkit 용 SVG 엔진인 LBSE(Layer Based SVG Engine)를 소개한다.

Config 2024

Config는 Figma에서 주최하는 디자인 컨퍼런스로, 이번에 소개된 기능들 중 AI 기반의 두 가지 기능은 Front-end 개발자들이 주목할 만하다.

• 프롬프트 입력을 통한 자동 디자인 생성
• 프로토타입의 자동 연결

이 기능들은 디자이너와 개발자의 효율성을 크게 향상시킬 것으로 기대된다.

[참고] 한글 컨퍼런스 요약

Scan HTML faster with SIMD instructions: Chrome edition

최신 프로세서에는 한 번에 여러 바이트를 처리하는 명령어가 있고, 사실상 한 번에 16바이트 처리가 가능하다. 이러한 명령어를 단일 명령어, 다중 데이터의 경우 SIMD(Single Instruction Multiple Data)라 한다.

명령어가 HTML 또는 JSON 구문 분석과 같은 일반적인 작업을 가속화하는 데 유용할 수 있는지에 대해 의문시 되었으나 simdjson 파서와 같이 JSON 구문 분석에 SIMD 명령어가 실제로 속도 기록을 깨는 데 도움이 될 수 있다는 것을 보여주었다.

이에 영감을 받아 Google Chrome 브라우저(Chromium)의 엔진은 HTML 입력에 대한 SIMD 구문 분석을 채택했다.

JavaScript Framework Maintainers on Unification Potential

React Summit 2024의 Fireside Chat 세션에서 오늘날의 Front-end 프레임워크들이 Signals(Angular Signals, SolidJS signals)과 같은 동일 기능을 향해 나아가고 있고, 이 방향성으로 나아간다면 언젠가 하나의 프레임워크로 통합될 수 있지 않을까에 대한 의견을 나눴다.

사실 논의 결과를 짧게 요약하면, "그렇지 않다"였다.

주요한 프레임워크 관계자들의 의견을 통해 어렵다고 생각하는 이유와 함께 한편으로 조금의 가능성에 대한 생각들도 함께 엿볼 수 있다.

So You Want To Build A Browser Engine

진지(?) 한 관점에서 Chromium과 경쟁하거나 또는 능가하는 브라우저 엔진을 만들 때 참고할 수 있는 조언들을 살펴볼 수 있다.

Progressive Web Apps (PWAs) Phishing

PWA는 OS 레벨에서 잘 통합된 앱과 같이 동작하기 때문에 피싱 목적으로 활용되기 쉽다. 사용자가 PWA 앱을 설치하는 과정에서 실제 도메인이 작게 표시되고, 이후 페이지 상단에 가짜 URL 표시창을 통해 사용자를 속일 수 있다.

[참고] 피싱에 사용된 데모 소스는 다음 저장소에서 확인할 수 있다.

• https://github.com/mrd0x/PWA-Phishing

News from WWDC24:WebKit in Safari 18 beta

Safari 18 Beta WebKit에 추가된 다양한 기능들을 소개한다. Safari 18은 macOS Sequoia beta를 통해 사용해 볼 수 있다.

2023년 추가된 Web Apps는 모든 웹사이트(PWA 형태이거나 그렇지 않은)들을 dock에 손쉽게 추가해 앱처럼 사용할 수 있다. 이번 업데이트는 dock을 통해 열려있는 Web Apps에 대한 링크가 다른 곳에서 클릭되는 경우에도 OS의 기본 브라우저가 아닌 웹앱을 통해 열리도록 하는 기능이 추가되었다.

또한 HTML 입력 요소들에 제안 텍스트를 노출하도록 구성할 수 있는 writingsuggestions 속성의 지원이 추가되었고, 정규식에서는 Unicode 15.1.0 문자들의 지원 등 다양한 기능 개선을 확인할 수 있다.

Inline conditionals in CSS?

CSS WG은 24년 6월 회의에서 논의를 통해 인라인 if() 함수 문법 추가에 대한 합의를 이뤘다.

/* 사용 예시 */
animation: if(media(prefers-reduced-motion) ? 10s : 1s) rainbow infinite;

합의가 이뤄지긴 했지만, 표준 명세에 도달하기 까지는 긴 과정(낙관적 관점에서도 2년여)이 예상된다. 하지만 다양한 사용성을 제공할 수 있다는 측면에서 기대되는 명세다. 명세에 대한 자세한 논의는 제안서를 통해 확인할 수 있다.

1,100km 떨어져 있는 사용자를 위한 UX 리서치부터 과감한 리뉴얼까지의 기록

일본의 최대 규모 음식 배달 서비스인 데마에칸의 MerchantApp UX/UI 리뉴얼 경험을 소개하는 글이다.

주문을 받고 배달원에게 음식을 전달하는 과정에서 사용하는 간단한 도구로 생각할 수 있지만 매장마다 다른 운영방식의 복잡함과 디지털 리터러시가 낮은 연령대가 주로 사용하며, 매출과 직결되는 프로덕트라는 조건의 도전적인 상황에서 어떻게 개선을 시도했는지 소개한다.

Transpiler, “사용”말고 “활용”하기

Transpiler의 기본적인 용도는 다른 코드로 변환하는 것에 있다. 단순히 언어적인 변환의 용도에 더해 플러그인을 만들고, 클릭 대상 요소에 로깅을 위한 속성을 자동으로 추가해 유저 활동 데이터 수집 방법을 효율화한 경험을 읽어볼 수 있다.

🕹 튜토리얼

Hands-On Guide to Property-Based Testing in JavaScript

일반적인 테스트 시나리오에서는 예제 기반 테스트를 통해 하드코딩된 입력값을 사용하고, 이를 하드코딩된 결괏값과 비교한다. 하지만 이러한 방식은 예측하지 못한 입력값에 대해 취약할 수밖에 없다. 속성 기반 테스트를 사용하면 수천 가지의 데이터 변형을 생성하고, 테스트할 수 있다.

How to publish a JavaScript package in 2024

Deno의 JSR은 향상된 문서와 원활한 런타임 간 호환성을 통해 패키지의 퍼블리싱과 소비를 간소화하는 것을 목표로 한다. 특히 TypeScript로 JavaScript 패키지를 배포하는 기존의 방법은 transpiling, 다양한 내보내기 조건에 따른 package.json 설정, 대용량 npm tarball 처리 등의 복잡함이 수반된다.

이 세션은 다양한 상황을 가정해, 패키지를 JSR에 배포하고 기존의 불편함들이 어떻게 해소될 수 있는지 데모를 통해 소개한다.

How to Make a CSS Timer

카운트다운을 개발해야 한다면, 아마도 JavaScript 타이머를 사용하는 방법을 떠올릴 것이다.

CSS 만으로 카운트다운을 표현할 수 있다는 사실을 알고 있는가? CSS Houdini의 일원인 @property와 keyframe 애니메이션을 사용해 타이머 카운트다운을 구현할 수 있다.

Array.reduce() is Goated 🐐✨

Array.reduce()의 가장 대표적인 사용은 배열의 값을 더하는 경우이다. 하지만 그 외에도 배열의 평탄화(flat), 평균값 계산, 고유값 생성 등 다양한 용도로 사용될 수 있는 방법을 소개한다.

📦 코드와 도구

React Internals Explorer - easily see how React works

React Internals Explorer 개발자는 2021년 처음 React 영역에 깊게 파고들기 시작했을 때, React 내부를 이해하기 위한 방편으로 직접 다이어그램을 그려나갔다고 한다. 하지만 이는 많은 노력이 수반되고, 정적 이미지 수준에 그쳤기 때문에 자동으로 시각화하는 도구를 만들어 주는 것을 떠올렸다고 한다.

Farm

Farm은 Vite와 호환성을 갖는 Rust로 작성된 웹 빌드 도구다. 자체 벤치마크 상으로는 webpack 대비 20배, Vite 대비 10배 빠른 성능을 보여줄 수 있다고 한다.

jskidpix

Kid Pix는 1989년 Macintosh 용으로 개발된 어린이들을 위한 비트맵 그래픽 소프트웨어다. jskidpix는 이의 HTML/JS 구현체로, Kid Pix의 일부 기능을 재현하고 있다.

Tetris Font

Tetris Font는 테트리스 게임의 도형을 이용해 입력한 글자를 게임의 동작과 같이 표현해 준다.

smol-string

smol-string은 브라우저의 localStorage(또한 SessionStorage)와 함께 사용하도록 설계된 압축 라이브러리로, lz-string 대체제로 사용될 수 있다. 사용방법은 압축/해제 함수를 통해 간단히 수행할 수 있으며, 비동기 수행은 WebWoker를 통해 처리된다.

자체 벤치마크를 통해 공개된 결과에 따르면 모든 부분에서 lz-string 보다 나은 성능을 보여주고 있다.

Ark UI

Ark UI는 Chakra UI 개발팀에서 개발한 headless UI 라이브러리로 37개의 다양한 컴포넌트를 제공한다. 현재는 React, Solid 그리고 Vue에서 사용할 수 있다.

matcha.css

matcha.css는 브라우저의 기본 스타일 시트와 유사하게 HTML 요소의 스타일을 지정하도록 설계된 순수 CSS 라이브러리로, 사용자가 문서 스타일링을 위한 추가 작업을 수행하지 않고 사용되도록 구성되었다. 빠른 프로토타이핑, 정적 HTML 페이지, 마크다운으로 생성된 문서, 복잡한 CSS를 파고들지 않고 워크플로를 간소화하고 사용 가능한 모든 HTML 요소를 활용하려는 개발자에게 이상적이다.

<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">

간단히 match.css 파일을 문서에 로딩하는 것만으로 사용되며, 물론 필요한 경우 태그들과 CSS 변수들을 자신의 스타일에 맞게 오버라이드할 수 있다.

dossi is now open source

dossi는 GitHub 내에 개인 노트를 저장하고 관리할 수 있는 웹앱이다. 나중에 다시 확인하고 싶은 이슈, 아이디어, 생각 등을 기록하고 관리할 수 있는 도구로 24년 5월 오픈소스로 전환되었다.

글을 통해 dossi 개발 과정에서의 도전적인 이슈들과 기술 스택 등을 확인할 수 있다.

One Million checkboxes

노출되는 백만 개의 체크박스들 중, 참여자들이 체크(또는 해제)하면 참여중인 다른 모든 이들에게도 상태가 공유되는 게임(?)이다. 개발자는 자신의 친구와의 대화에서 아이디어를 떠올렸다고 한다.

효율적인 상태 저장을 위해 bit array를 사용했고, 상탯값은 redis에 저장된다. 개별적인 토글의 브로드캐스팅은 웹소켓을 통해 30초마다 전송되며, react-window를 통해 뷰포트에 노출되지 않는 체크박스는 렌더링 되지 않도록 구현했다고 한다.

[참고] 개발자의 블로그에서 더 많은 개발 뒷이야기를 확인할 수 있다.

• ONE MILLION CHECKBOXES