← 탐색

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

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

읽히지 않던 가이드라인이 실행되기 시작했다

디자인 시스템 팀에서 가장 허무한 순간이 있다. 2주 걸려서 간격 규칙 문서를 정리했는데, 신규 입사자가 8px 대신 10px을 넣는 걸 목격할 때.

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

디자인 시스템에 SLA가 붙는 순간

토스가 TDS를 앱인토스 개발자센터에 공개한 순간, 디자인 시스템이라는 단어의 무게가 달라졌다. 가이드라인이나 스타일 가이드 수준이 아니다.

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

프로젝트가 폴더로 바뀌었을 뿐인데

Figma가 8월 3일부터 '프로젝트'를 '폴더'로 바꾸고 최대 10단계 중첩을 열기 시작했다. 오래 기다린 기능인 만큼 흥분하기 쉬운데, 냉정하게 보면 이건 "폴더를 넣을 수 있게 됐다"는 게 전부다.

figma디자인시스템중첩폴더
디자인 시스템 로그 · ·3분 읽기

완벽한 컴포넌트가 AI 냄새를 풍긴다

올해 들어 한 가지 이상한 피드백이 반복된다. "너무 깔끔해서 신뢰가 안 간다.

디자인시스템anti-ai불완전함
디자인 시스템 로그 · ·2분 읽기

이미지에는 토큰이 없었다

디자인 시스템이 하는 일의 핵심은 반복 가능한 판단을 코드화하는 것이다. 버튼의 radius, 텍스트의 line-height, 컬러 팔레트의 명도 체계 — 전부 토큰과 컴포넌트로 감싸져 있다.

figma-weave디자인시스템이미지에셋
디자인 시스템 로그 · ·3분 읽기

HSL이 밝기에 대해 거짓말하고 있었다

디자인 시스템 팔레트를 HSL 기준으로 만들면서 color-blue-500과 color-yellow-500이 같은 위계라고 믿었다면, 그 믿음은 틀렸다. HSL의 Lightness는 수학적 중간값이지 사람 눈이 느끼는 밝기가 아니기 때문이다.

oklch접근성apca
디자인 시스템 로그 · ·3분 읽기

유리 한 장이 토큰 여섯 개를 먹는다

iOS 26이 나오고 일주일 뒤, 슬랙에 올라온 메시지는 예측 가능했다. "우리도 글래스 효과 넣을 수 있어요?

liquid-glass디자인토큰디자인시스템
디자인 시스템 로그 · ·2분 읽기

토큰 포맷이 지루해진 건 축하할 일이다

토큰 포맷 논쟁이 끝난 지 10개월이 지났다. W3C DTCG 2025.

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

셰이더를 디자인 시스템에 넣으면 벌어지는 일

어제 팀 라이브러리에 셰이더가 처음 올라왔다. 이름은 surface/noise-grain-subtle.

figma셰이더디자인시스템
디자인 시스템 로그 · ·3분 읽기

패딩이 거짓말을 멈춘 날

Figma에서 프레임 패딩을 30px로 잡아놨는데 개발자가 "이거 실제로 안 맞는데요?"라고 슬랙을 보내본 적 있다면, 그 경험의 유효기간이 끝났다.

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

200개가 깨졌는데 버그는 3개였다

금요일 오후, 디자인 시스템 팀의 슬랙에 알림이 쏟아진다. 버튼 컴포넌트의 패딩을 4px 줄인 PR 하나가 비주얼 리그레션 테스트에서 스크린샷 217개를 깨뜨렸다.

비주얼리그레션디자인시스템ai테스팅
K-테크 인사이더 · ·2분 읽기

"커서가 우리 버튼을 모른다" — 배민이 디자인시스템에 MCP를 붙인 이유

AI한테 화면 하나 만들어달라고 했더니 <Button variant="primary">를 뱉는다. 우리 디자인시스템 버튼은 <BdsButton appearance="filled">인데.

배민우아한형제들mcp
디자인 시스템 로그 · ·2분 읽기

제품은 열 개인데 라이브러리는 하나다

2년 전만 해도 Figma는 인터페이스 디자인 도구였다. 지금은 Design, Dev Mode, FigJam, Slides, Draw, Sites, Buzz, Make, Motion, Weave — 10개 제품을 품은 플랫폼이다.

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

컴포넌트 하나에 런타임이 필요했던 이유가 사라졌다

디자인 시스템 팀이라면 한 번쯤 겪어봤을 장면이 있다.

css-anchor-positioning디자인시스템디자인토큰
디자인 시스템 로그 · ·3분 읽기

코드가 캔버스로 돌아올 때, 토큰이 따라온다

프로덕션 화면을 Figma에 붙여 넣는 순간, 모든 컬러가 #1B1B1F로 굳는다. 변수 연결?

figma디자인토큰code-backed-screens
디자인 시스템 로그 · ·3분 읽기

에이전트는 토큰을 읽는다. 브랜드는 못 읽는다.

GPT-5.6이 Figma Make에 올라탄 7월 9일, 디자인 커뮤니티에서 가장 많이 돈 말은 "프로토타이핑 5분 컷"이었다.

디자인시스템에이전트브랜드컨텍스트
디자인 시스템 로그 · ·3분 읽기

일부러 삐뚤게 만든 UI가 더 잘 팔린다

올해 리브랜딩을 진행한 Affinity, Eventbrite, Radford Beauty의 공통점이 하나 있다. 전부 일부러 삐뚤빼뚤하게 만들었다.

디자인시스템의도된불완전함디자인토큰
디자인 시스템 로그 · ·3분 읽기

디자인 시스템이 API가 되는 순간

토스 앱인토스에 미니앱이 쌓이고 있다. 외부 개발자가 만든 서비스가 토스 안에 들어오는 구조인데, 여기서 TDS(Toss Design System)는 지금까지와 완전히 다른 종류의 소비자를 만나고 있다.

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

타임라인은 왔는데 토큰이 없다

Figma Motion이 6월 말부터 롤아웃되기 시작했다. 타임라인, 키프레임, 이징 커브 — 디자이너가 After Effects나 Principle을 켜지 않아도 캔버스 위에서 직접 애니메이션을 만들 수 있게 됐다.

figma-motion디자인토큰모션토큰
디자인 시스템 로그 · ·2분 읽기

투명도 슬라이더가 말해주는 것

Apple이 WWDC 2026에서 Liquid Glass에 투명도 슬라이더를 추가했다. 사용자가 직접 유리의 불투명도를 조절할 수 있게 한 것이다.

liquidglass디자인토큰접근성
1 / 3 Next →