ssyyoonn / doki-pj

도와줘요 키오스크

✅ 도와줘요 키오스크

• 2023-2학기 융합캡스톤디자인 강의에서 진행한 프로젝트입니다.
• 디지털 취약계층을 위한 키오스크 학습 서비스를 제공하는 웹사이트입니다.
• https://github.com/ssyyoonn/doki-pj

---

서비스 소개

1. 연습하기

• 'step'이라는 변수로 사용자의 상태를 제어합니다.
• 스텝에 따라 요소들에 시각적 효과를 주어 사용자가 어떤 부분을 눌러야 할지 알 수 있습니다.
• 서비스에서 제공하는 흐름에 따라 맞는 요소들을 선택하면 종료되는 간단한 프로세스입니다.

  🚆 기차표 예매 어플

• 출발역 지정(광주송정) → 도착역 지정(용산역) → 출발일 지정(접속일 기준 다음날) → 인원수 지정(성인 1명으로 고정) → 열차 조회 → 열차 시간대 선택(13:28 출발) → 좌석 선택(7A) → 예매 순으로 진행

  ☕ 카페 키오스크

• 음료 카테고리 선택 → 메뉴 선택(녹차라떼) → 결제 버튼 선택 → 먹고 가기 버튼 선택 순으로 진행

2. 도전하기

• 사용자의 자유도가 넓게 보장되어, 모든 선택지를 사용자가 선택 가능합니다.
• 카페 키오스크의 경우, 도전 과제가 주어지고 도전 과제에 맞는 메뉴만 선택했을 시 도전 모드 플레이가 종료됩니다.

  🚆 기차표 예매 어플

• 출발역과 도착역이 광주와 용산으로 제한되었던 연습 모드와는 달리, 화면에 표시되는 모든 지역 선택 가능
• 선택지의 순서 제한 없음(출발역 지정 전 날짜 먼저 지정 가능)
• 출발일로 고를 수 있는 날짜의 범위도 접속날짜 기준 한달 이내로 넓어짐.

  ☕ 카페 키오스크

• 첫 페이지 랜더링 시 랜덤하게 도전 과제가 주어짐

---

🔧 사용 기술

메인 기술

• React, CSS, JavaScript

기타 라이브러리

• datepicker: 기차표 예매 어플을 구현할 때, 기차의 출발일을 선택하는 기능을 위해 사용했습니다.
• 사용자의 선택에는 자유도를 부여하고, 도전 모드를 종료하기 위한 조건을 설정해 특정 행동을 했을 때만 도전모드가 종료되도록 함
• 도전 과제를 통해 도전 모드에 연습 모드와의 차별점 생성, '키오스크 학습 사이트'라는 서비스의 목표 강조

---

🔍 사용 방법

1. 배포된 웹사이트를 통해 플레이

• 웹사이트 바로가기

2. git clone 을 사용한 로컬에서의 플레이

1. git clone 'https://github.com/ssyyoonn/doki-pj.git'
2. npm install로 node package 다운로드
3. npm start로 로컬에서 플레이

• 주의사항: 로컬 플레이 시 코드 수정 필요

1. 이미지의 절대경로(https://ssyyoonn.github.io/doki-pj/이미지 폴더/이미지 이름.png)를 /이미지 폴더/이미지 이름.png 형태로 수정 필요
2. package.js 파일 내부의 "homepage": "https://ssyyoonn.github.io/doki-pj/" 항목 삭제 필요

---

📍 기타

• 카페 키오스크 페이지의 이미지는 이디야 홈페이지 내의 상품 이미지를 사용했습니다.
• 크롬(Chrome)으로 접속 시, 다크 모드가 적용된 경우 스타일이 제대로 적용되지 않을 수 있습니다.
• 모바일 웹앱 최적화 화면으로 구성되어 여러 스마트폰 기기에서 반응형으로 작동하지만, 데스크탑에서도 플레이 가능하도록 했습니다.