아픈 반려견의 케어를
기록에서 진료까지 연결합니다.

약, 식사, 음수량, 증상과 병원 일정을 한 앱에서 관리하고
매일의 기록이 진료 전 건강 확인까지 이어지도록 설계했습니다.

구분: 개인 작업 · 포트폴리오
역할: 기획 · UIUX · 바이브코딩
기간: 2026.03 — 2026.06
툴: Figma · Photoshop · Claude · Gemini

open_in_new앱 보기 open_in_new랜딩 보기

Background

기록은 있는데,
막상 필요할 때 찾을 수가 없었습니다.

노령견이나 만성질환이 있는 반려견은 약 복용, 식사량, 음수량, 증상 변화, 병원 일정을 꾸준히 챙겨야 합니다. 그런데 실제 기록은 메모장, 사진첩, 캘린더에 흩어져 있고, 보호자는 매일 기억에 의존하게 됩니다.

왜 만들었나

체크로 끝내는 게 아니라, 매일 남긴 기록이 병원 진료까지 자연스럽게 이어지면 좋겠다고 생각했습니다. 특히 노령견 보호자는 작은 변화에도 예민하기 때문에, 경고를 앞세우기보다 조용히 확인하고 넘어가는 흐름이 필요했습니다.

기록이 흩어진다 약, 증상, 사진, 병원 일정이 각기 다른 앱에 저장돼 전체 흐름을 한눈에 보기 어렵습니다.

매일 반복이라 빠뜨리기 쉽다 약, 식사, 음수는 단순하지만 한 번 놓치면 건강에 바로 영향을 줍니다.

진료 전마다 다시 정리해야 한다 일상 기록과 병원 진료 사이에 단절이 생겨 보호자 부담이 매번 반복됩니다.

Design Challenge

기능을 많이 넣는 것보다,
매일 다시 열게 만드는 것이 핵심이었습니다.

매일 반복되는 서비스일수록 입력이 길어지면 사용이 끊깁니다. 앱을 열자마자 오늘 해야 할 일을 확인하고 빠르게 기록할 수 있어야 했고, 그 기록이 진료까지 이어지는 구조가 필요했습니다.

home

오늘 할 일을 먼저

남은 케어 일정과 진행률을 홈 상단에서 바로 확인할 수 있게 배치했습니다.

edit_note

반복 입력을 줄인다

약, 식사, 물, 증상 같은 자주 쓰는 항목은 카드·선택형으로 단계를 최소화했습니다.

local_hospital

기록이 진료로 이어진다

오늘의 체크가 날짜별 기록, 상태 변화, 진료 전 요약까지 연결되도록 구조를 잡았습니다.

spa

불안을 자극하지 않는 톤

의료 서비스의 경고 중심 표현 대신, 생활 속 돌봄에 가까운 차분한 인터페이스를 적용했습니다.

Service Structure

5개의 화면으로
케어의 전체 흐름을 연결했습니다.

홈에서 시작해 기록·일정을 거쳐 리포트로 이어지는 흐름을 기준으로 화면 구조를 잡았습니다. 기능을 늘리기보다 자주 쓰는 동작이 끊기지 않게 연결하는 데 집중했습니다.

home Home

오늘의 케어 현황

반려견 프로필, 다음 진료일, 오늘의 케어 진행률과 남은 일정을 한 화면에서 확인합니다.

사용자 지정 케어

기본 항목 외에 질환과 생활 패턴에 따라 직접 항목과 시간을 추가할 수 있습니다.

edit_note Record

빠른 기록

약, 식사, 음수량, 증상, 배변, 체중을 공통 카드 구조로 정리해 최소 선택으로 저장합니다.

시간 기반 이력

기록 시간과 상태를 함께 저장해 단순 완료 여부가 아닌 시간대별 변화를 볼 수 있습니다.

calendar_month Schedule

일정 등록과 완료 관리

Supabase와 연동해 약 복용, 반복 케어, 병원 일정을 실제 데이터로 저장하고 상태를 변경합니다.

병원 정보 연결

진료 예약일, 병원명, 담당 의사, 메모와 검사 결과를 일정에 함께 기록합니다.

bar_chart Report

날짜별 기록 확인

날짜별 기록과 상태 변화를 한눈에 확인하고, 진료 전 필요한 정보를 정리합니다.

진료까지 이어지는 구조

보호자가 병원 갈 때마다 기록을 다시 찾는 과정을 줄이는 게 핵심 목적이었습니다.

Design System

Soft Care, Warm Medical,
Calm Dashboard.

보호자가 매일 쓰는 서비스인 만큼 지나치게 의료적이거나 긴장감을 주는 표현은 피했습니다. 세이지 그린과 크림 계열로 신뢰감을 유지하면서도, 많은 정보를 한 번에 노출하기보다 현재 상태와 다음 행동이 먼저 보이도록 여백과 정보 위계를 조정했습니다.

Color

세이지 그린과 크림 계열을 기반으로 건강관리 서비스의 신뢰감은 유지하면서도 생활 속 돌봄에 가까운 인상을 만들었습니다.

Sage #5F7F6F

Deep #38503F

Mint #E7EFE8

Gray #DCE7EA

Cream #F6F1E7

Title Aa Pretendard 800

Accent Aa Pretendard 400

Body Aa Pretendard 400

IA 설계 홈·기록·일정·리포트·마이페이지로 MVP 범위를 나누고 화면별 우선순위를 정리했습니다.

UI 컴포넌트 케어 카드, 일정 카드, 상태 태그, 진행률 바, 입력 필드와 하단 내비게이션을 공통 단위로 정리했습니다.

구현 HTML·CSS·JS로 주요 화면을 구현하고, Supabase로 일정 등록·조회·완료·삭제 흐름을 연결했습니다.

AI 활용 방식 Claude·Codex로 화면 구조와 데이터 로직을 구현했습니다. 코드를 대신 쓰게 한 게 아니라, 기획 의도를 구조로 옮기고 직접 확인하며 수정하는 방식으로 썼습니다.

UI Components

Pet Card

🐶

해피 chevron_right

12살 · 말티즈

심장질환 신장관리

오늘 케어3 / 5

Care Checklist

check 아침 심장약 완료

check 아침 식사 완료

저녁 산책 18:00

저녁약 20:00

Quick Record

stethoscope 증상

restaurant 식사

water_drop 물

note_alt 메모

monitor_weight 체중

photo_camera 사진

Next Visit Banner

calendar_month

다음 진료일 2026.06.21 (토)

D-3

Tab Bar

home홈

edit_note기록

local_hospital병원

bar_chart리포트

settings설정

Result

화면 설계에서 끝내지 않고,
데이터가 실제로 움직이는 프로토타입을 만들었습니다.

케어 확인부터 기록, 일정 관리, 진료 전 요약까지 이어지는 핵심 흐름을 구축했습니다. Supabase로 일정 데이터를 실제 저장·변경하는 흐름까지 연결해 정적인 시안이 아닌 동작하는 프로토타입으로 완성했습니다.

RESULT 01 서비스 흐름 정리

오늘의 케어 확인 → 기록 → 일정 관리 → 진료 전 건강 확인으로 이어지는 핵심 사용자 흐름을 구축했습니다.

RESULT 02 확장 가능한 UI 구조

반복되는 기록·일정 요소를 공통 컴포넌트로 정리해 새로운 케어 항목이나 기능을 추가할 수 있는 기반을 만들었습니다.

RESULT 03 실제 데이터 기반 프로토타입

Supabase로 일정 데이터가 저장되고 상태가 바뀌는 기능을 직접 구현해 화면 설계와 실제 동작을 연결했습니다.

Review

반복 사용 서비스에서는 기능 수보다,
매일 다시 열게 만드는 흐름이 중요하다는 걸 확인했습니다.

UI 디자인이 화면을 만드는 데서 끝나지 않고, 사용자의 감정과 반복 행동까지 함께 설계하는 일이라는 걸 이번 프로젝트에서 실감했습니다. 반려동물 건강처럼 예민한 주제에서는 정보의 강도를 조절하는 것 자체가 설계의 일부였습니다. 화면을 디자인하는 데서 끝내지 않고 데이터 저장과 상태 변경까지 직접 연결해보면서, UI 구조가 개발 방식과 운영 확장성에 어떤 영향을 주는지도 경험했습니다.

다음 방향: 다견 관리 가족 간 기록 공유 AI 건강 요약 병원 제출용 기록 내보내기

사이트 보러가기 arrow_outward

아픈 반려견의 케어를 기록에서 진료까지 연결합니다.

기록은 있는데,막상 필요할 때 찾을 수가 없었습니다.