PPT 번역기 업그레이드 사례
소개 😊
회사에서 함께 사용할 PPT 번역기를 사용하다 보니, 단순 번역을 넘어 여러 기능을 한꺼번에 개선해야 할 필요성을 느끼게 되었습니다.
특히 실제 업무에서 사용하다 보니 토큰 관리, 사용자 관리, 번역 검증, 디자인 개선까지 함께 고민해야 했고, 이를 계기로 본격적인 기능 업그레이드를 진행하게 되었습니다.
1. 추가한 기능들 🧩
1️⃣ API 토큰 사용량 측정
대부분 Gemini 무료 API를 사용할 예정이었기 때문에, 토큰 사용량을 기준으로 작업 가능 여부를 판단하는 기능을 먼저 추가했습니다.
작업 흐름
PPT 파일 실행
번역 예상 토큰 수 추산
무료 토큰으로 작업 가능한지 판단
가능 👉 전체 작업 진행
불가능 👉 최대 작업 가능 페이지 수 제안 → 사용자 승인 후 해당 페이지만 작업
2️⃣ 회원 시스템
기존에는 개인 단위로 사용하던 도구였지만, 사내 공용 사용을 위해 회원 시스템을 추가했습니다.
회원가입 / 로그인 / 로그아웃 기능
회원가입 시 입력 정보
회사 이메일 (ID)
이름
비밀번호
로그인 시 기존에 입력한 API Key 자동 로드
Gmail 연동(Social Login) 가능성 검토
Supabase 사용 여부 조사
3️⃣ 관리자 페이지
관리자 입장에서 사용자를 제어할 수 있도록 관리자 전용 기능을 추가했습니다.
신규 가입자 승인
사용자 접속 횟수 확인
사용자 강제 탈퇴 권한
4️⃣ API Key 안내 UX 개선
API Key를 바로 입력하게 하는 방식은 진입 장벽이 높다고 판단했습니다.
직접 입력 강요 ❌
입력창 옆에 안내 버튼(네모 박스) 추가
버튼 클릭 시 Google AI Studio API Key 발급 가이드 페이지로 이동
현재: 관련 블로그 글
추후: Notion 페이지로 대체 예정
5️⃣ 번역 검증 기능 추가
번역이 완료된 이후, 결과 품질을 점검할 수 있도록 스코어링 기반 검증 기능을 추가했습니다.
검증 기준 예시
문서 유형에 맞는 톤과 길이인가? (보고서 / PPT / 캠페인)
고정 용어 표준 표기를 일관되게 사용했는가?
Bold / Underline 등 강조가 유지되었는가?
숫자 / 단위 / 기호(%, pp, ▲/▼)가 그대로 유지되었는가?
회사명 / 현장명 / 캠페인명을 번역하지 않았는가?
동일한 의미에 동일한 영어를 사용했는가?
★Safety_Translation_Guide 기준을 지켰는가?
표(Column) 명과 제목 규칙을 준수했는가?
문항 번호(Qx-x)를 유지했는가?
불릿 포인트 규칙(하이픈, 소문자 시작, 마침표 없음)을 지켰는가?
대소문자 / 하이픈 / 약어 표기가 일관적인가?
검증 이후 흐름
"이 기준을 반영해 수정할까요?"
Yes 👉 문제된 부분만 재수정
No 👉 현재 결과물 그대로 출력
6️⃣ 메일 발송 기능
번역이 완료되면, 로그인한 사용자의 이메일로 번역 완료 안내 메일이 자동 발송되도록 했습니다.
7️⃣ 디자인 업데이트 🎨
기존 디자인이 다소 올드하고 투박하다고 느껴 UI 전면 수정을 시도했습니다.
Google Stitch로 디자인 초안 제작
이를 기반으로 전체 UI 리디자인 진행
⚠️ 문제 발생
디자인 작업 중 GitHub에 푸쉬하지 않고 작업을 계속함
화면이 흰 바탕으로 깨지는 현상 발생
GitHub 히스토리가 없어 롤백이 어려웠음
결국 1~2시간 동안 "조금만 고쳐달라"를 반복 요청하며 복구
2. 작업 방식 ⚙️
Kiro에
spec / design / task.md요청task.md에 정리된 순서대로 기능 구현PPT 형광펜(하이라이트) 유지 기능 시도
약 3시간 투자
결과: 하이라이트가 한 줄로 길게 어긋남
원인 파악 실패 → 기능 보류
이후 기능들은 순차적으로 구현
GitHub 커밋 & 푸쉬는 비교적 꾸준히 진행 (디자인 작업 제외…)
3. 보안 검토 🔐
사내에서 사용하는 도구이다 보 니, 보안 이슈를 우선적으로 점검했습니다.
Claude에게 "어떤 부분을 검토해야 하는지" 상세하게 질문
지적된 항목을 하나씩 반영
가장 위험도가 높은 요소부터 우선 해결 후 작업 마무리
현재 프로젝트를 프로덕션 배포 전 최종 점검(Final Check)해주세요. 【검증 실행 방식】 아래 모든 검증 항목을 Task 리스트로 만들어서, 각 항목을 하나씩 실행한 후 체크 결과를 회신해주세요. 각 Task별로 완료 여부와 발견된 이슈를 명확히 표시해주세요. 【중요 안내】 아래 검증 항목들은 일반적인 웹/앱 개발에 적용되는 포괄적인 체크리스트입니다. 현재 개발 중인 프로그램의 특성과 전혀 관련이 없는 항목은 패스(Skip)해도 됩니다. 예: 백엔드 API만 개발 중인 경우 UI/UX 검증 항목 생략 가능 예: 정적 사이트인 경우 인증/세션 관련 보안 항목 생략 가능 예: 사내 도구인 경우 SEO 관련 항목 생략 가능 관련 없는 항목은 "N/A (Not Applicable)" 또는 "해당 없음"으로 표시하고 다음 항목으로 진행해주세요. =========================================== TASK 1: 코드 실행 및 오류 검증 =========================================== 【검증 범위】 1. 문법 오류 (Syntax Errors) - 잘못된 구문, 누락된 괄호/세미콜론 - 변수명/함수명 오타 - 예약어 사용 오류 2. 런타임 오류 (Runtime Errors) - Null/Undefined 참조 가능성 - 타입 불일치 오류 - 배열 인덱스 범위 초과 - 무한 루프 가능성 3. 로직 오류 (Logic Errors) - 의도하지 않은 동작 - 조건문 논리 오류 - 계산식 오류 4. 의존성 문제 - 누락된 import/require - 버전 호환성 문제 - 외부 라이브러리 충돌 5. 비동기 처리 오류 - Promise/async-await 처리 누락 - 콜백 헬 또는 레이스 컨디션 - 에러 핸들링 누락 6. 크로스 브라우저 호환성 - IE, Chrome, Firefox, Safari 호환성 - 폴리필 필요 여부 7. 성능 이슈 - 메모리 누수 가능성 - 불필요한 렌더링 - 비효율적인 알고리즘 8. 에지 케이스 처리 - 빈 값, 0, null, undefined 처리 - 매우 큰 수, 매우 작은 수 처리 - 특수문자, 다국어 입력 처리 9. 상태 관리 - 전역 변수 오남용 - 상태 불일치 가능성 - 사이드 이펙트 발생 가능성 【TASK 1 요청사항】 - 발견된 각 오류에 대해 파일명, 라인 번호, 구체적인 오류 내용 명시 - 오류의 심각도 분류 (Critical/High/Medium/Low) - 수정 방법을 before/after 코드로 제시 - 테스트 시나리오 제안 (정상 케이스, 엣지 케이스, 오류 케이스) - 우선순위별 오류 목록 (테이블 형식) - 각 오류별 해결 시간 추정 - 통합 테스트 체크리스트 --- 등등 기타 Task 8개 검토
결과와 배운 점 💡
결과
기능적으로는 대부분의 요구사항을 충족
하지만 여전히 아쉬운 점도 존재
로그인 후 로그아웃이 정상 동작하지 않음
관리자 페이지가 의도한 흐름대로 동작하지 않음
배운 점
페이지 단위로 상세 기획을 먼저 했어야 했다
기능을 하나씩 덧붙이는 방식은 구조를 쉽게 복잡하게 만든다
마무리하며 🤔
미리 페이지별 화면과 사용자 흐름을 정리하지 않은 상태에서 기능을 추가하다 보니,
결국 수정 비용과 시행착오가 크게 늘어났다는 점이 가장 큰 교훈으로 남았습니다.
다음 작업에서는 페이지 단위 설계 → 기능 매핑 → 구현 순서로 접근해볼 계획입니다.
작업을 하며 생긴 질문들 ❓
1) 코드가 꼬여서 몇 시간씩 제자리일 때, 어떻게 해결해야 할까?
같은 에러를 반복 수정하며 진전이 없을 때가 가장 힘들었다
2) GitHub 푸쉬 주기는 어느 정도가 적당할까?
기능 개발 중에는 비교적 잘 지켰지만
디자인 작업에서는 "나중에 한 번에 올리자"는 판단이 문제로 이어졌다
3) 디자인을 예쁘게, 하지만 간편하게 하는 방법은 없을까?
레퍼런스를 줘도 원하는 느낌이 정확히 반영되지 않는 경우가 많았다.
4) 보안 이슈 등을 검토할 때 어떤 식으로 진행하면 좋을지?
꼭 확인해야될 내용들
도움 받은 글 / 도구 (선택)
Google AI Studio
Gemini API
Kiro
Claude
Google Stitch
