[한글 토큰 계산기] 한글 프롬프트 입력시 LLM별 토큰 소비량 계산하는 웹앱 개발 도전기

비개발자로 파이썬도 자바스크립트도 코드도 잘 모르지만, 무식하면 용감하다고 하죠.
클로드가 코딩을 잘 해 준다고 히두 야단들이어서 저같은 쌩초보도 프로그램에 도전해볼 수 있을까 시험 삼아 이왕에 지피터스 스터디에 참여한 흔적도 남길 겸 간단한 웹페이지용 앱 개발을 클로드3.5의 도움을 구해 시도해보기로 했습니다.

1. 개발 주제 선정
= 어떤 앱이 간단하면서도 구현해볼 수 있는 주제일까 잠시 고민하다가,
한글로 명령 프롬프트를 입력할 때 내가 선택한 LLM 모델 종류에 따라 얼마 정도의 토큰을 소비하는지 계산해서 비교해보는 앱을 만들어보면 재미 있겠단 생각이 들었죠.

유튜브를 뒤져서 클로드가 프롬프트를 대신 작성해주는 기능이 있다고 해서,
그럼면 프로그램을 코딩해달라고 부탁하는 프롬프트는 어떻게 짜주는지 궁금해서 아래 영상의 설명을 대충 살펴보고
https://youtu.be/e4_dm5zvMN8

앤스로픽의 프롬프트 빌더기를 찾아갔습니다.

2. 프로그램 개발용 프롬프트 작성 요청하기

아래 엔트로픽 콘솔(대시보드) 사이트에 접속하여
https://console.anthropic.com/

[Generate prompt] 클릭

ALT

좋은 아침 메시지가 포함된 웹페이지의 스크린샷

3. 원하는 프로그램 생성 프롬프트 제안 요청
특정한 한글 프롬프트를 입력하면 각각의 LLM 모델별로 소비하는 토큰량이 얼마인지 계산 비교해보는 웹앱을 개발하기 위한 프롬프트를 짜 달라고 요청!

ALT

한국어 텍스트가 있는 화면의 스크린샷

프롬프트 작성 중 [Continue] 버튼이 뜨면 클릭!!

4. 제출받은 프롬프트를 복사, 번역해서 프로세스 확인
   

   

   ALT

   Adobe Adobe Adobe Adobe Ad 설정 스크린샷

   
   위에서 제안받은 영문 프롬프트 내용(화면 왼쪽 창 내용)을 복사하여 (챗GPT에게) 붙여넣고 한글 뜻 해석 요구하여 프롬프트의 전체적인 흐름을 파악!

   

   ALT

   한국사이트 스크린샷

   
   

5. 프로프트 실행 응답 결과 창에서 코드 복사
   [Continue] 눌러서 나온 응답창 우측 상단의 [Get code] 버튼을 눌러
   

   

   ALT

   자동 저장의 자동 저장 기능 스크린샷

   생성되는 코드 팝업에서 [Copy Code] 클릭하여 프로그램 코드 복사!

   

   ALT

   텍스트 편집기를 보여주는 웹 브라우저의 스크린샷

6. 클로드 API Key 값 생성 복사
   
   코드 내용 중에 클로드 API Key 값을 치환하기 위해 앞서 클로드 콘솔 대시보드 화면의 [Get API Key ] 버튼을 눌러서
   

   

   ALT

   좋은 오후 버튼이 있는 웹페이지의 스크린샷

   
   새로 API Key 값을 생성하여 복사함.

   

   ALT

   Adobe Adobe Adobe Adobe a의 설정 메뉴 스크린샷

7. API Key 적용 1차 코드 완성하기
   
   복사한 API Key 값을 치환해서 직접 넣어주거나 혹은 키값을 알려준 다음에 위에서 작성한 코드에 키값을 적용하여 수정 코드를 다시 작성해달라고 한 뒤에,
   1차 완성된 코드를 생성!
   

   

   ALT

   파이썬 파이썬 파이썬 파이썬 파이썬 파이썬

8. 프로그램 코드 실행 환경 구축 및 편집기 열기
   
   클로드 입력창에 다시 아래와 같이 입력하고 프로그램 관련 파이썬 환경 설치 및 코드 실행 순서를 알려주고 웹페이지에 구현할 수 있는 관련 파일들을 추가로 생성하여 지시한 폴더와 파일을 차례로 생성한 뒤에 설명한 대로 실행 처리.
   

   1. 개발 환경 설정 a. Python 설치하기:

      • python.org에서 최신 버전의 Python을 다운로드하고 설치합니다.

      • 설치 시 "Add Python to PATH" 옵션을 선택해주세요.

      b. 코드 에디터 설치하기:

      • Visual Studio Code와 같은 코드 에디터를 다운로드하고 설치합니다.

   2. 프로젝트 폴더 만들기 a. 바탕화면이나 원하는 위치에 새 폴더를 만듭니다 (예: "token_counter"). b. 이 폴더를 Visual Studio Code에서 엽니다.

   3. 가상 환경 설정하기 a. VS Code에서 터미널을 열고 (상단 메뉴 -> Terminal -> New Terminal) 다음 명령어를 입력합니다:

      사본

      Copy

      python -m venv venv

      b. 가상 환경을 활성화합니다:

      • Windows: venv\Scripts\activate

      • macOS/Linux: source venv/bin/activate

   4. 필요한 라이브러리 설치하기 활성화된 가상 환경에서 다음 명령어를 실행합니다:

      사본

      Copy

      pip install flask transformers tiktoken

   5. 프로젝트 구조 만들기 프로젝트 폴더 안에 다음 구조를 만듭니다:

      사본

      Copy

      token_counter/ ├── app.py ├── templates/ │ └── index.html └── static/ └── style.css

   6. app.py 파일 작성하기 app.py 파일을 열고 다음 코드를 작성합니다:

   Token Counter Web App (app.py)

   Click to open code

   7. index.html 템플릿 작성하기 templates 폴더 안의 index.html 파일에 다음 내용을 작성합니다:

   Token Counter HTML Template (index.html)

   Click to open code

   8. style.css 파일 작성하기 static 폴더 안의 style.css 파일에 다음 내용을 작성합니다:

   Token Counter CSS (style.css)

   Click to open code

   9. 애플리케이션 실행하기 a. VS Code 터미널에서 다음 명령어를 실행합니다:

      사본

      Copy

      python app.py

      b. 웹 브라우저를 열고 주소창에 http://127.0.0.1:5000을 입력합니다.

   10. 테스트 및 사용하기

       • 웹페이지에서 한국어 텍스트를 입력하고 "토큰 계산" 버튼을 클릭합니다.

       • 각 모델별 토큰 수를 확인합니다.

   

   ALT

   한국어 텍스트가 포함된 페이지의 스크린샷

9. VS Code 편집기로 코드 실행 및 오류 수정 코드 반복 실행
   app.py , index.html (필요시) style.css
   

   

   ALT

   컴퓨터에 있는 코드 편집기의 스크린샷

10. 로컬 웹페이지를 통해서 실행된 코드 정상 동작 여부 확인
    

    오류 코드가 나오거나 실행 화면의 설명이 영문으로 표시되는 부분에 대해 한글로 번역하는 로직을 추가하여 코드 수정해 달라고 요청, 반영하여 웹페이지 재구성(새로 고침)
    
    

    

11. 남은 추가 개발 과제 👍

    • 여러 LLM 모델별로 현재 적용되는 입/출력 토큰 소비당 단가표를 입수하여 추가로 제공한 뒤에,

    • 특졍한 한글 프롬프트 입력시 쓰이는 토큰의 소비량과 그에 따른 예상 사용 요금(청구 예상액)을 계산하여 추가로 출력해 주도록 요구하는 프로세스를 앱에 추가로 구현

    • 입력 후 출력 예상 분량에 맞추어 대략의 토큰 사용료를 추정하여 미리 계산해주는 앱으로 고도화.