Stage 1. 기획 + 디자인 시스템
수강생 질문

3단계 md파일 있는 스타터키트 다운받았는데, 스토리북에 디디디님처럼 이 문서들이 나오지 않아요. 그냥 직접 해보고싶어서 ai 한테 물어보니, mdx 파일을 새로 만드는걸 추천하더라구요? 근데 뭔가 불필요한 소스인 것 같기도 하고... 제가 스토리북 원리를 이해하지 못해서 그렇게 생각하는 것 같기도 하고... 그래서 저의 질문은, 디디디님은 MUSE 폴더에 있는 md 문서들을 어떤 원리로 스토리북에 뜨는건가요?


답변 1
답변

아 몇가지 부연 설명을 드린건, 일단 md는 AI가 데이터를 가장 빠르고 가볍게 읽기위한 문서 포멧인데, 여기에는 딱히 서식이 없어서 이걸 서식화 해주는게 mdx 파일이에요. 제가 실습도중에 md파일이 그대로 나오는걸 확인해서 표와 같은 서식이 보이도록 수정한건데요 클로드의 설명대로 mdx로 수정하는게 보기 좋습니다. (불필요한건아니고요) 그리고 스토리북 원리는 특별한게 아니라, 유저가 실제로 보는 빌드환경 (pnpm dev)를 하지 않아고 pnpm storybook을 통해 1개의 컴퍼넌트당 1개의 스토리를 배정해서 이렇게 스토리북에서 웹서비스 최종 버전이랑 상관없이 딱 볼것만 격리시켜서 보는거죠. 그런데 컴퍼넌트가 아니더라도 정책이나 중요한 데이터를 설명하는 스토리를 이런식으로 추가할 수 있는겁니다! 스토리북 원리와 사용법이 조금헷갈리시다면 Section 2 > Chapter2 의 처음 2개 영상을 빠르게 다시 보시는것을 추천합니다!

같은 걸 만들다 막혔나요?

Vibe Design Lab 커뮤니티에서 수강생들이 실제로 막힌 지점과 해결을 나눕니다.