웹사이트 디자인 훔쳐보기 - F12 개발자모드를 통한 소스코드 분석

블로그를 운영하는 사람들의 관심사 중의 하나는 블로그 디자인 입니다. 디자인이 잘된 사이트는 글을 읽을 때 가시성도 높을 뿐더러, 방문한 사람으로 하여금 다시 오게 만들고, 웹사이트 체류시간을 늘린데 일조 합니다.

혹시 그런 사이트 들을 보면, 레이아웃은 어떻게 되며 글꼴은 무슨 것을 사용했을까 궁금했던 적이 없으신가요? 저는 가끔 웹서핑을 하다가 좋은 사이트들을 만나면 자주 사이트의 소스를 보곤 합니다. 

원래 웹이란 것이 HTML, CSS 란 언어를 통해서 만들어지기 때문에, 별로 어렵지 않게 그 소스를 볼 수가 있습니다. 이미 사이트에 올라왔다는 것은 그렇게 만들어진 파일이기 올라 왔다는 것이기 때문이죠. 웹페이지를 자신의 컴퓨터 파일로 저장해서 CSS 파일을 볼 수도 있지만, 요즘 브라우저 들은 실시간으로 해당 사이트의 구석구석을 살펴볼 수가 있습니다. 바로 개발자 모드라는 것입니다.

자신의 브라우저에서  F12 키를 눌러보자

현재 사용하고 있는 브라우저에서 F12 펑션키를 눌러보시기 바랍니다. 개발자모드라는 이름으로 대부분 브라우저 하단에 창이 하나 나타납니다. 

위의 화면은 익스플로러의 개발자 모드 입니다. HTML 편집장이 하나 나타납니다. 여기서 바로 바로 HTML 코드를 살펴볼 수가 있습니다. 만약에 어떤 사이트에서 글꼴이 맘에 들어서 찾아본다고 가정을 해보겠습니다. 그러면 아까 오픈된 개발자모드 창에서 화살표를 선택합니다. 

그리고, 이어서 알고자 하는 곳의 글자나 이미지를 클릭합니다. 그러면 아래와 같이 해당 부분에 대한 CSS 및 HTML 코드 가 나오게 됩니다.

자세하게 나오므로 쉽게 파악을 할 수가 있습니다. CSS 에 체크박스를 해제 하면, 그 style 이 해제되었을때의 화면을 바로 볼 수가 있습니다. 편집도 가능하기 때문에 굉장히 유용하게 이용을 할 수가 있습니다.

저는 주로 사이트의 레이아웃이나 글꼴을 확인할 때가 많습니다. 독특한 글꼴이나 가시성이 높은 글꼴을 볼때면 이렇게 한번씩 찾아봅니다. 또한 색깔이 예쁜 사이트를 볼때도 꽤 유용하게 이용을 할 수가 있습니다.

개인적으로는 파이어폭스의 개발자 도구가 훨씬 화면이 깔끔하고 알아보기가 쉽게 나오는 것 같습니다.

실제로 이런 모드를 처음 제공한 것은 파이어폭스의 확장 프로그램 형식으로 제공이 되었던 파이어버그라는 것이기 때문에, 이 부분에 대해서 노하우가 있어서 그런 것이 아닐까 싶네요. 아무래도 오픈 소스로 개발이 되는 것이다보니 여러사람에 의해서 수정이 되어서 사용하기 편한게 아닐까 합니다.

예전에는 확장 프로그램을 설치를 해야지만, 사용을 할 수가 있었는데, 요즘은 편한 기능이라서 그런지 웹브라우저에 전부 기본적으로 내장이 되어 있습니다. 마치 F11 을 누르면 모두 전체화면으로 전환이 되는 것처럼, F12 를 누르면 전부 이렇게 개발자모드로 보여주게 됩니다.

위의 화면은 구글 크롬브라우저를 통해서 본 모습입니다. 크롬 브라우저도 꽤 깔끔한 모습을 보여주고 있네요. 

이 기능은 다른 사이트를 볼 때 뿐만이 아니라, 자신이 직접 디자인을 할 때도 꽤 유용하게 사용할 수가 있습니다. 편집기로 편집을 해서 사용을 해도 되지만, 브라우저에서 직접 수정하면서 실시간으로 화면을 볼 수가 있기 때문에, 결과물을 바로 확인 해볼 수가 있습니다.

원래 훌륭한 디자인은 끊임없는 모방을 하는 가운데 나오는 것 같습니다. 웹서핑을 하다가 좋은 사이트를 발견하면 바로바로 개발자모드를 통해서 확인을 해보시기 바랍니다. 그렇게 하나하나 내공이 쌓이면 언젠가는 멋진 디자인의 블로그가 만들어 질테니까요.