Swift Academy · 강의

오른쪽에서 왼쪽 및 레이아웃 방향

RTL 언어와 좌우 반전 레이아웃을 지원합니다.

레슨 4/413개 단계

오른쪽에서 왼쪽 및 레이아웃 방향은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

오른쪽에서 왼쪽으로 읽는 언어

아랍어, 히브리어, 페르시아어, 우르두어는 오른쪽에서 왼쪽으로(RTL) 작성됩니다. 이러한 사용자를 위해 전체 인터페이스를 반전해야 합니다. 뒤로 가기 탐색 버튼은 오른쪽을 가리키고, 목록은 오른쪽 가장자리에 맞춰지며, 진행 방향은 오른쪽에서 왼쪽으로 흐릅니다. RTL 지원은 국제화의 핵심 요소입니다.

// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.

왼쪽과 오른쪽이 아닌 선행과 후행

핵심 원칙은 왼쪽과 오른쪽 대신 선행과 후행을 사용해 설계하는 것입니다. 선행은 읽기가 시작되는 쪽을 의미합니다(영어에서는 왼쪽, 아랍어에서는 오른쪽). 선행과 후행을 사용하면 시스템이 RTL에서 레이아웃을 자동으로 반전합니다.

// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16)  // flips in RTL
let edge = "leading mirrors automatically"
_ = edge

layoutDirection 읽기

SwiftUI는 layoutDirection 환경 값을 통해 현재 방향을 제공합니다. 값은 .leftToRight 또는 .rightToLeft 중 하나입니다. 화살표 이미지 선택처럼 방향에 따라 달라지는 로직이 필요할 때 이 값을 읽으십시오.

// In a SwiftUI View:
// @Environment(\.layoutDirection) var direction
// let chevron = direction == .rightToLeft
//     ? "chevron.left" : "chevron.right"
let ltr = "leftToRight"
let rtl = "rightToLeft"
print(ltr, rtl)

SF Symbols 및 이미지 반전

많은 SF 심벌은 자동으로 반전됩니다. 방향을 나타내는 사용자 지정 이미지의 경우 레이아웃 방향에 따라 반전되도록 표시하십시오. 그러면 앞으로 향하는 화살표가 RTL에서도 계속 앞을 향합니다. flipsForRightToLeftLayoutDirection 수정자가 이를 제어합니다.

// SwiftUI:
// Image("forwardArrow")
//   .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlip

방향 강제 지정

RTL 레이아웃 안의 전화번호나 왼쪽에서 오른쪽으로 작성되는 코드 조각처럼 하위 뷰가 고정된 방향을 유지해야 하는 경우가 있습니다. 해당 하위 트리에만 environment(\.layoutDirection, _) 수정자를 적용해 방향을 재정의하십시오.

// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
//   .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forced

텍스트 정렬과 multilineTextAlignment

텍스트 정렬에도 .leading과 .trailing을 사용하십시오. .leading으로 정렬된 단락은 아랍어에서 자동으로 오른쪽 가장자리에 맞춰집니다. 절대 반전되지 않는 .left/.right는 사용하지 마십시오.

// Text(longBody)
//   .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignment

양방향 텍스트

RTL 단락에는 LTR 문자열(URL, 숫자, 영어 브랜드 이름)이 포함되는 경우가 많습니다. 유니코드 양방향 알고리즘이 순서를 처리하지만, 모호한 문자열을 방향 격리 문자로 감싸 시각적으로 뒤섞이는 것을 방지할 수 있습니다.

import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)

반전하지 않는 뷰의 의미론적 콘텐츠

일부 컨트롤인 미디어 재생 제어 버튼과 타임라인은 읽기 방향이 아니라 물리적 의미를 가지므로 반전해서는 안 됩니다. UIKit의 semanticContentAttribute(.playback, .spatial, .forceLeftToRight)는 고정된 방향을 유지해야 하는 경우를 시스템에 알려 줍니다.

// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixed

번역 없이 RTL 테스트하기

반전을 테스트하기 위해 아랍어 번역을 준비할 필요는 없습니다. 구성표의 앱 언어 설정에서 오른쪽에서 왼쪽 의사 언어를 사용해 앱을 실행하십시오. 기존 문자열을 사용한 채 UI가 반전되므로 하드코딩된 .left/.right 버그를 즉시 발견할 수 있습니다.

// Edit Scheme > Run > Options >
//   App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = test

일반적인 RTL 버그

다음 항목을 확인하십시오.

정렬이나 여백에 .left/.right를 하드코딩한 경우
고정된 x 오프셋을 사용해 뷰를 수동으로 배치한 경우
반전되지 않는 방향 지정 사용자 지정 이미지
잘못된 방향을 가리키는 뒤로 가기 화살표나 슬라이더
연결하여 만든 양방향 문자열이 뒤섞이는 경우

// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = rule

RTL을 지원하는 행

잘 구성된 행은 전체적으로 선행과 후행을 사용하고, 심벌이 반전되도록 하며, 의미상 필요한 경우에만 방향을 강제합니다. 이러한 뷰는 영어와 아랍어 모두에서 올바르게 표시되도록 변경할 필요가 전혀 없습니다.

// HStack {
//   Image(systemName: "star")
//   Text("Favorite")
//   Spacer()
//   Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = ready

빠른 확인

RTL에 안전한 레이아웃의 핵심 원칙을 떠올려 보십시오.

인터랙티브 레슨에서 답해보세요

요약

오른쪽에서 왼쪽으로 읽는 언어를 지원하는 방법을 배웠습니다.

왼쪽과 오른쪽이 아닌 선행과 후행을 사용해 설계하십시오.
방향에 따라 달라지는 로직에는 layoutDirection 환경 값을 읽으십시오.
방향 지정 이미지를 반전하고, 코드나 전화번호처럼 고정해야 하는 하위 트리에는 방향을 재정의하십시오.
반전하면 안 되는 재생 및 공간 제어에는 semanticContentAttribute를 사용하십시오.
출시 전에 RTL 의사 언어로 테스트하십시오.

무료로 시작

AI 튜터와 함께 Swift을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 122
레슨: 409

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“오른쪽에서 왼쪽 및 레이아웃 방향” 강의는 무료인가요?

네 — “오른쪽에서 왼쪽 및 레이아웃 방향” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“오른쪽에서 왼쪽 및 레이아웃 방향”에서 뭘 배우나요?

RTL 언어와 좌우 반전 레이아웃을 지원합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Swift Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“오른쪽에서 왼쪽 및 레이아웃 방향” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Swift Academy(으)로 돌아가기