2025-26 · Launched & Archived · Team Project

펫뷸런스

특수동물 응급 상황 시, 가까운 24시 동물병원과 응급 수술이 가능한 병원을 찾아줍니다

웹 출시 후 아카이브
앱 출시 후 아카이브
펫뷸런스 앱 메인 화면

개요

Team / Role

8인 / 펫뷸팀 유일한 디자이너

- 디자인 시스템 구축

- 로고 및 브랜드 디자인

- 스크린 디자인 제작 (440개+a)

- 프로토타입 제작

- 디자인 QA 및 개발 협업

- 배너, 마케팅, 메타광고 이미지 제작

Period / Contribution

2025.10 - 2026.05

✅ 디자인 기여도 100%

Tools

Figma

Notion

Discord

Github

디자인 시스템

Foundation

UXUI 디자인 일관성을 유지하고 디자이너와 개발자가 쉽고 효율적으로 활용할 수 있는 리소스를 제공하기 위해 Color 선정, Typography 위계 정립, Icon 제작 등 펫뷸런스 앱의 Foundation 요소를 정립했습니다.

펫뷸런스 Foundation - Color Palette, Typography, Iconography

디자인 토큰

Color Primitive를 정의하고, Color Semantic으로 연결해 Variables로 등록했습니다. Typography는 Variables 등록 후 Styles를 사용했습니다.

펫뷸런스 디자인 토큰 정의 - Semantic Token, Primitive Token, Raw Values
Variables-디자인 토큰 자동 수정 시스템 구축 - Tokens Studio와 Github 연동

컴포넌트 제작

사용 빈도가 높은 컴포넌트에서 변주가 많은 경우, Variables를 활용해 다양한 버전의 컴포넌트를 만들고 베리언츠 그룹으로 묶어 작업 편의성을 높였습니다.

Variables 활용한 디자인 작업 효율 증대 - Button, Search Bar Variants
컴포넌트 및 모듈 제작 - Card, Switch, Button, Search Bar 컴포넌트

스크린 디자인

기획서 IA와 핵심 플로우를 기반으로 스플래시부터 마이페이지까지, 총 8개의 최상위 진입점을 정의하고 안드로이드 화면을 제작했습니다.

220개+ 모바일 화면 제작 - 안드로이드 스크린디자인 및 프로토타입 엣지케이스 점검
220개+ Web 스크린디자인 제작 - 안드로이드 화면과 플로우 기반 Web 화면 추가 제작

01 로그인

소셜 로그인 단일 플로우로 온보딩 이탈을 최소화하고, 응급 상황에서 빠른 접근을 위해 인증 단계를 1-tap으로 설계했습니다.

로그인 화면
소셜 로그인
웰컴 1
웰컴 화면
웰컴 2
약관동의 바텀시트
웰컴 3
약관 동의 후 시작하기

02 온보딩

반려동물 종류와 기본 정보를 초기에 수집해 병원 추천 및 커뮤니티 필터링의 기반 데이터로 활용합니다.

온보딩 - 반려동물 등록
관심있는/키우는 동물종 선택
온보딩 - 위치 권한
세부 동물종 선택

03 홈 / 병원 찾기

응급 상황에서 가장 빠르게 병원을 찾을 수 있도록 지도 기반 탐색을 전면에 배치했습니다. 현재 위치 기준 거리순 정렬과 24시 운영 필터를 1depth에서 제공합니다.

홈 화면
홈
병원 메인
병원 메인
병원 목록
병원 목록
병원 바텀시트
바텀시트-동물종
바텀시트 확장
바텀시트-지역
병원 검색
병원 검색
병원 상세
병원 상세
병원 상세 - 리뷰
병원 상세 — 리뷰

04 리뷰

실사용자 리뷰를 별도 섹션으로 강조하고, 동물 종류별 필터로 내 반려동물 맞춤 리뷰를 빠르게 탐색할 수 있도록 설계했습니다.

리뷰 메인
병원후기 메인화면
리뷰 필터
병원후기 필터
리뷰 상세
병원후기 상세
리뷰 작성 1
병원후기 작성 - 1단계
리뷰 작성 2
병원후기 작성 - 2단계
리뷰 작성 3
병원후기 작성 - 3단계
리뷰 작성 완료
병원후기 등록/수정

05 커뮤니티

특수동물 보호자들의 정보 공유 공간으로, 카테고리 탭과 인기순 정렬로 콘텐츠 탐색 진입 장벽을 낮췄습니다.

커뮤니티 메인
커뮤니티 메인
커뮤니티 카테고리
카테고리
글쓰기
글쓰기
게시물 상세
게시물 상세

06 마이페이지

프로필, 작성한 글 수정, 알림설정, 업데이트, 약관 등을 한 곳에서 관리합니다. 회원은 마이페이지에서 자신의 정보를 확인하고 수정할 수 있습니다. 비회원은 추가 액션이 있을 경우, 로그인 후 이용 가능합니다.

마이페이지 회원
마이페이지 — 회원
마이페이지 비회원
마이페이지 — 비회원

Design Operations

Android와 Web, 2개의 플랫폼을 동시에 설계하고 개발팀과 협업하면서 단일 디자이너로서 440개+ 화면 설계를 주도했습니다.

병렬 프로젝트 관리 - 440개+ 화면 설계를 단일 디자이너가 주도

Learnings

QA

총 8명 팀의 유일한 디자이너로서 기획 피드백, 개발 구현 이슈, 자체 디자인 QA를 동시에 관리해야 했습니다. QA 피드백을 Notion 데이터베이스 한곳에 모으고, 중요도와 플랫폼(App/Web) 기준으로 분류해 각 개발팀이 독립적으로 확인할 수 있게 구조화했습니다. Root Cause까지 함께 기록해 같은 문제가 반복되지 않도록 관리했고, 이를 통해 커뮤니케이션 비용을 줄이며 출시 전 디자인 관련 이슈를 모두 해결했습니다.

중복 제거 및 우선순위 체계화를 통한 QA 효율화 시스템 설계

펫뷸런스를 마무리하며..

2025년 10월 말, 펫뷸런스 팀에 UX/UI 디자이너로 합류했다. 당시 팀은 PO, PM, 백엔드 개발자 2명, 안드로이드 개발자 1명으로 구성되어 있었고, 디자이너는 오직 나뿐이었다. 프로젝트에는 IA와 화면정의서 정도만 정리되어 있었다. 디자이너가 부재한 상태에서 백엔드 개발이 먼저 진행되고 있었기 때문에, 구체적인 UI가 필요한 순간마다 PO와 PM이 레퍼런스를 찾아 임시로 방향을 정하는 방식으로 작업이 이어지고 있었다.

합류 후 가장 먼저 IA와 사용자 흐름을 다시 살펴봤다. 특수동물 병원 탐색이라는 목적에 비해 일부 플로우가 어색하거나 비효율적으로 느껴졌고, 이를 바탕으로 정보 구조와 화면 흐름을 수정했다. 팀은 별도의 문서나 소통 채널을 늘리기보다, Figma 안에서 IA, 스크린 디자인, 코멘트를 함께 관리했다. Discord 회의에서는 Figma 화면을 모두가 동시에 보며 의사결정을 진행했고, 덕분에 빠른 피드백과 수정이 가능했다.

합류 후 약 3주 동안 컬러, 타이포그래피, 레이아웃 그리드 등 Foundation을 정의하고, 앱 컴포넌트와 주요 스크린 디자인을 구축했다. 이후 프론트엔드 개발자와 논의하며 주요 디자인 토큰을 Figma 플러그인(Token Studio)을 통해 GitHub로 옮겼고, 디자인과 개발 사이의 기준을 맞춰가기 시작했다. 1인 디자이너였기 때문에 브랜드 컬러, 타이포그래피, 컴포넌트, 모듈, 화면 설계, 인터랙션뿐 아니라 앱 로고, 웹 favicon, Google Play 스토어 아이콘, 그래픽 이미지, 스크린샷, Meta 광고 이미지까지 디자인과 관련된 모든 산출물을 만들었다.

원래 2025년 11월 출시를 목표로 했지만, 유일한 안드로이드 개발자가 일이 많아지면서 개발 가능 시간이 줄어들었고, 일정이 계속 밀렸다. 또한 서비스가 특수동물이라는 매우 좁은 시장을 대상으로 하고 있었기 때문에, Android 앱만으로는 진입 장벽이 크다고 판단했다. 앱 다운로드가 필요한 구조보다 웹 접근성이 초기 유입에 유리하다고 보고, 팀 논의 끝에 웹 개발자 2명을 추가로 모집해 Web과 App을 함께 출시하기로 했다.

웹 디자인은 처음이었지만, 이미 구축해 둔 Foundation, 앱 컴포넌트, 스크린 디자인, 디자인 토큰이 있었기 때문에 기존 디자인 시스템을 웹 레이아웃에 맞게 확장하는 방식으로 빠르게 작업할 수 있었다. 스크린 디자인을 기반으로 웹 개발은 빠르게 진행되었고(web은 개발자가 2명이었기에 작업 속도가 월등히 빨랐다). 펫뷸런스 web은 2026년 2월, Android App은 3월에 정식 출시되었다.

다만 출시 직전, 초기 작업 방식에서 비롯된 문제가 드러났다. 내가 합류한 뒤 IA와 사용자 흐름을 수정했지만, 백엔드 개발자 중 한 명은 변경된 UX/UI를 실시간으로 반영한 반면 다른 한 명은 기존 화면정의서를 기준으로 작업을 이어가고 있었다. 이로 인해 출시 직전 백엔드와 화면 흐름이 맞지 않는 부분이 발생했고, 수정, 확인, QA에 예상보다 훨씬 많은 시간이 필요했다.

당시 팀은 빠른 소통을 위해 긴급하지 않은 논의는 Figma 코멘트에 남기고, 긴급한 사항은 카카오톡으로 공유하는 방식으로 일했다. 전체 회의에서도 PO가 매번 각자 작업 중 궁금한 점이나 건의할 부분이 없는지 확인했고, 나는 변경사항이 Figma에 남아 있는 만큼 팀원들이 자연스럽게 캐치업할 것이라고 생각했다. 하지만 실제로는 디자인 변경이 곧 백엔드 API나 데이터 구조 변경으로 이어질 수 있었고, 그런 영향 범위까지 모두가 같은 깊이로 이해하고 있다고 가정해서는 안 됐다.

특히 API, 화면 플로우, 데이터 구조에 영향을 주는 큰 수정은 디자이너가 변경 배경과 전후 차이, 개발 영향 범위를 직접 정리해 관련 개발자에게 공유해야 했다. 동시에 개발자 역시 수정되는 화면과 코멘트를 주기적으로 확인하고, 의문이 생기는 지점은 먼저 질문하는 과정이 필요했다. 결국 이 문제는 한 사람의 실수라기보다, 변경사항을 팀 전체가 동일하게 이해하도록 만드는 프로세스가 부족했던 사례였다.

출시 이후에는 파충류와 소동물 관련 네이버 카페와 커뮤니티에 직접 홍보하고 Meta 광고도 집행했다. GA4를 통해 유입과 사용자 행동을 확인하며 일부 화면과 CTA를 개선했지만, 출시 당일을 제외하면 방문자 수와 활성 사용은 매우 낮게 유지되었다. 특수동물 병원∙의료 정보라는 상당히 니치한 시장에서 '우리가 아니면 아무도 하지 않을 서비스'라고 생각했지만, 실제 운영을 통해 '아무도 하지 않는데에는 이유가 있다'는 말을 체감했다.
실제로 2025 서울시 AI 해커톤에서 우리팀 피칭을 들은 심사위원들이 가장 많이 했던 말이 "그래서 수익구조를 어떻게 할거에요?" 였다. 가장 크리티컬한 의문이자 문제였지만 우리는 결국 그 문제를 해결하지 못했다. 어쩌면 영원히 해결되지 못할 문제를 그저 관성으로, 놓지 못하고 계속 잡고있었던것 같기도 하다.

결국 서버 비용과 팀 리소스, 실제 수요를 함께 검토한 뒤 2026년 5월부로 서비스를 아카이브하기로 결정했다.
초기 구축부터 출시까지 적지 않은 시간, 돈, 에너지를 들였기 때문에 아쉬움이 컸다. 하지만 자선사업이 아닌 이상, 지속 가능한 수익 구조가 없다면 프로덕트는 이 세상에 존재할 수 없음을 뼈저리게 느꼈다.
펫뷸런스는 실패했지만, 1인 디자이너로서 제품의 뼈대부터 출시-운영-종료 판단까지 경험하게 해준 프로젝트였다.

이 과정에서 얻은 배움은 어떤 결과 지표보다 오래 남을거라고 생각하며.. 또 다른 도약을 준비중이다.

해커톤 현장

2025 서울시 AI 해커톤 본선에 오르기까지, 8인 팀이 함께 밤을 보낸 시간들. 팀원들의 얼굴은 알아볼 수 없게 처리했습니다.