— The Library

All writing

19 entries

Visual Builder OSS(Open Source Software) 분리기 · 3

AWS SDK가 SSO 토큰 캐시를 끌고 들어왔다 — publish 직전에 발이 두 번 걸린 이야기

2편 끝에서 살짝 언급했던 함정 이야기로 시작할게요. publish 직전에 발을 걸리게 한 바로 그 함정이요. OSS의 createS3Storage가 기존 프로젝트 webpack 위에서 처음으로 돌아간 날이었어요. 빌드는 멀쩡히 통과했어요. 그런데 storybook을 열어보니 콘솔에 이런 게 뜨더라고요. fs.promises.writeFile. 처음엔 황당했어요. 우리는 그런 코드를 짠 적이

#oss#visual-builder#aws-sdk

2026-05-2020 MIN

Visual Builder OSS(Open Source Software) 분리기 · 2

OSS 본체부터 만들 뻔했다가, 기존 프로젝트 안에서 먼저 갈아엎고 옮긴 건에 대하여..

1편에서 어댑터 세 개를 그렸다면, 2편은 그걸 들고 실제로 옮긴 이야기예요. 기존 프로젝트에서 25개 commit, OSS repo에서 20개 commit이 나왔어요. 숫자만 보면 평범한 리팩토링 같은데, 사실 이 분리 작업에서 가장 중요했던 결정은 순서였어요. 한 줄로 적자면 — OSS 본체 코드를 만들기 전에, 기존 프로젝트 안에서 먼저 어댑터 모양으로 갈아엎었다. 처음엔 그럴 생각이

#oss#visual-builder#refactoring

2026-05-2017 MIN

Visual Builder OSS(Open Source Software) 분리기 · 1

스토리북에 박혀있던 Visual Builder를 npm으로 분리하기로 한 날

사내 storybook에서 굴러가던 Visual Builder를 npm으로 분리하기로 했어요. 결과만 먼저 말하면 @bdmakers/visual-builder@0.1.1이라는 회사 OSS로 떨어졌고, 기존 프로젝트에 남은 빌더 관련 코드는 300줄 남짓이 됐어요. 분리하기 전에 기존 프로젝트에 박혀 있던 양이 8,400 줄이었으니까, 8,100 줄 정도가 라이브러리 쪽으로 넘어간 셈이죠. 그

#oss#visual-builder#library-extraction

2026-05-2016 MIN

EAS Update Playbook · 4

파이프라인은 끝의 일 — GitLab CI · preflight · 비밀 마스킹 · Dooray로 묶다

여러분, 4편의 제목을 한 줄로 다시 적어볼게요. "파이프라인은 끝의 일." CI/CD 글을 쓸 때 자주 빠지는 함정이 있어요. 파이프라인을 시작에 두는 것 — 마치 파이프라인 설계가 운영 디자인의 출발점인 것처럼 쓰는 거죠. 저희 팀에서는 반대로 봅니다. 코드(13편)가 이미 정직한 동작을 보장하고, 그 다음에야 파이프라인이 그 위에 얇은 한 겹을 덮어요. 그 한 겹의 일은 단순합니다 —

#expo#eas-update#gitlab-ci

2026-05-1813 MIN

EAS Update Playbook · 3

rebuild 없는 정직한 승격 — staging의 바로 그 번들을 production으로

여러분, CodePush 시절 가장 조용히 불편했던 일이 있었어요. staging에서 한 번 빌드하고, production에서 또 한 번 빌드하는 일. 두 빌드의 입력(소스 코드)은 같지만, 출력(binary)이 정말 같다고 100% 단언하기는 어려웠어요. 빌드 환경의 시점 차이, 의존성 lock의 미세한 변화, 캐시 적중 여부 — 작은 변수가 산처럼 쌓이는 게 빌드라서요. QA가 stagi

#expo#eas-update#ota

2026-05-1812 MIN

EAS Update Playbook · 2

한 단어로 클라이언트 분기를 가르는 4모드 — 메시지가 데이터가 되는 디자인

여러분, 1편에서 잠깐 흘리고 지나간 이야기를 다시 꺼낼게요. CodePush 시절 우리는 강제 업데이트를 --mandatory 한 줄로 처리했어요. EAS Update에는 그런 1급 옵션이 없습니다. 그래서 우리는 모드라는 개념을 따로 만들기로 했습니다. 이번 편은 그 모드 시스템에 대한 이야기예요. 어떻게 사람이 적는 한 줄이, 시스템을 통과해 클라이언트의 분기까지 도달하는가에 대한 디자

#expo#eas-update#ota

2026-05-188 MIN

EAS Update Playbook · 1

OTA 공백기를 끝낸 이주 — CodePush 흔적 위에 다시 그린 EAS Update

여러분, 솔직히 말하면 이번 도입 결정은 조금 부끄러운 사연으로 시작해요. 저희 레포에는 codepush.release.js라는 파일이 한참 동안 그냥 남아 있었어요. AppCenter 시절에 OTA를 굴리던 스크립트인데, Microsoft가 AppCenter를 retire한 뒤 — 그러니까 한 줄로 말하면 서비스가 종료되고 나서 — 저희는 한동안 그 빈 자리를 메우지 못한 채로 앱을 운영했

#expo#eas-update#codepush

2026-05-1817 MIN

QA가 staging 빌드에서 OTA를 골라 받는 트릭 — Updates URL을 런타임에 갈아 끼우기

여러분, 이 글은 EAS Update Playbook 시리즈와 나란히 있지만 들어가지 못한 한 토픽이에요. 시리즈 본편이 프로덕션 운영에 대한 글이었다면, 이 글은 그 옆에 있는 QA의 일상에 대한 글이거든요. OTA를 운영하면서 가장 자주 받은 요청은 이거였어요. "이 OTA가 staging에서 잘 도는지 검증하고 싶은데, 매번 staging 빌드를 다시 받아야 하나요?" 자연스러운 답은

#expo#eas-update#qa

2026-05-1810 MIN

본격 Storybook 도입 · 7

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

여러분, 한번 상상해보세요. 디자이너가 Figma에서 그린 화면을 코드로 옮기는데, 토큰이 어긋나고, 컴포넌트 prop은 누락되고, 분명히 디자인 시스템 안에서만 합성하라고 했는데 어디선가 자유 layout이 새어 들어옵니다. 이 어긋남이 매번 PR 리뷰의 절반을 잡아먹는다면 — 그리고 그걸 풀려고 Plasmic 같은 SaaS를 알아봤더니 RN을 안 받는다면 — 어떻게 하시겠어요? 저는 만들

#storybook#visual-builder#tooling

2026-05-1520 MIN

본격 Storybook 도입 · 5

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

어느 화면을 변환하는데, production 코드에 거의 똑같은 화면이 있더라고요. 운이 좋다고 생각했죠. 한참을 베껴서 빠르게 스토리를 짰고, 결과물을 본 심정은 당혹스러웠습니다. "이건 figma 디자인과 다른데....?" 그날 알게 된 게 두 가지였어요. 첫째, figma URL을 받았다는 건 그 디자인이 source of truth라는 뜻. 둘째, 비슷한 production은 가장 그

#storybook#react-native#pitfalls

2026-05-159 MIN

본격 Storybook 도입 · 4

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

디자이너가 Figma URL을 던져주면 컴포넌트 스토리가 자동으로 생기는 — 그런 꿈을 한 번쯤 꾸지 않은 프론트는 없을 거예요. 저도 처음엔 REST API로 노드 트리만 잘 파싱하면 끝날 줄 알았습니다. 그런데 첫 자동 생성 결과를 본 순간, 197줄짜리 깨진 JSX와 마주했죠. 그날부터 알게 됐어요. 자동 변환은 출발선일 뿐이고, 본작업은 따로 있다는 걸. 이 글은 SECTION을 케이

#storybook#figma#automation

2026-05-159 MIN

본격 Storybook 도입 · 3

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

어느 날 오후, 저는 페이지 스토리 106개를 한 번에 지웠습니다. 99% 커버율까지 갔던 작업이었어요. 메인 화면, 상세 페이지, 설정, 알림센터까지 — RN 앱의 거의 모든 화면을 1:1로 매칭해서 Storybook에 띄우는 작업이었습니다. mock store, navigation decorator, fixtures까지 다 짜놓고 검토 합격만 기다리던 상태였어요. 그런데 어느 순간부터 이

#storybook#decisions#retrospective

2026-05-158 MIN

본격 Storybook 도입 · 2

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

첫 스토리는 누구나 그럴듯해 보이게 짭니다. 문제는 50번째쯤 됐을 때 시작돼요. argTypes를 빼먹은 스토리가 콘트롤 패널을 비워두고, 어떤 건 action()을 쓰고 어떤 건 fn()을 써서 인터랙션 테스트가 들쭉날쭉해지죠. 보던 스토리에 누군가 play 함수를 새로 추가했는데, 그게 또 showcase grid 위에 달려서 같은 회귀를 N번 잡고 있고요. 저는 그걸 한참 겪은 다음에

#storybook#testing#conventions

2026-05-159 MIN

본격 Storybook 도입 · 1

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

여러분, 처음 RN 프로젝트에 Storybook을 셋업하면서 동료한테 이런 질문을 받았어요. "그거 어차피 HTML로 렌더하는 거잖아요. 앱이랑 무슨 상관이에요?" 솔직히 그 자리에서 한 줄로 반박할 자신이 없었어요. 그래서 노트북을 덮고, 몇 주에 걸쳐 우리 팀이 매일 마주치는 회귀들을 표 한 장에 정리해봤습니다. 잡히는 것과 안 잡히는 것을 솔직하게요. 결과는 "반은 맞고 반은 다르다"였

#storybook#react-native#testing

2026-05-158 MIN

본격 Storybook 도입 · 7

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

긴 시리즈도 이제 마지막 편입니다. 여기까지 오신 분들 정말 감사해요. 1년 전 처음 RN 프로젝트에 Storybook을 셋업하던 그 오후를 기억해요. 그때 동료가 던졌던 질문 — "그거 어차피 HTML로 렌더하는 거잖아요?" — 에 한 줄로 답하지 못했던 그 자리에서 시작된 시간이었어요. 지금은 그 한 줄을 가지고 있습니다. 이 마지막 글에서는 1년 운영하고 손에 남은 안전망의 전체 모양을

#storybook#retrospective#react-native

2026-05-1512 MIN

본격 Storybook 도입 · 8

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

여러분, 이 시리즈를 1편부터 따라오신 분들은 기억하실 거예요. RN-Web Storybook이 못 잡는 회귀 9가지를 표로 정리해두고, "이 영역은 디바이스 QA의 몫" 이라고 분명히 선을 그어뒀던 그 표 말이에요. 저는 그 선이 정답이라고 믿었고, 검증 단계 내내 그 선을 지키는 데 집중했어요. 그런데 도입을 막 시작하려는 지금 시점에 한 가지 결정을 하나 더 얹게 됐어요 — Storyb

#storybook#react-native#on-device

2026-05-1514 MIN

본격 Storybook 도입 · 9

Storybook 도입 과정에서 손에 남은 것들 — 그리고 앞으로의 기대

긴 시리즈도 이제 마지막 편입니다. 여기까지 오신 분들 정말 감사해요. 검증 단계를 마치고 본격 도입을 시작하는 지금, 몇 달간 만들어 본 결정들을 한 자리에 모아두려고 합니다. 1년치 운영 회고는 아니에요. 출발선의 풍경이고, 앞으로 어떻게 활용하면서 어떤 가설을 측정해볼지에 대한 그림입니다. 시리즈에서 한 번씩 나왔던 결정들을 한 페이지에 압축해두면, 비슷한 길을 시작하시는 분께 한 번에

#storybook#introduction#react-native

2026-05-1514 MIN

본격 Storybook 도입 · 6

Storybook + Chromatic 시각 회귀 자동화 — pilot에서 머지 블로킹까지

여러분, 6편까지 오셨다면 한 가지 분명한 사실을 알게 되셨을 거예요. 스토리를 잘 짜는 것만으로는 안전망이 완성되지 않는다는 거. 누군가 PR을 올렸을 때 그 스토리들이 자동으로 돌고, 디자인이 어디에서 어떻게 바뀌었는지 정직하게 알려주는 그물이 있어야 합니다. 이 글에서는 그 그물을 어떻게 짰는지 — Chromatic으로 시각 회귀를 자동화하는 과정에서 박아둔 단계와 정책에 대해 풀어볼게

#storybook#chromatic#ci

2026-05-1512 MIN

본격 Storybook 도입

React Native에 Storybook 도입하기 — 정의, 개념, 시리즈 가이드

여러분, 반갑습니다. 이 글은 시리즈의 0편이에요. RN 앱에 Storybook을 도입하면서 검증 단계에서 모은 결정과 발견들을, 본편 8편 + 이 인트로로 풀어내려고 합니다. 도입을 막 시작하는 시점이라 회고라기보다는 결정의 정리에 가까워요. 본편으로 바로 들어가기 전에 — Storybook이 정확히 뭔지, 왜 도입하기로 결정했는지, 시리즈에서 어떤 순서로 어떤 이야기를 풀 건지를 한 번

#storybook#react-native#introduction

2026-05-1512 MIN