tag

#storybook

Essay2026-05-15· 20 min

Storybook 위에 Visual Builder를 박았습니다 — 디자이너가 직접 합성하는 도구를 만든 이야기

Plasmic 같은 SaaS 대신 사내에서 직접 만든 page builder. Storybook 안에 박고, 결과는 JSON으로만, S3 + 정적 런타임으로 서버 0개. 만든 과정과 앞으로의 활용 기대.

#storybook #visual-builder #tooling #s3

Essay2026-05-15· 9 min

RN-Web Storybook 운영 함정 6가지 — SVG color, flex-wrap, device frame width

검증 단계에서 마주친 6가지 함정과 우회법. production 베끼기의 위험, SVG color prop 무시, flex-wrap trailing gap, device frame width mismatch 등.

#storybook #react-native #pitfalls

Essay2026-05-15· 9 min

Figma to Storybook 자동 변환 파이프라인 — SECTION 분할과 시각 회귀 루프

Figma URL에서 .stories.tsx까지 — REST API, 휴리스틱 매핑, SECTION을 케이스 스토리로 쪼개기, 시각 회귀 보정 루프 전체.

#storybook #figma #automation

Essay2026-05-15· 8 min

Storybook 페이지 스토리를 일괄 삭제한 이유 — mock의 함정

99% 완성된 페이지 스토리 106개를 한 번에 지운 결정. mock이 production과 어긋나는 순간 검수 가치가 0이 된다는 한 줄에서 시작된 회고.

#storybook #decisions #retrospective

Essay2026-05-15· 9 min

Storybook 스토리 작성 표준 — argTypes, play 함수, fn vs action

검증 단계에서 200개에 가까운 스토리를 짜며 손에 굳은 한 줄 규칙들. 표준 골격, fn() vs action() 선택 기준, Portal modal 대응, styled-components 금지까지.

#storybook #testing #conventions

Essay2026-05-15· 8 min

React Native Web Storybook으로 잡는 회귀와 못 잡는 회귀

RN 프로젝트에 Storybook을 도입할지 결정할 때 가장 중요한 표 한 장. 잡히는 회귀 7종과 못 잡는 회귀 9종을 솔직하게 정리합니다.

#storybook #react-native #testing

Essay2026-05-15· 12 min

Storybook 도입 1년 회고 — 안전망의 모양

RN 프로젝트에 Storybook을 도입하고 1년. 채워진 칸, 비어있는 칸, 그리고 다시 시작한다면 다르게 할 결정들.

#storybook #retrospective #react-native

Essay2026-05-15· 14 min

Storybook을 디바이스 안으로 — DebugView에 심은 on-device 카탈로그

RN-Web Storybook만으로는 닿지 못한 칸이 있었어요. @storybook/react-native를 DebugView 안에 토글로 끼우고, gesture · IME · Reanimated worklet 같은 회귀를 디바이스 QA 전에 한 번 더 거르는 그물을 추가한 이야기.

#storybook #react-native #on-device #debugview

Essay2026-05-15· 14 min