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

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

검은 바탕 하나로 간다. 모든 장을 검은 바탕 하나로 깔고, 가는 가로선으로 장을 나눕니다. 색은 제목 끝말에 까는 파란 글자 띠 하나만 두고, 나머지는 흰 글자의 농담으로 말합니다. 색이 적을수록 제품 화면과 사진이 앞에 섭니다.

글자가 위계를 만든다. 문장은 Pretendard 가변 굵기로, 번호와 날짜, 분류 같은 기계 정보는 Geist Mono 고정폭으로 씁니다. 장식 점과 반투명 유리 카드는 쓰지 않습니다.

모든 장은 12칸 격자 위에. 제목과 본문, 곁정보가 같은 12칸 격자에서 시작해 페이지가 바뀌어도 시작선이 어긋나지 않습니다. 휴대폰에서는 같은 순서를 한 줄로 쌓습니다.

움직임은 읽는 순서를 따른다. 장이 화면에 들어오면 글줄이 차례로 올라오고, 이미지는 가려진 면이 걷히며 열립니다. 움직임을 줄인 설정을 켠 사용자에게는 전부 멈춘 채로 보입니다.

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

구분자는 쉼표와 가는 선으로. 정보를 한 줄에 나열할 때 칩으로 끊지 않고 쉼표로 이은 글줄로 씁니다. 묶음 사이는 가는 선으로만 나눕니다.

디자인 파일이 개발자에게 넘어가는 순간이 없습니다. 토큰은 CSS 변수와 앱 테마 파일로 바로 나가고, 화면은 실제 데이터로 먼저 그립니다. 이 사이트도 색과 간격을 변수 한 벌에 두고, 모든 장이 그 변수를 읽어 같은 부품을 다시 씁니다. 개발 페이지에 그 구조가 있습니다.

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