YEJIN LEE

“Keep turnin’ the pages”

4 minute read

SW(소프트웨어)

📄메뉴 추천 사이트

  • 어르신들이 키오스크 사용에 어려움을 느끼는 이유 중 하나가 뒷사람들의 기다림을 신경쓰기 때문

  • 키오스크를 보면서 메뉴를 고르기보다는 키오스크 이용을 기다리면서 미리 선택할 메뉴를 고를 수 있도록 도와줌

    1. 카테고리를 이용하여 원하는 메뉴를 찾지 못하고 다량의 정보에 당황스러워한다는 연구결과 존재

    2. 메뉴 추천 사이트를 통해 원하는 메뉴의 카테고리 파악해서 원하는 메뉴를 더 쉽게 찾을 수 있음

  • 최근 휴대폰은 카메라만 켜서 보여주면, QR 코드를 사용해서 충분히 사이트로 이동이 가능하기 때문에 사용이 어렵지 않음

    1. 매장 문 쪽에 QR 코드를 뽑아서 “카메라를 켜서 비춰주세요. 원하시는 메뉴를 음성을 통해 검색하실 수 있습니다” 라고 적힌 종이를 둘 예정

  • 키오스크에 마이크를 직접 넣어 검색을 하게끔 하지 않은 이유는 주변 소음으로 인식이 어려울 수 있으며, 음성인식을 이용한 메뉴 선정 후 결제까지의 시간이 오래 걸릴 수 있어, a에서 언급한 문제가 생길 수 있다고 판단

  • 화면에 맥도날드의 캐릭터를 넣은 이유는 그냥 음성인식보다는 캐릭터에 이야기할 수 있게 만들 경우, 사람에게 이야기하는 느낌을 줄 수 있어 사용하는데 어려움을 덜 느낀다고 하기 때문

  • 구현 방법

    1. 사이트에 텍스트, 이미지가 들어간 버튼을 넣어서 화면 구성을 함 (html과 css, js를 이용)
    2. 크롬의 음성API를 가져옴
      • (API: Application Programming Interface로 두 애플리케이션이 서로 통신하는 방법)
    3. 인식한 음성이 어떤 것인지 알 수 있도록 공간을 두어 음성을 하나의 변수에 넣어두고 이 글씨로 보일 수 있도록 변수를 보여주는 함수를 둠
    4. 다음 버튼을 클릭하면 confirm함수로 사용자가 입력한 메뉴가 맞는지 다시한번 팝업창을 띄우고 확인을 누르면 window.open함수가 호출되어 그 다음 창(key_.html)으로 넘어감. 이때, 음성 데이터에서 변환된 텍스트 데이터는 로컬스토리지에 저장되어 함께 넘어감
    5. 로컬스토리지에 저장되어 있는 데이터를 변수에 저장하고, indexOf함수를 호출하여 변수가 포함된 메뉴 이름에 해당하는 사진을 배열에 삽입함
    6. 창이 onload될 때, 배열에 저장되어 있던 사진을 출력함

📄조리시간 계산

  • 사람들이 메뉴를 고를지 말지 혹은 어떤 메뉴를 고를지결정할 수 있도록 하나의 기준?을 주는 것

  • 자신이 생각하는 시간에 맞게 메뉴를 선택할 수 있도록 도와줌

  • 구현 방법

    1. CountDown
      1. 시간이 밀리세컨드(ms)의 단위로 넘어옴
      2. onTick 함수 = 설정한 기간마나 호출되어 시간이 줄어들도록 함
      3. 예를 들어서, 1분으로 지정했다면, 1분마다 함수가 호출되어서 6분 -> 5분으로 표기될 수 있도록 함
      4. onFinish 함수 = 타이머가 끝났을 때 호출되는 함수로 여기서는 타이머가 종료되었을 때, “조리 중인 음식이 없습니다”라는 텍스트가 출력될 수 있도록 함
      5. 메뉴 버튼을 누를 때, LeftTime 변수에 해당 메뉴의 시간이 추가될 수 있도록 함. 마지막으로, 계산을 했을 때, FinalTime에 추가되도록 함 (즉, 계산이 완료되지 않으면, FinalTime에 추가되지 않음)
      6. 시간의 경우, 메뉴 버튼에 직접 LeftTime + 시간이라는 코드를 추가하여 버튼을 누를 시, 시간이 더해질 수 있도록 함

📄메뉴판 UI 디자인

  • 어르신들이 메뉴판을 읽기 편할 수 있도록 메뉴판 UI에 변화를 줌
    1. 글씨크기를 더 키움
    2. 버튼의 색을 순색으로 바꿈(시각적으로 순색의 인식이 편하다는 연구 결과가 있음)
    3. 메뉴가 영어와 한국어의 혼합으로 되어 있어 혼란스럽다는 연구가 있어, 길고 영어로 된 메뉴를 한국어로 표기하여 음식을 파악할 수 있도록 도와줌

  • 어르신들이 장바구니에 이동하지 않고도, 장바구니에 메뉴가 추가되었는지 확인하지 못해, 어려움을 느낀다는 설문조사 있음

  • 메뉴를 선택시, “00메뉴가 선택되었습니다”라는 메세지(알람)을 추가하여 선택한 메뉴가 확실하게 장바구니에 들어갔음을 확인시켜줌
  • 모든 과정에 버튼이나 알람표시를 두어 주문을 하는 방법을 알 수 있도록 함
    1. 주문 시작 방법을 찾지 못하는 경우가 절반이라는 연구 결과 존재
    2. 장바구니 이동이라는 버튼을 통해 다음 단계로 이동이 가능하다는 것을 시각적으로 표시
  • 구현 방법
    1. 버튼, 글씨 크기 키우는 것은, 버튼의 width, height 및 textSize의 숫자를 증가시킴
    2. 버튼의 순색의 경우, background를 투명한 정도나 RGB 숫자를 조정하여 눈에 띄는 색으로 지정하였음
    3. 메뉴가 장바구니에 들어갔음을 알려주는 메세지의 경우, Toast.makeTest라는 함수를 사용하여 메세지가 하단에 나올 수 있도록 함

📄메뉴 선택 과정

  • 메뉴를 선택하는 과정이 너무 길어서 힘들다는 연구결과 존재 선택과정을 줄여서 이 부분을 해결하고자 함 (구현을…못한듯 합니다…ㅠ)

  • 원래 구현할 생각

    • 메뉴 버튼을 누르면, 화면이 전환되는 것이 아니라 작은 화면이 등장하여 포장여부 등을 따로 선택할 수 있도록 할 예정이었습니다.

📄키오스크 구현

  • 메뉴판
    1. 탭을 이용하였음
    2. TabLayout을 이용하여 (버거/디저트….) 등의 글씨가 적혀있는 탭을 만들었음
    3. ViewPager를 이용하여 탭을 눌렀을 때, 나오는 메뉴판을 보여줌
    4. 장바구니 버튼을 만들어서, 장바구니(CartActivity)로 이동할 수 있도록 Intent 및 startActivity를 이용함
    5. startActivity의 경우, 설정한 Intent를 열어주는 함수
    6. Viewpager의 메뉴판의 경우, Linearlayout과 RelativeLayout을 이용하여 위치를 잡아줌
    7. LinearLayout: 수직/수평으로 알아서 원하는 내용이 들어감
    8. RelativeLayout: 하나의 텍스트를 기준으로 들어갈 내용의 위치를 잡아줘야 함
    9. 버튼은 이미지 버튼으로 크기(width/height), 위치(margin)을 잡아주었음. 그리고 버튼을 눌렀을 때, Toast.makeTest로 “00메뉴가 장바구니에 들어갔습니다”라는 메세지를 출력하고, 선택한 메뉴의 가격과 이름이 arrayList에 push됨 (이때 arrayList는 static으로 선언됨)
  • 장바구니
    1. 생성자가 arrayList가 선언되어 있는 액티비티의 Context를 인자로 전달받아 배열 데이터에 접근이 가능하도록 함
    2. 접근한 배열을 반복문을 돌면서 LinearLayout에 메뉴 이름과 가격을 작성한 TextView를 추가하도록 함. 이때 주문량을 고려해 ScrollView를 적용시켰음
    3. 반복문을 돌며 총 가격이 저장될 변수에 가격을 더해주고, 주문 내용 하단에 총 결제 가격을 TextView로 추가함
    4. 맨 아래 하단 결제버튼을 클릭하면 Intent 객체를 생성하여 결제창인 PayActivity로 넘어가도록 함
  • 결제방법
    1. 결제방법으로는 일반적으로 많이 사용하는 카드, 쿠폰, 모바일쿠폰 세 가지로 구분함.
    2. 카드 클릭 시, 카드 결제 기능을 흉내낸 show()를 호출함. show() 함수가 호출되면 다이얼로그 객체를 생성하고, “결제하시겠습니까?” 라는 메세지를 출력함. “결제” 버튼을 클릭하면 스레드 임시객체를 생성하여 잠시 3초간 sleep하여 기다림. 이 시간으로 카드를 꽂고 결제하는 것을 대체함. 그 후 결제완료 메세지를 띄우고 Intent 객체를 생성하여 종료창(ENDActivity)으로 넘어감. 이때 “결제”버튼이 아닌 “취소”버튼을 클릭하면 결제실패 메세지를 띄우고 넘어가지 않음
    3. 쿠폰 클릭 시, 마찬가지로 다이얼로그를 생성하고 버튼을 입력받는 EditText를 추가함. 사용자가 번호를 입력하고 확인 버튼을 클릭하면 그 후는 카드와 마찬가지의 프로세스가 진행됨. 이하 취소 버튼도 같게 처리됨
    4. 모바일 쿠폰 클릭 시, 다이얼로그를 생성하고 “바코드를 가까이 대주세요”라는 메세지를 출력함. “결제” 버튼을 클릭하면 카드 결제와 마찬가지의 프로세스가 진행됨(스레드로 3초간 sleep하고 다음으로 넘어감). 취소 버튼도 같음
  • 포장여부 선택
    1. Button의 텍스트, 위치, 크기등을 지정함
    2. 버튼을 눌렀을 때, 다음화면 즉, 메뉴판으로 이동해야하기 때문에 intent와 startActivity를 이용하여 열어줌
    3. 종료

📄기대효과

  • 어르신들의 키오스크 사용 혹은 접근에 대한 어려움을 느끼는 이유를 분석 후, 그 원인을 해결했기 때문에 다방면에서 접근성을 높일 수 있음

  • 궁극적으로 키오스크의 사용률을 높여, 인건비를 줄일 수 있음 현 추세에 따르면, 점차 키오스크를 사용할 확률이 높은데 이러한 추세에 사회적 약자들이 뒤떨어지지 않고 키오스크를 사용할 수 있도록 도와줌(고령화 시대에 맞춰나갈 수 있음) 키오스크 어려움으로 사회적 활동을 못하는 경우가 있다고 함.

  • 고령층의 사회적 활동을 증가시켜 고령화 시대에도 경제적 활동량이 줄어들지 않도록 하는데 도움이 될 수 있을 것이라고 생각함

  • 장애인, 노약자를 위한 키오스크를 도입하는데 예산이 부족하다고 하는데, 우리가 만든 키오스크의 경우 단가가 낮기 때문에 활용 방향이 많음

📄발전가능성

  • 화면 전환이 아니라 체크박스 혹은 라디오 버튼 등으로 세트 유무 결정, 포장유무 결정, 사이드 결정등을 화면 전환 없이 결정할 수 있도록 함
  • 이러한 키오스크를 매장 뿐만 아니라 어르신들이 많이 다니는 찜질방, 주민센터 등에 적용할 수 있음

You may also enjoy