앱을 가로 또는 세로 모드로 제한해야 하는 경우

게시일 21. 8월 2024 작성자 Jan Bunk

화면 방향 고정 옵션과 함께 세로 및 가로 방향으로 회전하는 모바일 앱.

웹사이트를 모바일 앱으로 전환할 때 앱의 화면 방향을 가로 모드나 세로 모드로 고정할지 결정해야 해요. 아니면 사용자가 직접 선택하도록 해야 할까요? 사소한 부분처럼 보일 수 있지만 사용자 경험에 큰 영향을 줄 수 있어요.

이 블로그 게시물에서는 앱에 가장 적합한 방식을 선택할 수 있도록 각 접근 방식의 장점과 단점을 살펴볼게요.

기기 화면 방향 이해하기

결정 과정을 살펴보기 전에 앱 화면 방향의 의미를 간단히 알아볼게요.

  • 세로 모드: 앱이 세로 방향으로 표시돼요(휴대전화를 똑바로 세워 잡는 것과 같아요).
  • 가로 모드: 앱이 가로 방향으로 표시돼요(휴대전화를 옆으로 돌려 잡는 것과 같아요).

앱은 한 가지 모드에서만 작동하도록 설계할 수도 있고, 사용자가 기기를 잡는 방향에 따라 동적으로 전환되도록 설계할 수도 있어요.

앱의 화면 방향을 고정하지 않으면(이 글의 나머지 부분에서 다룰 내용이에요) 사용자가 기기를 돌리는 것만으로 앱의 화면 방향을 바꿀 수 있어요. 단, Android에서는 시스템 설정의 "자동 회전"이 활성화되어 있어야 하고, iOS에서는 화면 방향 잠금이 비활성화되어 있어야 해요. 이러한 설정은 화면 상단의 상태 표시줄을 아래로 내려 여는 빠른 설정에서 확인할 수 있어요.

화면 방향 잠금 설정이 강조 표시된 iOS 빠른 설정 풀다운 메뉴의 스크린샷이에요.
iOS의 화면 방향 잠금 설정이에요.
자동 회전 설정이 강조 표시된 Android 빠른 설정 풀다운 메뉴의 스크린샷이에요.
Android의 자동 회전 설정이에요.

Android에서는 자동 회전이 비활성화된 상태에서 기기를 돌리면 화면 모서리에 작은 회전 버튼도 표시돼요.

화면 오른쪽 하단에 회전 버튼이 표시된 app-control-panel.com Android 앱의 스크린샷이에요.

권장 사항

저희는 두 화면 방향을 모두 허용하는 기본 설정을 유지하는 것이 가장 좋다고 생각해요. 여기에는 여러 이유가 있으며, 크게 다음 두 가지로 나눌 수 있어요.

웹사이트에서 이미 지원하고 있어요

사용자가 웹사이트를 방문할 때는 원하는 방향으로 기기를 잡을 수 있어요. 웹사이트를 세로 모드나 가로 모드로만 고정하는 경우는 극히 드물어요. 따라서 브라우저 사용자는 웹사이트를 두 방향 모두에서 이용할 가능성이 높으며, 웹사이트도 두 방향 모두에서 잘 작동해야 해요.

또한 화면 크기와 화면 비율(화면 너비와 높이의 비율)이 서로 다른 기기가 매우 많아요. 다양한 스마트폰 모델(특히 Samsung 폴더블 휴대전화와 같이 Android 기기는 종류가 매우 다양해요), 태블릿, 노트북, 컴퓨터 모니터를 생각해 보세요. 웹사이트는 이러한 다양한 화면에서 모두 사용할 수 있어야 하며, 일반적으로 이른바 반응형 디자인 원칙을 적용해 이를 구현해요.

반응형 디자인을 사용하여 모든 화면 크기에서 웹사이트가 제대로 작동하도록 만들면 세로 모드와 가로 모드에서도 자동으로 작동해요. 웹사이트가 이미 두 방향을 모두 처리하도록 설계되어 있어야 하므로 앱에서 두 화면 방향을 모두 허용하더라도 추가 유지 관리 비용은 발생하지 않아요.

참고로, 같은 이유로 앱을 스마트폰에서만 사용할 수 있게 하고 태블릿에서는 사용할 수 없게 하거나 그 반대로 제한하는 옵션도 제공하지 않아요. 화면 크기는 연속적으로 다양하기 때문에 스마트폰과 태블릿을 구분하는 명확한 기준이 없어요. 또한 앱에서 차단하려는 기기 유형도 브라우저를 통해 웹사이트에 접속할 수 있어요. 따라서 이런 제한은 앱 사용자에게 불필요한 불이익만 줄 뿐이에요.

최대한의 유연성

일반적으로 앱에는 세로 모드에서 보기 좋은 콘텐츠도 있고 가로 모드에서 더 보기 좋은 콘텐츠도 있어요. 사용자가 화면 방향을 전환할 수 있도록 하면 콘텐츠를 가장 적합한 방식으로 이용할 수 있어요.

마지막으로, 앱 사용자마다 선호하는 방식이 달라요. 예상과 달리 세로 모드보다 가로 모드를 더 좋아하는 사용자도 있을 수 있어요. 여기에는 당장 알아차리기 어려운 여러 이유가 있을 수 있어요. 제가 직접 본 사례 중 하나는 고령층 사용자가 가로 모드를 선호하는 경우였어요. 가로 모드에서는 화면 키보드의 키가 더 커져 입력하기가 쉽기 때문이에요. 이처럼 개인적으로 겪지 않는 접근성 문제를 보완하기 위한 이유는 우리가 미처 생각하지 못할 뿐, 분명 더 많이 있을 거예요.

그러니 사용자가 직접 선택하도록 하세요! 앱 사용자는 가장 적극적으로 참여하는 고객이므로 최상의 경험을 제공해야 하며, 하나의 기기 화면 방향으로 인위적으로 제한해서는 안 돼요.

세로 모드의 장점

  • 일관된 사용자 경험: 대부분의 사용자는 세로 모드로 웹사이트와 앱을 이용하는 데 익숙해요. 세로 모드를 허용하면 친숙한 경험을 제공할 수 있어요.
  • 집중도 높은 상호작용: 세로 모드는 콘텐츠를 읽거나 목록을 스크롤하거나 복잡한 메뉴를 탐색할 때 더 적합한 경우가 많아요.

세로 모드는 블로그, 뉴스 앱, 전자상거래 쇼핑몰처럼 콘텐츠가 많은 앱에 가장 적합해요.

가로 모드의 장점

  • 향상된 미디어 감상 환경: 가로 모드는 더 넓은 화면을 제공하므로 동영상 콘텐츠, 사진 갤러리, 일부 유형의 게임에 적합해요.
  • 더 넓은 화면 공간: 가로 모드에서는 여러 요소를 나란히 표시할 공간이 더 넓은 경우가 많아 분할 화면 기능이나 다중 패널 인터페이스에 적합해요.

가로 모드는 게임, 동영상 스트리밍 앱, 넓은 가로 공간이 필요한 복잡한 대시보드가 있는 앱에 가장 적합해요.

결론

화면 방향 문제에 모든 앱에 통하는 정답은 없어요. 일반적으로는 모든 화면 방향을 허용하는 것이 가장 좋지만, 앱의 목적과 타깃 사용자의 선호도에 따라 결정해야 해요. 앱의 특정 사용 사례가 세로 모드나 가로 모드에 명확하게 적합하다면 해당 방향으로 고정해도 괜찮아요.

궁극적인 목표는 사용자가 어떤 방식으로 앱을 이용하든 직관적이고 즐겁게 느껴지는 앱을 만드는 것이에요.

선택하셨나요? 대시보드에서 화면 방향 잠금 설정을 조정할 수 있어요.

관련 도움말


앱의 외관, 동작 및 기능 제어 항목을 정리한 설정 대시보드.

앱 설정 화면을 표시하고 사용하는 방법

설정 페이지에서는 앱 사용자가 환경설정을 변경하고, 라이선스 확인 및 계정 삭제 같은 기타 기능을 이용할 수 있어요. 앱에서 설정 페이지를 표시하는 방법을 알아보세요.

동의 설정을 거쳐 구성된 웹사이트와 앱으로 전달되는 쿠키 카테고리.

쿠키를 사용하여 로그인 상태 유지하기

웹사이트를 앱으로 전환한 후에는 앱에서 좋은 사용자 경험을 제공해야 해요. 쿠키를 올바르게 설정하여 사용자의 로그인 상태를 유지하는 방법을 알아보세요.

새 버전의 웹사이트가 앱에서 새로고침되는 과정에서 만료된 캐시 파일 세트가 교체되는 모습.

앱의 캐싱 문제를 해결하는 방법

웹사이트의 변경 사항이 앱에 즉시 표시되도록 하려면 웹사이트에 캐싱을 올바르게 설정하는 것이 중요해요.


작성자 Jan Bunk
작성자
Jan Bunk

컴퓨터 과학을 전공한 Jan은 2019년에 app-control-panel.com을 설립하고 웹사이트를 앱으로 변환하는 기반 소프트웨어를 개발했어요. 수백 개의 앱을 출시하며 쌓은 경험과 피드백을 바탕으로 앱 제작, 게시, 유지 관리에 관한 모든 과정을 쉽게 따라 할 수 있는 가이드로 안내하기 위해 노력하고 있어요.