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

Attio, multi-tenant scale을 위한 typed formula… — 2026년 31주 디자인 시스템

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 31-2026
데이터 모델

Attio, multi-tenant scale을 위한 typed formula language 구축

Attio는 Lezer와 CodeMirror 기반 custom grammar로 formula attribute를 만들며 incremental parsing, error highlighting, autocomplete, domain-specific reference를 확보했습니다. Declarative type system은 record attribute, historical value, phone number, actor reference를 표현하고 generic과 runtime coercion을 지원합니다. 대규모 재계산은 batch로 fan-out하며 SQL 기반 function은 Spanner에서 실행되고 모든 batch는 일관된 snapshot을 위해 공통 transaction timestamp를 읽습니다. Workspace ID 기반 Pub/Sub ordering key는 각 tenant가 worker를 공정하게 쓰도록 제한합니다. Formula 작성 agent는 schema context를 받고 custom DSL output이 valid할 때까지 type과 reference error를 feedback으로 사용합니다.

Read Articlearrow_forward
Article · 접근성READ TIME: 4m

Axe Monitor MCP, 접근성 scan을 sprint plan으로 전환

Deque의 Axe Monitor MCP integration은 접근성 관리자가 report를 수동 비교하는 대신 AI assistant에서 scan history를 query하게 합니다. Team은 새 regression, 영향이 큰 component, 다음 sprint와 관련된 page를 식별한 뒤 full issue detail을 포함한 우선순위 remediation plan을 요청할 수 있습니다. 여러 sprint에 걸쳐 target score에 도달하는 scenario를 model하고 designated administrator가 scan을 bulk 생성하거나 설정할 수도 있습니다. Human judgment를 대체하기보다 기존 scan evidence를 분석하고 계획하는 시간을 줄이는 방식입니다. 사용하려면 Axe Monitor 8.8과 MCP Server offering access가 필요합니다.

READ_FULL_LOGarrow_forward
Article · 현지화READ TIME: 4m

Buttondown, Django·Vue·email에 단일 localization contract 적용

Buttondown은 localization을 portable JSON file 하나에 저장하고 key마다 locale별 translated value를 둡니다. Django template tag, Vue wrapper component, background transactional-email job이 모두 같은 source를 읽어 runtime별 translation 경로를 만들지 않습니다. CI는 missing·malformed string을 검사하고 codebase 전체를 이어 붙여 unused key까지 거부합니다. Team은 documentation과 support가 영어 전용이므로 subscriber-facing surface만 localize하고 author dashboard는 의도적으로 제외했습니다. 결과적으로 paid author의 75%가 non-English locale을 선택하고 subscriber의 40% 이상이 non-English-speaking country에 있으며 open string에는 community locale과 수정이 기여됐습니다.

READ_FULL_LOGarrow_forward
Article · 시각 QAREAD TIME: 8m

Visual regression test, functional coverage 밖의 UI를 보호한다

Functional test가 통과해도 shared icon, stylesheet, responsive layout은 눈에 띄게 깨질 수 있습니다. Visual regression testing은 실제 browser에서 page나 component를 render하고 승인된 baseline과 비교하며 pixel이 바뀌면 review를 요구합니다. Percy, Chromatic, Vitest Browser Mode는 full page, Storybook component, browser-mode unit test처럼 서로 다른 범위를 다룹니다. 신뢰할 수 있는 suite를 만들려면 font와 image loading을 기다리고 animation을 끄거나 mask하며 date 같은 dynamic data를 안정화해야 합니다. 거대한 snapshot은 review fatigue와 반복적인 false failure를 만들 수 있으므로 선택적인 high-value surface부터 시작하는 것이 좋습니다.

READ_FULL_LOGarrow_forward
Article · 협업READ TIME: 2m

LiveFile, file을 first-class 협업 Storage value로 만든다

Liveblocks의 public-beta LiveFile은 collaborative application state와 같은 동기화 Storage document에 arbitrary file을 추가합니다. Whiteboard나 editor는 useUploadFile로 upload하고 mutation에서 반환값을 연결한 뒤 useFileUrl로 resolve할 수 있으며, 별도 storage integration 없이 연결된 사용자가 file 변경을 실시간으로 봅니다. Document, archive, presentation, media를 모두 지원합니다. Server workflow는 liveblocks.uploadFile을 호출하고 API로 Storage를 mutate할 수 있어 asset을 생성하거나 처리하는 background agent에도 적합합니다. Liveblocks 3.17 이하 application은 도입 전에 upgrade guide를 따라야 합니다.

READ_FULL_LOGarrow_forward
Video · 크리에이티브 코딩8:29

Claude로 디자인을… 너무 많이 했습니다

Flux Academy는 research와 ideation을 Claude에 넘기면 독창적인 idea에 앞서는 생산적 불편함과 창작 소유감을 함께 잃을 수 있다고 주장합니다. James Webb Young의 A Technique for Producing Ideas를 바탕으로 한 process는 project research와 designer의 개인 관심사를 결합하고 concept가 떠오르기 전 incubation period를 허용합니다. AI가 만든 concept는 그 개인적 source material과 분리돼 평균에 가까워지는 경향이 있습니다. 수정된 workflow에서는 reference 수집, sketch, 산책, ideation, 신뢰하는 사람의 feedback을 인간이 맡습니다. AI는 image, video, code, render, angle, style 같은 실행 단계에서만 들어가며 인간의 창의성에 AI 실행력을 더하는 방식으로 선택한 idea의 가능성을 넓힙니다.

AI_INFOGRAPHIC
Claude로 디자인을… 너무 많이 했습니다 — infographicWATCH_VIDEOarrow_forward
summarizeDigest_Summary

31주차 Design Systems 이야기는 product rule을 executable contract로 바꾸는 방법에 관한 것입니다. Attio는 Lezer와 CodeMirror로 typed formula language를 구축하고, 일관된 Spanner snapshot에서 대규모 재계산을 실행하며, Pub/Sub ordering key로 tenant 사이의 공정성을 유지합니다. Formula 작성 agent도 같은 type system으로 제약되므로 잘못된 reference는 조용한 product error가 되지 않고 수정 피드백으로 돌아갑니다.

주변 workflow에도 같은 수준의 검사가 필요합니다. Deque의 Axe Monitor MCP integration은 scan history를 우선순위가 지정된 remediation plan으로 바꾸고, visual regression test는 class name이나 component 내부가 아니라 실제 rendering 결과를 비교합니다. Buttondown은 Django, Vue, background email에 portable localization JSON 하나를 사용하고 missing, malformed, unused key를 CI에서 검사합니다. Design system은 token과 component가 accessibility, localization, visual output, data semantics에 대한 machine-checkable guarantee와 결합될 때 신뢰할 수 있습니다.

Liveblocks의 public-beta LiveFile은 runtime에서도 같은 통합을 보여 줍니다. File은 동기화되는 Storage value가 되고 모든 collaborator에게 실시간으로 update되며 React hook과 server-side agent workflow 모두에서 upload할 수 있습니다. Surface마다 병렬 경로를 다시 만들기보다 shared primitive 안에 capability를 두는 것이 핵심입니다.

Flux Academy는 이러한 machine-checkable system에 인간의 경계를 더합니다. 수정된 process는 research, sketch, incubation, 신뢰하는 feedback을 designer에게 남기고 Claude는 idea 소유가 아닌 실행에 사용합니다. 이 구분은 인간의 창의성에 AI 실행력을 더하는 방식을 system constraint로 다룹니다. Automation은 concept를 기본으로 선택하는 대신 의도적으로 고른 concept를 확장합니다.

Key Takeaways
  • AI가 생성한 product logic에 deterministic validator를 제공하세요. Attio는 formula agent의 표현식을 수락하기 전에 type과 reference error를 다시 agent에 전달합니다.
  • component와 responsive page 경계에 visual snapshot을 추가하고 font, animation, dynamic data를 먼저 안정화한 뒤 의도된 baseline 변경마다 명시적 승인을 요구하세요.
  • Research, ideation, incubation, 신뢰하는 feedback은 인간이 소유하고 concept를 고른 뒤 AI를 투입해 idea를 평균화하지 말고 실행 범위를 넓히세요.