iOS 18 방해 요소 가리기 분석
UI Insight 시리즈
© iOS 18 Beta (Apple)방해 요소 가리기
iOS 18 Beta 버전이 공개되면서 Safari 브라우저에 '방해 요소 가리기'라는 기능이 추가되었습니다. 이번 글에서는 '방해 요소 가리기'의 플로우와 비주얼 · 마이크로인터랙션에 대해 알아보겠습니다.
본 기능은 iOS 18 Beta 소프트웨어 업데이트 된 디바이스에서 확인하실 수 있습니다. 글이 작성된 시점을 기준으로 아래 애플 디벨로퍼 사이트에서 업데이트를 다운로드하여 미리 설치해 보실 수 있으니 참고 바랍니다.
© iOS 18 (Beta)페이지 메뉴 시트 ¹
Safari 브라우저 주소창 좌측 아이콘(A)을 탭 하면 바텀 시트에 '방해 요소 가리기'(B)라는 기능이 추가되었습니다. '방해 요소 가리기' 설명 전, 변화한 페이지 메뉴에 대해 간략히 짚어보겠습니다.
© iOS 18 (Beta)주소창 좌측 아이콘이 기존 모달 방식에서 바텀 시트 방식으로 변경되었으며, 메뉴 아이콘 역시 '읽기 도구'(A)에서 '페이지 메뉴'(B)로 메타포가 변화한 것으로 보입니다. 메뉴에 읽기와 관련된 기능 외 더욱 다양한 기능이 포함되어 편집할 수 있음을 내포하고 있습니다.
© iOS 18 (Beta)페이지 메뉴 시트에서 더 보기 아이콘 탭 시, '페이지 메뉴' 바텀 시트가 올라옵니다. 좌상단 편집 텍스트 버튼 탭 시, 리스트 좌측에 추가 및 제거 버튼이 발생하며, 여기서 바텀 시트 내 메뉴 리스트에 어떤 요소를 노출할지 정할 수 있습니다. 서브 타이틀(A) 레이블 상으로는 즐겨찾기라고 표현되고 있습니다. 완료 시 추가 한 리스트 항목이 바텀 시트(B)에 표시됩니다.
© iOS 18 (Beta)방해 요소 가리기 ²
'방해 요소 가리기'를 탭 하여 실행 시, 상단 주소창은 항목 선택이라는 레이블의 메뉴로 변경됩니다. 브라우저 내 콘텐츠 요소를 탭 하면 '가리기' Primary 버튼이 중앙에 표시되며 해당 영역에 가장자리 역시 아웃라인이 표현됩니다(A). 가리기 버튼 아래의 컴포넌트는 블러 처리되어 본 기능의 가독성을 방해하지 않습니다.
가리기 버튼을 누르면 해당 콘텐츠 컴포넌트가 파티클 효과와 함께 우측으로 사라지며(B), 컴포넌트가 사라진 자리에는 바로 하단의 컴포넌트가 전환 없이 바로 올라와 자리를 채웁니다. 가리기 실행 시, Disable 상태인 '완료' 버튼이 Active 상태로 전환되며, 탭할 시 컴포넌트가 사라진 현재 상태를 유지하게 됩니다.
파티클 이펙트 재구현이러한 파티클 이펙트의 개발상 구현 과정은 모르지만, After Effect로나마 비주얼적인 재구현을 해보았습니다. Shatter 효과를 통해 오른쪽 방향으로 물리적인 움직임이 나타나도록 하였습니다. 실제 방해 요소 가리기 효과와는 가속도 차이가 미세하게나마 있어 보입니다.
© iOS 18 (Beta)방해 요소 가리기: 완료 후 ³
'방해 요소 가리기'에서 가리기 적용 시, 상단 메뉴에 현재 가려진 항목의 개수가 표현됩니다(A). 본 상태에서 우상단 완료 버튼을 눌러 적용 시, 브라우저 주소창 좌측에 View 아이콘이 파란 색상으로 나타나(B), 현재 가려진 항목이 있고 컨트롤할 수 있다는 어포던스 언뜻 봐도 눈에 띌 만큼 강하게 제공합니다.
해당 버튼은 좌측 페이지 메뉴 버튼(C)과 동일한 기능을 수행하며, 탭할 시의 Pressed 인터랙션 역시 동일하게 작동됩니다. 콘텐츠 항목이 가려진다는 강력한 기능을 수행하는 만큼, 강한 어포던스를 제공한다는 점이 흥미롭습니다.
© iOS 18 (Beta)방해 요소 가리기: 가려진 항목 표시 ⁴
페이지 메뉴 버튼(A)을 다시 탭할 시, 바텀 시트가 다시 나타나는데 '가려진 항목 표시'(B)라는 리스트가 추가됩니다. 본 리스트를 탭할 시, 한 번 더 동작을 수행하기 전 확인하는 모달(C)이 발생합니다. 표시 버튼 탭 시, 방해 요소 가리기 이전의 상태로 전환 효과 없이 바로 전환됩니다.
© iOS 18 (Beta)그 외 ⁵
다만 기존 주소창 컴포넌트와 방해 요소 가리기 컴포넌트의 모서리 값이 미묘하게 다른 점이 눈에 보입니다. 또한 주소창에 버튼이 들어가게 되면서, 버튼 모서리 값이 주소창의 마진에 따라 위치하기 어려워 보이기도 합니다. 이러한 부분들이 정식 iOS 18에서 어떻게 개선될지 확인해 보는 것도 좋겠습니다.
마치며
© iOS 18 (Beta)같은 비주얼이어도 그래픽 디자인과 GUI에서의 그 무게는 다릅니다. GUI 단에서 완성도 높은 파티클 이펙트를 구현하여 높은 사용자 경험을 제공한다는 점에서 곧 공개될 iOS 18의 반응이 기대됩니다. 또한 이러한 파티클 이펙트가 기존 iOS의 그래픽 기조인 블러와 함께 새로운 아이덴티티로 자리 잡을 수 있지 않을까 기대됩니다.
같은 마이크로인터랙션도 어떤 플로우에 어떤 방식으로 적용되냐에 따라 그 완성도가 차이 날 수 있다는 좋은 사례로 남을 것 같습니다.
사용성 (★ 4.0)
페이지 메뉴가 모달에서 바텀 시트 방식으로 변화하면서, 비교적 더 복잡해졌다고 느꼈습니다. 읽기에 필요한 도구를 모은 '읽기 도구'와 달리 어떠한 항목이 메뉴에 있는지 유추하기 어렵고, 더보기로 진입해야 전체 메뉴를 리스트 형태로 볼 수 있기 때문입니다.
직관성 (★ 4.0)
메뉴의 직관성은 높지 않으나, 기능 자체의 직관성은 높습니다. 가려진 항목의 유무 및 동작 방식에 대해서는 직관적으로 설명하고 있습니다.
유용성 (★ 4.5)
사용자에게 광고 노출을 목표로 하는 페이지의 경우, 광고 배너가 콘텐츠 시야를 가리거나 심지어 사용자의 행동을 방해하기도 합니다. 이러한 실제 케이스에 사용될 수 있는 상당히 유용한 기능이라고 생각합니다. 기능적으로도 훌륭하지만, 악성 광고 및 오류상황에 대처하기 수월해질 것 같습니다.
비주얼 (★ 5.0)
경험을 방해하지 않는 선에서 구현한 비주얼로는 최상의 마이크로인터랙션인 것 같습니다. 파티클 이펙트를 사용하면서도, 그다음 동작은 전환 효과 없이 직관적으로 보여줌으로써 복잡하지 않고 직관적으로 표현하였습니다. 또한 이러한 효과가 실제 제품에 문제없이 녹아들었다는 점에서 이례적으로 좋은 비주얼 요소라고 생각합니다.
