DEVOCEAN

[D+32] 8월 30일(금) #1

 

 

  이제 대시보드는 어느 정도 마무리가 되었고, BI 서비스 페이지를 시작해 보자. 디자인팀과 대시보드를 진행하는 동안, UI팀에서 작업한 BI 서비스 키스크린 초안을 보내 왔다.

 

 

 

 

 

 

  음.. 

  으음...

  이를 어쩐다...

 

 

  사실 대부분의 BI 서비스들이 이런 형태로 제공되고 있지만, 사실 BI(Business Intelligence) 라는건 사업에 도움이 될 수 있는 정보를 Intelligent 하게 보여주는 서비스이다. 데이터를 날 것 그대로 보여주는 것도 도움이 되기는 하겠지만, 이번 프로젝트는 마케팅 부서등의 데이터 전문가가 아닌, 일반 점주, 즉 최종 사용자(end-user)가 대상이기 때문에 가능한 쉽고, 한 눈에 볼 수 있어야 한다.

 

  그래도, 이정도로 초안 작업을 해 주면 무에서 유를 창조하는 것보다는 작업이 훨씬 수월하다. 이렇게 짧은 시간에 이 정도로 작업을 해 왔으면 다시 함께 일하고 싶은 쪽에 속한다고 볼 수 있다. 

 

 

  제일 먼저 해야 할 작업은, 

 

(1) 점주가 필요한 정보가 무엇인지, 

(2) 특히 무인 점포 상황에서 예상되는 우려사항(pain point)

 

  은 무엇인지에 대해 조사하는 것이다.

 

 

 

 

  제대로 하자면, 점주와 고객 인터뷰, 설문 조사, 편의점 데이터 수집 및 분석 등등 끝도 없겠지만, 늘 그렇듯 그럴 시간도 없고 돈도 없다. 종종 '이렇게 작업한 근거는 무엇인가' 라는 원론적인 질문을 던지는 사람들이 있는데, 질문의 의도와 그 심정은 충분히 이해하지만 돈과 시간을 주면 근거에 대해 논문이라도 쓰겠다고 말하고 싶을 때가 참 많다.

 

  내 전공은 HCI(Human-Computer Interaction)인데, 그 중에서도 인문학 쪽의 사용자 심리학이다. 갓 졸업하고 회사에 들어가 파워포인트로 그림을 그리며, 내가 뭐하는 짓인가. 나는 뭘 위해 그 공부를 하고 고생을 했던가. 이런건 그냥 학부만 졸업해도 얼마든지 할 수 있었을텐데, 차라리 일찌감치 경력을 쌓았어야 하나. 라는 생각에 한동안 회의를 느끼던 시절이 있었다. 석사든 박사든 대부분이 느껴본, 혹은 느끼고 있는 중이리라 장담해 본다.

 

  결론부터 말하면, 세상에 필요없는 경험은 없다고 말하고 싶다. 입사 1년차와 10년차에게 똑같은 뉴스기사를 던져 줬을 때, 쓸모 있는 데이터인지 아닌지를 판단하는 능력이 같다고 볼 수 있을까. 분명히 다르다. 누군가 진행해서 기사화 한 설문 결과를 보더라도, 내가 직접 설문을 만들고 삽질 해 본 경험이 있다면, 그 설문이 믿을 수 있는지, 혹은 대충 입맛에 맞게 의도한 결과인지 구분할 수 있다. 신뢰할 만한 논문인지 아닌지를 구분하는 건 말할 것도 없다. 

 

 

 

 

  UX를 하고 싶은데, 대학원을 가는게 도움이 되나요. 라는 질문을 참 많이 받는다. 고등학교를 졸업하고 기술을 배우는 것과, 대학을 가는 것 사이의 선택과 비슷하다고 보면 될 것 같다. 일찌감치 한 우물을 파서 그 기술의 장인이 되는 것과, 장인의 기술과 경력을 따라갈 수는 없지만 여러 방면에서 그 분야에 접목할 수 있도록 시야를 넓히는 것의 차이랄까. 둘 다 장단점이 있고, 사실 요즘같은 취업난 속에서는 일찌감치 기술을 배우는 게 나을 것 같다는 생각도 들어서, 결국은 본인의 선택인 것 같다. 하나 확실한 건 UX분야에서 석사까지는 취업에 이점이 있지만, 박사는 취업의 문이 확연히 줄어든다는 것 정도랄까.

 

 

 

  다시 본론으로 돌아와서,

  시간과 돈이 없을 때, 자료는 그야말로 닥치는 대로 찾아보는 수밖에 없다. 구글링은 기본이고, 뉴스 기사, 논문, 책 등등. 심지어 관련된 소설이 있으면 소설도 읽어본다. 소설도 판타지 소설이 아닌 이상 현실 세계의 자료수집을 기반 해서 쓰기 때문에 의외로 아이디어나 인사이트를 얻을 때가 종종 있다. 이렇게 여러 자료들을 계속 보다 보면, 어느 정도 내용을 추려낼 수 있게 된다.

 

 

(1) 매출  : 기본 중의 기본. 직관적인 비교(상승/하락폭) 필요

 

(2) 재방문률  : 매장에 단골고객이 많은지, 스쳐 지나가는 뜨내기 손님이 많은지에 따라 홍보/이벤트 종류가 달라짐
                       (편의점은 특성상 조금 덜 할 수 있으나, 매장 특성에 따라 재방문률의 중요도가 달라짐)

 

(3) 재고(인력)관리  : 무인 매장이더라도, 재고를 채워 넣는 부분의 자동화는 어려워서 인력이 투입되어야 함. 재고가 없는 상태가 길어지면 그만큼 매출이 하락하고, 인력을 길게 배치하면 무인매장의 장점이 사라지기 때문에, 점주나 파트타임 근무 인력을 최적의 시간에 효율적으로 투입하기 위한 데이터 필요.

 

(4) 도난 : 의도적인 도난이나, 의도하지 않은 시스템 오류 상으로 인한 미결제 부분에 대한 관리 및 사후 청구 대처 방안 필요

 

(5) 노숙자  : 무인 매장 특성상 감시 및 관리하는 인력이 없기 때문에, 필요 이상으로 매장 내에 체류하는 고객. 예를 들어, 여러 명의 학생들이 음식을 사서 매장 내에서 자리를 펴고 먹는다거나, 추운 날씨에 노숙자가 매장 내에 자리를 잡고 숙식한다거나 하는 경우가 발생할 수 있어 대처 방안이 필요

 

 

 

---

 

 

 

  기본적으로 적용되어야 할 사항을 살펴 봤으니, 이제 정리를 시작 해보자.

 

 

 

 

 

 

  일단, 업체에서 작업한 키스크린에서 일간/주간/월간의 차이는 날씨정도 였는데, 몇월 몇일에 날씨가 어땠고, 얼마를 팔았다는 건 그리 중요한 정보는 아니다. 꼭 알아야 할 일이 생긴다면, 날씨는 인터넷에서 찾아보고, 그날 매출 찾아보면 충분히 알 수 있는 정보이기도 하기 때문이다. BI 서비스에 날씨를 넣고자 하는 의도는 점주에게 '내일 비가 온다고 하는데, 비 오는 날 어떤 물건을 좀 더 채워 넣어야 할까' 를 알려주고자 하는 것이다. 그런 의미에서 주 단위의 정보는 의미가 없다고 판단했고, 날씨 정보는 일간/주간에서는 제외하고, 월간 정보에만 넣기로 했다.

 

  솔직한 느낌을 말하자면, 전반적으로 좌측의 정보들은 조금만 다듬으면 되겠지만, 우측의 정보들은 시간에 쫓겨 표현 방법에 대해 고민하지 않았다는 생각이 들었다. 이대로는 데이터를 '재가공한' BI 서비스가 아니라, 그냥 DB 사이트나 다름 없었다. 

 

 

 

---

 

 

 

  최종적으로 수정한 키스크린은 아래와 같다.

 

 

 

 

 

 

  우선 일간/주간/월간 단위는 구간/주간/월간 으로 변경 했다. 유인/무인을 혼합해서 사용하는 매장 특성 상, 하루 중 몇 시간만 무인으로 돌릴 수도 있고, 혹은 주말 내내 무인으로 돌릴 수도 있기 때문에, 0시에서 24시까지 잘라서 보는 것보다는 운영한 구간 별로 확인하는 쪽이 더 유용하다고 봤다.

 

  크게 화면은 좌/우의 두 영역으로 나뉜다.

 

• 좌측 : 매출과 구매 고객 증감, 판매 상품 순위등 직접적으로 가게 매출에 관련되는 내용이며, 
• 우측 : 냉장고(매대) 관련 정보, 재고나 매장 혼잡 등 매장 상황에 관련되는 내용이다.

 

  구간과 주간의 화면은 동일하며, 월간과의 차이는 날씨와 방문 고객 특성인데, 이 부분은 앞서 언급 했듯이, 하루나 1주일 정도의 데이터 값보다는, 1달 정도의 데이터가 모였을 때 유의미하다고 여겨졌기 때문에 월간에만 보여주도록 했다. 

 

 

---

 

 

  작업한 내용을 좌측부터 하나씩 살펴 보면,

 

  (1) 매출 / 구매 고객

 

 

 

 

 

 

   BI 서비스들을 보면 그래프의 남발이라는 느낌이 들 때가 많은데, 아무래도 '있어보이기' 때문이다. 하지만, 그 그래프가 정말 필요한가를 생각해 볼 필요가 있다. 특히나 한정된 화면에서 그래프가 많아지면, 정작 중요한 정보는 빽빽하게 들어차서 가독성이 떨어질 때가 많기 때문이다. 

 

  이번 프로젝트에서 UI 설계에 중점을 뒀던 부분은, 1) 가능한 한 페이지로 끝내도록(스크롤이 없게), 2) 선택하지 않고 한 눈에 볼 수 있도록, 3) 시각화(visualization) 하되, 의미 없는 그래프는 넣지 않을 것. 이 세 가지이다.

 

  이 세 가지와 점주에게 필요한 정보들을 조사한 내용을 염두하고 봤을 때, 기존의 데이터들은 아래와 같이 정리했다.

 

 

• 가장 중요한 정보 : 매출 총액
• 비율(percentage)을 보여주는 원형 그래프는 의미가 없으므로 삭제
• 구간 선택 시에는 이전 구간과 비교하는 등, 비교 구간이 동일해야 의미가 있기 때문에 전일/전주/전월 대비 등의 선택은 삭제
• 재방문 정보 추가
• 재고를 채워 넣을 필요가 있는 시간(재고율 최저 시간)과, 매장 내 손님이 많아 혼잡한 시간(혼잡도 최고 시간) 정보 추가

 

 

  어찌보면 밋밋해 보일 수 있겠으나, 꼭 필요한 정보만 추려서 보여주고, '있어 보이는' 그래프는 정말 필요한 곳에 넣으면 된다.

 

  한 가지 첨언을 하면, 당연한 얘기지만, 재고율이나 혼잡도와 같은 추가 정보는 넣고 싶다고 일단 넣고 보는게 아니라, 어떻게 산출할 것인지 고민해 보고 가능할 때 넣어야 한다. 재고율의 경우에는 물건이 빠져나가는 것을 카운팅할 수 있다는 것을 개발팀에게 확인 했고, 혼잡도는 카메라로 사람 계수(people counting)을 해서 들어오고 나가는 인원을 셀 수 있다고 확인 한 뒤에 넣은 정보이다.

 

 

 

---

 

 

 

  (2) 날씨 별 판매량

 

 

 

 

 

 

  그렇다면, 매출과 고매 고객 정보 데이터를 사용해 보여줄 수 있는 intelligence 한 정보는 뭐가 있을까. 이 프로젝트의 얼굴 인식 카메라에서 얻을 수 있는 정보는 성별과 연령이었다. 그리고, 부가적으로 날씨 API를 사용할 수 있다는 것 까지는 개발팀으로부터 확인 받았다. 

 

  우선 좌측의 날씨 별 판매량부터 살펴보자.

 

   '내일 비가 온다고 하는데, 비 오는 날 어떤 물건을 좀 더 채워 넣어야 할까' 에 답을 하기 위해서는, 개발팀에서 가져올 수 있는 날씨 API의 데이터를 우선 들여다 봐야 한다. 온도 / 습도 / 생활지수 / 눈이나 비가 올 확률 등등 꽤나 많은 데이터들이 있다. 어떤 데이터를 사용해야 할까. 

 

  데이터를 축적하기 위한 서비스라면 가능한 객관적인 수치를 사용할 필요가 있다. 그래야 나중에 많은 데이터가 쌓였을 때 신뢰를 높일 수 있기 때문이다. 예를 들어, 12월의 어느 날 '눈이 온다' 고 기록 되었다고 해서, 눈이 왔을까? 왔을 수도 있고, 오지 않았을 수도 있다. 왔더라도, 이 매장이 있는 지역에는 오지 않았을 수도 있다. 아니면 정말 잠시 스쳐 지나갔을 수도 있다. 이런 불확실한 정보는 데이터를 오염시킬 수 있기 때문에 피하는 게 좋다. 빨래 지수나 세차 지수들과 같은 생활지수도 마찬가지이다. 

 

  내가 선택한 데이터는 온도 / 습도였다. 객관적인 수치이기도 하고, 비교적 지역 편차가 적은 데이터이기 때문이다. 미세먼지 수치와 같은 대기질에 관련한 정보가 있다면 함께 넣는 것을 고민해 봤을 것 같다. 그랬다면 아마도 지금의 X,Y 축에 Z가 더해진 3차원 그래프가 되지 않았을까 싶다.

 

 

  일단, 데이터를 정했다면 그 데이터를 어떻게 표현할지 고민해야 한다. 복잡하지 않고, 한 눈에 알아볼 수 있도록. 어떻게 보여줄 것인가에 대한 스터디도 정석대로 하자면 끝이 없다. 여전히 돈과 시간과 인력이 없기 때문에, 또다시 끝없는 검색을 시작한다. 

 

 

  결론부터 말하자면, 아래와 같은 바둑판 형태로 결정했다. 온도나 습도를 정확한 단위로 보여줄 필요는 없다고 판단했고, 내일의 온도가 대략 'ㅇㅇ도'이고, 습도가 'ㅇㅇ%'일 때, 어떤 상품이 잘 팔릴 것인가. 를 파악할 수 있는 형태이다.

 

 

 

 

  나중에 다시 나오겠지만, 이 바둑판 형태는 매장 내의 정보에서도 반복해서 사용했다. 한 화면, 혹은 한 서비스 내에 온갖 종류의 그래프가 나오는 것은 그리 바람직하지 않다. 두어가지 형태만 사용해서 사용자가 익숙하게 읽을 수 있도록 하는 것도 필요하기 때문이다. 

 

 

  이런 그래프는 어디서 찾을 수 있을까. infographic, chart, BI service, weather graph 등등.. 지난 번에 언급한 디자인 사이트들은 물론이고, 구글링, 녹색창, 디자인 서적들, 닥치는 대로 찾다 보면 마찬가지로 가져다 쓸만한 방식이 눈에 띄기 마련이다. 얼마나 찾아봐야 하느냐고 묻는다면, 하도 찾아서 더이상 새로운게 눈에 띄지 않을 때까지 찾아보면 된다. 

 

  마음 같아서야 유려하게 움직이는 애니메이션이 들어간 그래프를 넣고 싶지만, 그런 것들은 대부분 작정하고 만든 앱이나 디자이너들의 포트폴리오에서나 가능하지, 이렇게 시간에 쫓기는 프로젝트에서는 희망사항일 뿐이다. 그리고, 애니메이션도 과하면 사용자에게 짜증을 유발하기 마련이다. 한두번 정도는 짠 하고 멋지게 흘러나오는 애니메이션이 좋을 수 있지만, 일상적으로 쓰는 서비스에서는 반복되다 보면 그 짧은 1,2초도 상당히 길게 느껴져서 불편하게 느낄 수 있다. 

 

  그렇기 때문에 애니메이션은 대부분 접속 시간이 필요한 인트로 화면이나, 서비스 중간에 데이터를 읽어올 시간이 필요할 때 띄우는 로딩 아이콘(일명 모래시계) 등에 주로 쓴다. 서비스를 고급지게 보이게 하고, 사용자의 인내심을 +1 올려줄 수 있기 때문이다. 

 

  UI 애니메이션에 대해 살펴 보고 싶다면 아래 내용을 참고하자

 

 

 

  - 구글링 검색어 : User Inteface Animation

       (ex. https://digitalsynopsis.com/design/gif-icons-menu-transition-animations/)

 

  - UI 서적 : 마이크로인터랙션

 

 

 

  마이크로인터랙션은 UI Animation 예시처럼 본격적인 애니메이션이 아니라, 아주 약간의 피드백으로 감동(?)을 줄 수 있는 디자인을 말한다. 모바일의 사진첩 끄트머리에서 쭉 스크롤을 하면, 살짝 튕겨 올라가는 피드백 애니메이션을 볼 수 있는데, 바로 그런 것들이 마이크로인터랙션의 대표적인 예이다.

 

 

 

---

 

 

 

(3) 구매 고객 특성

 

 

 

 

  상품이 어느 연령대의 어느 성별에게 팔리고 있는지를 파악하는 건 상당히 중요한 정보이다. 편의점 본사 입장에서는 마케팅(광고)이나 이벤트 타겟을 누구로 해야 할지 한정해서 효율적으로 대응할 수도 있고, 매장 입장에서는 편의점을 방문하는 주요 고객층을 파악해서 선호하는 물건을 주로 구비해 둘 수도 있기 때문이다.

 

  그렇다면, 나이와 성별은 어떻게 표현해야 할까.

 

  일단 업체에서 작업한 연령/성별 정보는 파편화 되어 있어서, BI 서비스라고 보기는 좀 어려웠다. 그리고, 화면 내의 모든 데이터에 정확히 몇 명인지, 혹은 몇 퍼센트인지를 보여주면 지나치게 복잡해 져서 어떤 정보가 중요한지 알 수 없게 되어 버린다. 

 

  정보를 재가공하지 않고, 그대로 보여 주게 되면 데이터로부터 인사이트를 얻기가 어려워진다. 예를 들어, 성별과 연령이 따로 떨어져 있으면, 20대가 2% 감소 했는데, 남성 고객이 줄어든 건지 여성 고객이 줄어든 건지, 혹은 전반적으로 줄어든건지 원인을 알기 어려워 진다. 반대로 성별을 보면, 여성 고객이 5% 증가 했을 때, 어느 연령층에서 좋은 반응을 보인 건지 알 수가 없다. 

 

 

 

  성별과 연령은 대략적인 분포가 중요한 정보이고, 혹 분석 등을 위해 정확한 수치가 필요하다면 별도의 DB에서 추출(export)할 수 있도록 해 주면 된다. 그래서, 성별과 연령을 종합적으로 한 눈에 볼 수 있도록 위와 같은 형태를 선택했다. 이 그래프로 본다면, 이 상품은 여성에게 좀 더 인기가 있고, 전반적으로 40대 전후에게 인기가 있다고 볼 수 있다.

 

 

 

---

 

 

 

 (4) 물품 판매 순위

 

 

 

 

  다음은 물품의 판매 순위이다. 점주 입장에서는 추가로 물건을 주문해서 채워 넣기 위해서 중요한 정보 중의 하나인데, 매장에 변화를 주었거나, 행사(event)를 한 뒤에 순위가 변경 되었는지 등 변화의 효과를 보기 위해서도 필요한 정보이다. 예를 들어, 8위에 있던 데자와 음료에 1+1 이벤트를 했을 때, 혹은 음료의 위치를 바꿨을 때, 판매량에 변화가 있는지를 볼 수 있는 것이다.

 

  업체에서 작업한 키스크린을 보면, '보유 냉장고'의 정보가 좀 애매했다. 필요한 정보이긴 할 것 같은데, 저렇게 나열해 두면 의미있는 정보가 될 것 같지는 않고... 코카콜라가 2번 냉장고에 있고, 페리에가 3번 냉장고에 있는걸 이런 테이블로 보는 게 과연 도움이 될까. 이 부분은 아예 별도로 빼서, '냉장고(매대)'별로 정보를 볼 수 있게 하기로 했다.

 

  그리고, 상품 별로 구매 고객 특성을 볼 수 있도록 앞에 사용했던 그래프를 그대로 적용했다.

 

 

 

 

 

---

 

 

 

이제 우측 영역을 살펴 보자.

 

To be Continued...