1. 배경 (Context)

광고형 플랫폼은 클릭을 유도하기 위해 시각적 자극을 강화한다.

과도한 색상 대비
강한 배지(HOT, BEST, 인기)
애니메이션
카운트다운 강조
가격/할인율 과대 노출

이 구조는 다음 결과를 낳는다.

소비 유도 중심 UX
랭킹/노출 경쟁 강화
가맹점 압박 증가
할인 플랫폼화

본 플랫폼은 판단을 빠르게 돕는 구조이며,
시각적 자극을 최소화해야 한다.

2. 결정 (Decision)

시각적 강조는 “정보 전달 목적”일 때만 허용한다.
감정 자극 목적의 강조는 금지한다.

3. 허용되는 강조 조건 (Allowed Emphasis)

강조는 다음 3가지 경우에만 허용된다.

3.1 수량 임박

조건:

remainingQuantity <= 3

표현:

중간 강도의 강조 색상
배지 1개 허용(“수량 임박” 텍스트형)
애니메이션 금지

3.2 시간 임박

조건:

(expiresAt - serverNow) <= 30분

표현:

시간 텍스트 색상 변경 허용
카운트다운 표시 허용
깜빡임 금지
진동/푸시 강제 금지

3.3 즉시 사용 가능

조건:

slot.startAt <= serverNow < expiresAt

표현:

“지금 사용 가능” 텍스트
강조 색상 1단계 허용
아이콘 1개 허용

4. 금지 규칙 (Strict Prohibitions)

다음은 어떤 화면에서도 금지한다.

배너 광고 영역
캐러셀 프로모션
“추천”, “인기”, “BEST” 배지 기본 제공
과도한 대비(빨강+노랑 경고 조합 등)
깜빡임 애니메이션
슬롯 카드마다 다른 배지 다중 표시
할인율(%)을 가장 큰 텍스트로 표시
매장 중심 프로모션 박스

5. 색상 사용 규칙 (Color Governance)

5.1 색상 수 제한

기본 색상 팔레트: 1 primary + 1 neutral + 1 emphasis
강조 색상은 동시에 2개 이상 사용 금지

5.2 대비 규칙

WCAG 가독성 기준 준수
강조는 대비를 1단계만 증가
경고 수준 색상은 오류/차단 상황에서만 사용

6. 애니메이션 규칙

허용:

화면 전환 기본 애니메이션
타이머 숫자 변화

금지:

깜빡임
펄스 애니메이션
배지 튀는 효과
자동 스크롤

7. 배지 사용 제한

슬롯 카드당 최대 1개 강조 배지
강조 조건 충족 시에만 표시
기본 상태에서 배지 없음

8. 푸시 알림 제한 (UX 연계)

푸시는 다음 조건에서만 허용한다.

반경 내
당일 슬롯
수량 임박 또는 시간 임박

광고성 푸시 금지.

9. UI 리뷰 체크리스트

릴리즈 전 확인 항목:

강조 색상이 2개 이상 동시에 쓰였는가?
기본 슬롯 카드에 배지가 기본값으로 붙어있는가?
할인율이 시간보다 크게 보이는가?
애니메이션이 정보 전달 이상의 역할을 하는가?

하나라도 “예”이면 수정한다.

10. 구조적 목적

이 규칙의 목적은 다음을 방지하기 위함이다.

광고 플랫폼화
할인 경쟁화
랭킹/노출 경쟁
체류 시간 증가 유도

11. 재검토 조건

접근성 이슈가 발생한 경우
고령층/특정 사용자군에서 가독성 문제가 확인된 경우
플랫폼 철학 변경(ADR-P 변경)

Buy me a coffee

ADR-U-005-1 ADR-U-007

ADR-U-005-2