폰을 회전하여 화면을 테스트하고 레이아웃이 깨끗하게 적응하거나 무너지는지 확인합니다. 텍스트가 다시 흐르거나 버튼이 뛰어오르거나 모달이 갑자기 잘못된 영역을 덮거나 비디오 플레이어가 정확하게 작동하는지 확인합니다. 그 작은 순간은 포트레이트 방향 디자인 용어에서 멈추고 제품 결정이 됩니다.
모바일을 위한 앱을 개발할 때는 포트레이트 방향. 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.
포트레이트 방향
- 을 지원하는 프로젝트에서 UX가 약해지지 않도록 처리하는 방법을 알아야 합니다.
- 제품 작업에서 중요성 이해하기
- 다양한 매체에서 일반적인 사용 사례
- 웹에서 방향 관리
- 모바일 앱에서 방향 관리
- 스크린 방향성에 대한 UX 최적화
포트레이트 방향성 이해
사용자는 화면이 회전할 때 방향성을 먼저 알아차립니다. 개발자는 회전이 인터페이스를 깨트릴 때 방향성을 알아차립니다.
포트레이트 방향성 의 의미는 화면이 높이가 더 긴 경우입니다. 그게 핵심입니다. 그것은 시각 예술에서 비롯되었습니다. 사람의 얼굴과 상체의 초상화는 일반적으로 세로로 프레임이었습니다. 그 동일한 개념이 페이지 디자인, 사진술, 디지털 인터페이스에 이르렀습니다. 그 보다 광범위한 역사에 대한 좋은 참고 자료는 위키백과의 페이지 방향성 개요.
빌더들에게 중요한 것은 포트레이트 방향이 하나의 화면 크기, 하나의 장치, 또는 하나의 파일 형식과 묶여 있지 않다는 것입니다. 그것은 모양에 대한 규칙입니다. 높이가 너비보다 크면 포트레이트입니다.
제품 작업에서 왜 중요합니까
포트레이트는 모바일에서 실용적인 기본값이 되었는데, 사람들이 자연스럽게 휴대폰을 들고 있는 방향과 일치하기 때문입니다. 그것은 스크롤, 손가락의 범위, 읽기 흐름, 양식 디자인, 및 네비게이션의 위치에 영향을 줍니다.
일반적으로 피드, 기사 보기, 설정 화면, 또는 채팅 쓰레드가 수직 프레임에서 더 자연스럽게 읽힙니다. 그것이 방향 선택이 사용자 경험 결정과 직접 연결되는 이유 중 하나입니다. 모바일 앱 사용자 경험 결정과 직접 연결됩니다.그것은 단순히 시각적 스타일링과 관련이 있습니다.
실용적인 규칙: 포트레이트를 레이아웃 컨텍스트로 다루세요, 단순히 장치 위치와 관련이 없습니다.
주니어 개발자들이 혼동하는 곳
일반적으로 혼동하는 것은 방향 그것과 해상도 또는 모드모드는 어떤 쪽이 더 길다는 것을 의미합니다.
- Orientation 비율은 너비와 높이의 관계를 설명합니다.
- Resolution 모드는 어떤 쪽이 더 길다는 것을 의미합니다.
- 해상도는 각 축에 있는 픽셀의 수를 의미합니다. 비율은 너비와 높이의 관계를 설명합니다.
모드와 해상도는 관련이 있지만 같은 것이 아닙니다.
포트레이트 vs 랜드스케이프 기본 비교
이것을 생각하는 간단한 방법은 합성입니다.肖像화는 사람이나 다른 높은 주제에 주목합니다. 가로 화가는 너비, 맥락 및 주변 공간을 캡처합니다. UI는 동일하게 작동합니다.
이미징 및 UI 디자인에서 포트레이트 지향은 높이가 너비보다 큰 사각형입니다. 너비보다 높이가 더 긴 경우이것이 긴 변이 수직인 반대입니다. SLR Lounge의 사전 항목 기술적 정의와 왜 이 모양이 높은 주제와 수직 구조에 적합한지 설명합니다.
한 표의 차이
| 지향 | 형태 | 최적 | 일반적인 효과 |
|---|---|---|---|
| 포트레이트 | 가로보다 세로로 더 높다 | RSS, 양식, 읽기, 높은 주제 | 수직 방향으로 주의를 집중한다 |
| 풍경 | 세로보다 가로로 더 넓다 | 비디오, 지도, 대시보드, 넓은 장면 | 가로 방향을 더 많이 보여준다 |
그것은 기본적인 것 같지만, 제품 리뷰에서 트레이드 오프를 할 때 유용합니다.
사용자에게 어떤 변화가 있는가
포트레이트는 주의를 좁힌다. 그것은 측면 콘텐츠를 줄이고 위에서 아래로의 흐름을 encourge한다. 그 때문에 소셜 피드, 기사 페이지, 온보딩 단계, 채팅 인터페이스 등이 포트레이트에서 더 깨끗하게 느껴진다.
가로 방향은 반대의 효과를 낸다. 그것은 더 많은 너비를 노출시켜, 분할 보기, 타임라인, 갤러리, 미디어 재생, 데이터가 많은 표면, 그리고 몰입형 보기와 같은 경우에 더 많은 호흡을 주는 효과를 낸다. 레이아웃이 측면 비교가 필요하다면, 이 가로 형식은 더 많은 공간을 제공한다.
포트레이트는 일반적으로 주목을 받는 것입니다. 랜드스케이프는 일반적으로 맥락을 제공하는 것입니다.
개발자에게 변경 사항이 무엇인지
가장 큰 실수는 포트레이트의 넓은 버전으로 간주하는 것입니다. 그것은 아니다. 정보 계층 구조가 종종 변경해야 합니다.
예를 들어:
- 포트레이트 모드에서대시보드 카드는 단일 열로 쌓일 수 있습니다.
- 가로 방향 모드에서같은 대시보드는 여러 열로shift하고 필터 또는 사이드 패널을 표시할 수 있습니다.
- 포트레이트 모드에서결제 화면은 큰 탭 대상과 하나의 명확한 흐름을 우선시할 수 있습니다.
- 가로 방향 모드에서같은 화면은 field가 너무 수직으로 압축되면 불편할 수 있습니다.
모바일 임베르시브 레이아웃을 개발하는 개발자들은 에지 처리, 안전 영역, 풀 스크린 동작에 대해 생각해야 합니다. 그 세부 사항을 조정하고 있으면서도 Capacitor 에지 투 에지 디스플레이 설정 사용자가 사용할 수 있는 공간을 인식하는 방식에 따라 방향이 변화를 일으키기 때문에 동일한 대화에 속합니다.
다양한 미디어에서 사용되는 일반적인 사용 사례
모바일 화면에서만 나타나는 포트레이트 방향은 실제로 더 많은 장소에서 나타납니다. 그 중요성은 소프트웨어에서 시작되지 않았기 때문입니다. 소프트웨어에만 속하는 것은 아닙니다.
사진과 인쇄물
전문가의 초상화는 명백한 예입니다. 수직 프레임은 사람의 얼굴과 몸체를 더 잘 맞출 수 있는 반면, 넓은 프레임은 그렇지 않습니다. 같은 논리가 패션 사진, 책 표지, 포스터, 잡지 표지에도 적용됩니다.
인쇄 디자인도 읽기 경험을 위아래로 이동시키는 좁은 열거형에 의존할 때 포트레이트를 사용합니다. 그 모양은 눈이 자연스럽게 페이지를 아래로 이동하는 데 도움이 됩니다.
문서와 일상적인 커뮤니케이션
대부분의 보고서, 이력서, 편지, 내부 문서는 포트레이트로 설계되었습니다. 그 이유는 수직 페이지가 문단, 제목, 목록, 서명과 같은 읽기 시퀀스에 잘 맞기 때문입니다.
만약 PDF를 내보내고 넓은 표가 읽을 수 없게 된 것을 발견했다면, 포트레이트의 한계를 보았을 것입니다. 어떤 콘텐츠는 수평 형식으로 더 잘 표현됩니다. 프레임을 콘텐츠 구조와 맞추는 것이 중요합니다.
모바일 제품 및 앱 흐름
이러한 상황에서, 포트레이트는 많은 팀의 기본적인 정신 모델이 됩니다.
사용자가 반복적으로 열어보는 화면에 대해 생각해 보세요:
- 채팅 앱: 메시지는 수직으로 쌓입니다.
- 소셜 앱: 게시물, 댓글, 및 리얼즈는 수직 흐름으로 소비됩니다.
- 리테일 앱: 검색 결과 및 제품 목록은 아래로 스크롤됩니다.
- 은행 앱: 잔액, 거래, 및 확인 흐름은 일반적으로 수직 섹션으로 배열됩니다.
이 패턴은 우연이 아닙니다. 포트레이트는 한 손으로 사용, 손가락 스크롤, 및 선형 작업 완료를 지원합니다.
모바일 UI의 많은 부분은 직관적이게 느껴지는데, 이는 인터페이스가 우측 방향의 기기를 가정하기 때문입니다.
모바일 UI가 직립 기기에 대한 인터페이스를 가정하기 전에 다른 것을 가정하기 전에 직관적이게 느껴지게 만드는 이유가 많습니다.
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.
모바일 기기에서 포트레이트 모드가 사용자에게 익숙한 이유는 무엇일까요? 미디어 뷰어, 지도, 큰 차트, 카메라 기반 워크플로우는 더 넓은 프레임에서 이익을 보는 경우가 많습니다. 그러나 일상적인 작업 흐름에서 포트레이트 모드는 사용자가 시작하는 곳입니다.
Handling Orientation on the Web 웹 앱을 모바일 앱으로 변환하는 데 사용하는 Capacitor 웹 오리엔테이션 처리를 위한 좋은 기초가 필요하다는 점을 무시하지는 않는다. 그것은 그 기초를 더 중요하게 만든다.
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, or portrait-secondaryMDN은 manifest 값들을 문서화합니다. 웹 애플리케이션 매니페스트 방향 참조.
CSS를 사용하여 레이아웃이 적응해야 할 때
CSS로 시작하세요. 가장 저렴하고 신뢰할 수 있는 방법으로 너비와 높이가 역할을 바꾸면 반응할 수 있습니다.
/* 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;
}
}화면 모양의 점진적 향상과 같이 작동합니다. 기본으로 좁고 세로로 서 있는 레이아웃을 시작하고, 뷰포트가 더 넓어질 때만 두 번째 UI에 공간을 추가하세요.
몇 가지 관행은 나중에 시간을 절약합니다:
- 기본 모드에서 시작하세요: 주로 앱을 세로로 사용하는 사람들에 의해 주로 사용되는 경우 기본 레이아웃으로 만듭니다.
- 고정된 높이를 피하세요: 장치가 회전할 때 사용할 수 있는 수직 공간이 빠르게 줄어들 수 있으며, 브라우저 UI 또는 가상 키보드가 표시될 때尤其 그렇습니다.
- 실제 상호 작용 상태를 테스트하세요: 폼, 스틱이 있는 헤더 및 하단 시트는 회전 중에 실패하는 경우가 많지 않습니다. 정적 스크린샷에서는 그렇지 않습니다.
행동이 반응해야 할 때 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');
}
});그 패턴은 캔버스, 미디어 제어, 지도 뷰, 커스텀 네비게이션 셸에 유용합니다. 정신 모델은 간단합니다. 회전이 데이터 표시 또는 상호 작용 논리가 변경되는 경우, 자바스크립트가 반응해야 합니다. 회전이 공간 또는 위치만 변경하는 경우, CSS가 처리해야 합니다.
일상적인 팀이 복잡성을 피하기 위해 유용한 실용적인 규칙이 있습니다. CSS가 이미 잘 처리하는 레이아웃 결정에 자바스크립트를 사용하지 마십시오.
PWAs에 대한 선호하는 방향 설정
PWA가 주로 수직 사용을 위해 설계된 경우, 매니페스트에서 이를 선언하십시오.
{
"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로 느껴질 수 있습니다.
Adequate mental model은 여기서 도움이 됩니다. 앱 전체 설정은 기본 정책입니다. 화면 단위 code은 예외 layer입니다. 광범위한 의도에 정책을 사용하고, 사용자가 완료하려고 하는 작업에 방해가 되지 않도록 회전하는 장치가 있는 경우에만 예외를 사용하십시오.
원시 플랫폼 제어
켜기 안드로이드, 방향은 종종 AndroidManifest.xml 액티비티에 대해 다음과 같이 설정됩니다:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />이것은 상위 수준의 구성 플래그와 같이 작동합니다. 간단하고 예측 가능하며 액티비티 전체에 적용하는 것을 쉽게 강제할 수 있습니다. 단점은 범위입니다. 만약 한 화면만 직립 모드를 필요로 한다면, 전역적으로 해당 규칙을 적용하는 것은 일반적으로 너무 무겁습니다.
켜기 iOS, 지원되는 방향은 Xcode를 통해 대상 설정과 앱 메타데이터를 통해 설정됩니다. 앱이 일반적으로 허용해야 하는 것을 정의하고, 화면이 더 엄격한 요구 사항을 가질 때 특정 뷰 컨트롤러에서 행동을 세부화할 수 있습니다.
그것은 크로스 플랫폼 팀에게 중요합니다. 원시 config은 “이 앱이 일반적으로 허용해야 하는가?”라고 대답합니다. 런타임 code은 “이 화면이 지금 해야 하는가?”라고 대답합니다.
프로그래밍적 제어는 Capacitor 앱에서
만들기 위해 Capacitor을 사용하면, 동적 제어는 일반적으로 code에 속해 있으며, 필요로 하는 경로 또는 뷰 근처에 위치합니다. 로그인 화면은 포트레이트 모드에서 더 쉽게 사용할 수 있습니다. 미디어 화면 또는 카메라 흐름은 장치가 어떻게 들여 있는지에 따라 회전을 허용해야 할 수 있습니다.
A plugin은 그 논리를 읽기 쉽게 유지하고 커스터마이즈된 네이티브 플러밍을 피합니다. Capacitor 화면 방향 플러그인은 Capacitor 앱에 사용됩니다. 이 패턴은 간단합니다. 화면이 활성화되면 제한을 적용하고, 화면이 더 이상 활성화되지 않으면 제한을 제거합니다. 라우터 기반 앱에서, 이는 일반적으로 페이지 라이프 사이클 훅과 관련하여 방향 변경을 분산시키지 않고, 대신 무작위 컴포넌트에 호출을 퍼뜨리지 않는 것입니다.
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);
}화면 특정 제한을 신중하게 선택하세요
회전이 입력, 정렬 또는 사용자 초점을 방해하지 않도록 고정된 수직 모드를 사용하세요.
일반적인 예시로는 다음과 같습니다:
인증 화면:
- 사용자가 입력하는 동안 입력이 안정적입니다. 결제 및 확인 단계:
- 고객의 주의가 집중된 작업 중 레이아웃 변경이 적습니다. Authentication screens: inputs stay stable while the user types.
- 스크린 방향을 위한 UX 최적화 키오스크 또는 가이드된 워크플로:
인터페이스는 일관된 표현이 필요합니다.
장치가 자유롭게 회전할 수 있도록 하세요. 추가 너비 또는 다른 손잡이가 작업을 도울 때.
A useful rule for junior teams is simple. If changing device direction would only alter spacing, let the layout system handle it. If changing device direction would change how the task works, then screen-level orientation code may be justified.
Capgo is mentioned here for a practical reason. In Capacitor projects, orientation control is one of those platform features that starts as a small UI detail and quickly becomes app behavior. Treat it like behavior. Keep the default flexible, apply restrictions sparingly, and remove them as soon as the screen no longer needs them.
스크린 방향성 오리엔테이션을 위한 UX 최적화 방법
Orientation handling is a UX decision first and a technical decision second. The code is usually straightforward. The hard part is choosing behavior that feels natural.
스크린 방향 처리는 UX 결정에서 기술 결정으로 이어집니다. __CAPGO_KEEP_0__은 일반적으로 직관적입니다. 하지만 자연스럽게 느껴지는 동작을 선택하는 것이 어려운 부분입니다.
- 스크린 방향 UX 최적화 가이드 스크린 방향 UX 최적화에 대한 짧은 체크리스트
- 다양한 화면 모드 지원을 통해 더 많은 가치가 있는 경우 지원해 주세요. 회전을 방지하지 마세요. 가로 너비가 더 필요한 화면에서.
- 만약 명확한 이유가 있다면만 회전을 막아주세요: 폼, 결제, 보안 흐름과 같은 경우 회전을 막을 수 있습니다. 콘텐츠 화면은 그렇지 않습니다.
- 회전 시 상태를 유지하세요: 사용자는 입력, 스크롤 위치, 선택된 탭을 잃지 않아야 합니다.
- 실제 기기에서 양면 테스트하세요: 시뮬레이터에서는 어색한 전환, 키보드 겹침, 안전 영역 문제를 놓치게 됩니다.
더 광범위한 레이아웃 결정에 대해 cross-platform UI and UX guidance for Capacitor apps 주요 takeaway은 간단합니다. 만약 portrait orientation이란 무엇인지 물어본다면, 단순히 '수직'만 말하는 것이 아닙니다. 그것은 프레임 규칙, 레이아웃 상태, 사용자 예상입니다. 좋은 앱은 그것을 그렇게 다룹니다.
만약 __CAPGO_KEEP_0__ 앱을 배포하고 있으며, 제어된 회전 동작과 빠른 배포 후 수정이 필요하다면
Capacitor Capgo CapacitorJS와 Electron 앱을 위한 실시간 업데이트 및 앱 기능(화면 방향, 화면 고정 등) 유지 플러그인 제공
