안녕하세요, 1인 앱 개발자 부기입니다🐢

앱을 처음 만들 때 화면마다 색상·글꼴·여백·버튼 모양을 따로 정하면 전체가 제각각으로 보일 수 있어요!

UI 화면을 만들 때 지켜야하는 기준들을 미리 정해두는 것이 앱 디자인 시스템입니다

오늘은 앱 화면을 일관되게 만드는 네 가지 기준을 살펴볼게요

컬러 · 타이포그래피 · 레이아웃 · 공통 컴포넌트

DESIGN.md는 디자인 기준들을 적어 AI에게 제공하는 문서에요!

1. 컬러

색상마다 역할을 정해두면 같은 용도에 같은 색을 쓸 수 있어요

앱 코드에서 역할별 색 이름을 실제 색상값에 연결한 예시예요.

White와 Gray1~10 은 다양한 상황에서 활용할 수 있는 기본 값 색상들이에요!!

• 브랜드 메인 색상: 주요 버튼, 선택 상태, 강조 아이콘
• 배경 색: 화면 전체의 기본 배경
• 표면 색: 카드와 입력 칸처럼 내용이 놓이는 영역
• 글자 색: 주요 내용과 보조 설명
• 테두리 색: 구분선과 입력 칸의 테두리

위 사항들도 미리 DESIGN.md 안에 정해두면 좋아요-!