Trainline : 티켓 확인 UX




구성: My Tickets 카드는 로딩 스피너 → Download tickets → View tickets 순으로 버튼 상태가 바뀌고, 그 아래 출발·도착 시간을 세로 타임라인으로 잇는다. 카드 맨 아래엔 Manage my booking과 All bookings가 별도 섹션으로 이어진다.
로딩 중에도 카드 틀은 고정: 스피너가 뜬 동안에도 NEW 배지, 제목, 날짜, Personal 라벨은 이미 자리 잡혀 있고 타임라인 영역만 비어 있다. 콘텐츠가 늦게 와도 레이아웃이 밀리지 않게 틀을 먼저 확정해두는 방식이다.
버튼 라벨이 곧 상태 표시: 같은 자리, 같은 크기의 버튼이 "Download tickets"에서 "View tickets"로 바뀐다. 색이나 아이콘으로 구분하는 대신 라벨 텍스트 자체가 "아직 안 받음 / 이미 받음"이라는 상태를 그대로 말해준다.
스크롤과 무관하게 뜨는 여정 토스트: 화면을 내려도 "Trip to Frankfurt... Scheduled 1:08pm arrival" 캡슐이 다른 콘텐츠 위에 계속 떠 있다. 티켓 화면을 내려도 여정 상태를 놓치지 않게 하는 장치다.
✤ 로딩 스피너도, 버튼 라벨도, 떠있는 토스트도 결국 같은 질문에 답한다 — "내 티켓은 지금 어떤 상태인가." Trainline은 이 질문을 화면 전체에 걸쳐 여러 방식으로 계속 알려준다.