카카오톡 분석기 개발 후기

무엇을 개발하였는지

주요 기능

• 카카오톡 대화내역 텍스트파일의 주요 정보 요약 (몇명이 언제부터 언제까지 몇개의 메시지를 보냈는지)

• 카카오톡 대화내역 엑셀 추출 기능

• 대화 메시지에서 자주 나오는 키워드를 word cloud로 표현

• 각 유저별 입장내역, 퇴장내역, 메시지 발신 횟수

• 유저별 월별 메시지 발신횟수 표시
• 오픈채팅방 운영자 입장에서 눈팅족 / 미활동자 선별 가능

구현해본 CSS

• CSS Loader (사실 업로드 되는 순간 바로 작동이 가능하지만, User Expectation 관리를 위해 의도적으로 2초간 딜레이 줌)

• Fade in Transition (버튼을 클릭하거나, 특정 동작을 수행한 뒤에 어떤 element가 표시되도록 하는데 그 속도를 조절하기)

• Drag /Drop (또는 업로드 버튼)으로 파일 업로드 및 인식

• Array로 엑셀로 내보내기 (sheetjs 라이브러리 이용

• Wordcloud 구현 (d3.cloud 라이브러리 이용)

왜 개발하게 되엇는지

작동원리 간단 설명

• source of truth (one source) - multi use의 개념을 확실하게 구현해보고 싶었음

• 뿌려지는 모든 구현방식은 하나의 소스 = 텍스트파 일에서 비롯됨

• 그 텍스트 파일을 읽고, 다른 곳에서 소비하기 좋은 형태로 변환해주고 global object로 저장해주고, 여기 저기서 사용하는 것
소비하기 좋다의 의미 : date parsing, object로 추상화, 주요 변수는 property로 저장해두기
 

개발 과정에서 느낀 것

• 판다스, 엑셀에서 하던 pivot table 등 데이터 가공을 vanila javscript에서 구현하려다 보니까 매우 어려웟음
• 이 부분은 유형화 / 모듈화해서 추후 프로젝트에서도 사용
code
const groupSumBy = (data, key, valueKey) =>
    data
      .sort((a, b) => a[key].localeCompare(b[key]))
      .reduce((total, currentValue) => {
        const newTotal = total;
        if (total.length && total[total.length - 1][key] === currentValue[key])
          newTotal[total.length - 1] = {
            ...total[total.length - 1],
            ...currentValue,
            [valueKey]:
              parseInt(total[total.length - 1][valueKey]) +
              parseInt(currentValue[valueKey]),
          };
        else newTotal[total.length] = currentValue;
        return newTotal;
      }, []);
 

• 텍스트 데이터 처리에서는 정규표현식이 정말 정말 많이 느꼈음

• 역시 직접 개발을 해야 남는게 많음

• 이번에는 아주 간단한 프로젝트였지만, 조금만 고도화되어도

• 사람들이 왜 React 같은 Framework를 쓰는지 이제 이해가 되었음
• 단순 자바스크립트만으로는 코드 관리가 너무 어려움, 어디에 어떤 기능을 하는 코드가 있는지 기억이 안남
• component 별로 묶어서 따로 생각할 수 있고, 따로 관리를 해줄 수 있게 해주니까 좋은 것같음

• 그럼에도 불구하고 vanila Javascript로 프로젝트를 해보는 것ㅇ느 모두에게 강추

• 실제로 브라우저가 어떻게 돌아가는지, DOM (Document Object Model)이 어떻게 만들어지는지, Callback 함수는 무엇인지 등을 알 수 있음

• React보다 low level이기 때문에 브라우저가 어떤 식으로 사이트와 상호작용하는지 알 수 있음

• 일단 2 ~ 3 개 project 더 해보고 react project로 다시 넘어가는 것도 좋을 수 있음

• 시각화는 잠시 보류하기로 했음

Todo ? 향후 보완하고 싶은 부분

• MVP 이니까 실제 사용자들의 의견이나 추가 요청사항을 들어보는 쪽으로

• word cloud는 매우 조잡함→ 실제 tokenizer 를 브라우져 상에서 활용할 수 있는 방법은 없는지 확인해보기

• 자바스크립트 시각화의 최고봉은 d3.
• 조금만 고도화된 대시보드를 봐도 라이브러릴르 쓰는 것이 아니라 100% customizing이 가능한 d3 라이브러리 이용
• word cloud도 d3 기반이지만 코드를 계속 볼 예정

기타

내 개인정보가 빠져나갈 위험은 없는지?

• 해당 코드는 서버랑 인터렉션이 없고 오로지 브라우저에서 작동됨

• JavaScript 등 코드만 다운이 되면 인터넷이 끊긴 상태에서도 앱은 작동하고 분석결과 도출 가능

• 코드는 오픈소스이고 깃헙에 다 공개되어 있고, 사이트 도메인도 깃헙

한계점 / 향후 개선사항

1. 동명이인 구분이 안됨 오픈채팅방에서는 야 야 야 야 이렇게 여러명이 같은 이름으로 존재할 수 있는데, 한명으로 간주되고 한명의활동으로 기록됨
• 본 앱을 제대로 활용하고자 하는 방장들은 방 내의 유저들이 서로 다른 닉네임을 가질 수 있도록 유도해주는 것도 좋음

2. 오픈채팅방 기준으로 갭라을 시작하다 보니 ~님 , ~ 님을 초대하였습니다와 같은 문구로는 입장내역 파악이 안됨
1. 이 부분은 향후 보완해볼 예정

3. 모든 에러에서 자유롭지 못함 주로 정규식을 이용해서 어떤 문자가, 어떤 문구가 들어갔는지 아닌지를 이용해서 구분하는데, 이렇게 구분하다 보니까 구분이 완벽하지 않음
1. 어쩔 수 없고, 더 나은 개선사항이 있으면 점진적으로 개선해 나갈 예정

4. 워드 클라우드 글씨가 깨지고 이쁘지 않음
1. 다른 사람의 코드를 그대로 쓰고, d3 라이브러리를 아직 제대로 사용하지 못해서 그런 상황
2. 이 부분 향후 보완해볼 예정