DESIGN바이브코딩디자인mdFood & Local

Food & Local · 디자인 분석

Baemin 스타일 디자인 분석

이 스타일은 유쾌함을 색이 아니라 손맛으로 만듭니다. 살짝 기울인 요소와 말투가 화면의 성격을 결정합니다.

기울기는 5도를 넘기지 않습니다

스티커나 라벨을 비스듬히 얹으면 손으로 붙인 느낌이 납니다. 다만 각도가 커질수록 조잡해집니다. 3~5도 정도가 의도적으로 보이면서도 정돈된 인상을 유지하는 범위입니다. 그리고 한 화면에서 기울인 요소는 두세 개로 제한해야 합니다. 전부 기울이면 그냥 정렬이 안 된 화면이 됩니다.

민트와 크림의 대비가 핵심입니다

브랜드 민트는 채도가 높아 넓은 면적에 쓰면 눈이 피로합니다. 배경은 따뜻한 크림색으로 깔고 민트는 버튼·강조 패널 같은 좁은 면적에만 쓰는 조합이 안정적입니다. 민트 위 글자는 흰색보다 짙은 청록이 대비가 잘 나옵니다. 음식 사진은 색이 강하기 때문에, 배경까지 강하면 사진이 죽습니다.

음식 사진이 UI보다 중요합니다

이 계열 서비스에서 전환을 만드는 것은 인터페이스가 아니라 음식 사진입니다. 그래서 UI 요소는 사진을 방해하지 않는 선에서 최소화됩니다. 카드 테두리를 없애고 그림자도 약하게 두어 사진이 직접 화면에 놓인 것처럼 보이게 합니다. 목록 썸네일은 작게 노출되므로 접시가 프레임의 80% 이상을 채워야 알아볼 수 있습니다.

문구가 위트를 담당합니다

시각 요소만으로는 이 스타일의 성격이 완성되지 않습니다. 빈 화면 문구, 오류 메시지, 버튼 라벨에 사람의 말투가 들어가야 합니다. 다만 모든 문구를 장난스럽게 만들면 정작 중요한 안내가 가볍게 읽힙니다. 결제·취소·환불처럼 돈이 걸린 문구는 평범하게 두는 편이 안전합니다.

이 스타일을 고르면 안 되는 경우

B2B 대시보드나 관리자 화면에는 맞지 않습니다. 기울기와 구어체가 업무 화면에서는 신뢰를 떨어뜨리고, 장시간 사용하면 피로합니다.

컬러와 역할

색상 코드를 나열하는 것보다 각 색이 어떤 자리에만 쓰이는지를 정해 두는 편이 결과물의 일관성에 훨씬 크게 작용합니다. 아래는 이 스타일에서 관찰되는 색의 담당입니다.

Baemin Mint#2AC1BCPrimary accent and brand panels
Dark Teal#123B3AHigh contrast text on mint
Cream#FFF8ECMenu backgrounds
Sticker White#FFFFFFFloating cards
Line#D7F0EESoft section dividers

대표 컴포넌트

이 스타일을 화면으로 옮길 때 가장 먼저 만들게 되는 세 가지입니다. 각 항목의 설명은 형태뿐 아니라 그렇게 만드는 이유까지 담았습니다.

MenuSticker

메뉴 사진 위에 비스듬히 얹는 스티커형 라벨. 손으로 붙인 듯한 각도를 살짝 주되 5도를 넘기지 않아야 조잡해 보이지 않는다.

CategoryBubble

둥근 말풍선 형태의 카테고리 버튼. 가로 스크롤 줄에 배치하고 선택된 것만 채움색으로 바꿔 현재 위치를 알린다.

ReviewTag

"재주문 많아요" 같은 짧은 문구 태그. 별점 숫자 대신 상황을 말로 풀어 주문 직전의 망설임을 줄인다.

어떤 서비스에 맞나

Baemin-like style works for food, local discovery, and playful consumer services. It combines mint surfaces with chunky typography and illustrated cards.

실무에서는 맛집 추천 · 배달/픽업 · 쿠폰 서비스 유형에 적용했을 때 가장 자연스럽습니다.

Baemin DESIGN.md 복사하러 가기

공개적으로 관찰 가능한 화면 패턴에 대한 독립적인 분석입니다. Baemin 및 해당 운영사와 제휴 관계가 없으며 승인을 받지 않았습니다. 상표권은 각 권리자에게 있습니다. 내부 디자인 가이드라인을 옮긴 것이 아니라 공개된 화면을 보고 정리한 해석입니다.

More designs

다른 디자인 분석