측정 및 외곽선 (Measure & outline)
React | Vue | Angular | Web Components | 그 외(More)
스토리북의 측정(Measure) 기능과 외곽선(Outline) 기능을 사용하면, 스토리를 보면서 CSS 레이아웃이나 정렬이 틀어진 곳을 시각적으로 아주 쉽게 디버깅할 수 있습니다. 개발 초기 단계부터 UI 버그를 쏙쏙 잡아낼 수 있게 도와주는 효자 도구들이죠.
측정 (Measure)
여러 컴포넌트가 합쳐진 복잡한 화면이나 전체 페이지 레이아웃을 짤 때, 컴포넌트 간의 여백(margin, padding, border)이나 개별 컴포넌트의 정확한 크기를 확인하는 건 꽤나 번거로운 일입니다. 보통은 브라우저 개발자 도구를 열고 DOM 트리를 하나하나 뒤져가며 버그를 찾아야 하죠.
하지만 스토리북에서는 툴바에 있는 자(measure) 모양 버튼을 클릭하기만 하면 끝입니다! 버튼을 켜고 스토리 안의 엘리먼트에 마우스를 올려보세요. 해당 엘리먼트의 정확한 크기(dimensions)와 여백(margin, padding, border) 정보가 화면 위에 직관적으로 그려집니다.
💡 팁: 키보드에서 m 키를 누르면 마우스 클릭 없이도 측정 기능을 껐다 켰다(toggle) 할 수 있어요.
외곽선 (Outline)
레이아웃을 짤 때 모든 컴포넌트들이 줄에 맞춰 예쁘게 정렬되어 있는지 눈으로 확인하는 건 생각보다 까다롭습니다. 특히 컴포넌트들이 멀리 떨어져 있거나 모양이 독특하다면 더더욱 그렇죠.
이럴 땐 툴바에 있는 네모 점선(outline) 버튼을 클릭해 보세요. 현재 화면에 있는 모든 UI 엘리먼트 주변에 외곽선이 그려집니다. 이 선들을 보면 어디서 레이아웃이 어긋났는지, 튀어나온 녀석은 없는지 한눈에 파악할 수 있어요.
API
파라미터 (Parameters)
이 기능들은 스토리북의 파라미터(parameters) 영역 중 measure 또는 outline 네임스페이스 아래에 옵션을 제공합니다.
disable
타입: boolean
해당 기능(측정 또는 외곽선)의 동작을 아예 꺼버립니다. 만약 스토리북 전체에서 이 기능들을 완전히 빼버리고 싶으시다면, 여기서 설정하지 마시고 메인 설정 파일(main.js|ts)에서 애드온 자체를 비활성화(disable)하시는 것이 좋습니다.
이 파라미터는 보통 전체 프로젝트 단위로는 기능을 꺼두고(true), 필요한 특정 컴포넌트나 스토리에서만 살짝 다시 켤 때(false) 요긴하게 쓰입니다.
이 페이지가 유용했나요? 👍 👎
✍️ 깃허브에서 편집하기 (Edit on Github)
