1. 두 가지의 뇌: ‘단일 복용’과 ‘교차 복용’
1편에서 만든 깔끔한 UI 위에 이제 생명력을 불어넣을 차례입니다. 이 웹 앱이 가져야 할 가장 중요한 핵심 기능은 부모가 선택한 상황에 따라 ‘다음에 먹일 약의 종류’와 ‘타이머의 시간’을 스스로 판단하는 것입니다.
사용자가 ‘단일 복용’을 누르면 동일한 약을 4시간 뒤에 먹이도록 안내해야 하고, ‘교차 복용’을 누르면 반대 계열의 약을 2시간 뒤에 먹이도록 역산해야 합니다. 이를 위해 자바스크립트에 모드 전환 함수를 작성했습니다.
JavaScript
let currentMode = 'single'; // 기본값은 단일 복용
function setMode(mode) {
currentMode = mode; // 'single' 또는 'hybrid' 저장
const btnSingle = document.getElementById('btn-single');
const btnHybrid = document.getElementById('id-hybrid');
const clockDisplay = document.getElementById('timer-clock');
if (mode === 'single') {
btnSingle.classList.add('active');
btnHybrid.classList.remove('active');
clockDisplay.innerText = "04:00:00"; // 4시간 타이머 세팅
} else {
btnSingle.classList.remove('active');
btnHybrid.classList.add('active');
clockDisplay.innerText = "02:00:00"; // 2시간 타이머 세팅
}
updateGuide(); // 모드가 바뀌면 용량과 종류도 다시 계산
}
2. 불확실성을 배제한 ‘안전 기본값’ 하드코딩
가장 신경 쓴 부분은 용량 산출 공식입니다. 유유제약의 가이드라인에 따르면 아세트아미노펜은 체중당 10~15mg, 이부프로펜은 체중당 5~10mg입니다. 하지만 일반 부모님들이 mg을 ml 시럽으로 변환하는 것은 불가능에 가깝습니다.
그래서 저는 추측성 데이터를 배제하고, 소아과에서 범용적으로 사용하는 안전한 환산 공식(아세트아미노펜: 몸무게 × 0.33 / 이부프로펜: 몸무게 × 0.4)을 자바스크립트에 고정(하드코딩)했습니다.
JavaScript
function updateGuide() {
const weight = parseFloat(document.getElementById('weight').value);
const medType = document.getElementById('medicine-type').value; // A: 아세트, B: 이부
if (isNaN(weight) || weight <= 0) return;
let doseVolume = "";
let nextMedication = "";
// 교차 복용 모드일 때의 로직
if (currentMode === 'hybrid') {
if (medType === 'A') { // 방금 아세트아미노펜을 먹였다면
nextMedication = "교차용 이부/덱시부프로펜 (계열 2)";
doseVolume = (weight * 0.4).toFixed(1); // 반대 약의 용량 계산
} else { // 방금 이부프로펜을 먹였다면
nextMedication = "교차용 아세트아미노펜 (계열 1)";
doseVolume = (weight * 0.33).toFixed(1); // 반대 약의 용량 계산
}
}
// ... HTML 화면에 결과 출력 로직
}
[코드 설명] 위 코드는 사용자가 입력한 몸무게를 parseFloat으로 소수점까지 정확히 받아온 뒤, 교차 복용 모드일 경우 ‘사용자가 방금 먹였다고 선택한 약의 반대 성분’을 스스로 찾아내어 해당 성분의 곱셈 공식을 적용하는 똑똑한 로직입니다. toFixed(1)을 사용해 소수점 첫째 자리까지만 깔끔하게 떨어지도록 처리했습니다.
3. 브라우저가 꺼지지 않는 한, 3일 연속 돌아가는 타이머
새벽에 부모는 깜빡 잠이 들 수 있습니다. 그래서 이 타이머는 setInterval 함수를 이용해 1초마다 카운트다운을 하며, 설정된 시간(2시간 또는 4시간)이 0이 될 때까지 무한히 돌아가도록 설계했습니다.
JavaScript
let totalSeconds = currentMode === 'single' ? 4 * 60 * 60 : 2 * 60 * 60;
countdownInterval = setInterval(() => {
totalSeconds--; // 1초씩 감소
if (totalSeconds <= 0) {
clearInterval(countdownInterval); // 타이머 종료
triggerAlarmState(); // 알람 발동 함수 호출
return;
}
// 초 단위 시간을 시:분:초 포맷으로 예쁘게 변환
const hrs = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
const mins = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
const secs = String(totalSeconds % 60).padStart(2, '0');
document.getElementById('timer-clock').innerText = `${hrs}:${mins}:${secs}`;
}, 1000);
이 코드가 작동하기 시작하면 부모는 폰을 켜둔 채 안심하고 잠시 눈을 붙일 수 있습니다. 이제 계산은 끝났습니다. 다음 3편에서는 이 웹 유틸리티가 단순한 계산기를 넘어, 실제 새벽 환경에서 부모를 어떻게 배려하는지 ‘UX(사용자 경험) 디테일’을 다루어보겠습니다.