설명이 필요 없는 화면을 만듭니다

무엇을 그리나

브랜드 아이덴티티. 이름의 표기 변형, 로고, 색, 글꼴, 말투를 한 문서로 정합니다.
디자인 시스템. 색과 굵기, 간격, 모서리, 그림자를 토큰으로 두고 웹과 앱이 같은 값을 씁니다.
제품 화면과 흐름. 첫 화면에서 결제나 문의까지 가는 길을 화면 수가 아니라 결정 수로 셉니다.
인터랙션과 모션. 상태 변화는 움직임으로 말하고, 움직임을 줄인 설정을 켠 사용자에게는 멈춥니다.
랜딩 페이지. 검색어가 제목과 h1에 실리도록 카피와 구조를 마케팅과 같이 짭니다.

디자인 원칙

색면이 장을 가른다. 흰색, 연파랑, 파랑, 먹색 네 색면을 하드컷으로 바꿔 장을 구분합니다. 제목 위에 작은 라벨을 얹거나 카드에 외곽선을 긋지 않습니다. 밝기 차와 그림자가 경계를 만듭니다.

굵기는 셋뿐이다. 700, 800, 900 세 굵기만 씁니다. 사이값을 허용하면 화면마다 다른 굵기가 섞이고, 한 사람이 만든 것처럼 보이지 않습니다. 이 사이트 자체가 그 규칙으로 만들어졌습니다.

설명 문장을 붙이지 않는다. 제목과 숫자, 컨트롤이 화면이 뭔지 말합니다. 안내 문장은 빈 상태, 입력 힌트, 숫자의 근거 세 자리에만 남깁니다.

구분자는 태그로. 정보를 한 줄에 나열할 때 가운뎃점으로 잇지 않고 칩으로 끊습니다. 줄이 접혀도 조각이 섞이지 않습니다.

개발과 같은 팀이라는 뜻

디자인 파일이 개발자에게 넘어가는 순간이 없습니다. 토큰은 CSS 변수와 앱 테마 파일로 바로 나가고, 화면은 실제 데이터로 먼저 그립니다. 트레이딧의 차트 색과 그로킷의 진단 카드가 같은 잉크 계단과 같은 파랑을 쓰는 이유입니다. 개발 페이지에 그 구조가 있습니다.

산출물

브랜드 가이드 문서(표기 규칙, 로고 파일, 색과 글꼴 토큰)
디자인 시스템 소스(Figma 라이브러리와 코드 토큰 파일)
핵심 화면 시안과 프로토타입
OG 이미지, 파비콘, 앱 아이콘 세트