3. Output Setting
웹 페이지 소스인 HTML의 양식은 사람마다 또 회사마다 다를 수 있습니다. 그런데 지 금까지 제 경험을 돌아보면 태그의 이름은 대문자로, 속성은 소문자로 설정하는 것을 많은 프로그래머 들이 선호합니다. 아마도 태그만 한눈에 들어오기 때문일 것입니다.
이런 이유로 프로그래머의 가독성을 기준으로 Output Settings설정 값을 설명하겠습니 다. Output Settings은 크게 HTML, Slices, Background, Saving Files로 구성됩니다.
3-1. HTML Formatting Settings
HTML 중에 포맷 설정 값을 살펴보면 Tags Case와 Attribute Case가 있습니다. 대소문 자 처리방법으로 옵션은 3가지이며, 각각 모두 대문자, 모두 소문자, 첫 글자만 대문자 를 뜻합니다. 그 다음 Indent는 들여쓰기에 관한 것입니다. 옵션으로는 Tab, None, 1, 2, 4, 5, 8 spaces가 있습니다. 각각 탭, 없음, 1칸~8칸 들여쓰기를 뜻합니다. 마지막으로 Line Ending이 있습니다. 옵션으로는 Mac, Win, Unix가 있습니다. Tags는 모두 대문자 옵션을, Attribute는 모두 소문자를 선택합니다. Tags는 모두 대문자 옵션을, Attribute는 모두 소문자 옵션을, Indent는 Tab 옵션을, Line Ending은 Win을 선택할 것을 권합니다.
3-2. Indent Settings
잠깐 Indent에 대해서 조금 더 설명하고자 합니다. HTML에는 서로 상하 관계, 포함하
고-포함되는 관계를 가진 태그들이 존재합니다. 또한 이런 태그는 쌍으로 존재합니다.
예를 들어서 <TABLE>은 표를, <TR>은 한줄을, <TD>은 한칸을 의미합니다. 따라서
<TR>은 반드시 <TABLE> 다음에 나옵니다. 또한 <TABLE>은 반드시 </TABLE>로 쌍을 이루어 존재해야 합니다. 실제로 </TABLE>가 없으면 표가 화면에 표시되지 않거나 깨 져서 표시됩니다. 그리고 표 안에 표가 들어갈 수도 있습니다. 이 때 </TABLE>가 안에 표인지, 밖의 표의 끝인지 한눈에 파악할 수 없습니다. 따라서 <Table>안에 태그는 Tab으로 한칸 들여쓰고, </TABLE>이 닫히면 그 이후부터는 한칸 내여쓴다면 지금 태그 가 어느 표에 속한 것인지 쉽게 파악할 수 있습니다. 이런 약속을 Indent라고 하는 것 입니다. 그런데 Indent 옵션으로 Tab을 선택한 이유는 프로그래머가 사용하는 HTML 편집기에는 옵션 값으로 Tab을 몇 칸 띄울 것인지 설정하는 기능이 있습니다. 따라서 자신이 좋아하는 값을 설정해 놓으면, 항상 그 값으로 화면에 표기됩니다. 따라서 고정 된 스페이스보다 Tab으로 설정하면 프로그래머 입장에서 불편함이 줄어듭니다.
3-3. HTML Coding Settings
HTML Coding 옵션에 대해서 알아보겠습니다. 모든 옵션을 선택하는 것이 표준입니다.
다만, Close All Tags는 브라우저에 따라서 예상치 않게 표시되는 경우가 있습니다. 따라 서 Close All Tags를 제외한 나머지 4개만 선택하는 것을 권합니다. 각각의 옵션을 간단 히 설명하자면, Include Comments는 HTML 소스에 주석의 포함여부입니다. 보통은 어
느 포토샵 파일로 만든 HTML인지에 관한 정보가 포함됩니다. 그 다음 Always Quote Attributes는 속성 값을 큰 따옴표로 씌우는 것입니다. 그 다음 Always Add Alt Attribute는 이미지가 표기되지 않을 때 화면에 표기할 내용을 포함하겠다는 옵션입니 다. 이미지 파일이름만으로 부족한 이미지의 의미를 전달할 수 있어 사용합니다. 예를 들어 left_menu_01.jpg로는 뜻을 알 수 없지만 “학교소개”, “전공안내”와 같은 주석이 포함되면 훨씬 더 명료하기 때문입니다. Close All Tags와 Include Zero Margins on Body Tag는 자세한 설명을 드리지 않겠습니다.
3-4. Slices Setting
Slices부분에는 이미지를 어떤 방식으로 자를 것인지 결정하는 설정 값입니다. 옵션은 Table방식과 CSS방식 두가지가 있습니다. Table방식은 이해하고 관리하기 편리한 장점 이 있습니다. CSS방식은 다양한 기기의 화면구성에 대응하기 좋은 장점이 있습니다. 다 만, Table방식이 배우기 용이한 장점이 있어서 이후에 설명은 Table방식만 설명하겠습 니다. 여기서는 우리가 html을 모른다는 전제에서 수업하는 것이기에 더 깊은 설명은 하지 않겠습니다. 그냥 설정 값을 외우면 됩니다. Empty Cells은 NoWrap, Td W&H로, TD W&H는 Auto가 아니라 Always, Space Cells은 Never로 세팅하기 바랍니다.
3-5. Background & Saving Files Settings
Background와 Saving Files는 기본 값 그대로 사용합니다. 다만, 이미지 파일이 저장될 폴더 이름은 회사마다 다른 경우가 있습니다. 일반적으로는 images폴더를 사용하지만 가끔 img 또는 대문자로 IMG를 고집하는 경우도 있습니다. 이런 경우 Saving Files 옵 션 하단에 Put Images in Folder에서 수정하기 바랍니다.
마지막으로 이 설정 값은 저장하고 불러올 수 있습니다. 회사 안에 전체 디자이너가
동일하게 사용하거나, 여러 컴퓨터에 동일하게 설정하고 싶은 경우에 필요한 기능입니 다. 저장된 설정 파일은 iros확장자를 가집니다. 이 파일을 자료실에 올려 놓으면 유용 하게 사용할 수 있습니다.
자 그렇고요. 그래서 지금 여기에 소스를 일단 놔두구요. 이 소스와 그 다음 실제로 우 리가 지금 이렇게 Edit Output Settings이라는 것을 통해서 지금 새로 셋팅한 이 소스 를 2개를 비교해 보도록 할게요.
3-6. Spacer Cells
포토샵의 Save for web에는 Spacer Cells이 기본으로 포함되어 있습니다. 자동 생성된 HTML 소스 제일 하단에 높이 1 pixel의 빈 이미지가 자리를 잡고 있습니다. 이것은 테 이블이 깨져보이는 것을 막기 위한 Tip입니다. 그런데 프로그램을 작성하면 줄이나 칸 이 늘어나거나 줄이는 경우가 있습니다. 이 경우 Spacer Cells 때문에 표 전체가 찌그
러집니다. 따라서 프로그래머에게는 아주 귀찮은 존재입니다. 그리고 프로그래머와 디 자이너가 가장 많이 싸우는 문제입니다. 프로그래머는 이 테이블 하나 수정했을 뿐인 데 화면 전체가 깨진다. HTML을 어떻게 만든거냐 불평합니다. 디자이너 입장에서는 처 음에는 이상이 없었고 프로그래머가 소스를 수정해서 생긴 문제입니다. 그런데 누구의 잘못이라고 책임을 따지기 이전에 이 문제는 발생할 것이고 누군가는 해결해야 합니다.
따라서 처음부터 문제가 생기지 않도록 만들어야 합니다. 따라서 Spacer Cells은 사용 하지 않는 것을 권장합니다. 마지막으로 HTML이 깨져서 의도하지 않는 모양으로 표시 될 때 어떻게 문제를 해결할 것인가라는 것이 중요합니다. 이 문제를 근본적으로 해결 하기 위해서 HTML을 부분별로 나눠서 생성하고, 다시 조합하는 기법을 사용합니다. 이 기법은 뒷장에 자세히 설명하겠습니다.
<=
4. Slice Tools
앞장에서 사용해본 슬라이스 툴의 세부 옵션에 대해서 알아보고, 슬라이스 된 이미지 를 선택하기 위한 슬라이스 셀렉트 툴에 대해서도 알아 보겠습니다. 설명에 들어가기 에 앞서 두가지 알아야 할 것이 있습니다. 첫번째는 도구박스가 숨은 툴을 가지고 있 다는 것입니다. 도구박스의 각 툴을 마우스로 길게 누르고 있으면 각 툴에 따른 숨은 툴이 표시됩니다. 슬라이스 툴 역시 숨어 툴로 슬라이스 셀렉트 툴을 가지고 있습니다.
그리고 CS4버전부터는 크롭툴이 숨은 툴로 슬라이스 툴과 슬라이스 셀렉트 툴을 가지 고 있습니다. CS4가 처음 나왔을 때, 저는 슬라이스 툴이 보이지 않아서 없어진 것으로 오해했었습니다.
두번째는 도구박스의 각 툴이 옵션을 가지고 있다는 것입니다. 이 옵션은 상단메뉴 바 로 아래에 있는 툴 옵션 패널에 표시됩니다. 또 툴 옵션 패널의 내용은 선택된 툴에 따라서 바뀝니다. 슬라이스 툴은 슬라이스의 모양과 크기에 관한 내용이 툴 옵션 패널 에 표시됩니다. 그럼 이제 슬라이스 툴과 슬라이스 셀렉트 툴의 옵션에 대해서 알아보 겠습니다.
4-1. Slice Tool Option
슬라이스 툴 옵션 패널은 네 부분으로 구성되어 있습니다. 첫째는 현재 선택한 툴을 표시합니다. 둘째는 슬라이스 툴의 형태를 선택하는 것으로 세가지 옵션 - Normal, Fixed Aspect Ratio, Fixed Size를 가집니다. Normal은 일반적인 사용법으로, 마우스로 드 래그해서 슬라이스를 나누는 것 입니다. Fixed Aspect Ratio는 비율로 슬라이스를 나누 는 것이고, Fixed Size은 픽셀 단위로 슬라이스를 나누는 것입니다. 세번째는 넓이와 높 이의 비율 또는 픽셀 값을 입력하는 창입니다. 마지막은 Slices From Guides 버튼입니 다. 이는 가이드 라인 기준으로 자동 슬라이스를 나누는 기능입니다.
대부분 Slice Tool은 Normal 옵션 상태로 사용하게 됩니다. 그런데 메뉴를 자르거나 게 시판을 만드는 경우와 같이 일정한 크기로 동일하게 슬라이스를 나눌 때는 Fixed Size 를 사용하면 편리합니다. 반면에 Fixed Aspect Ratio 옵션과 Slices From Guides 버튼은 아주 특별한 경우가 아니면 거의 사용하지 않습니다.
4-2. Slice Select Tool Option
슬라이스 셀렉트 툴 옵션 패널은 6부분으로 구성되어 있습니다. 첫째는 현재 선택한 툴을 표시합니다. 둘째는 슬라이스 레이어 순서를 정하는 툴로 네개의 아이콘이 있습 니다. 그 다음, 셋째부터 여섯째까지는 버튼으로 슬라이스 옵션창 보기 버튼, 슬라이스 생성 버튼, 슬라이스 분할 버튼, 자동 슬라이스 숨김 버튼입니다. 그럼 각 기능에 대해 서 좀더 자세히 알아보겠습니다.
먼저 슬라이스 레이어 순서를 정하는 것에 대해서 설명을 드리겠습니다. 파워포인트를 써본 사람은 슬라이스 레이어를 쉽게 이해할 것입니다. 글자가 그림에 가려졌을 때, 그 림을 클릭해서 “맨 뒤로 보내기”를 누르면, 그림이 아래로 내려가며 글자가 보입니다.
이것과 동일하게 슬라이스도 레이어로 관리가 가능합니다. 일단, 이미 그려진 슬라이스 위에 슬라이스를 하나 더 그리면, 그에 맞추어 슬라이스들이 나누어지고, 또 번호도 다 시 매겨집니다. 그래서 흡사 기존에 슬라이스가 지워진 것처럼 보입니다. 그러나 사실 은 기존의 슬라이스 위에 새로운 슬라이스가 그려진 것입니다. 겹쳐진 슬라이스 층 하 나하나를 슬라이스 레이어라고 부릅니다. 슬라이스 셀렉트 툴의 옵션 패널의 두번째 영역에는 슬라이스 레이어의 순서를 정렬하는 아이콘 네 개가 있습니다. 첫 번째 것은
“제일 위로 보내기”, 마지막 것은 “제일 아래로 보내기”, 가운데 두 개는 각각 “한 칸 위로 보내기”, “한 칸 아래로 보내기”입니다. 이 기능은 아주 유용한 것으로, 어떤 용도 로 활용할 수 있는지는 뒷 장에 자세히 설명하겠습니다.
슬라이스 셀렉트 툴의 옵션 패널의 세번째에 있는 버튼은 슬라이스 옵션 창을 띄우는 것으로 지금 우리가 웹 슬라이싱에 대해서 공부하는 것 중에 가장 중요하고, 또 내용 도 많기 때문에 뒤에서 별도로 설명하겠습니다. 네번째는 프롬프트 투 유저 슬라이스 버튼입니다. 슬라이스를 하나 그리면 그 주위에 여러 개의 빈 칸들이 생깁니다. 그 빈 칸 중에 슬라이스로 또 그려야 할 것이 있다면, 그냥 선택하고 이 버튼을 누르면 슬라 이스로 변합니다. 예를 들어 표가 가로 3칸, 세로 3칸으로 나누어야 한다면, 정 가운데 하나만 그리고, 주위의 8개는 이 버튼으로 생성하면 아주 빠르고 편리할 것입니다.
다섯번째는 디바이드 슬라이스 버튼입니다. 동일한 크기로 여러 슬라이스를 그려야 할 때 유용한 기능입니다. 일단 여러 슬라이스로 나뉠 큰 슬라이스 하나를 그립니다. 그리 고 이 버튼을 누르면 창이 뜹니다. 이 창에는 horizontally Divide숫자 입력창과 Vertically Divide 숫자 입력창이 있습니다. 이름 그대로 horizontally는 세로 방향으로, Vertically는 가로 방향으로 입력된 숫자만큼 슬라이스를 나눕니다. 메뉴를 만들거나, 게 시판을 만들 때 아주 유용한 기능입니다.
마지막으로 하이드 오토 슬라이시스 버튼입니다. 슬라이스를 생성하지 않은 빈칸들을 숨기는 기능입니다. 우리가 만든 슬라이스를 한 눈에 명확하게 볼 수 있습니다. 다만, 이런 경우 보조선 역할을 해주던 빈킨이 없어져서 실수할 수 도 있습니다. 따라서 보 통은 쇼 오토 슬라이시스 상태로 작업하고, 결과를 확인할 때만 사용하는 것을 권합니 다.
4-3. Slice Options Window
슬라이스 옵션스 창은 디자이너가 HTML을 몰라도 HTML을 편하게 만들 수 있도록 도 와주는데 중요한 기능이 있습니다. 또한, Save for Web으로 저장될 HTML이 진짜 웹 페 이지로 작동하게 만들어주는 기능도 있습니다. 먼저, 슬라이스 옵션스 창은 앞에서 배 운 슬라이스 셀렉트 툴로 한 개의 슬라이스를 선택하고, 옵션 패널의 세번째에 있는
“Slice Options…”버튼을 누르면 창이 표시됩니다. 슬라이스 옵션스 창에는 크게 두개의 영역 – Slice Type, Dimensions이 있습니다. 그런데, Dimensions는 이미지의 위치와 크 기에 관한 정보를 표기하는 것으로 실제로 수정할 일은 거의 없습니다. 그럼 Slice Type에 대해서 설명하겠습니다.
Slice Type에는 두 가지 옵션인 No Image와 Image가 있습니다. 먼저, No Image 옵션은 이미지로 생성하지 않는 슬라이스를 설정하는 것으로, 두 가지 목적으로 사용합니다.
첫째는 페이지의 빈 곳을 이미지를 생성하지 않도록 설정해서, 웹 페이지의 전체 용량 은 줄이고, 로딩 속도는 높이는 것입니다. 두번째는 이미지를 텍스트로 대체하는 것입 니다. 게시판 목록과 같이 텍스트로 생성되어야 하는 슬라이스는 No Image로 설정하 고, Text Displayed in Cell에 내용을 입력하면 됩니다. 그 다음 Image 옵션은 대부분의
슬라이스를 설정하는 옵션입니다. 세부옵션은 5가지 입력창으로 구성되어 있으며, 첫째 는 이미지 파일의 이름을 입력하는 Name, 둘째는 마우스로 클릭하면 연결될 페이지의 주소를 입력하는 URL, 세번째는 연결될 페이지를 새 창이나 특정 프레임을 띄울 때 사 용하는 Target, 네번째는 마우스 커서를 이미지 위에 올리면 브라우저 상태 창에 표시 할 내용을 입력하는 Message Text, 마지막은 마우스 커서를 이미지 위에 올리면 풍선 도움말로 표시할 내용을 입력하는 Alt tag입니다. 이중 Name, URL, Alt tag옵션을 주로 사용하며, Target과 Message Text는 거의 사용하지 않습니다. 지금은 슬라이스 옵션스 창의 중요성을 알지 못할 것입니다. 그러나 뒷장에서 드림위버를 배우기 위해서 HTML 을 열어서 작업할 때는 “왜 이 부분을 이렇게 강조를 했는지” 알게 될 것입니다. 다시 말하지만, 슬라이스 옵션스 창에 얼마나 정성들여서 작업하느냐에 따라서 코딩, 프로그 래밍, 유지보수 과정에서 말할 수 없는 편리함이 생깁니다. 마지막으로 Image 옵션에 입력하는 Name, URL, Alt tag의 속성값은 기획문서 중에 Information Architecture에 명 시되어 있는 파일이름과 주소를 사용해야 합니다. 그렇지 않으면 향후에 큰 혼란이 생 깁니다. 또 간혹 Information Architecture가 없다면, 기획자에게 요구하기 바랍니다. 이 는 설계도와 같은 것으로 디자이너뿐 아니라 프로그래머에게도 꼭 필요한 문서이기 때 문입니다. 이상으로 슬라이스 툴에 대한 설명을 모두 마칩니다.
