#ChromeDevSummit2018
ProjectVisBug는 2018년 Chrome Dev Summit에서 공개된 Visual design Toolkit이다. 현재는 Chrome Extension으로 공개되어있으며 Firefox Extension으로도 공개될 예정이다.
Download:
GitHub:
회사에서 디자이너와 개발자가 협업을 하다보면 불협화음이 참 많이 생긴다. CSS를 한번이라도 다뤄본 사람이라면 알겠지만 스타일 하나를 수정했을 때 발생할 수 있는 사이드 이펙트는 예상하기가 힘들고 (물론 예상가능한 것도 있다), 반대로 디자이너는 본인이 디자인한 것과 다른 사이트가 나오는 것에 대해서 불만을 가지기도 한다.
Photoshop으로 디자인을 하던 시대와는 다르게 지금은 Sketch로 디자인을 해서 Zeplin으로 공유를 하는 Flow가 상당히 정착된 느낌이다. 거기에 더 나아가서 ProtoPie, Framer, Adobe XD 등 다양한 prototype 도구가 나타나면서 웹에서의 인터렉션을 어떻게 부여할 지에 대해서도 디자이너와 개발자가 면밀히 협의할 수 있게 되었다.
하지만 Zeplin을 사용하던 Framer를 사용하던 개발자가 개발한 결과물이 디자이너가 원하던 것과 다른 경우는 흔한 일이다. Chrome DevTools에 익숙한 사람이라면 요소를 선택해서 스타일을 수정하거나 HTML을 수정하는 행위가 편리하겠지만 그렇지 않다면 요소를 선택해서 수정하는 행위는 꽤나 어려운 일이다.
Project VisBug는 “만약 Sketch에서처럼 요소를 선택해서 수정할 수 있다면 어떨까?” 라는 느낌으로 접근한 Visual Design Toolkit이다. 11월 12일 Chrome Dev Summit Keynote에서 공개되었으며 현재 Chrome Web Store에서 설치 가능하다.
VisBug를 웹에서 실행시키면 다른 비주얼 툴에서 나타나는 것처럼 좌측에 Toolbar가 나타나며, Toolbar의 각 기능을 통해 웹 사이트를 제어할 수 있다.
툴바에서 마우스를 올려두고 있으면 해당 버튼이 어떤 기능인 지 알려주는 툴팁이 노출된다. 예를 들어 첫번째 아이템은 Guides로 특정한 요소의 그리드와 정렬을 확인할 수 있게 도와준다.
현재 Toolbar에서 제공하는 기능은 다음과 같다.
Guides
정렬과 Grid를 체크한다.
Inspect
요소의 공통 & 현재 적용된 스타일을 볼 수 있다. (여기가 span으로 감싸져있단 걸 오늘 처음 알았다)
A11y
해당 요소의 접근성과 관련된 속성 및 현재 준수 여부를 나타낸다.
Move
요소를 이동시킨다. 특정 요소를 선택 후 화살표로 이동시킬 수 있다.
Margins & Padding
둘은 서로 다른 버튼이지만 비슷하니까 하나로 묶어서 설명하겠다. 말 그대로 Margin과 Padding을 늘리고 줄인다. 위와 동일하게 화살표로 제어한다. 참고로 Shift와 함께 제어하면 5px씩 늘어난다.
1~2px 차이로 고통받는 디자이너들에게 많은 도움이 될 거 같다.
Padding과 Margin은 Box Model에 직접적으로 영향을 주기 때문에 위 두 속성을 제어함으로써 레이아웃을 맞추고 이상한 픽셀을 맞추는 데 도움이 될 거라 생각한다.
Flexbox Align
Flex속성을 이용하여 요소의 정렬을 수정한다. flex의 정렬, justify, direction을 수정할 수 있다.
Hue Shift
HSL (Hue, Saturate, Lightness)를 제어하여 특정한 요소의 색상을 다른 색상으로 변경할 수 있다. 마찬가지로 화살표로 제어한다.
Shadow
그림자 (box-shadow)를 제어한다. 마찬가지로 방향키로 제어할 수 있다.
Position
특정한 요소를 이동시킨다. 마우스로 클릭 후 아무 곳에나 이동시키면 된다. 동작 방식은 position: relative에 좌표로 이동시키는 듯 하다. (코드 까봤다) 특정한 요소의 위치가 애매할 때 체크해보면 좋을 거 같다.
Font Styles
font와 관련된 속성을 제어한다. font-size (Size), font-align (Alignment), line-height (Leading), letter-spacing (Kerning), font-weight (Weight)를 제어한다.
Edit Text
마지막으로 텍스트를 편집할 수 있다. 해당 요소를 클릭한 후 수정하면 된다.
Project VisBug의 기능들을 살펴보았다. 어떤 기능들은 유용할 수도, 어떤 기능들은 이게 왜 있는 지 모를 수도 있지만 Chrome DevTools를 이용해서 각 요소들을 제어하던 사람들이라면 한번쯤 사용해보면 좋을 듯 하다.
개발자 입장에서는 이 도구를 사용한다고 해서 모든 문제가 해결되지는 않는다. 해당 요소에 대해서만 제어하기 때문에 CSS에서 특정 셀렉터를 수정했을 때 다른 요소에 미치는 영향을 체크해보기 힘들고, 해당 요소만 수정하는 행위는 페이지 전체의 짜임새를 파괴하는 경우도 있기 때문이다.
하지만 디자이너와 함께 협업할 때 어떤 지점에서 문제가 있고, 이 문제를 어떻게 해결해볼 수 있는 지 관측해보고 싶을 때 더할나위 없이 좋을 거 같고, 특정한 요소의 수정이 다른 요소에 어떻게 영향을 미치는 지에 대해서 살펴볼 때 좋을 거라 생각한다.
현재 완벽하게 개발이 완료된 상태가 아니기 때문에 더 지켜봐야겠지만, 앞으로의 업데이트가 기대되는 도구임에는 틀림 없다고 생각한다.
