초보 부모 해열제 교차복용 멘붕: 의사 선생님, ‘교차 복용’이 대체 뭔가요?(웹 유틸리티 기획 및 UI 설계)

작성자:

1. 새벽 2시, 체온계의 숫자 ‘39.2도’가 주는 공포

돌을 갓 지난 아이를 키우며 가장 두려운 순간은 단연코 ‘새벽에 펄펄 끓는 열’을 마주할 때입니다. 평소 현장 PM으로 일하며 흥인이라는 회사를 세우고 운영할 때 수많은 돌발 변수와 위기 상황을 겪어왔지만, 그 어떤 비즈니스 리스크도 내 아이의 체온계에 찍힌 ‘39.2도’라는 숫자 앞에서는 아무것도 아니었습니다.

당황한 마음을 부여잡고 병원과 약국을 다녀왔지만, 돌아온 것은 멘붕의 연속이었습니다. 의사 선생님과 약사님은 제게 ‘아세트아미노펜’, ‘이부프로펜’, ‘덱시부프로펜’, ‘교차 복용’ 등 평소에는 들어본 적도 없는 전문 용어들을 쏟아냈습니다.

“어머님, 아버님. 이 약은 4시간 간격으로 먹이시고요, 만약 열이 안 떨어지면 저 약을 2시간 뒤에 교차 복용시키세요. 아, 덱시부프로펜이랑 이부프로펜은 같은 계열이니까 같이 먹이시면 절대 안 됩니다!”

비몽사몽 한 새벽, 열나는 아이를 안고 저 복잡한 수식과 규칙을 완벽하게 계산해 낼 수 있는 부모가 몇이나 될까요? 언제 어떤 약을 먹였는지 기억도 가물가물한데, 몸무게에 맞춰 몇 ml를 먹여야 하는지 계산하다 보니 머리가 하얗게 변했습니다. 현장에서 복잡한 공정과 물량을 계산하는 데는 이골이 났지만, 육아의 영역은 완전히 다른 차원이었습니다.

2. 유유제약 가이드라인, 그리고 직접 도구를 만들기로 결심하다

정확한 정보가 필요했습니다. 인터넷을 뒤지다 우연히 [유유제약 블로그의 해열제 가이드라인]을 발견했습니다. 거기에 적힌 기준들은 명확했습니다.

  • 아세트아미노펜: 몸무게 × 0.33ml

  • 이부프로펜: 몸무게 × 0.4ml

  • 동일 성분은 4시간 간격, 다른 성분은 2시간 간격으로 교차 복용.

정보는 얻었지만, 매번 새벽에 핸드폰 계산기를 두드리고 알람을 수동으로 맞추는 것은 너무 소모적이었습니다. ‘명확한 데이터와 공식이 있다면, 내가 직접 자동화 도구를 만들면 되지 않을까?’ 워드프레스에 SEO 최적화된 웹 도구를 만들어 올리는 것에 관심이 많았던 저는, 내 아이를 지키고 나와 같은 처지의 수많은 초보 부모들을 돕기 위해 ‘새벽반 열내림 특공대’라는 웹 기반 해열제 타이머를 기획하게 되었습니다.

3. 직관적인 UI 설계: 불안한 부모의 눈을 편안하게

가장 먼저 고민한 것은 디자인이었습니다. 앱을 따로 설치할 필요 없이 웹 브라우저에서 바로 접속되어야 하며, 당황한 부모의 눈에 가장 중요한 정보만 확 들어와야 했습니다.

<style>
:root {
–bg-color: #F2F4F6;
–card-bg: #FFFFFF;
–text-main: #191F28;
–text-sub: #8B95A1;
–point-orange: #FFA500;
–point-turquoise: #009688;
}
body {
font-family: ‘Pretendard Variable’, sans-serif;
background-color: var(–bg-color);
}
.card {
background-color: var(–card-bg);
border-radius: 24px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
</style>

[코드 설명] 처음 뼈대를 잡을 때 사용한 CSS 코드입니다.

  1. 색상의 심리학: 불안감을 덜어주기 위해 화려한 그라데이션은 모두 배제했습니다. 핵심 포인트 컬러로는 ‘경각심과 강조’를 나타내는 솔리드 오렌지(#FFA500)와, ‘의학적 안정감’을 주는 차분한 틸(Teal) 청록색(#009688)을 매치했습니다.

  2. 폰트 최적화: 모바일 화면에서 가장 가독성이 뛰어난 Pretendard 폰트를 CDN으로 연결하여, 새벽에 흔들리는 시야 속에서도 숫자가 명확히 보이도록 처리했습니다.

  3. 카드형 레이아웃: 토스(Toss)나 애플(Apple)의 앱처럼 둥근 모서리(border-radius: 24px)와 부드러운 그림자를 가진 카드 형태로 입력 영역과 결과 영역을 확실히 분리했습니다.

1편을 마무리하며

기획과 UI 뼈대가 완성되었습니다. 디자인은 예쁘게 나왔지만, 이 껍데기가 제대로 작동하려면 ‘몸무게에 따른 용량 계산’과 ‘2시간/4시간 분기 타이머’라는 핵심 뇌(JavaScript)를 심어주어야 합니다. 다음 2편에서는 이 계산기의 핵심 로직이 어떻게 구성되었는지, 자바스크립트 코드를 파헤쳐 보겠습니다.

[🚒새벽반 열내림 특공대 링크]

댓글 남기기