Three.js 기반 샌드위치 개발: 배민에서 샌드위치 쌓으래요. 근데 3D로... #우아콘2025 #우아한형제들
우아콘 2025 우아한형제들 · YouTube
AI 핵심 요약
3D 개발 경험이 없던 프런트엔드 개발자들은 배민의 샌드위치 쌓기 리워드 프로그램에 Three.js 기반 3D 인터랙션을 구현하며, 모바일 웹 성능과 2D·3D UI 동기화 문제를 해결해야 했습니다. Scene·Camera·Renderer 등 기초를 익힌 뒤 오버레이·캔버스·배경 레이어를 분리하고, 단일 뷰 상태와 React Three Fiber의 HTML 컴포넌트로 화면 전환과 3D 좌표 기반 UI 배치를 구성했습니다. 카메라 줌과 초점, 오브젝트 이동·회전을 조합해 애니메이션을 만들고, 일괄 추가에는 간단한 페이드인을 적용하며 델타 타임과 프러스텀 컬링으로 기기별 속도 차이와 불필요한 렌더링을 다뤘습니다. 일부 기기에서 색이 녹색으로 변한 문제는 PCF 그림자 설정과 컬러 팩터의 조합에서 원인을 찾아 불필요한 설정을 제거해 해결했으며, 3D는 실제 기기에서 반복 검증하며 프로젝트에 맞는 설정을 찾아야 한다는 점을 공유했습니다.
- Three.js의 Scene, Camera, Renderer와 Mesh의 Geometry·Material 역할을 먼저 익히고, 디자인 요구에 맞춰 카메라와 조명 설정을 선택하세요.
- 2D UI와 3D 캔버스는 레이어를 분리하고, 공통 뷰 상태를 단일 출처로 삼으면 화면 전환 동기화와 작업 충돌을 줄일 수 있습니다.
- React Three Fiber의 HTML 컴포넌트를 활용하면 3D 월드 좌표를 화면 픽셀 좌표로 변환해 말풍선 같은 DOM 요소를 모델에 맞춰 배치할 수 있습니다.
- 애니메이션은 프레임 수가 아니라 델타 타임을 기준으로 진행량을 계산해야 기기별 프레임 차이에도 속도를 일정하게 유지할 수 있습니다.
- 기기별 렌더링 이상은 색상 표현 방식, 색 공간, 그림자 설정을 함께 점검하고 실제 서비스 환경에서 재현 테스트를 진행하세요.
소개
[세션 설명] 3D 개발 경험이 전무한 웹 프런트엔드 개발자가 갑작스럽게 Three.js를 활용한 샌드위치 스태킹 모션을 개발하게 된 경험담입니다. Scene과 Camera 기초부터 2D/3D 하이브리드 UI 구조 설계, 디바이스별 속도와 모델 최적화, 하이브리드 애니메이션 전략까지 실무에서 마주한 시행착오와 해결 과정을 생생하게 공유합니다. [발표자 소개] 신세희(프런트엔드 개발자), 전소이(프런트엔드 개발자)
이 자료가 담긴 로드맵
커뮤니티에서 더 보기비슷한 학습 자료
컨퍼런스 우아콘 2025
똑같아 보이는데 다르다고? 큐레이션 중복 개발 탈출기 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 네! 배민도 React Native 해요! 라이더의 안전한 배달을 위해 쉼없이 달려온 배민커넥트앱의 과거와 현재, 그리고 더 나은 앱을 위한 고민까지. 전사 유일의 React Native 프로덕트를 가꾸어 나가는 웹개발자들의 이야기를 들려드립니다.ㅤ ㅤ 👉 발표자 소개 라이더서비스팀 박지성 배민커넥트앱과, 이를 지탱하는 백오피스들의 프론트엔드 개발을 담당하고 있습니다. 지금처럼, 앞으로도 나보다 더 나은 사람들과 지금보다 더 나은 프로덕트를 만들어나가고 싶습니다. 👍 추천 대상 React Native 개발에 관심이 있거나, 이제 막 React Native 개발을 시작한 웹프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
모바일 앱 개발
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
웹프론트 개발자들을 위한 '우아한스펙트럼' 서비스 제작기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 배달의민족 웹프론트엔드 개발자들의 기술 공유 플랫폼 '우아한스펙트럼'을 소개합니다. 기획부터 서버, DB, 프론트 모두 프론트엔드 개발자 6명이서 만든, 눈물 없이 들을 수 없는 스토리ㅤ 👉 발표자 소개 셀러웹프론트개발팀 송지은 사회생활 3개월 차 리더가 된 프론트엔드 개발자 사실 본업은 사장님을 위해서라면 어디든 달려가는 배민셀프서비스 개발자 👍 추천 대상 - 우아한형제들 웹프론트개발자들의 기술 공유 방식이 궁금한 개발자 - 사내 사이드 프로젝트를 잘 운영하고 싶은 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 백엔드 풀스택
컨퍼런스 우아콘 2022
리액트 네이티브 리팩토링 #우아콘2022 #Day3_함께하고성장하는우리
컨퍼런스 우아콘 2022
수년간 여러 엔지니어들의 손을 거치면서, 배민 사장님용 앱의 소스코드는 일반적인 개발 트렌드에 비해 파편화되고 뒤쳐져 있었습니다. 이제는 소스코드를 업데이트하고 정리해서 최신 라이브러리 버전의 새로운 기능들을 사용해볼 때라고 생각하게 되었는데요, 장단점을 비교해본 끝에 리팩토링 프로젝트를 시작하게 되었습니다. 그 경험을 여러분께 공유드립니다. [발표자 소개] 안 윈(Huan Huynh, Jake) | Woowa Vietnam 후안 윈(제이크)는 2022년 우아한형제들에 입사하기 전까지 약 10년 가량 주로 안드로이드와 플러터를 다루는 모바일 소프트웨어 엔지니어이자 모바일 팀 리더로 경력을 쌓아왔습니다. 제이크는 모바일 클라이언트 엔지니어링 팀에서 리액트 네이티브(React Native) 엔지니어로 근무하고 있으며 입점 업주들에게 유용한 기능을 제공하는 동시에 입점 업주용 앱을 사용하는 사람들에게 최고의 유저 경험을 제공할 수 있도록 노력하고 있습니다. 트루옹 트란(Truong ...
모바일 앱 개발