iOS 동적 글자 크기 레이아웃 검증하기

주문 확인 화면은 기본 글자 크기에서 주소와 제출 버튼이 모두 보입니다. 하지만 사용자가 iPhone의 글자를 키우면 버튼이 화면 하단의 고정 영역에 가려집니다. 개발 기기에서 화면을 한 번 열어 보는 것만으로는 이런 문제를 놓치기 쉽습니다. 동적 글자 크기는 글자만 키우는 것이 아니라 줄바꿈, 셀 높이, 스크롤 범위까지 바꾸기 때문입니다. 여기서는 클라우드 Mac의 iOS 시뮬레이터로 테스트 조건을 고정하고, UI 테스트로 핵심 조작 경로를 확인합니다.

테스트 대상과 통과 조건 정하기

주문 확인, 설정 상세, 오류 안내처럼 내용이 긴 실제 화면을 하나 선택합니다. 프로젝트의 Xcode 프로젝트, scheme, 시뮬레이터 기기, iOS 런타임, 테스트 계정 상태를 기록하세요. 이후 결과를 비교할 때도 같은 조건을 사용해야 합니다. 클라우드 Mac을 여러 사람이 함께 쓴다면 이 테스트에 전용 시뮬레이터 기기를 지정해, 다른 작업이 글자 크기를 바꾸거나 앱 데이터를 지우지 못하게 하세요.

먼저 화면에서 반드시 완료할 동작을 정한 뒤 단언을 작성합니다. 최소한 제목을 읽을 수 있는지, 주요 버튼을 조작할 수 있는지, 긴 설명의 끝까지 스크롤할 수 있는지, 이전 화면으로 돌아갈 수 있는지를 확인하는 것이 좋습니다. 뷰가 존재하는지만 검사해서는 글자가 잘리지 않았다고 증명할 수 없습니다.

“정상으로 보인다”를 실제로 수행할 수 있는 경로와 확인해야 할 스크린샷으로 나누세요. 자동 단언으로 명확한 오류를 잡고, 스크린샷으로 아직 단언에 담지 못한 시각적 문제를 찾습니다.

시뮬레이터를 고정하고 글자 크기 바꾸기

클라우드 Mac에서 Xcode 명령줄 도구가 예상한 버전을 가리키는지 먼저 확인한 다음, 사용 가능한 기기를 나열합니다. booted가 언제나 같은 기기라고 가정하지 마세요. 같은 Mac에서 병렬 작업을 실행하면 여러 시뮬레이터가 켜질 수 있습니다. 대상 기기의 UDID를 작업 설정에 기록하고, 기기를 시작한 뒤 부팅이 끝날 때까지 기다립니다.

xcode-select -p
xcrun simctl list devices available
export SIM_UDID="从上一步选择的设备 UDID"
xcrun simctl boot "$SIM_UDID"
xcrun simctl bootstatus "$SIM_UDID" -b
xcrun simctl help ui

기기가 이미 켜져 있다면 boot가 현재 상태를 알려 줍니다. UDID가 맞는지 확인하고 bootstatus를 실행하면 됩니다. simctl ui에서 사용할 글자 크기 값은 설치된 도구의 도움말로 확인하세요. 다른 Xcode 버전에서 허용하는 단계 이름을 스크립트에 그대로 옮기지 마세요. 현재 Mac의 도움말에서 확인한 값을 TEXT_SIZE 같은 환경 변수로 테스트 작업에 전달한 뒤 실행합니다.

: "${TEXT_SIZE:?set a supported content size}"
xcrun simctl ui "$SIM_UDID" content_size "$TEXT_SIZE"
xcrun simctl ui "$SIM_UDID" content_size

기본 단계, 더 큰 단계 하나, 제품이 지원한다고 명시한 최대 단계를 최소한 테스트하세요. 양 끝만 검사해서는 안 됩니다. 중간 단계에서 제목이 한 줄 더 늘어나지만 최대 글자 크기용 레이아웃은 아직 적용되지 않을 수 있습니다. 크기를 바꿀 때마다 테스트할 앱을 다시 실행해, 현재 화면이 변경 전 상태를 캐시한 채 남아 있지 않도록 합니다.

UI 테스트로 조작 경로 확인하기

앱의 핵심 컨트롤에 checkout.title, checkout.submit, checkout.lastNote처럼 안정적인 접근성 식별자를 지정합니다. 식별자는 언어에 따라 바뀌는 버튼 문구가 아니라 기능을 나타내야 합니다. 테스트는 매번 같은 초기 화면에서 확인 화면으로 이동해야 합니다. 로그인이나 데이터 준비가 필요하다면 프로젝트의 기존 테스트 환경을 사용하고, 실제 계정 정보를 테스트 코드나 로그에 남기지 마세요.

아래 XCTest 코드는 어떤 방향으로 단언할지 보여 주는 예시입니다. 구체적인 화면 이동과 성공 상태 식별자는 프로젝트 구현에 맞게 바꾸세요. 긴 화면에서는 먼저 스크롤한 뒤 마지막 문단과 버튼을 조작할 수 있는지 판단합니다.

let app = XCUIApplication()
app.launch()
let title = app.staticTexts["checkout.title"]
XCTAssertTrue(title.waitForExistence(timeout: 10))

let page = app.scrollViews["checkout.content"]
let lastNote = app.staticTexts["checkout.lastNote"]
for _ in 0..<6 where !lastNote.isHittable {
    page.swipeUp()
}
XCTAssertTrue(lastNote.isHittable)

let submit = app.buttons["checkout.submit"]
for _ in 0..<6 where !submit.isHittable {
    page.swipeUp()
}
XCTAssertTrue(submit.isHittable)
submit.tap()
XCTAssertTrue(app.staticTexts["checkout.success"].waitForExistence(timeout: 10))

화면이 ScrollView를 사용하지 않는다면 예시를 통과시키려고 선택자를 억지로 적용하지 말고, 실제 컨테이너에 맞게 조정하세요. 스와이프 횟수에 상한을 두면 레이아웃이 망가졌을 때 테스트가 무한정 기다리는 일을 막을 수 있습니다. 다만 버튼을 누를 수 있다는 사실만으로 버튼 글자가 모두 보인다고 증명할 수는 없으므로 스크린샷도 보관해야 합니다.

단계별 증거를 남기고 오류 원인 찾기

각 글자 크기 단계마다 기기 UDID, 런타임, Xcode 버전, 글자 크기 단계, 테스트 결과를 기록합니다. 실패하면 UI 테스트 첨부 파일을 먼저 저장하고, 같은 단계에서 다시 실행해 시뮬레이터 스크린샷을 찍으세요. 병렬 작업의 파일이 서로 덮어쓰지 않도록 스크린샷 이름에 단계와 화면 이름을 넣습니다. 명령줄에서 캡처하려면 xcrun simctl io "$SIM_UDID" screenshot output.png를 실행할 수 있습니다. 실제 작업에서는 고정 파일명을 작업별 고유 출력 경로로 바꿔야 합니다.

스크린샷을 볼 때는 가장 바깥쪽 레이아웃부터 원인을 찾으세요. 높이가 고정된 제목 컨테이너 때문에 두 번째 줄이 사라지거나, 가로로 배치한 레이블과 금액이 너비를 놓고 충돌할 수 있습니다. 화면 하단에 떠 있는 버튼이 설명의 마지막 문단을 가릴 수도 있습니다. 우선 텍스트 컨테이너가 내용에 맞춰 커지게 하고, 필요하면 가로 배치를 세로 배치로 바꾸며, 스크롤 콘텐츠의 아래쪽에 여유 공간을 확보하세요. 큰 글자 크기에서 생긴 문제를 글자를 줄여 감추지 마세요.

“가끔 테스트가 통과한다”면 먼저 항상 같은 UDID를 사용하는지, 크기를 바꾼 뒤 앱을 다시 실행했는지, 단언이 화면 밖의 동일한 이름을 가진 요소를 잘못 선택하지는 않았는지 확인하세요. 조건이 안정적인 것을 확인한 뒤 레이아웃을 수정해야 기기 상태의 영향을 코드 회귀로 오인하지 않습니다.

유지 관리할 수 있는 점검 목록으로 정리하기

기기, 런타임, 지원하는 글자 크기 단계를 테스트 작업 설정에 넣고 각 단계에서 동일한 UI 테스트를 실행합니다. 실패할 때마다 단계, 단언 위치, 스크린샷을 보관하세요. 수정한 뒤에는 최소한 오류가 발생한 단계와 그 양옆 단계를 다시 테스트합니다. 자동으로 확실하게 판정하기 어려운 잘림과 겹침은 스크린샷을 검토하도록 정하고, “요소가 존재한다”는 결과만으로 출시해도 된다고 결론 내리지 마세요.

마지막으로 가장 중요한 사용자 경로를 직접 따라가 보세요. 글자를 키운 상태에서 설명을 끝까지 읽고, 주요 버튼을 찾아 작업을 완료한 뒤 이전 화면으로 돌아갑니다. 테스트의 목표는 모든 글자 크기에서 동일한 스크린샷을 만드는 것이 아닙니다. 지원하는 모든 크기에서 내용을 끝까지 읽고 필요한 동작을 완료할 수 있어야 합니다.

자주 묻는 질문