333 잔재 블레이드를 하는 똥손 지표 수호자입니다.레이드를 돌면서 CPM을 확인해 실력이 늘고 있는지 줄고 있는지 확인하고 싶었는데요. 매번 계산하는 것도 번거롭고, 계산을 직접 해본 적이 별로 없다 보니 틀릴 때도 있더라고요. 그래서 GPT를 활용해 작은 위젯 창을 하나 만들었습니다.

혹시나 필요하신 분이 있으시면 사용하시라고 사용 방법 올려봅니다.저도 처음 만들어본 거라 미흡하지만, 혹시나 저 같은 분들은 유용하게 쓰실 수 있을 것 같아서 공유해 드려요.

참고로 제가 이후에 코드 수정이나 그런 건 할 줄 몰라서 관련 질문이 올라와도 답변을 못 드릴 수 있는 점 미리 죄송합니다. 계산값은 다른 분들이 올리신 CPM 인증 글들을 토대로 잘 계산되는지 대조해 봐서 맞는 것 같지만, 혹시라도 틀린 부분이 있다면 댓글로 알려주세요!

실제 적용 화면도 함께 첨부합니다!



🛠️ Step 1. 포스트잇 위젯 파일 만들기 (30초)

윈도우 자체 단독 창 규격인 HTA(HTML Application)를 이용해 주소창과 메뉴 탭이 없는 완벽한 사각형 위젯을 만드는 과정입니다.

  1. 바탕화면 빈 곳에 마우스 우클릭 ➡ [새로 만들기] ➡ [텍스트 문서(메모장)]를 새로 하나 켭니다.

  2. 아래의 코드 박스 안 내용을 전부 복사(Ctrl+C)해서 메모장에 붙여넣기(Ctrl+V) 합니다.


<!DOCTYPE html><html lang="ko"><head>    <meta charset="UTF-8">    <title>CPM Widget</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge">        <hta:application         id="cpmApp"        applicationname="CPM Widget"        border="thin"        caption="yes"        showintaskbar="yes"        singleinstance="yes"        sysmenu="yes"        windowstate="normal"    />    <style>        * { box-sizing: border-box; }        body {            font-family: 'Malgun Gothic', sans-serif;            background-color: #121212;            color: #e0e0e0;            padding: 10px;            margin: 0;            overflow: hidden;        }        .title {            font-size: 11px;            font-weight: bold;            color: #ffb100;            margin-bottom: 8px;            text-align: center;            letter-spacing: 1px;        }        .row {            display: table;            width: 100%;            margin-bottom: 5px;        }        .cell-lbl {            display: table-cell;            font-size: 11px;            width: 45px;            vertical-align: middle;            color: #888;            font-weight: bold;        }        .cell-idx {            display: table-cell;        }        input {            width: 45%;            padding: 3px 5px;            border: 1px solid #2a2a2a;            background-color: #1a1a1a;            color: #fff;            border-radius: 4px;            text-align: center;            font-size: 11px;            outline: none;        }        input:focus {            border-color: #ffb100;        }        .burst-input {            width: 100%;        }        #result {            margin-top: 8px;            padding: 6px;            background-color: #181818;            border-radius: 4px;            text-align: center;            font-size: 14px;            font-weight: bold;            color: #00ffcc;            border: 1px solid #222;        }    </style></head><body>    <div class="title">⚡ CPM WIDGET</div>        <div class="row">        <div class="cell-lbl">TIME</div>        <div class="cell-idx">            <input type="text" id="min" placeholder="분" onkeyup="calcCPM()"> :             <input type="text" id="sec" placeholder="초" value="0" onkeyup="calcCPM()">        </div>    </div>        <div class="row" style="margin-top: 5px;">        <div class="cell-lbl">BURST</div>        <div class="cell-idx">            <input type="text" id="count" class="burst-input" placeholder="횟수" onkeyup="calcCPM()">        </div>    </div>    <div id="result">CPM: -</div>    <script>        // 윈도우 옛날 엔진 호환성을 위해 코드를 옛날 방식으로 안전하게 수정        function calcCPM() {            var minStr = document.getElementById('min').value;            var secStr = document.getElementById('sec').value;            var countStr = document.getElementById('count').value;            var min = parseFloat(minStr) || 0;            var sec = parseFloat(secStr) || 0;            var count = parseFloat(countStr) || 0;            var totalMinutes = min + (sec / 60);            if (totalMinutes <= 0 || count <= 0) {                document.getElementById('result').innerText = "CPM: -";                return;            }            var cpm = count / totalMinutes;            document.getElementById('result').innerText = "CPM: " + cpm.toFixed(2);        }        // 켜질 때 포스트잇 크기로 창 사이즈 강제 고정 (가로 210, 세로 190)        window.resizeTo(210, 190);    </script></body></html>

  1. 메모장 상단 메뉴에서 [파일] ➡ [다른 이름으로 저장]을 누릅니다.

  2. ★가장 중요 (틀리면 안 됨)★

    • 파일 이름: 로아_CPM_위젯.hta (뒤에 .hta를 직접 입력해야 합니다)

    • 파일 형식: 모든 파일 (.) 로 변경

    • 인코딩: UTF-8 선택 후 [저장]

  3. 바탕화면에 생성된 파일 아이콘을 더블클릭하면 크롬 브라우저가 아닌, 메뉴가 싹 사라진 미니 포스트잇 모양의 계산기가 바로 실행됩니다.


📌 Step 2. Windows PowerToys로 화면 위에 고정하기

인게임 플레이 중에 위젯이 뒤로 숨지 않도록 마이크로소프트 공식 유틸리티를 활용해 '항상 위'로 박아두는 과정입니다.

  1. 마이크로소프트 스토어(Microsoft Store) 또는 구글에 'Windows PowerToys'를 검색하여 설치합니다. (MS 공식 프로그램이라 완벽히 안전하며 최적화가 아주 잘 되어 있습니다.)

  2. PowerToys를 실행한 후, 좌측 메뉴에서 [항상 위 (Always on Top)] 기능을 '켬'으로 활성화합니다.

  3. 아까 실행해 둔 CPM 위젯 창을 마우스로 한 번 클릭해 줍니다.

  4. 그 상태에서 고정 단축키인 윈도우 로고 키 + Ctrl + T를 동시에 누릅니다.

  5. "띵~" 소리와 함께 위젯 테두리에 얇은 강조 선이 생기며 화면 최상단 고정이 완료됩니다. (해제할 때도 똑같이 누르면 됩니다.)

💡 최종 인게임 사용 꿀팁

  • 로아 화면 설정: 로스트아크 그래픽 설정에서 [전체 창 모드] 또는 [창 모드]로 플레이하셔야 게임 화면 위로 위젯이 정상적으로 노출됩니다. (전체 화면 모드에서는 가려집니다.)

  • 실시간 계산 기능: 이 위젯은 따로 '계산하기' 버튼을 누를 필요가 없습니다. 레이드가 끝난 후 위젯에 [분], [초], [버스트 횟수]를 타이핑하는 순간 실시간으로 내 CPM 결과값이 바로 갱신되어 매우 편리합니다!