팀장, 프론트엔드, 프로덕트 디자인
2025년 5월 27일 ~ 6월 26일(약 4주)
'어디가냥'은 전국 체험 예약 플랫폼입니다. 파편화된 탐색 경험을 통합하고, '수집'의 재미를 더한 Gamification을 통해 사용자의 즐거운 여행 경험 설계를 목표로 한 프로젝트입니다. UI/UX디자인 및 프론트 개발, 팀장으로서 프로젝트의 비전 수립부터 UI/UX 설계, 핵심 기능 개발, 최종 배포까지 전 과정을 주도했습니다.
- 인터랙티브 3D 배지 시스템: 성능과 경험의 균형점 찾기
- 데이터 관리: 백엔드 제약 극복을 위한 unstable_cache 활용
- UI/UX 설계: 파편화된 경험 통합
- 디자인 시스템 & 워크플로우 최적화
- 협업 프로세스: AI를 활용한 코드 품질 관리
사용자의 성취감 극대화를 위해 3D 배지 시스템을 도입했으나, 초기 프로토타입은 웹 환경에서 심각한 성능 저하를 유발함. 블렌더에서 직접 작업한 3D 모델은 용량이 너무 컸고, R3F로 렌더링 시 모바일 환경에서 로딩 시간이 길어지며 사용자 경험을 해치는 치명적인 문제가 발생함.
- 3D를 포기하고 2D 이미지 시퀀스 애니메이션으로 대체
- 3D 모델을 웹 환경에 맞게 최적화하는 방법
위 대안들 중 후자를 선택함. 1은 안정적이지만 프로젝트의 핵심 가치인 '수집'의 재미와 시각적 만족감을 크게 저하시킨다고 판단, 기술적 한계를 정면으로 돌파하기로 결정함.
- 모델 최적화: 3D 프로그램인 Blender의 압축(Compress)기능을 활용하여 시각적 품질 저하를 최소화하면서 폴리곤 수를 80% 이상 감축하여 렌더링 성능을 개선하고, 용량을 6배 이상 줄임
- 테스트 및 튜닝: 최적화된 모델을 Three.js Editor에서 직접 테스트하며 웹 환경에서의 재질과 조명을 재설계함.
- 이후 React로 프로토타입을 만든 후 해당 레포지토리를 배지 페이지 담당 팀원에게 공유함
- 결과: 초기 5MB가 넘던 3D 에셋의 용량을 800KB 미만으로 경량화하는 데 성공함. 이를 통해 평균 렌더링 시간을 단축시켰고, 성능과 사용자 경험을 모두 개선하게 됨
- 확장: 현재는 마우스 오버 인터랙션만 있으나, 향후 사용자가 배지를 드래그하여 돌려보거나, 클릭 시 물리 기반 애니메이션을 추가하여 '수집'의 경험을 더욱 극대화할 수 있음.
'가격 분포 그래프' UI를 구현하기 위해 가격 데이터만 필요했으나, 주어진 백엔드 API에는 전체 체험 목록을 반환하는 엔드포인트만 존재함. 매번 불필요한 전체 데이터를 가져와 클라이언트에서 가공하는 것은 극심한 성능 저하와 비효율을 유발함. 또한 평균치에서 크게 벗어난 가격(outlier)이 존재하여 가격 분포가 균일하지 않았음.
부트캠프 환경의 제약 상 백엔드 API 추가 요청이 불가능했으므로, 프론트엔드 단에서 비효율을 최소화하는 방법에 집중함. 캐싱 처리를 하되, 가격 분포 그래프는 데이터의 양은 많으나 실시간성과 정확도가 크게 중요하지 않으므로 캐싱을 자주 하지 않아도 됨.
- Next.js의 실험적 기능인
unstable_cache를 도입함. 최초 요청 시에만 전체 데이터를 가져와 가격 정보만 추출 및 가공하고, 그 결과를 unstable_cache를 통해 1시간 동안 서버 단에서 캐싱함. 이를 통해 별도의 API나 데이터베이스 없이도 백엔드의 제약을 극복하고 효율적인 데이터 제공이 가능해짐. - 또한, 데이터 시각화의 정확성을 높이기 위해 통계적 이상치(outlier)를 제거하는 로직을 추가하여 UX를 개선함.
불필요한 Fetching을 매우 크게 감소시켜 서버 부하를 줄임. 사용자는 거의 실시간에 가까운 빠른 속도로 가격 분포 데이터를 탐색할 수 있게 되어, 서비스의 핵심인 탐색 경험이 크게 향상됨.
이 캐싱 전략을 백엔드 요청이 불가능한 다른 데이터(지역 목록 등)에도 확장 적용한다면, 서비스의 성능과 안정성을 한 단계 더 높일 수 있음.
- 문제 정의: 기존 체험 탐색 UI는 지역, 가격, 카테고리 필터가 여러 페이지에 분산되어 있어, 사용자가 원하는 정보를 찾기 위해 불필요한 탐색을 반복해야 하는 UX 문제가 존재함.
- 해결 과정:
- 대안 분석: Airbnb, 여기어때 등 주요 서비스의 UX 패턴을 분석하여, 사용자가 어떤 페이지에 있든 일관된 탐색 경험을 제공하는 것이 중요하다고 결론 내림.
- 최종 선택: 모든 필터 기능을 단일 GNB/BNB 컴포넌트로 통합하는 구조를 직접 설계하고 구현함. 이를 통해 사용자의 핵심 정보 탐색 단계를 평균 3단계에서 1단계로 단축시킴.
- 결과: 사용자의 탐색 효율이 극대화되었고, 서비스의 핵심 가치인 '쉬운 탐색'을 성공적으로 구현함. 해당 컴포넌트의 높은 재사용성을 고려하여, 팀원들을 위해 직접 Wiki 가이드 문서를 작성 및 배포하여 팀 전체의 개발 생산성 향상에 기여함.
- 확장: 향후 백엔드 API가 지원된다면, 현재 일부 포함된 클라이언트 사이드 필터링을 모두 쿼리 파라미터로 전달, 서버 사이드에서 처리하도록 리팩토링하여, 데이터 규모가 커진 환경에서도 높은 성능을 유지할 수 있을 것으로 기대됨.
- 문제 정의: Figma 프로젝트와 개발자 코드가 분리되어 UI 일관성이 깨지고, SVG 아이콘 관리 비효율, 일관성 없는 애니메이션 등 개발자 경험과 사용자 경험 양쪽에서 문제가 발생함.
- 해결 과정:
- Z-Index 시스템 설계: 플로팅 UI 요소들의 계층 구조를 명확히 정의하고, 100단위의 간격을 둔 전역
z-index시스템을 도입하여 충돌 문제를 원천적으로 해결함. - SVG 컴포넌트 최적화: 그래픽 디자인 경험을 활용, 상태에 따라
path만 조건부로 렌더링하는 단일 SVG 컴포넌트를 설계하여 아이콘 에셋 요청 수를 감소시키고 렌더링 비용을 최소화함. - 인터랙션 시스템 설계: 모션그래픽 경험을 바탕으로,
cubic-bezier(0,.5,.5,1)와 같이 목적에 따라 각기 다른 속도 곡선을 사용하는 애니메이션 시스템을 설계하고 팀에 전파하여 일관되고 쾌적한 UX를 제공함. - Figma 최적화: 분리되어 있던 Figma 컴포넌트들을 재구성하고 컬러, 폰트 스타일을 변수로 등록하여, 개발자가 한눈에 디자인 시스템을 파악하고 적용할 수 있도록 워크플로우를 개선함.
- Z-Index 시스템 설계: 플로팅 UI 요소들의 계층 구조를 명확히 정의하고, 100단위의 간격을 둔 전역
- 결과: 디자인과 개발 간의 커뮤니케이션 비용 감소, UI 일관성 확보, 렌더링 성능 향상, 개발 속도 증대 등의 성과 달성
- 확장: Figma 변수를
Token Studio,Style Dictionary와 같은 툴을 통해 자동으로tailwind.config.js파일로 변환하는 파이프라인을 만들어 완전한 디자인 시스템을 구축할 수 있음.
- 문제 정의: 팀 프로젝트에서 코드 컨벤션 위반이나 사소한 오타 같은 휴먼 에러는 협업 효율을 저해하는 원인 중 하나임. 코드 리뷰 과정에서 이를 자동으로 피드백해주는 시스템이 필요하다고 판단함.
- 해결 과정:
- 최종 선택:
GitHub내의Gemini Code Assist코드 리뷰 기능을 실험적으로 도입함. 팀의 코드 컨벤션과 규칙을 프롬프트로 제공하고, Pull Request 발생 시 자동으로 코드 품질을 검사하도록 설정함.
- 최종 선택:
- 결과: AI가 1차적인 코드 리뷰어 역할을 수행하여, 팀원들은 핵심 로직 구현에 집중할 수 있었음.