디자인 시스템4분
CTA 컴포넌트를 8종에서 4종으로: 두 앱 이상에서 쓸 때만 디자인 시스템에
"기업 맞춤 소프트웨어 개발, 듀오랩스 / 무료로 상담받기." 금색 버튼이 달린 이 상담 카드가 형제 앱 여섯 곳의 리포에 각각 복사돼 있었습니다. 처음 만든 앱에서 잘 동작하니 다음 앱에 복사했고, 그다음 앱에도 복사했습니다. 여섯 벌은 조금씩 달랐습니다. 링크 주소가 다르고, 창 안에서의 동작이 다르고, 모바일에서 …
전체 태그
#design-system 7개 글
- 디자인 시스템8분
AI 디자인 스킬의 모순: 안티 slop 규칙이 새 기본값이 되는 과정
AI 코딩 에이전트에게 랜딩 페이지를 만들라고 하면 거의 같은 화면이 나옵니다. 보라색에서 파란색으로 넘어가는 그라디언트, 모든 글자에 Inter, 가운데 정렬된 히어로 아래 둥근 카드 세 장. 그래서 "AI 티 안 나게" 해 주는 디자인 스킬이 GitHub에서 가장 빠르게 스타를 모으는 분야 중 하나가 됐습니다. 9월…
- 디자인 시스템11분
ERP 메뉴 스타일 정리: 화면을 찾아가는 여섯 가지 방식과 두 줄 툴바
입사 둘째 날인 영업 담당자가 수주를 넣으려고 ERP를 엽니다. 왼쪽 메뉴에는 영업관리, 구매관리, 재고관리, 생산관리가 있고, 영업관리를 펼치니 수주등록, 수주현황, 수주마감, 수주변경이력이 또 나옵니다. 옆자리 선임은 메뉴를 쓰지 않습니다. 검색창에 「수주」를 치고 엔터를 누릅니다.
- 프론트엔드9분
디자인 시스템을 씌우기 전에 레이아웃 틀부터 맞춰야 하는 이유
같은 디자인 시스템을 사용하는데도 어떤 화면은 정돈되어 보이고, 어떤 화면은 미묘하게 어긋나 보일 때가 있습니다. 색상과 버튼 모양이 같아도 페이지 폭, 여백, 제목 위치, 입력 필드의 구성이 제각각이면 전체 인상은 쉽게 흐트러집니다.
- 프론트엔드10분
디자인 시스템을 복제하지 않는 방법: Polaris 구조와 CSS 테마로 다시 설계한 DEUX
디자인 시스템이 두세 개로 늘어나면 가장 먼저 보이는 차이는 색상과 모서리입니다. 그래서 새로운 시스템을 만들 때 기존 버튼과 카드의 색만 바꾸는 일로 시작하기 쉽습니다. 하지만 시간이 지나면 각 시스템 폴더에 Button, Input, Dialog, Chart 구현이 하나씩 생깁니다. 처음에는 독립성이 높아 보이지만,…
- 디자인 시스템2분
디자인 시스템 이름을 짓는 방법: 오래 가는 네이밍 전략
디자인 시스템을 운영하다 보면 버튼, 컬러, 레이아웃보다 먼저 부딪히는 문제가 있습니다. 바로 이름입니다. 이름은 문서 구조, 패키지명, 컴포넌트 철학, 팀 내 커뮤니케이션에 계속 영향을 줍니다.
- 디자인 시스템3분
UI 디자인 스타일을 빠르게 이해하는 실무 가이드
웹사이트나 앱을 만들 때 “어떤 느낌으로 디자인할 것인가”는 생각보다 중요한 결정입니다. 같은 기능이라도 시각 언어에 따라 신뢰감, 친근함, 전문성, 실험성이 완전히 달라집니다.