디자인 시스템4분
CTA 컴포넌트를 8종에서 4종으로: 두 앱 이상에서 쓸 때만 디자인 시스템에
"기업 맞춤 소프트웨어 개발, 듀오랩스 / 무료로 상담받기." 금색 버튼이 달린 이 상담 카드가 형제 앱 여섯 곳의 리포에 각각 복사돼 있었습니다. 처음 만든 앱에서 잘 동작하니 다음 앱에 복사했고, 그다음 앱에도 복사했습니다. 여섯 벌은 조금씩 달랐습니다. 링크 주소가 다르고, 창 안에서의 동작이 다르고, 모바일에서 …
전체 카테고리
디자인 시스템 9개 글
여러 화면에서 일관된 디자인을 유지하는 방법을 정리합니다. 토큰과 컴포넌트를 정의하고 실제 제품에 적용하는 과정을 읽어보세요.
먼저 읽어볼 글
이 순서로 살펴보세요
우리 서비스에 적용할 계획이 있으신가요?
홈페이지·웹서비스 개발 살펴보기 →전체 글
- 디자인 시스템8분
AI 디자인 스킬의 모순: 안티 slop 규칙이 새 기본값이 되는 과정
AI 코딩 에이전트에게 랜딩 페이지를 만들라고 하면 거의 같은 화면이 나옵니다. 보라색에서 파란색으로 넘어가는 그라디언트, 모든 글자에 Inter, 가운데 정렬된 히어로 아래 둥근 카드 세 장. 그래서 "AI 티 안 나게" 해 주는 디자인 스킬이 GitHub에서 가장 빠르게 스타를 모으는 분야 중 하나가 됐습니다. 9월…
- 디자인 시스템11분
ERP 메뉴 스타일 정리: 화면을 찾아가는 여섯 가지 방식과 두 줄 툴바
입사 둘째 날인 영업 담당자가 수주를 넣으려고 ERP를 엽니다. 왼쪽 메뉴에는 영업관리, 구매관리, 재고관리, 생산관리가 있고, 영업관리를 펼치니 수주등록, 수주현황, 수주마감, 수주변경이력이 또 나옵니다. 옆자리 선임은 메뉴를 쓰지 않습니다. 검색창에 「수주」를 치고 엔터를 누릅니다.
- 디자인 시스템10분
색 테마 20종을 위한 리팩토링: 하드코딩된 색 100곳과 캔버스 모듈 분리
회사 홈페이지에 색 테마를 붙였습니다. 다크·라이트는 이미 있었고, 거기에 색 팔레트를 고르는 축을 하나 더 얹는 일이었습니다.
- 디자인 시스템12분
웹사이트 구축 전 기획: 목표·콘텐츠·정보 구조를 정리하는 방법
좋은 웹사이트 기획은 화면을 많이 그리는 일이 아니라, 방문자가 해야 할 일을 콘텐츠와 구조로 명확하게 만드는 일이다. 이 글에서는 첫 코드를 작성하기 전에 목표, 사용자, 콘텐츠, 페이지 구조, URL, 접근성 기준을 하나의 실행 가능한 문서로 정리하는 방법을 다룬다.
- 디자인 시스템19분
웹 디자인 레이아웃의 기본: 콘텐츠 흐름부터 반응형 그리드까지
웹 레이아웃은 화면을 몇 칸으로 나눌지 정하는 작업이 아닙니다. 콘텐츠의 읽기 순서를 먼저 세우고, 넓이가 달라져도 그 순서와 기능이 무너지지 않도록 공간의 규칙을 만드는 작업입니다.
- 디자인 시스템2분
디자인 시스템 이름을 짓는 방법: 오래 가는 네이밍 전략
디자인 시스템을 운영하다 보면 버튼, 컬러, 레이아웃보다 먼저 부딪히는 문제가 있습니다. 바로 이름입니다. 이름은 문서 구조, 패키지명, 컴포넌트 철학, 팀 내 커뮤니케이션에 계속 영향을 줍니다.
- 디자인 시스템2분
네오브루탈리즘 UI는 언제 효과적일까
네오브루탈리즘은 최근 웹과 앱 디자인에서 자주 보이는 강한 시각 스타일입니다. 두꺼운 테두리, 원색, 딱딱한 그림자, 과감한 타이포그래피를 사용해 화면을 포스터처럼 보이게 만듭니다.
- 디자인 시스템3분
UI 디자인 스타일을 빠르게 이해하는 실무 가이드
웹사이트나 앱을 만들 때 “어떤 느낌으로 디자인할 것인가”는 생각보다 중요한 결정입니다. 같은 기능이라도 시각 언어에 따라 신뢰감, 친근함, 전문성, 실험성이 완전히 달라집니다.