신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 2

신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 2

신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 2
Category
Share Story

Part 2. 실무에서 활용하기

이번 파트에서는 크롬 개발자도구를 디자이너들이 실무에서 어떻게 활용하는지 알아보겠습니다.
웹을 디자인하다 보면 중간중간 퍼블리싱이 잘 되었는지 검수하는 과정이 꼭 있는데요. 애플 사이트를 예시로 선택한 엘리먼츠가 어떻게 퍼블리싱 되었는지 검수해보도록 하겠습니다.


1. CSS 확인하기

 

001

 

검사도구를 활성화합니다.
보고 싶은 엘리먼츠를 선택합니다.
선택한 엘리먼츠의 태그가 하이라이트로 표시됩니다.
선택된 태그에 대한 CSS를 보여줍니다.

Computed패널을 집중적으로 분석해보겠습니다.

002
➊ 선택된 엘리먼츠의 margin, border, padding, content를 확인합니다.

➋ 폰트 Color 값을 확인합니다.
➌ 폰트 적용 우선순위를 확인합니다.
➍ 폰트 사이즈를 확인합니다.
➎ 폰트 굵기를 확인합니다.
➏ 폰트 사이의 간격을 확인합니다.
➐ 텍스트 줄 높이를 확인합니다.

➑ 마진과 패딩값은 상단 box-model에서도 확인할수있습니다

➒ 텍스트 정렬을 확인합니다.

어떠세요? 막상 CSS라는 것을 잘 몰라도 차분히 코드를 읽어보면 대충 어떤 속성에 관련된 것인지 쉽게 파악할 수 있습니다.
디자인 검수와 관련된 내용만 체크하시면 되고 애매하거나 궁금한 것들은 검색해보면 금방 찾을 수 있습니다.

2. CSS 속성 변경하기

내가 한 디자인을 브라우저를 통해 보면 간혹 생각했던 느낌과 맞지 않을 때가 있습니다. 디자인대로 잘 퍼블리싱 되었는데도 말이죠.
그럴 땐 CSS 속성을 바꿔 원하는 느낌의 디자인을 테스트 해볼 수 있습니다.
앞서 선택했던 엘리먼츠의 CSS를 바꿔보겠습니다. CSS 속성은 Computed가 아닌 Styles 패널에서 바꿔야 합니다.

003-1
color값이 #111 -> #ff3597로 바뀐 것을 확인합니다.
font-size가 28px -> 50px로 바뀐 것을 확인합니다.
font-weight가 600 -> 200으로 바뀐 것을 확인합니다.

 

이처럼 각각의 CSS가 가지고 있는 언어의 의미만 안다면, 페이지뷰에서 실시간으로 디자인 테스트를 해보는 것은 그리 어렵지 않은 일이 될 것입니다.
하지만 원본 코드를 바꾼 것이 아니라 말 그대로 디자인 테스트일 뿐으로 원하는 디자인이 나왔다면 그 값을 기억해 개발자에게 수정을 요청해야 할 것입니다.

**Styles에서 속성 변경 Tip!

1. 내가 선택한 엘리먼츠가 어떤 Style에 영향을 받고 있는지 헷갈릴 때는 스타일 속성 앞 체크박스를 클릭해보며 변화를 확인합니다. 2. 스타일 속성을 바꿀 때 내가 선택하지 않았던 엘리먼츠도 같이 바뀐다면 class 이름이나 css 이름이 같은지 확인합니다.

004

005

3. 컬러 변경 시 HEX코드 앞 컬러박스를 클릭하면 컬러피커가 실행됩니다. 4. 폰트패밀리에서 우선순위를 확인합니다. 가장 앞단에 있는 폰트가 1순위로 보이는 폰트이고 문제가 있을시 그다음 순서로 이어집니다. 폰트를 하나씩 삭제해가면서 체크해보는 것도 방법입니다.

006

007

 

3. 원본 파일 가져가기

어떤 이미지의 속성을 확인하고 싶거나 이미지의 원본 파일을 가져가고 싶을 때 사용하기 유용한 방법입니다.

 

008

엘리먼츠를 선택합니다.
해당 이미지가 svg로 만들어진 것을 확인합니다.

 

009

이미지 링크에서 오른쪽 마우스 클릭. Open in new tab을 선택합니다.

 

010

이미지 새로운 창에서 이미지가 열리는 걸 확인할 수 있습니다. 다시 오른쪽 마우스를 클릭. 다름 이름으로 저장을 선택합니다.

 

011

일러스트 프로그램에서 저장한 SVG 파일을 열면 원본 패스 그대로 저장된 것을 확인할 수 있습니다.

 

**비트맵 이미지 원본 가져오기 Tip!
jpg나 png 파일도 같은 방식으로 가져온다면 pixel 손실 없이 원본을 그대로 가져올 수 있습니다.

 

4. 말줄임 기능 확인하기

텍스트가 길어지면 말줄임 처리하는 경우가 종종 있습니다. 말줄임 기능이 제대로 구현되는지 확인해보겠습니다.

 

012-1 013
➊ 검사도구로 텍스트 선택. ➋ Elements패널에서 해당 텍스트
더블 클릭, 편집 필드 활성화.
014 015'
➌ 테스트용 텍스트 삽입. ➍ 말줄임 표시 확인.텍스트

 

5. 브레이크 포인트 확인하기

반응형 웹의 브레이크 포인트가 제대로 작동하는지 확인해보겠습니다.

016

017

마우스를 페이지뷰와 개발자도구 사이에 놓고 양옆으로 옮기면서 변하는 사이즈를 확인합니다.
735px 미만에서 페이지 레이아웃이 바뀌는 것으로 브레이크 포인트를 확인할 수 있습니다.

 

6. CSS 추가

디자인 테스트를 하다 보면, 기존에 없던 CSS 값을 추가하고 싶은 순간이 생깁니다.
그때 Styles 패널을 통해 CSS 값을 추가하는 방법을 소개하도록 하겠습니다.

 

025 s1

➊ 검사도구로 구입하기 버튼을 클릭

➋ Styles패널에서 +버튼 클릭. 추가된 CSS 코드 { }사이에 테스트할 속성을 넣습니다.

s2 _

➌ Border가 생긴것을 확인합니다.

_

 

7. CSS 가져오기

괜찮은 웹사이트를 발견하면 특정 엘리먼츠의 스타일 속성을 가져와서 내 디자인에 적용하고 싶은 순간이 있을 겁니다.
예시로 애플 홈페이지 GNB에 쓰인 스타일 속성을 라이트브레인 GNB에 넣어보도록 하겠습니다.

 

019

➊ 검사도구로 애플 GNB 백그라운드를 클릭합니다.

 

020
➋ Styles패널에서 background와 backdropfilter
내용을 복사합니다.

 

021
➌ 검사도구로 라이트브레인 GNB 백그라운드를 클릭합니다.

 

022
➍ Styles패널에서 background속성을 확인합니다.

 

023
➎ 애플에서 가져온 CSS속성을 붙여넣기 합니다.

 

024
➏ 라이트브레인 GNB 백그라운드 속성값이 변한것을 확인합니다.
이처럼 적용하고 싶은 속성이 있으면 참고할 웹사이트에서 복사+붙여넣기를 해가며 디자인 테스트를 해볼 수 있습니다.
더불어 개발자에게 의견을 전달할 때도 더욱 정확한 코드를 사용하여 소통할 수 있을 것입니다.

 

8. Hover값 변경하기

호버값은 검사도구로 클릭해도 한 번에 CSS가 나오지 않습니다.
Hover에 들어간 CSS 값을 변경하는 방법에 관해 이야기 하도록 하겠습니다.

 

025 026

➊ 검사도구로 구입하기 버튼을 클릭

➋ Styles패널에 있는 <:hov>버튼을 선택합니다. :hover의 체크박스를 선택하면 관련 CSS가 나오게 됩니다. 저는 기존의 파란 색상값에서 #c665ff로 컬러값을 변경해주었습니다.

027 _

➌ 마우스 오버 시 색상 값이 바뀐 것을
확인할 수 있습니다.

_

 

이 외에도 크롬 개발자모드로 할 수 있는 것들은 무궁무진합니다.
어떤 웹사이트를 참고할 때 개발자모드로 보는 습관을 들이시면 점점 HTML과 CSS 언어에 친숙해질 것입니다.
그러면서 더 많은 언어와 의미들이 보이고 지금은 Elements 패널 뿐이지만 Console이나 Sources 패널 등 다룰 수 있는 영역은 더 넓어질 것입니다.

 

– 가치디자인그룹 이경은

 

 _ * 1편 보기-
신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 1

[참고 사이트]
– 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

3 Comments

  1. typo 2020년 08월 14일 at 9:34 오후 - Reply

    6-2 6-3 사진이 잘못 몰라왔습니다

    • blogadmin 2020년 08월 18일 at 12:03 오후 - Reply

      확인해서 사진 수정하였습니다.
      소중한 의견 감사드립니다.

  2. CHOi 2020년 08월 22일 at 12:13 오후 - Reply

    뜯어보기가 중요하군요

Leave A Comment