김희준
애플에서 업데이트 된 ios27 액체유리 슬라이더 효과를 Pixso에서 단계별로 구현하는 방법을 알아보세요. Most Transparent부터 Most Tinted까지 역제 유리 파라미터 설정법을 상세히 설명합니다.
파트 1. iOS 27에서 달라진 액체유리 (Liquid Glass) 효과
1-1. 액체유리 (Liquid Glass) 란 무엇인가?
iOS 27에서 Apple이 전면 도입한 Liquid Glass(액체유리)는 단순한 블러 효과를 넘어, 실제 유리 소재처럼 빛을 굴절·반사·투과시키는 실시간 물리 기반 렌더링 기술입니다. 기존 frosted glass(반투명 유리) UI와의 핵심 차이는 '정적(static)'이 아니라 '동적(dynamic)'이라는 점입니다.
배경 콘텐츠, 주변 광원, 손가락 제스처에 따라 유리 표면의 굴절 각도와 반사광이 실시간으로 변화합니다. Apple은 이를 통해 iOS UI를 2D 평면에서 유리 소재감이 느껴지는 3D 물리 공간으로 확장했다고 설명합니다.
1-2. iOS 26 대비 iOS 27에서 달라진 핵심 변화
아래 비교표는 iOS 26과 iOS 27 사이 Liquid Glass 관련 주요 변경 사항을 정리한 것입니다.
| 항목 | iOS 26 (이전) | iOS 27 (Liquid Glass) |
|---|---|---|
| 홈 화면 배경 처리 | 정적 블러(Static Blur) | 동적 굴절 + 유리 반사 |
| 앱 아이콘 효과 | 평면 그림자 | 입체 빛 굴절 레이어 |
| 독(Dock) UI | 반투명 배경 | 유리 소재 + 환경광 반응 |
| 알림 센터 | 반투명 카드 | Liquid Glass 패널 |
| 잠금 화면 위젯 | 불투명 배경 | 투명 유리 재질 |
| 애니메이션 물리엔진 | 스프링 애니메이션 | 액체 흐름 시뮬레이션 |
1-3. iOS 27 액체유리 슬라이더(Liquid Glass Slider)의 특징
iOS 27에서 특히 주목받는 요소 중 하나가 바로 'Liquid Glass Slider'입니다. 기존 슬라이더는 단색 트랙 위 원형 썸(thumb)으로 구성된 단순한 컨트롤이었으나, iOS 27부터는 다음과 같이 완전히 달라졌습니다.
- 슬라이더 트랙 자체가 Liquid Glass 재질로 구현됨 — 배경을 비추는 투명 유리 튜브 형태
- 썸(thumb) 주변에 빛의 굴절 후광(halo) 이펙트 실시간 생성
- 드래그 시 액체가 흐르는 듯한 물리 기반 애니메이션 적용
- 밝기(brightness), 채도(saturation), 투명도(opacity) 값에 따라 유리 외관이 자동 반응
- 다크모드/라이트모드 전환 시 유리 소재의 반사 방향이 동적으로 전환
💡 Apple Human Interface Guidelines(HIG) iOS 27 업데이트에서는 Liquid Glass Slider를 'tinted', 'default', 'transparent' 세 가지 모드로 구분하여 가이드라인을 제공하고 있습니다.
1-4. 디자이너가 알아야 할 iOS 27 액체유리 3가지 레벨
이미지에서 확인할 수 있듯, iOS 27 Liquid Glass 슬라이더는 투명도 레벨에 따라 세 단계로 구분됩니다.
- ① Most Transparent (가장 투명): 흐릿함(노이즈) 0, 밝기 0% — 배경이 완전히 비치는 순수 투명 유리
- ② Default (기본값): 흐릿함 8, 밝기 0% — Apple 기본 UI에 적용된 표준 Liquid Glass 강도
- ③ Most Tinted (가장 틴티드): 흐릿함 50, 밝기 10% — 슬라이더 배경에 색조(tint)가 더해진 불투명 유리
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
파트 2. Pixso에서 iOS 27 액체유리 슬라이더 구현하기 — 단계별 완전 가이드
2-1. 왜 Pixso인가?
픽소(Pixso)는 Figma와 유사한 인터페이스를 제공하면서도, 디자인 팀에 최적화된 협업 기능과 AI 디자인 기능(Paico)을 탑재한 올인원 UI/UX 디자인 툴입니다. 특히 레이어 효과 패널에서 '역제 유리(Liquid Glass)' 효과를 공식 지원하여 iOS 27 스타일 컴포넌트를 손쉽게 구현할 수 있습니다.
브라우저 기반으로 별도 설치 없이 사용 가능하며, 실시간 협업과 컴포넌트 라이브러리 공유가 강점입니다.
2-2. Pixso 역제 유리 효과 적용 — Step by Step
아래 단계는 첨부된 실제 Pixso 스크린샷 기반으로 작성되었습니다.
Step 1. 배경 이미지 프레임 준비 & 원본 에셋 가져오기: Pixso에서 새 파일을 생성한 뒤, iOS 홈 화면 배경 이미지 또는 작업할 배경을 프레임에 삽입합니다. Apple 원본 아이콘(예: Photos 앱 아이콘)을 왼쪽에 배치하고, 오른쪽에 Pixso로 재현할 결과물 영역(프레임)을 나란히 놓으면 비교 작업이 편리합니다.
Step 2. 대상 레이어 선택 후 색상 모드 설정 — '더 어둡게' 적용: Pixso 결과물 프레임 내에서 Liquid Glass 효과를 적용할 요소(슬라이더 트랙, 아이콘 레이어 등)를 선택합니다. 우측 패널 [채우기]에서 색상 피커를 열면 블렌딩 모드 드롭다운이 나타납니다. 여기서 '더 어둡게(Darker Color)' 모드를 선택합니다. 색상 코드는 #FF5961을 기본값으로 적용하고, 불투명도는 100%로 설정합니다. 이 단계에서 외곽선에 FFFFFF 20%, 내부 0.2 옵션도 함께 설정합니다.
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
Step 3. 효과 패널에서 '역제 유리(Liquid Glass)' 효과 추가: 우측 패널 하단 [효과] 섹션에서 + 버튼을 클릭한 뒤, 드롭다운에서 '역제 유리(Liquid Glass, Beta)'를 선택합니다. 효과가 추가되면 레이어에 실시간으로 Liquid Glass 재질이 적용된 것을 확인할 수 있습니다.
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
Step 4. Liquid Glass 파라미터 세부 조정 — Most Transparent 단계: 역제 유리 효과 패널(Beta)에서 세부 값을 조정합니다. [Most Transparent] 단계를 구현하려면: 광원 각도 -45°, 광원 밝기 80%, 환경 영향 끄기, 렌즈 모양 볼록 렌즈, 글질 80, 깊이 20, 분산 효과 50으로 설정합니다. 핵심 파라미터인 흐릿함(Noise)을 0, 밝기를 0%로 설정하면 가장 투명한 유리 질감이 완성됩니다. 프레임 크기는 W70 × H30으로 지정합니다.
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
Step 5. Default 단계 — 흐릿함 값 조정으로 Apple 기본 Liquid Glass 구현: 동일한 역제 유리 효과 패널에서 흐릿함(Noise) 값을 8로 올립니다. 밝기는 0% 유지합니다. 이 값이 Apple iOS 27 기본 UI(알림 센터, 독, 검색 바 등)에 적용된 Default Liquid Glass 강도에 해당합니다. 나머지 광원·렌즈 파라미터는 Step 4와 동일하게 유지합니다.
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
Step 6. Most Tinted 단계 — 흐릿함 50 + 밝기 10%로 색조 유리 완성: 마지막으로 흐릿함(Noise)을 50, 밝기를 10%로 올리면 가장 불투명한 'Most Tinted' Liquid Glass가 완성됩니다. 이 단계에서는 슬라이더 배경에 색조(tint)가 더해져 볼드한 유리 재질감이 표현됩니다.
출처: Apple 공식 디자인 가이드라인 / Pixso 재현
2-3. 완성된 Pixso Liquid Glass 컴포넌트 활용 팁
- 컴포넌트로 등록 후 라이브러리에 추가하면 팀 전체가 동일한 Liquid Glass 스타일을 재사용할 수 있습니다.
- '로컬 토큰(Local Token)' 기능으로 흐릿함·밝기 값을 토큰화하면 디자인 시스템에 통합 관리가 가능합니다.
- D2C 탭에서 CSS 코드를 자동 추출하여 개발 팀에 직접 전달할 수 있습니다.
- Pixso의 프로토타입 패널에서 터치 제스처 트리거를 연결하면 Liquid Glass 슬라이더 인터랙션 데모를 제작할 수 있습니다.
📐 Pixso iOS 27 액체 유리 디자인 가이드 안내
iOS 27 액체유리(Liquid Glass) 효과의 구체적인 파라미터 설정이나 아이콘·슬라이더 시안이 필요하신 경우, Pixso 액체유리 디자인 가이드 및 iOS 27 공식 시안 및 iOS 27 공식 시안 을 통해 역제 유리 컴포넌트 라이브러리와 아이콘 레퍼런스를 직접 확인하실 수 있습니다.
파트 3. 자주 묻는 질문 (FAQ)
Q1. iOS 27 Liquid Glass는 모든 iPhone에서 지원되나요?
A1. iOS 27 Liquid Glass 효과는 A15 Bionic 칩 이상을 탑재한 iPhone 13 시리즈부터 공식 지원됩니다. 구형 기기에서는 Liquid Glass 대신 기존 반투명 블러 효과로 폴백됩니다.
Q2. iOS 27 액체유리와 iOS 26 frosted glass의 차이는 무엇인가요?
A2. iOS 26의 frosted glass는 정적인 흐림 효과(Gaussian blur) 기반입니다. 반면 iOS 27 Liquid Glass는 실시간 물리 기반 렌더링으로 빛 굴절·반사·투과를 동적으로 시뮬레이션하며, 배경 콘텐츠와 주변 광원에 따라 유리 표면이 실시간으로 반응합니다.
Q3. Pixso는 무료로 사용할 수 있나요?
A3. Pixso는 무료 플랜을 제공하며, 3개 프로젝트까지 무료로 사용 가능합니다. 팀 협업 및 고급 기능은 Pro/Team 유료 플랜을 통해 이용할 수 있습니다.
결론.
iOS 27의 Liquid Glass(액체유리) 디자인 언어는 단순한 시각적 트렌드를 넘어 Apple이 모바일 UI의 물리적 소재감을 재정의하는 패러다임 전환입니다. 유리가 빛을 굴절·반사·투과하는 물리 현상을 실시간으로 시뮬레이션하는 이 기술은, 디자이너들에게 새로운 컴포넌트 언어를 요구합니다.
다행히 픽소(Pixso)는 '역제 유리(Liquid Glass)' 효과를 이미 Beta로 지원하고 있어, 별도의 플러그인 없이 Most Transparent / Default / Most Tinted 세 가지 레벨의 iOS 27 액체 유리 슬라이더를 구현할 수 있습니다. iOS 27 Liquid Glass 트렌드에 발맞춰 디자인 시스템을 업데이트하려는 팀이라면, Pixso를 활용한 이 가이드를 시작점으로 삼아 보세요.
![무드보드를 제작해보자! [단계별 가이드]](https://cms.pixso.net/images/kr/articles/cover/how-to-design-a-moodboard.png)
![[가이드]디자인 기초--타이포그래피 디자인](https://cms.pixso.net/images/kr/articles/cover/typography-design.png)
