(BUSAN.SASHIMI)
terminal
Weekly Digest // DESIGN_SYSTEMS — Week 17-2026
architectureWeekly Report

Design Token 명명 규칙 실전 가이드 — 2026년 17주 디자인 시스템

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 17-2026
토큰

Design Token 명명 규칙 실전 가이드

디자인 시스템을 확장하면서 토큰 이름을 일관되게 유지하는 것은 가장 어려운 과제 중 하나입니다. 이 가이드는 primitive, semantic, component 토큰의 3계층 모델과 Category-Property-Modifier, Object-Property-Modifier, context-first 패턴 등 5가지 구체적인 명명 규칙을 설명합니다. Design Tokens Community Group 사양과 Tokens Studio, Style Dictionary 같은 도구를 기반으로 variant, state, mode, numbered scale을 예측 가능하고 위치 안정적인 방식으로 처리하는 방법을 다룹니다. 일관성 우선, 명확성 우선, 시각적 값보다 의도를 표현하는 semantic 이름, 넓은 범주에서 구체적으로의 순서, 자기 설명적인 이름, 성장을 고려한 패턴이라는 6가지 실용적인 규칙도 제시됩니다. 마지막으로 정식 명명 가이드, 검토 체크리스트, 설계와 개발 간 공동 소유권 등 경량 거버넌스 권장 사항을 통해 시스템이 발전함에 따라 규칙을 안정적으로 유지하는 방법을 다룹니다.

Design Token 명명 규칙 실전 가이드
Read Articlearrow_forward
Video · AI 워크플로우

AI를 활용한 Design-to-Code 프로세스

Flux Academy는 Figma와 Figma MCP 서버를 통해 연결된 Claude Code를 사용하는 완전한 디자인에서 코드로의 워크플로우를 소개합니다. 대시보드, 분석 테이블, 필터 가능한 알림, 탭 설정으로 구성된 멀티 스크린 개념적 앱을 HTML, CSS, JavaScript로 작성합니다. AI에 넘기기 전 주요 준비 단계로는 전체에 auto layout 적용(AI가 절대 픽셀 위치 대신 flex 컨테이너를 읽도록), Figma AI로 레이어 이름 바꾸기, MCP 서버가 Claude에 전달하는 텍스트 및 색상 스타일 설정, 컴포넌트 variant 정리가 있습니다. 비디오는 두 번의 프롬프트 반복을 보여줍니다. 첫 번째는 Figma 디자인 사양으로부터 시각적으로 정확한 스켈레톤을 생성하고, 두 번째는 실제 기능 — CSV 내보내기, 필터 chip, 토스트 피드백이 포함된 전체 읽음 처리, 편집 가능한 폼 입력 — 을 추가합니다. 발표자는 워크플로우의 핵심은 도구에 구애받지 않는다고 강조합니다. 디자인 기본기, 깔끔한 파일 구조, 평가적 판단력은 여전히 디자이너의 대체 불가능한 기여입니다.

AI_INFOGRAPHIC
AI를 활용한 Design-to-Code 프로세스 — infographicWATCH_VIDEOarrow_forward
Article · 실시간READ TIME: 9m

CRDT와 Sync Engine이 Fractional Indexing으로 실시간 목록 순서를 유지하는 방법

일반 배열 인덱싱은 단일 삽입 또는 재정렬 시 이후의 모든 인덱스를 이동시켜야 하므로 멀티플레이어 앱에서는 두 클라이언트가 동시에 편집할 때 충돌이 발생합니다. Fractional indexing은 각 항목에 0과 1 사이의 고유한 위치 값을 부여하여 이 문제를 해결합니다. 이를 통해 작업당 하나의 인덱스만 업데이트되고 서로 다른 클라이언트의 동시 편집이 자동으로 수렴됩니다. 이 글은 Liveblocks가 프로덕션에서 해결한 세 가지 실질적인 문제를 다룹니다. 약 50번의 끝 삽입 후 부동 소수점 정밀도 소진(인덱스를 문자열로 저장하여 해결), 반복적인 push로 인한 인덱스 길이 급증(3자씩 앞으로 이동 후 1씩 증가하는 viewport 기반 성장 알고리즘으로 해결), 데이터 크기(사전순 정렬을 위해 출력 가능한 ASCII를 사용하는 base-96 인코딩으로 전환하여 감소). Liveblocks는 이를 충돌 없는 멀티플레이어 배열인 LiveList로 제공하고 useStorage와 useMutation을 통한 React 통합을 보여줍니다.

READ_FULL_LOGarrow_forward
Article · 접근성READ TIME: 9m

Session Timeout: 인증 디자인에서 간과되는 접근성 장벽

세션 타임아웃은 운동, 인지, 시각 장애를 가진 사용자들에게 불균형적으로 큰 피해를 줍니다. 전 세계 약 13억 명의 장애인과 웹사이트 이용자의 약 20%를 차지하는 신경다양인이 이에 해당합니다. 운동 장애는 입력 속도를 늦춰 사용자가 비활성 상태처럼 보이게 하고, ADHD를 가진 사용자는 시간 맹목증으로 카운트다운을 제대로 인식하지 못하며, 스크린 리더 사용자는 탐색에 더 많은 시간이 필요한 반면 카운트다운 타이머는 매초 상태 알림을 쏟아낼 수 있습니다. 주요 실패 패턴으로는 알림 없는 타임아웃, 연장 불가능한 세션, 만료 시 폼 데이터 완전 손실이 있습니다. 이 기사는 세션 연장 다이얼로그가 포함된 사전 경고, 활동 기반과 절대적 타임아웃 구분, localStorage 또는 sessionStorage를 통한 자동 저장을 권장합니다. WCAG 2.2 지침 2.9.2 — 조정 가능하거나 해제 가능한 시간 제한을 요구하는 — 준수가 기준 표준으로 다루어집니다.

READ_FULL_LOGarrow_forward
Article · ReactREAD TIME: 3m

React Compiler 렌더링 가이드

Mark Erikson은 React Miami 2026과 Devoxx UK 2026(확장 버전)에서 발표한 React 렌더링 기본 원리 및 React Compiler 내부에 관한 슬라이드와 동영상 링크를 공개했습니다. 이 발표는 Erikson의 널리 읽힌 참고 글의 주제인 React의 리렌더링 동작의 핵심 멘탈 모델을 재검토하고, 실제 컴파일된 컴포넌트 출력을 살펴봄으로써 React Compiler가 내부적으로 무엇을 하는지 명확히 설명합니다. 핵심 주제는 컴파일러가 React의 기본 렌더링 동작을 어떻게 역전시키는지입니다. 개발자가 수동으로 useMemo와 useCallback을 호출하는 대신 컴포넌트를 자동으로 메모화하며, 이 변화가 앞으로 컴포넌트 설계에 대한 개발자의 사고 방식에 어떤 의미를 갖는지를 다룹니다. 표준 및 확장 슬라이드 덱이 모두 이 글에 링크되어 있습니다.

READ_FULL_LOGarrow_forward
Article · 오픈소스READ TIME: 6m

디지털 독립

웹 디자이너 Thomas Gunther는 Elon Musk의 Twitter 인수와 Tim Cook의 정치적 입장에 촉발된 디지털 독립을 향한 개인적인 여정을 돌아봅니다. 그는 Twitter에서 Mastodon으로 이동하고, 검색(Ecosia), 브라우저(Ungoogled Chromium), 결제(Wero), 메시지(Signal) 등에서 프라이버시를 존중하는 대안을 채택했으며, MacBook 대안으로 TUXEDO InfinityBook Pro 14 같은 Linux 울트라북을 적극적으로 탐색하고 있습니다. 이 글은 Audacity v4 재디자인과 Mastodon의 Linux 디자인 커뮤니티를 예로 들며 오픈 소스 소프트웨어의 디자인 품질이 의미 있게 향상되었다고 주장하며, 무료 소프트웨어는 보기 싫어야 한다는 가정을 반박합니다. 전체적으로 참여 최적화 알고리즘이 인간의 주의력을 어떻게 착취하는지를 외계인 시각으로 보여주는 짧은 SF 소설이 엮여 있으며, enshittification과 웹 중앙화를 맞서야 할 구조적 문제로 프레이밍합니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주 디자인 시스템 커버리지는 토큰 명명, 접근성, 그리고 신흥 디자인-코드 AI 워크플로우에 초점을 맞췄습니다. 종합적인 명명 가이드는 primitive, semantic, component의 3계층 토큰 모델과 Category-Property-Modifier, Object-Property-Modifier 패턴을 포함한 5가지 구체적인 명명 규칙을 제시했습니다. Design Tokens Community Group 사양과 Tokens Studio, Style Dictionary 등 도구를 기반으로 6가지 규칙을 도출했습니다. 일관성 우선, 명확성 우선, 시각적 값보다 의도를 표현하는 semantic 이름, 넓은 범주에서 구체적으로의 순서, 자기 설명적 이름, 성장을 고려한 패턴과 함께 명명 가이드, 검토 체크리스트, 부서 간 공동 소유권을 통한 경량 거버넌스도 다뤘습니다.

Smashing Magazine의 심층 분석은 세션 타임아웃이 WCAG 2.2 지침 2.9.2 아래에서 간과된 중요한 접근성 장벽임을 밝혔습니다. 운동 장애는 입력 속도를 늦춰 사용자가 비활성 상태처럼 보이게 하고, ADHD의 시간 맹목증은 카운트다운을 무의미하게 만들며, 스크린 리더 사용자는 탐색에 더 많은 시간이 필요합니다. 권장 패턴으로는 사전 세션 연장 다이얼로그, 활동 기반과 절대적 타임아웃 구분, localStorage 또는 sessionStorage를 통한 자동 저장이 있습니다.

실시간 협업 측면에서 Liveblocks는 CRDT에서 충돌 없는 리스트 순서를 위한 fractional indexing에 대한 상세한 기술 포스트를 발표했습니다. 약 50번의 끝 삽입 후 부동소수점 정밀도 소진(문자열 저장으로 해결), 인덱스 길이 급증(viewport 기반 성장 알고리즘으로 해결), 데이터 효율을 위한 base-96 인코딩 전환을 다뤘습니다. React API는 이를 useStorage와 useMutation을 통한 LiveList로 제공합니다.

Key Takeaways
  • 디자인 토큰 명명은 넓은 범주에서 구체적으로의 순서로 primitive, semantic, component의 3계층 모델을 따라야 하며, Tokens Studio와 Style Dictionary 같은 거버넌스 도구는 표준 명명 가이드와 부서 간 검토 체크리스트가 필요합니다.
  • 세션 타임아웃은 운동 장애, ADHD, 스크린 리더 사용자에 대해 WCAG 2.2 지침 2.9.2를 위반합니다. 세션 연장 다이얼로그와 localStorage 또는 sessionStorage를 통한 자동 저장을 구현하세요.
  • Fractional indexing은 CRDT 리스트 순서 충돌을 해결하지만, 프로덕션에서 실용적으로 사용하려면 부동소수점이 아닌 문자열 저장 인덱스, viewport 기반 성장 알고리즘, base-96 인코딩이 필요합니다.