디자인
AI 생성 UI 검수 기준: 생성형 AI 디자인 툴 아웃풋 품질 관리 실전 가이드
Figma AI, Galileo AI, Uizard 등 생성형 디자인 도구 아웃풋의 품질 검수 체크리스트, 접근성 자동 검증, 디자인 시스템 일관성 확인 방법을 다룹니다.
AI 디자인UI 품질 관리생성형 AI디자인 검수디자인 시스템
블로그
주제별로 묶은 디자인 프로세스·도구·원칙 글입니다. 입문부터 운영까지 참고용으로 열람할 수 있습니다.
디자인 · 10건
디자인
Figma Code Connect 2026: 컴포넌트 매핑으로 디자인-개발 싱크 자동화하기
Figma Code Connect 설정, 컴포넌트 Props 매핑, 디자인 변경 시 자동 코드 업데이트 워크플로우, Storybook 연동, 실전 팀 적용 사례를 다룹니다.
Figma Code Connect디자인-개발 싱크컴포넌트 매핑디자인 시스템자동화
디자인
2026 디자인 엔지니어링: 디자이너-개발자 협업 방식의 근본적 변화와 도구 스택
디자인 엔지니어 역할의 부상, Figma-코드 브리지 도구 생태계, 디자이너가 직접 코드 기여하는 워크플로우, 팀 구조 설계까지 2026년 디자인-개발 협업의 새로운 패러다임을 다룹니다.
디자인 엔지니어링디자이너 개발자 협업Figma디자인 시스템팀 워크플로우
디자인
Figma Variables 2.0과 Expression Tokens: 조건 로직으로 살아있는 디자인 시스템 만들기
Figma Variables의 Expression Tokens 기능으로 정적인 스타일 값을 넘어 수식과 조건 로직이 담긴 동적 디자인 시스템을 구현하는 방법을 설명합니다.
Figma디자인 토큰Variables디자인 시스템Expression Tokens
디자인
개발자 포트폴리오 사이트, SEO까지 잡아야 완성이다: 디자인과 검색 최적화를 동시에
개발자 포트폴리오 사이트는 멋진 디자인만으로는 부족합니다. Core Web Vitals, 구조화 데이터, 메타 태그 최적화까지 SEO를 고려한 포트폴리오 디자인 전략을 설명합니다.
SEO포트폴리오웹 디자인Core Web Vitals개발자 브랜딩
디자인
폰트 하나로 모든 화면을 완벽하게: 유동 타이포그래피 시스템 구축 가이드
CSS clamp()와 가변 폰트(Variable Font)를 활용해 모바일부터 대형 모니터까지 완벽하게 작동하는 유동 타이포그래피 시스템을 구축하는 방법을 안내합니다.
타이포그래피가변 폰트CSS디자인 시스템반응형
디자인
접근성은 선택이 아니다: 처음부터 접근성을 갖춘 UI 컴포넌트 만들기
EU EAA 시행과 WCAG 2.2 업데이트를 계기로 접근성을 UI 설계 초기부터 내재화하는 방법을 알아봅니다. 스크린리더 사용자의 경험부터 자동화 테스트까지 실무 가이드를 제공합니다.
접근성WCAGARIA스크린리더컴포넌트
디자인
AI에게 우리 브랜드를 가르치는 법: 에이전트 시대의 디자인 시스템 설계
AI 에이전트가 자율적으로 UI를 생성하는 시대에 브랜드 일관성을 유지하려면 어떻게 디자인 시스템을 설계해야 하는지 살펴봅니다.
AI디자인 시스템에이전트브랜드Agentic UI
디자인
Figma MCP: 디자이너가 코드를 몰라도 되는 세상이 오고 있다
Figma가 MCP(Model Context Protocol)를 공식 지원하면서 AI가 디자인 파일을 직접 읽어 코드를 생성하는 시대가 열렸습니다. 디자인-개발 협업이 어떻게 바뀌는지 살펴봅니다.
FigmaMCP디자인-개발 협업AI코드 생성
디자인
디자인 토큰 제대로 쓰기: W3C 표준이 바꾸는 디자인 시스템의 미래
디자인 토큰이 무엇인지, W3C 표준 3계층 구조(Primitive → Semantic → Component)가 어떻게 멀티플랫폼 디자인 시스템을 혁신하는지 실무 예시와 함께 설명합니다.
디자인 토큰디자인 시스템W3CStyle DictionaryFigma