디자인 시스템 문서를 생동감 있게 만들기 위한 '우아한플레이그라운드' 제작기 #우아콘2024 #우아한형제들
우아콘 2024 우아한형제들 · YouTube
AI 핵심 요약
공통 컴포넌트는 비즈니스 맥락과 복잡한 구조 때문에 문서와 Storybook 예제만으로 사용법을 익히기 어려웠고, 개발자들은 코드베이스를 뒤지거나 별도 프로젝트에서 실험해야 했다. 이를 해결하기 위해 Monaco Editor와 iframe 기반 프리뷰를 갖춘 우아한플레이그라운드를 만들고, esm.sh와 import map으로 npm 패키지를 불러오며 esbuild로 TypeScript·JSX를 변환하도록 구성했다. 브라우저에서 타입 정보를 제공하기 위해 TypeScript 언어 서비스가 메모리 파일 시스템을 읽도록 확장했고, 코드 공유를 위해 압축한 코드를 URL에 담았다. 그 결과 문서에서 예제 코드를 바로 편집하고 렌더링할 수 있게 되었으며, 어드민 공통 컴포넌트 20개에 50개 이상의 예제와 플레이그라운드를 제공했다.
- 브라우저에서 npm 패키지를 불러올 때는 esm.sh와 import map을 조합해 모듈 이름을 CDN 주소에 연결할 수 있다.
- Monaco Editor와 iframe을 분리하면 편집 경험을 유지하면서 실행 결과의 CSS·JavaScript 영향을 격리할 수 있다.
- esbuild의 플러그인 콜백을 활용하면 브라우저 메모리에 둔 파일을 번들링 과정에서 읽게 할 수 있다.
- TypeScript 인텔리센스는 타입 정의 파일을 메모리에 구성하고, 참조된 타입 파일까지 재귀적으로 확보해 제공할 수 있다.
- 공유 URL에 코드를 담을 때는 압축과 Base64 인코딩을 적용하고, 불러올 때 역순으로 복원한다.
소개
[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 잘 만들어진 디자인 시스템의 컴포넌트를 어떻게 하면 더 효과적으로 활용할 수 있을까요? 단순하고 정적인 문서에서 확장하여, 웹 기반 실시간 코드 편집기와 타입 힌트를 제공함으로써 개발자가 컴포넌트를 더 쉽게 사용할 수 있도록 지원합니다. 또한, 코드 스니펫 공유 기능을 통해 생산성을 높이는 과정에서 마주한 기술적 도전과 해결 과정을 상세히 다룹니다. ㅤ 👉 발표자 소개ㅤ 추용혁, 웹프런트엔드 개발자
비슷한 학습 자료
컨퍼런스 우아콘 2024
통합테스트로 보다 안전한 웹프런트엔드 서비스 제공하기 #우아콘2024 #우아한형제들
컨퍼런스 우아콘 2024
디자인 가이드를 넘어 비로소 시스템으로, 우아한공방 코어시스템 #우아콘2024 #우아한형제들
컨퍼런스 우아콘 2024
[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 방대한 컴포넌트 라이브러리와 빼곡한 원칙들이 존재함에도 불구하고, 우리는 왜 끊임없이 새로운 시스템을 만들어야 할까요? 디자인 시스템을 단순 스타일 가이드를 넘어 진정한 '시스템'으로 작동하게 하려면 어떻게 해야 할까요? 1년 6개월간 “우아한형제들”의 디자인 시스템 여정을 통해 얻은 인사이트를 공유하며, Base Component와 Foundation API를 통해 코드를 효과적으로 연결하고, 이를 통해 디자이너와 엔지니어의 비효율적인 프로세스를 최소화하고, 보다 중요한 고민에 집중할 수 있는 방법들을 소개합니다. ㅤ 👉 발표자 소개ㅤ 허준, UX엔지니어
프론트엔드 UI/UX
컨퍼런스 우아콘 2024
운영 안정성을 기술적으로 지키는 방법(이그나이트) #우아콘2024 #우아한형제들
컨퍼런스 우아콘 2024
[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 이그나이트는 하나의 주제로 3~5명의 발표자가 5분간 빠르게 발표를 진행하는 방식의 세션입니다. 참여형으로 진행된 이그나이트 세션에서는, 우아한형제들 소속 발표자와 타소속 발표자가 함께 참여하였습니다. '운영 안정성을 기술적으로 지키는 방법' 세션에서는 QA, 배포 파이프라인 구성 등 기술을 활용해 어떻게 '운영 안정성'을 지키고 있는지 경험담을 공유합니다. 👉 발표 목록 1. 어쩌면 당연한 것들 - 김태정 님 2. 개선된 통합테스트 환경 만들기 - 김지훈 님 3. 파이프라인의 효율화: 운영 안정성을 위한 작은 스텝 - 정영진 님 4. 닥치면 다 해야하는 스타트업 개발자를 위한 인프라 QuickStart - 이재영 님
소프트웨어 테스트 데브옵스 · 인프라
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 디자인 시스템을 만들어 오며 겪었던 실제 사례들로부터. "엔지니어가 코딩하기 좋은 디자인"을 고민하고, "디자이너가 디자인하기 좋은 코드"를 고민했던 그 과정들을 공유해 보려 합니다! 좋은 제품을 만들기 위해! 디자인과 엔지니어링의 과정에서 가장 어려운 부분 중 하나는 소통과 협업이 아닐까요? 상대방의 언어와 사고를 이해하려 노력하고, 서로 부족한 부분을 먼저 채워주려 하는 우아한형제들의 업무 문화를 소개하고 싶어요. 👉 발표자 소개 공통코어프로덕트디자인팀 허준 디자인 시스템을 사용하는 엔지니어 디자이너 모두 행복했으면 좋겠다는 바람으로 일합니다! 배민커머스웹프론트개발팀 금교영 개발자 디자이너 모두에게 효율적인 디자인시스템을 만들기 위해서 노력하고 있어요! 👍 추천 대상 - 디자인 시스템을 만들고 운영하는 디자이너와 엔지니어 - 디자이너와 엔지니어 간의 소통이 어려운 분 - 디자이너와 엔지니어가 적극적으로 소...
UI/UX 애자일 · 협업
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어