[iOS] 사이드 바의 사용성 개선기

사이드바 UI 구현

사이드 바를 통해 프로필 수정 화면, 내가 작성한 글 목록 화면, 설정 화면으로 이동할 수 있습니다. 이와 같은 화면들을 사이드 바로 연결해서 구현한 이유는 처음에 고려했었던 탭바에서 하나의 탭으로 가져가기에는 비교적 작은 태스크 규모였기때문에 단일 메인 화면에 사이드 바로 연결을 구현했습니다.

SideBarVC와 HomeVC를 childVC로 ContainerVC를 parentVC로 진행하였습니다. ContainerVC에서는 HomeVC와 SideBarVC의 전환해주는 역할 담당하면서 HomeVC와 SideBarVC 사이에는 의존적인 관계를 없앨 수 있었습니다. 두 VC간의 의존성이 사라지면서 코드의 모듈화와 유연성을 높일 수 있었습니다.

HomeVC에서는 메뉴가 열리는 버튼이 눌리면 눌렸다는 사실만 RootContainerVC로 전달해줍니다.

final HomeVC: UIViewController {
// ...
    @objc private func menuButtonTapped() {
        delegate?.sideMenuTapped()
    }
// ...
}

RootContainerVC에서는 HomeViewDelegate를 채택해 사이드바 버튼이 눌렸을 때의 액션을 정의해줍니다.

extension RootContainerVC: HomeViewDelegate {
    func sideMenuTapped() {
        switch sideMenuState {
        case .closed: openSideMenu()
        case .opened: closeSideMenu()
        }
    }
    
}

사이드바 개선

기존 사이드바 동작

홈에서 네비게이션 바의 왼쪽 상단 버튼을 누르면 사이드바가 나옵니다. 사이드바로 전환되면서 여백은 그림자뷰로 가려져 홈뷰가 어두운 반투명화면으로 보입니다.

개선 점

유저 피드백을 통해 사용자들이 앱을 보다 편리하게 이용할 수 있도록, 사이드 바를 활성화하는 간편한 방식을 추가하고자 했습니다. 기존의 사이드 바 버튼을 터치하여 열고 닫을 수 있지만, 좀더 직관적이고 자연스러운 경험을 위해 스와이프 제스쳐를 추가했습니다.

개선 과정

처음에는 UISwipeGestureRecognizer를 고려했지만, 결국 UIScreenEdgePanGestureRecognizer를 사용하여 유저의 스와이프 제스쳐를 감지하였습니다. 이 방식은 화면 가장자리에서의 스와이프 동작을 감지하는 특성을 활용하여, 유저가 좌측 상단의 사이드 바를 열기 위한 행동으로 가장 자연스럽게 느껴질 것으로 예상했습니다. 또한, 메인 화면이 컬렉션 뷰이고 아래로 스크롤되는 특성을 고려하여 UIScreenEdgePanGestureRecognizer가 더 적절한 선택이었다고 판단했습니다. 이를 통해 사용자들은 화면 가장자리에서의 스와이프로 간편하게 사이드 바를 열 수 있으며, 동시에 메인 화면의 스크롤과의 간섭을 최소화할 수 있게 되었습니다.

let edgePanGesture = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgePanGestureHandler(_:)))
edgePanGesture.edges = .left
view.addGestureRecognizer(edgePanGesture)

반대로 사이드 바를 닫을 때는 화면 가장자리에서부터 스와이프하지 않고, 그림자 뷰 영역 안에서 스와이프를 할 것이라고 예상했고, 스크롤 뷰의 방해도 없기때문에 UISwipeGestureRecognizer를 이용해 사이드 바를 닫을 수 있도록 구현했습니다.

let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(shadowTouched))
swipeGesture.direction = .left
shadowView.addGestureRecognizer(swipeGesture)

스크린샷

참조

#141 사이드바 UI 작업 관련 PR
#345 사이드바 개선 작업 관련 PR