📌 목차

1. 호스팅
2. 산출물
3. 프로젝트 소개
4. 개발환경
5. 페이지 구성 및 기능

호스팅

✨ 메인페이지

✨ 서브페이지-공지사항

산출물

🔗 브레인스토밍

🔗 와이어프레임 및 디자인

🔗 기획서

✨ 프로젝트 소개

국내 유일한 기차예매 서비스를 제공하는 공공기관 사이트 '레츠코레일' 리뉴얼 frist프로젝트
평소에 기차예매를 이용하면서 홈페이지가 아쉽다고 생각된적이 많아 선정하였음

• 사이트 개선방향
  

  표예매탭을 눈에 뜨게 위치와 사이즈 조정

  의미없는, 중복되는 탭 제거

  코레일 디자인 가이드 색상과 폰트로 변경

  폰트사이즈 조절과 가독성 개선

  
  

• 제작기간 : 23.12.25 ~ 24.01.19

⚙ 개발환경

✨ 개발 환경

✨ 개발에 사용된 프로그램

✨ 개발 언어

📑 페이지 구성 및 기능

메인 페이지

Main visual 🎫

| 메인메뉴에 마우스 hover 효과를 주어 메인색상으로 변경하고, 하단에 서브메뉴가 펼쳐지게 함.
| 서브메뉴에도 마우스 hover 효과를 주어 background 색상이 변경하고, 글자색(메인색상), 글자굵기가 변경되도록 함.
| 승차권 예매박스는 예매탭 클릭시 각각 타이틀에 맞는 내용으로 나타나게 함.

Quick_menu

| 각 아이콘에 마우스 hover 효과를 주어 배경과 글씨의 색상이 메인색상으로 변경하고 글씨 뒤에 배경색상을 추가함.

Korail_news

| 각 아이콘에 마우스 hover 효과를 주어 배경과 글씨의 색상이 메인색상으로 변경하고 글씨 뒤에 배경 추가함.

itemTravel

| 더 알아보기 박스에 마우스 hover 효과를 주어 아이콘들에 애니메이션 효과가 나타나게 함.

itemBest

| swiper를 사용하여 슬라이드를 넣었고, 2페이지로 구성하여 각 페이지안에는 4개의 아이템박스로 구성하였음. | 다음버튼과 페이지네이션버튼 클릭시 타이틀을 변경하고, 페이지가 변경되도록 함.

Korail_sns

| Youtube 박스에 마우스 hover 효과를 주어 background-size 값을 120%에서 130%로 변경하여 이미지가 확대 되도록 함. | 다음버튼과 페이지네이션버튼 클릭시 타이틀을 변경하고, 페이지가 변경되도록 함.

서브 페이지

Login-modal

| 로그인 클릭시 로그인화면이 나타나고 background는 흐려진다.
| x버튼 클릭시 로그인화면은 사라지고 메인화면이 background는 맑아진다.

Notice

| 테이블을 사용하여 표를 작성하였고, border-collaps을 사용하여 선을 없애주었음.
| 공지사항탭과, 이벤트탭으로 나누어 각 탭을 클릭시에 해당 테이블로 변경되도록 하였음.
| 10개씩 나누어 3개의 페이지로 구성하였고, 각 번호 클릭시 해당 페이지로 이동하도록 하였음.