빌다 메이커스에서 준비 중인 기능을 하나 소개합니다.
아마 정식 오픈하면 유료기능 위주로 제공될 것 같긴 한데, 소개 먼저드립니다.
웹 작업할 때 DevTools 열어서 요소 찍고,
꼬인 거 찾느라 콘솔 뒤지고, 캡처 프로그램 따로 켜는 과정이 꽤 번거로우셨을 겁니다.
이것도 잘하는 사람들 이야기지, 아닌 경우 더 어려운 길을 갔었죠. ㅠ
이걸 화면 위에서 한 번에 끝내려고 만든 도구가 바로
이번에 소개드리는 빌다 렌즈 Builda Lens, 크롬익스텐션 입니다.
한마디로 화면 내에서 웹의 뼈대부터
모션까지 한 번에 뜯어보는 전방위 웹 분석 툴입니다.
좀 다듬어야하지만 그래도 제가 실무보면서 사용 중 인
툴을 지속적으로 합치고 발전시킨 모습입니다.
기대해주셔서 감사합니다. 10.14일! 기대해주십시오! 최선을다해 준비하겠습니다!
[댓글 @_cjstmdduq]
[주요기능]
1. 화면 위 마우스오버 검사 & 측정:
요소에 커서만 올리면 태그, 클래스, flex·grid 구조, 마진·패딩 수치가 바로 뜹니다.
손쉽게 지목하고 소통할 수 있도록 셀렉터만 골라 복사할 수 있습니다.
2. 실시간 스타일 프리뷰:
코드를 수정하지 않고도 화면 위에서 텍스트, 폰트, 여백, 컬러를
직접 바꿔보며 시각적인 느낌을 바로 테스트합니다. (이 부분은 아직 개선중이에요)
3. 픽셀 색상 피커:
화면 어디든 클릭 한 번으로 컬러 코드를 추출해 바로 복사할 수 있습니다.
4. 제작자 맞춤 사이트 캡처 & 스크롤 녹화:
전체 페이지 스크롤 캡처는 물론,
PC&MOB화면 규격에 맞춰 영상으로 스크롤을 녹화할 수 있습니다.
(가장 공들이고 있는 기능중 하나에요.)
[댓글 @_cjstmdduq]
5. 브라우저 실측 기반 SEO & 성능 점검:
외부 서버 요청이 아니라 지금 열린 탭 기준으로 메타 태그,
LCP·CLS 성능 지표, 렌더링 누락 요소를 즉시 확인합니다.
(이건 이미 기존의 제작자분들께 공개된 기능을 차용했습니다. 입니다.)
6. 레이어를 공간으로 보는 3D 맵:
평면 화면을 3D로 띄워 레이어의 앞뒤 관계를 확인합니다.
가려지거나 겹쳐서 원인 파악이 힘든 z-index와 쌓임 맥락을 입체로
돌려보며 잡을 수 있습니다.
7. 스크롤 모션 타임라인 분석:
3D구조도로 GSAP나 CSS 스크롤 인터랙션의 동작 구간을
타임라인으로 보면서 지나친 모션도 되감아 타이밍을 확인합니다.
또 입체적으로 보면서 어떤 요소가 어떻게 흘러가는지 한눈에 이해하기 좋습니다.
[댓글 @groble.im]
개발자분들이 너무 필요로 할 것 같아요! 정식 오픈 너무 기대되네요
