태그
#design-system
글 9편 · 최신순
-
디자인 시스템 세우기 5 — color-scheme을 바꿔도 배경이 그대로였다
테마 선택을 바꿔도 스크롤바만 반응했습니다. 빌드된 CSS에서 light-dark()가 변수로 변환된 것을 확인하고 테마 변경을 data-theme 속성으로 통일했습니다.
-
디자인 시스템 세우기 7 — 파일명을 위한 말줄임이 삭제 질문까지 잘랐다
Pocket PDF에서 가져온 제목 컴포넌트가 환율 계산기의 삭제 질문을 가운데서 잘랐습니다. 파일명을 위한 예외를 분리하고 일반 제목은 줄바꿈하도록 고쳤습니다.
-
첫 앱 출시기 5 — 스토어 설명을 앱이 하는 만큼으로
소개 페이지를 손보고 스토어 설명에 주식·코인과 이미지 공유를 넣었습니다. 글자 수 검사를 통과한 문구에도 실제 앱과 다른 설명이 남아 있어, 11개 언어를 다시 검수했습니다.
-
디자인 시스템 세우기 3 — Aurora Ledger에서 바꾼 색과 강조의 기준
물타기 계산기 목업에서 시작한 디자인을 웹과 앱의 공통 기준으로 옮겼습니다. 중성색, 등락색, 그라데이션을 다시 정한 이유와 공통 토큰의 범위를 살펴봅니다.
-
디자인 시스템 세우기 2 — 같은 크기라던 배지의 주석을 확인해 보니
24.dp를 따로 적어 둔 두 배지를 공통 상수로 묶다가, 32.dp 버튼에 28.dp와 같다는 주석을 발견했습니다. 화면을 확인하니 실제 크기는 같았고 주석이 오래된 상태였습니다.
-
디자인 시스템 세우기 1 — 테마를 바꾸면 되살아나는 옛 브랜드색
목업의 여러 테마 블록에 색을 따로 적어 두자 옛 브랜드색이 남았습니다. light-dark()로 두 테마의 색을 한곳에 모으고, 테마 선택은 color-scheme으로 분리했습니다.
-
안드로이드를 만들며 2 — 라이트 모드에서 사라진 삼각형 꼭지
셀렉트 목록 위의 삼각형 꼭지가 라이트 모드에서 보이지 않았습니다. elevation을 높여도 경계가 드러나지 않아 두 빗변에만 윤곽선을 그리고 테마별 색을 토큰으로 관리했습니다.
-
안드로이드를 만들며 1 — 비워 둔 Typography 슬롯에 들어간 기본 글꼴
Material3의 Typography 슬롯 열다섯 중 넷을 정의하지 않았더니 화면 일부에 기본 글꼴이 적용됐습니다. 모든 슬롯을 Pretendard로 채우고, 슬롯 수와 디자인의 글자 크기 단계를 구분했습니다.
-
첫 앱 출시기 2 — HTML 목업에서 앱으로 넘어간 시점
HTML 목업과 안드로이드 앱을 함께 고치다가, 실제 기기의 줄바꿈과 자판 동작은 목업으로 확인할 수 없다는 한계를 만났습니다. 8월 22일에 동기화를 끝낸 이유입니다.