애플은 하드웨어와 소프트웨어 디자인 분야에서 혁신적인 발전을 이루었지만, 정점에 이르렀을 때 완벽한 조화가 얼마나 중요한지를 보여주었습니다. 핵심은 모든 요소가 정확하게 정렬될 때 더욱 훌륭해 보인다는 것이며, 이는 산업 디자인뿐 아니라 웹 디자인에도 적용됩니다. 웹사이트 디자인은 일반적으로 포토샵에서 시작되지만, 디자이너와 개발자는 브라우저에서 웹사이트의 시각적 요소를 수정하는 것을 주저하지 않습니다. 웹페이지의 요소를 조정하는 것은 비교적 간단합니다. 대부분의 주요 웹 브라우저에 내장된 개발자 도구를 사용하여 패딩을 추가하거나 텍스트 색상을 변경할 수 있습니다. 하지만 이러한 도구에서 부족한 것 중 하나가 바로 정렬 도구입니다. 만약 크롬을 주로 사용하는 개발자라면, Baseliner라는 확장 프로그램을 사용해 보는 것이 좋습니다. 이 확장 프로그램은 화면에 여러 개의 수평선을 추가하여 시각적인 정렬을 도와줍니다. 이러한 선 사이의 간격과 색상은 사용자가 원하는 대로 설정할 수 있습니다. 또한, 이 도구를 사용하면 페이지 상단에 사용자 정의 패딩을 추가하여 그리드에 맞게 콘텐츠를 배치할 수 있습니다.
Baseliner를 설치한 후 주소 표시줄 옆에 나타나는 B 버튼을 클릭하면 그리드를 설정할 수 있는 메뉴가 나타납니다.
기본 설정은 위쪽 여백이 0픽셀, 선 사이 간격이 12픽셀, 선의 불투명도가 100%인 회색입니다. 이러한 값들을 변경하려면 해당 값 옆의 상자를 클릭하면 됩니다.
색상 상자를 클릭하면 표준 색상 선택기가 나타나서 그리드 선의 색상을 바꿀 수 있습니다. 간격, 패딩 및 불투명도 값은 각 항목 옆에 있는 상자에 사용자 정의 숫자를 입력하거나 위/아래 화살표를 사용하여 변경할 수 있습니다. 원하는 대로 그리드를 설정한 후에는 하단의 ‘적용’ 버튼을 클릭하여 변경 사항을 적용할 수 있습니다.
그리드 선은 현재 보고 있는 페이지에만 적용되며, 브라우저에서 열어 놓은 다른 페이지에는 영향을 주지 않습니다. 설정된 선들을 제거하고 싶다면 B 버튼을 다시 클릭한 후 하단의 ‘제거’ 버튼을 누르면 됩니다.
Baseliner는 매우 효과적으로 작동합니다. 특히 그리드의 색상 조절 기능과 상단 패딩 설정은 이 확장 프로그램을 더욱 유용하게 만듭니다. 다만, 수직선도 지원했으면 하는 아쉬움이 있습니다.