UX 디자인과 개발 7.
개발자도구로 미리보기
개발자도구를 통해 개발된 사이트 임의로 수정해보기
웹사이트는 이제 필수가 되어버렸다. 그래서 이렇게 저렇게 웹사이트를 디자인해서 개발자에게 넘기면 뚝딱 완성된다. 하지만 디자인과 미묘하게 달라진 점이 있을 때가 있다. 아무리 피그마, 제플린을 이용해서 좌표와 영역값을 넣고, 에프터에픽트로 열심히 속도와 크기 조절을 해서 스플레시를 넣어도 막상 개발된 걸 보면 낯설고 이게 여기가 아닌데...? 싶은 부분이 있다.
그렇기 때문에 웹 사이트를 개발할 때 개발자가 먼저 던져준 링크를 통해 디자인과 구성을 파악하고, 수정 테스트해볼 수 있는 개발자도구는 무척 소중하다.
개발자도구?
크롬 개발자도구(Chrome DevTools)는 각종 디바이스 호환을 확인하고, 해당 화면의 코딩 소스를 훑어보거나 임의로 수정할 수 있는 기능을 가지고 있다.
크롬 - 보기 - 개발자 정보 - 개발자 도구윈도우 단축키 : Ctrl + Shift + I , F12
mac 단축키 : option + command + I
초간단 개발자도구 사용방법
1) 반응 및 크기 확인하기
살펴볼 홈페이지에 접속하면 가장 상단에 Responsive 상태가 기본으로 선택되어 보인다. 다양한 디바이스에서 어떻게 작용되는지 (1) 디바이스 리스트를 클릭해서 확인하거나, (2) 직접 수치를 입력하거나, (3) 크기를 직접 키워서 어떤식으로 반응되고, 브레이크 포인트가 잡혔는지 확인이 가능하다.
* 디바이스 리스트 하단에 Edit을 누르면 다양한 기기를 선택해서 확인해볼 수 있다.
2) 크기, 컬러, 구성 확인하기.
오른쪽 상단에 동그라미가 쳐진, 아이콘(Select an elemenet in the to inspect it)을 누른 뒤 살펴볼 홈페이지 위에 마우스를 올려두면 텍스트, 아이콘, 입력 필드 등의 구성이 어떻게 되었는지 확인할 수 있다.
해당 부분을 오버하면 오른쪽의 Elements 영역에서 마우스가 현재 위치한 구성 요소의 해당 코드 위치로 함께 움직인다. 이때 클릭하면 클릭한 구성 요소의 코드에 위치가 고정되어 자세히 살펴볼 수 있다.
2.5) 확인한 구성 수정해보기
Styles 코드 수정을 통해 폰트 컬러를 일괄로 변경해보기 수정해보고 싶은 부분을 찾아 컬러, 텍스트 크기, 여백 수치 등을 조정해볼 수 있다. 개발자도구를 통해서 임의로 수정하는 건 실제로 서버에 영향을 끼치지않기 때문에 마음껏 시도해볼 수 있다.
* 새로고침을 하면 원래 코드로 변경되기 때문에 개발자와 소통할 때는 선택했던 컬러값, 수치를 별도로 기록해두는게 좋다.
Elements 코드 수정을 통해 메뉴명을 변경해보기수정은 주로 Styles에서 수정하고자 하는 구성의 해당 영역, 설정을 찾아 마음껏 수치 조절을 해보면 된다. Styles에서 요소를 찾을 수 없다면 Elements에서 직접 변경할 수도 있기 때문에 기본적인 html 지식을 갖고 있어서 기본적인 구성 요소의 개발 위치를 알고 있거나, 2번 항목에서 말했던 구성요소를 확인할 수 있는 버튼(Select an element in the to inspect it)을 잘 이용해서 해당 코드를 찾아내면 된다.
그외에 개발자가 사이트 로딩 속도, 최적화에 대해 살펴볼 수 있는 기능이 있지만 그 부분까지 UX디자이너가 개입하는 것보다는 각자의 직무에 맞게 디자이너는 개발된 UI 확인, 수정 작업에 집중하는게 서로의 특성을 살려서 높은 효율을 얻을 수 있다.
번외) 응용해서 디자인 케이스 공부하기
네이버는 11px 폰트 사이즈를 쓰기도 한다. 개발자와 소통하기에 유용할 뿐만 아니라, 기존 웹사이트와 하이브리드 서비스의 디자인은 어떻게 되었는지 확인할 수 있어서 UI 디자인을 처음할 때 유용하다. 디자인에는 절대적인 답이 없기 때문에 다양한 케이스를 파악하고, 개발 사례를 찾을 때 스크린샷을 찍어 직접 폰트를 찾고 사이즈를 맞춰볼 필요가 없다.
