AI 산출물이 프로덕션이 되기까지-AI와 디자인시스템이 함께 일하는 법
네이버가 AI 산출물을 프로덕션 코드로 전환하기 위한 디자인 시스템 전략을 공개했습니다.
디자인 시스템·UX 기술 블로그 글 모음
디자인 시스템·UX 주제의 기술 블로그 글 83편. 디자인 시스템, UI 컴포넌트, UX 연구, 인터랙션 디자인.
최근 글
700여개의 아이콘을 하나로 묶는 법 - 뱅샐 아이콘 개편기 2편
뱅크샐러드가 700여 개의 아이콘을 통합 관리하기 위한 디자인 시스템 개편 과정을 공개했습니다.
사용자를 위한 아이콘이란 무엇일까? - 뱅샐 아이콘 개편기 3편
뱅크샐러드가 700여 개의 아이콘을 개편하며 직관성과 작업 효율을 높인 과정을 공개했습니다.
선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편
뱅크샐러드가 사용성 개선을 위해 700여 개의 아이콘에서 외곽선을 제거했습니다.
디자이너의 아이디어가 금융상품이 되기까지
토스뱅크 디자이너들이 게임 요소를 접목해 키워봐요 31일 적금을 출시했다.
에이전트도 읽는 디자인 시스템, Clay 개편기
아임웹이 Figma와 React 규칙을 맞추고 Clay를 AI 에이전트가 읽기 쉽게 개편했다.
9인조 다람쥐 아이돌을 데뷔시켰습니다
토스뱅크가 직접 저금하는 경험을 살리도록 키워봐요 적금의 다람쥐와 화면을 다시 설계했다.
Improving site performance by shipping more CSS
GitHub이 CSS-in-JS 의존성을 단계적으로 걷어내고 서비스 스타일을 CSS Modules로 전환했다.
출처: GitHub Engineering · · 원문 보기
방해하지 않고, 눈에 띌 수 있을까
토스뱅크가 자산관리 리포트를 플로팅 카드로 분리해 클릭률과 전환율을 3배 높였다.
New in Chrome 154
구글이 iframe 크기 자동 조절과 CSS 스크롤 마커 모드를 지원하는 크롬 154를 출시했습니다.
출처: Chrome Developers · · 원문 보기
도메인 지식 없는 디자이너가 팀의 기준을 바꾼 방법
토스뱅크가 사용자 불안을 기준으로 해외송금 경험을 다시 설계했다.
사용자를 위해 일부러 어렵게 만드는 경험, 어디까지 괜찮을까?
토스뱅크가 10대 저축을 돕는 잠금 저금통에 짧은 해제 지연을 설계했다.
The future of practice: Enabling teachers to create learning interactives with generative UI
Google Research는 교사가 교육 목표에 맞춘 학습용 인터랙티브 시뮬레이션을 생성하는 실험을 공개했다.
출처: Google Research · · 원문 보기
フロカン福岡で、Webとラーソーメンでお腹いっぱいになりました
사이보즈는 프런트엔드 컨퍼런스 후쿠오카에 참여하여 부스를 운영하고 웹 수직 쓰기 에디터에 대해 발표했습니다.
출처: Cybozu Inside Out · · 원문 보기
이제 디자이너가 PR을 올립니다
버즈빌 디자인팀이 코드 저장소에서 직접 디자인 변경 PR을 만들고 리뷰받는 흐름으로 전환했다.
FlowEval: Reference-Based Evaluation of Generated User Interfaces
FlowEval은 실제 사이트와 생성 UI의 탐색 경로를 비교해 인터페이스 생성을 평가한다.
맥락이 형태를 결정할 때
왓챠와 왓챠피디아는 앱 스토어 스크린샷 설계에서 시각적 요소보다 서비스 본질의 맥락을 우선했습니다.
디자이너에게 AI로 뭐든 만들어보라고 한다면
토스 디자이너들이 반복 작업과 프로토타입, 모션 제작에 AI를 적용했다.
매일 하던 업무를 디자인하기
토스뱅크 디자이너가 Slack 업무 맥락을 모으는 AI 할 일 위젯을 만들어 팀에 공유했다.
AI로 바꾼 제품 설계의 순서
토스가 상담 데이터로 챗봇 시나리오를 만들고 프로토타입에서 빠르게 검증했다.
디자이너가 시안 대신 앱을 만든 이유
토스 디자이너가 AI와 SwiftUI로 동작하는 underlay 시안을 만들고 코드로 전달했다.
디자인시스템 팀은 디자인시스템만 잘 만들면 될까
당근 SEED 팀이 AI 시대 디자인시스템의 역할을 경험 기준과 맥락 관리로 넓힌다.
AI로 디자인시스템 마이그레이션하기 (1): 여정의 시작
인프랩이 AI 에이전트와 공존형 패키지로 20여 앱의 Mantine 디자인시스템을 v8로 옮겼다.
디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
여기어때가 YDS 스타일의 2D·3D 아이콘을 생성하고 SVG로 다듬는 디자인 도구를 만들었다.
무신사 메가스토어 성수: 보이지 않는 기술, 선명해지는 경험
무신사가 메가스토어 성수에 가격·상품 정보·결제 기술 네 가지를 연결했다.
Links to CSS colour palettes
줄리아 에반스가 바닐라 CSS 프로젝트에서 활용하기 좋은 색상 팔레트 모음을 공유했습니다.
출처: Julia Evans · · 원문 보기
AI 네이티브 디자인 플레이북
버즈빌 디자인 팀이 디자인 시스템과 Claude Code로 목업·핸드오프 중심의 작업을 코드 배포 흐름으로 바꿨다.
Squash and Stretch
디즈니 애니메이션 원칙인 찌그러짐과 늘어남 기법을 웹 SVG 아이콘과 자바스크립트로 구현합니다.
출처: Josh Comeau · · 원문 보기
쿠폰은 많은데, 왜 혜택은 느껴지지 않았을까?
여기어때는 예약 흐름의 쿠폰 혜택을 이해하기 쉽게 정리해 사용률을 높였다.
ACM Human-Computer Interaction Conference (CHI) 2026
Apple이 CHI 2026에서 HCI 연구 발표와 AirPods Pro 3 착용감 데모를 진행한다.
이 주제를 다룬 매체
- 네이버 (104편)
- 뱅크샐러드 (21편)
- 토스 (122편)
- 아임웹 (17편)
- GitHub Engineering (16편)
- Chrome Developers (10편)
- Google Research (27편)
- Cybozu Inside Out (10편)
- 버즈빌 (15편)
- Apple ML (211편)
- 왓챠 (11편)
- 당근마켓 (52편)
- 인프랩 (20편)
- 여기어때 (107편)
- 무신사 (62편)
- Julia Evans (10편)
- Josh Comeau (10편)