휴대폰을 회전하여 화면을 테스트하고 레이아웃이 깨끗하게 적응하거나 무너지는 순간이 있습니다. 텍스트가 다시 흐르며, 버튼이 뛰어오르며, 모달이 갑자기 잘못된 영역을 덮거나, 비디오 플레이어가 예상대로 작동하는 순간이 있습니다. 포트레이트 방향 디자인 용어에서 포트레이트 방향이 멈추고 제품 결정이 됩니다.
모바일을 위한 제품을 개발할 때, 명확한 답변이 필요합니다. 포트레이트 방향이란 무엇인가. Not just the classroom definition, but the developer version. How it affects layout, when to support rotation, when to lock it, and how to handle it in web apps, native apps, and Capacitor projects without creating a brittle UX.
목차
- 포트레이트 방향 이해하기
- 포트레이트 vs 랜드스케이프 기본 비교
- 다양한 매체에서 공통 사용 사례
- 웹에서 방향을 처리하는 방법
- 모바일 앱에서 방향을 관리하는 방법
- 스크린 방향에 대한 UX 최적화
포트레이트 방향 이해
사용자는 화면이 회전할 때 처음으로 방향을 알게 됩니다. 개발자는 회전이 인터페이스를 깨트릴 때 방향을 알게 됩니다.
세로 방향 세로 방향이란 너비보다 높이가 더 큰 경우입니다. 그게 핵심입니다. 그것은 시각 예술에서 시작되었습니다. 사람의 얼굴과 상체의 초상화는 일반적으로 세로로 프레임이었습니다. 그 동일한 개념이 페이지 디자인, 사진술, 디지털 인터페이스에 전달되었습니다. 그 보다 광범위한 역사에 대한 좋은 참고 자료는 위키백과에서 페이지 방향 개요를 참조하세요.
빌더에게 중요한 것은 세로 방향이 하나의 화면 크기, 하나의 장치, 하나의 파일 형식과 관련이 없다는 것입니다. 그것은 모양에 대한 규칙입니다. 높이가 너비보다 크면 세로 방향입니다.
제품 작업에서 왜 그것이 중요합니까
세로 방향이 모바일에서 실용적인 기본값이 된 이유는 사용자가 스마트폰을 수직으로 잡는 방식이 자연스럽기 때문입니다. 그것은 스크롤링, 손가락의 범위, 읽기 흐름, 양식 디자인, 네비게이션 위치와 관련이 있습니다.
피드, 기사 보기, 설정 화면, 또는 채팅 쓰레드가 일반적으로 수직 프레임에서 자연스럽게 읽히는 이유가 하나입니다. 그것이 하나의 이유로 방향 선택이 모바일 앱 사용자 경험 결정과 직접 연결됩니다., visual 스타일링만 아니라.
실용적인 규칙: 포트레이트를 레이아웃 컨텍스트로 대우하라, 단순히 기기 위치만으로는.
주니어 개발자들이 자주 혼란스럽게 되는 곳
일반적인 혼란은 방향 과 해상도 또는 비율관련이 있지만
- 같은 것은 아니다. __CAPGO_KEEP_0__
- 해상도 __CAPGO_KEEP_0__
- 해상도 __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0____CAPGO_KEEP_0__ SLR Lounge의 용어 사전 항목 높은 주제와 수직 구조에 맞는 모양의 기술적 정의와 왜 그것이 맞는지 설명합니다.
한 표의 차이
| 방향 | 형태 | 최적 적합 | 일반적인 효과 |
|---|---|---|---|
| 세로로 주목을 집중시키는 | 가로보다 높다 | RSS, 양식, 읽기, 높은 주제 | 주의를 세로로 집중시킵니다. |
| 가로 | __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가 너무 세로로 압축되면 불편할 수 있습니다.모바일 레이아웃에 집중하는 개발자도 edge handling, safe areas, 그리고 full-screen behavior에 대해 생각해야 합니다. 그 세부 사항을 조정하고 있다면
- __CAPGO_KEEP_0__ edge-to-edge 디스플레이 설정사용자가 사용 가능한 공간을 인식하는 방식이 변하는 것은 동일한 대화의 일부입니다.
다양한 매체에서 일반적인 사용 사례 Capacitor edge-to-edge display setup Portrait orientation shows up in more places than mobile screens. That matters because the concept didn’t start in software, and it doesn’t belong only to software.
Common Use Cases Across Different Media
In portrait, a payment form may prioritize large tap targets and one clear flow.
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
- __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
- Social apps: __CAPGO_KEEP_0__
- posts, comments, and reels are consumed in an upright flow. Retail apps:
- __CAPGO_KEEP_0__ search results and product lists scroll downward.
Banking apps:
__CAPGO_KEEP_0__
balances, transactions, and confirmation flows are usually arranged in vertical sections.
Those patterns aren’t accidents. Portrait supports one-handed use, thumb scrolling, and linear task completion.
A lot of mobile UI feels intuitive because the interface assumes an upright device before it assumes anything else.
That doesn’t mean every screen should stay portrait. Media viewers, maps, large charts, and camera-based workflows often benefit from wider framing. But for everyday task flow, portrait is usually where users begin. Capacitor을 사용하여 웹 앱을 모바일 앱으로 변환하는 데 사용하는 Capacitor은 웹 앱의 방향을 처리하는 데 필요한 필요성을 제거하지 않습니다. 이 foundation은 더 중요합니다. Capgo 플랫폼은 두 가지 주요 도구를 제공합니다. 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-primary를 선언할 수 있습니다. MDN은 Web App Manifest 방향 참조에서 이러한 매니페스트 값을 문서화합니다. portrait-secondaryCSS를 사용하여 레이아웃이 적응해야 할 때 사용하십시오. CSS를 먼저 사용하십시오. 가장 저렴하고 신뢰할 수 있는 방법으로 너비와 높이가 역할을 바꾸면 반응하십시오..
화면 모양에 대한 프로그레시브 향상과 같은 방식으로 작동합니다. 기본으로 좁은 수평 레이아웃을 시작하고 뷰포트가 더 넓어질 때만 두 번째 UI에 공간을 추가하십시오.
시간을 절약하는 몇 가지 관행이 있습니다.
/* 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;
}
}기본 모드에서 시작하십시오.
주로 앱을 수평으로 사용하는 사람들에게 기본 레이아웃을 사용하십시오.
- Start with CSS. It is the cheapest and most reliable way to respond when width and height swap roles. 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.
- __CAPGO_KEEP_0__ 가변적인 높이를 피하세요:
- 기기 회전 시 사용 가능한 수직 공간이 빠르게 줄어들 수 있으며, 브라우저 UI 또는 가상 키보드가 표시될 때尤하게 그렇습니다. 실제 상호 작용 상태를 테스트하세요:
폼, 스틱이 헤더 및 하단 시트가 회전 시 실패하는 경우, 정적 스크린샷에서는 그렇지 않습니다.
JavaScript를 사용하세요:
CSS는 박스를 재배치할 수 있지만, 차트를 다시 빌드하거나 제스처 핸들러를 초기화하는 것을 결정할 수 없습니다.
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를 사용하세요:
기기 회전이 상태 기반 UI에 영향을 줄 경우.
이 패턴은 캔버스, 미디어 컨트롤, 지도 뷰 및 커스텀 네비게이션 셸에 유용합니다.
기기 회전이 데이터 표시 또는 상호 작용 논리가 변경되는 경우, JavaScript가 반응해야 합니다. 기기 회전이 공간 또는 위치만 변경되는 경우, CSS가 처리해야 합니다.
{
"name": "My App",
"short_name": "MyApp",
"display": "standalone",
"orientation": "portrait"
}Junior 팀이 복잡성을 피하기 위해 유용한 실용적인 규칙이 하나 있습니다. CSS가 이미 잘 처리하는 레이아웃 결정에 JavaScript를 사용하지 마세요. (CSS가 레이아웃을 결정할 수 있는 경우, CSS를 사용하세요.)
__CAPGO_KEEP_0__에서 런타임에 브라우저가 허용할 때 방향 잠금을 요청할 수 있습니다.
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" />__CAPGO_KEEP_0__
On iOS, 지원되는 방향은 Xcode에서 대상 설정과 앱 메타데이터를 통해 설정됩니다. 앱이 전반적으로 지원하는 것을 정의하고, 특정 뷰 컨트롤러에서 더 엄격한 요구 사항이 있는 경우에는 스크린의 동작을 세부적으로 조정할 수 있습니다.
팀이 플랫폼을跨越하는 경우, Native config은 “이 앱은 일반적으로 무엇을 허용해야 하나?”라고 대답합니다. code은 “이 스크린은 지금 무엇을 해야 하나?”라고 대답합니다.
Capacitor 앱에서 프로그래밍적 제어
Capacitor으로 빌드할 때, 동적 제어는 일반적으로 code에 위치해야 하며, 필요에 따라 라우트나 뷰에 가까운 곳에 위치해야 합니다. 예를 들어, 포트레이트 모드에서 사용하기 더 편리한 로그인 화면은 회전을 허용하지 않지만, 미디어 화면이나 카메라 흐름은 사용자가 장치를 어떤 방향으로 잡고 있는지에 따라 회전을 허용해야 합니다.
플러그인은 이 논리를 읽을 수 있게 해주고, 사용자 정의 네이티브 플러밍을 피합니다. __CAPGO_KEEP_0__의 __CAPGO_KEEP_1__ 앱용 스크린 방향 플러그인은 Capacitor screen orientation plugin for Capacitor apps 이 패턴은 간단합니다. 활성화된 스크린에서 방향 제한을 적용하고, 더 이상 활성화되지 않은 스크린에서 방향 제한을 제거합니다. 라우터 기반 앱에서, 이는 일반적으로 페이지 라이프 사이클 훅과 관련하여 방향 변경을 조정하는 것이며, 무작위 컴포넌트에 호출을 퍼뜨리지 않습니다.
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);
}스크린별 방향 제한을 신중하게 선택하세요
회전이 입력, 정렬, 또는 사용자 초점을 방해하지 않는 경우에는 고정된 수평 모드를 사용하세요.
]}
일반적인 예시로는
- 인증 화면: 사용자가 입력하는 동안 입력 필드의 안정성이 유지됩니다.
- 결제 및 확인 단계: 고객의 주의가 집중된 작업 중 레이아웃 변경이 적어집니다.
- 키오스크 또는 안내된 워크플로: 인터페이스가 일관된 하나의 표현을 필요로 합니다.
장치 방향이 자유롭게 회전할 수 있도록 하여, 추가 너비 또는 다른 손잡이가 작업을 돕는 경우에만 도움이 됩니다.
미디어 재생, 지도, 게임, 카메라 화면, 또는 밀집된 데이터 화면과 같은 일반적인 예시입니다.
초보 팀의 유용한 규칙은 간단합니다. 장치 방향이 바뀐 경우에만 간격이 달라진다면, 레이아웃 시스템이 이를 처리하도록 하세요. 장치 방향이 바뀐 경우에 작업이 달라진다면, 화면 단위의 방향 code 제어가 정당화될 수 있습니다.
Capgo은 실용적인 이유로 언급됩니다. Capacitor 프로젝트에서 방향 제어는 작은 UI 세부 사항으로 시작하여 빠르게 앱의 동작으로 변하는 플랫폼 기능입니다. 이를 동작처럼 다루세요. 기본값을 유연하게 유지하고 제한을 가급적이면 적게, 화면이 더 이상 그 필요성을 느끼지 않을 때 제거하세요.
화면 방향에 대한 UX 최적화 규칙
code는 UX 의사결정이 먼저이고 기술적 의사결정이 두 번째입니다. 일반적으로 code는 직관적입니다. 하지만 사용자가 자연스럽게 느끼는 동작을 선택하는 것이 어려운 부분입니다.
UX 의사결정을 도와주는 짧은 체크리스트가 있습니다.
- 주요 사용자 환경을 고려하십시오. 대부분의 사용자가 직립 자세로 시작할 경우, 가로 방향이 인터페이스의 가장 강력한 버전이 될 수 있습니다.
- 추가 너비가 가치가 있는 화면에서 회전을 지원하십시오. 화면 너비가 더 필요한 화면에서는 회전을 막지 마십시오.
- 명확한 이유가 있는 경우에만 회전을 금지하십시오. 폼, 결제, 보안 흐름과 같은 경우 회전을 금지할 수 있습니다. 콘텐츠 화면은 일반적으로 금지할 필요가 없습니다.
- 회전 시 상태를 유지하십시오. 사용자가 입력, 스크롤 위치, 선택된 탭을 잃지 않도록 하십시오.
- 실제 기기에서 양 방향을 테스트하십시오. 시뮬레이터에서는 어색한 전환, 키보드 겹침, 안전 영역 문제를 놓치기 쉽습니다.
__CAPGO_KEEP_0__의 더 광범위한 레이아웃 결정에 대한 Capacitor 앱에 대한 크로스 플랫폼 UI 및 UX 지침 __CAPGO_KEEP_0__의 레이아웃 테스트와 잘 맞습니다. 동일한 화면이 종종 다른 장치 크기와 플랫폼 규약에 따라 원래처럼 느껴지기 때문입니다.
주요 takeaway은 간단합니다. portrait 방향이란 단순히 '수직'만이 아닙니다. 그것은 프레임 규칙, 레이아웃 상태, 사용자 기대입니다. 좋은 앱은 그것을 그대로 다룹니다.
Capacitor 앱을 배포하고 있으며 빠른 배포 후 수정이 필요하고 제어된 방향성 동작이 필요하다면 Capgo __CAPGO_KEEP_0__
