- 2023-2학기 융합캡스톤디자인 강의에서 진행한 프로젝트입니다.
- 디지털 취약계층을 위한 키오스크 학습 서비스를 제공하는 웹사이트입니다.
- https://github.com/ssyyoonn/doki-pj
- 'step'이라는 변수로 사용자의 상태를 제어합니다.
- 스텝에 따라 요소들에 시각적 효과를 주어 사용자가 어떤 부분을 눌러야 할지 알 수 있습니다.
- 서비스에서 제공하는 흐름에 따라 맞는 요소들을 선택하면 종료되는 간단한 프로세스입니다.
출발역 지정(광주송정) → 도착역 지정(용산역) → 출발일 지정(접속일 기준 다음날) → 인원수 지정(성인 1명으로 고정) → 열차 조회 → 열차 시간대 선택(13:28 출발) → 좌석 선택(7A) → 예매
순으로 진행
음료 카테고리 선택 → 메뉴 선택(녹차라떼) → 결제 버튼 선택 → 먹고 가기 버튼 선택
순으로 진행
- 사용자의 자유도가 넓게 보장되어, 모든 선택지를 사용자가 선택 가능합니다.
- 카페 키오스크의 경우, 도전 과제가 주어지고 도전 과제에 맞는 메뉴만 선택했을 시 도전 모드 플레이가 종료됩니다.
- 출발역과 도착역이 광주와 용산으로 제한되었던 연습 모드와는 달리, 화면에 표시되는 모든 지역 선택 가능
- 선택지의 순서 제한 없음(출발역 지정 전 날짜 먼저 지정 가능)
- 출발일로 고를 수 있는 날짜의 범위도 접속날짜 기준 한달 이내로 넓어짐.
- 첫 페이지 랜더링 시 랜덤하게 도전 과제가 주어짐
React
,CSS
,JavaScript
datepicker
: 기차표 예매 어플을 구현할 때, 기차의 출발일을 선택하는 기능을 위해 사용했습니다.- 사용자의 선택에는 자유도를 부여하고, 도전 모드를 종료하기 위한 조건을 설정해 특정 행동을 했을 때만 도전모드가 종료되도록 함
- 도전 과제를 통해 도전 모드에 연습 모드와의 차별점 생성, '키오스크 학습 사이트'라는 서비스의 목표 강조
git clone 'https://github.com/ssyyoonn/doki-pj.git'
npm install
로 node package 다운로드npm start
로 로컬에서 플레이
- 주의사항: 로컬 플레이 시 코드 수정 필요
- 이미지의 절대경로
(https://ssyyoonn.github.io/doki-pj/이미지 폴더/이미지 이름.png)
를/이미지 폴더/이미지 이름.png
형태로 수정 필요package.js
파일 내부의"homepage": "https://ssyyoonn.github.io/doki-pj/"
항목 삭제 필요
- 카페 키오스크 페이지의 이미지는 이디야 홈페이지 내의 상품 이미지를 사용했습니다.
- 크롬(Chrome)으로 접속 시, 다크 모드가 적용된 경우 스타일이 제대로 적용되지 않을 수 있습니다.
- 모바일 웹앱 최적화 화면으로 구성되어 여러 스마트폰 기기에서 반응형으로 작동하지만, 데스크탑에서도 플레이 가능하도록 했습니다.