끊임없이 배우고 성장하며 절대 포기하지 않는 근성을 가지고 있어 계속 노력하는 중입니다.
Front: React.js, Next.js, TypeScript, Zustand, Tanstack Query, Tailwind css, emotion
Back: Spring, FastAPI, MySQL, Supabase
AI: Pythorch, Langchain, Python, Pandas, numpy
Infra: Docker
hanjiwon1108 (한지원) / 작성글 - velog
인공지능 기반 외래어 감지 및 순화 서비스 2025.1.22 ~ 2025.11.18
https://github.com/Naratmalsame/naratmalsame-web
React.js, Styled-components,
Typescript, Lexical-Editor
🏅한국인공지능·소프트웨어산업협회장상(금상)
🏅Coex AI EXPO KOREA 부스 전시
→ 최근 공문서와 방송 매체에서의 외래어 사용이 증가하고 있습니다. 국민들의 정보 이해도 향상을 위해 글을 적는 과정에서 외래어가 사용된다면 이를 감지하고, 자연스럽게 순화해주는 기능을 제공합니다.
<aside>
Problem.
[서버 과부하]
서버에 매번 전체 문장을 보내다 보니 서버 과부화 현상이 발생하였습니다.
Solved.
[data-unique 처리 로직 개선]
*종결 표현으로 끝나는 문장과 2초 이상 추가 입력이 없는 문장을 기준으로 data-unique 단위로 구분하여 서버에 전송하는 방식으로 로직을 개선하였습니다.
특히, 2초 이상 입력이 없을 때 자동으로 문장을 확정하도록 디바운스 함수를 구현하여, 사용자의 입력 패턴에 유연하게 대응할 수 있도록 하였습니다.
→ 종결표현으로 끝나는 문장 즉시 처리
→ 2초 기다린 뒤 미완성 외래어 문장 처리(디바운스)
또한, 확정된 문장 이후에 사용자가 계속해서 입력을 이어가는 경우에는 기존 data-unique 내용을 자동으로 병합해 전송함으로써, 서버 측에서 문맥을 보다 정교하게 파악할 수 있도록 설계하였습니다. 이를 통해 문장 단위의 자연스러운 분리와, 연속 입력 시 문맥 보존이라는 두 가지 요구사항을 모두 만족시키는 구조를 구축했습니다.
Takeaway.
[관점의 차이 그리고 새로운 성장]
제가 이 프로젝트를 진행하며 제일 많이 신경썼던 부분은 사용자 관점에서의 서비스 사용이였습니다.
사용자 관점에서 가장 편리한 사용 경험을 제공하기 위해, 입력 과정 전체를 UX/UI 중심으로 재해석하며 로직을 구성했습니다. 특히 data-unique 병합 과정에서 의도치 않게 중첩되거나 중복 적용되는 문제를 방지하기 위해, 직접 DOM 구조를 깊이 있게 탐색하며 요소 단위의 동작을 이해하는 데 많은 시간을 투자했습니다.
코드 구현 과정에서는
기존 노드에서 data-unique 속성을 안전하게 추출(getAttribute)한 뒤,
교체된 노드(newDom)에 동일한 속성을 정확히 전달(setAttribute)해
문맥이 유지되면서도 DOM 구조가 불필요하게 다시 감싸지지 않도록 처리했습니다.
이 과정에서 특히 TextNode, HTMLElement, ForeignWordNode 등 서로 다른 DOM 레벨의 요소가 어떻게 연결되고, 언제 교체되는지를 명확히 파악하게 되었고, 각 노드가 갖는 __dom 참조나 속성 전달 방식까지 세밀하게 이해하게 되었습니다.
이 경험은 단순히 기능을 구현하는 수준을 넘어, 브라우저가 내부적으로 어떤 방식으로 노드를 다루는지까지 체감할 수 있었던 인상 깊은 작업이었습니다.
*종결표현 : 마침표, 느낌표, 물음표(.,?,!)와 같이 문장을 종결하는 표현
</aside>
<aside>
</aside>