← 탐색

태그된 포스트: 디자인시스템

디자인 시스템 로그 · ·3분 읽기

소리와 진동에도 변수 이름이 필요하다

토스 앱에서 송금 완료 알림이 울릴 때 나는 특유의 짧은 효과음이 있다. 카카오톡의 "카톡" 소리도 마찬가지고, 삼성 키보드의 타건 진동도 그렇다.

멀티모달디자인토큰햅틱
디자인 시스템 로그 · ·2분 읽기

슬래시 하나로 디자인 시스템이 움직인다

팀에 새로 합류한 디자이너가 Make에서 프로토타입을 만든다. 컴포넌트는 대충 맞는데 간격이 이상하고, 컬러 토큰을 하나도 안 쓴다.

makeskillsfigma디자인시스템
디자인 시스템 로그 · ·2분 읽기

글리머 — 배경이 사라진 디자인 시스템

우리가 만드는 모든 디자인 시스템은 하나의 전제를 공유한다. 화면이 불투명하다는 것.

글리머구글xr
디자인 시스템 로그 · ·3분 읽기

그 컴포넌트, props 몇 개야

상품 카드 하나에 showBadge, showPrice, showRating, variant, size, onClick, onWishlist… props가 서른 개를 넘기는 순간, 그건 컴포넌트가 아니라 설정 파일이다.

컴파운드컴포넌트디자인시스템react
디자인 시스템 로그 · ·3분 읽기

하나의 코드베이스, 세 개의 브랜드

회사가 세 번째 브랜드를 인수했다. 디자인 시스템 담당자에게 떨어진 미션은 단순하다 — 컴포넌트 코드를 하나로 유지하면서 브랜드마다 다른 룩앤필을 적용하라.

멀티브랜드디자인토큰styledictionary
디자인 시스템 로그 · ·3분 읽기

MCP가 드러낸 디자인 시스템의 빈틈

Figma MCP 서버를 연결하고 Claude Code에서 "이 화면 구현해줘"를 던졌을 때, 첫 번째로 깨달은 건 에이전트의 능력이 아니라 우리 Figma 파일의 민낯이었다.

mcpfigma디자인시스템
디자인 시스템 로그 · ·2분 읽기

Draw 모드가 Auto Layout을 삼켰다

지난주 Figma 릴리즈 노트를 훑다가 손이 멈췄다. Draw 모드에서 Auto Layout을 바로 쓸 수 있다는 문장이 눈에 걸렸기 때문이다.

figmadraw모드autolayout
디자인 시스템 로그 · ·2분 읽기

레이아웃은 AI가 짠다 — 디자인 시스템은 뭘 잡아야 하나

에누리 가격비교가 지난주 모바일 홈 화면을 전면 개편했다. 목적형 구매 고객에게는 검색 중심의 간결한 동선을, 탐색형 고객에게는 개인화 추천 피드를 보여준다.

생성형ui디자인시스템적응형인터페이스
디자인 시스템 로그 · ·2분 읽기

토큰 JSON에 $만 붙이면 된다고?

2025년 10월, W3C Design Tokens Community Group이 첫 안정 버전을 발표했다. 반 년이 지난 지금, 한국 디자인 시스템 팀 중 이 포맷으로 실제 전환한 곳을 찾기 어렵다.

dtcg디자인토큰w3c
디자인 시스템 로그 · ·3분 읽기

디자인 시스템이 OS 설정을 읽기 시작했다

운영체제 접근성 설정 깊숙한 곳에 '동작 줄이기'라는 옵션이 숨어 있다. iOS에서는 '동작 줄이기', Android에서는 '애니메이션 제거'.

접근성디자인토큰적응형토큰
디자인 시스템 로그 · ·3분 읽기

에셋 공장이 캔버스 위에 올라왔다

Lyft가 브랜드 사진 한 세트로 도시, 차량, 배경, 조명을 자유자재로 바꿔가며 수백 장의 마케팅 에셋을 뽑아낸다는 이야기를 들었을 때, 처음엔 에이전시가 몇 달 매달린 프로젝트인 줄 알았다. 포토샵 장인이 수십 시간을 갈아넣은 결과물이라고.

figmaweave디자인시스템에셋파이프라인
디자인 시스템 로그 · ·3분 읽기

Make Kit은 디자인 시스템의 API다

디자인 시스템 팀이 Figma 라이브러리에 컴포넌트를 정리하고 가이드라인 문서를 업데이트하면 할 일이 끝난다고 생각하던 시대가 있었다. 4월 초 Figma가 Make Kit을 정식 출시하면서, 그 전제가 조용히 무너졌다.

makekitsfigma디자인시스템
디자인 시스템 로그 · ·2분 읽기

Claude Design이 흔든 건 Figma가 아니라 디자인 시스템이다

어제(4월 17일) Anthropic이 Claude Design을 공개했다. 텍스트 프롬프트로 인터랙티브 프로토타입, 피치 덱, 마케팅 원페이저를 만드는 도구다.

claudedesignanthropicfigma
디자인 시스템 로그 · ·2분 읽기

토스가 Figma를 안 쓰는 이유 — Deus가 지운 두 단계

한국의 B2C 서비스 중 대부분은 Figma를 디자인 시스템의 홈으로 쓴다. 토스는 그 선택을 2020년에 뒤집었다.

토스deus디자인시스템
디자인 시스템 로그 · ·2분 읽기

Button에 props가 30개라면

카카오스타일 프론트엔드팀이 디자인 시스템을 재구축하면서 컴파운드 컴포넌트 패턴을 전면 도입했다는 글을 읽었다. 놀랍지 않았다.

디자인시스템컴파운드컴포넌트카카오스타일
디자인 시스템 로그 · ·2분 읽기

일관성의 반대편에 서는 디자인 시스템

2026년 디자인 트렌드 리포트를 훑어보면 한 가지 공통된 키워드가 보인다. "대담함.

디자인시스템트렌드디자인토큰
디자인 시스템 로그 · ·3분 읽기

디자인 시스템 팀의 새로운 산출물은 마크다운 파일이다

디자인 시스템 팀이 만드는 것은 무엇인가. 컴포넌트, 토큰, 문서.

figma디자인시스템skills
디자인 시스템 로그 · ·3분 읽기

Detach 버튼을 누르는 건 반란이 아니라 신호다

디자이너가 Figma에서 컴포넌트를 detach하는 순간, 디자인 시스템 팀은 보통 두 가지 반응 중 하나를 보인다. "왜 규칙을 안 지키지?

디자인시스템adoption토스
디자인 시스템 로그 · ·3분 읽기

4.5:1을 통과했는데 왜 안 읽힐까

컬러 대비 검사를 통과했는데 사용자가 텍스트를 못 읽겠다고 한다. WCAG 2.

apcawcag컬러토큰
디자인 시스템 로그 · ·2분 읽기

Figma MCP Write가 열렸다 — 디자인 토큰이 에이전트의 어휘가 되는 구조

Figma가 캔버스의 쓰기 권한을 AI 에이전트에게 열었다. 읽기만 되던 MCP 서버에 write 기능이 붙으면서, Claude Code나 Cursor 같은 도구가 컴포넌트를 만들고, 변수를 적용하고, 실제 디자인 에셋을 직접 조작할 수 있게 됐다.

figmamcp디자인토큰
1 / 2 Next →