아이 감기 증상에서 약국 찾기까지, ‘우리집-약사’를 토스 미니앱으로 만든 이유

무엇을 만들었나

아이에게 감기 증상이 나타나면 보호자는 ‘지금 참고할 수 있는 약은 무엇인지’, ‘바로 병원에 가야 하는 상황은 아닌지’를 먼저 확인하게 됩니다. 하지만 증상에 맞는 일반약 정보와 응급처치 방법, 가까운 약국·병원 위치가 여러 곳에 흩어져 있으면 필요한 내용을 순서대로 찾기 어렵습니다.

‘우리집-약사’는 가족의 일상에서 반복되는 건강 관련 질문을 한곳에서 확인할 수 있도록 만든 앱인토스 미니앱입니다. 앱이 답하려는 질문은 다음과 같습니다.

“아이와 가족에게 지금 필요한 건강 정보와 다음 행동은 무엇일까요?”

사용자는 감기처럼 익숙한 증상을 기준으로 일반약 정보를 살펴보고, 상황에 맞는 응급처치 가이드를 확인할 수 있습니다. 계절별 건강관리와 민간요법 정보를 살펴본 뒤 주변 약국과 병원을 찾는 과정까지 이어서 이용하게 됩니다.

화면은 아이와 보호자가 부담 없이 읽을 수 있도록 따뜻한 민트와 부드러운 블루를 중심으로 구성했습니다. 카드와 큰 버튼을 배치해 메뉴를 빠르게 찾도록 했으며, 중요한 주의사항은 별도로 구분했습니다. 정보 화면에는 참고자료와 주의 문구를 표시해 건강 정보가 단정적인 진단으로 받아들여지지 않도록 했습니다.

이 앱은 Google AI Studio에서 만든 초기 앱을 앱인토스 미니앱 구조로 전환한 뒤 실제 출시까지 진행한 결과물입니다.

📌 먼저 보는 핵심 답변

• 우리집-약사는 가족의 증상별 일반약 정보와 응급처치, 계절 건강관리, 주변 약국·병원 찾기를 제공하는 토스 미니앱입니다.
• 앱인토스 구조로 전환한 뒤 가이드 점검과 신규 빌드를 거쳐 배포·출시했고, 증상 세부분류와 광고 동작도 실제 화면에서 확인했습니다.
• AI 상담 면책 안내와 개인정보 입력 주의문을 적용했으며, 계획서의 후속 범위는 출시 기능과 구분해 검토 대상으로 남겨두었습니다.

핵심 결정과 출시 범위

출발점은 Google AI Studio에서 생성한 앱이었습니다. 이를 그대로 확장하기보다 토스 안에서 실행되는 미니앱 구조로 전환하는 것을 첫 번째 결정으로 삼았습니다.

React 18, TypeScript, Vite, Tailwind CSS v4를 바탕으로 화면을 정리하고, `@apps-in-Toss/web-framework`를 적용해 앱인토스의 저장 기능과 광고 환경에 맞췄습니다. 주변 약국·병원 찾기 화면에는 Leaflet을 활용했습니다.

출시 범위는 아이와 가족이 자주 겪는 증상을 빠르게 확인하는 데 맞췄습니다. 현재 이용할 수 있는 기능은 다음과 같습니다.

• 증상별 일반약 정보
• 응급처치 가이드
• 계절별 건강관리
• 민간요법 정보
• 주변 약국·병원 찾기
• AI 상담실의 면책 안내 및 개인정보 입력 주의문

홈에서 증상을 고르면 관련 세부분류와 약 목록으로 이어지도록 구성했습니다. 세부 증상 선택값이 목록 화면의 초기 필터에 반영되도록 수정해, 사용자가 목록에서 다시 필터를 설정하지 않아도 관련 약을 확인할 수 있게 했습니다.

건강 정보 서비스인 만큼 안전장치도 출시 범위에 포함했습니다. 홈, 약 정보, 약상자 화면에는 공공데이터 기반 참고자료를 표시했고, 응급 상황을 일반적인 약 정보만으로 판단하지 않도록 주의 안내를 배치했습니다.

기술적으로는 Express와 Gemini API를 사용하는 백엔드를 구성하고 GCP 웹 서버 스테이징에 배포했습니다. 앱인토스 가이드 패키지의 개발자 센터 API, 콘솔 규격, 컴플라이언스 기준을 점검한 뒤 신규 빌드를 완료했습니다. 계획서에 담긴 후속 기능은 현재 출시 범위와 분리해 검토 중이며, 확정되지 않은 기능이나 일정은 완성된 기능으로 서술하지 않았습니다.

사용자 시나리오로 보는 실제 화면 흐름

1. 아이의 증상을 확인하려는 보호자

사용자가 앱을 열면 아이와 가족의 증상을 기준으로 필요한 정보를 찾을 수 있는 홈 화면이 나타납니다. 감기처럼 범위가 넓은 증상을 선택한 뒤 목감기·기침·가래, 코감기와 같은 세부분류로 범위를 좁힐 수 있습니다.

2. 증상에 맞는 약 목록을 확인하는 과정

사용자가 감기에서 ‘목감기·기침·가래’를 선택하면 해당 선택값이 약 목록 화면까지 전달됩니다. 이때 관련 의약품 3개만 표시되며, 코감기나 종합감기 약은 목록에서 제외됩니다.

초기에는 처음 선택한 증상과 관계없는 약이 함께 노출되는 문제가 있었습니다. 이를 수정해 세부분류 선택값이 목록 화면의 초기 필터에 반영되도록 했고, 사용자가 다시 필터를 설정하지 않아도 관련 약을 바로 확인할 수 있게 했습니다.

3. 약 정보와 주의사항을 확인하는 과정

사용자는 약 목록에서 항목을 선택해 일반약 관련 내용을 확인합니다. 약 정보와 약상자 화면에는 공공데이터 기반 참고자료를 표시해 정보의 출처도 함께 살펴볼 수 있도록 했습니다.

건강 정보가 진료나 약사의 상담을 대신하지 않는다는 안내도 화면에 반영했습니다. 필요한 경우 응급처치, 계절별 건강관리, 민간요법 정보로 이동해 추가 내용을 확인할 수 있습니다.

4. 가까운 약국이나 병원을 찾는 과정

약국이나 병원을 찾아야 할 때는 주변 찾기 기능으로 이동합니다. Leaflet 기반 지도를 통해 주변 약국과 병원 위치를 확인할 수 있습니다.

사용자는 증상 선택부터 관련 약 정보와 주의사항 확인, 가까운 의료기관 탐색까지 하나의 흐름 안에서 이어서 이용하게 됩니다.

안전장치와 출시 전후 수정

건강 정보를 다루는 앱에서는 기능을 많이 넣는 것만큼 사용자가 내용을 어떻게 받아들이는지 관리하는 일도 중요합니다.

AI 상담실 상단에는 안내 내용이 진단이나 처방을 대신하지 않는다는 면책 배너를 추가했습니다. 상담 과정에서 이름과 연락처 같은 개인식별정보를 입력하지 않도록 주의문도 함께 배치했습니다.

홈, 약 정보, 약상자 화면에는 공공데이터 기반 참고자료를 표시했습니다. 일반약 정보와 응급처치 안내는 증상과 복용 상황에 따라 판단이 달라질 수 있으므로, 참고자료와 주의 안내가 자연스럽게 이어지도록 구성했습니다. 앱의 정보를 의료기관이나 약사의 상담과 같은 의미로 오해하지 않도록 안내한 것도 같은 맥락입니다.

출시 전후에는 광고 보상 처리도 점검했습니다. 토스 외부 웹 브라우저나 개발 환경에서 광고가 닫힌 경우에도 보상이 지급되던 버그를 수정해, 실제 토스 SDK 환경에서 광고 시청이 완료된 경우에만 보상이 처리되도록 바로잡았습니다.

광고 영역은 토스 콘솔의 라이브 배너 광고 그룹을 메인 화면 하단 고정 띠 배너에 연결했습니다. 토스 콘솔 공식 로고와 다크 모드 설정을 반영한 뒤 번들을 다시 빌드했습니다. 개발자 센터 API, 콘솔 규격, 컴플라이언스 항목을 점검해 화면 기능뿐 아니라 출시 환경에서의 표시와 동작까지 확인했습니다.

현재 상태, 다음 계획, 배운 점

현재 상태

‘우리집-약사’는 앱인토스 미니앱으로 배포·출시된 상태입니다. Google AI Studio에서 만든 초기 앱을 앱인토스 구조로 전환했고, 가이드 패키지와 개발자 센터 API, 콘솔 규격, 컴플라이언스 설정을 점검했습니다. TypeScript 검사와 신규 빌드도 완료했습니다.

현재 출시 범위에는 증상별 일반약 정보, 응급처치 가이드, 계절별 건강관리, 민간요법, 주변 약국·병원 찾기가 포함됩니다. AI 상담실에는 면책 안내와 개인식별정보 입력 주의문을 넣었고, 주요 화면에는 공공데이터 기반 참고자료를 표시했습니다.

세부 동작도 실제 화면 기준으로 확인했습니다. 감기에서 ‘목감기·기침·가래’를 선택하면 해당 분류의 의약품 3개만 표시되며, 코감기나 종합감기 약은 목록에서 제외됩니다. 약국 배너 광고 설정과 자동 배포 스크립트의 ‘우리집-약사’ 매핑도 완료했습니다.

다음 계획

계획서에 적힌 후속 기능은 현재 출시 기능과 구분해 검토 중입니다. 구체적인 기능명과 일정은 아직 확정하지 않았으므로 현재 기능에 포함하지 않습니다.

배운 점과 남은 질문

AI로 만든 화면을 실제 서비스로 옮길 때는 기능 구현만으로 충분하지 않았습니다. 필터 상태가 다음 화면에 제대로 전달되는지, 면책 문구와 참고자료가 적절한 위치에 있는지, 광고와 배포 규격이 실제 서비스 환경에서 올바르게 동작하는지까지 사용자가 마주하는 전체 흐름을 점검해야 했습니다.

다음 단계에서는 건강 앱 사용자가 가장 먼저 확인하려는 정보가 무엇인지, 그 정보를 안전하게 전달하려면 어떤 화면 구조가 필요한지 더 확인해볼 필요가 있습니다.

첨부한 실제 화면

• 이미지 1: 01.png (실제 화면 1)
• 이미지 2: 02.png (실제 화면 2)
• 이미지 3: 03.png (실제 화면 3)
• 이미지 4: 04.png (실제 화면 4)

❓ 자주 묻는 질문

Q. 우리집-약사에서는 어떤 정보를 확인할 수 있나요?

A. 증상별 일반약 정보, 응급처치 가이드, 계절별 건강관리, 민간요법, 주변 약국·병원 찾기 기능을 이용할 수 있습니다.

Q. 증상별 약 목록은 어떻게 좁혀서 보나요?

A. 홈에서 증상과 세부분류를 선택하면 해당 분류가 약 정보 화면의 초기 필터로 전달됩니다. 예를 들어 감기에서 ‘목감기·기침·가래’를 선택하면 관련 의약품 3개가 표시됩니다.

Q. AI 상담에 개인정보를 입력해도 되나요?

A. AI 상담실 상단에 면책 안내와 개인식별정보 입력 주의문을 표시했습니다. 상담 내용을 참고할 때도 개인을 식별할 수 있는 정보는 입력하지 않는 방식으로 이용해야 합니다.

Q. 현재 출시된 서비스에 아직 남은 계획은 무엇인가요?

A. 계획서에 담긴 후속 범위는 현재 출시 기능과 분리해 검토 중입니다. 이 글에서는 배포·출시가 확인된 기능과 실제 검증이 끝난 흐름을 중심으로 다룹니다.

이 개발기를 참고할 때

이 글은 제가 직접 만든 제품의 개발 과정을 정직하게 공유하는 기록입니다.

• 스크린샷과 설명은 작성 시점의 실제 상태 기준이며, 이후 업데이트로 달라질 수 있습니다.
• "다음 계획"으로 표시한 기능은 아직 완성된 기능이 아닙니다.
• 참고하거나 인용할 때는 이 글의 URL을 출처로 남겨주세요.
• 궁금한 점이나 피드백은 댓글로 남겨주시면 다음 개발과 다음 글에 반영하겠습니다.