예쁜 결과물 하나보다
반복되는 규칙
컬러, 타이포그래피, radius와 여백 규칙까지 문서로 정의해두고 모든 작업에 같은 시스템을 씁니다. 결과물 하나는 운일 수 있지만, 서로 다른 매체에서 같은 규칙이 반복되면 그건 시스템입니다.
컬러
브랜드 색은 강조에만 씁니다. 실제로 면을 채우는 것은 이 파스텔들입니다. 카드 배경, 태그, 말풍선, 인용 박스가 전부 여기서 나옵니다. 채도가 낮아야 오래 봐도 피로하지 않기 때문입니다.
그림과 사진도 같은 규칙
일러스트레이션
부드럽고, 둥글고, 파스텔로. 클라우드 마스코트가 중심 캐릭터입니다. 몸은 둥글게, 팔다리는 작게, 표정은 단순하게, 손가락은 그리지 않습니다.
사진
자연광, 파스텔 톤, 약간의 그레인. HDR 금지, 과채도 금지, 인공적인 AI 느낌 금지. 선명하게 만드는 것보다 편안하게 보이는 것을 우선합니다.
타이포그래피
네 가지를 용도별로 나눠 씁니다. 한국어와 영어를 같은 폰트로 처리하지 않습니다.
커버, 위클리 픽, 랜딩, 포스터
섹션 제목, UI 헤딩, 캡션
본문, 버튼, 내비게이션, 폼, 카드
인용, 스토리, 긴 호흡의 글
한글 감성 서체는 이렇게 보입니다.
이 사이트의 모든 제목이 그렇습니다.
규칙
지향
따뜻함 · 편안함 · 미니멀 · 에디토리얼 · 차분함 · 부드러움 · 프리미엄
피하는 것
사이버 · 네온 · 날카로움 · 메탈릭 · 무거운 그림자 · 글래스모피즘 · 인공적인 AI 스타일
원칙
애플리케이션이 아니라 잡지처럼. 장식보다 여백. 모서리는 둥글게. 그라디언트는 아껴서.
버튼 16 · 카드 24 · 모달 28 · 이미지 20 · 칩은 완전한 알약
부드러운 그림자 하나만. 0 8px 24px rgba(0,0,0,.08)
8pt 그리드 — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
같은 시스템, 다른 결과물
아래는 매체도 목적도 전혀 다른 작업들입니다. 그런데 컬러 코드와 서체가 모두 같습니다.
명함
크림 배경, 고운바탕 이름, 코랄 강조. 하단 선은 스펙트럼 그라디언트(코랄 → 라벤더 → 스카이) 그대로입니다.
도고멍 브랜드 비주얼
반려견 관련 브랜드입니다. 어두운 배경이지만 순수한 검정이 아니라 Ink 계열이고, 뒤에 깔린 빛도 같은 스펙트럼 색입니다. 한 선으로 그린 일러스트는 시스템의 "둥글고 부드럽게" 원칙을 따릅니다.
Weekly Pick 뉴스레터
웹 페이지로 만든 콘텐츠입니다. 색상을 세어보면 Ink900이 가장 많고 그다음이 코랄, 스카이, 선옐로, 라벤더 순입니다. 시스템에 정의한 우선순위와 정확히 같습니다.
이 사이트
지금 보고 계신 페이지도 같은 시스템입니다. 크림 배경, Ink 계열 글자, 코랄 강조, 카드 24px 라운드, 부드러운 그림자 하나. 별도로 디자인하지 않고 문서에 적힌 값을 그대로 가져다 썼습니다.
AI도 따르는 규격으로
시스템 문서 마지막에 AI 규칙을 따로 두었습니다. 사람만 읽는 문서가 아니라, AI로 화면을 만들 때도 그대로 지켜야 하는 규격으로 만든 것입니다.
새로운 색을 만들지 말 것 · 기본 프레임워크 색을 쓰지 말 것 · 브랜드 그라디언트를 우선할 것 · 한글은 Pretendard로 · 히어로 제목은 FF Zwo Pro로 · 브랜드의 시각적 일관성을 절대 깨지 말 것
이렇게 적어두면 누가 만들어도 결과가 흔들리지 않습니다. 디자인 감각을 매번 발휘하는 대신, 한 번 정하고 반복하는 쪽을 택했습니다.