스토리북의 한계를 넘어선 실시간 코드 편집기, "우아한플레이그라운드"

이번 우아콘에서 가장 흥미롭게 본 영상은 바로 '우아한플레이그라운드'에 관한 내용입니다. 기존 스토리북 기반 디자인 시스템에서는 다양한 사례와 코드가 제공되었지만, 몇 가지 제한사항이 있었는데요. 예를 들어, JSX 원본 객체를 확인하기 어렵거나 함수 바디가 제대로 표시되지 않는 코드의 완전한 모습을 파악하기 어려웠습니다. 이러한 문제를 극복하기 위해 ‘우아한플레이그라운드’가 탄생했는데요. 우아한플레이그라운드는 컴포넌트를 수정하고, 결과를 즉시 확인할 수 있는 실시간 코드 편집기 입니다. 코드 에디터와 프리뷰를 제공하여 개발자가 더욱 직관적으로 컴포넌트를 다룰 수 있도록 설계되었습니다. 우아한플레이그라운드 주요 기능 1. 실시간 코드 편집기: * 브라우저 기반 실시간 코드 편집기를 통해 컴포넌트를 즉각적으로 수정하고 결과를 확인할 수 있습니다. * iframe과 srcDoc을 활용하여 샌드박스 환경을 제공합니다. 2. 타입 힌트 및 코드 자동완성: * TypeScript 기반 인텔리센스 기능을 통해 효율적으로 코딩을할 수 있도록 돕습니다. * esbuild-wasm 기반으로 TypeScript를 JavaScript로 변환하여 브라우저 환경에서도 원활히 동작하도록 설계되었습니다. 3. 코드 스니펫 공유 기능: * URL을 생성해 Slack과 같은 협업 도구와 통합되어 팀원과 컴포넌트 코드를 손쉽게 공유할 수 있습니다. * lz-string 압축과 base64인코딩을 활용하여 파라미터로 코드를 공유합니다. 우아한플레이그라운드는 기존 개발 과정에서 느끼는 불편함을 해결하려 했다는 점이 인상깊었습니다. 개발자들의 실질적인 니즈를 충족시키는 동시에, 디자인 시스템의 활용도를 한 단계 끌어올렸다는 느낌도 들었습니다. 아직 영상을 시청하지 않으셨다면 한 번쯤 시청해보시는 것을 추천드립니다.