Pixso에서 액체 유리 슬라이더 디자인하기

Pixso에서 유리 질감의 슬라이더를 디자인해 보세요. 배경과 프레임을 준비하고, Liquid Glass 효과의 굴절·깊이·흐림을 조절한 뒤 서로 다른 배경에서도 손잡이와 트랙이 잘 보이는지 확인하는 순서로 진행합니다.

1부. 액체 유리 효과에서 살펴볼 요소

Liquid Glass란?

Apple은 iOS 26에서 주변을 반사하고 굴절하는 반투명 소재인 Liquid Glass를 소개했습니다. Pixso의 Liquid Glass 효과는 프레임 아래의 배경이 보이는 방식을 조절해 유리 질감을 만드는 데 사용할 수 있습니다.

슬라이더를 디자인할 때는 재질보다 조작 상태를 먼저 확인하세요. 트랙의 범위, 손잡이의 위치와 현재 값을 구분할 수 있어야 합니다. 밝은 사진, 어두운 사진과 단색 배경 위에서 같은 컴포넌트를 비교하면 가독성이 약해지는 부분을 찾기 쉽습니다.

각 설정은 무엇을 바꾸나요?

같은 형태로 여러 질감 비교하기

프레임을 복제해 투명하게 보이는 버전, 배경을 부드럽게 흐린 버전, 색감을 강조한 버전을 나란히 놓으세요. 한 번에 한 설정씩 바꾸면 어떤 값이 결과에 영향을 주는지 파악하기 쉽습니다. 가장 보기 좋은 한 화면에만 맞추기보다 실제로 사용할 배경에서 선택하는 것이 좋습니다.

2부. Pixso에서 액체 유리 슬라이더 디자인하기

픽소(Pixso)에서 프레임과 레이어 효과를 사용해 슬라이더의 모양을 만들고 팀원과 검토할 수 있습니다. AI로 앱 화면을 탐색하는 작업에는 Paico도 살펴볼 수 있습니다.

1. 배경과 프레임 준비하기

새 파일에 작업할 배경 이미지를 넣고, 그 위에 슬라이더 트랙과 손잡이를 배치합니다. 유리 효과를 적용할 부분은 프레임으로 만들고 모서리 반경을 동일하게 설정하세요. 트랙의 시작과 끝, 손잡이의 위치가 구분되는지 먼저 확인합니다.

2. 채우기와 테두리 정리하기

색상과 불투명도를 조정해 배경과 손잡이를 구분합니다. 테두리를 사용한다면 두께와 대비를 확인하세요. 배경이나 브랜드 색이 달라지면 같은 값도 다르게 보이므로 결과 화면을 보며 조절합니다.

3. Liquid Glass 효과 추가하기

대상 프레임을 선택하고 오른쪽 효과 패널에서 새 효과를 추가한 뒤 Liquid Glass를 선택합니다. 배경 위에서 프레임을 움직여 유리 안쪽과 가장자리의 변화를 확인하세요.

4. 굴절과 깊이 조정하기

굴절과 깊이를 조금씩 바꾸며 유리의 경계를 만듭니다. 두 값 중 하나가 너무 낮으면 효과가 거의 보이지 않을 수 있습니다. 손잡이의 위치가 흐려지지 않는 범위에서 광원과 색 분산도 조절하세요.

5. 흐림과 밝기로 대비 맞추기

배경이 복잡하면 흐림을 높여 손잡이를 더 쉽게 구분할 수 있게 합니다. 밝기는 유리 전체의 밝은 정도를, 채도는 색의 선명한 정도를 조절합니다. 각 설정을 바꾼 뒤 텍스트와 아이콘의 대비도 함께 확인하세요.

6. 배경과 상태를 바꿔 검토하기

같은 슬라이더를 밝은 배경과 어두운 배경에 놓고, 최소·중간·최대 위치를 비교합니다. 현재 값과 조작 가능한 영역이 명확한지 확인하고, 팀에서 재사용할 스타일을 컴포넌트로 정리하세요.

참고할 디자인 리소스

액체 유리 디자인 리소스와 아이콘·컴포넌트 리소스에서 형태와 배경 조합을 참고해 보세요.

3부. 자주 묻는 질문

조작이 명확한 슬라이더로 마무리하기

유리 질감을 조절한 뒤에는 손잡이의 위치와 현재 값이 읽히는지 다시 확인하세요. 픽소(Pixso)에서 배경과 상태별 화면을 함께 정리하면 팀원에게 디자인 의도를 더 명확하게 전달할 수 있습니다.