자바스크립트로 구현하는 블록체인 채굴 기능 – 채굴 시작부터 보상 확인까지
자바스크립트로 구현하는 블록체인 채굴 기능 – 채굴 시작부터 보상 확인까지
블록체인 시스템을 직접 만들며 배워보는 과정을 연재 중입니다. 이전 포스팅에서는 채굴자 코인 보유량을 조회하는 기능까지 구현했고, 이번 시간에는 본격적으로 채굴을 시작하고, 그에 따른 보상 정보를 실시간으로 확인할 수 있도록 기능을 확장해보겠습니다. 단순히 개발 지식만 전달하는 것이 아니라, 여의도 증권가에서 일하며 실제로 다양한 금융상품과 암호화폐에 투자해온 제 경험까지 녹여 최대한 실전에서 써먹을 수 있는 팁도 함께 드리겠습니다.
지난 시간까지 구현한 기능 요약
지난 포스팅에서는 프론트엔드 UI를 구성한 뒤, 채굴자 코인 잔액을 조회할 수 있는 간단한 기능을 넣었죠. 버튼 클릭 한 번으로 ‘현재 보유 중인 코인 수량’을 확인할 수 있도록 만들었고, 이는 GET
방식으로 서버에 요청을 보내 처리하도록 설계했습니다.
이번 시간에 구현할 핵심 내용
이번 포스팅의 주요 목표는 채굴 시작 버튼을 눌렀을 때 실제로 채굴이 시작되는 기능을 구현하고, 채굴 중간/종료 시점에 관련 메시지와 보상 정보를 사용자에게 안내하는 기능까지 넣는 것입니다. 구체적으로는 다음과 같습니다.
-
채굴 시작 버튼 동작 구현
-
사용자에게 채굴 안내 메시지 출력
-
채굴 중단 버튼 동작 구현
-
보안상 안전한 POST 방식 적용
-
실시간 보상 정보 및 코인 수량 업데이트
-
UI 요소들의 상태 변화에 따른 제어 처리
POST 방식으로 바꾸는 이유? 실전에서는 보안이 생명입니다
초기에는 GET
방식으로 채굴 요청을 보내는 구조였는데, 이건 주소창에 지갑 주소가 그대로 노출되는 구조라 해킹 가능성이 생깁니다. 실전에서는 이런 구조 절대 쓰지 않습니다. POST 방식으로 요청을 보내고, 데이터는 JSON 포맷으로 전달하는 게 기본입니다.
제가 실제 비트코인 클라이언트를 커스터마이징했던 경험에 비춰봐도, 이런 사소한 실수가 트랜잭션 탈취로 이어질 수 있다는 걸 많이 봤습니다. 지갑 주소 노출은 해커에게는 기회의 창입니다.
버튼 클릭으로 채굴 시작: 사용자 경험(UX)을 고려한 흐름 설계
자바스크립트로 채굴 시작 버튼을 클릭했을 때 다음 흐름으로 동작하게 합니다:
-
사용자 컨펌(confirm) – “채굴하는 동안 컴퓨터가 켜져 있어야 합니다. 채굴을 시작할까요?”라는 메시지를 통해 사용자 동의를 받습니다.
-
지갑 주소 확인 – 지갑 주소가 입력되지 않았을 경우 “채굴자 지갑 주소를 입력하셔야 합니다.”라는 메시지 출력 후 중단
-
UI 상태 변경 – ‘채굴 시작’ 버튼 숨기고, ‘채굴 중단’ 버튼 노출
-
채굴 상태 메시지 노출 – “채굴을 시작합니다” 메시지 보이기
이런 흐름이 사용자 입장에서 더 자연스럽고, 실제 채굴에 대한 신뢰도를 높여주는 요소입니다.
코인 보유 수량 & 채굴 보상 실시간 업데이트
채굴이 시작되면 단순히 “작동 중” 메시지 하나 띄우고 끝나는 것이 아니라, 실시간으로 내 지갑에 코인이 얼마씩 들어오는지, 채굴 보상은 누적해서 얼마인지를 계속 업데이트해줘야겠죠?
이를 위해 전역 변수로 아래 항목들을 선언했습니다.
-
currentCoinAmount
: 현재 코인 수량 -
miningRewardTotal
: 누적 채굴 보상
이 변수들을 setInterval()
함수로 3초마다 업데이트하게 설계했습니다. 실시간성이 확보돼야 사용자에게 몰입감 있는 채굴 경험을 줄 수 있습니다.
사용자 인터페이스(UI) 최적화: 상태 변화에 따라 보여지는 요소 제어
채굴이 시작되면 몇 가지 화면 변화가 필요합니다. 이건 꼭 필요한 작업입니다. 안 그러면 사용자가 혼란스러워합니다.
-
채굴 시작 버튼 → 숨김 처리
-
채굴 중단 버튼 → 노출
-
채굴 중 안내 메시지 → 노출
-
채굴 보상 정보 영역 → 점차 누적되는 금액 보여줌
-
중단 관련 메시지 → 아직은 숨겨둠 (중단 시 노출 예정)
여기서 중요한 건, 필요할 때만 보여주고, 필요 없으면 감춰야 한다는 점입니다. 불필요한 메시지나 버튼이 화면에 보이면 신뢰도가 떨어지고, UI가 어수선해져요.
채굴 중단 기능은 다음 강의에서 구현 예정
이번 강의에서는 채굴 시작까지만 구현했지만, 채굴 중단 기능도 매우 중요합니다. 예를 들어 실수로 중복 채굴을 시작하거나, 컴퓨터 리소스를 아끼고 싶을 때 중단할 수 있어야 하거든요.
중단 기능 구현을 위해선 채굴 중단
버튼 클릭 시 비동기 요청(Ajax)으로 채굴을 정지시키고, 서버에 이를 반영하는 흐름으로 코딩할 예정입니다. 이건 다음 시간에 자세히 다룰게요.
실전 개발자의 경험 한 마디
제가 여의도에서 펀드매니저, 리서치 애널리스트, 트레이더 다 거쳤고, 퇴근 후에는 코인 채굴부터 비트코인 장외거래까지 직접 해봤습니다. 예전엔 집에 GPU 3개 달린 컴퓨터 두 대 돌려서 이더리움 캐기도 했었어요.
직접 겪어보니 ‘작동은 한다’와 ‘실제로 돈이 들어온다’는 전혀 다른 얘기더군요. 그래서 저는 이 프로젝트를 단순 예제가 아닌, 실제로 수익까지 고려한 구조로 설계하고 있습니다. 어설픈 채굴 기능이 아니라, 실전 적용 가능한 로직을 목표로 하고 있어요.
마무리: 지금까지 구현된 내용 체크
-
채굴 시작 시 사용자 안내
-
지갑 주소 미입력 시 예외 처리
-
UI 동적 제어 (버튼/메시지 숨김-노출)
-
실시간 보상 및 코인 수량 업데이트
-
보안 고려한 POST 방식 채굴 요청 설계
다음 시간 예고
다음은…
-
채굴 중단 버튼 구현
-
서버와의 연동 (POST 방식으로 마이닝 메서드 호출)
-
채굴 중단 시 보상 정보 요약 출력
을 중심으로 다뤄보겠습니다. 여기서 중도 포기하면 안 됩니다. 거의 다 왔습니다.
한번에 끝내기보단, 천천히, 완벽하게 가는 게 중요합니다. 저도 처음에 블록체인 배우기 시작했을 땐 며칠 밤새며 고생했지만, 지금은 제가 만든 간단한 블록체인 시스템을 통해 코인 흐름을 완벽히 파악하고 있습니다. 여러분도 충분히 할 수 있습니다.
다음에서 계속 이어가겠습니다. 지금까지 따라오신 분들, 정말 잘하셨고요. 커피 한 잔 하시고 다시 돌아오세요. 이제 진짜 채굴이 시작됩니다.
댓글
댓글 쓰기