CU (씨유)

보라·초록 1+1·2+1 알약 배지와, 흰 진열면 위 삼각김밥·도시락·음료 누끼 격자

한국이커머스식품복합humanismmodern-minimal고딕compactroundsubtle라이트한글 지원출시 2017개정 2026

Brand DNA

브랜드 DNA

브랜드명: CU. 운영사는 BGF리테일이며, 디지털 접점은 CU 공식 웹과 포켓CU 앱이다.
한 줄 정체성: 가까운 점포의 상품과 이달의 혜택을 빠르게 찾아, 작은 일상 소비로 연결하는 편의점 서비스.
공식 디자인 철학: 공식 브랜드스토리의 “Nice to CU”는 만남의 인사를 브랜드 이름에 연결한다. 편의점을 일상에서 잠깐 머물고 필요한 것을 찾는 친근한 장소로 설명한다.
시그니처 요소 1개: 흰 상품 진열면 위에 떠 있는 보라·초록 1+1·2+1 알약 배지. 상품의 서로 다른 포장 모양과 혜택 숫자를 함께 읽게 하는 구조다.

CU의 화면은 회사 소개보다 상품을 고르는 동작에서 성격이 잘 드러난다. 삼각김밥의 삼각형, 도시락의 낮고 넓은 사각형, 음료의 긴 원통이 같은 흰 면에 놓인다. 촬영 배경이 없는 상품 사진은 서로의 크기와 색을 비교하기 쉽게 한다. 이 위에 행사 조건을 짧은 숫자로 붙이면, 사용자는 긴 설명을 읽기 전에 오늘 살 것을 좁힐 수 있다. 목록 전체에 보라 배경을 깔기보다 상품마다 작은 보라·초록 표식을 반복하는 것이 이 장면에 맞는다.

매장 정보는 쇼핑몰의 배송 주소와 다른 의미를 가진다. 같은 상품도 주변 점포의 재고에 따라 방문할 곳이 달라진다. 포켓CU의 재고조회 화면은 점포명 검색과 가까운 점포 목록을 연결한다. 카드 머리띠에 점포 선택을 둔 이유도 이 맥락 때문이다. 다만 점포를 선택했다는 표시와 재고를 확인했다는 표시는 같지 않다. 실제 서비스로 구현할 때에는 확인 시각과 재고 상태를 별도 정보로 다루는 편이 적절하다. 여기서는 점포 선택의 시각적 위치만 보여 준다.

공식 웹은 정보를 넓게 펼치는 역할을 맡는다. 큰 안내 제목 다음에 상품·서비스 카테고리를 놓고, 행사 목록의 왼쪽에서 전체·1+1·2+1을 고른다. 앱에서는 검색, 행사 배너, 가까운 점포, 결제와 적립에 대한 접근이 더 짧다. 두 접점은 같은 색을 쓰지만 같은 레이아웃은 아니다. 카드와 넓은 예시를 서로 다른 장면으로 만든 이유는 이 차이를 보존하기 위해서다. 앱의 하단 탭을 데스크톱 푸터에 옮기거나, 웹의 긴 1차 메뉴를 작은 카드에 모두 넣지 않는다.

공개 자료의 범위도 분명히 나눈다. CU 브랜드스토리에는 대표색의 Screen RGB와 BI 다운로드가 있고, 공식 CSS에서는 현재 웹의 글꼴·카드·배지를 확인할 수 있다. 반면 제품 전체의 공통 토큰과 상태 규칙을 담은 공개 UI 디자인 시스템은 이번 조사에서 확인하지 못했다. 따라서 source_type은 hybrid, is_official은 false, 신뢰도는 medium이다. 공식 색을 확보했다는 사실을 모든 컴포넌트 규칙까지 공식이라는 뜻으로 확장하지 않는다.

앞머리의 2017년은 내려받은 BI 가이드와 로고 자료의 연도를 참고한 기준점 (추정) 이다. UI 디자인 시스템의 최초 공개 연도로 확인된 값은 아니다. 2026년 역시 확인한 웹과 앱의 관찰 시점에 맞춘 개정 기준 (추정) 이다. 상품 예시의 행사 기간은 화면을 완성하기 위한 10월 샘플이다. 실제 판매 조건이나 행사 SKU를 옮긴 데이터가 아니므로, 문서에서 상품 구성과 서비스의 시각 규칙을 구분해 읽어야 한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근한 · 발랄한 · 실속있는
무드 설명: 흰 면에 또렷한 상품을 놓고, 둥근 행사 배지와 짧은 한국어 문구로 혜택을 전한다. 밝은 연두와 보라는 시선을 모으는 지점에 쓰고, 이름과 가격은 검정에 가깝게 유지한다. 친근함은 정보의 정확한 순서와 반복되는 모양에서 나온다.
비주얼 스타일: 휴머니즘 + 모던 미니멀. 일상의 먹거리와 둥근 형태를 쓰되, 상품을 둘러싼 장식은 절제한다.
밀도(Density): Compact. 작은 화면에서도 점포·검색·행사·가격을 연속해서 읽을 수 있어야 한다.
모서리 성향: Round. 상품 카드의 실제 내부 반경 16px를 기본으로 삼고, 필터와 배지에만 Pill을 사용한다.
평면성: Subtle. 카드 면은 거의 평평하고, 입체감은 상품 포장·빛·접지 그림자가 만든다.

이 문서에서 친근하다는 말은 모든 글자를 둥글게 만들거나 이모지를 붙인다는 뜻이 아니다. 제목은 짧게, 상품명은 구체적으로, 보조 안내는 부담 없이 읽히게 쓴다. “재고조회”, “전체”, “행사상품”처럼 행동을 예상할 수 있는 이름이 우선이다. 상품을 고르는 중에는 감탄사보다 1+1의 조건과 가격이 유용하다. 배너에서는 활기 있는 문장을 써도, 가격이나 품절 안내에서는 간단하고 중립적인 문장을 유지한다.

발랄함은 보라와 연두의 차이, 상품 포장의 다양한 색, 알약 형태의 작은 반복에서 생긴다. 보라를 많이 칠해야 CU처럼 보이는 것은 아니다. 실제 행사 웹은 화면 대부분이 흰색이고, 어두운 카테고리 바가 구조를 잡는다. 초록 선택 면과 작은 보라 배지가 그 위에서 선명하게 보인다. 브랜드 PDF의 매체 색 비율을 상품 화면의 픽셀 비율로 그대로 옮기지 않는 이유다. 광고물의 색 배분과 목록의 읽기 순서는 서로 다른 설계 대상이다.

실속있는 분위기는 혜택 정보를 같은 위치에 두는 데서 생긴다. 첫 카드에서는 왼쪽 위, 다음 카드에서는 오른쪽 아래로 옮기는 식으로 배지 위치를 흔들지 않는다. 이름 아래에 가격을 놓고, 용량은 가격보다 작게 둔다. 상품마다 설명을 길게 덧붙이면 4열 목록의 리듬이 깨진다. 구성이나 맛을 구별하는 데 필요한 단어만 이름에 남기고, 세부 안내는 상세 화면에서 이어가는 방식이 어울린다.

그림의 재질 차이는 분위기를 풍부하게 하지만 UI 면의 재질까지 늘리지는 않는다. 삼각김밥은 김의 거친 표면과 투명 필름, 도시락은 검은 용기와 반사되는 뚜껑, 음료는 원통과 물방울로 구별한다. 그 배경 카드에는 유리 효과나 여러 겹의 그림자를 추가하지 않는다. 제품이 입체적이고 카드가 단순해야 작은 화면에서도 무엇을 파는지 분명하다. 서로 다른 포장 형태가 실제 편의점 진열처럼 한 화면을 채우는 것이 우선이다.

문구의 시점도 구분한다. “이달의 행사”는 기간이 있는 콘텐츠이고, “재고조회”는 반복해서 쓰는 기능이다. 기간이 끝난 배너와 기능 메뉴를 같은 강조 수준으로 고정하지 않는다. 예시에서는 10월 날짜를 작은 보조 문구로 배치하고, 1+1·2+1을 더 크게 남겼다. 연속되는 가격에 할인율을 억지로 붙이지 않았다. 증정 행사는 상품 한 개의 정가와 증정 조건이 핵심이며, 실제 할인율 계산이 필요한 상황에서만 추가 수치를 제시하는 편이 명확하다.

Color System

컬러 시스템 (CSS 변수)

대표색은 공식 Screen RGB를 HEX로 변환했다. CU Purple은 RGB 105, 59, 151 → #693B97, CU Green은 RGB 165, 207, 76 → #A5CF4C다. 공식 브랜드스토리와 BI 가이드에서 확인되는 Pantone 이름은 각각 2090C와 367C다. 화면용 값과 인쇄용 견본은 구분한다. 내려받은 PDF를 이미지로 보고 비슷한 색을 찍어 대표색으로 쓰지 않았으며, 이번 문서의 대표 HEX는 공식 페이지에 명시된 숫자를 기준으로 삼았다.

행사 웹의 UI에는 별도 색이 있다. new_layout.css에서 1+1 배지는 #37D243, 2+1 배지는 #8059EA, 카테고리 바는 #313842로 확인된다. 이 값은 CI의 연두·보라와 같지 않다. 따라서 CI 토큰을 바꿔 행사 화면을 맞추지 않고, 행사 전용 토큰을 따로 둔다. 화면에서 더 밝은 초록이 보인다는 이유로 CU Green의 공식 RGB를 덮어쓰면 로고와 UI의 출처가 섞인다.

로고는 공식 사이트에서 직접 사용할 SVG를 찾지 못해 Wikimedia의 CU BI (2017) SVG 경로를 사용했다. 내려받은 파일의 원래 채움색은 #652D8D, #AACE37이다. 이 문서의 인라인 로고는 그 경로와 채움색을 유지한다. 대표색 토큰은 공식 Screen RGB로 두고, 로고 파일 안의 색은 별개 자료의 값으로 기록한다. 차이를 감추려고 자동 치환하거나 눈대중으로 중간색을 만들지 않는다.

아래 확장 팔레트의 Primary 500, Secondary 500, 행사 전용 색, 실제 웹에서 확인한 일부 중립색을 제외한 단계는 재구성용 (추정) 이다. 밝은 보라는 선택된 필터의 옅은 면, 짙은 보라는 글자와 포커스에 쓰기 위한 제안이다. 공개된 CU 공식 10단계 팔레트가 있다는 뜻은 아니다. 성공·경고·오류의 배경과 글자 조합도 같은 범주다. 오류를 브랜드 보라로 통일하면 행사 강조와 문제 안내를 구별하기 어려우므로 의미 색을 별도로 정의했다.

:root {
  --color-primary-50:#F8F4FB; /* 이하 확장 단계는 추정 */
  --color-primary-100:#F0E7F8;
  --color-primary-200:#E0CEED;
  --color-primary-300:#C9ABE0;
  --color-primary-400:#A67FC4;
  --color-primary-500:#693B97; /* 공식 CU Purple Screen RGB */
  --color-primary-600:#5E3288;
  --color-primary-700:#4C276E;
  --color-primary-800:#392052;
  --color-primary-900:#29183B;
  --color-secondary-500:#A5CF4C; /* 공식 CU Green Screen RGB */
  --color-event-green:#37D243; /* 공식 웹 1+1 및 선택 카테고리 */
  --color-event-purple:#8059EA; /* 공식 웹 2+1 */
  --color-navigation:#313842; /* 공식 웹 가로 카테고리 */
  --color-neutral-0:#FFFFFF;
  --color-neutral-50:#F8F8F8; /* 추정 */
  --color-neutral-100:#F0F0F0; /* 공식 웹 푸터 */
  --color-neutral-200:#E9E9E9; /* 추정 */
  --color-neutral-300:#DDDDDD; /* 공식 웹 상품 테두리 */
  --color-neutral-500:#787878; /* 공식 웹 푸터 설명 */
  --color-neutral-700:#555555; /* 공식 웹 유틸리티 */
  --color-neutral-900:#222222; /* 공식 웹 가격 */
  --color-neutral-1000:#000000;
  --color-success-bg:#EFF7E2; /* 의미 토큰은 추정 */
  --color-success-fg:#315D21;
  --color-warning-bg:#FFF4D9;
  --color-warning-fg:#775218;
  --color-error-bg:#FFF0EF;
  --color-error-fg:#AE332C;
  --color-info-bg:#F1ECFC;
  --color-info-fg:#5A377C;
  --bg-base:#FFFFFF;
  --bg-subtle:#F7F5FA; /* 추정: 연결 콘텐츠 */
  --bg-elevated:#FFFFFF;
  --bg-overlay:rgba(29,20,36,.42); /* 추정: 모달 뒤 */
  --text-primary:#222222;
  --text-secondary:#555555;
  --text-tertiary:#69636F; /* 추정: 읽을 수 있는 보조 글자 */
  --text-on-primary:#FFFFFF;
  --text-disabled:#99939D; /* 추정 */
  --border-default:#DDDDDD;
  --border-subtle:#EEEBF0; /* 추정 */
  --border-strong:#817788; /* 추정 */
  --border-focus:#693B97;
}

공식 웹의 .prod_list .prod_item .badge > span은 흰 글자, 14px·600 굵기, 반경 30px를 사용한다. 1+1 바탕은 #37D243, .plus2 바탕은 #8059EA다. 이번 예시도 이 색 관계를 유지한다. 초록 위 작은 흰 글자의 대비 보완이 필요한 기능 화면에서는 더 짙은 초록이나 짙은 글자를 대안으로 검토할 수 있지만, 이를 공식 색상값으로 기록하지 않는다. 행사 조건은 항상 “1+1”과 “2+1” 문자로 함께 표시한다.

라이트 화면의 기본면은 흰색이다. 상품 사진 뒤에 색이 필요하면 낮은 채도의 따뜻한 회색이나 옅은 연두를 행사 배너에만 한정한다. 사진 없는 목록의 빈 공간을 채우려고 모든 카드 바탕색을 바꾸면 포장 색을 비교하기 어렵다. 구획을 나누는 목적에는 진한 그림자보다 얇은 선과 적당한 간격이 더 적절하다. 품절 상태에서도 상품의 원래 색을 완전히 지우기보다 짧은 상태 문구와 약한 비활성 표현을 함께 쓰는 편이 이해하기 쉽다.

테마는 [light]로 한정한다. 공식 앱스토어의 여섯 화면, CU 웹, 공개 BI 자료에서 실제 라이트·다크 전환이나 공식 다크 토큰을 확인하지 못했다. PDF에 있는 어두운 바탕용 로고는 로고의 배경 적용 예시다. 이를 제품 테마의 근거로 사용하지 않는다. 향후 포켓CU의 테마 설정 화면이 확인되면 제품 배경·글자·경계선의 실제 값을 새로 관찰한 뒤 다크 판을 추가할 수 있다.

Typography

타이포그래피

폰트 페어링: 웹 한글과 본문은 공식 CSS 이름 Noto Sans이며 파일명은 NotoSansKR 계열이다. 문서의 정형 필드에는 Noto Sans KR로 기록했다. 가격의 영문 숫자는 공식 CSS에서 Roboto를 확인했다.
앱 서체: 앱스토어 이미지의 모양만으로 전용 글꼴 가족을 확정할 수 없다. 앱 카드의 글꼴 조합은 Noto Sans → Noto Sans KR → Malgun Gothic → sans-serif (추정) 이다.
렌더 방식: 외부 폰트 파일을 불러오지 않는다. 시스템 대체 글꼴이 실제 렌더 결과를 결정할 수 있으므로 줄바꿈과 숫자 폭을 작은 카드에서 다시 확인한다.

| 위계 | 크기 / 굵기 / 행높이 / 자간 | 적용 근거와 역할 | |---|---|---| | Display | 44px / 700 / 1.3636 / -1.76px | 공식 웹 소개 제목 CSS | | H1 | 21px / 800 / 1.15 / -1.0px | 900px 예시의 중앙 제목 (추정) | | H2 | 22px / 700 / 1.4 / -0.8px | 행사 구획 제목 (추정) | | H3 | 18px / 500 / 1.4 / -0.72px | 목록 소제목 (추정) | | Body Large | 18px / 400 / 1.11 / -0.72px | 공식 웹 상품명, 최대 두 줄 | | Body | 16px / 400 / 1.5 / -0.4px | 안내문 (추정) | | Body Small | 14px / 400 / 1.6 / -0.56px | 공식 유틸리티를 참고한 안내 (추정) | | Caption | 12px / 400 / 1.5 / -0.2px | 용량·기간·보조 조건 (추정) | | Price | 24px / 700 / 29px / -0.48px | 공식 웹 Roboto 가격 숫자 |

위 표는 실제 웹에서 확인한 크기와 재구성용 제안을 섞지 않도록 마지막 열에 구분했다. 900px 예시는 원본 1280px보다 좁고, 한 화면에서 목록의 성격까지 보여 주어야 하므로 제목과 상품 글자를 줄였다. 이 압축 값은 서비스 전체에서 사용할 접근성 기준이 아니다. 실제 앱을 개발할 때 작은 카드의 7px 글자를 본문 기본 크기로 가져오면 안 된다. 카드의 축소된 정보와 실제 사용 화면의 터치·읽기 크기는 서로 다른 목적을 가진다.

가격의 굵기는 상품명보다 강하게 둔다. 쉼표를 포함한 숫자와 “원”은 한 묶음으로 읽히지만, “원”의 크기와 굵기는 한 단계 낮춘다. 1,500원과 5,200원의 끝이 서로 지나치게 흔들리지 않도록 카드 내부에서 중앙 정렬하고 숫자 가족을 통일한다. 숫자만 크게 만들고 단위를 멀리 떼어 놓으면 행사가와 개당가를 혼동하기 쉽다. 증정 조건은 가격 옆의 작은 할인율로 대체하지 않고 별도 배지에 남긴다.

상품명은 단어 단위가 중요하다. “참치마요 삼각김밥”처럼 맛과 종류가 함께 보여야 옆 상품과 구분된다. 폭이 좁다면 먼저 프로모션 수식어를 줄이고, 실제 이름을 생략하는 것은 마지막 선택으로 둔다. 웹 원본은 두 줄까지 표현하고 이후 말줄임한다. 이 문서의 4열 전시창은 한 줄로 압축하되 375px 두 열에서는 더 큰 글자를 쓴다. 실서비스에 적용한다면 상품 링크의 접근 가능한 이름에는 전체 상품명을 남긴다.

배너 제목의 강한 굵기와 본문의 평범한 굵기를 대비시킨다. 모든 문구를 굵게 처리하면 행사 숫자와 상품 가격의 우선순위가 사라진다. 보조 정보는 색을 지나치게 밝히기보다 크기와 간격으로 뒤로 물린다. 날짜는 2026.10.01 — 10.31, 용량은 250ml, 가격은 2,400원처럼 한 화면 안에서 형식을 통일한다. 숫자에 불필요한 소수점을 붙이거나 영문 통화 기호를 추가하지 않는다.

한글 자간은 서체 대체의 영향을 많이 받는다. 원본의 큰 제목에서 사용한 -1.76px를 10px 상품명에 그대로 적용하면 받침과 다음 글자가 붙어 보인다. 작은 미리보기에는 약한 음수 자간만 남기고, 가격은 숫자의 모양을 우선한다. 괄호·가운뎃점·슬래시도 좁은 폭에서 잘릴 수 있으므로, 가장 긴 상품명과 하단 가운데 탭을 기준으로 렌더를 확인한다. CSS에 값이 들어 있다는 사실보다 실제로 읽히는 결과가 우선이다.

Spacing

스페이싱

Base unit은 4px (추정) 으로 정리한다. 공식 웹이 모든 간격을 4의 배수로 쓰는 것은 아니다. 실제 상품 외부 여백 10px, 내부 상단 22px, 텍스트 여백 13px처럼 다른 값도 있다. 이 문서의 토큰은 관찰된 화면을 비슷한 리듬으로 다시 구성하기 위한 묶음이며, 기존 CSS를 공식 4px 체계라고 해석한 결과가 아니다. 원본 수치를 보존할 곳과 전시창에 맞춰 줄일 곳을 따로 판단한다.

:root {
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --container-max:1280px; /* 공식 웹 기준 폭 */
  --container-gutter:26px; /* 900px 데모용, 추정 */
  --product-gap:10px; /* 압축 격자용, 추정 */
}

컨테이너의 기준은 공식 데스크톱 CSS의 1280px다. ⑫에서는 외부 창의 폭이 900px이므로 고정 최소 폭을 가져오지 않고 max-width만 남긴다. 좌우 26px 여백 (추정) 안에 왼쪽 행사 필터와 4열 목록을 놓는다. 상품 영역의 열은 minmax(0, 1fr)로 정의해 이름이 긴 카드 하나가 전체 페이지를 밀어내지 않게 한다. 폭이 줄어들 때의 우선순위는 상품 이미지, 이름, 가격, 보조 설명 순이다.

공식 .prod_list는 224×340px, 좌우 margin 10px다. .prod_wrap의 padding은 22px 8px 0, .prod_text의 윗여백은 13px, .prod_img의 높이는 200px다. 원본의 이 값들과 900px 데모의 4열·8px gap·70px 그림 높이를 구분해 기록한다. 데모의 좁은 그림칸에서도 삼각김밥·도시락·컵·병은 다른 실루엣을 유지한다. 명칭·용량·가격의 정렬은 모든 상품에서 같게 두었다.

첫 480px의 밀도는 단순히 여백을 없애서 만들지 않는다. 머리띠·서비스 카테고리·월 행사·목록이라는 순서를 남기고 각 구획의 높이를 줄인다. 목록을 제목 위에 올리거나 서비스 메뉴를 모두 생략하면 실제 웹과의 연결이 약해진다. 반대로 원본의 넓은 제목 여백을 그대로 유지하면 첫 화면에 상품이 거의 나타나지 않는다. 이 예시는 실제 구조를 유지한 압축판이며, 여백 수치를 공식 원본 값으로 설명하지 않는다.

375px에서는 공식 모바일 화면처럼 서비스 가로 분류와 행사 하위 메뉴를 분리하고 전체·1+1·2+1을 고르는 선택 영역을 목록 위에 둔다. 왼쪽 필터와 점포 지도는 접고 상품은 두 열로 유지한다. 가격은 한 줄, 긴 푸터 메뉴는 줄바꿈을 허용한다. 페이지 전체를 가로로 자르는 대신 각 열에 minmax(0, 1fr)를 적용해 긴 이름이 너비를 늘리지 않게 했다. 이 변환은 데스크톱 축소판과 모바일의 실제 탐색 단계를 구별하기 위한 것이다.

아래쪽은 행사의 다음 행동을 설명하는 공간이다. 상품 격자 다음에 더보기, 관련 행사 두 장, 이용 안내, 포켓CU 소개, 푸터를 둔다. 큰 빈 패딩으로 높이만 늘리면 상품 탐색의 흐름이 끊긴다. 각 구획은 실제 서비스에 있을 법한 정보량을 갖고, 색면·선·제목으로 경계를 구분한다. 모바일에서는 같은 구획을 한 열로 쌓기 때문에 스크롤 길이가 늘어나지만, 중간에 내용 없는 면이 생기지는 않게 구성한다.

Border Radius

공식 웹의 상품 내부 카드는 16px, 바깥 hover 프레임은 22px다. 행사 배지의 실제 CSS 반경은 30px, 큰 카테고리 바는 50px다. 이처럼 같은 화면 안에서도 역할에 따라 곡률이 다르다. 문서의 기본 성향은 상품 면적을 가장 많이 차지하는 16px 카드에 맞춰 round로 잡았다. 모든 요소를 알약으로 만들거나, 카드까지 완전한 원형으로 바꾸는 해석은 맞지 않는다.

:root {
  --radius-none:0;
  --radius-sm:4px; /* 추정: 작은 입력 보조 요소 */
  --radius-md:12px; /* 추정: 연결 배너 */
  --radius-lg:16px; /* 공식 웹 상품 내부 카드 */
  --radius-xl:22px; /* 공식 웹 외부 상품 프레임 */
  --radius-full:9999px; /* 30px·50px 알약을 일반화한 추정 토큰 */
}

큰 카드의 둥근 모서리는 포장 그림의 직선과 대비된다. 도시락 용기 자체가 사각형이더라도 바깥 카드까지 각지게 만들 필요는 없다. 반대로 투명 컵이나 페트병의 실루엣을 카드 반경에 맞춰 둥글게 단순화하지 않는다. UI의 모서리와 상품의 실제 형태를 다른 층으로 다루면 제품 간 차이가 유지된다. 이미지 바깥의 흰 면은 포장 곡선을 알아보기 위한 공간이기도 하다.

행사 배지는 공식 CSS에서 54×31px, 상단·왼쪽 20px에 놓인다. 원형 Best 표식은 62×62px, 상단·오른쪽 20px다. 900px 데모에서는 각각 최소 너비 33px의 알약과 31px 말풍선으로 압축했다. Best는 기울임 흰 글자와 오른쪽 아래 꼬리가 있으므로, 단순한 네모 태그로 바꾸면 원본의 인상이 약해진다. 카드의 숫자 배지와 별개 위치에 놓고 모든 상품에 반복하지 않는다.

중첩 카드에는 반경의 관계가 필요하다. 바깥 프레임이 22px이고 안쪽 면이 16px일 때 둘 사이 간격이 매우 작으면 모서리 선이 서로 다른 두께로 보일 수 있다. 실제 hover는 패딩과 그라데이션 프레임이 함께 변한다. 정적인 목록에서는 안쪽 카드 한 겹을 보여 주고, 상태가 바뀔 때만 바깥 프레임을 드러내는 편이 깔끔하다. 강조를 위해 모든 카드에 처음부터 두 겹 테두리를 넣지는 않는다.

모바일의 작은 배너는 12px 정도 (추정) 로 정리했다. 똑같이 16px를 쓰더라도 카드 폭이 줄면 상대적으로 더 둥글게 느껴진다. 따라서 반경의 절댓값뿐 아니라 요소의 높이와 폭을 같이 본다. 탭바의 가운데 결제 버튼은 원형이지만, 일반 탭의 아이콘과 글자는 별도 캡슐에 넣지 않는다. 가운데 행동 한 곳만 형태로 강조해야 하단 탐색의 위계가 분명해진다.

포커스 표시가 모서리에서 잘리지 않도록 바깥 여유를 둔다. 그림을 자르기 위한 overflow:hidden과 포커스 링을 보여 주는 외곽 요소를 분리하면 더 안정적이다. ⑫의 내부 이동 링크에는 모서리와 독립적인 보라 외곽선을 적용했다. 인터랙티브 상품 카드로 확장할 때에는 이미지 래퍼만 자르고 링크 자체의 포커스는 보이는 상태로 남기는 설계가 필요하다 (추정·구현 지침).

Shadow / Elevation

상품 목록의 기본 입체감은 그림자가 아니라 상품에서 나온다. 공식 CSS의 카드 내부면은 흰색과 1px 회색 선을 사용하고, hover 시 바깥색과 이미지 크기가 바뀐다. 화면을 여러 장의 종이가 떠 있는 대시보드처럼 만들지 않는다. 그림자는 접지, 떠 있는 결제 버튼, 잠깐 나타나는 패널처럼 높이 차이가 의미 있는 곳에 제한한다. 아래 단계는 공개 토큰을 확인한 값이 아닌 전체 (추정) 이다.

:root {
  --shadow-none:none;
  --shadow-sm:0 2px 6px rgba(36,24,46,.07); /* 작은 팝오버 */
  --shadow-md:0 5px 14px rgba(36,24,46,.11); /* 검색 제안 */
  --shadow-lg:0 12px 30px rgba(36,24,46,.16); /* 점포 선택 패널 */
  --shadow-xl:0 22px 55px rgba(36,24,46,.20); /* 별도 대화상자 */
  --shadow-product:0 5px 9px rgba(42,43,28,.13); /* 그림 재질용 추정 */
}

상품의 접지 그림자는 모양을 설명한다. 낮은 도시락은 바닥에 넓고 얕은 타원을 만들고, 페트병은 상대적으로 작은 그림자를 만든다. 모든 제품 아래에 같은 검정 타원을 같은 크기로 두면 실제 크기 차이가 사라진다. 이 문서의 SVG에서는 그림자 가장자리를 흐리게 하고 중앙의 농도만 살렸다. 작은 렌더에서도 물체가 흰 바탕에 붙어 있다는 느낌을 주되 회색 얼룩처럼 보이지 않도록 한다.

투명 재료의 반사는 흰 선과 반투명 면을 겹쳐 만든다. 도시락 뚜껑에는 길게 비스듬히 지나는 반사 띠와 가장자리의 밝은 선을 넣고, 내부 반찬의 색이 남도록 투명도를 낮춘다. 삼각김밥 포장은 겉면의 이음선과 안쪽 김의 질감을 분리한다. 이것은 UI의 그림자 단계와 다른 표현이다. 반사와 접지 그림자를 컴포넌트의 box-shadow 하나로 대체하면 재질 구분이 사라진다.

하단 가운데 결제 버튼은 주변 탭보다 약간 위에 있는 형태를 따른다. 이때 강한 검정 그림자보다 흰 바깥 여유와 보라 원 자체가 중요한 단서다. 카드 예시에서는 작은 흰 외곽과 위치 차이로 높이를 표현했다. 버튼 뒤에 큰 광채나 네온 효과를 넣으면 주변의 조용한 상품 화면과 맞지 않는다. 한 화면에서 떠 있는 요소는 한두 곳으로 제한해야 강조의 의미가 남는다.

패널과 모달은 원본의 상태를 직접 확인하지 못했으므로 확정 규칙으로 적지 않는다. 제안한 그림자를 실제 기능에 적용한다면 먼저 점포 선택이 페이지 이동인지 바텀시트인지 확인해야 한다. 같은 정보라도 화면 전환 방식에 따라 필요한 높이 차이가 다르다. 배경을 어둡게 덮는 경우에는 패널의 읽기 순서와 닫기 행동을 함께 설계하고, 그림자만 추가해서 모달처럼 보이게 만들지는 않는다.

렌더 검수에서는 작은 화면의 그림자 뭉침을 본다. 280px 카드에서 얇은 테두리와 흐린 그림자가 겹치면 상품 아래가 지저분해질 수 있다. 그때는 불투명도를 줄이거나 그림자 폭을 좁히고, 상품 이름과 가격을 흐리게 만들지 않는다. 고해상도 원본에서 예쁜 효과가 축소 화면에서도 좋은 것은 아니다. 반사·질감·그림자 중 어떤 정보가 남는지 실제 크기의 이미지를 기준으로 판단한다.

Iconography

스타일: 탐색 아이콘은 Outline, 강조된 가운데 QR 버튼은 보라 면과 흰 획의 혼합이다. 상품과 서비스 바로가기는 단순 선 아이콘보다 작은 그림에 가깝다.
Stroke 굵기: 24px viewBox에서 1.7~2px (추정). 앱스토어 이미지를 관찰한 재구성 값이며 공식 아이콘 토큰은 확인하지 못했다.
모서리 처리: Round linecap·linejoin (추정). 검색·위치·알림·장바구니는 끝이 부드러운 한두 개 선으로 읽히게 한다.
추천 방식: 이 문서처럼 필요한 탐색 기호를 인라인 SVG로 작성한다. 외부 아이콘 묶음을 공식 CU 자산이라고 소개하지 않는다.

검색 돋보기는 짧은 손잡이와 원, 위치 표시는 핀과 가운데 원, 장바구니는 손잡이와 몸통으로 구분한다. 크기가 작아질수록 획을 계속 얇게 만들기보다 덜 중요한 선을 줄인다. 한 아이콘 안에 여러 물품을 그려 넣으면 12px 렌더에서 의미가 사라진다. 카드 머리띠의 아이콘은 작은 제어점을 알려 주고, 상품 그림은 실제 판매 대상을 보여 준다. 두 역할을 같은 수준의 복잡도로 다루지 않는다.

포켓CU 앱스토어에서 확인한 하단 순서는 홈 → 재고조회 → 결제·적립·무인 → MY CU → 전체보기다. 가운데 항목은 QR 형태와 보라 원으로 강조된다. 일반 쇼핑 앱의 카테고리·장바구니·마이페이지 순서를 가져와 덮어쓰면 편의점 앱의 실제 성격이 약해진다. 카드에서는 공간이 작아도 이 다섯 항목의 이름과 순서를 남기고, 가운데 설명만 조금 더 작게 조정했다.

아이콘만으로 매장 선택이나 재고 조회를 설명하지 않는다. 핀 모양은 위치를 떠올리게 하지만, 현재 선택한 점포인지 주변 점포 찾기인지까지 알려 주지는 않는다. 점포명과 짧은 행동 이름을 함께 둔다. 지도 안에서 거리나 재고 숫자를 보여 주는 경우에는 아이콘에 작은 숫자를 과도하게 겹치지 않는다. 표시해야 할 정보가 많다면 점포 목록 행에 옮기는 편이 읽기 쉽다.

SVG 상품은 탐색 아이콘과 다른 제작 기준을 가진다. 삼각김밥은 쌀·김·필름·라벨·이음선, 도시락은 용기·칸·반찬·뚜껑·반사, 음료는 몸체·뚜껑·라벨·하이라이트·물방울을 각각 별도 층으로 그렸다. 컵라면은 뚜껑 타원과 줄어드는 옆면이, 디저트는 시트와 크림의 층이 보이도록 했다. 이름을 가려도 포장의 종류가 구별되는 것이 상품 그림의 기준이다.

장식용 SVG는 접근성 트리에서 숨기고, 실제 상품명은 카드의 텍스트에 남긴다. 로고는 CU라는 짧은 이름을 갖는다. 하단 탭의 선 아이콘을 반복해서 읽어 주기보다 탭 이름 하나를 명확하게 제공하는 편이 낫다. 예시는 정적 문서이므로 재고조회나 결제가 작동한다고 표현하지 않는다. 실서비스의 버튼으로 옮길 때에는 터치 영역과 선택 상태를 별도로 연결해야 한다 (추정·구현 지침).

앱 하단 아이콘은 공식 소개 이미지의 홈 → 재고조회 → 결제·적립·무인 → MY CU → 전체보기 순서다. 집 안의 CU 표식, 네 모서리가 열린 재고 스캔, 가운데 보라 원의 QR, 사람, 점 세 개가 든 말풍선을 각각 그렸다. 핀은 점포 선택 영역에만 사용한다. 머리띠에는 쿠폰의 뜯김선, 알림 종, 수량 2가 붙은 장바구니를 추가했다. 수량은 예시 값이며 실제 장바구니와 연결되지 않는다.

상품 포장의 재질도 이름과 맞춘다. 딸기 밀크는 상단이 접힌 종이팩, 제로 스파클링은 따개와 금속 테두리가 있는 캔, 바나나 밀크는 둥근 우유병이다. 과자는 주름진 봉지, 초코바는 긴 필름과 잘린 단면을 함께 그렸다. 초코 케이크에는 딸기 대신 갈라진 초콜릿 판을 얹었다. 같은 상품군의 다른 맛은 구조를 공유하되, 우유팩을 탄산수 병으로 바꾸는 식의 재사용은 하지 않는다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

공식 웹에서 직접 확인한 것은 카테고리 바, 상품 카드, 행사 배지, 상품 이미지 hover다. 아래 버튼·입력·오류·로딩 상태의 공통 이름과 값은 재구성 제안 (추정) 이다. 실제 포켓CU 내부의 공통 컴포넌트 명세로 단정하지 않는다. 같은 페이지에서 Primary가 여러 개 경쟁하지 않도록, 핵심 행동에는 보라 채움, 보조 행동에는 흰 면과 선, 단순 이동에는 Ghost를 쓴다. 위험 행동은 행사 혜택과 구분되는 의미 색을 사용한다.

Button은 색뿐 아니라 행동의 우선순위를 나타낸다. Primary의 기본·hover·active는 같은 보라 계열 안에서 조금씩 어두워진다. Secondary는 경계를 유지하고 옅은 배경으로 반응한다. Disabled에는 흐린 글자와 비활성 커서를 쓰되 설명까지 사라지게 하지 않는다. Loading은 원래 버튼 너비와 짧은 처리 문구를 유지한다. 버튼이 좁아졌다 넓어지면 가까운 다른 행동을 잘못 누를 수 있다. 로딩 표시가 있는 경우에는 중복 실행을 막는 동작도 필요하다.

Input은 점포나 상품을 찾는 검색이 대표적이다. 기본 테두리는 차분하게 두고 포커스에서 보라 선을 분명히 드러낸다. 오류 문구는 테두리 색 변화만으로 끝내지 않고 입력 아래에 읽을 수 있는 문장으로 제공한다. “다시 입력하세요”보다는 무엇이 필요한지 적는다. 검색 결과가 없는 것은 입력 오류와 다를 수 있으므로, 결과 없음 화면을 붉게 칠하지 않는다. 비활성 입력은 사용할 수 없는 이유가 근처에 있어야 한다.

Card는 기본형·강조형·Outlined로 나누지만 기본 상품 목록은 Outlined 한 겹이면 충분하다. 강조형은 선택한 점포나 특정 안내에만 사용한다. 행사 배지가 이미 강한 카드에 다시 보라 외곽과 큰 그림자를 넣으면 정보가 과해진다. 상품 이미지 hover 확대는 카드 크기를 바꾸지 않고 그림만 약간 커지는 방식이 좋다. 원본의 scale(1.1)과 0.34초 전환을 관찰했으며, 축소 예시에는 움직임을 줄여 적용할 수 있다.

Badge / Tag는 Solid를 행사 조건, Subtle을 보조 특징, Outline을 낮은 우선순위의 분류에 사용한다 (추정). 1+1은 초록, 2+1은 보라 바탕과 흰 글자로 재현했다. 초록 위 흰 글자는 작은 크기에서 대비가 낮으므로 실제 기능 화면으로 옮길 때에는 더 짙은 초록이나 어두운 글자를 별도 대안으로 검토한다. “Best”는 원본에서 일부 상품의 우측 위에 보이는 보라 원형 말풍선이다. 흰 기울임 글자와 오른쪽 아래 꼬리를 재현하고 목록의 두 상품에만 배치했다. 품절·예약·판매종료 같은 상태를 행사 배지 안에 혼합하지 않는다. 행사 조건과 구매 가능 여부는 동시에 존재할 수 있으므로 서로 다른 위치에서 읽혀야 한다.

Navigation은 서비스 카테고리와 행사 필터의 두 층이다. 어두운 가로 바에서는 상품·서비스의 큰 분류를, 왼쪽에서는 행사 조건을 고른다. 같은 링크가 두 영역에 중복되어도 역할이 달라 보이지 않으면 혼란스럽다. 선택 상태는 배경이나 굵기 변화와 함께 aria-current 또는 실제 탭 상태로 전달한다. 예시의 내부 링크는 정적 문서 안의 해당 구획으로 이동한다. 필터링이나 구매가 작동하는 기능 화면으로 오해하지 않게 상품 데이터도 예시라고 명시했다.

.cu-btn {
  --cu-button-bg:var(--color-primary-500);
  --cu-button-fg:var(--text-on-primary);
  --cu-button-border:var(--color-primary-500);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;border:1px solid var(--cu-button-border);
  border-radius:var(--radius-full);background:var(--cu-button-bg);
  color:var(--cu-button-fg);font-family:inherit;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;
  transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.cu-btn-primary:hover{--cu-button-bg:var(--color-primary-600);--cu-button-border:var(--color-primary-600)}
.cu-btn-primary:active{--cu-button-bg:var(--color-primary-700);--cu-button-border:var(--color-primary-700)}
.cu-btn-secondary{--cu-button-bg:#fff;--cu-button-fg:var(--text-primary);--cu-button-border:var(--border-default)}
.cu-btn-secondary:hover{--cu-button-bg:var(--color-primary-50);--cu-button-border:var(--color-primary-300)}
.cu-btn-secondary:active{--cu-button-bg:var(--color-primary-100);--cu-button-border:var(--color-primary-500)}
.cu-btn-ghost{--cu-button-bg:transparent;--cu-button-fg:var(--color-primary-500);--cu-button-border:transparent}
.cu-btn-ghost:hover{--cu-button-bg:var(--color-primary-50)}
.cu-btn-ghost:active{--cu-button-bg:var(--color-primary-100)}
.cu-btn-danger{--cu-button-bg:var(--color-error-bg);--cu-button-fg:var(--color-error-fg);--cu-button-border:#E8C3BF}
.cu-btn-danger:hover{--cu-button-bg:#FBE0DC;--cu-button-border:#CE8B82}
.cu-btn-danger:active{--cu-button-bg:#F4CFC9;--cu-button-border:#AE332C}
.cu-btn:disabled,.cu-btn[aria-disabled="true"]{--cu-button-bg:#F0EDF2;--cu-button-fg:var(--text-disabled);--cu-button-border:#E5E0E9;cursor:not-allowed}
.cu-btn[aria-busy="true"]{cursor:progress;pointer-events:none}
.cu-btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cu-spin .8s linear infinite}
.cu-btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.cu-input{width:100%;min-height:44px;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 13px;background:var(--bg-elevated);color:var(--text-primary);font:inherit}
.cu-input:focus{outline:2px solid var(--border-focus);outline-offset:1px;border-color:var(--border-focus)}
.cu-input[aria-invalid="true"]{border-color:var(--color-error-fg);background:var(--color-error-bg)}
.cu-input:disabled{background:var(--color-neutral-100);color:var(--text-disabled);cursor:not-allowed}
.cu-input-error{display:block;margin-top:var(--space-xs);color:var(--color-error-fg);font-size:12px}
.cu-card{background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-none)}
.cu-card-emphasis{border:2px solid var(--color-primary-500);background:var(--color-primary-50)}
.cu-card-outlined{border:1px solid var(--border-default)}
.cu-card .cu-product-art{transition:transform var(--duration-product) var(--ease-in-out)}
@media(hover:hover){.cu-card:hover .cu-product-art{transform:scale(1.04)}}
.cu-badge{display:inline-flex;align-items:center;justify-content:center;min-width:33px;padding:3px 7px;border-radius:var(--radius-full);font:700 10px/1.2 Arial,sans-serif;letter-spacing:0}
.cu-badge-green{background:var(--color-event-green);color:#fff}
.cu-badge-purple{background:var(--color-event-purple);color:#fff}
.cu-badge-subtle{background:var(--color-primary-100);color:var(--color-primary-700)}
.cu-badge-outline{border:1px solid var(--border-default);color:var(--text-secondary);background:transparent}
.cu-nav{display:flex;align-items:center;gap:var(--space-sm);background:var(--color-navigation);border-radius:var(--radius-full)}
.cu-nav a{padding:12px 22px;color:#fff;text-decoration:none}
.cu-nav a[aria-current="page"]{background:var(--color-event-green);color:#fff;border-radius:inherit;font-weight:700}
.cu-nav a:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:3px}
@keyframes cu-spin{to{transform:rotate(360deg)}}

375px 재구성은 실제 모바일 행사 페이지의 탐색 단계를 따른다. 높이 56px 머리띠에 뒤로·상품서비스·전체 메뉴를 두고, 그 아래 48px 어두운 바에 행사상품·생활편의서비스·제휴카드를 배치한다. 플러스행사·아침에행사·증정행사 하위 메뉴와 전체 선택을 분리한다. 웹의 왼쪽 필터를 작은 알약으로 줄이는 방법은 사용하지 않는다. 이 높이와 글자 크기는 원본을 375px 데모에 맞춘 값 (추정) 이다. 정적인 선택 예시이므로 실제 상품 필터 기능은 제공하지 않는다.

하단 연결은 20개 상품 뒤의 더보기, 키핑보관함·디저트 안내 두 타일, 이용 안내, 포켓CU 서비스 다섯 개, 푸터 순서다. 픽업은 매장, 배달은 스쿠터, 예약은 쇼핑백, CU BAR는 병과 잔, 홈배송은 트럭으로 그려 같은 원형 아이콘을 반복하지 않았다. 키핑 그림의 3개·30일·2개는 앱 소개 이미지의 정보 밀도를 참고한 화면 예시다. 모든 증정 상품의 보관 기간이 30일이라는 서비스 약속으로 읽지 않는다.

Motion

공식 웹 상품 hover는 이미지 scale(1.1)과 0.34초 ease-in-out을 사용한다. 상품 바깥 프레임에도 같은 시간의 변화가 있다. 이 값은 실제 new_layout.css에서 확인했다. 헤더 메뉴의 다른 전환이 같은 속도라는 뜻은 아니다. 문서에서는 상품의 성격을 보존하는 작은 확대만 제안하고, 원본 전체의 애니메이션 체계가 공개됐다고 설명하지 않는다. 빠른 상태 반응과 화면 이동의 시간은 별도의 추정값으로 둔다.

:root {
  --duration-fast:150ms; /* 추정: 버튼 상태 */
  --duration-base:220ms; /* 추정: 작은 패널 */
  --duration-slow:420ms; /* 추정: 구획 전환 */
  --duration-product:340ms; /* 공식 상품 hover */
  --ease-out:cubic-bezier(.2,.7,.2,1); /* 추정 */
  --ease-in-out:ease-in-out; /* 공식 상품 hover */
}
@media(prefers-reduced-motion:reduce){
  .cu-site *{scroll-behavior:auto;transition:none!important;animation:none!important}
  .cu-card:hover .cu-product-art{transform:none}
  .cu-btn[aria-busy="true"]::before{animation:none}
}

움직임을 줄인 환경에서는 확대와 회전을 끄고 색·선·문구로 상태를 전달한다. 로딩 원의 회전이 멈추어도 “확인 중” 같은 글자가 있으면 처리 중임을 알 수 있다. 선택 상태 자체를 애니메이션에 의존하지 않는 것이 중요하다. 스크롤 이동도 긴 부드러운 이동 대신 즉시 해당 구획을 보여 줄 수 있다. 상품 그림의 반사나 질감은 정적인 층으로 남기므로 움직임이 없어도 제품의 입체감은 유지된다.

정지 화면에서도 실제 웹의 시각적 피드백은 남는다. 선택한 행사 범주는 초록, 2+1은 보라, 현재 링크는 굵기로 구분한다. 큰 화면의 상품 hover만 340ms를 사용하고 모바일에는 hover를 전제한 설명을 두지 않는다. 서비스 다섯 그림과 상품의 필름 반사는 애니메이션 없이 고정된 SVG 층으로 표현한다.

Anti-patterns

다음 다섯 가지는 이번 조사와 재구성에서 피한 패턴이다. 공식 CU 내부의 금지 목록을 인용한 것은 아니다. 어떤 모양을 쓰지 말라는 지시보다, 그 모양이 실제 상품 탐색과 어떤 충돌을 만드는지 함께 기록했다. 다른 화면에 적용할 때에도 같은 이유가 성립하는지 먼저 판단한다.

1. 대표색을 추측하고 모든 초록을 같은 값으로 합치기. CU Green의 공식 Screen RGB와 웹 행사 초록은 다르다. CI를 정리하는 표에는 #A5CF4C, 행사 배지에는 확인한 #37D243을 사용한다. 더 선명해 보이는 쪽 하나를 골라 전부 치환하면 자료의 의미가 바뀐다. 확장 팔레트나 의미 색은 추정이라고 표시하고, 공식값이 추가되면 해당 토큰부터 교체할 수 있게 분리한다.

2. 상품을 같은 둥근 상자로 그리고 라벨만 바꾸기. 편의점 상품의 차이는 포장 모양에서 먼저 드러난다. 삼각김밥에 김 띠와 필름 이음이 없거나, 도시락에 칸과 반찬이 없으면 일반 아이콘이 된다. 컵과 페트병은 입구·뚜껑·라벨 위치가 달라야 한다. 밝은 면, 어두운 면, 재질, 작은 부품을 별도 층으로 넣되 이름보다 그림이 복잡해서 읽기를 방해하지 않도록 작은 크기로 확인한다.

3. 다른 커머스의 메뉴를 가져와 편의점 문법을 지우기. 배송 배너와 장바구니 중심 구조만 남기면 CU의 점포 탐색·재고조회·증정 혜택이 약해진다. 포켓CU의 하단 탭 순서를 지키고, 웹 행사 목록에서는 전체·1+1·2+1 필터를 사용한다. 이번 PC 화면에서 확인되지 않은 덤증정 필터는 넣지 않았다. 모바일의 증정행사 메뉴를 데스크톱의 동일한 필터라고 해석하지도 않는다.

4. 첫 화면만 만들고 아래를 큰 빈 면으로 남기기. 실제 행사 페이지는 긴 상품 목록과 더보기, 안내, 푸터가 이어진다. 예시에서도 서로 다른 상품 20개를 놓고, 행사 안내와 앱 이용 연결을 아래에 채웠다. 높이 수치를 맞추려고 빈 섹션에 패딩을 추가하지 않는다. 긴 페이지일수록 구획의 역할과 다음 행동이 분명해야 하며, 모바일에서도 동일한 정보가 자연스러운 순서로 이어져야 한다.

5. 공식 BI 가이드를 공식 UI·다크 모드 명세로 확대 해석하기. 로고와 대표색의 근거가 있어도 검색 오류·모달·로딩·테마 전환 규칙이 함께 검증된 것은 아니다. 어두운 바탕에 흰 로고를 놓은 견본은 배경 적용 방법이다. 실제 앱의 라이트·다크 선택 근거를 찾기 전까지는 라이트 판만 제공한다. 공식 CSS에서 확인한 값과 화면을 보고 제안한 값을 같은 문장 안에서도 구분한다.

같은 모양의 재사용은 실제 제품군 안에서만 한다. 다른 맛의 컵 음료는 같은 포장 구조를 사용할 수 있지만, 병과 도시락까지 동일한 기본 도형으로 바꾸지 않는다. 목록의 반복은 실제 행사 웹의 반복 구조를 따르고, 장식이나 안 보이는 마크업을 늘려 분량을 채우지 않는다. 상품 사진을 대신한 SVG의 각 선과 면은 포장의 어느 부분을 설명하는지 알 수 있어야 한다. 최종 판단은 소스 길이보다 실제 280×210 카드와 900×480 화면에서 내린다.

Sources

출처

CU (씨유) 이름과 로고는 각 권리자의 상표입니다.