SP.AGCY
Available for new projects
 
08 / 09Selected project

TTCARE

Client
(주)에이아이포펫
Services
Front-end
Year
2024
Visit site
TTCARE 프로젝트 이미지 1
TTCARE 프로젝트 이미지 2
TTCARE 프로젝트 이미지 3
TTCARE 프로젝트 이미지 4
TTCARE 프로젝트 이미지 5
08 / 09 · Selected project

TTCARE

반려동물 AI 건강체크 맞춤 케어 리포트, 티티케어

Client
(주)에이아이포펫
Year
2024
Services
Front-end
Stack
Next.js
TTCARE 프로젝트 커버

Overview

반려동물 AI 건강체크 맞춤 케어 리포트, 티티케어 앱 플랫폼

반려동물 헬스케어 기업 에이아이포펫에서 프론트엔드 팀장으로 2024년 1월부터 10월까지 티티케어 앱 개발을 리드했습니다. 티티케어는 국내 최초로 정부의 '의료 영상진단 보조 소프트웨어' 인증을 받은 반려동물 케어 앱이며, 과학기술정보통신부 ICT 규제샌드박스 심의위원회 승인을 거쳐 국내 최초로 반려동물 비대면 진료 서비스를 정식 런칭했습니다.

앱은 Next.js로 만든 웹뷰와 네이티브 브릿지 통신 구조로 되어 있으며, 팀 프로젝트로 프론트엔드의 절반을 담당했습니다. 같은 기간 수의사용 '티티케어 파트너센터', 동물병원용 '티티케어 메디컬센터', 에이아이포펫·티티케어 웹사이트, 그리고 동물 행동학 교육 단체 피어프리(Fear Free)의 아시아 최초 런칭 프로젝트까지 함께 이끌어, 보호자와 수의사, 병원이 쓰는 티티케어 서비스를 모두 다뤘습니다.

01

웹뷰 기반 앱 프론트엔드 개발 리드

문제 Problem앱 스토어 배포 주기에 묶이지 않고 기능을 빠르게 갱신해야 했지만, 웹뷰만으로는 카메라·알림·결제 같은 네이티브 기능에 닿기 어려웠습니다.

해결 Solution화면은 Next.js 웹뷰로 만들고 네이티브 기능은 브릿지 통신으로 호출하는 구조를 잡았습니다. 브릿지 인터페이스를 명확히 정의해 화면 쪽 코드가 플랫폼(iOS/Android)을 몰라도 되게 했고, 팀원들이 같은 규칙으로 개발할 수 있도록 컨벤션과 리뷰 절차를 정리했습니다.

결과 Result스토어 배포 없이 서비스를 갱신하면서도 앱다운 사용감을 지켰고, 팀장으로서 팀원들을 키우며 여러 프로젝트를 동시에 리드했습니다.

TTCARE 프로젝트 화면 1

02

AI 건강체크와 맞춤 케어 리포트 흐름

과제 Task눈·피부·치아 촬영부터 AI 분석 결과와 맞춤 케어 리포트까지 이어지는 앱의 주요 흐름 구현

아이디어 Insight보호자는 촬영을 잘 못 하면 결과를 믿지 못합니다. 부위별 촬영 가이드를 단계형으로 제공해 좋은 사진을 찍도록 돕고, 결과 화면은 보호자가 다음에 할 행동(관찰·병원 방문·재검사)이 먼저 보이도록 위계를 정했습니다. 인증받은 소프트웨어인 만큼 결과 표기와 주의 문구는 규정을 그대로 따랐습니다.

결과 Result촬영에 실패해 이탈하는 구간을 줄였고, 리포트는 분석 결과가 보호자의 실제 행동으로 이어지게 만들었습니다.

TTCARE 프로젝트 화면 2

03

비대면 진료 런칭과 진료 도구 개발

해결 Solution규제샌드박스 승인 이후 앱에 비대면 진료 기능을 런칭하고 꾸준히 업데이트와 유지보수를 진행했습니다. 수의사가 고객과 영상통화로 진료하는 파트너센터 기능을 개발했고, 동물병원용 메디컬센터에는 Canvas를 활용해 진료 중 이미지 위에 표시하며 설명하는 페인트 보드 기능과, AI가 반려동물의 기본 건강 상태를 요약해 PDF로 제공하는 기능을 런칭했습니다.

결과 Result보호자의 앱, 수의사의 파트너센터, 병원의 메디컬센터가 한 진료 흐름 안에서 연결되어 비대면 진료가 실제로 돌아가는 서비스가 되었습니다.

TTCARE 프로젝트 화면 3

04

웹사이트와 피어프리 코리아 런칭

내용 Description제품과 인증 이력을 소개하는 에이아이포펫·티티케어 웹사이트를 개발했고, 세계적인 동물 행동학 교육 단체 피어프리의 아시아 최초 런칭 프로젝트를 리드해 서비스 개발과 배포를 마쳤습니다.

TTCARE 프로젝트 화면 4

Process

프론트엔드 팀장으로 스프린트를 운영하며 앱·파트너센터·메디컬센터·웹사이트를 병행했습니다. 브릿지 인터페이스와 코딩 컨벤션을 먼저 정리해 모두가 같은 규칙으로 개발하게 했고, 코드 리뷰로 품질을 확인하면서 팀원들의 성장도 챙겼습니다. 인증 소프트웨어인 만큼 결과 표기와 주의 문구는 체크리스트로 관리해 릴리즈마다 확인했습니다.

Outcome짧은 기간에 앱·파트너센터·메디컬센터·웹사이트·피어프리까지 여러 프로젝트를 병행했습니다. 인증받은 의료 소프트웨어의 엄격한 규정과 소비자 앱에 필요한 친절한 화면을 한 제품 안에서 같이 맞춰야 했습니다. 팀원들과 함께 배우며 프로젝트를 이끌었습니다.

Next project