KORAIL (코레일)

청룡의 긴 노즈와 검은 창·금색 띠 아래, 파란 운임 버튼과 매진·예약대기가 촘촘히 이어지는 철도 시간표

한국모빌리티공공차가운modern-minimal고딕compactroundsubtle라이트한글 지원출시 2003개정 2026

Brand DNA

브랜드 DNA

코레일은 역과 역 사이의 이동을 시간표로 설명한다. 승차권 화면에서 가장 먼저 읽혀야 할 것은 출발역·도착역·출발 시각이며, 그다음이 열차 종류와 좌석 상태, 마지막이 운임이다. 파란색은 이 순서 안에서 선택한 여정과 예매 가능한 행동을 표시한다. 여행 이미지를 크게 놓더라도 시각과 좌석을 찾는 일을 방해하지 않는다. 이 문서는 한국철도공사의 공식 CI와 실제 예매 웹·앱 화면을 함께 살펴 재구성한 룩북이다. 공식 CI 규정, 현행 웹의 공개 CSS, 앱 화면에서 관찰한 규칙, 룩북을 위한 재현값을 구별해 적는다.

시그니처는 청룡의 긴 유선형 노즈, 검은 창 띠와 금색 도장 띠 아래에 이어지는 촘촘한 철도 시간표다. 카드의 서비스 장면은 코레일의 승차권 조회 결과다. 서울 → 부산, 날짜, 어른 1명이라는 조건을 먼저 고정하고, KTX-청룡·KTX-산천·KTX·ITX-새마을·무궁화호를 같은 열 구조로 비교한다. 운임의 쉼표, 두 자리 시각, 매진과 예약대기 같은 짧은 상태가 철도 예매 화면의 성격을 만든다. 지도를 중심으로 한 길찾기 화면과 다른 문법이다.

2026년 10월 12일 조사 시 앱스토어의 현재 이름은 코레일+로 표시된다. 따라서 카드 제목을 과거 앱 이름으로 고정하지 않고, 현재 자료에서도 확인되는 ‘승차권 예매’로 쓴다. 승차권 조회 장면에 현행 앱의 날짜·인원·좌석·하단 메뉴 표현을 적용했다. 앱스토어에는 실제 산천 승차권의 서울 12:25 → 부산 15:07, 5호차 12A, 59,800원이 보인다. 그 외 시간표와 좌석 상태는 구성 설명을 위한 예시이며 실시간 조회 결과가 아니다.

공식 예매 웹의 과거 주소 letskorail.com은 조사 시 korail.com으로 연결됐다. 현재 화면에서 상단 서비스 탭, 짙은 청색 주 메뉴, 청록색 제목 띠, 둥근 검색 조건, 짙은 회색 푸터를 확인했다. 조회 요청에는 자동화 차단 안내가 나와 운행 결과를 확인하지 못했다. 이 예시는 확인한 검색 구조와 앱의 티켓 정보를 토대로 넓은 결과 표를 재구성한다. 열차를 실제로 예약하거나 좌석을 확보하는 기능은 포함하지 않는다.

| 구분 | 확인한 성격 | 화면에 적용하는 방법 | |---|---|---| | 역할 | 한국철도공사의 여객 철도 서비스 | 서울·부산 같은 역 이름과 열차 번호를 구체적으로 표시한다. | | 핵심 약속 | 시간과 여정을 정확히 읽는 이동 서비스 | 출발·도착·소요 시간을 분리하고 숫자를 일정한 폭으로 맞춘다. | | 정체성 | 공식 KORAIL 심벌과 Blue·Light Blue | 로고는 원본 벡터 경로를 사용하고 행동 버튼에 파랑을 모은다. | | 주요 화면 | 승차권 예매·좌석 선택·나의 티켓 | 조회 조건, 결과, 좌석, 결제 전 확인 순서로 정보가 깊어진다. | | 관찰 범위 | 공식 CI·웹·앱스토어 화면·청룡 사진 | 공개 CSS 값과 화면 재현값을 구별한다. |

브랜드가 가진 공공성은 회색 화면이나 무거운 문장으로 표현하지 않는다. 역 이름을 짧고 정확하게 쓰고, 매진이어도 가능한 다음 행동을 같은 자리에서 찾게 하는 것으로 표현한다. ‘좌석 선택’, ‘다른 시간 보기’, ‘승차권 확인’처럼 목적어가 있는 문구를 쓴다. 불명확한 ‘확인하기’만 반복하면 결제 확인과 조건 확인을 구별하기 어렵다. 서비스의 여러 상태가 한눈에 비교되는 것이 코레일 화면의 중요한 품질이다.

Tone & Mood

톤 & 무드

정확함 · 신뢰감 · 경쾌함을 함께 유지한다. 밀도는 Compact, 모서리는 Round, 평면성은 Subtle이다. 열차 간 비교를 맡는 표는 촘촘하게, 여정 입력과 승차권은 둥근 덩어리로, 입체감은 차량·상품 그림에 집중한다. 정확함은 표의 열 정렬과 숫자 형식에서, 신뢰감은 흰 바탕과 선명한 본문 대비에서, 경쾌함은 청룡의 길게 흐르는 형상과 적은 양의 밝은 파랑에서 나온다. 화면 전체를 파란색으로 덮는 대신 대부분을 흰색과 밝은 중성색으로 남긴다. 강조 면이 적을수록 선택 좌석과 예매 버튼이 빨리 보인다. 브랜드가 밝다는 이유로 작은 안내 글자까지 옅은 하늘색으로 쓰지 않는다.

현행 앱은 둥근 흰 카드 안에서 역 이름과 시각을 크게 보여 준다. 바깥의 옅은 파랑은 여유를 만들고, 카드 안쪽은 검은 글자와 얇은 구분선으로 촘촘하게 정리한다. 웹은 같은 내용에 더 넓은 표와 가로 조건 띠를 사용한다. 두 화면의 밀도를 똑같이 만들 필요는 없다. 모바일은 한 여정을 위아래로 읽게 하고, 데스크톱은 여러 열차를 같은 기준으로 가로 비교하게 만든다. 카드에서는 이 두 방식 중 모바일의 짧은 행을 압축한다.

| 상황 | 권장 표현 | 피할 표현 | |---|---|---| | 조건 표시 | 서울 → 부산 · 10.12(월) · 어른 1명 | 목적지 설명을 긴 여행 문장으로 바꾸기 | | 구매 가능 | 일반실 59,800원 · 좌석 선택 | 금액 없이 ‘혜택가’만 강조하기 | | 매진 | 매진 · 다른 시간 보기 | 빈칸이나 회색 줄 하나로 상태를 숨기기 | | 대기 가능 | 예약대기 | 즉시 확정된 좌석처럼 같은 파란 버튼 쓰기 | | 혼합 좌석 | 입석+좌석 · 구간 확인 | 전 구간 착석으로 읽히는 ‘좌석 있음’ | | 선택 완료 | 4호차 12A · 순방향 · 1석 선택 | 좌석 위치와 방향을 생략한 ‘선택됨’ |

안내 말투는 짧고 정중하게 쓴다. ‘열차를 선택해 주세요’와 ‘출발일을 확인해 주세요’처럼 행동을 바로 알려 주되, 조회가 끝나기 전에 빈 결과를 확정적으로 말하지 않는다. 소요 시간은 ‘2시간 17분’처럼 단위를 풀어 쓰고 작은 카드에서는 ‘2시간17분’까지 줄일 수 있다. 운임은 ‘59,800원’이며 ‘59.8K’나 달러 표기로 바꾸지 않는다. 시간의 콜론과 가격의 쉼표는 장식이 아니라 빠르게 정보를 묶는 구분자다.

사진과 그림은 실제 열차의 특징을 유지한다. 청룡의 은보라색 차체를 브랜드 파랑 하나로 덮으면 차종 차이가 사라진다. 노즈의 경사, 앞유리의 길이, 금색 띠와 대차의 어두운 면을 구분하고 바닥의 선로는 얇게 남긴다. 여행 상품 선반은 바다·산·도시처럼 목적지의 다른 형태를 써서 작은 그림도 서로 구별되게 한다. 앱의 정기권과 N카드 같은 서비스 아이콘을 장식 패턴으로 반복하지 않는다.

Color System

컬러 시스템

공식 전용색상 페이지의 웹 값은 Blue `#005BAC`, Light Blue `#00B2E3`, Gray `#77777A`다. 같은 페이지의 인쇄 별색과 웹 RGB는 목적이 다르므로 섞어 계산하지 않는다. Gold와 Silver는 별색 안내가 확인되지만 대응하는 공식 HEX를 확인하지 못했다. 청룡 일러스트의 금색 띠와 은보라색 면은 공식 차량 사진을 관찰한 표현색이며 CI 색 체계의 추가 공식값이 아니다. brand-blue, brand-light-blue, brand-gray는 CI 값이다. 예매 웹의 공개 CSS에는 별도로 --korail-blue:#0054a6, --korail-ticket-primary:#078eb9가 정의되어 있다. CI 파랑과 서비스 버튼 파랑을 같은 값으로 덮어쓰지 않는다.

확인한 웹 값은 서비스 기본 파랑 #0054A6, 짙은 파랑 #063868·#155795, 선택 면 #E5F2FF·#D4E1F5, 옅은 면 #F4F5F9·#F5FAFF·#F6F7F8, 청록 #078EB9다. 이 값은 2026년 10월 12일 예매 웹의 style 요소에서 확인했으며, 모든 제품에 공통인 CI 규정이라는 뜻은 아니다. 단계 배열은 룩북의 이름 체계에 맞춰 다시 연결했다. 나머지 중간 단계·접근성 상태색·본문 중성색은 재현값이다. 앱의 파랑은 스토어 이미지 관찰값으로 남기고 웹의 확정값으로 승격하지 않는다.

:root {
  --brand-blue:#005BAC;
  --brand-light-blue:#00B2E3;
  --brand-gray:#77777A;
  --primary-50:#F5FAFF;
  --primary-100:#E5F2FF;
  --primary-200:#D4E1F5;
  --primary-300:#99BADB;
  --primary-400:#669FD7;
  --primary-500:#1A6DC1;
  --primary-600:#0054A6;
  --primary-700:#004986;
  --primary-800:#155795;
  --primary-900:#063868;
  --neutral-0:#FFFFFF;
  --neutral-50:#F6F7FA;
  --neutral-100:#EEF1F5;
  --neutral-200:#DDE3EB;
  --neutral-300:#C5CDD8;
  --neutral-400:#97A2B2;
  --neutral-500:#697687;
  --neutral-600:#526174;
  --neutral-700:#354356;
  --neutral-800:#233144;
  --neutral-900:#172336;
  --success:#176946;
  --success-bg:#EDF8F2;
  --warning:#825311;
  --warning-bg:#FFF6E7;
  --danger:#B5343B;
  --danger-bg:#FFF1F1;
  --info:#005BAC;
  --info-bg:#EFF7FF;
  --bg-page:#FFFFFF;
  --bg-surface:#FFFFFF;
  --bg-subtle:#F6F7FA;
  --bg-selected:#EFF7FF;
  --bg-header:#04475D;
  --bg-title:#078EB9;
  --bg-footer:#333D49;
  --text-primary:#172336;
  --text-secondary:#526174;
  --text-muted:#697687;
  --text-on-primary:#FFFFFF;
  --border-default:#DDE3EB;
  --border-strong:#97A2B2;
  --border-focus:#005BAC;
}

흰 바탕의 파란 버튼에는 흰 글자를 쓰고, 아주 연한 파란 바탕에는 진한 파란 글자를 쓴다. Light Blue는 작은 본문 글자에 쓰기보다 지도 핀의 면, 일러스트의 빛, 제목 띠의 보조색에 사용한다. 예약대기는 옅은 황색 바탕과 진한 갈색 글자로 표시하되 반드시 상태 이름을 적는다. 매진은 검은색보다 한 단계 약한 글자와 회색 면으로 남긴다. 빨강은 매진 전체를 물들이기보다 입력 오류나 결제 기한처럼 주의가 필요한 구체 상황에만 쓴다.

선택된 열차 행은 연한 파란 배경과 왼쪽 짧은 강조선으로 드러낸다. 같은 행의 시간·금액·버튼을 모두 굵은 파랑으로 만들지 않는다. 출발 시각은 본문 진한색, 일반실 운임은 강조색, 선택 상태는 얇은 면으로 역할을 나눈다. 열차 종류의 명칭은 색만으로 구별하지 않고 KTX-청룡, KTX-산천, ITX-새마을처럼 실제 이름을 함께 쓴다. 상품별 색은 명칭을 보조할 뿐, 시간표의 수직 정렬을 깨지 않는다.

| 용도 | 적용값 | 근거와 범위 | |---|---|---| | 심벌 | --brand-blue | 공식 CI의 웹 색상 #005BAC. | | 웹 주 행동 | --primary-600 | 현행 웹 --korail-blue의 #0054A6. | | 가벼운 보조 강조 | --brand-light-blue | 공식 CI 웹 색상. 작은 글자색으로 남용하지 않는다. | | 선택 행·선택 호차 | --primary-50 / --primary-600 | 공개 CSS의 색을 이 예시의 선택 상태에 연결했다. | | 웹 메뉴·제목 띠 | --bg-header / --bg-title | 제목은 공개 CSS의 #078EB9. 메뉴는 청록 위 검정 50%가 겹친 화면을 재현한 값이다. | | 매진·이용 불가 | 중성 배경·보조 글자 | 색에만 기대지 않고 글자로 상태를 반복한다. | | 기한·입력 오류 | --danger | 제품 공식 토큰이 아닌 접근성을 위한 추정값이다. |

Typography

타이포그래피

코레일체는 공식 브랜드 전용 서체이며, 현행 예매 웹의 UI는 `Noto Sans KR, arial, sans-serif`를 사용한다. 전자는 CI 전용서체 페이지와 다운로드를 확인했고, 후자는 실제 페이지의 계산된 글꼴 속성에서 확인했다. 브랜드 서체가 있다는 사실만으로 모든 화면의 본문을 그 서체로 지정하지 않는다. 이 문서의 font_primary는 서비스 UI의 근거가 있는 Noto Sans KR로 설정한다. 로고는 글꼴로 입력하지 않고 실제 벡터 경로로 삽입한다.

전용 코레일체의 한글 ㅇ은 원형이 강조되고 획 끝에는 완만한 곡선과 경사가 보인다. 영문은 원형 o와 열린 끝이 기울어진 C가 특징이다. 이 성격은 브랜드 제목과 홍보물에 어울리지만, 운임과 열차 번호는 장식을 줄인 고딕으로 읽는 편이 안정적이다. 제목은 700, 역 이름과 출발 시각은 700~800, 설명과 상태는 400~500을 기준으로 삼는다. 공개 웹의 역 입력은 약 22px·700, 열차 조회 버튼은 약 22px·600으로 확인했다. 위 제목·설명 단계와 900px 압축 화면의 크기는 이를 그대로 복사한 공식 규격이 아니라 룩북 재현값이다.

| 단계 | 데스크톱 예시 | 모바일 예시 | 목적 | |---|---|---|---| | 페이지 제목 | 24px / 1.35 / 700 | 22px / 1.35 / 700 | 승차권 예매 같은 한 가지 작업을 밝힌다. | | 역·대표 시각 | 22px / 1.2 / 800 | 20px / 1.2 / 800 | 출발지와 도착지 또는 출발 시간을 먼저 찾는다. | | 구획 제목 | 18px / 1.4 / 700 | 17px / 1.4 / 700 | 조회 결과, 좌석 선택, 여행 상품을 구분한다. | | 표·일반 본문 | 14px / 1.5 / 400~600 | 14px / 1.5 / 400~600 | 열차 간 시각과 운임 비교에 사용한다. | | 보조 정보 | 12px / 1.5 / 400 | 12px / 1.5 / 400 | 열차 번호·소요 시간·짧은 안내다. | | 작은 룩북 카드 | 7~11px / 1.15~1.35 | 카드 자체 크기 기준 | 실제 앱 본문 규격이 아닌 축소 장면 표현이다. |

숫자는 font-variant-numeric: tabular-nums를 적용한다. 06:57과 10:21처럼 서로 다른 숫자라도 행의 폭이 흔들리지 않는다. 승차권 합계는 오른쪽 정렬하고 표의 운임 버튼은 셀 가운데 정렬한다. 원 단위는 숫자와 붙인다. 출발과 도착 사이의 화살표는 시간값과 분리해 보조색으로 둔다. 상세 표의 소요 시간은 별도 열에 둔다. 작은 카드에서는 ‘2시간17분’을 시각 오른쪽에 붙여, 두 줄의 작은 글자가 겹치지 않게 한다. 숫자만 유독 넓은 영문 글꼴로 바꾸면 한국어 역 이름과 줄 높이가 어긋나므로 한 UI 글꼴 안에서 처리한다.

문장 자간은 약 -0.02em, 작은 표는 -0.015em을 기본으로 삼는다(추정). 로고와 열차 그림 속 글자를 제외한 한국어는 SVG path로 바꾸지 않고 실제 텍스트로 남긴다. 열차 명칭이 길어도 글자 사이를 과하게 조여 맞추지 않는다. 모바일에서는 명칭 아래에 번호를 내리고, 데스크톱에서는 같은 셀 안에 나란히 표시한다. KTX-청룡의 청룡 부분을 영문 별칭으로 바꾸지 않는다. 국내 승객이 실제로 보는 한글 명칭을 우선한다.

외부 글꼴을 불러오지 않는 이 예시에서는 Noto Sans KR, Apple SD Gothic Neo, Malgun Gothic, 시스템 sans-serif 순서로 대체한다. 전용 서체는 font-family: Korail, '코레일체', sans-serif처럼 사용할 수 있으나 파일을 임베드하지 않는다. 운영체제에 따라 글자 폭이 달라질 수 있으므로 버튼은 한 줄 폭을 고정하지 않고 안쪽 여백으로 크기를 만든다. 375px 화면과 280px 카드에서 별도로 줄바꿈을 확인한다.

Spacing

스페이싱

코레일 예매 화면의 공간은 조건 묶음 → 결과 행 → 다음 행동으로 나뉜다. 조건 묶음은 넓게 띄워 입력을 바꾸기 쉽게 만들고, 결과 행은 일정한 높이로 반복해 비교 속도를 높인다. 모든 구획에 같은 큰 패딩을 넣으면 한 화면에서 볼 수 있는 열차 수가 급격히 줄어든다. 현행 웹은 --spacing-2부터 시작하는 2px·4px·6px·8px 간격과 12px·16px·24px·32px 등의 단계를 실제로 제공한다. 공개 CSS의 본문 좌우 여백은 데스크톱 32px, 모바일 16px다. 아래 표는 이 중 자주 쓰는 4px 배수를 뽑은 것이다. 900px 룩북의 여백 24px와 압축 행 높이는 재현값으로 구별한다.

:root {
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --page-gutter:24px;
  --control-height:40px;
  --row-height:60px;
}
@media(max-width:600px){:root{--page-gutter:16px;--control-height:44px;--row-height:72px}}

| 관계 | 권장 간격(추정) | 적용 이유 | |---|---|---| | 아이콘과 짧은 이름 | 4~8px | 한 행동으로 읽히도록 가깝게 둔다. | | 입력 라벨과 값 | 4px | 출발역과 서울을 서로 다른 항목으로 오해하지 않게 한다. | | 결과 셀 안 두 줄 | 2~4px | 열차 번호나 소요 시간이 주 정보에 붙어 보인다. | | 조건 카드 내부 | 16~24px | 역 전환·날짜·인원을 구별하면서 한 여정으로 묶는다. | | 관련 구획 사이 | 20~24px | 결과 표와 선택 좌석처럼 이어지는 작업을 연결한다. | | 독립 서비스 구획 | 32~40px | 관광열차·할인상품·공지처럼 내용 성격이 바뀐다. |

상세 예시는 900px 폭 안에서 실제 웹의 구성 단위를 압축한 화면이다. 최상단 서비스 탭과 주 메뉴가 공간을 너무 많이 차지하지 않도록 높이를 줄이고, 조회 조건과 결과 표를 첫 480px 안에 함께 놓는다. 문서 제목과 서비스 제목을 중복해서 크게 쓰지 않는다. 열차 그림은 조회한 여정의 안내 띠에 배치하고 표와 자연스럽게 이어 붙인다. 차량 주위에 넓은 빈 여백을 남기는 대신 열차명·운행 구간·첫 출발 시간을 함께 두어 기능이 있는 그림으로 만든다.

모바일에서는 역 이름 두 개와 교환 버튼을 한 줄에 유지한다. 날짜와 인원은 그 아래 줄로 내려가며 조회 버튼은 전체 폭을 쓴다. 표를 통째로 옆으로 밀어 보게 하는 대신 열차별 카드 안에 출발·도착·운임을 다시 배치한다. 같은 정보가 다른 위치로 가더라도 항목 이름을 생략하지 않는다. 특히 일반실과 특실·우등실을 가격만으로 구별하게 만들지 않는다. 상단 내용이 길어져도 문서 전체의 가로 폭은 375px 안에 머문다.

룩북 카드의 간격은 실제 앱 터치 규격과 다르다. 280×210px 안에 장면을 보여 주기 위한 축약 표현이므로 작은 내비게이션이나 행을 실사용 모바일 컨트롤의 최소 크기로 인용하면 안 된다. 제품에 적용할 때는 40~44px 이상의 조작 영역을 별도로 확보한다. 여기서는 카드의 정보 구조와 상세 예시의 반응형 규칙을 함께 보아야 코레일 서비스의 간격 감각을 이해할 수 있다.

Border Radius

큰 검색 카드와 좌석 선택 카드는 둥글고, 결과 표의 행은 곧게 정렬된다. 현재 웹의 역 입력과 열차 조회 버튼은 2048px의 알약형이다. 공개 CSS에는 --border-radius__xs:6px, sm:8px, md:16px, lg:24px, circle:50%, full:2048px가 있다. 앱의 티켓과 호차 선택은 둥근 사각형으로 관찰된다. 한 화면에 둥근 요소가 많아도 모든 선을 같은 곡률로 처리하지 않는다. 좌석 사각형은 작게 둥글고, 전체 영역을 묶는 카드는 더 크게 둥글다. 아래 6·8·16·24·2048px는 현행 웹의 확인값이다. 표의 직선과 작은 좌석의 곡률은 예시 화면의 역할에 따라 선택한다.

:root {
  --radius-none:0;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:24px;
  --radius-pill:2048px;
}

이 예시의 데스크톱 검색 조건은 24px, 좁은 화면은 16px, 일반실 운임 버튼은 6px, 필터는 알약형을 쓴다. 호차 선택과 좌석의 곡률은 별도 재현값이다. 표의 모든 셀에 각각 둥근 외곽선을 두르면 열차 하나가 여러 카드로 분리되어 보이므로 행 전체는 평평하게 유지한다. 선택된 행의 연한 배경도 표의 열 끝까지 이어지게 한다. 큰 둥근 컨테이너 안에 다시 큰 둥근 카드가 반복되면 들여쓰기만 늘어나므로 한 단계 안쪽에서는 곡률과 패딩을 줄인다.

| 요소 | 적용 반경 | 확인 범위·예외 | |---|---|---| | 역 이름 입력 | pill | 두 입력 사이의 전환 버튼은 원이다. | | 주 행동 버튼 | pill 또는 10px | 실제 화면의 위치에 맞춘다. 웹 검색은 pill, 앱 하단은 넓은 사각형이다. | | 결과 운임 버튼 | 6px | 표 안에서 행 높이를 과하게 늘리지 않는다. | | 선택 호차 | 10px | 파란 2px 외곽선으로 선택을 보조한다. | | 좌석 셀 | 4~6px | 등받이 표시가 외곽과 겹치지 않게 한다. | | 관광·할인 카드 | 16px | 그림과 본문이 하나의 카드로 읽히게 한다. |

반경을 조정할 때는 테두리와 내부 여백을 함께 본다. 두꺼운 선택 선을 추가해도 바깥 크기가 커지지 않도록 box-sizing:border-box를 적용한다. 좌석은 선택 전후 위치가 움직이지 않아야 하고, 호차 탭의 굵기가 변해도 이웃 호차를 밀어내면 안 된다. 모서리 값 자체보다 같은 종류의 조작 요소가 같은 방식으로 반응하는 것이 더 중요하다. 상태만 바꾸기 위해 곡률을 갑자기 크게 바꾸지는 않는다.

Shadow / Elevation

코레일의 예매 화면은 강한 떠 있는 패널보다 흰 면·얇은 경계선·가벼운 그림자로 구획을 나눈다. 앱의 티켓 하단에는 부드러운 그림자가 보이지만, 열차 결과 표의 각 행은 경계선으로만 나뉜다. 조회 화면 전체에 동일한 그림자를 반복하면 표가 상품 카드 모음처럼 변한다. 정보 비교가 목적일 때는 선을 쓰고, 한 장의 승차권이나 선택 패널처럼 독립된 물체를 나타낼 때만 낮은 그림자를 쓴다. 아래 값은 관찰을 토대로 한 추정이다.

:root {
  --shadow-none:none;
  --shadow-xs:0 1px 3px rgb(23 35 54 / 5%);
  --shadow-sm:0 4px 12px rgb(23 35 54 / 7%);
  --shadow-md:0 10px 28px rgb(23 35 54 / 11%);
  --z-base:0;
  --z-floating:10;
  --z-dialog:30;
}

| 층 | 처리 | 적용 위치 | |---|---|---| | 기본 콘텐츠 | 그림자 없음, 1px 구분선 | 시간표, 공지 목록, 푸터 링크 | | 묶음 카드 | 얇은 경계선 또는 xs | 조회 조건, 할인상품 선반 | | 승차권·선택 요약 | sm | 티켓 한 장, 좌석 선택 후 요약 | | 임시 패널 | md | 날짜 선택·인원 선택처럼 잠시 겹치는 창 | | 키보드 초점 | 2px 단일 외곽선 | 버튼과 입력창의 현재 조작 위치. 그림자를 함께 겹치지 않는다. |

그림자는 상태색을 대신하지 않는다. 선택된 좌석을 더 높이 띄우기만 하면 어떤 좌석인지 알아보기 어렵다. 선택은 파란 면과 흰 글자, 필요하면 체크로 표현하고 그림자는 보조로 쓴다. 매진을 움푹 들어간 패널처럼 꾸미지 않는다. 텍스트와 회색 면이면 충분하다. 포커스 링은 카드의 그림자와 구별되는 선명한 외곽선이어야 하며, 부모 요소의 잘라내기 때문에 사라지지 않도록 안쪽 공간을 남긴다.

열차 그림 내부의 그림자는 UI 높이 체계와 분리한다. 대차 아래의 진한 면, 노즈 아래의 반사, 차체를 따라 이동하는 밝은 띠는 실제 물체의 입체감을 표현하는 층이다. 차량에 사용한 금속 그라디언트를 버튼에도 그대로 쓰지 않는다. UI는 평평한 단색으로 읽히고, 열차만 입체적인 물체로 남아야 중요한 정보와 그림이 서로 경쟁하지 않는다. 이 구분이 작은 카드에서 정교한 열차와 촘촘한 표를 함께 유지하는 방법이다.

Iconography

아이콘은 역·달력·인원·좌석·승차권처럼 행동이나 정보의 대상을 짧게 보조한다. 현재 앱의 아래 메뉴는 홈, 모빌리티, 여행, 나의 티켓, 전체메뉴 순서다. 홈은 지붕이 있는 집, 모빌리티는 차, 여행은 여행 가방, 나의 티켓은 절취선이 있는 표로 구별한다. 이 예시는 관찰한 모티프를 24×24 viewBox의 선 그림으로 다시 그렸다. 정확한 제품 아이콘 파일을 제공받은 것은 아니므로 공식 아이콘 세트라고 부르지 않는다. KORAIL 로고만은 다시 그리지 않고 실제 벡터 경로를 쓴다.

선 두께는 24px 기준 1.65~2px, 끝과 연결부는 round를 사용한다(추정). 작은 12px 표현에서는 지나치게 복잡한 내부 선을 줄이고, 달력의 상단 걸이·가방 손잡이·티켓 절취선처럼 대상을 알아보게 하는 부분을 남긴다. 동그라미 안에 서로 다른 글자를 넣어 아이콘 개수를 늘리지 않는다. 하단 탐색용 선 아이콘과 열차 그림은 크기와 목적이 다르므로 같은 그림을 단순 축소해 사용하지 않는다.

서비스 상품 그림은 탐색 아이콘과 다르다. 앱 홈의 정기권은 파란 달력, N카드는 보라색 접힌 표, 특가 혜택은 초록 할인 표식으로 구별된다. 이동·편의 화면의 길안내·주차정산·공항버스·렌터카·카셰어링·짐배송도 각자의 물체 형태와 보조색을 갖는다. 룩북에서는 이 차이를 남겨 72×72 SVG 안에 면, 옆면, 손잡이·창·바퀴, 하단 그림자를 따로 넣었다. 같은 원형 바탕에 글자만 바꾸어 넣지 않는다.

| 모티프 | 반드시 남길 형태 | 함께 쓰는 이름 | |---|---|---| | 달력 | 위쪽 걸이 두 개와 가로 구분선 | 출발일 | | 사람 | 머리 원과 어깨 곡선 | 인원 선택 | | 역 전환 | 서로 반대인 두 화살표 | 출발지/도착지 전환 | | 좌석 | 등받이와 바닥, 앞쪽 다리 | 좌석 선택 | | 승차권 | 양옆 홈과 세로 절취선 | 나의 티켓 | | 여행 가방 | 손잡이·세로 띠·작은 바퀴 | 여행 | | 알림 | 종의 외곽과 아래 받침 | 공지사항 | | 상담 | 헤드밴드와 좌우 이어컵 | 고객센터 |

선택된 메뉴는 아이콘과 글자를 함께 파랗게 바꾸고 짧은 윗줄 또는 밑줄을 더한다. 색이 바뀌는 부분의 크기는 다른 메뉴와 같게 유지한다. 전체메뉴를 햄버거 선 세 개로만 표시해도 의미는 통하지만, 작은 룩북 카드에서는 앞쪽 점과 긴 선을 함께 써 티켓 아이콘과 명확히 구별한다. 장식용 아이콘은 aria-hidden="true"로 두고 실제 행동의 이름은 버튼에 제공한다. 좌석 방향 화살표처럼 정보가 있는 아이콘은 텍스트 설명도 남긴다.

큰 청룡 그림은 공식 사진을 관찰해 차체 외곽, 지붕 하이라이트, 검은 창 띠, 개별 측창, 금색 띠, 앞유리, 와이퍼, 램프, 노즈 이음선, 대차, 팬터그래프, 선로의 여러 겹으로 만든다. 차체를 하나의 둥근 사각형으로 만들지 않는다. 측면 창만 길게 늘여도 청룡의 얼굴은 나오지 않으므로 앞유리와 노즈의 각도를 별도 곡선으로 잡는다. 창과 문, 조명의 작은 선은 축소 후에도 차체가 실제 물체처럼 보이게 하는 단서다.

Component Guide

컴포넌트 가이드

조건 입력, 열차 결과, 운임 행동, 좌석 선택을 한 흐름으로 연결한다. 코레일의 화면은 버튼 자체를 보여 주기보다 승차권 한 장을 찾고 확인하는 일을 돕는다. 아래 컴포넌트의 상태값은 공식 공개 명세가 아닌 재구성 규칙이다. 상세 예시에서 실제 클래스와 색상 변수를 사용해 연결했으며, 모든 상태를 한 화면에 견본처럼 나열하지 않는다. 기본 예시에는 선택 가능한 일반실, 매진, 예약대기와 입석+좌석이 서로 다른 역할로 등장한다.

버튼은 주 행동 하나를 분명히 한다. 조건을 고치는 구역에서는 ‘열차 조회’, 결과 행에서는 ‘좌석 선택’, 선택 요약에서는 ‘선택 완료’가 주 행동이 된다. 같은 좁은 행에 동일한 강도의 버튼을 여러 개 넣지 않는다. 일반실과 특실·우등실은 각각 운임과 상태를 보여 주고 선택할 수 있는 객실만 조작 가능하게 한다. 청룡의 객실은 우등실을 사용하므로 모든 열차에 일괄적으로 ‘특실’이라고 쓰지 않는다. 표 머리글은 ‘특실·우등실’로 묶되 행 안에서 차이를 밝힌다.

.korail-ui{font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif;color:var(--text-primary);background:var(--bg-page);font-size:14px;line-height:1.5;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.korail-ui,.korail-ui *{box-sizing:border-box}
.korail-ui button,.korail-ui input,.korail-ui select{font:inherit}
.korail-ui button{cursor:pointer}
.korail-ui h1,.korail-ui h2,.korail-ui h3,.korail-ui p{margin:0}
.korail-ui button:focus-visible,.korail-ui input:focus-visible,.korail-ui select:focus-visible,.korail-ui a:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px;box-shadow:none}
.korail-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:8px 20px;border:1px solid transparent;border-radius:var(--radius-pill);font-weight:700;line-height:1.25;transition:background var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.korail-btn-primary{background:var(--primary-600);color:var(--text-on-primary)}
.korail-btn-primary:hover{background:var(--primary-700)}
.korail-btn-primary:active{background:var(--primary-800)}
.korail-btn-secondary{background:var(--bg-surface);border-color:var(--primary-600);color:var(--primary-600)}
.korail-btn-secondary:hover{background:var(--primary-50)}
.korail-btn-secondary:active{background:var(--primary-100)}
.korail-btn-tertiary{background:transparent;border-color:var(--border-default);color:var(--text-primary)}
.korail-btn-tertiary:hover{background:var(--neutral-50);border-color:var(--border-strong)}
.korail-btn-tertiary:active{background:var(--neutral-100)}
.korail-btn:disabled,.korail-btn[aria-disabled="true"]{background:var(--neutral-100);border-color:var(--neutral-200);color:var(--text-muted);cursor:default;box-shadow:none}
.korail-btn[aria-busy="true"]{cursor:progress;opacity:.8}
.korail-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;color:var(--text-secondary);font-size:12px}
.korail-field input,.korail-field select{width:100%;min-width:0;min-height:var(--control-height);padding:8px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary)}
.korail-field input:hover,.korail-field select:hover{border-color:var(--border-strong)}
.korail-field input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
.korail-field input:disabled{background:var(--neutral-100);color:var(--text-muted)}
.korail-field .korail-help{font-size:12px;color:var(--text-secondary)}
.korail-field .korail-error{font-size:12px;color:var(--danger)}
.korail-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.korail-card.is-selected{border-color:var(--primary-600);background:var(--bg-selected)}
.korail-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:var(--radius-xs);font-size:11px;line-height:1.3;font-weight:600;background:var(--neutral-100);color:var(--text-secondary);white-space:nowrap}
.korail-badge-available{background:var(--primary-50);color:var(--primary-600)}
.korail-badge-wait{background:var(--warning-bg);color:var(--warning)}
.korail-badge-success{background:var(--success-bg);color:var(--success)}
.korail-badge-error{background:var(--danger-bg);color:var(--danger)}
.korail-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-secondary);padding:10px 14px;font-weight:600}
.korail-tab:hover{background:var(--primary-50);color:var(--primary-700)}
.korail-tab[aria-selected="true"],.korail-tab[aria-current="page"]{border-bottom-color:var(--primary-600);color:var(--primary-600);font-weight:700}
.korail-tab:disabled{color:var(--neutral-400);cursor:default}
.korail-filter{display:inline-flex;align-items:center;gap:4px;padding:5px 13px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--bg-surface);color:var(--text-secondary);font-size:12px;line-height:1.4}
.korail-filter[aria-pressed="true"]{border-color:var(--primary-600);background:var(--primary-50);color:var(--primary-600);font-weight:700}
.korail-filter:hover{border-color:var(--primary-600)}
.korail-icon{width:20px;height:20px;flex:none;vertical-align:middle}
.korail-logo{display:block;width:101px;height:auto;flex:none}
.korail-cheongryong{display:block;width:100%;height:100%}
.korail-seat{height:42px;border:1px solid var(--border-strong);border-bottom-width:4px;border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);font-weight:600}
.korail-seat:hover{border-color:var(--primary-600);background:var(--primary-50)}
.korail-seat[aria-pressed="true"]{background:var(--primary-600);border-color:var(--primary-700);color:#fff}
.korail-seat:disabled{background:var(--neutral-100);border-color:var(--neutral-200);color:var(--neutral-400);cursor:default}

| 컴포넌트 | 기본 | hover / active | 선택·사용 불가·오류 | |---|---|---|---| | Primary 버튼 | 파란 면, 흰 글자 | 더 진한 파랑으로 변한다. | 사용 불가는 회색 면, 로딩은 문구와 바쁜 상태를 유지한다. | | Secondary 버튼 | 흰 면, 파란 선·글자 | 옅은 파란 면이 생긴다. | 선택을 확정한 버튼과 혼동하지 않게 용도를 구분한다. | | Tertiary 버튼 | 중성 선과 본문색 | 배경만 조금 짙어진다. | 이전·다음 시간 탐색처럼 보조 행동에 쓴다. | | 입력 | 이름이 위에 남는다. | 선을 짙게 하며 값은 유지한다. | 오류 이유를 바로 아래 짧게 쓰고 빨간 선을 더한다. | | 열차 행 | 정렬된 시각·운임 | 행 전체를 과하게 들어 올리지 않는다. | 선택 행은 옅은 파랑, 매진 객실은 비활성이다. | | 필터 | 중성 테두리 캡슐 | 파란 테두리 | 선택은 파란 글자·면과 aria-pressed를 함께 쓴다. | | 좌석 | 흰 면과 등받이 선 | 파란 선 | 선택은 채움, 불가는 회색이며 누를 수 없다. |

결과 표의 정보는 ‘열차·출발·도착·소요·일반실·특실/우등실·선택’ 순서로 읽힌다. 실제 서비스 버전에 따라 열 순서가 달라질 수 있지만, 한 화면 안에서는 바꾸지 않는다. 열차 종류 아래 번호를 두고, 시각에는 역 이름을 작은 줄로 붙인다. 환승 결과를 추가한다면 두 구간을 하나의 직통 열차처럼 합치지 않고 중간 역과 대기 시간을 별도 행으로 보여 준다. 좌석이 없는 객실은 금액 버튼으로 표시하지 않는다. 운임만 있는 빈 칸은 구매 가능으로 오해하기 쉽다.

상태는 객실 단위로 결정된다. 같은 열차에서 일반실은 매진이고 우등실은 선택 가능할 수 있으므로 행 전체를 비활성으로 덮지 않는다. 예약대기는 매진과 다른 행동이며, 입석+좌석은 구간별 착석 조건을 확인해야 하는 상태다. 예시에서는 이 둘을 작은 상태 배지와 보조 행동으로 분리한다. 운임이 확정되지 않은 상태에서 0원을 넣지 않고 대시와 상태명을 쓴다. 0은 무료 요금으로 읽힐 수 있기 때문이다.

좌석 선택에서는 호차와 선택 수를 함께 보여 준다. 앱스토어의 호차·좌석 종류·잔여 수 구조를 따라 남은 수와 전체 수를 분리한다. 청룡의 1호차는 우등실이므로 이 예시의 일반실 선택은 4호차로 옮겼다. 공식 좌석배치도에서 확인한 4호차 68석, 5호차 74석, 6호차 68석을 쓰며 잔여 수만 설명용 예시다. A·B와 C·D 사이 통로는 실제 빈 공간으로 남기고 창측과 내측을 구별한다. 선택한 12A는 요약에도 다시 나타나야 한다. 키보드로 고른 좌석도 파란 채움과 텍스트로 같은 피드백을 제공한다. 일러스트 안의 창과 실내 좌석 번호가 같은 정보인 것처럼 연결하지 않는다.

이 데모의 버튼은 화면 구성을 보여 주는 정적 예시다. 선택 가능 상태와 비활성 상태를 마크업으로 표현하지만 실제 승차권 구매나 실시간 조회를 수행하지 않는다. 제품 구현에서는 조회 중 조건을 보존하고, 결과가 없을 때 이전 날짜·다음 날짜·조건 변경을 안내하며, 실패했을 때 입력값을 지우지 않는 흐름을 별도로 연결해야 한다. 이러한 상태를 로딩 중에 빈 목록처럼 먼저 보여 주면 사용자가 매진으로 오해할 수 있다. 처리 중과 결과 없음을 문구로 분명히 나누는 것이 중요하다.

청룡의 규격 표시는 장식용 숫자가 아니다. 320km/h급, 8량 편성, 515석은 제작사가 공개한 차량 규격이며 특정 조회 열차의 실제 운행 속도나 빈 좌석 수가 아니다. 제작사 자료도 차량의 운행 최고속도와 당시 선로에서의 실제 속도를 구분하므로, 배너에는 “320km/h급”으로 적는다. 조회 결과의 017, 06:57, 59,800원, 잔여 28석과 함께 있을 때에도 서로 다른 성격임을 유지한다. 규격은 배너 안에, 운행 예시는 표 안에, 선택한 호차·좌석은 승차권에 둔다. 작은 숫자를 같은 줄에 모두 몰아넣으면 예매 가능한 좌석 수와 차량 정원을 혼동하기 쉽다.

좌석 선택은 창측 A·D, 내측 B·C, 가운데 통로를 공간으로 보여 준다. 선택한 12A는 파란 면, 선택 불가는 옅은 회색과 비활성 속성, 빈 좌석은 흰 면으로 구분한다. 좌우에는 창문 막대를, 좌석 아래에는 짧은 등받이·팔걸이 선을 넣는다. 순방향과 역방향 범례는 같은 좌석 도형의 방향만 바꿔 설명한다. 예시로 보이는 10~14열의 방향을 전체 편성으로 확대 해석하지 않으며 잔여 수치는 예시다.

선택한 승차권은 파란 날짜 띠, 열차명, 출발·도착 시각, 절취선, 호차·좌석, 금액 순서다. 날짜 띠가 시간을 대신하지 않고, 호차·좌석은 일반실 표시와 함께 읽힌다. 절취선 양끝의 반원은 실제 종이 표를 연상시키는 재현 요소이며 코레일의 공식 치수는 아니다. 웹 조회 표 아래에 앱의 승차권 문법을 결합한 예시임을 유지한다.

관광 영역은 동해의 긴 수평 파도, 협곡의 겹친 산과 교량, 경주의 돌층과 기와지붕으로 구별한다. 관광열차 카드는 열차명·구간·시간표 확인을, 지역여행 카드는 도착역·방문지를 보여 준다. 정동진이나 첨성대를 넣었다는 이유로 그날 운행이나 여행상품 판매를 확정하지 않는다. 운휴·운행 요일·판매가는 실제 조회를 거쳐야 하는 정보이므로 이 장면에는 현재 판매가를 쓰지 않는다. 풍경 그림은 목적지를 식별하는 재현이며 노선도나 실사 기록이 아니다.

Motion

움직임은 선택과 화면 전환이 끝났다는 사실을 알려 주는 데 쓴다. 시간표의 시각과 운임이 애니메이션으로 흔들리면 비교하기 어려우므로 숫자는 즉시 안정된 위치에 나타나게 한다. 호차를 바꾸면 선택 선과 내용만 짧게 전환하고, 열차 그림은 기본 상태에서 움직이지 않는다. 빠른 열차를 표현하기 위해 계속 좌우로 달리게 할 필요는 없다. 긴 노즈와 차체의 방향성이 정적인 화면에서도 충분한 속도감을 만든다.

:root {
  --motion-instant:0ms;
  --motion-fast:120ms;
  --motion-base:180ms;
  --motion-panel:240ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,.2,1);
}
@media(prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms;--motion-base:0ms;--motion-panel:0ms}
  .korail-ui *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

| 변화 | 시간(추정) | 표현 | |---|---|---| | 버튼 hover·press | 120ms | 배경과 테두리만 변한다. | | 필터·호차 선택 | 120~180ms | 선택 선과 배경색을 바꾼다. | | 날짜·인원 패널 | 180~240ms | 짧은 페이드로 나타나고 초점을 옮긴다. | | 조회 완료 | 즉시 또는 180ms | 결과 수와 목록이 함께 갱신된다. | | 좌석 선택 피드백 | 120ms 이하 | 좌석 채움과 요약의 선택 수가 같은 시점에 바뀐다. |

로딩이 필요하면 조회 버튼의 위치와 폭을 유지한 채 ‘조회 중’이라는 문구를 사용한다. 회전 표시가 있더라도 문구를 지우지 않는다. 결과가 도착하기 전에 일반실 금액을 임의의 숫자로 카운트업하지 않는다. 운임은 한 번에 표시하고 갱신된 시점을 보조 안내로 알린다. 스크롤 위치를 갑자기 맨 위로 보내는 대신 사용자가 변경한 조건이나 선택한 열차 주변을 유지한다. 예약 단계가 넘어갈 때만 다음 단계 제목으로 초점을 옮긴다.

움직임 감소 설정에서는 모든 상태 변화가 여전히 읽혀야 한다. 페이드가 없어도 선택된 호차에는 파란 테두리가 남고 좌석에는 채움과 번호가 남는다. 사용 불가 버튼은 모션이 멈춘 버튼처럼 보이지 않도록 기본적으로 회색과 설명을 갖는다. 데모는 반복 애니메이션을 사용하지 않으며, 버튼의 짧은 색 전환도 설정에 따라 제거한다. 이 선택은 차량 이미지의 완성도와 관계없이 적용되는 UI 동작 원칙이다.

Anti-patterns

코레일 화면에서 피해야 할 것은 예쁜 빈 화면, 뭉뚱그린 좌석 상태, 부정확한 차량 모양이다. 큰 파란 배경과 로고만으로 철도 예매를 표현하면 실제 서비스를 알아볼 단서가 부족하다. 출발역과 도착역, 날짜와 인원, 열차 번호, 두 시각, 객실별 운임이 서로 연결되어 보여야 한다. 아래 항목은 이 룩북의 카드와 상세 예시를 검수할 때 함께 확인한다. 브랜드 소개 문장을 많이 넣는 것으로 서비스 정보의 부족을 보충하지 않는다.

| 피할 것 | 문제가 되는 이유 | 대신 적용할 것 | |---|---|---| | 둥근 사각형 차체와 바퀴 두 개 | 청룡의 긴 노즈와 경사진 앞유리가 사라진다. | 공식 사진의 윤곽·도장 띠·지붕 장비·대차를 여러 면으로 그린다. | | 지도와 출발 버튼 중심 구성 | 철도 시간표보다 길찾기 앱처럼 보인다. | 출도착 시각·소요 시간·열차 번호·객실별 운임을 표의 중심에 둔다. | | 모든 가격을 같은 굵은 파랑 | 시각과 좌석 상태의 우선순위가 없어진다. | 시간은 진한 본문색, 구매 가능 운임은 파랑, 대기는 별도 상태색을 쓴다. | | 매진 행을 통째로 흐리게 처리 | 다른 객실에 남은 좌석까지 사라져 보인다. | 일반실과 특실·우등실의 상태를 각각 표시한다. | | 청룡 객실을 무조건 특실로 표기 | 열차별 객실 구분이 달라진다. | 해당 행에 우등실을 명시하고 머리글에서 두 종류를 함께 안내한다. | | 예약대기와 즉시 예매를 같은 버튼으로 표현 | 좌석 확정 여부를 구별하기 어렵다. | 대기 상태 이름과 다른 배경을 함께 사용한다. | | 입석+좌석을 ‘좌석 있음’으로 줄이기 | 전 구간 착석으로 오해할 수 있다. | 원래 상태명을 남기고 구간 확인 행동을 붙인다. | | 열차 이름 대신 같은 원형 아이콘 반복 | 고속·일반 열차를 비교할 정보가 부족하다. | 실제 열차명과 번호를 텍스트로 쓴다. | | 운임을 59.8K로 압축 | 국내 승차권의 숫자 문법과 멀어진다. | 59,800원처럼 천 단위 쉼표와 원을 붙인다. | | 하단을 빈 배경으로 마무리 | 실제 서비스의 후속 정보와 흐름이 끊긴다. | 좌석·할인상품·관광열차·공지·연락처를 구획으로 이어 준다. | | 로고를 비슷한 글꼴로 입력 | 기울기와 O의 궤도, 문자 사이 연결이 다르다. | 실제 원본 SVG 경로를 사용한다. | | 관찰색과 CI 색을 모두 공식값으로 선언 | 제품 버전과 이미지 압축의 차이를 숨긴다. | 공식 CI 값, 현행 웹 CSS의 확인값, 화면 재현값을 구분한다. |

첫 화면에 작은 글자가 많다고 무조건 촘촘한 화면은 아니다. 열차별 숫자가 같은 위치에 있어야 의미 있는 밀도가 된다. 세로선과 굵은 테두리를 모든 셀에 넣으면 오히려 읽는 리듬이 끊긴다. 행 구분선과 넉넉한 숫자 정렬만으로 표를 만들고, 선택 행과 행동 버튼에서만 선명한 강조를 사용한다. 긴 안내는 표 셀 안에 넣지 않고 결과 아래 도움말로 옮긴다. 필요한 시각과 가격을 찾기 전에 설명을 여러 줄 읽게 만들지 않는다.

다크 모드는 어두운 메뉴나 차체 그림만 보고 추가하지 않는다. 관찰한 앱스토어 화면은 라이트이고 공개된 전환 장치나 공식 다크 토큰 근거를 찾지 못했다. 따라서 이 문서의 theme_modes는 light 한 가지다. 존재하지 않는 다크 판을 추정해 만들면 조사 범위를 넘어선다. 같은 이유로 전용 서체를 UI 전체에 적용하거나 미확인 색상 단계에 공식 이름을 붙이지 않는다. 확인한 내용이 적은 항목은 추정임을 밝히고 실제로 재사용할 수 있는 규칙만 남긴다.

최종 확인은 작은 카드와 넓은 화면을 따로 본다. 280×210px에서 역 이름·시각·운임이 겹치지 않는지, 320×240px에서 그림 주변만 비어 보이지 않는지 확인한다. 상세 예시는 처음 480px와 전체 길이를 모두 보고, 375px에서 표가 세로형 결과로 바뀌어 가로 넘침이 없는지 확인한다. 글꼴이 시스템 대체 서체로 바뀌어도 가격의 원과 상태명이 잘리지 않아야 한다. 이미지 원본과 비교해 청룡 앞유리·노즈·측면 창 띠가 유지되는지도 확인한다.

Sources

출처

KORAIL (코레일) 이름과 로고는 각 권리자의 상표입니다.