UI 딜레마 규칙과 유연 사이
모달 크기는 콘텐츠 양, 사용자 행동, 탭의 비교 필요성에 따라 고정과 유동을 선택해야 합니다.\n규격을 유지하되 과도한 콘텐츠는 더 큰 모달이나 페이지 분리를 고려해야 합니다.
#UI/UX#디자인 시스템#모달
300
태그
디자인 시스템 기술 블로그 글
디자인 시스템 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 84개최신 20개 표시
관련 태그
최신 게시글
20개 표시
에이전트도 읽는 디자인 시스템, Clay 개편기
AI 에이전트가 읽는 Clay 디자인 시스템을 위해 Figma·React의 명칭과 구조를 통일했습니다.\n가이드라인과 CLI를 제공해 타입 에러를 없애고 작업 시간·비용을 절반 가까이 낮췄습니다.
#디자인 시스템#AI 에이전트#React
4500
AI로 만들고, 디자인으로 완성한 3개월
AI로 분석 툴 노트북을 빠르게 검증하고, 디자인으로 밀도와 사용성을 완성한 3개월의 과정을 정리했습니다. 고객이 실제로 쓸 수 있는 제품이 되기까지의 판단과 협업 방식을 소개합니다.
#디자인 시스템#프로토타입#대시보드
3700
배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것
전자계약서 화면을 AI와 함께 다시 설계하고, 뷰·폼·스토어로 나눠 구현한 과정을 소개했습니다. AI는 반복 구현을 맡기고 사람은 경계 설정과 명세 승인, 최종 품질 확인을 담당했습니다.
#React#디자인 시스템#react-hook-form
1100
배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것
서버 개발자가 헥사코드를 몰라도 되게 만들기
SDUI를 도입했지만 화면 결정이 코드에 남아 있어 배포 병목이 계속 생겼습니다. 이를 해결하기 위해 화면 구성을 데이터화한 UX Builder와 토큰 기반 운영 구조를 설계했습니다.
#SDUI#server-driven UI#어드민
5700
AI가 읽는 디자인 시스템: 추상화를 다시 설계한 이유
AI가 디자인 시스템을 사용할 때는 규칙을 설명하는 것보다 잘못된 상태를 만들 수 없게 하는 추상화가 중요하다고 다뤘습니다. 목적별 컴포넌트 분리와 타입 계약으로 접근성과 상호작용을 시스템이 직접 소유하는 방법을 소개했습니다.
#디자인 시스템#TypeScript#접근성
8400
에이전트가 디자인 시스템 컴포넌트를 “제대로” 쓰게 만드는 방법
AI 에이전트가 Figma 디자인을 코드로 바꾸는 흐름에서 디자인 시스템 컴포넌트를 제대로 쓰게 만드는 방법을 다룹니다. 디자인과 코드 변환 과정의 기준을 정리하는 데 초점을 둡니다.
#Figma#디자인 시스템#컴포넌트
5000
에이전트가 디자인 시스템 컴포넌트를 “제대로” 쓰게 만드는 방법
멀티 프로덕트 브랜드 아키텍처와 디자인 가이드
멀티 프로덕트 환경에서 브랜드 아키텍처가 디자인 시스템의 기준점이 되는 이유를 정리했습니다. 핵심 자산 분리, 컴포넌트 추상화, 문서화의 중요성도 함께 다뤘습니다.
#브랜드 아키텍처#디자인 시스템#피그마
14600
MUI 기반 디자인시스템 VUI
MUI 기반 디자인 시스템 VUI의 구축 배경과 토큰-테마-컴포넌트 연결 구조를 소개했습니다. 브랜드와 모드 변형을 설정으로 흡수하고, 남은 과제도 정리했습니다.
#MUI#디자인 시스템#design token
6600
에이전트를 위한 디자인 시스템
에이전트가 활용할 디자인 시스템을 매니페스트·브랜드 시드·명시적 제약 데이터로 설계했습니다.\n조합 테스트와 빌드 검증으로 일관된 인터랙션 품질을 운영하는 방식을 소개합니다.
#에이전트#디자인 시스템#인터랙션 디자인
100
디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
여기어때가 디자인 시스템에 맞는 아이콘을 빠르게 만들기 위해 생성기와 벡터화 파이프라인을 구축했습니다. 실무에 바로 쓰이도록 프롬프트, 정제, UX까지 함께 최적화했습니다.
#벡터화#prompt#UI/UX
13700
디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
프롬프트 한 줄로 만드는 화면의 한계를 짚고, 디자인 시스템에 맞는 의사결정 자동화가 핵심이라고 설명했습니다. 어드민, CLI, 에이전트로 발전한 Kraft와 Plan/Orchestra 구조도 소개했습니다.
#prompt#디자인 시스템#CLI
27200
프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
Nobody Owned the Website. Now Everybody Does.
분산된 웹 자산을 디자인 토큰 기반 Next.js 모노레포로 통합했습니다.\nAI 에이전트용 규칙과 자동화로 전사 기여 가능한 브랜드 플랫폼을 구축했습니다.
#디자인 시스템#Next.js#Turborepo
000
리멤버 iOS의 SwiftUI 도입기 — 허들을 하나씩 넘기며
오래된 UIKit iOS 앱에 SwiftUI를 단계적으로 도입한 과정을 소개했습니다. 위젯부터 셀 임베딩, 디자인 시스템, 재사용 문제 해결까지 허들을 하나씩 넘겼습니다.
#iOS#SwiftUI#UIKit
6800
리멤버 iOS의 SwiftUI 도입기 — 허들을 하나씩 넘기며
AI가 실행을 맡는 시대, 디자이너의 경쟁력
AI가 실행을 맡는 시대에 디자이너의 역할을 문제 발견과 판단, 시스템 설계로 재정의했습니다. Taste와 Judgement를 키우고 디자인 시스템을 AI 오케스트레이션의 기반으로 삼아야 한다고 설명했습니다.
#UI/UX#디자인 시스템#prompt
1300
AI가 실행을 맡는 시대, 디자이너의 경쟁력
AI가 실행을 맡는 시대, 디자이너의 경쟁력
AI가 실행을 맡는 시대에 디자이너는 문제를 발견하고 판단하는 역할로 이동했습니다. 또한 AI가 일관되게 일하도록 시스템을 설계하는 능력이 중요하다고 강조했습니다.
#디자인 시스템#ChatGPT#Claude
1500
AI 시대의 디자인 시스템: 적정 밀도는 무엇일까?
디자인 시스템을 일관성과 판단 비용 관리의 문제로 다시 정리했습니다.\nAI를 활용해도 최종 기준과 예외 판단은 사람이 맡아야 한다고 설명했습니다.
#디자인 시스템#Figma#토큰
20000
AI 시대의 디자인 시스템: 적정 밀도는 무엇일까?
멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유
React와 Vue를 함께 지원하던 디자인 시스템에서 운영 비용을 줄이기 위해 지원 범위를 재정의했습니다. React는 컴포넌트 운영축으로, Vue는 파운데이션 중심으로 전환한 사례입니다.
#React#Vue.js#Next.js
8400
멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유
The Flip
AI 에이전트가 브랜드와 사용자 맥락에 맞춰 UI를 구성하도록 디자인 시스템을 재정의했습니다. 구조화된 문서·스킬과 NPM 패키지로 디자인 판단을 전달하는 방향을 소개합니다.
#디자인 시스템#NPM#UI/UX
000
The Flip
AI가 디자인을 대신 만들어주는 것이 아니라, AI가 쓸 디자인 시스템을 설계하는 관점입니다. 브랜드 맥락과 인터랙션 규칙을 구조화해 에이전트가 바로 조합하고 실행할 수 있게 만들었습니다.
#디자인 시스템#agent#UI/UX
2600