Part 2. 실무에서 활용하기

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

1. CSS 확인하기

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

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

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

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

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

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

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

 
2. CSS 속성 변경하기

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

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

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

 
**Styles에서 속성 변경 Tip!

3. 원본 파일 가져가기

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

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

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

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

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

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

4. 말줄임 기능 확인하기

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

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

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

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

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

6. CSS 추가

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

➊ 검사도구로 구입하기 버튼을 클릭	➋ Styles패널에서 +버튼 클릭. 추가된 CSS 코드 { }사이에 테스트할 속성을 넣습니다.
	_
➌ Border가 생긴것을 확인합니다.	_

7. CSS 가져오기

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

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

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

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

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

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

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

8. Hover값 변경하기

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

➊ 검사도구로 구입하기 버튼을 클릭	➋ Styles패널에 있는 <:hov>버튼을 선택합니다. :hover의 체크박스를 선택하면 관련 CSS가 나오게 됩니다. 저는 기존의 파란 색상값에서 #c665ff로 컬러값을 변경해주었습니다.
	_
➌ 마우스 오버 시 색상 값이 바뀐 것을 확인할 수 있습니다.	_

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

– 가치디자인그룹 이경은

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