Series
Building a design system
Defining Aurora Ledger’s colors, type and spacing, and sharing them across products.
-
디자인 시스템 세우기 5 — color-scheme을 바꿔도 배경이 그대로였다
테마 선택을 바꿔도 스크롤바만 반응했습니다. 빌드된 CSS에서 light-dark()가 변수로 변환된 것을 확인하고 테마 변경을 data-theme 속성으로 통일했습니다.
-
디자인 시스템 세우기 6 — 제목의 자리는 있는데 글자가 없었다
일본어 제목이 빈칸으로 보였지만 DOM과 레이아웃은 정상이었습니다. 사용한 폰트에 폭만 있고 획이 없는 글자가 있어, 적용 문자 범위를 제한했습니다.
-
디자인 시스템 세우기 7 — 파일명을 위한 말줄임이 삭제 질문까지 잘랐다
Pocket PDF에서 가져온 제목 컴포넌트가 환율 계산기의 삭제 질문을 가운데서 잘랐습니다. 파일명을 위한 예외를 분리하고 일반 제목은 줄바꿈하도록 고쳤습니다.
-
디자인 시스템 세우기 4 — light-dark(8%, 12%)로는 배경색을 만들 수 없었다
Emoticon Studio 목업에서 옅은 배경이 보이지 않았습니다. color-mix()의 혼합 비율에 넣은 light-dark(8%, 12%)가 원인이었고, 색상 두 개를 만든 뒤 선택하도록 고쳤습니다.
-
디자인 시스템 세우기 3 — Aurora Ledger에서 바꾼 색과 강조의 기준
물타기 계산기 목업에서 시작한 디자인을 웹과 앱의 공통 기준으로 옮겼습니다. 중성색, 등락색, 그라데이션을 다시 정한 이유와 공통 토큰의 범위를 살펴봅니다.
-
디자인 시스템 세우기 2 — 같은 크기라던 배지의 주석을 확인해 보니
24.dp를 따로 적어 둔 두 배지를 공통 상수로 묶다가, 32.dp 버튼에 28.dp와 같다는 주석을 발견했습니다. 화면을 확인하니 실제 크기는 같았고 주석이 오래된 상태였습니다.
-
디자인 시스템 세우기 1 — 테마를 바꾸면 되살아나는 옛 브랜드색
목업의 여러 테마 블록에 색을 따로 적어 두자 옛 브랜드색이 남았습니다. light-dark()로 두 테마의 색을 한곳에 모으고, 테마 선택은 color-scheme으로 분리했습니다.