DESIGN바이브코딩디자인mdMedia

Media · 디자인 분석

Watcha 스타일 디자인 분석

콘텐츠 추천 서비스의 화면은 포스터가 주인공입니다. UI는 포스터를 가리지 않는 선에서만 존재해야 합니다.

포스터 비율을 깨지 않습니다

2:3 비율은 포스터의 표준이고, 이걸 임의로 자르면 원본의 구도가 무너집니다. 그리드 열 수를 맞추려고 정사각형으로 자르는 경우가 많은데, 차라리 열 수를 조정하는 편이 낫습니다. 제목은 이미지 안에 겹치지 말고 아래에 두어야 포스터 디자인을 가리지 않습니다.

어두운 배경은 포스터를 위한 선택입니다

이 계열 서비스가 어두운 UI를 쓰는 이유는 분위기 때문만이 아닙니다. 밝은 배경에서는 포스터마다 다른 색이 서로 부딪히지만, 어두운 배경에서는 각 포스터가 독립적으로 보입니다. 순수 검정보다 약간 밝은 회색(#0B0B0E 정도)이 낫습니다. 완전 검정은 OLED 화면에서 경계가 튀어 보입니다.

평점은 숫자만 씁니다

별 아이콘 다섯 개는 포스터가 촘촘한 그리드에서 시각적 소음이 됩니다. 숫자 하나로 줄이면 같은 정보를 훨씬 작은 면적에 담을 수 있습니다. 별을 쓰고 싶다면 목록이 아니라 상세 화면에서 쓰는 편이 맞습니다.

추천 근거를 보이게 남깁니다

취향 기반 추천은 왜 이걸 보여 주는지 설명하지 않으면 무작위로 느껴집니다. 선택한 취향 키워드를 칩으로 남겨 두거나 "이 영화를 좋아해서" 같은 짧은 근거를 붙이면 같은 추천도 설득력이 달라집니다. 알고리즘을 바꾸지 않고 신뢰를 올릴 수 있는 방법입니다.

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

문서 작업이나 데이터 입력 화면에는 맞지 않습니다. 어두운 배경과 이미지 중심 구조가 긴 텍스트 읽기와 폼 입력에는 불리합니다.

컬러와 역할

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

Watcha Pink#FF0558Primary accent and rating highlight
Cinema Black#111114Dark canvas
Panel#1E1F25Media cards
Text#F8F8FAPrimary text on dark
Muted#9CA3AFMetadata

대표 컴포넌트

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

PosterGrid

포스터 비율(2:3)을 유지하는 3열 그리드. 제목을 이미지 안에 넣지 않고 아래에 두어 포스터 원본을 가리지 않는다.

TasteChip

취향 키워드를 담는 둥근 칩. 여러 개를 선택 상태로 남겨 추천 근거가 무엇인지 사용자가 되짚을 수 있게 한다.

RatingBadge

평점을 담는 작은 배지. 별 아이콘 대신 숫자만 써서 포스터가 촘촘한 그리드에서 시각적 소음을 만들지 않는다.

어떤 서비스에 맞나

Watcha-inspired systems emphasize recommendation, taste, and browsing. Use for streaming, content libraries, reviews, and personalized feeds.

실무에서는 콘텐츠 추천 · OTT · 리뷰 앱 유형에 적용했을 때 가장 자연스럽습니다.

Watcha DESIGN.md 복사하러 가기

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

More designs

다른 디자인 분석