SOSOLOG
디자인 시스템, 코드를 넘어서
커리어에서 세 번째 디자인 시스템을 만들고 있다. 그중 한 번은 처음부터 만들었고 두 번은 기존 시스템 위에서 재개발했다. 이 세 번의 과정에서 중요한 것과 그렇지 않은 것을 알게 됐고 그 과정 속에서 겪은 여러 어려움을 글로 정리했다. 만들기 전에 목표 중요한 것은 퀄리티 대원칙 만들기 만드는 중에 대원칙 수호하기 코드는 기본이다 정의가 전부다 하나만 선…
Deploy 2023
12월 회고 시즌이다. 올 해는 개인적으로도, 일적으로도 수평적으로 넓어진 한 해였다. 기억에 남는 경험을 중심으로 회고를 작성했다. 새로운 팀, 새로운 디자인 시스템 올 해 3월 토스의 PC Design Platform Team에 합류했다. ‘토스에 PC제품이 있어?’라고 생각할 수 있지만 토스 커뮤니티(계열사)에는 대고객 제품부터 어드민까지 PC제품이 …
렌더링 성능 개선(2) — 합성 애니메이션 사용
이번 글에서는 성능 개선의 관점에서 렌더링을 다시 살펴보려 한다. 렌더링 성능 최적화는 어떻게 접근해야 할까? 웹 성능 최적화는 가장 빠른 렌더링 패스를 구현하는 것이 아니다. 렌더링 과정은 전적으로 브라우저에서 진행되는 것으로, 렌더링 과정 자체를 개선할 수는 없다. 따라서, 성능 ‘개선’의 접근 방식은 렌더링 과정 자체의 개선이 아니라 과정 중 병목이 …
렌더링 성능 개선(1) — 렌더링 과정 이해하기
들어가며 최근 개인 프로젝트의 렌더링 성능을 개선하며 브라우저 렌더링 과정에 대해 정리하고 정확히 무엇이 성능 저하의 원인인지, 어떻게 개선될 수 있었는지 정리해봤다. 렌더링 파이프라인 렌더링 성능을 개선하려면 먼저 렌더링 과정과 이에 관여하는 요소를 대해 알아야 한다. 이 글에서 다룰 내용은 Blink엔진 기준이며, RenderingNG 글과 2020년 …
Deploy 2022
매년 회고 글에서 ‘올해는 특별했다.’라고 적는 것 같지만, 이번 해는 좀 더 그렇다. 일(work)과 커리어, 개인의 삶에서 크고 작은 변화가 있었다. 여러 가지 변화 중 기억에 남는 몇 가지 키워드들로 회고를 작성했다. flex 2.0과 협업에 대한 고민 현재 flex 제품은 팀에 합류했던 시점과 다르다. 2021년 8월부터 ‘2.0 프로젝트’라는 이름…
Design System Decision Record
이 글은 FEConf2022 디자인 시스템, 형태를 넘어서 발표에서 다루지 않은 linear라는 Design System에 대한 고민과 결정에 대한 글입니다. Table of Contents Principle Problem from Principle Interface Compound Component Headless 예시 1. Trigger 예시 2. 다양…
Scoped Context
React Context API는 React 컴포넌트 트리 내의 전역적(global)인 데이터를 공유할 수 있는 방법이다. Provider가 선언된 컴포넌트 기준으로 하위 컴포넌트에서는 해당 Context의 값을 사용할 수 있다. Provider 하위컴포넌트에서 Context를 사용할 수 있다는 것은, “Consumer는 가장 가까운 Provider기준으로…
Select 컴포넌트
Intro 어떤 디자인 시스템에서 Select 컴포넌트를 제공한다면, 어떤 기능들을 기대하시나요? 이 글에서는 Select컴포넌트에게 바라는 기능을 중심으로 구현 방법과 예제 코드를 설명합니다. ⚠️ 이 글에서 소개되는 코드는 모두 수도코드(pseudo code)입니다. 동작여부보다는 소개하고자하는 맥락을 중심으로 작성되었습니다. Table of Conte…
그 많던 import React from ‘react’는 어디로 갔을까
이 글에서는 React 17릴리즈에 포함되었던 JSX Transform의 RFC문서를 살펴보며 이 변경사항이 어떤 의미를 가지고 있는지 정리해 보았습니다. 중간중간 내용에 대한 첨언과 약간의 추측을 덧붙였습니다. 관련하여 피드백이 있으시다면 댓글로 남겨 주시면 감사하겠습니다. 발단 React17은 2020년 10월 20일에 릴리즈되었다. 이 글이 릴리즈 이…
Deploy 2021
작년에 썼던 이야기 올해를 돌아보니 작년 회고를 쓸 때 생각했던 방향과는 꽤 다른 방향으로 걸었다. 작년에 생각했던 큰 목표 중 하나는 Infra관련 공부였는데 올해 새로운 곳으로 이직하고 정신없이 보내다 보니 회고를 쓸 즘에야 이 단어를 다시 떠올리는 걸 보면 여러 가지 우선순위 뒤쪽에서 오래 방치해뒀다는 뜻이겠다. 새로운 곳은 당연히 시스템이 다르고, …