저희 브랜드 규칙에는 `border-radius` 0, `box-shadow` 0이 못박혀 있습니다. 유행하는 스타일과 정면으로 부딪히길래, 말로 판단하지 않고 카드 하나를 두 가지 방식으로 실제로 만들어 나란히 놓아봤습니다.
리퀴드 글래스와 저희 규칙은 무엇이 다른가
리퀴드 글래스를 이루는 시각 요소는 크게 셋입니다. 저희 규칙과 하나씩 대조하면 이렇습니다.
| 구성 요소 | 리퀴드 글래스가 하는 일 | GI 브랜드 규칙 | 통과 여부 |
|---|---|---|---|
| 모서리(border-radius) | 유리 덩어리를 깎은 듯 둥글게 처리해 부드러운 인상을 만든다 | `border-radius` 0 (원형 크롭이 강제되는 프로필만 예외) | 위반 |
| 그림자(box-shadow, 다중 레이어) | 배경에서 떠 있는 깊이와 하이라이트를 만든다 | `box-shadow` 0 | 위반 |
| 반투명·블러(backdrop-filter) | 배경을 굴절시켜 유리 재질감을 만든다 | 별도 금지 규칙 없음 | 통과 |
2026년 9월 기준, 저희 사내 브랜드 문서(`브랜드전략/00_브랜드_방향성_v1.md`) 기준으로 대조했습니다.
왜 그림자와 모서리를 막았나
저희 색 규칙에는 전부 대비비 숫자가 붙어 있습니다. 코발트를 밝은 바탕에 쓰지 않는 이유는 대비 2.95:1이라 기준 미달이기 때문이고, 버튼 위 글자를 잉크색으로 쓰는 이유는 흰 글자가 3.2:1이라 미달이기 때문입니다.
모서리와 그림자 규칙에는 그런 근거가 붙어 있지 않습니다. 2026년 8월 하늘 코발트 팔레트로 넘어오면서 "정해진 것"으로만 올라 있고, 왜 0인지는 문서 어디에도 적혀 있지 않습니다. 업계에 흔한 부드러운 카드·그림자 UI와 시각적으로 구분되는 쪽을 택한 결정으로 보이지만, 저희도 이걸 수치로 증명하지는 못합니다.
근거가 없다고 규칙이 아닌 것은 아닙니다. 다만 이번 실험의 목적은 규칙을 바꾸는 것이 아니라, 이 규칙이 요즘 유행과 부딪힐 때 실제로 무엇을 포기하게 만드는지 눈으로 확인하는 것이었습니다.
어떻게 확인했나
동일한 카드(제목·설명·수치 2줄·버튼)를 HTML/CSS로 두 벌 만들고 헤드리스 크롬으로 캡처해 나란히 놓았습니다. 한 번에 규칙판으로 가지 않고, 중간 단계를 하나 거쳤습니다.
01 원본 — `border-radius:28px` + `box-shadow` 2겹 (그대로 트렌드) 02 그림자만 제거 — `border-radius:28px` 유지, `box-shadow:none` 03 최종 — `border-radius:0`, `box-shadow:none`, `border:1px solid` 로 대체
02번에서 멈추면 하드룰 절반만 통과합니다. 그림자를 빼는 것과 모서리를 각지게 하는 것은 서로 다른 작업이라, 하나를 고쳤다고 다른 하나가 따라 고쳐지지 않았습니다.
실제로 만들어보니 어땠나
01번(원본)은 카드가 배경에서 떠 있는 느낌이 뚜렷했습니다. 그림자 2겹과 상단 하이라이트 테두리가 만드는 효과였습니다.
03번(최종)에서는 그 "떠 있는 느낌"이 사라졌습니다. 대신 얇은 구분선(`--divider-dark`)이 카드 영역을 표시했고, 화면 전체로 보면 구분 자체는 문제없이 됐습니다. 반투명 블러는 규칙에 걸리지 않아 그대로 남았고, 배경 위 그러데이션이 카드 뒤로 은은하게 비치는 정도는 유지됐습니다.
정리하면 셋 중 하나(블러)만 살아남고 둘(모서리·그림자)은 규칙에 걸렸습니다. 다만 이번에 확인한 건 정지된 화면 한 장뿐입니다. 리퀴드 글래스의 특징으로 꼽히는 스크롤 시 굴절 변화, 터치에 반응하는 탄성 움직임은 애플 공식 문서에도 나오는 요소인데, PNG 한 장으로는 검증되지 않습니다. 그 부분은 아직 확인하지 못했습니다.
자주 묻는 질문
리퀴드 글래스가 정확히 뭔가요?
애플이 2025년 WWDC에서 iOS 26용으로 공개한 소재 언어로, 반투명 유리처럼 빛을 굴절·반사시켜 인터페이스에 깊이감을 주는 디자인 방식입니다. 2026년 UI 트렌드 목록에서 반복적으로 1순위로 꼽힙니다.
그림자를 다 빼면 리퀴드 글래스라고 부를 수 있나요?
저희 판단으로는 아닙니다. 반투명·블러만 남기면 업계에서 흔히 쓰는 "글래스모피즘"의 최소 조건은 채우지만, 애플이 정의한 깊이·굴절감은 그림자와 하이라이트 테두리가 함께 있어야 나옵니다. 저희는 이 결과물을 리퀴드 글래스가 아니라 "블러 카드"라고 부르기로 했습니다.
GI 브랜드 규칙에 예외는 없나요?
원형 크롭이 강제되는 프로필 이미지 한 종류만 예외입니다. 카드·버튼·이미지 프레임에는 예외를 두지 않습니다.
반투명·블러는 접근성 문제가 없나요?
애플 공식 문서도 이 부분을 인정합니다. 투명도 줄임(Reduced Transparency) 접근성 옵션을 켜면 리퀴드 글래스가 더 불투명하게, 대비 강화 옵션을 켜면 테두리가 뚜렷한 형태로 바뀌도록 별도 설계돼 있습니다. 기본값 그대로 쓰면 텍스트 대비가 배경에 따라 흔들릴 수 있습니다.
이 실험 결과로 규칙을 바꿀 계획이 있나요?
아직 없습니다. 이번 실험으로 확인한 건 "이 규칙에는 대비 규칙 같은 근거가 붙어 있지 않다"는 사실이지, 규칙이 틀렸다는 사실은 아닙니다. 바꿀지는 별도 논의가 필요합니다.
마무리
트렌드를 못 따라간다고 하면 전부 포기한 것처럼 들리기 쉬운데, 실제로 저희가 포기한 건 셋 중 둘이었고 하나는 그대로 가져왔습니다. 유행하는 스타일을 브랜드 규칙에 맞출지 판단할 때는 "된다/안 된다"로 뭉뚱그리지 않고, 스타일을 이루는 요소를 쪼개서 하나씩 대조하는 편이 낫습니다.
참고: Apple Developer, Meet Liquid Glass (WWDC25). Figma, Top Web Design Trends for 2026.
관련 글: AI가 브랜드를 깨는 게 아닙니다 — 규칙을 생성 단계에 안 준 것입니다, 소재 한 장으로 여러 매체 돌려쓰면, 실제로 쓸 수 있는 건 가운데 13%입니다