Open The Door
방탈출 카페 정보 제공 및 예약 플랫폼
- Period
- 2023.10 – 2023.11
- Role
- 기획 · 프론트엔드 리더(2인)
- Cycle
- 기획 → 개발
Why
방탈출 카페는 테마 정보, 후기, 예약이 전부 다른 곳에 흩어져 있었습니다.
하지만 진짜 불편은 정보가 없는 게 아니라, 마음에 드는 테마를 찾은 다음 예약하려면 앱을 나가야 한다는 것이었습니다.
찾기와 예약을 한 화면에서 끝내는 앱을 만들었습니다.
디자이너·PM 없는 2인 프론트라, Atomic Design과 CDD로 병렬 제작해 개발 시간을 약 50% 줄였습니다.
My Role in the Architecture
백엔드(Java/MySQL/MongoDB)가 테마·예약·리뷰 데이터를 API로 제공하는 구조였습니다.
프론트엔드는 2인이었고, 제가 리더로 React Native 클라이언트 아키텍처 — Atomic Design 컴포넌트, Recoil 상태 관리, 목록·지도·예약 플로우 — 를 설계했습니다.
UI/UX 디자이너와 PM이 없는 팀이라 기획-와이어프레임-기능명세서-프로토타입 단계도 함께 리드했습니다.
백엔드와 같은 화면을 보며 개발해, 기획과 다르게 나오는 완성본의 가능성을 미리 막았습니다.
Stack
Highlights
Atomic Design + CDD로 50% 시간 단축
Atomic Design과 컴포넌트 주도 개발(CDD)로 병렬 제작해 개발 시간을 약 50% 단축했습니다.
MVVM 패턴을 함께 채택해 컴포넌트 확장성도 확보했습니다.
기획부터 프로토타입까지, 체계적인 화면 설계
기획 → 와이어프레임 → 기능명세서 → 프로토타입 → 개발 단계로 나눠, UI/UX 디자이너와 PM이 없는 팀의 공백을 메웠습니다.
같은 화면을 백엔드와 함께 보며 개발해, 기획과 다르게 나오는 완성본의 가능성을 미리 막았습니다.
리스트 성능 최적화
인기 테마 목록을 .map() 전체 렌더링에서 FlatList로 리팩터링해, 화면에 보이는 셀만 렌더링하도록 가상화했습니다.
이미지 영역을 고정 크기로 미리 확보하고 스켈레톤 UI를 띄워, 로딩 전후로 레이아웃이 밀리는 문제를 막았습니다.
GIF가 다수 렌더링되는 화면이라 공통 컴포넌트로 반복 작업을 줄이며 로딩 부담을 관리했습니다.
목록 API는 10개 단위 페이지네이션으로 요청해 메모리 효율을 확보했습니다.
부족한 RN 패키지, 직접 컴포넌트화
React-Native 생태계에 지원 패키지가 많지 않아, 자주 쓰는 기능을 직접 컴포넌트로 만들어 재사용했습니다.
ESLint6 기반으로 컨벤션을 통일해 코드 리뷰 시간도 단축했습니다.
세세한 Code Convention을 맞춰, 담당자가 바뀌어도 직관적으로 이어받을 수 있게 설계했습니다.
Friction & Resolution
직전 프로젝트 팀이 그대로 이어진 팀이라, 서로의 단점을 아는 상태에서 Atomic Design 같은 보완책을 함께 정할 수 있었습니다.
각자 맡아 학습한 내용은 노션으로 공유해 의문점을 빠르게 풀었습니다.
주니어 단계에서 Atomic Design·MVVM을 제대로 적용했는지 스스로도 확신이 없었습니다.
부족한 부분은 추가 학습하고, 프로토타입 단계에서 개선점을 찾아 보완했습니다.
Result
- SSAFY 자율 프로젝트 우수상 — 서울 3반 2위
Next project