형태소 분석기 추가로 동음이의어 구분

또 다시 한글은 위대하구나를 느끼게 해준 에피소드

도입 배경

정확도를 높이기 위함

• ‘모습이 이구아나를 닮았다’ 라는 문장에서 조사로 쓰이는 ‘이’만이 대상어로 잡혀야 하지만 명사안에 포함되는 ‘이’도 잡히는 문제점
• 조사로 쓰이는 ‘이’가 존재하지 않는다면 백엔드에서 대상어로 ‘이’를 주지않아 프론트에서도 잡지 않지만 조사로 쓰이는 ‘이’가 존재하는 경우 프론트에서는 전체 문장에서 대상어의 문자 자체를 모두 찾기 때문에 잡힌다.

필요 기능

텍스트 변환

• 텍스트 변환을 위해 필요한 요소
  • 대상어 타입 지정에 필요한 matchIndex
  • prevText + newText + afterText위한 text index

하이라이팅

• 하이라이팅을 위해 필요한 요소
  • 대상어
  • 텍스트 위치 (인덱스)
  • 대상어 순서

모달

• 네비게이팅을 위해 필요한 요소
  • 클릭 시 해당 모달로 네비게이팅 useRef 이용
  • 모달의 인덱스 (대상어를 텍스트에서 입력된 순서대로 정렬 필요)
• 모달 내 텍스트
  • 대상어 단어를 기준으로 findIndex하여 대상어가 매칭되는 배열index를 찾은 후 해당 배열에서 type과 description 꺼내 온다.

기본 로직

기존

• 입력 텍스트에서 대상어를 모두 찾아 해당 인덱스 기준으로 텍스트 재배치
• 중복된 대상어가 잡히는 케이스를 대응하기 위해 (ex-저렴한 / 저렴) 같은 인덱스에서 잡힌 대상어 길이순으로 나열 후 가장 긴 길이의 대상어의 length안에 대상어가 잡힌 것이 있다면 필터로 거르는 로직 필요
• 허용어가 대상어를 포함하는 케이스를 대응하기 위해 허용어가 대상어를 완전히 포함하면 필터하는 로직 필요
• 텍스트 변화 있을 때마다 전체 대상어를 다시 찾음 (원문 기준으로 텍스트 변환 이루어짐)

트러블 슈팅

• 원문으로 하면 안되는 문제점
  • 형태소 분석기 api 프론트엔드에서 설치 가동 불가
  • 원문에서는 프론트엔드가 자체적으로 동음이의어를 구분할 수 없다 (ex- 과자 사자 vs 저승사자 vs 사자 보러 가자)
  • 백엔드에서 index를 받아오고자 하였으나 첫 화면만 가능하고 텍스트 변환 이후부터는 찾을 수 없다고 판단
• 형태소 분석문장으로 하면 안되는 문제점
  • 원문에서의 인덱스를 잡고 분석된 문장에서의 인덱스를 잡은 후 분석된 문장의 인덱스에 가까운 순으로 거르는 방식 시도 → 동음이의어의 사이가 가까운 경우 (ex- 모습’이’ ‘이’구아나를 닮았다.) 잘못 거르는 경우 발생
    
  • 형태소 분석기가 원문장의 띄어쓰기를 모두 무시한 채 형태소 단위로 쪼갬 → 사용자가 입력한 문장 자체로 재현하기 힘듬

해결

백엔드에서 동음이의어를 구분한 후 표시를 한 문장을 넘겨받기로 결정

기본 로직

• 백엔드에서 형태소 분석 후 대상어를 특정문자로 표시 한 텍스트에서 특정문자를 포함하여 찾은 후 재배치하기 전 특정문자를 제거해준 후 배치
• 텍스트 변환에 특수문자로 표시하여 백엔드에서 받은 텍스트 이용. 위와 같은 로직이 반복
• 실제 이용하는 텍스트와 최종적으로 저장할 텍스트를 다르게 사용해야 함(표시가 있는 문장 / 표시가 제거된 문장)

텍스트 변환

• 하이라이팅하여 사용자에게 보여주는 텍스트와 텍스트변환에 사용하는 string형식의 텍스트를 서로 다르게 사용해야 하고 서로 매칭이 잘 맞아야 했다.
• 하이라이팅하여 사용자에게 보여줄 텍스트는 각각의 요소들이 span 태그를 나타내는 React element들의 배열(A)이고, 텍스트 변환에 사용할 텍스트는 string으로 된 백엔드에서 전달받은 특문 처리된 텍스트(B).
• 최종적으로 텍스트 변환 시 B가 업데이트 될 때마다 A로 다시 매칭되는 로직
  

인덱스 잡기

• 재배치를 할 때 기호가 있는 상태로 인덱스를 잡아야 하기 때문에 특수문자의 인덱스를 고려해주어야 한다
• 첫번째 인덱스와 마지막 인덱스의 대상어에 대한 조건문 처리가 필요.

띄어쓰기 문제 해결

• 입력한 텍스트의 띄어쓰기를 특정 문자로 replace시킨 후 형태소 분석기 실행
• 이후 형태소 분석된 문장에서 특정 문자를 다시 띄어쓰기로 replace
• 완료된 문장을 이용하여 프론트에서 가공

이외에도 span태그로 감싼 후에 리턴받는 (className을 type에 따라 지정해주어야 함) 등 다양한 방법들을 시도하였으나, 다양한 허들을 겪으면서 아직까지는 현재의 로직을 유지..

PS. 이후에는 span 객체화 데이터 형식으로 리턴받는 방법을 이용할 것 같다