OptRail 본편 게시 이후의 화면 개편 · v1.0.2.3

OptRail 개발일지 2편. 판 v1.0.2.3. 작성 2026. 10. 9.

본편(글 1684)을 v1.0.1.5 로 게시한 뒤의 개발 경과를 기록한다. 열차 목록에서 고르는 입력 방식과 사이트 보관함 연동, 예매 사이트 순서의 입력 화면, 여정과 선호 조건의 두 단계 분리, 티켓 분석 탭의 확장, 추천 좌석의 여정 정보와 자료 출처, 찾기·기호·추천 세 단계와 창 크기별 배치로의 개편을 다루었다.

목적

본편 게시 이후 입력 방식과 화면 구성이 여러 차례 바뀌어 개발일지 1편의 「본편 이전」 범위를 넘게 되었다. 본 편은 v1.0.1.6 이후의 경과를 따로 묶고, v1.0.2.0 에서는 찾기·기호·추천 세 단계와 창 크기별 배치로 화면을 개편하여 본편 2편으로 게시하는 것을 목적으로 하였다.

계획

1. 개발일지 1편의 v1.0.1.6~v1.0.1.10 장을 2편으로 이관
2. 열차 목록 입력과 보관함 연동
3. 예매 사이트 순서의 입력 화면
4. 여정과 선호 조건의 두 단계 분리
5. 티켓 분석 탭 확장
6. 추천 좌석 여정 정보와 자료 출처
7. 시안 작성과 외부 생성형 AI 검토
8. 세 단계 표시, 분석 탭 이동, 즐겨찾기 이동, 창 크기별 배치
9. 본편 2편 게시
10. 게시 화면의 제목 숨김, 로고, 사이트 색조
11. 지난 열차 구분

체크리스트 15/17

개요

본 편은 본편(글 1684)을 v1.0.1.5 로 게시한 뒤의 개발 경과를 기록한다. 개발일지 1편은 「본편 이전」의 누적 기록이므로, 1편 39~43장에 있던 v1.0.1.6~v1.0.1.10 의 기록을 본 편 2~6장으로 이관하였다. 이관한 장의 표와 그림 번호는 본 편 기준으로 다시 부여하였다.

v1.0.2.0 에서는 화면을 찾기, 기호, 추천 세 단계로 개편하고, 창 크기에 따라 1단, 2단, 3단으로 배치하였다. 개편한 도구는 본편 1편을 고치지 않고 본편 2편으로 게시하였다. 판별 장 구성을 Table 1 에 나타내었다.

열차 목록과 사이트 보관함 연동 (v1.0.1.6)

2.1 수정 배경

v1.0.1.5 까지는 이용자가 출발 시각, 도착 시각, 차종을 직접 입력하였다. 예매 화면의 열차와 도구의 입력값이 어긋날 수 있으며, 차종을 모르는 이용자는 입력할 수 없는 문제가 있다. 본편(글 1684)의 게시 이후 사이트에 공공 API 중계 경로와 보관함이 마련되었다. 이에 따라 날짜와 구간을 고르면 그날 열차 목록에서 고르는 방식으로 변경하였다. 인증키는 사이트 서버에만 두며 도구에는 포함하지 않는다.

2.2 디자인 자문과 승인 검토

최초안은 열차 목록을 달력처럼 입력 묶음 안에 펼치는 방식이었다. 외부 생성형 AI 에 제시한 결과는 승인 불가였으며, 지적 사항과 반영 내용을 Table 2 에 나타내었다.

수정안을 다시 제시한 결과 승인 판정이 나타났으며, 승인과 함께 제시된 세부 사항의 반영 여부를 Table 3 에 나타내었다.

2.3 구성

1. 열차 목록. 한 줄에 출발·도착 시각, 차종, 열차 번호, 소요 시간, 어른 운임을 표시하였다. 좌석 배치 자료가 없는 열차는 흐리게 두고 「좌석 자료 없음」을 붙여 고를 수 없게 하였다. 목록은 선택한 날짜가 오늘이면 현재 시각, 아니면 입력된 출발 시각에 가까운 열차로 이동하도록 하였다.
2. 차종 연결. 열차 목록의 등급 이름을 도구의 차종 7종에 연결하였다. KTX-산천 가운데 A·B 구분이 없는 열차는 A타입으로 계산하고 「A·B 표기 없음」을 표시하였다.
3. 예외 처리. 목록을 받지 못하거나 열차가 없는 날짜(약 4주 이후)이거나 내려받은 파일로 실행한 경우 시각과 차종 행을 표시하여 직접 입력하게 하였다. 시각이나 차종을 손으로 고친 경우에는 열차 선택을 「직접 입력」으로 변경하였다.
4. 시트의 이동. 목록 안의 위치 이동이 게시판 지면 전체를 움직이지 않도록 시트 안쪽만 이동하게 하였다.
5. 사이트 보관함. 즐겨찾기는 기기에 항상 암호화하여 저장하였다. 사이트 회원의 보관함이 이미 열려 있으면 시작할 때 기기와 보관함을 맞추도록 하였다. 보관함이 잠겨 있으면 「보관함과 맞추기」 단추를 누를 때만 암호 창을 표시하도록 하였다. 별을 누를 때에는 암호 창을 표시하지 않는다. 비회원에게는 로그인하면 보관함을 쓸 수 있다는 안내를 표시하였다.

게시판 지면의 실제 목록으로 시험한 결과 서울에서 부산까지 하루 열차가 표시되었으며, 열차를 고르면 시각과 차종이 채워지는 것을 확인하였다. 보관함 연동은 보관함을 흉내 낸 시험 환경에서 확인하였으며, 실제 보관함은 회원이 보관함 암호를 정한 뒤 확인할 예정이다. 결과를 Fig. 1 에 나타내었다.

예매 사이트 순서의 입력 화면 (v1.0.1.7)

3.1 수정 배경

v1.0.1.6 의 입력 순서는 노선, 출발역, 도착역, 날짜, 열차였다. 개발자는 열차 정보의 구조에 맞는 입력 순서를 요구하였다. 날짜, 출발역, 도착역, 출발 예정 시각을 차례로 고르면 그 시각 이후 열차가 시간순으로 표시되고 차종이 자동으로 입력되는 방식이다. 코레일 예매 사이트의 승차권 예매 화면을 조회 단계까지 확인한 결과, 출발역과 도착역을 고른 뒤 출발일과 시 단위 시각(예 15시 이후 출발)을 한 창에서 고르고, 조회하면 그 시각 이후 열차 10편이 시간순으로 표시되었다.

3.2 디자인 자문과 승인 검토

최초 수정안은 열차 행 아래에 그 시각 이후 5편을 묶음 안에 바로 표시하는 방식이었다. 외부 생성형 AI 의 검토 결과는 승인 불가였으며, 지적 사항과 반영 내용을 Table 4 에 나타내었다.

수정안을 다시 제시한 결과 승인 판정이 나타났으며, 승인과 함께 제시된 세부 사항의 반영 여부를 Table 5 에 나타내었다.

3.3 구성

1. 입력 순서. 날짜, 출발역, 도착역, 출발 시각, 열차. 노선 행은 삭제하였으며 노선은 두 역으로 자동 판정하였다.
2. 역 목록. 출발역 24개를 서울·수도권, 경부선, 호남선, 전라선으로 묶어 표시하였다. 도착역은 출발역에서 갈아타지 않고 갈 수 있는 역만 표시하였다. 서울 출발에서 목포를 고르면 호남선 선형(용산 기준)으로, 광주송정에서 서울을 고르면 호남선 선형으로 계산하였다.
3. 열차 행. 열차를 고르기 전에는 「17시 이후 27편」처럼 지정 시각 이후 편수를 표시하고, 고른 뒤에는 출발·도착 시각과 차종·열차 번호를 표시하였다.

서울에서 부산, 10월 9일, 17시 이후를 고른 시험에서 시트가 17:13 열차를 맨 위로 하여 열리는 것을 확인하였다. 이 열차를 고르면 차종은 KTX 1세대로 자동 입력되었다. 결과를 Fig. 2 에 나타내었다.

여정과 선호 조건의 두 단계 분리 (v1.0.1.8)

4.1 수정 배경

v1.0.1.7 의 좌석 찾기 화면은 여정과 열차, 원하는 좌석의 두 묶음과 하단의 추천 좌석 보기 단추로 구성되었다. 개발자는 묶음 제목을 삭제하고, 여정과 열차를 고른 뒤 하단의 다음 단추로 선호 조건을 고르는 두 단계 구성을 요구하였다.

4.2 구성

1. 첫 화면. 제목 아래에 날짜, 출발역, 도착역, 출발 시각, 열차의 다섯 행만 배치하였다. 묶음 제목과 단계 번호는 삭제하였다.
2. 다음 단추. 열차를 고르지 않은 상태에서 누르면 안내 문구와 함께 열차 목록 시트가 열리도록 하였다. 열차를 고른 경우와 직접 입력을 고른 경우에는 선호 조건 시트가 열리도록 하였다.
3. 선호 조건 시트. 기존 조건 시트의 이름을 선호 조건으로 바꾸고, 위쪽에 고른 여정과 열차, 현재 조건을 한 줄씩 표시하였다. 머리의 왼쪽에는 닫기, 오른쪽에는 초기화를 배치하였으며, 맨 아래 고정 단추로 추천 결과를 열도록 하였다.
4. 결과 화면에서 다시 연 경우. 같은 시트를 쓰되 맨 아래 단추를 조건 적용으로 표시하였다.

4.3 승인 검토의 반영

외부 생성형 AI 의 검토 결과는 승인이었으며, 함께 제시된 사항의 반영 여부를 Table 6 에 나타내었다.

화면 폭 390px 과 1180px 에서 첫 화면, 열차 미선택 시 안내, 선호 조건 시트, 추천 결과, 조건 재적용을 시험하였다. 실행 오류는 발생하지 않았다. 결과를 Fig. 3 에 나타내었다.

티켓 분석 탭의 확장 (v1.0.1.9)

5.1 수정 배경

v1.0.1.8 의 티켓 분석은 햇빛, 좌석 분석, 편성도의 세 탭으로 구성되었으며, 판정 근거는 좌석 상세 화면에서만 확인할 수 있었다. 개발자는 판정 근거를 티켓 분석의 탭으로 옮기고, 편의 탭을 추가하며, 탭 이름을 눈부심, 공간, 편의, 편성, 근거로 바꾸도록 요구하였다.

5.2 구성

탭별 내용을 Table 7 에 나타내었다.

편의 탭과 근거 탭의 기준 좌석은 추천 결과에서 고른 좌석이며, 고르지 않은 경우 1위 좌석으로 하였다. 화면 폭 1024px 이상에서는 탭 없이 다섯 카드를 차례로 표시하였다. 좌석 상세 화면의 판정 근거는 유지하였다.

5.3 승인 검토의 반영

외부 생성형 AI 의 검토 결과는 승인이었으며, 함께 제시된 의견의 반영 여부를 Table 8 에 나타내었다.

화면 폭 390px 과 1440px 에서 다섯 탭과 기준 좌석 변경을 시험하였다. 실행 오류는 발생하지 않았다. 결과를 Fig. 4 에 나타내었다.

추천 좌석의 여정 정보와 자료 출처 (v1.0.1.10)

6.1 수정 배경

v1.0.1.9 의 좌석 상세 화면은 호차, 좌석 번호, 점수만 표시하였으며, 어느 날짜·구간·열차의 좌석인지 확인할 수 없었다. 개발자는 추천 좌석 정보에 구간, 시간, 열차 번호를 모두 포함하고, 판정 근거에 사용한 API 와 자료의 출처를 모두 표시하도록 요구하였다.

6.2 구성

1. 여정 정보. 추천 결과와 티켓 분석의 부제목을 두 줄(구간·날짜, 시각·차종·열차 번호)로 표시하였다. 좌석 상세에는 구간, 출발·도착 시각, 차종·열차 번호를 한 묶음으로 추가하였다.
2. 좌석 번호 복사. 복사 문구에 날짜, 구간, 출발 시각, 차종·열차 번호, 호차·좌석을 모두 포함하였다. 즐겨찾기에도 같은 여정 한 줄을 저장하여 표시하였다.
3. 자료 출처. 판정 근거 아래에 자료 출처를 접힘 항목으로 배치하였다. 항목은 열차, 좌석 배치, 선로 좌표, 태양 위치, 구름 예보(사용 시), 승강장의 여섯 가지이다. 열차는 국토교통부_(TAGO)_열차정보, 선로 좌표는 OpenStreetMap 과 Nominatim, 태양 위치는 NOAA 계산식, 구름 예보는 Open-Meteo 이다. 각 항목의 번호는 참고문헌 목록 번호와 같다. 열차 정보 API 를 참고문헌에 추가하였다.

6.3 디자인 자문과 승인 검토

최초안에 대한 외부 생성형 AI 의 검토 결과는 승인 불가였으며, 지적 사항과 반영 내용을 Table 9 에 나타내었다.

수정안을 다시 제시한 결과 승인 판정이 나타났다. 승인과 함께 제시된 좁은 화면의 겹침 문제는 여정 묶음의 줄바꿈 처리로 반영하였으며, 접힘 항목 대신 시트로 여는 방식은 보류하였다.

화면 폭 390px 에서 추천 결과, 좌석 상세, 자료 출처 펼침, 즐겨찾기 저장을 시험하였다. 실행 오류는 발생하지 않았다. 결과를 Fig. 5 에 나타내었다.

세 단계 화면과 창 크기별 배치 (v1.0.2.0)

7.1 수정 배경과 시안

v1.0.1.10 의 하단 탭은 좌석 찾기, 티켓 분석, 즐겨찾기, 설정 네 개였다. 판정 근거와 티켓 분석이 같은 내용을 두 화면에 나누어 보여 주었으며, 하단 탭만으로는 입력이 어느 단계까지 진행되었는지 알 수 없었다. 또한 게시 글에서 도구를 폭 520px, 높이 860px 이하의 틀에 표시하였다. 이로 인하여 PC 화면에서는 휴대폰 배치만 보이고, 사이트 머리에 가려 도구의 위나 아래가 잘리는 문제가 있었다.

본편에 반영하기 전에 열차 자료를 모두 더미로 둔 시안(OptRail_concept_v1.0.2.0.html)을 작성하였다. 시안을 외부 생성형 AI 에 제시한 결과는 승인이었으며, 고칠 점 4건 중 즐겨찾기 표시 개수 제한과 탭 전환 시 스크롤 보정 2건을 반영하였다. 3단 화면에서 단계 표시를 숨기자는 의견은 단계 표시를 두라는 지시와 맞지 않아 반영하지 않았다. 사용자는 시안의 방향을 승인하고, 개편한 도구를 본편 2편으로 게시하도록 지시하였다.

7.2 지시 사항과 반영

사용자 지시 5건과 반영 내용을 Table 10 에 나타내었다.

설정 아이콘은 단계 표시에서 제외되어 찾기 화면 오른쪽 위의 톱니 단추로 이관하였다. 설정 화면에는 좌석 찾기로 돌아가는 단추를 추가하였다. 탭을 바꾸면 탭 메뉴가 화면 위쪽에 오도록 스크롤을 보정하였다.

7.3 창 크기별 배치

창 크기 등급은 휴대폰 운영체제의 창 크기 기준(600, 840, 1200, 1600px)을 적용하였다. 등급별 배치를 Table 11 에 나타내었다.

넓은 화면에서는 찾기 칸이 늘 보이므로, 단계 표시의 현재 단계는 마지막으로 누른 단계를 따르게 하였다. 본편 2편의 게시 글에서는 도구 틀을 글 본문 칸 밖으로 확장하여 창 폭 전체를 사용하였다. 스크롤 막대 폭을 빼기 위하여 틀의 폭과 위치는 스크립트로 맞추었고, 높이는 창 높이에서 사이트 머리 64px 를 뺀 값으로 설정하였다.

7.4 시험 결과

시험은 게시판 지면을 흉내 낸 환경에서 실제 열차 목록 자료로 수행하였다. 창 크기는 390×844, 700×900, 1000×800, 1300×850, 1700×950, 800×420 의 6종이다. 찾기, 기호, 추천, 좌석 상세, 찾기 순으로 이동하며 단계 표시의 색과 점선, 즐겨찾는 좌석 3개와 더보기, 설정 화면의 열고 닫기를 확인하였다. 6종 모두 가로 넘침과 스크립트 오류가 없었다. 결과를 Fig. 6 에 나타내었다.

7.5 적용판의 승인 검토

적용판을 외부 생성형 AI 에 제시한 결과는 승인이었으며, 함께 제시된 의견과 처리를 Table 12 에 나타내었다.

게시 화면과 색조 정리 (v1.0.2.1)

8.1 수정 배경

본편 2편을 공개한 뒤 사이트의 글 제목 상자 아래에 도구가 놓여, PC 화면에서 위쪽 단계 막대와 아래쪽 「다음」 단추가 한 화면에 보이지 않았다. 도구 아래에는 「새 창에서 열기」, 날짜와 글쓴이, 「이 글만 따로 보기」 자리가 남아 있었다. 도구의 회색 바탕은 사이트의 크림색 바탕과 달라 두 양식이 어긋나 보였다.

8.2 지시 사항과 반영

사용자 지시와 반영 내용을 Table 13 에 나타내었다.

사이트 서버 수정 없이 글 안의 코드로 처리할 수 있어 서버 작업 지시는 만들지 않았다. 시험은 사이트 구조를 흉내 낸 화면에서 2000×900, 1300×850, 900×700, 390×844 의 4종으로 수행하였다. 4종 모두 틀의 위끝이 사이트 머리 아래, 아래끝이 창 아래와 일치하였다. 결과를 Fig. 7 에 나타내었다. 외부 생성형 AI 의 검토 결과는 승인이었다. 의견에 따라 자동 이동은 글을 연 직후 한 번만, 이용자가 아직 스크롤하지 않은 경우에 부드럽게 동작하도록 하였으며, 가장 옅은 글자색은 #8a8a85 로 어둡게 하였다.

지난 열차의 구분 (v1.0.2.2)

오전 11시 55분에 목록을 열었을 때 이미 출발한 10시대 열차도 고를 수 있다는 지적이 있었다. 출발한 열차의 좌석을 추천하는 것은 의미가 없으므로, 오늘 날짜에서 출발 시각이 현재 시각보다 이른 열차를 「지난 열차」로 구분하였다. 처리 내용을 Table 14 에 나타내었다.

현재 시각은 한국 시간 기준 분 단위로 비교하였다. 시계를 11시 55분으로 고정한 시험에서 서울에서 부산까지 86편 중 29편이 지난 열차로 표시되었으며, 첫 선택 가능 열차는 11시 58분 열차였다. 외부 생성형 AI 의 검토 결과는 승인이었다. 출발 몇 분 전부터 예매가 막히므로 여유 시간을 두라는 의견은 예매 마감 시각을 확인하지 못하여 반영하지 않았다. 안내 문구 없이 누름 자체를 막으라는 의견은 안내를 띄우라는 사용자 지시와 맞지 않아 반영하지 않았다.

v1.0.2.3 에서는 지난 열차가 회색 글자만으로는 「좌석 자료 없음」 열차와 구분되지 않는다는 지적에 따라 표시를 강화하였다. 지난 열차 줄은 빗금 바탕, 시각 취소선, 운임 자리의 「지난 열차」 표지로 나타내었다. 지난 열차와 출발 가능 열차 사이에는 현재 시각을 적은 가로줄을 두고, 목록을 열면 이 줄이 맨 위에 오도록 하였다. 결과를 Fig. 8 에 나타내었다. 외부 생성형 AI 의 검토 결과는 승인이었다. 빗금 대신 옅은 단색 바탕을 쓰자는 의견은 비활성 상태를 더 분명히 하라는 사용자 지시에 따라 반영하지 않았다. 화면 낭독기 대응 의견은 지난 열차 줄에 비활성 속성과 「지난 열차」 글자 표지가 이미 있어 추가 조치가 필요하지 않았다.

결정 필요 사항

개발일지 1편 26.1절의 검토에 따라 결정 필요 사항을 처리 시점별로 정리하였으며, 그 결과를 Table 15 에 나타내었다.

결론

v1.0.1.6 부터 v1.0.2.3 까지의 개발 경과를 정리하면 다음과 같다.

1. v1.0.1.6 에서는 날짜와 구간을 고르면 그날 열차 목록에서 고르는 입력 방식으로 변경하고, 즐겨찾기를 사이트 보관함과 맞추는 기능을 추가하였다.
2. v1.0.1.7 에서는 입력 순서를 날짜, 출발역, 도착역, 출발 시각으로 바꾸고, 시 단위로 고른 시각 이후 열차를 시간순으로 표시하여 차종이 자동으로 입력되게 하였다.
3. v1.0.1.8 에서는 묶음 제목을 삭제하고, 여정과 열차를 고른 뒤 다음 단추로 선호 조건 시트를 여는 두 단계 구성으로 바꾸었다.
4. v1.0.1.9 에서는 티켓 분석의 탭을 눈부심, 공간, 편의, 편성, 근거 탭 다섯 개로 확장하였다.
5. v1.0.1.10 에서는 추천 좌석에 구간, 시각, 열차 번호를 표시하고, 판정 근거에 사용한 API 와 자료의 출처를 접힘 항목으로 표시하였다.
6. v1.0.2.0 에서는 화면을 찾기, 기호, 추천 세 단계로 개편하였다. 티켓 분석은 좌석 상세의 판정 근거 자리로, 즐겨찾는 좌석은 찾기 화면의 열차 아래로 이관하였다. 창 크기에 따라 1단에서 3단까지 배치하고, 본편 2편으로 게시하였다.
7. v1.0.2.1 에서는 본편의 글 제목과 날짜 자리를 숨기고 도구 안에 로고를 추가하였다. 도구의 색을 사이트 색조로 바꾸고, 단계 막대와 다음 단추가 한 화면에 보이도록 틀의 높이와 위치를 맞추었다.
8. v1.0.2.2 에서는 오늘 날짜에서 이미 출발한 열차를 회색으로 표시하고, 선택하면 「지난 열차입니다」 안내만 표시하도록 하였다.
9. v1.0.2.3 에서는 지난 열차를 빗금 바탕, 시각 취소선, 표지로 구분하고, 출발 가능 열차와의 경계에 현재 시각 줄을 추가하였다.

다음 판은 Table 15 의 「지금」 항목 결정에 따라 진행한다.