Project Overview
반려동물과 보호자의 더 나은 공존을 위한 플랫폼, 브리딩(Breeding) 리뉴얼
주식회사 브리딩의 반려동물 훈련 플랫폼 '브리딩'을 2025년 9월부터 2026년 1월까지 프론트엔드 개발과 UX 디자인 리드로 참여해 리뉴얼했습니다. 반려견 훈련 클래스 예약, 장소대여·숙박 예약, 그리고 신규 서비스인 'AI 행동번역'까지, 보호자가 브리딩에서 하는 거의 모든 행동이 이번 리뉴얼의 범위였습니다.
기존 서비스는 기능이 늘어나는 동안 컴포넌트와 화면 문법이 제각각 쌓여 있었고, 예약처럼 결제로 이어지는 흐름은 길고 복잡했습니다. 리뉴얼 시안의 UI·UX에 맞춰 디자인 시스템을 처음부터 다시 구축하고, 그 위에서 핵심 흐름을 하나씩 다시 설계했습니다. Next.js와 TypeScript로 개발했으며, 화면을 새로 그리는 데서 그치지 않고 이후 기능이 늘어나도 같은 규칙으로 확장되는 토대를 만드는 것이 목표였습니다.
Key Contributions
1. 지속 가능한 성장을 위한 디자인 시스템 구축
Problem화면마다 버튼·입력·목록의 모양과 동작이 달라 유지보수 효율이 떨어졌고, 브랜드 인상도 화면마다 흔들렸습니다. 새 기능을 붙일 때마다 비슷한 컴포넌트가 하나 더 생기는 구조였습니다.
Solution색·타이포·간격 토큰부터 정의하고, 원자 단위(Atomic Design)로 버튼·입력·카드·시트·모달 같은 공통 컴포넌트를 새로 만들었습니다. 기본·활성·비활성·로딩·오류 상태를 컴포넌트 안에서 일관되게 다루도록 정리해, 화면을 조립하는 쪽에서는 규칙을 다시 고민하지 않아도 되게 했습니다.
Result기존 화면을 새 시스템으로 옮기며 중복 컴포넌트를 정리했고, 이후 추가된 AI 행동번역 서비스도 같은 부품으로 빠르게 조립할 수 있었습니다. 디자이너와 개발자가 같은 이름으로 같은 부품을 부르게 된 것이 가장 큰 변화였습니다.
2. 반려견 훈련 클래스 예약 리뉴얼
Task훈련사와 클래스를 탐색하고, 일정을 고르고, 결제까지 이어지는 예약 흐름의 전면 재설계
Insight보호자가 예약을 망설이는 지점은 '내 강아지에게 맞는 수업인지'와 '이 일정에 정말 갈 수 있는지'였습니다. 클래스 상세에서 대상·난이도·장소가 먼저 보이도록 위계를 바꾸고, 일정 선택은 화면을 오가지 않고 한 자리에서 고를 수 있게 정리했습니다.
Result불필요한 단계를 걷어내고 정보의 우선순위를 다시 배치해, 단순히 "동작하는 기능"이 아니라 "사용자가 자연스럽게 신뢰하며 결제까지 이어지는 경험"으로 예약 흐름을 만들었습니다.
3. 장소대여·숙박 예약 시스템 리뉴얼
Problem시간 단위로 빌리는 장소대여와 날짜 단위로 묵는 숙박이 비슷한 화면 문법을 쓰고 있어 선택 과정에서 혼동이 잦았습니다.
Solution두 예약을 같은 디자인 시스템 위에서 각각의 단위(시간/박)에 맞는 선택 UI로 분리하고, 가격 확인과 예약 완료 화면은 공통 구조로 묶었습니다. 예약 내역과 변경·취소도 같은 규칙으로 정리해 보호자가 예약 이후에도 헤매지 않게 했습니다.
4. 신규 서비스 'AI 행동번역' 개발과 런칭
Description반려견의 행동을 분석해 보호자가 이해할 수 있는 말로 전달하는 신규 AI 서비스를 개발하고 런칭했습니다.
Approach촬영·업로드·분석 대기·결과로 이어지는 흐름에서 기술적 복잡함은 뒤로 숨기고, 보호자가 지금 무엇을 하면 되는지만 화면에 남겼습니다. 분석에 시간이 걸리는 구간은 진행 상태와 안내로 기다림을 설계했고, 결과 화면은 보호자가 다음에 할 행동이 먼저 보이도록 구성했습니다.
Result기술적 화려함보다 '보호자에게 실질적인 가치를 전달하는가'에 초점을 맞춰 초기 런칭을 주도했고, 런칭 이후에도 안내와 결과 표현을 계속 다듬었습니다.
Process
리뉴얼 시안을 먼저 컴포넌트 단위로 해체해 토큰과 공통 부품을 정의하고, 그 위에서 화면을 하나씩 새 시스템으로 옮기는 순서로 진행했습니다. 예약처럼 결제가 걸린 흐름은 화면을 그리기 전에 단계와 예외 상황을 문서로 먼저 합의했고, 매주 실제 동작하는 화면으로 리뷰하며 방향을 조정했습니다. AI 행동번역은 별도 트랙으로 병행해 리뉴얼 일정에 영향을 주지 않도록 관리했습니다.
Outcome
리뉴얼 이후 브리딩은 훈련 클래스·장소대여·숙박·AI 행동번역이 하나의 디자인 언어 안에서 동작하는 서비스가 되었습니다. 디자인 시스템 덕분에 새 기능을 붙이는 비용이 크게 줄었고, 예약처럼 매출과 직결되는 흐름은 사용자의 망설임을 줄이는 방향으로 정리되었습니다.
from SEOUL, 