적용버전 : XE Ver 1.5 or higher 웹사이트 로고 설정하기

웹사이트 로고 꾸미기

로고타이프(Logotype)란?

로고(Logo)는 상품이나 단체를 대표할 수 있는 시각적인 디자인을 말하는데, 본래 로고는 글자로만 디자인을 했기 때문에 로고타이프(Logotype)나 워드 마크(Word Mark)로 불리기도 했지만 점차 그래픽 디자인과 접목되어 타이포그래피(Typography)라는 전문 분야로 발전하게 됩니다. 로고의 가장 큰 목적은 소비자들이 상품을 잘 인식하도록 하거나 공공의 목적으로 정책 등을 널리 알리는 데에 필요한 광고 또는 홍보의 효과를 높이기 위해서 그 이름을 시각적으로 구성하고 표현하는 디자인 기법입니다.

웹디자인에서 로고는 방문자로 하여금 현재 사이트의 운영 목적과 정보를 가장 먼저 시각적으로 제공하도록 돕는 중요한 역할을 담당하기도 하고, 사이트 내 하위 페이지 영역에서 가장 첫 페이지(HOME)으로 다시 되돌아 올 수 있는 링크를 제공하기도 합니다. 대부분의 방문자들은 사이트 내에서 길을 잃었을 때 로고를 클릭한답니다.

image


로고 문자 설정하기

XE 코어에서는 별도의 로고 이미지가 없더라도 사이트의 이름만 입력해 주면 로고가 들어갈 자리에 로고 문자로 출력할 수 있습니다. 또한 로고 이미지가 준비되어 있다면 이미지를 등록하고 로고로 사용할 수도 있지요. 이러한 설정은 해당 레이아웃에서 옵션으로 제공합니다. 만약 레이아웃에서 로고 입력을 위한 옵션이 없다면 별도의 작업이 필요합니다.

XE 기본 공식 레이아웃은 로고 문자 또는 로고 이미지를 등록하고 사용할 수 있도록 옵션 항목을 제공하고 있습니다.
우선 아래 내용을 따라하면서 로고 문자를 입력하세요.

  • image▲ 관리자 메뉴의 [확장기능] > [설치된 레이아웃]을 클릭합니다.
  • image▲ [XE 공식 사이트 레이아웃]을 클릭합니다. 자유롭게 선택하세요.
  • image▲ [레이아웃 설정]을 클릭합니다.
  • image▲ [로고이미지 대체문자] 입력란에 사이트의 이름을 입력하고 홈페이지의 주소를 입력합니다.
  • image▲ 입력을 완료하고 하단에 있는 [저장] 버튼을 클릭합니다.
  • image▲ 레이아웃 헤더(header) 영역에 로고 문자가 출력되고 클릭했을 경우 시작 모듈로 이동하게 됩니다.

로고 이미지 설정하기 - PNG 파일

포토샵에서 로고로 사용할 이미지를 준비합니다. 아래 그림과 같이 사이트의 이름을 그림 문자 폰트로 변경하고 검정 배경을 지운 후 투명 PNG(이동식 네트워크 그래픽) 파일로 저장합니다.

image

image

위 그림과 같이 PNG 파일을 확대해 보면 투명도가 유지되는 것을 알 수 있습니다. 대부분의 표준화 된 웹브라우저는 PNG 파일의 투명도를 웹페이지에서 그대로 유지시켜 줍니다. 따라서 로고 이미지를 만들때도 PNG 파일을 이용하면 좋습니다.

image

로고 이미지가 준비되면 [레이아웃] 설정에서 [로고이미지] 입력 항목에 찾아보기를 클릭하여 준비된 PNG 파일을 업로드하고 하단의 [저장] 버튼을 클릭하여 변경된 내용을 저장하세요.

image

로고이미지가 정상적으로 출력 되었습니다. 로고이미지의 위치를 수정하려면 레이아웃의 CSS 스타일 설정에서 조정해야 합니다.
기본 레이아웃은 로고이미지의 세로 높이를 23px 투명이미지로 권장합니다.
하지만 익스플로러(IE)에서는 PNG 형식의 알파채널 투명도를 지원해 주지 않습니다.


로고 이미지 설정하기 - GIF 파일

익스플로러(IE) 웹브라우저에서 PNG 형식의 이미지 파일은 아래와 같이 투명도가 필요한 영역의 이미지 배경이 투명하게 표시되지 않고 회색으로 나타납니다. Microsoft 고객지원센터는 이 부분에 대해 AlphaImageLoader 필터를 적용하면 투명 PNG 파일을 사용할 수 있다고 권고합니다.

image

XE 코어 1.4 버전까지는 사이트에서 PNG 파일을 사용할 수 있도록 AlphaImageLoader 필터를 적용한 iePngFix.htc 파일의 도움으로 PNG 형식의 이미지를 지원하였습니다. 하지만 1.5 버전에서는 더이상 지원하지 않습니다. XE개발팀이 무겁다고 판단하고 제외시킨 듯 합니다.

TIP - XE 코어 1.4.5.10 버전까지는 코어 내부에 iePngFix.htc 파일을 포함, 적용하고 있기 때문에 이미지 태그 안에서 인라인 형식으로 class="iePngFix" 만 추가하면 익스플로러 하위 버전에 대한 투명처리를 지원합니다.

GIF(Graphics Interchange Format) 파일도 투명도를 지원합니다. 따라서 약간의 요령을 추가하면 GIF 이미지 파일을 활용한 로고이미지를 얼마든지 만들고 사용할 수 있게 됩니다. 포토샵에서 로고 작업 파일을 열고 웹이미지로 저장하기(Save For Web...)를 이용해 GIF 파일로 저장한 후 같은 방법으로 로고이미지를 등록하세요. 이전 PNG 파일은 삭제 후 GIF 파일을 등록합니다.

image

사이트에서 확인해 보면 위 그림과 같이 매우 조잡해 보이는 로고이미지를 확인할 수 있습니다. 왜냐하면 GIF 파일은 최대 256가지의 색상으로만 이미지를 만들 수 있고 투명도(Alpha)는 255와 0만 지원합니다. 즉 1픽셀 단위에서 투명도는 지원하지만 색상값이 있거나(255, 불투명) 없으면 전혀 없는(0, 투명) 색상값만 지원한다는 뜻입니다. 다시말해서 GIF 이미지는 PNG와 같이 알파채널의 중간 단계를 표현하지 못한다는 뜻입니다.

아래 그림은 포토샵에서 Matte를 활용하여 픽셀 단위의 GIF 이미지를 만든 결과물에 대한 예입니다. A와 같이 불투명도 100% 색상값을 갖는 원본 이미지는 결과물에서도 투명도와 색상값을 그대로 유지합니다. 다만 GIF 형식이 표현할 수 없는 색상값은 256 색상값(웹 안전 색상)의 범위로 변경되어 저장됩니다. 따라서 그라데이션 효과가 적용된 이미지는 색수차에 의해 물결무늬가 나타날 수 있습니다.

image

반면 B와 C는 원본 이미지의 투명도를 50%로 설정하고 저장하였을때 Matte의 역할 때문에 큰 차이점이 발생합니다. Matte는 영화의 특수효과 촬영기법에서 유래된 개념으로 2장의 유리판을 겹쳐서 세워두고 서로 다른 이미지를 비추어 촬영하면 특수한 화면효과를 얻을 수 있는 장치를 말합니다.

포토샵도 원본 이미지를 GIF 형식으로 저장할 때 50% 투명도를 지원할 수 없었기 때문에 가상의 배경(Matte)과 겹쳐서 색을 혼합하여 중간 단계의 색상값을 찾고 투명도(Alpha)를 255로 채워버립니다. 결과적으로 투명한 영역은 계속 투명하지만 원본 이미지의 색상 영역은 혼합 색상값으로 불투명해 지는 것이죠. B는 흰색을 배경으로 사용했을때 혼합 색상값으로, C는 검정색을 배경으로 혼합 색상값을 찾았기 때문에 다른 결과물을 얻게 된 것입니다.

따라서 위 XESCHOOL 로고 이미지(GIF)는 투명도가 필요한 문자의 픽셀 영역이 흰색 배경과 혼합되어 흰색+흰색으로 채워졌기 때문에 문자의 가장자리가 매우 불투명한 픽셀들로 조잡한 결과물이 된 것입니다. 이러한 문제를 해결하는 방법은 매우 간단합니다. 로고가 위치하는 레이아웃의 배경 색상값을 포토샵에서 GIF 이미지를 만들때 가상으로 혼합하는 Matte의 색상값으로 설정하면 불투명하지만 로고가 위치하는 배경과 자연스럽게 어울릴 수 있는 결과물(GIF)을 만들수 있게 됩니다.

image

포토샵에서 스포이드 툴을 이용해 로고이미지가 위치할 영역의 색상값을 추출하세요. 그라데이션 효과가 있다면 중간 단계의 색상값을 찾습니다. 기본 레이아웃에서는 #4B4B4B의 색상값을 찾았습니다. 만약 레이아웃을 직접 디자인하였다면 이미 알고 있는 배경 색상값을 Matte 색상값으로 사용합니다.


image

로고 작업 파일을 열고 웹이미지로 저장하기(Save For Web...)를 이용해 GIF 파일로 저장하기 전 우측 Matte 색상 설정를 클릭합니다.


image

배경에서 추출한 색상값을 입력하고 [OK] 버튼을 클릭합니다.


image

최종적으로 [저장] 버튼을 클릭하고 로고이미지를 GIF 파일로 저장합니다. 미리보기 화면에서 투명도가 필요한 문자의 픽셀이 Matte의 색상과 혼합되어 최적화된 것을 확인할 수 있습니다.


image

[레이아웃 설정]에서 Matte 처리된 로고이미지를 입력하면 위 그림과 같이 배경과 잘 어울리는 깔끔한 로고이미지가 출력되고, PNG 형식의 파일과 동일한 결과를 얻을 수 있습니다. 익스플로러에서도 위와 같은 GIF 파일의 투명도는 그대로 표현됩니다.

TIP - PNG 형식의 이미지 파일이라도 전체 픽셀에서 색상값이 불투명(255)하다면 익스플로러에서 정상적으로 표현합니다. 또한 비표준 웹브라우저의 이용이 점차 줄어들고 있기 때문에 위 내용을 적절히 혼합하여 활용한다면 무거운 스크립트의 도움 없이도 웹사이트를 쾌적하게 운영할 수 있습니다.