CSS 한 줄이 댓글까지 바꿀 때, 카드 안의 선택 범위를 좁히는 법
이미지가 있는 카드의 문단 여백을 줄이는 규칙이 댓글 아바타까지 조건으로 삼으면 카드와 댓글을 함께 바꾼다. 관계 선택자의 조건과 적용 대상을 직접 자식으로 한정한 예제를 실행하고, CSS 전환에서 줄 수보다 먼저 살펴볼 동작의 경계를 짚었다.
“컴포넌트” 검색 결과검색 초기화8편
카드 한 장을 뒤집기까지, 피그마의 규칙과 움직임을 맞추는 법
피그마의 디자인 시스템 안내와 코드 레이어 활용 사례를 함께 읽었다. 숫자로 동작을 나눠 만든 카드 지갑, 실제 React 컴포넌트로 비교하는 화면은 생성 결과를 고치는 기준이 어디서 오는지 보여준다. 새 기능의 개수보다 팀의 규칙을 작동하는 시제품에 이어주는 과정에 주목한다.
디지털 제품의 소통 비용 낮추는 명명 설계와 토큰 체계
UI 컴포넌트, 코드 클래스, 색상, 디자인 토큰 등 제품 개발 전반에서 발생하는 명명 혼선을 줄이기 위한 체계적 분류법과 인튜이트, 보다폰 UK 등 주요 기업의 계층 설계 전략을 살펴봅니다.
Adobe Commerce, 드롭인 컴포넌트 기반 프런트엔드 블록 아키텍처 제시
Adobe가 Edge Delivery Services 환경에서 자체 상거래 기능을 확장할 수 있는 3단계 블록 개발 모델을 공개했다. 모놀리식 템플릿 재정의 대신 공식 드롭인 컴포넌트와 문서 기반 블록을 조합하는 방식으로 프런트엔드 수명 주기를 분리하는 것이 핵심이다.
피그마 Code Connect 도입한 코인베이스 평가 결과와 운영 조건
피그마가 공개한 코인베이스 디자인 시스템 팀의 Code Connect 도입 사례에 따르면, 컴포넌트 연결 템플릿을 정비한 뒤 진행한 세 차례 실행에서 토큰 11.5%, 구현 시간 22.3%, 비용 22.5%가 감소했다. 수치 절감과 함께 실제 컴포넌트 선택과 템플릿 유지 관리 흐름이 확인됐다.
피그마가 제시한 디자인과 코드 왕복 흐름과 에이전트 문맥 전달
피그마가 MCP와 Code Connect를 활용해 디자인과 코드 사이를 오가는 협업 워크플로우를 공개했다. 가상 앱 시나리오를 바탕으로 상태 전이, 컴포넌트 연결, 변수 갱신 및 최종 검토 과정을 정리했다.
피그마, 빠른 AI 개발 속도에 의도와 검증 및 컴포넌트 맥락 결합 제안
피그마가 빠르게 생성된 시제품의 외관과 제품 방향 판단을 구분해야 한다는 개발 관점을 제시했다. 테스트와 명세, 디자인 시스템 맥락을 제공하고 최종 방향은 팀이 판단해야 한다는 설명이다.
접근성을 일회성 감사에서 개발과 운영의 반복 체계로 전환하는 방법
미하일 프로스미츠키는 접근성을 정기 감사를 넘어 디자인 시스템, 코드 검토, 배포 점검에 연결되는 지속적 운영 역량으로 다루자고 제안했다. WebAIM과 GOV.UK 자료는 자동 검사와 공통 컴포넌트가 출발점일 뿐 실제 과업 완성을 보장하지 않음을 보여 준다.
