검증 — 기차놀이 화면을 카탈로그 부품만으로 재조립
왼쪽은 실제 앱 스크린샷(데모 데이터, 480px), 오른쪽은 catalog.css 클래스만으로 다시 조립한 라이브 HTML.
조립 중 카탈로그에 없어서 막힌 것을 아래 표에 적고, catalog.css 끝에 "v0.1.1 승인 대기" 블록으로 분리해 추가했다.
발견한 빠진 변형 (11건 · 승인 대기)
| # | 어디서 | 무엇이 없었나 | 추가한 부품 | 판단 |
|---|---|---|---|---|
| 1 | 예매 · 날짜·시간·인원 | 값 3개를 가운데 정렬하는 행. row.half는 2열뿐 | row.thirds > .cell | 필요. 폼에서 흔함 |
| 2 | 결과 · 카드 안 열차 줄 | 44px 행은 정보 줄에 너무 높음. 헤어라인도 불필요 | row.dense, dot.sm | 필요. 밀도 변형 1개 |
| 3 | 결과 · 좌석/결제 옵션 줄 | 왼쪽 정렬 회색 12.5 본문. msg.note는 가운데, hint는 흐림 | msg.sub | 필요 |
| 4 | 결과 · 카드 하단 상태 바 | 접히는 상태 바(파랑/초록/회색/주황) 자체가 없음 | bar + 톤 | 필요. 고유 부품 |
| 5 | 설정·예매 · 행 끝 톱니·연필 | 배경 없는 아이콘 버튼 톤이 없음 | btn.plain | 필요 |
| 6 | 헤더 · 알림 종 버튼 | 아이콘 버튼 위 붉은 점 | btn.icon > .dot.alert | 필요 |
| 7 | 예매 · 예매 방식 행 | 행 안에 들어가는 폭 좁은 세그먼트. 기본 seg는 전체 폭 | seg.inline | 필요 |
| 8 | 예매 · 감시주기 상자 | 라벨 위·값 아래 선택 상자. 주 버튼 옆 | pick | 필요. 고유 부품 |
| 9 | 예매 · 소요시간 색 | 한 단어만 색을 바꾸는 수단 없음 | c-green c-orange c-red c-blue | 필요하지만 남용 주의 |
| 10 | 결과 · 섹션 제목 줄 | 배지 + 개수 형태의 섹션 제목 | section.badged | 필요 |
| 11 | 결과 · 재개·중단·삭제 버튼 | outline 아이콘 버튼에 색을 주면 톤 규칙에 밀려 무시됨 | btn.outline.c-red / .c-blue | 필요. 재조립 비교로 발견 |
근사로 흡수한 것(추가 안 함): 열차 목록 좌석칸 배지는 badge.gray로, 승차권 시각은 row.dense 라벨로,
결과 카드 열차 이름은 t-caption으로 대체. 원본과 1~2px 차이가 있으나 카탈로그 값이 기준이므로 카탈로그 쪽을 채택.
1. 설정 탭
원본 (ref/settings.png)
재조립 (catalog.css)
설정
감시 1 예약 1
계정 · 결제
로그인 계정demo@example.com
KTX 계정1234567890
KTX 결제 수단토스페이
추가 기능
구글 캘린더 연동
메일 알림
선호 옵션 설정
선호 옵션
선호 좌석 설정
KTX (상행)선호 좌석을 등록하세요
KTX (하행)선호 좌석을 등록하세요
KTX-산천A (상행)선호 좌석을 등록하세요
KTX-산천A (하행)선호 좌석을 등록하세요
KTX-산천B (상행)선호 좌석을 등록하세요
KTX-산천B (하행)선호 좌석을 등록하세요
KTX-산천C (상행)선호 좌석을 등록하세요
KTX-산천C (하행)선호 좌석을 등록하세요
시스템
코레일 호출-
2. 결과 탭
원본 (ref/results.png)
재조립 (catalog.css)
결과
감시 1 예약 1
예약1
예약10/10(토) 광주송정 → 용산
13:54→15:56 KTX (422)
좌석 옵션: 긴급(특실 우선 / 내측 우선 / 순방향 우선)
결제 옵션: 예매만
실행 중2
감시 중9/15(화) 서울 → 부산
08:12→11:03 KTX (101)
08:35→11:38 KTX-산천 (019)
좌석 옵션: 긴급(일반실 우선 / 창측 우선 / 순방향 우선)
결제 옵션: 예매만
중지9/25(금) 서울 → 강릉
05:02→07:01 KTX-이음 (832)
좌석 옵션: 긴급(일반실 우선 / 창측 우선 / 순방향 우선)
결제 옵션: 예매만
완료1
성공9/12(토) 용산 → 광주송정
13:40→16:22 KTX-산천 (415)
좌석 옵션: 선호 좌석 (실패시 일반실 우선, 창측 우선, 순방향 우선)
결제 옵션: 예매+결제(토스페이)
3. 예매 탭
원본 (ref/book.png)
재조립 (catalog.css)
예매
감시 1 예약 1
프리셋
기차 선택
2026.09.11 (금) ▼14:00 ▼1명 ▼
열차 목록
전체
14:42→17:23 2시간 41분 KTX (147)일반특실
14:49→20:09 5시간 20분 무궁화호 (1161)매진
14:58→17:47 2시간 49분 KTX (047)매진
15:19→18:38 3시간 19분 KTX (175)매진
15:23→17:53 2시간 30분 KTX-산천A (149)매진
15:39→20:32 4시간 53분 ITX-새마을 (1019)매진
좌석 옵션
조건에 맞는 자리를 좌석 상관 없이 예매합니다.
선호 옵션
예매 방식
남은 인라인 스타일 (정직하게)
재조립 HTML에 남긴 인라인 스타일은 다섯 가지다. ① 버튼 행을 박스 마진 안에 두려고 box에 그림자·배경 제거,
② 열차 목록을 카드 안에 중첩하려고 내부 box의 그림자·마진 제거, ③ 소요시간 글자 11px, ④ 시계 아이콘 버튼 46px 정사각,
⑤ 역 입력 행의 세로 정렬. 이 다섯 개는 다음 변형 후보다: box.flat(그림자·배경 없는 컨테이너), box.nested,
t-tiny(11px), btn.icon.md, btn-row.center. 승인 후 카탈로그에 넣고 인라인을 제거한다.