신입 웹디자이너를 위한 크롬 개발자도구 활용법 1
Part 1. 크롬 개발자도구 알아보기
처음 웹을 디자인하는 사람이라면, 퍼블리싱된 웹을 검수할 때 어떤 기준으로 검수해야 할지 막막하고 난감한 순간이 있었을 겁니다.
내가 만든 디자인이 잘 구현되었는지 눈대중으로 판단하기엔 한계가 있고, 그렇다고 모르는 척 지나치기엔 이상한 점이 한두 가지가 아닙니다. 좀 더 객관적인 데이터를 기반으로 검수할 방법이 없을까 고민하다 구글에서 만든 웹 브라우저인 크롬 개발자도구를 알게 되었습니다.
디자이너가 크롬 개발자도구를 사용하게 되면 개발자와의 원활한 소통은 물론, 때에 따라 손쉽게 디자인 테스트를 해보며 바뀌는 화면을 라이브로 볼 수 있다는 장점이 있습니다.
또한, 눈여겨본 웹사이트가 어떤 구조로 이루어져 있고, 어떤 스타일이 들어갔는지 참고하기에도 매우 유용한 도구입니다. 다만 어느 정도는 개발 언어에 대한 이해도가 뒷받침되어야 하므로 HTML과 CSS라는 단어를 처음 들어보시거나 각각의 언어가 가지고 있는 의미를 전혀 모르시는 분이라면
아래의 사이트에서 기초적인 내용만 학습하고 오셔도 개발자도구를 훨씬 유동하게 다루실 수 있으실 겁니다.
**초보자가 학습하기 좋은 코딩 사이트
생활코딩 : https://opentutorials.org/course/1
Ofcourse : https://ofcourse.kr/
그렇다고 코드를 개발자처럼 속속들이 알아야 하는 것은 아닙니다.
말 그대로 기초적인 개념만 잡고 나면 나머지는 그때그때 검색해가며 알아가도 되기 때문에 사용하기에 앞서 너무 걱정하실 필요는 없습니다.
그럼 지금부터 신입 디자이너라면 반드시 알아야 할 크롬 개발자모드 활용법을 소개하도록 하겠습니다.
1. 크롬 개발자 도구란?
구글에서 만든 웹 브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다.
개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화할 수 있습니다. 언뜻 보면 개발자를 위한 도구인 것 같지만, 글자 크기, 색, 간격 등 정확한 값을 확인해야 하는 디자이너에게도 없어서는 안 될 매우 중요한 도구입니다.
2. 개발자모드 진입
크롬 개발자모드로 진입하는 방법은 간단하게 2가지입니다.
➊ 검수하고자 하는 웹사이트에 접속해서 우클릭, 검사메뉴로 진입합니다.
➋ 단축키를 사용합니다. 맥은 <command+option+I>, 윈도우는 <ctrl+shift+I>나 를 누르면 해당 모드로 진입합니다.
3. 구조 살펴보기
개발자도구는 크게 패널 메뉴와 패널 영역으로 나누어져 있습니다. 우리는 주로 패널메뉴 앞단의 내용을 가지고 작업하게 될 것입니다.
패널 메뉴 중 디자이너들이 가장 눈여겨볼 만한 네 가지 기능을 소개하겠습니다.
➊ 검사도구(Inspect) : 검사하고 싶은 영역을 선택하게 도와주는 도구입니다.
➋ 디바이스 모드(Device mode) : 화면을 디바이스별로 확인하도록 도와주는 도구입니다.
➌ Elements 패널 : 태그를 분석하고 실시간으로 수정할 수 있도록 도와주는 도구입니다.
➍ Dock side : 개발자의 취향이나 편의에 따라 원하는 방식대로 Dock 위치를 지정하여 사용할 수 있습니다.
4. 디바이스 모드 활용하기
가장 먼저 디바이스 모드를 살펴보겠습니다. 다양한 디바이스별 미리보기를 제공하는 토글 버튼입니다.
직관적인 UI를 가지고 있기 때문에 상세히 설명하지 않아도 금방 구조 파악이 가능합니다.
실행 방법은 버튼을 클릭! 파란색으로 활성화되며 해당 모드로 진입합니다.
➊ 다양한 디바이스 목록을 보여줍니다.
➋ Landscape View를 지원합니다.
➌ Edit로 들어가 더 많은 목록을 보거나 직접 해상도를 설정합니다.
5. Dock side 활용하기
개발자도구를 원하는 곳에 위치 시킬 수 있는 도구입니다.
➊ 추가 개발자 도구 버튼을 클릭합니다.
➋ 개발자 도구 위치를 지정합니다.
6. 검사 도구 활용하기
검사도구는 웹페이지를 구성하는 Elements를 쉽게 찾을 수 있도록 도와주는 도구입니다.
➊ 마우스를 엘리먼츠에 오버하는 것만으로도 대략적인 정보를 제공합니다.
➋ 선택한 엘리먼츠의 태그를 찾아 하이라이트로 표시합니다.
➌ 선택한 엘리먼츠의 styles를 찾아 표시합니다.
**검사도구 선택 Tip!
검사도구로 엘리먼츠를 선택할 때 내가 보고자 하는 엘리먼츠가 정확하게 선택이 되지 않을 수 있습니다.
그럴 때는 하이라이트로 표시된 태그의 위 단계나 아래 단계로 마우스를 이동해 원하는 위치에 영역이 잡히는지 확인합니다.
검사도구로 ➊, ➋, ➌, ➍와 같이 마우스가 이동할 때 선택 영역의 컬러가 수시로 변하는 것을 확인할 수 있는데 이는 Box Model과 관련이 있습니다.
Box Model은 선택 영역을 박스형으로 표현하며 margin 또는 padding 등 적용된 값들을 컬러로 구분 지어 표현합니다.
**Box Model로 CSS값 확인하기
➊ margin값이 상(-), 하(30), 좌(29.984), 우(15)인 것을 확인합니다.
➋ padding값이 상(-), 하(320), 좌(60), 우(60)인 것을 확인합니다.
➌ content값이 555 x 310.188인 것을 확인합니다.
7. Elements 패널 살펴보기
디자이너라면 가장 많이 접하게 될 Elements 패널에 관해 설명하겠습니다. 웹디자인을 하면서 HTML, CSS, JavaScript 라는 단어를 많이 들어보셨을 텐데요.
크롬 개발자도구에서 Elements는 HTML, Styles는 CSS를 가리킵니다. JavaScript는 진입장벽이 높은 언어이므로 이 글에서는 다루지 않겠습니다.
* 이미지 출처 : https://www.freepik.com/Elements 패널 구성
➊ Elements : HTML 태그가 표시되는곳
➋ Styles : 선택된 태그의 모든 CSS가 표시되는곳
➌ Computed : 선택한 태그의 최종 CSS가 표시되는곳
**Styles와 Computed의 차이
Styles는 개발자가 해당 태그에 적용한 모든 CSS가 표시된다.
Computed는 태그의 부모와 자식 간의 관계나 우선순위를 통해 최종적으로 선택된 CSS가 표시된다.
Styles 패널에서도 충분히 CSS를 확인할 수 있지만 신입 디자이너이거나 코드가 익숙하지 않은 분들은 Styles 패널 옆에 있는 Computed 패널을 먼저 확인할 것을 권장합니다.
Computed 패널은 최종 선택된 CSS만 보이기 때문에 한눈에 어떤 효과가 들어갔는지 확인하기 쉽습니다.
**Styles 패널
개발자가 넣은 모든 CSS가 표시됨.
취소된 CSS까지 나열됨으로 내용이 굉장히 길고 복잡함
**Computed 패널
우선순위를 통해 최종 선택된 CSS만 나열.
디자인대로 퍼블리싱되었는지 한눈에 확인 가능.
Computed 패널을 먼저 확인할 것을 권장하는 또 다른 이유는 디자이너가 CSS 효과를 수정하고 싶을 때 Styles 패널 어디에 해당 CSS가 있는지 손쉽게 안내한다는 것입니다.
또한, 어떤 우선순위를 통해 최종 CSS가 선택되었는지 한눈에 알아볼 수 있습니다.
➊ box model에서 엘리먼츠에 적용된 margin, border 값 등을 확인할 수 있습니다.
➋ 화살표를 누르면 드롭다운 되면서 해당 엘리먼츠에 어떤 CSS가 적용되었는지 보여줍니다.
➌ 해당 요소를 클릭하면 Styles패널의 CSS로 이동합니다.
➍ 취소 선이 그어진 CSS는 상단 CSS에 우선순위가 밀린 값입니다.
지금까지 디자이너에게 필요한 크롬 개발자도구의 전체적인 구성과 기능에 대해서 알아보았습니다.
개발자도구는 이 이외에도 Console, Sources, Network 패널 등 개발에 필요한 많은 기능이 있지만 우리는 디자이너이기 때문에 모든 기능을 다 파악할 필요는 없습니다.
다음 이어지게 될 Part2 에서는 디자이너들이 실무에서 개발자도구를 어떻게 활용하는지 예시를 가지고 설명해보는 시간을 가져보도록 하겠습니다.
– 라이트브레인 가치디자인그룹 이경은
_
* 다음편 보기-
신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 2
[참고 사이트]
- https://opentutorials.org/course/580
- https://developers.google.com/web/tools/chrome-devtools?hl=ko
- https://lqez.github.io/blog/chrome-dev-tool-101.html
- https://www.youtube.com/watch?v=w6FPYVMsrNI
