카카오 돋보기(Kakao Magnifying Glass) 프로젝트

카카오 돋보기(Kakao Magnifying Glass)란? - 프로젝트 소개

카카오 돋보기 프로젝트는 카카오톡 대화를 가져와서 분석하는 웹 애플리케이션입니다. 

카카오톡 대화를 txt 파일로 가져와서 해당 파일을 분석하면, 여러 채팅방에 대한 대략적인 정보를 확인할 수 있습니다. 

사용자는 분석된 각 채팅방을 클릭하여 손쉽게 상세 정보를 확인할 수 있습니다.

KakaoTalk 대화 분석 도구로써 .txt 형식으로 저장된 KakaoTalk 대화를 분석하고, 분석한 대화를 시각화하여 정보를 제공합니다.

 

사용된 기술은? - 기술 스택

카카오 돋보기 프로젝트는 다음과 같은 기술 스택을 사용합니다.
React

TypeScript
Styled-components 
Redux Toolkit
Recharts

React-Tagcloud

 

카카오 돋보기 프로그램 화면

KakaoTalk 대화 txt 파일 업로드
다양한 정보 시각화 기능 (일일 대화량, 시간대별 대화량, 단어 빈도수 등)
각각의 채팅방 클릭 시 상세 정보 제공

 

개발일지

1. 카카오 돋보기 아이디어 구상

여러 개의 채팅방 데이터를 종합적으로 분석합니다.

• 파이 그래프로 채팅방 별 비율을 나타냅니다.
• 파이 셀을 선택하여 상세한 정보를 볼 수 있습니다.
• 대화자, 총 대화 수, 가장 많은 대화 시간대, 일 평균 답장까지 걸리는 시간

상세 분석 페이지에서 확인할 수 있는 정보는?

• 대화 비율(파이 그래프)
  대화 비율을 그래프를 통해서 누구의 대화가 많은지 쉽게 알아볼 수 있습니다.
• 특정 기간 대화량(스택 바 그래프)
  일정 기간 동안 얼마만큼의 카톡을 주고받았는지 대화의 추세를 알 수 있도록 스택 바 그래프로 알 수 있습니다. 
• 자주 대화하는 시간대(스캐터 그래프)
  무슨 요일, 어느 시간대에 주로 카톡을 주고받는지 확인할 수 있습니다.
• 자주 사용하는 키워드(태그 클라우드)
  카톡을 주고받을 때 이용자들이 주로 키워드를 확인할 수 있습니다.

 

2-1. 텍스트 메시지 분석을 위한 메시지 데이터화

데이터 시각화를 위해서 필요한 정보를 다음과 같이 정리합니다.

• 작성자 이름
• 날짜
• 시간
• 답장까지 걸리는 시간
• 키워드

 

한 채팅방의 메시지의 분석을 마친 정보를 위와 같은 형태로 저장하기로 합니다.

• speaker: 작성자의 이름
• message: 메시지에 담긴 데이터
• date: 날짜
• chatTimes: 특정 시간에 보내진 메시지의 갯수
• keywordCounts: 특정 키워드의 갯수
• replyTime: 답장까지 걸리는 시간을 구하기 위한 시간과 답장 횟수

 

필요한 메시지 라인을 골라내야 합니다. 

텍스트 파일은 위의 사진과 같은 형태로 되어 있습니다.

 

 

const regex = /^\d{2,4}\. \d{1,2}\. \d{1,2}\. (오후|오전) \d{1,2}:\d{1,2}, (.+?) : /;

 

/**

 * txt파일에서 추출한 str을 넣으면 라인을 담은 배열 반환합니다.

 * @param {string} line - 추출한 문자열

 * @return {string|boolean} - 라인을 담은 배열 또는 false (라인이 유효하지 않은 경우)

 */

const filterMessageLine = (line: string) => {

  line = line.trim();

  if (!regex.test(line)) {

    return false;

  }

  return line;

};

 

메시지는 일정한 형식으로 이루어져 있기 때문에 해당 형식을 만족하는 라인을 골라내면 이용자의 메시지와 구분할 수 있게 됩니다.

 

2022. 12. 31. 오후 10:55, 영한 : 다듣기!
2022. 12. 31. 오후 10:55, 영한 : 챌린지
2099. 12. 31. 걸러져야 할 메시지
2023년 1월 1일 일요일
2023. 1. 1. 오전 12:18, 영한 : 새해

 

⬇⬇⬇필터링결과⬇⬇⬇

2022. 12. 31. 오후 10:55, 영한 : 다듣기!
2022. 12. 31. 오후 10:55, 영한 : 챌린지
2023. 1. 1. 오전 12:18, 영한 : 새해

 

 

2-2. split을 이용하여 메시지를 이용하고자 하는 객체 형태로 만들어 줍니다.

 

/**

 * 라인 배열에서 데이터를 추출합니다.

 * @param {string[]} filteredMessageLineArray - 필터링된 라인 배열입니다.

 * @returns {Array<object>} - 라인 배열에서 추출된 데이터 객체의 배열입니다.

 */

const getDataObjectFromLines = (filteredMessageLineArray: string[]) => {

  const originMessageData: OriginMessageData[] = [];

  for (const line of filteredMessageLineArray) {

    const [dateTime, content] = line.split(", ", 2);

    const [year, month, day, time] = dateTime.split(". ");

    const [fullHour, minute] = time.split(":");

    const [meridiem, hour] = fullHour.split(" ");

    const hour12 = hour === "12" ? "0" : hour;

    const [speaker, message] = content.split(" : ");

    const keywords = message.split(" ").map((word) => word.trim());

 

    originMessageData.push({

      date: `${year.slice(-2)}${formatValue(month)}${formatValue(day)}`,

      hour: meridiem === "오전" ? formatValue(parseInt(hour12)) : (parseInt(hour12) + 12).toString(),

      minute: formatValue(minute),

      speaker,

      keywords,

    });

  }

  return originMessageData;

};

const formatValue = (value: String | Number) => {

  return value.toString().padStart(2, "0");

};

 

 

다음 이미지와 같이 메시지가 객체형태로 만들어져 배열에 담기게 됩니다.

 

2-3.데이터 분석 

 

2-4.답장시간 변화 

일일 답장시간을 데이터화 하였더니 너무 큰 편차로 인해 아무런 도움이 되지 않는 그래프 형태를 나타낸다.