배민의 글자를 DESIGN.md에 옮길 때 구분해야 할 세 가지
브랜드 서체, 행사 웹의 본문 서체, 앱 리브랜딩을 나누어 읽고 프로젝트의 디자인 판단으로 옮기는 방법을 살펴봅니다.
배민을 참고해 화면을 만들 때 민트색과 개성 있는 제목 글꼴부터 고르기 쉽습니다. AI 코딩 도구에 전달할 디자인 문서에는 한 단계가 더 필요합니다. 그 글꼴이 어디에 쓰였는지, 어떤 문제를 해결했는지, 지금 만드는 제품에도 같은 역할이 필요한지 적어야 합니다.
배민의 공개 자료를 나란히 읽으면 이 구분이 선명해집니다. 브랜드 서체의 역사, 한·영 본문을 다룬 기술 글, 앱의 리브랜딩 발표가 각각 다른 질문에 답합니다. 이 글에서는 세 자료를 DESIGN.md에 옮기는 방법과 작은 식사 모임 화면에 적용할 판단을 정리합니다.
도표: 2025-07-22 공지라는 출처 사실 → 제목과 정보의 역할이라는 해석 → 일요일 한 끼 화면에서 내린 프로젝트 선택. 도표 속 문구는 영어입니다.
기억에 남는 글자
배민의 공식 서체 카탈로그에는 간판에서 이어진 글자의 개성과 용도에 관한 설명이 함께 있습니다. 한나 Air는 제목용 한나체를 본문에 쓰는 상황에 대응한 서체로 소개됩니다. 같은 브랜드 안에서도 제목과 긴 글의 역할을 따로 고민한 사례입니다. 우아한형제들 서체 카탈로그
꾸불림의 2024년 공개 자료도 느슨하고 불규칙한 곡선과 오래된 간판에서 이어지는 배경을 설명합니다. 글자의 개성을 이해하려면 표본의 모양과 그 모양이 만들어진 맥락을 함께 읽는 편이 유용합니다. 꾸불림 공개 자료
이런 기록에서 프로젝트로 가져올 수 있는 것은 표현의 역할입니다. 사람을 초대하는 제목에는 개성을 줄 여지가 있습니다. 날짜, 가격, 신청 마감처럼 빠르게 찾아야 하는 정보에는 비교와 읽기가 먼저입니다. 제목의 표정을 모든 문장에 반복하면 정보의 위계가 약해질 수 있습니다. 이는 공개 자료를 바탕으로 한 OmD의 적용 제안이며, 배민의 공식 UI 규칙을 인용한 것은 아닙니다.
읽는 환경까지 보기
2024년 11월 우아한 기술블로그는 Inter와 조정한 Noto Sans 한글을 조합한 Interop을 소개했습니다. 해당 글이 설명하는 적용 대상은 WOOWACON 2023·2024 웹사이트입니다. 한글과 영문을 함께 읽을 때 글자의 크기와 인상을 맞추려는 판단을 살펴볼 수 있습니다. Interop 개발 글
여기서 문서에 남길 사실은 행사 웹의 서체 선택입니다. 이 사실을 곧바로 배민 앱의 본문 글꼴 항목에 넣으면 출처의 범위가 바뀝니다. 같은 회사가 만든 화면이어도 사용하는 사람과 읽는 정보가 다르기 때문입니다.
프로젝트에서는 한글 제목과 영어 서비스명, 숫자와 단위가 실제로 만나는 문장을 먼저 준비하는 편이 좋습니다. 예를 들어 일요일 12:30 · 2인분 · 8,000원을 화면에 놓고 줄바꿈과 숫자 정렬을 확인합니다. 예쁜 알파벳 한 줄만 확인해서는 이런 문제를 발견하기 어렵습니다.
바뀐 이름도 남기기
2025년 7월 22일 배민은 리브랜딩을 발표하며 더 밝은 민트색과 WORK체를 앱에 적용했다고 밝혔습니다. 발표에서는 WORK가 한글 빗침획을 블록 형태로 단순화했다고 설명하고, UI/UX를 여러 단계에 걸쳐 바꿀 계획이라고 알렸습니다. 이 발표는 날짜가 있는 제품 적용 근거입니다. 배민 2.0 발표
DESIGN.md에는 WORK라는 이름과 발표 시점의 앱 적용 설명을 남길 수 있습니다. 다만 이 자료만으로 지금 앱의 모든 텍스트가 WORK라고 쓰거나, 새 민트의 정확한 색상값을 정할 수는 없습니다. 공개 폰트 목록의 이용 조건 역시 그 목록에 해당하는 파일을 대상으로 확인해야 합니다. 이 글에서는 WORK 파일을 배포하거나 다른 글꼴로 WORK의 시각 표본을 만들지 않습니다. 공식 서체 이용 조건
이 구분은 레퍼런스를 빈 문서로 만드는 이유가 아닙니다. 로딩할 폰트가 없어도 이름, 특징, 사용 발표와 날짜는 유용한 정보입니다. 빠진 것은 재현 가능한 시각 표본이나 특정 토큰 값입니다. 확인한 설명까지 지울 필요는 없습니다.
DESIGN.md에 담기
자료를 정리할 때는 다음 세 층을 먼저 작성합니다. 아래 표는 설명을 위한 기록 예시이며 Core의 기계 판독 스키마는 아닙니다.
| 기록 | 내용 | 다음 판단 |
|---|---|---|
| 출처 사실 | 2025-07-22 공지에 WORK의 앱 적용이 적혀 있음 | 이름과 날짜가 있는 제품 서사로 보존 |
| 참고할 원리 | 제목의 개성과 정보 읽기의 역할을 나누어 봄 | 내 화면의 제목·시간·가격을 따로 검토 |
| 프로젝트 선택 | 모임 제목과 신청 정보의 시각적 위계를 분리함 | 실제 화면을 보고 채택, 프로젝트 결정으로 기록 |
AI에게 전달할 때도 자료와 명령을 분리하면 검토하기 쉽습니다.
배민 공개 자료에서 제목의 개성과 본문 가독성의 역할을 참고한다.
우리 제품은 동네 식사 모임의 일정과 참여 방법을 보여준다.
모임 제목, 날짜·장소, 신청 상태의 위계를 설계한다.
기업의 미확인 앱 토큰을 추정하지 말고 프로젝트 선택을 제안한다.
선택한 서체와 색상은 프로젝트 디자인 문서에 기록하고 화면으로 검토한다.
이 프롬프트의 결과가 배민의 공식 화면과 같아야 할 이유는 없습니다. 대신 독자가 모임을 이해하고 참여 조건을 찾는 과정을 확인할 수 있어야 합니다. 원본의 인상을 빌리면서도 새 제품의 목적에 맞게 판단하는 지점입니다.
작은 화면에 적용하기
창작 예제로 일요일 한 끼라는 동네 식사 모임을 가정합니다. 첫 화면의 제목은 초대하는 문장으로 쓰고, 날짜·장소·참여 상태는 별도 정보 묶음으로 둡니다. 신청 버튼은 구체적인 행동을 설명합니다. 마감 후에는 같은 자리에서 신청할 수 없다는 상태를 보여줍니다.
이 예제의 완료 조건은 민트색 사용 여부가 아닙니다. 처음 방문한 사람이 언제 어디서 만나는지 찾고, 신청 가능 여부를 확인하고, 버튼을 누른 뒤 무엇이 달라졌는지 이해해야 합니다. 작은 화면과 긴 모임명에서도 이 순서가 유지되는지 확인합니다.
기업의 자료를 수집할 때도 같은 방식으로 읽어보면 좋겠습니다. 익숙한 색과 글자에서 시작하되, 그 표현의 역할과 적용 대상을 함께 기록합니다. 빌더에서 참고할 기업을 고른 뒤에는 가져온 사실과 새 프로젝트에서 정할 결정을 구분해 디자인 문서를 검토하면 됩니다.
한글 타이포그래피를 다루는 OmD 스킬도 준비하고 있습니다.