Bob으로 비즈니스 커뮤니케이션을 원활하게 하는 AI 번역 앱을 만들어 보았다

갑작스럽지만, 외국인 직원과의 메일이나 채팅을 주고받는 분이라면 한 번쯤 이렇게 생각해 본 적이 있지 않으신가요?

• 번역 도구를 사용해도 단편적이고, 이전 대화의 흐름에 맞는 표현인지 재번역으로 확인해야 하는 이중의 수고가 든다
• 채팅이나 메일 등 각 형식에 맞는 서로 다른 형식이나 뉘앙스의 문장을 작성하고 있는지 불안하다
• 채팅형 AI 도구에서 LLM을 이용해 번역에 지시를 추가하여 위의 두 가지를 개선하더라도, 세션이 끊기면 '새로운 채팅'으로 시작되기 때문에 과거의 대화 내용을 찾는 것이 힘들다

개인적인 이야기입니다만, 최근 글로벌 직원들과 협업할 기회가 늘어나면서 저 자신도 이러한 고민을 안고 있었습니다.

그래서 Agent 구동 개발 어시스턴트인 IBM Bob을 사용하여, 이러한 과제를 해결하는 비즈니스 번역 앱 「BizTranslate」를 개발했습니다.

본 기사에서는 작성한 애플리케이션의 개요와 소스 코드 공유, 그리고 Bob을 활용한 개발 체험기를 소개합니다.

⚠️

유의사항

이 요약은 작성자 개인의 활동이며, 반드시 제가 소속된 단체나 기업의 입장, 전략, 의견을 대표하는 것은 아닙니다.

IBM이 제공하는 AI 에이전트 구동 개발 도구입니다.

• 안전성이 확보된 엔터프라이즈 지향
• 온프레미스(On-premises), 클라우드 등 하이브리드 확장성
• 전방위적 모더니제이션 (Modernization)

이 특징인 AI 퍼스트(AI-first) 개발 지원 도구 시스템으로서, 개발자 여러분의 코딩 작업을 지원하기 위해 설계되었습니다.

자세한 내용은 공식 사이트에서 확인하세요!

BizTranslate는 외국인 직원과의 채팅 및 메일 커뮤니케이션을 원활하게 하기 위한 번역 애플리케이션입니다.

• ✅ 비즈니스 뉘앙스로 번역: DeepL API 사용 - ✅
• ✅ 대화 관리: 주고받은 내용을 스레드(Thread)화하여 시계열로 저장 (이름 지정 가능) - ✅
• ✅ AI 답장 제안: 메시지 내용을 분석하여 적절한 답장을 제안 - ✅
• ✅ 형식 변환: 채팅/메일 형식에 적합한 번역 출력 - ✅
• ✅ 이력 검색: 과거의 대화 내용을 검색 및 참조 - ✅
• ✅ 톤 조절: 포멀(Formal)/캐주얼(Casual) 등 상대나 상황에 따라 문체를 전환 가능

조금 알기 어려울 수도 있지만...

처음에 "외국인 직원과의 메일·채팅 교류를 원활하게 하는 번역 앱을 만들고 싶다"라고 전달했을 뿐인데, Bob이 다음과 같은 내용을 제안해 주었습니다:

• 모노레포(Monorepo) 구성 (client/server 분리)
• 적절한 디렉토리 구조
• 필요한 의존성 패키지 (Dependency Package)

등등

특히 "AI 답장 제안 기능" 구현에서는 Bob이 다음과 같이 세련된 코드를 생성해 주었습니다:

// 메시지 타입을 자동 분석
private analyzeMessageType(message: string): string {
const lowerMessage = message.toLowerCase();
...

이와 같이 메시지 내용을 분석하여 적절한 답장 패턴을 선택하는 메커니즘을 자연어 지시만으로 구현할 수 있었습니다. (그 덕분에 구현 시간은 거의 0에 가깝습니다.)

Bob은 타입 정의(Type Definition)도 자동으로 생성해 주기 때문에, 개발 중 발생하는 타입 에러를 대폭 줄일 수 있었습니다:

export interface Message {
_id: string;
threadId: string;
...

이번 애플리케이션 구현은 자연어 지시로 Bob에게 거의 맡겼기 때문에, "이번 구현의 포인트는?"이라고 물어보니 다음과 같다고 합니다.

DeepL API를 사용한 번역 서비스 구현 예시:

class DeepLService {
private translator: deepl.Translator | null = null;
async translate(
...

포인트:

• splitSentences: '0'으로 문장 분할을 무효화하여 원래의 문장 구조를 유지
• preserveFormatting: true로 줄바꿈이나 인덴트(Indent)를 유지
• 싱글톤 패턴(Singleton Pattern)으로 Translator 인스턴스를 재사용

수신 메시지를 분석하여 적절한 답장 후보를 자동으로 생성합니다:

async generateSuggestions(
incomingMessage: string,
platform: 'chat' | 'email',
...

포인트:

• 정규 표현식 (Regular Expression)으로 메시지 타입 자동 판정
• 톤 (Formal/Casual)에 따른 답장 후보 준비
• DeepL API를 사용하여 자연스러운 영어로 번역

Redux보다 심플하고 TypeScript와의 궁합도 좋은 Zustand를 채택:

interface AppState {
// 스레드 관련
threads: Thread[];
...

포인트:

• 보일러플레이트 (Boilerplate)가 적고 직관적으로 사용 가능
• TypeScript의 타입 추론 (Type Inference)이 적용됨
• React Query와 조합하여 서버 상태와 클라이언트 상태를 분리

Slack/메일 형식에 적합한 출력을 생성:

class FormatterService {
formatForPlatform(
text: string,
...

본 애플리케이션의 소스 코드는 GitHub에서 공개하고 있습니다:

GitHub 리포지토리는 여기로

리포지토리에는 다음 내용이 포함되어 있습니다:

• 전체 소스 코드: 프론트엔드·백엔드의 모든 구현
• 상세한 README: 설정 절차, 사용법, 트러블슈팅
• 환경 설정 예시: .env.example 파일
• 주석이 달린 코드: 각 기능의 구현 상세

구현 상세를 알고 싶은 분은 다음 파일을 확인해 주세요:

파일	설명
server/src/services/deepl.service.ts	DeepL API 연동 구현
server/src/services/suggestion.service.ts	AI 답장 제안 로직
server/src/services/formatter.service.ts	플랫폼별 포맷 변환
client/src/store/useStore.ts	Zustand를 이용한 상태 관리
client/src/components/Chat/MessageInput.tsx	메시지 입력 UI 구현
server/src/controllers/thread.controller.ts	스레드 관리 비즈니스 로직

상세한 설정 절차는 리포지토리의 README를 참조해 주세요.

필요한 환경:

• Node.js 18 이상
• MongoDB 6.0 이상
• DeepL API 키 (무료 플랜 가능)

기본 실행 명령어:

npm install
npm run dev

실제로 구동해 보면서 코드를 읽으며 이해를 높이는 것을 추천합니다!

• 개발 속도 향상: Bob이 적절한 코드를 제안해 주어 구현이 매우 원활함

• 코드 품질: TypeScript의 타입 정의 및 에러 핸들링 (Error Handling)도 적절히 구현됨

• 학습 효과: Bob이 생성한 코드를 통해 베스트 프랙티스 (Best Practice)를 배울 수 있음

• UI/UX 디자인: 디자인의 세밀한 조정은 인간의 판단이 필요

• 비즈니스 로직: 도메인 특화 요구사항은 상세한 지시가 필요

• 성능 최적화: 대규모 데이터 처리는 추가적인 튜닝이 필요

복잡한 로직 (AI 답장 제안, 메시지 분석 등)의 구현이라 할지라도, "이런 것을 할 수 있게 하고 싶은데"와 같은 모호한 프롬프트 (Prompt)일지라도, 요구사항 확인 등을 친절하고 빠르게 진행하여 불과 몇 분 만에 추가 구현을 할 수 있었고, "우리가 AI에 기대하는 편리함"을 체감할 수 있었던 것 같습니다.

또한 이번에 작성한 Biztranslate의 경우, 비즈니스 커뮤니케이션의 효율화라는 실용적인 과제를 최신 AI 기술을 활용하여 해결할 수 있었다는 점이 큰 성과라고 느낍니다.

여러분도 Bob을 사용하여 일상 업무에서 나온 아이디어를 빠르게 형상화해 보지 않으시겠습니까?

• GitHub 리포지토리

  • 전체 소스 코드
  • 상세한 README
  • 설정 가이드

• DeepL API - 고품질 번역 API

• React - UI 프레크레임워크

• Zustand - 상태 관리 라이브러리

• TailwindCSS - CSS 프레임워크

• MongoDB - NoSQL 데이터베이스

• Express - Node.js 프레임워크

이 기사가 도움이 되었다면 하트나 스톡 (Stock)을 눌러주시면 감사하겠습니다!

질문이나 피드백도 편하게 댓글로 남겨주세요.