DESIGN바이브코딩디자인mdTravel

Travel · 디자인 분석

Yanolja 스타일 디자인 분석

예약 서비스의 화면은 설렘과 정확성을 동시에 요구합니다. 이 스타일은 상단에서 감정을, 하단에서 숫자를 담당하게 나눕니다.

그라디언트는 상단에만 둡니다

보라에서 분홍으로 넘어가는 배경은 여행의 기분을 만들지만, 화면 전체에 깔면 가격과 날짜가 읽히지 않습니다. 상단 프로모션 영역에만 쓰고 그 아래 실제 예약 정보는 흰 배경으로 내려 두는 구성이 안정적입니다. 그라디언트 위에 흰 글자를 얹을 때는 중간의 밝은 구간을 피해야 문구가 묻히지 않습니다.

날짜와 인원은 항상 같이 보여야 합니다

예약 화면에서 가장 흔한 실수는 날짜를 바꾼 뒤 인원 설정이 초기화되는 것입니다. 두 값을 한 카드에 묶어 항상 함께 노출하고, 변경 가능한 항목에는 밑줄이나 아이콘으로 눌러서 바꿀 수 있다는 신호를 줍니다. 요약 카드를 스크롤해도 따라오게 고정하면 가격 비교 중에 조건을 잊는 일이 줄어듭니다.

쿠폰은 모양으로 구분합니다

할인 수단이 여러 개면 사용자는 무엇이 적용됐는지 헷갈립니다. 쿠폰은 양옆에 반원 홈을 낸 실물 쿠폰 형태로, 적립금은 일반 태그로 두는 식으로 형태를 나누면 색만 다른 경우보다 훨씬 빨리 구분됩니다. 형태로 구분하면 색약 사용자에게도 정보가 전달됩니다.

최종 금액은 한 번 더 확인시킵니다

숙박·레저 예약은 세금, 수수료, 인원 추가 요금이 붙어 처음 본 가격과 결제 금액이 달라지기 쉽습니다. 결제 직전 화면에서 항목별 금액과 합계를 다시 펼쳐 보여 주는 단계를 넣어야 분쟁이 줄어듭니다. 이건 디자인 선택이 아니라 사실상 필수 단계에 가깝습니다.

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

업무용 도구나 금융 화면에는 맞지 않습니다. 화려한 그라디언트가 신뢰보다 마케팅 인상을 강하게 만듭니다.

컬러와 역할

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

Yanolja Pink#FF3478Promotional CTA
Deep Purple#5B2CFFGradient partner and highlights
Sky#EAF3FFTravel surface background
Ink#1F2937Primary text
Line#E5E7EBCard borders

대표 컴포넌트

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

PromoGradient

보라에서 분홍으로 넘어가는 프로모션 배경. 할인 문구를 흰 글자로 얹되 그라디언트 중간 밝은 구간은 피해야 글자가 묻히지 않는다.

BookingCard

날짜·인원·가격을 한 카드에 묶은 예약 요약. 변경 가능한 항목만 밑줄로 표시해 무엇을 누를 수 있는지 구분한다.

CouponPill

양쪽에 반원 홈을 낸 쿠폰 모양 태그. 실물 쿠폰의 형태를 빌려 적립금·할인과 시각적으로 구분한다.

어떤 서비스에 맞나

Yanolja-like systems are bright, promotional, and mobile-first. Best for lodging, events, leisure booking, and local experiences.

실무에서는 숙박 예약 · 여행 프로모션 · 레저 티켓 유형에 적용했을 때 가장 자연스럽습니다.

Yanolja DESIGN.md 복사하러 가기

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

More designs

다른 디자인 분석