매력적인 웹사이트는 인터넷 시대가 만들어낸 일종의 작은 걸작이라고 할 수 있습니다. 웹사이트 커스터마이징은 워드프레스 테마를 살짝 수정하는 간단한 작업부터 사이트의 외관을 처음부터 끝까지 직접 설계하는 복잡한 과정까지, 원하는 수준에 따라 자유롭게 조절할 수 있습니다.
그러다 보면 자신의 프로젝트에 활용하고 싶은 디자인 요소나 색상을 발견하게 되는데요. 이번 글에서는 웹사이트가 숨기고 있는 디자인 정보를 손쉽게 확인할 수 있는 핵심 도구들을 소개합니다.
색상 확인 – ColorZilla
ColorZilla
ColorZilla는 원래 파이어폭스(Firefox)용으로 개발되었지만, 현재는 크롬(Chrome)과 크롬 기반 브라우저에서도 사용할 수 있습니다.
설치를 마치면 브라우저 UI에 새로운 버튼이 추가됩니다. 이 버튼 하나로 웹상의 거의 모든 요소의 색상 값을 확인할 수 있습니다. 또한 ColorZilla는 단순한 색상 추출을 넘어 팔레트 관리 기능까지 지원하기 때문에, 디자인 작업 시 색상을 체계적으로 관리하는 데도 유용합니다.
폰트 확인 – WhatFont? & Font Finder
WhatFont? (크롬)
엄밀히 말하면 웹사이트의 폰트를 확인하기 위해 WhatFont? 확장 프로그램이 반드시 필요한 것은 아닙니다. 스타일시트(CSS)를 열어 직접 찾아볼 수도 있지만, WhatFont?를 사용하는 것이 가장 빠르고 간편한 방법입니다.
WhatFont?를 설치하면 브라우저 UI에 새로운 아이콘이 나타납니다. 브라우저를 완전히 재시작하지 않았다면, 폰트를 확인하려는 페이지를 먼저 새로 고침해야 합니다. 이후 브라우저의 버튼을 클릭하면 준비 완료입니다.
버튼을 누르면 웹페이지 우측 상단에 새로운 버튼이 나타나고, 텍스트 위에 마우스를 올리면 해당 폰트의 이름이 표시됩니다. 폰트를 클릭하면 글자 크기 등 세부 정보도 함께 확인할 수 있습니다. 또한 해당 서체의 '폰트 스택(font stack)'에 포함된 다른 대체 폰트들도 보여주기 때문에, 웹 개발자가 의도한 서체 외에 어떤 대안들을 고려했는지 살펴보기에 좋습니다.
Font Finder (파이어폭스)
Font Finder는 크롬의 WhatFont?와 같은 용도로 사용할 수 있는 파이어폭스 전용 확장 프로그램입니다.
확장 프로그램을 설치하면 마우스 오른쪽 클릭 메뉴에 새로운 옵션이 추가됩니다.
확인하고 싶은 텍스트를 선택한 뒤 마우스 오른쪽 버튼을 누르고, 'Analyse Selection(선택 영역 분석)'을 클릭하면 해당 텍스트에 대한 모든 정보를 얻을 수 있습니다.
제공되는 정보의 수준은 놀라울 정도로 상세합니다. 텍스트가 '(stack)'으로 표시되어 있다면, 시스템에 설치된 폰트 중 스택의 첫 번째 항목이 적용된다는 의미입니다. 폰트 스택은 보통 위 예시의 'sans-serif'처럼 일반적인 명칭으로 끝나며, 만약 스택에 지정된 폰트가 설치되어 있지 않으면 시스템의 기본 산세리프 서체로 대체됩니다.
'Adjust Element(요소 조정)' 옵션을 사용하면 페이지의 요소를 직접 수정해볼 수도 있습니다. 폰트 패밀리를 입력하라는 안내가 뜨면 원하는 폰트를 자유롭게 지정할 수 있습니다. 실제 예시에서는 위키피디아(Wikipedia)의 거의 모든 폰트를 다른 서체로 바꿔 기묘한 조합의 페이지를 만들어 보기도 했습니다. 물론 이러한 변경은 임시적이며, 페이지를 새로 고침하면 원래대로 돌아갑니다.
'Replace font (entire DOM)' 옵션을 사용하면 페이지 전체에 적용된 특정 폰트를 한 번에 교체할 수 있습니다. 예를 들어 로보토(Roboto) 서체가 마음에 들지 않는다면, 이 옵션을 선택한 뒤 페이지의 폰트 목록에서 'Roboto'를 클릭하고 원하는 폰트 이름을 입력하면 됩니다. 역시 영구적인 변경은 아니지만, 좋아하는 웹사이트의 디자인을 임시로 바꿔가며 실험해볼 수 있다는 점이 매력적입니다.
요소 크기 측정 – Page Ruler & MeasureIt
Page Ruler (크롬)
"자(ruler)? 진짜 필요한가?"라고 생각하실 수도 있습니다. 하지만 Page Ruler는 말 그대로 화면 위의 요소 크기를 재는 '화면 자'입니다. 처음에는 다소 생소하게 느껴질 수 있지만, 웹 디자인에서 요소 간의 간격과 배치는 생각보다 훨씬 중요합니다.
웹페이지의 요소들은 적절한 간격으로 배치되어야 시각적으로 균형 잡힌 결과물이 완성됩니다. 평소에는 잘 신경 쓰지 않는 요소들의 픽셀 단위 크기와 위치 정보를 Page Ruler를 통해 손쉽게 확인할 수 있습니다.
다른 확장 프로그램과 마찬가지로 설치하면 브라우저 UI에 새로운 버튼이 추가됩니다. 참고로 보안상의 이유로 크롬의 내부 페이지에서는 사용할 수 없으므로, 실제 웹페이지를 연 상태에서 사용해야 합니다.
버튼을 클릭하면 주소 표시줄 바로 아래에 정보 표시줄이 나타납니다. 이후 마우스로 클릭한 채 드래그하여 영역을 지정하면, 해당 영역의 가로·세로 크기가 실시간으로 계산되어 표시줄에 나타납니다. 그리드(grid) 기능을 켜거나 끌 수도 있는데, 정밀한 측정이 필요하다면 켜두는 것이 좋습니다.
측정 영역의 색상도 기본 파란색에서 원하는 색으로 변경할 수 있습니다. 어떤 색을 선택하더라도 아래 콘텐츠가 보이도록 자동으로 투명도가 적용되므로 걱정할 필요가 없습니다.
Page Ruler는 미니멀한 인터페이스로 창 상단의 좁은 표시줄 안에 필수 정보를 모두 담아냈다는 점에서 높은 평가를 받을 만합니다.
MeasureIt (파이어폭스 & 크롬)
MeasureIt은 Page Ruler와 동일한 기능을 제공하며, 파이어폭스와 크롬 두 브라우저 모두에서 사용할 수 있다는 장점이 있습니다.
설치 후 버튼을 클릭하면 마우스로 클릭·드래그하여 측정 영역을 지정할 수 있으며, 영역 옆에는 픽셀 단위의 수치가 함께 표시되어 정확한 위치와 크기 측정이 가능합니다.
마우스만으로 정밀한 측정이 어렵다고 느껴진다면, 방향키를 이용해 선택 영역의 크기를 픽셀 단위로 조정할 수 있어 훨씬 정확한 측정이 가능합니다. 또한 설정에서 'Area(영역)' 옵션을 활성화하면 지정한 영역이 차지하는 면적까지 확인할 수 있습니다. 이 옵션은 프로그램의 동작 방식을 바꾸지 않으며, 단순히 면적 정보를 추가로 보여줄 뿐입니다.
직접 사용해보면 화면에 얼마나 많은 픽셀이 들어있고, 강조된 영역이 실제로 얼마나 넓은지 놀라게 될 것입니다. '스크린 부동산(screen real estate)'이라는 표현의 의미를 몸소 실감하게 될 겁니다.
마무리
이러한 확장 프로그램들을 능숙하게 활용하기까지는 약간의 시간이 필요하지만, 웹사이트의 숨겨진 디자인 정보를 손쉽게 확인할 수 있게 해주는 강력한 도구들입니다. 사용법은 금방 익숙해질 것입니다. 다만 폰트를 교체할 때는 폰트 이름을 정확하게 입력해야 한다는 점에 유의하세요. 예를 들어 'Comic Sans'는 인식되지 않지만, 오피스(Office)에 표시되는 대로 'Comic Sans MS'라고 입력하면 정상적으로 적용됩니다.
모든 확장 프로그램은 입력하는 정보의 정확성을 요구합니다. 이 점만 기억한다면 이 도구들을 최대한 활용해 웹 디자인 실력을 한 단계 끌어올릴 수 있을 것입니다.