물타기 계산기 개발기: 삼성전자 -20% 물탈 때마다 엑셀 켜는 게 지겨워서 만든 웹앱
시작은 언제나 귀찮음에서
“아 씨… 또 떨어졌네”
2024년 여름, 내 주식 계좌를 열어보며 한숨을 쉬었다. 삼성전자가 또 떨어졌다. 7만원대에서 시작한 나의 삼성전자 평단 여행은 어느새 6만원대를 향해 달려가고 있었다.
물타기를 해야 하는데, 문제는 계산이었다.
“7만 2천원에 100주 있고… 6만 5천원에 200주 더 사면… 어… 평단이 얼마더라?”
엑셀은 너무 무겁고, 계산기는 너무 단순하다 (기록이 어려움)
물타기 계산은 단순해 보이지만 여러 번 나눠서 매수할 때는 꽤 복잡해진다:
| 차수 | 매수가 | 수량 | 매수금액 |
|---|---|---|---|
| 1차 | 50,000원 | 100주 | 5,000,000원 |
| 2차 | 40,000원 | 200주 | 8,000,000원 |
| 3차 | 35,000원 | 150주 | 5,250,000원 |
| 합계 | ? | 450주 | 18,250,000원 |
최종 평단은? → 40,556원 🤯
매번 계산기를 두드리거나 엑셀을 켜는 게 여간 귀찮은 게 아니었다. 특히 여러 차례 분할 매수를 하면서 “첫 번째 물타기 때 150주, 두 번째 때 200주, 세 번째…” 이런 식으로 복잡해지면 머리가 아팠다.
그때 생각했다. “아, 이거 그냥 웹으로 만들어버릴까?”
개발 시작: 단순하게, 하지만 똑똑하게
처음엔 정말 단순하게 시작했다. 현재 보유 평단과 수량, 추가 매수 평단과 수량만 입력하면 최종 평단을 보여주는 계산기. 끝.
// 초기 구상은 이렇게 단순했다
let final_price = (have_price * have_stock + add_price * add_stock)
/ (have_stock + add_stock);
하지만 막상 만들다 보니 욕심이 생겼다.
“어? 근데 나 보통 한 번만 물타지 않는데… 여러 번 나눠서 물타는 경우가 더 많은데?”
그래서 ‘추가 매수’ 섹션을 동적으로 추가할 수 있게 만들었다. 버튼 하나로 추가 매수 박스가 계속 생성되도록. 이제 10번이고 20번이고 분할 매수한 내역을 모두 입력할 수 있게 되었다.
가장 짜증났던 부분: 숫자 입력 UX
개발하면서 가장 신경 쓴 부분은 의외로 숫자 입력 경험이었다.
주식 가격이나 수량을 입력할 때, 자릿수를 조정하는 게 은근히 불편하다. 예를 들어 “72000”을 입력했는데 “62000”으로 바꾸려면? 7을 지우고 6을 입력해야 한다. 하지만 만약 “72000”을 “73000”으로 바꾸려면? 끝에서 0을 지우고 1000을 더 써야 한다.
이게 너무 짜증나서 특별한 기능을 추가했다:
// 커서 위치에 따라 자릿수를 조정하는 마법
function handleKeyDown(event, currentValue, setValue) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
const cursorPos = input.selectionStart;
const power = valueAsString.length - cursorPos;
const increment = Math.pow(10, power);
// 커서가 끝에서 두 번째에 있으면 10의 자리
// 끝에서 세 번째면 100의 자리를 조정!
}
}
이제 72000에서 커서를 2 뒤에 놓고 위 화살표를 누르면 73000이 되고, 7 뒤에 놓고 아래 화살표를 누르면 62000이 된다. 이 작은 기능 하나가 사용성을 확 끌어올렸다.
공유 기능: 카톡방의 영웅이 되는 법
개발하다가 갑자기 든 생각.
“어? 이거 친구들이랑 공유하면 좋겠는데?”
주식 단톡방에서 늘 나오는 질문이 있다:
- “형 지금 평단 얼마야?”
- “5만원에 100주 더 샀는데 평단 얼마 됐어?”
- “나 이렇게 물탔는데 계산 맞나 봐줘”
그래서 URL 파라미터로 모든 입력값을 저장하는 기능을 추가했다.
function generateShareUrl() {
const params = new URLSearchParams();
if (have_price) params.set('hp', have_price);
if (have_stock) params.set('hs', have_stock);
// ... 추가 매수 정보들도 쭉 저장
return `${baseUrl}?${params.toString()}`;
}
이제 계산 결과를 URL로 만들어서 카톡으로 공유하면, 받는 사람이 링크 클릭하자마자 똑같은 계산 결과를 볼 수 있다.
“야 내 평단 계산 좀 봐봐” 하고 링크 던지면 끝.
주인장의 물타기 링크 ^_^…
https://oneweekoneproduct.com/stock-add-calculator?hp=80000&hs=522&ap=65400&as=300
메모장에 저장해두면 나중에 “아 그때 내가 어떻게 물탔더라?” 할 때도 바로 확인 가능하다.
보안 경고를 넣은 이유
사실 이 부분이 제일 중요한데, 개발하면서 주변에서 들은 이야기가 있다.
“야 나 인터넷에서 물타기 계산기.exe 받아서 썼는데 진짜 편하더라”
“그거 위험한 거 아니야?”
“에이 뭐가 위험해, 그냥 계산기인데”
절대 아니다.
출처 불명의 exe 파일이나 엑셀 매크로는 당신의 HTS 로그인 정보를 훔쳐갈 수 있다. 특히 “더 편리한 기능을 위해 HTS와 연동하세요!” 같은 문구가 있다면 100% 의심해야 한다.
그래서 설명란에 경고 문구를 크게 넣었다:
진짜 혹시 모르잖어… 소중한 내 주식 쌈짓돈,,,
⚠️ 주의: 출처 불명의 물타기 계산기.exe나 엑셀 매크로는 HTS 로그인 정보를 훔쳐갈 수 있습니다. 이 계산기는 브라우저에서만 작동하여 100% 안전합니다.
개발하면서 배운 것
1. Svelte 5의 새로운 문법은 꽤 괜찮다
// 예전 방식
export let data;
$: total = price * quantity;
// Svelte 5 runes
let { data = {} } = $props();
let total = $derived(price * quantity);
더 명시적이고 이해하기 쉬워졌다.
2. 작은 UX 개선이 큰 차이를 만든다
화살표 키로 자릿수 조정하는 기능, ESC로 초기화하는 기능 같은 작은 디테일이 사용자 경험을 크게 향상시킨다.
3. URL은 최고의 저장소다
복잡한 백엔드 없이도 URL 파라미터만으로 충분한 경우가 많다. 특히 이런 간단한 계산기는 더욱 그렇다. 상남자식으로 URL에 저장해야지 ㅇㅇ..
마치며: 물타기의 정석은 없다
이 계산기를 만들면서 느낀 건, 물타기는 정말 양날의 검이라는 것. 평단을 낮출 수 있지만, 그만큼 투자 금액도 늘어난다.
하지만 적어도 이제는 “물타면 평단이 얼마가 될까?”라는 질문에는 바로 답할 수 있게 되었다. 엑셀 켤 필요도, 계산기 두드릴 필요도 없이.
그리고 무엇보다… 삼성전자가 이제 좀 올라갔으면 좋겠다. 제발.
물타기 계산기는 더 이상 필요 없는 그날까지. 🚀
P.S. 비트코인 물타는 분들도 많이 쓰시더라. 0.00001개 단위로 계산하기 귀찮으셨죠? 이제 편하게 계산하세요.
P.P.S. 이 글을 쓰는 2025년 여름, 삼성전자는 여전히… ㅎ..
