모바일 기기를 회전하여 화면을 테스트하고 레이아웃이 깨끗하게 적응하거나 무너지는 순간이 있습니다. 텍스트가 다시 흐르거나 버튼이 뛰어오르거나 모달이 갑자기 잘못된 영역을 덮거나 비디오 플레이어가 예상대로 동작하는 순간입니다. 그 작은 순간이 포트레이트 방향입니다. 포트레이트 방향 디자인 용어에서 벗어나 제품 결정으로 변합니다.
모바일을 위한 앱을 개발할 때는 portrait orientation에 대한 명확한 답변이 필요합니다. portrait orientation이란?클래스룸에서 배운 정의 외에도 개발자 버전의 portrait orientation을 이해해야 합니다. 레이아웃에 어떤 영향을 미치는지, 회전을 지원해야 하는지, 회전을.lock해야 하는지, 웹 앱, 네이티브 앱, Capacitor 프로젝트에서 portrait orientation을 다루어야 하는 방법 등이 모두 포함됩니다.
목차
- portrait orientation을 이해하는 방법
- portrait vs landscape: 기본적인 비교
- 다양한 매체에서 일반적인 사용 사례
- 웹에서 방향 관리
- 모바일 앱에서 방향 관리
- 스크린 오리엔테이션을 위한 UX 최적화
포트레이트 오리엔테이션 이해
사용자는 스크린이 회전할 때 오리엔테이션을 먼저 알아차립니다. 개발자는 회전이 인터페이스를 깨트릴 때 오리엔테이션을 알아차립니다.
포트레이트 오리엔테이션 의 의미는 가로보다 세로가 더 긴 프레임입니다.그것은 시각 예술에서 시작되었습니다. 사람의 얼굴과 상체의 초상화는 일반적으로 세로로 프레임되었습니다. 그 동일한 개념은 페이지 디자인, 사진술, 디지털 인터페이스에 이르렀습니다. 그 보다 광범위한 역사에 대한 좋은 참고 자료는 Wikipedia의 오리엔테이션 개요 페이지.
빌더들에게 중요한 것은 포트레이트 오리엔테이션은 하나의 스크린 크기, 하나의 장치, 하나의 파일 형식과 관련이 없습니다. 그것은 모양에 대한 규칙입니다. 높이가 너비보다 크면 포트레이트입니다.
제품 작업에서 왜 중요합니까
포트레이트는 모바일에서 실용적인 기본값이 되었던 이유는 사람들이 자연스럽게 핸드폰을 수직으로 잡기 때문입니다. 그것은 스크롤링, 손가락의 범위, 읽기 흐름, 양식 디자인, 네비게이션 위치에 영향을 줍니다.
모바일 앱 사용자 경험 결정과 직접 연결된 이유 중 하나는 모바일 앱 사용자 경험 결정에 직접 연결된 이유그것은 단순한 시각적 스타일링과 관련된 것만은 아니다.
실용적인 규칙: 포트레이트를 레이아웃 컨텍스트로 다루어야 한다.
주니어 개발자들이 혼동하는 이유
일반적으로 혼동하는 것은 방향 및 해상도 또는 HTML 텍스트 프래그먼트 (parent key `alternatives_cta_questions`). 페이지/영역: Capacitor live-update 대안 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. 보존: Capgo 제품/브랜드 및 개발자 용어. 메시지 키 `alternatives_cta_questions` (대안 CTA 질문). | HTML 텍스트 프래그먼트 (parent key `appflow_cta_questions`). 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. 보존: Capgo 제품/브랜드 및 개발자 용어. 메시지 키 `appflow_cta_questions` (Appflow CTA 질문). | HTML 텍스트 프래그먼트 (parent key `capwesome_cta_questions`). 페이지/영역: Capawesome 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. 보존: Capgo 제품/브랜드 및 개발자 용어. 메시지 키 `capwesome_cta_questions` (Capwesome CTA 질문). | HTML 텍스트 프래그먼트 (parent key `consulting_faq_subtitle`). 페이지/영역: 컨설팅 서비스 페이지. 역할: 섹션 서브 타이틀 또는 태그 라인. 보존: Capgo 제품/브랜드 및 개발자 용어. 메시지 키 `consulting_faq_subtitle` (컨설팅 FAQ 서브 타이틀). | 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 보존: Capgo 제품/브랜드 및 개발자 용어. 메시지 키 `appflow_plugins_or` (Appflow 플러그인 또는).그것들은 관련이 있지만 같은 것이 아니다.
- 방향 길이가 더 긴 쪽
- 해상도 각 pixel이 존재하는 각 축
- 비율 가로와 세로의 관계
포트레이트 모드의 태블릿과 포트레이트 모드의 스마트폰은 크기가 매우 다를 수 있지만 여전히 같은 방향을 공유한다. 그래서 반응형 UI 논리는 '세로가 가로보다 더 크다?'라는 질문을 먼저 해야 한다.
포트레이트 vs 랜드스케이프 기본 비교
이것을 단순하게 생각하는 방법은 구성으로 생각하는 것이다. 포트레이트 그림은 사람이나 다른 높은 주제에 주목한다. 가로 그림은 너비, 맥락, 및 주변 공간을 캡처한다. UI도 마찬가지이다.
이미징 및 UI 디자인에서 포트레이트 방향은 높이는 너비보다 더 크다이러한 경우, 더 긴 변은 수직입니다. 이는 수평 방향의 반대입니다. SLR Lounge의 사전 항목 기술적 정의와 왜 이러한 모양이 세로 주제와 수직 구조에 적합한지 설명합니다.
한 표의 차이
| 방향 | 형태 | 최적 | 일반적인 효과 |
|---|---|---|---|
| 면식 | 세로보다 더 높다 | 피드, 양식, 읽기, 세로 주제 | __CAPGO_KEEP_0__ |
| __CAPGO_KEEP_1__ | __CAPGO_KEEP_2__ | __CAPGO_KEEP_3__ | __CAPGO_KEEP_4__ |
__CAPGO_KEEP_5__
__CAPGO_KEEP_6__
__CAPGO_KEEP_7__
__CAPGO_KEEP_8__
__CAPGO_KEEP_9__
__CAPGO_KEEP_10__
__CAPGO_KEEP_11__
예를 들어:
- 포트레이트 모드에서, 대시보드가 카드를 단일 열로 쌓을 수 있습니다.
- 보다 넓은 방향에서, 동일한 대시보드는 여러 열로 전환하고 필터 또는 사이드 패널을 표시할 수 있습니다.
- 포트레이트 모드에서, 결제 화면은 큰 탭 대상과 단일 흐름을 우선시할 수 있습니다.
- 보다 넓은 방향에서, 동일한 화면은 field가 너무 세로로 압축되어 느껴질 수 있습니다.
모바일 레이아웃에 몰입하는 개발자들은 또한 에지 처리, 안전 영역, 풀 스크린 동작과 같은 세부 사항을 고려해야 합니다. 만약 그 세부 사항을 조정하고 있다면 Capacitor 에지 투 에지 디스플레이 설정 사용자가 사용 가능한 공간을 어떻게 인식하는지에 따라 방향이 변경되기 때문에
다양한 매체에서 일반적인 사용 사례
포트레이트 방향은 모바일 화면에서만 나타나는 것이 아니다. 그것은 소프트웨어에서 시작되지 않았고, 소프트웨어에만 국한되지 않는 개념이다.
사진 촬영 및 인쇄
전문가 사진은 명백한 예이다. 수직 프레임은 사람의 얼굴과 몸체를 더 잘 맞출 수 있는 넓은 프레임보다 사람의 얼굴과 몸체를 더 잘 맞춘다. fashion 사진, 책 표지, 포스터, 잡지 표지에도 같은 논리가 적용된다.
인쇄 디자인도 읽기 경험을 위아래로 이동시키기 위해 좁은 열거형에서 포트레이트를 사용한다. 이 모양은 눈이 자연스럽게 페이지를 아래로 이동하는 것을 돕는다.
문서 및 일상 통신
대부분의 보고서, 이력서, 편지, 내부 문서는 포트레이트로 설계된다. 그것은 포트레이트가 항상 더 좋다는 것이 아니라는 것이다. 수직 페이지는 문단, 제목, 목록, 서명과 같은 읽기 시퀀스에 잘 작동한다.
PDF를 내보내고 넓은 표가 읽을 수 없게 된 경우, 포트레이트의 한계를 보았을 것이다. 어떤 콘텐츠는 가로 형식으로 더 잘 표현된다. 프레임을 콘텐츠 구조와 맞추는 것이 중요하다.
모바일 제품 및 앱 흐름
이러한 상황에서 포트레이트는 많은 팀의 기본적인 정신 모델이 된다.
사용자가 반복적으로 열리는 화면을 생각해 보라:
- 모바일 앱의 방향성 채팅 앱:
- 메시지가 수직으로 쌓입니다. 사회 앱:
- 게시글, 댓글, 동영상은 수직으로 흐릅니다. retail 앱:
- 검색 결과와 제품 목록은 아래로 스크롤합니다. 은행 앱:
잔액, 거래, 확인 흐름은 일반적으로 수직 섹션으로 배열됩니다.
이 패턴은 우연이 아닙니다. 포트레이트는 한 손으로 사용, 손가락 스크롤, 선형 작업 완료를 지원합니다.
많은 모바일 UI가 직관적이게 느껴지는 이유는 인터페이스가 우측 기기 사용을 가정하기 전에 다른 것을 가정하지 않기 때문입니다.
모든 화면이 포트레이트로 유지되어야 하는 것은 아닙니다. 미디어 뷰어, 지도, 큰 차트, 카메라 기반 워크플로우는 더 넓은 프레임에서 이익을 얻습니다. 그러나 일상적인 작업 흐름에서 포트레이트는 사용자가 시작하는 곳입니다.
웹에서 흔히 발생하는 버그는 처음에는 작아 보일 수 있습니다. 앱이 수평 방향으로 정렬된 뷰포트에서 깨끗하게 읽히고, 사용자가 기기를 회전하면 차트가 넘치거나, 사이드바가 잘못된 브레이크 포인트에 나타나거나, 키보드가 제출 버튼을 가리게 됩니다. 웹에서 방향은 정말 상태에 관한 것입니다. 뷰포트의 모양이 바뀌었고, UI가 예측 가능한 방식으로 반응해야 합니다.
개발자에게는 두 가지 작업을 분리하는 것이 중요합니다. CSS는 레이아웃 변경을 처리하고, JavaScript는 동작 변경을 처리합니다. 모바일용으로 같은 프로젝트를 패키징할 때도 이 웹层의 중요성이 유지됩니다. Capacitor를 사용하여 웹 앱을 모바일 앱으로 변환하는 것은 좋은 웹 방향 처리의 필요성을 제거하지는 않습니다. 그 foundation의 중요성을 더 강조합니다. 플랫폼은 두 가지 주요 도구를 제공합니다. Screen Orientation __CAPGO_KEEP_0__는 방향 유형과 변경 이벤트를 노출하고, Web App Manifest는 설치된 앱이 선호하는 수평 방향 모드를 선언할 수 있습니다.
The platform gives you two main tools. The Screen Orientation API exposes orientation type and change events, and the Web App Manifest lets an installed app declare a preferred upright mode such as portrait, portrait-primaryCSS를 사용하여 레이아웃이 적응해야 할 때 portrait-secondaryCSS부터 시작하세요. 가장 저렴하고 신뢰할 수 있는 방법으로 너비와 높이가 역할을 바꾸면 반응할 수 있습니다. 이것은 화면 모양의 점진적인 향상과 같습니다. 기본으로 좁은 수평 방향 레이아웃을 시작하고, 뷰포트가 더 넓어지면 secondary UI에 공간을 추가하세요..
시간을 절약하는 몇 가지 관행이 있습니다:
Start with CSS. It is the cheapest and most reliable way to respond when width and height swap roles.
/* Default portrait-friendly layout */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}This works like progressive enhancement for screen shape. Begin with the narrow, upright layout as the default. Then add room for secondary UI only when the viewport becomes wider.
A few practices save time later:
- __CAPGO_KEEP_0__ 애플리케이션을 주로 수직으로 사용하는 경우 기본 레이아웃으로 설정하세요.
- 고정된 높이를 피하세요. 장치가 회전할 때 사용할 수 있는 수직 공간이 급격히 줄어들 수 있기 때문입니다. 브라우저 UI나 가상 키보드가 표시될 때 especialmente.
- 실제 상호 작용 상태를 테스트하세요. 폼, 스틱이 있는 헤더, 하단 시트는 회전 중에 실패할 수 있습니다. 정적 스크린샷에서는 그렇지 않습니다.
JavaScript를 사용하여 반응이 필요할 때 사용하세요.
CSS는 박스를 재배치할 수 있지만, 차트를 다시 빌드하거나 제스처 핸들러를 초기화하는 것을 결정할 수 없습니다.
JavaScript를 사용하여 상태 있는 UI가 회전과 관련된 경우 사용하세요.
function logOrientation() {
const type = screen.orientation?.type;
console.log('Current orientation:', type);
}
logOrientation();
screen.orientation?.addEventListener('change', () => {
logOrientation();
const isPortrait = window.innerHeight > window.innerWidth;
if (isPortrait) {
document.body.classList.remove('wide-mode');
} else {
document.body.classList.add('wide-mode');
}
});이 패턴은 캔버스, 미디어 컨트롤, 지도 뷰, 커스텀 네비게이션 셸과 같은 경우 유용합니다. 회전이 데이터 표시 또는 상호 작용 논리가 변경되는 경우 JavaScript가 반응해야 합니다. 회전이 공간 또는 위치만 변경되는 경우 CSS가 처리할 수 있습니다.
CSS가 이미 잘 처리하는 레이아웃 결정에 JavaScript를 사용하지 마세요. 이는 초보 팀이 복잡성을 피하는 데 도움이 됩니다.
PWA에 대한 선호하는 방향을 설정하세요.
만약 PWA가 주로 수직 사용을 위해 설계되었다면, manifest에서 이를 선언하세요.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}이것은 선호도이며, 반응형 디자인의 대체가 아닙니다. 브라우저가 지원하는 컨텍스트에서 설치된 앱이 어떻게 열리고 행동할지 이해하는 데 도움이 됩니다.
브라우저가 허용할 때 런타임에 오리엔테이션 잠금을 요청할 수도 있습니다:
async function lockPortrait() {
try {
await screen.orientation.lock('portrait');
console.log('Orientation locked');
} catch (err) {
console.log('Lock failed:', err);
}
}이것을 신중하게 사용하세요. 좋은 규칙은 회전이 작업 자체를 깨트릴 때만 잠금을 걸 것이며, 유도된 캡처 흐름이나 물리적 정렬 요구 사항이 있는 화면과 같은 경우입니다. 대부분의 다른 경우, 인터페이스를 적응시키는 것이 더 나은 엔지니어링 선택입니다. 이는 장치와 사용자를 모두 존중합니다.
모바일 앱의 오리엔테이션 관리
모바일 앱은 브라우저 탭보다 더 많은 것을 할 수 있습니다. 앱 수준에서 기본 화면 방향을 선언하고, 단일 화면의 동작을 변경할 때 작업이 요구하는 경우에는 더 많은 제어를 제공합니다. 그러나 이것은 팀이 회전을 너무 광범위하게 제한하는 일반적인 실수를 유발합니다. 단순한 앱은 rigidity로 느껴집니다.
좋은 정신 모델이 여기에서 도움이 됩니다. 앱 전체 설정은 기본 정책입니다. 화면 수준 code는 예외层입니다. 정책을 광범위한 의도에 사용하고, 사용자가 작업을 마무리하려고 할 때 회전하는 장치가 작업을 방해하지 않도록 예외를 사용하세요.
자연 플랫폼 제어
On Android에서 오리엔테이션은 종종 AndroidManifest.xml 활동에 대한 활동:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />이것은 상위 수준의 구성 플래그와 같이 작동합니다. 그것은 단순하고 예측할 수 있으며, 액티비티 전체에 걸쳐 쉽게 적용할 수 있습니다. 그러나 범위의 트레이드 오프는 있습니다. 만약에 한 화면만 세로 모드가 필요하다면, 전역적으로 적용하는 규칙은 일반적으로 너무 무겁습니다.
On iOS에서, 지원되는 방향은 Xcode를 통해 대상 설정과 앱 메타데이터를 통해 설정됩니다. 앱이 일반적으로 허용하는 것을 정의할 수 있고, 특정 화면이 더 엄격한 요구 사항을 가질 때, 화면 컨트롤러의 동작을 세부적으로 조정할 수 있습니다.
That split matters for cross-platform teams. Native config answers, “What should this app generally allow?” Runtime code answers, “What should this screen do right now?”
프로그램적 제어는 Capacitor 앱에서
만약에 Capacitor으로 빌드한다면, 동적 제어는 일반적으로 code에 속합니다. 그것은 화면이 활성화될 때 제어를 적용하고, 화면이 더 이상 활성화되지 않을 때 제어를 제거하는 패턴입니다. 예를 들어, 로그인 화면은 세로 모드가 더 편리할 수 있습니다. 하지만 미디어 화면이나 카메라 흐름은 사용자가 장치로 어떻게 cầm는지에 따라 회전을 허용해야 할 수 있습니다.
플러그인은 그 논리를 읽을 수 있게 해주고, 네이티브 플러밍을 피할 수 있게 해줍니다. __CAPGO_KEEP_0__ 앱에서 __CAPGO_KEEP_1__ 화면 방향 플러그인은 현재 방향을 읽을 수 있고, 특정 모드(예를 들어, 세로 모드)에 대한 제한을 적용하고, 사용자가 다시 유연한 화면으로 돌아올 때 제한을 제거할 수 있습니다. Capacitor screen orientation plugin for Capacitor apps __CAPGO_KEEP_0__
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
async function lockLoginScreen() {
await ScreenOrientation.lock({ orientation: 'portrait' });
}
async function unlockForMedia() {
await ScreenOrientation.unlock();
}
async function checkCurrentOrientation() {
const result = await ScreenOrientation.orientation();
console.log(result);
}__CAPGO_KEEP_1__
화면에 따라 제한을 신중하게 선택하세요.
입력, 정렬 또는 사용자 초점이 방해받지 않도록 회전이 발생할 경우 고정된 수평 모드를 사용하세요.
일반적인 예시로는 다음과 같습니다.
- 인증 화면: 사용자가 입력하는 동안 입력 필드가 안정적입니다.
- 결제 및 확인 단계: 고객의 주의가 집중된 작업 중 레이아웃 변경이 적습니다.
- 키오스크 또는 안내된 워크플로: 인터페이스가 일관된 하나의 표현을 필요로 합니다.
장치 방향을 자유롭게 회전할 때 추가 너비 또는 다른 손잡이가 작업을 도와주면 좋습니다.
미디어 재생, 지도, 게임, 카메라 뷰, 밀집된 데이터 화면과 같은 일반적인 예시입니다.
초보 팀의 유용한 규칙은 간단합니다. 장치 방향이 변경되면만 간격이 달라질 경우 레이아웃 시스템이 처리할 수 있습니다. 그러나 장치 방향이 변경되면 작업 방식이 달라질 경우 화면 단위의 방향 code이 정당화될 수 있습니다.
Capgo는 실제로 사용되는 이유로 언급됩니다. Capacitor 프로젝트에서 방향 제어는 작은 UI 세부 사항으로 시작하여 앱 동작으로 변하는 플랫폼 기능 중 하나입니다. 동작처럼 다루세요. 기본값을 유연하게 유지하고 제한을 가급적이면 적게, 화면이 더 이상 그 필요성을 느끼지 않을 때 제한을 제거하세요.
화면 방향에 대한 UX 최적화
화면 방향 처리는 UX 결정에서 기술 결정으로 이어집니다. code은 일반적으로 직관적입니다. 하지만 자연스럽게 느껴지는 동작을 선택하는 것이 어려운 부분입니다.
단축된 체크리스트를 사용하세요:
- 주요 사용자 환경을 고려하세요: 대부분의 사용자가 수직으로 시작할 경우, 포트레이트 인터페이스의 강력한 버전을 만드세요.
- 추가 너비가 가치가 있는 화면 모드에서 지원하세요: 너비가 더 필요한 화면에서 회전을 막지 마세요.
- 명확한 이유로만 잠금하세요: 폼, 결제, 보안 흐름과 같은 경우 잠금이 정당화될 수 있습니다. 콘텐츠 화면은 일반적으로 그렇지 않습니다.
- 회전 시 상태를 유지하세요: 사용자는 입력, 스크롤 위치, 선택한 탭을 잃지 않아야 합니다.
- 실제 기기에서 양쪽 방향성을 테스트하세요: 시뮬레이터에서는 어색한 전환, 키보드 겹침, 그리고 안전 영역 문제를 놓치게 됩니다.
더 광범위한 레이아웃 결정에 대해 Capacitor 앱에 대한 전면 UI 및 UX 지침 __CAPGO_KEEP_0__ 앱의 레이아웃을 테스트할 때는 같은 화면이 종종 다른 기기 크기와 플랫폼 규약에 따라 느껴질 수 있기 때문에 잘 맞습니다.
주요 takeaway은 간단합니다. 포트레이트 방향성에 대한 질문에 대한 답은 단순히 "수직"만이 아닙니다. 그것은 프레임 규칙, 레이아웃 상태, 그리고 사용자 예상입니다. 좋은 앱은 그것을 그대로 다룹니다.
Capacitor 앱을 배포하고 있으며, 제어된 방향성 동작과 빠른 릴리스 후 수정이 필요하다면 Capgo Capgo
