디자인 시스템의 명과 암 | 인프콘 2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
원티드랩은 제품과 작업자가 늘면서 버튼과 스타일이 제각각 구현되고 공통 UI 제작에도 시간이 오래 걸리는 문제를 해결하기 위해 디자인 시스템을 도입했다. Figma 라이브러리를 활용해 AI 면접 코칭을 빠르게 제품화했고, 개발 측에서는 React 컴포넌트에 CSS-in-JS 기반 스타일 확장과 반응형 props를 적용하고 Radix UI를 도입해 재사용성과 접근성을 높였다. 그러나 시스템을 만드는 것만으로는 부족했고, 커스터마이징 범위와 최신 버전 이해, 조직 내 우선순위 문제를 해결하려면 디자이너·개발자와의 지속적인 소통과 피드백이 필요했다. 디자인 시스템은 조직의 제품 맥락에 맞게 작게 시작해 꾸준히 개선해야 하며, 효율성과 품질을 함께 고려해야 한다는 점을 강조했다.
- 디자인 시스템은 완성품이 아니라 제품과 사용자 경험의 변화에 맞춰 계속 업데이트해야 한다.
- 예외적인 커스터마이징을 모두 막기보다 허용 범위를 정하고, 반복되는 요구는 피드백 루프를 통해 시스템에 반영한다.
- 처음부터 큰 시스템을 만들기보다 자주 쓰는 색상·타이포그래피·아이콘부터 단일 진실 공급원으로 정리한다.
- React 컴포넌트의 반응형 처리는 CSS 미디어 쿼리 기반으로 구현하면 SSR에서의 레이아웃 시프트를 피할 수 있다.
- Storybook 문서와 코드 플레이그라운드, Figma Code Connect 등을 활용해 사용법을 익히고 디자인·개발 간 싱크를 맞춘다.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 디자인 시스템의 명과 암 - 김성광, 길형진, 이상효, 차승호, 김지홍(모더레이터) | 원티드랩 패널토크 디자인 시스템, 다들 한다고 하는데 과연 정말 필요한 걸까요? 필요하다면 우리 조직에서는 어떤 형태의 고민이 필요할까요? 원티드 디자이너와 개발자들이 디자인 시스템을 실무 환경에 도입하며 느낀 명과 암에 대해 이야기합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
비슷한 학습 자료
컨퍼런스 우아콘 2024
디자인 가이드를 넘어 비로소 시스템으로, 우아한공방 코어시스템 #우아콘2024 #우아한형제들
컨퍼런스 우아콘 2024
[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 방대한 컴포넌트 라이브러리와 빼곡한 원칙들이 존재함에도 불구하고, 우리는 왜 끊임없이 새로운 시스템을 만들어야 할까요? 디자인 시스템을 단순 스타일 가이드를 넘어 진정한 '시스템'으로 작동하게 하려면 어떻게 해야 할까요? 1년 6개월간 “우아한형제들”의 디자인 시스템 여정을 통해 얻은 인사이트를 공유하며, Base Component와 Foundation API를 통해 코드를 효과적으로 연결하고, 이를 통해 디자이너와 엔지니어의 비효율적인 프로세스를 최소화하고, 보다 중요한 고민에 집중할 수 있는 방법들을 소개합니다. ㅤ 👉 발표자 소개ㅤ 허준, UX엔지니어
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 디자인 시스템을 만들어 오며 겪었던 실제 사례들로부터. "엔지니어가 코딩하기 좋은 디자인"을 고민하고, "디자이너가 디자인하기 좋은 코드"를 고민했던 그 과정들을 공유해 보려 합니다! 좋은 제품을 만들기 위해! 디자인과 엔지니어링의 과정에서 가장 어려운 부분 중 하나는 소통과 협업이 아닐까요? 상대방의 언어와 사고를 이해하려 노력하고, 서로 부족한 부분을 먼저 채워주려 하는 우아한형제들의 업무 문화를 소개하고 싶어요. 👉 발표자 소개 공통코어프로덕트디자인팀 허준 디자인 시스템을 사용하는 엔지니어 디자이너 모두 행복했으면 좋겠다는 바람으로 일합니다! 배민커머스웹프론트개발팀 금교영 개발자 디자이너 모두에게 효율적인 디자인시스템을 만들기 위해서 노력하고 있어요! 👍 추천 대상 - 디자인 시스템을 만들고 운영하는 디자이너와 엔지니어 - 디자이너와 엔지니어 간의 소통이 어려운 분 - 디자이너와 엔지니어가 적극적으로 소...
UI/UX 애자일 · 협업
컨퍼런스 INFCON 2024
작은 조직을 위한 효과적인 디자인 시스템 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 작은 조직을 위한 효과적인 디자인 시스템 - 김문주, 이병기 모든 디자인 조직이 디자인 시스템 관리 인력을 갖출 수는 없습니다. 디자인 시스템은 선택이 아닌 필수인 요즘, 작은 조직이 디자인 시스템을 밀도 높게 만들고 관리할 수 있는 효과적인 방법을 사례를 통해 귀뜸해보려해요. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
UI/UX
컨퍼런스 INFCON 2024
AI 시대 디자이너의 실험: 사용자 행동 분석에 AI를 활용해 보기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 AI 시대 디자이너의 실험: 사용자 행동 분석에 AI를 활용해 보기 - 박주형, 이동연 AI를 통해 사용성 테스트를 진행하고 유의미한 인사이트를 찾아내기 위한 실험을 진행해 보았습니다. 프로토타입에서 다양한 시나리오 검토를 통해 인사이트를 얻을 수 있었고 이를 통해 AI가 우리가 디자인하는 방식을 어떻게 변화시킬 수 있을지 살펴보았습니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
UI/UX 프로덕트 지표 · 실험
컨퍼런스 INFCON 2024
지속 성장 가능한 설계를 만들어가는 방법 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 지속 성장 가능한 설계를 만들어가는 방법 - 김재민 소프트웨어를 개발할 때 항상 언급되는 '설계'. 여러분은 설계란 단어를 보면 어떤 것이 떠오르시나요? 이 발표에서는 설계란 무엇이고, 어떻게 접근할지에 대해 생각할 거리를 던집니다. 그리고 몇 가지 관점과 예제로 살펴봅니다. 결론적으로 우리가 개발할 때 정말로 집중해야 할 것이 무엇인지에 대해 이야기해 보려 합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
개발 · 프로그래밍 기타
컨퍼런스 INFCON 2024
개발자 손 꼭 붙잡고 기획하기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 개발자 손 꼭 붙잡고 기획하기 - 송은택 개발자들의 의견을 더 많이 듣고 싶지만 어떻게 그들의 의견을 끌어내야할 지 모르겠는 PM, 디자이너 그리고 비즈니스와 제품 기획에 더 많이 관여하고 싶은 개발자들을 위해 준비한 내용입니다. 최근에 인프랩 ucc셀에서는 프로젝트 초기 기획 과정에서부터 엔지니어들도 함께 참여했습니다. 진행하는 프로젝트의 전체적인 맥락을 초기부터 공감하고, 디테일한 정책 설계까지 함께했는데요. 높은 몰입도를 보여주었습니다. 프로젝트를 진행할수록 엔지니어들은 초기 기획보다 더 참신한 방안을 계속해서 제시하고, 실행했습니다. 프로젝트를 진행하며 어느 순간 각자의 생각이 모두 일치하는 경험을 했습니다. 불필요한 커뮤니케이션은 자연스럽게 감소했고요. 어떤 ...
프로덕트 매니지먼트 애자일 · 협업