웹디자이너가 알아야 할 크롬 개발자 툴을 시도해본다! 부산경상대학교 디자인계열 캐릭터웹디자인전공
안녕하세요! 부산경상대학교 디자인계열 캐릭터 웹디자인전공입니다.오늘은 웹디자이너가 알아두면 좋은 크롬 개발자 툴의 활용법에 대해 알아보겠습니다!웹을 디자인하는 것이 익숙하지 않았다면 퍼블리싱된 웹을 검수할 때 어떤 기준으로 검수해야 할지 막막하고 난감한 순간이 있었을 것입니다.직접 만든 디자인이 잘 구현되고 있는지 눈대중만으로 판단하기에는 한계가 있어 간과하기에는 신경이 쓰입니다.
이런 때 구글에서 만든 웹 브라우저인 크롬 개발자 도구를 사용하면 보다 객관적 자료에 기초해서 검수할 수 있습니다.디자이너가 크롬 개발자 도구를 사용하면 개발자와의 원활한 소통은 물론 때에 의해서 쉽게 디자인 시험을 보면서 달라지는 화면을 실시간으로 볼 수 있다는 장점이 있습니다.또 벤치마킹할 웹 사이트가 어떤 구조로 구성되어 있으며, 어떤 스타일이 들어갔는지를 참고하는 것에도 매우 편리합니다. 그러나 개발 언어에 대한 이해도가 입증돼야 하므로 HTML과 CSS를 어느 정도 다루지 않으면 안 됩니다.1. 크롬 개발자 도구란?구글에서 만든 웹 브라우저인 크롬에 개발을 지원하는 다양한 툴을 기본으로 제공되는데 이를 개발자 도구라고 합니다. 이를 사용하면 HTML, CSS, JavaScript의 생산성을 극대화할 수 있습니다. 언뜻 보면 개발자만을 위한 툴이라고 생각할지도 모르겠지만 글자 크기, 색, 간격 등 정확한 값을 확인해야 할 디자이너에게 있어서도 빠뜨릴 수 없는 중요한 툴입니다.
인기글
2. 개발자 툴 진입 크롬 개발자 툴에 진입하는 방법은 두 가지가 있습니다.1. 검수하고자 하는 웹사이트에 접속하여 우클릭, 스캔메뉴에 들어가는 2. 바로가기 키를 사용한다(Mac-command+option+I, Windows-ctrl+shift+I)3. 개발자 툴의 구조개발자 툴은 크게 패널 메뉴와 패널 영역으로 나누어져 있습니다.
최상단 부분 Elements, Console 등의 메뉴가 적힌 부분이 패널 메뉴, 그 아래가 패널 영역입니다.패널 메뉴 중 디자이너가 알아야 할 기능은 어떤 것들이 있나요?
1. 검사도구(Inspect) : 검사하고자 하는 영역을 선택하는 데 도움이 되는 도구입니다.2. 디바이스 모드(Device mode) : 화면을 디바이스별로 확인할 수 있는 툴입니다.3. Elements 패널: 태그를 분석하고 실시간으로 수정할 수 있는 도구입니다.4. Dockside: 개발자의 취향이나 편의에 따라 원하는 방식으로 Dock 위치를 지정하여 사용할 수 있습니다.4. 검사도구 활용검사도구는 웹페이지를 구성하는 Elements를 쉽게 찾을 수 있는 도구로 실행방법은 버튼을 클릭하여 파란색으로 활성화되었는지 확인하고 페이지뷰에서 원하는 엘리먼트를 선택합니다.
1. 마우스를 엘리먼트에 가까이 대기만 하면 대략적인 정보가 제공됩니다.2. 선택한 엘리먼트의 태그를 찾아 하이라이트로 표시됩니다.3. 선택한 엘리먼트의 스타일을 찾아 표시합니다.검사 도구에서 마우스가 이동할 때 선택 영역의 색상이 수시로 바뀌는 것을 확인할 수 있는데, 이는 Box Model과 관련이 있습니다.Box Model은 선택 영역을 박스형으로 표현하고 margin 또는 padding 등 적용된 값을 컬러로 구분하여 표시합니다.5. 디바이스 모드 활용 디바이스 모드는 다양한 디바이스별 프리뷰를 제공하는 토글 버튼입니다. 직관적인 UI를 가지고 있기 때문에 자세히 설명하지 않아도 바로 구조 파악이 가능할 것 같습니다. 실행 방법은 그 버튼을 클릭하면 파란색으로 활성화되어 장치 모드로 들어갑니다.
5. Elements 패널을 보는 디자이너라면 가장 많이 접하는 기능이라고 생각하지만 웹 디자인을 하면서 HTML, CSS, 자바스크립트라는 용어를 많이 들어보셨을 겁니다.크롬 개발자 도구에서 Elements는 HTML, Styles는 CSS를 가리킵니다.6. Dockside 활용 개발자 툴을 원하는 장소에 위치시키는 툴입니다.
개발자 도구 오른쪽 상단의 3점 표시를 누르면 추가 메뉴 창이 나오는데 여기서 Dockside(독쪽) 오른쪽 아이콘을 이용하여 개발자 도구 창을 필요에 따라 다른 창으로 분리하거나 화면 하단, 오른쪽, 왼쪽에 위치시킬 수 있습니다.이렇게 웹디자인을 하면서 알아두면 좋은 크롬 개발자 툴의 사용법을 자세히 알아봤습니다! 도움이 되셨나요?다음에도 좋은 글로 찾아뵙겠습니다!시각광고디자인전공 인테리어가구디자인전공 캐릭터웹디자인전공 010.9315.3526051.850.1644
#부산경상대학교 #디자인계열 #시각광고디자인전공 #인테리어가구디자인전공 #캐릭터웹디자인전공 #시각디자인전공 #광고디자인학과 #인테리어디자인학과 #가구디자인학과 #수시모집 #2022수시모집 #장학금입학 #부산디자인학과 #부산전문대 디자인학과#크롬개발자도구#크롬#웹디자이너#웹개발자#CSS#HTML#JavaScription