디자인 고민없이 쉽고 일관성있게 만드는 백오피스 디자인시스템 #우아콘2022 #Day2_음식그이상의것을문앞으로
우아콘 2022 우아한형제들 · YouTube
AI 핵심 요약
우아한형제들은 백오피스마다 UI와 기술 스택이 달라 관리자에게는 일관성 없는 사용 경험을, 개발자에게는 중복 구현과 유지보수 부담을 안겼다. 이를 줄이기 위해 백오피스 디자인 시스템 ‘백샷’을 만들고, 버튼 같은 기본 요소만 제공하는 대신 검색·정렬·페이징 로직을 포함한 온디맨드 컴포넌트를 제공했다. 디자인 파운데이션, 코어 컴포넌트, 온디맨드 컴포넌트의 3개 레이어로 구성하고 npm 패키지와 문서, 보일러플레이트를 통해 사내 프로젝트에서 활용하기 시작했다. 다만 시스템 구축에는 지속적인 개발 리소스가 필요하고 모든 기능을 공통화하기도 어려워, 실제 프로젝트의 요구를 바탕으로 자유도와 재사용 범위를 계속 조정해야 한다는 점을 배웠다.
- 백오피스처럼 기능과 화면 패턴이 반복되는 영역에서는 원자 컴포넌트만 제공하기보다 검색·정렬·페이징을 묶은 완결형 컴포넌트가 개발 부담을 줄일 수 있다.
- 컴포넌트의 자유도를 낮추면 세부 동작을 커스텀하기 어려워지므로, 실제 사용 사례에서 필요한 유연성과 기본 제공 기능의 범위를 조정해야 한다.
- 디자인 시스템은 구축 자체가 프론트엔드 리소스를 절약해 주지 않으며, 여러 프로젝트의 적용과 유지보수를 지속할 여력이 있는지 먼저 따져야 한다.
- 프로젝트에서 검증된 컴포넌트를 시스템에 반영하는 방식은 실사용 요구를 담는 데 유용하지만, 특수한 기능까지 모두 시스템에 넣으려 하면 효율이 떨어질 수 있다.
소개
프론트엔드 개발자와 디자이너의 도움 없이도! 배민다운 백오피스 사용 경험을 만들 수 있는, 우아한형제들의 백오피스 디자인시스템을 소개합니다. 프론트엔드 개발 공수를 많이 들이지 않으면서도 일관된 UX/UI를 제공하기 위해 고민하고 만들어낸 것들을 소개하고 일련의 과정에서 느낀 점들을 공유합니다. [발표자 소개] 신성환 | 웹프론트개발그룹 물리학을 전공했지만 무언가를 만드는 즐거움에 빠져 개발자의 길을 걷고 있습니다. 개발로 무언가를 만드는 일이 잘 맞아서 항상 즐거운 마음으로 출근하고 있습니다. 프런트엔드 개발자이지만, 요즘 슬금슬금 백엔드에도 관심이 가기 시작했습니다.
비슷한 학습 자료
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 디자인시스템은 크리에이티브를 방해하지 않는다!!! 배달의민족과 같이 크리에이티브한 브랜딩의 서비스는 디자인시스템을 어떻게 활용하고 있을까? 음식 배달을 넘어 커머스까지! 보다 넓은 서비스 경험을 아우르는 우아한형제들의 디자인시스템 발전사, 그리고 일하는 방식을 소개합니다. ㅤ ㅤ 👉 발표자 소개 공통코어프로덕트디자인팀 이종석 공통코어프로덕트디자인팀 13명의 팀원을 섬기는 '챙김이'입니다! 디자인 시스템을 포함해서 우아한형제들이 만들어가는 다양한 서비스의 공통의 경험을 챙기고 있고요. 위대한 것을 만들고 싶은 꿈이 있어요~ 공통코어프로덕트디자인팀 김선하 더 나은 프로덕트 사용 경험을 위해 디자인 시스템이 어떻게 도움이 될 수 있을지 늘 고민하는 디자이너입니다. 👍 추천 대상 대규모 조직에서 디자인시스템을 만들고 운영하는 이야기가 궁금한 누구나 우아한형제들의 디자인시스템을 알아보고 싶은 누구나 디자인시스템은 크리...
UI/UX
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 디자인 시스템을 만들어 오며 겪었던 실제 사례들로부터. "엔지니어가 코딩하기 좋은 디자인"을 고민하고, "디자이너가 디자인하기 좋은 코드"를 고민했던 그 과정들을 공유해 보려 합니다! 좋은 제품을 만들기 위해! 디자인과 엔지니어링의 과정에서 가장 어려운 부분 중 하나는 소통과 협업이 아닐까요? 상대방의 언어와 사고를 이해하려 노력하고, 서로 부족한 부분을 먼저 채워주려 하는 우아한형제들의 업무 문화를 소개하고 싶어요. 👉 발표자 소개 공통코어프로덕트디자인팀 허준 디자인 시스템을 사용하는 엔지니어 디자이너 모두 행복했으면 좋겠다는 바람으로 일합니다! 배민커머스웹프론트개발팀 금교영 개발자 디자이너 모두에게 효율적인 디자인시스템을 만들기 위해서 노력하고 있어요! 👍 추천 대상 - 디자인 시스템을 만들고 운영하는 디자이너와 엔지니어 - 디자이너와 엔지니어 간의 소통이 어려운 분 - 디자이너와 엔지니어가 적극적으로 소...
UI/UX 애자일 · 협업
컨퍼런스 우아콘 2023
웹프론트 개발자들을 위한 '우아한스펙트럼' 서비스 제작기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 배달의민족 웹프론트엔드 개발자들의 기술 공유 플랫폼 '우아한스펙트럼'을 소개합니다. 기획부터 서버, DB, 프론트 모두 프론트엔드 개발자 6명이서 만든, 눈물 없이 들을 수 없는 스토리ㅤ 👉 발표자 소개 셀러웹프론트개발팀 송지은 사회생활 3개월 차 리더가 된 프론트엔드 개발자 사실 본업은 사장님을 위해서라면 어디든 달려가는 배민셀프서비스 개발자 👍 추천 대상 - 우아한형제들 웹프론트개발자들의 기술 공유 방식이 궁금한 개발자 - 사내 사이드 프로젝트를 잘 운영하고 싶은 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 백엔드 풀스택
컨퍼런스 우아콘 2022
우아한형제들의 전사 디자인 시스템, 배시시 #우아콘2022 #Day2_음식그이상의것을문앞으로
컨퍼런스 우아콘 2021