2장 웹 슬라이싱
웹퍼블리싱
웹사이트 개발에서 디자인 작업은 '기획-계획-콘텐츠개발-웹퍼블리싱'으로 구성됩니다.
이중 마지막 단계인 웹퍼블리싱은 다시 슬라이싱과 코딩으로 구분됩니다. 콘텐츠개발 단계의 결과물인 이미지를 자르는 작업을 슬라이싱(Slicing)이라고 부르며, 잘라놓은 이미지를 html 로 엮어서 웹사이트의 콘텐츠 페이지 한장 한장을 만드는 작업을 코딩(Coding)이라고 합니다. 한마디로 웹퍼블리싱은 자르고, 재조립하는 것입니다.
콘텐츠개발 단계에서 만들어진 플래시 또는 비디오 콘텐츠를 페이지에 추가하는 작업도 코딩에 포함됩니다. 실제로 웹 사이트 개발 과정에서 가장 많은 시간이 소요되며, 이 단계의 시간을 절약하는 것이 프로젝트의 효율성을 높이는데 많은 기여를 합니다. 일반적으로 슬라이싱은 포토샵을, 코딩은 드림위버를 사용합니다.
1. 슬라이싱
웹 슬라이싱을 하기 위해서는 크롭과 슬라이스 툴을 알아야 합니다. 크롭은 큰 이미지에서 일정 부분을 잘라내는 기능입니다. 원본 이미지에서 원하는 부분을
선택하고, 선택된 부분을 클릭하면 선택된 작은 이미지가 만들어집니다. 그리고 'Save As'라는 메뉴를 이용해서 jpeg 나 gif 로 저장하면 됩니다. 포토샵 좌측의 툴상자의 상단에 격자모양 아이콘을 누르면 크롭을 사용할 수 있습니다. Save As 는 포토삽 상단의 'File'메뉴의 하위 메뉴에 있습니다. Save As 는 저장할 이미지의 종류와 옵션, 파일이름 선택하는 창으로 나타납니다. 한 페이지에는 작게는 몇개, 많게는 수십개의 이미지가 있으므로 원본 이미지를 다시 열어서 필요한 부분을 크롭해서 저장하는 작업을 반복하면 됩니다. 웹개발 초창기에는 실제로 크롭을 이용해서 작업했습니다.
요즘에도 페이지를 수정할 때 일부 변경된 이미지만 간단히 자르는 용도로 크롭 기능을 사용합니다. 하지만 요즘에는 웹 슬라이싱 작업에 크롭을 많이 사용하지 않습니다. 슬라이슬 툴은 이미지를 한번에 여러 조각으로 저장하는 기능입니다.
슬라이스는 선택한 부분을 파란 실선으로 표기만 합니다. 선택한 부분은 각각 숫자가 순서대로 함께 표기됩니다. 저장은 'Save as Web'메뉴를 이용합니다. Save as Web 은 이미지 미리보기와 파일 옵션으로 구성됩니다. 'Save'를 누르면 저장될 폴더 위치를 선택하는 화면이 표시되며, '확인'을 누르면 파일을 일괄 저장합니다. 해당 폴더를 열어보면 'images'라는 폴더가 생겨있고, 폴더 안에 이미지가 번호 순서로 저장되어 있습니다. 크롭을 사용했다면 선택영역 수 만큼 번거로운 절차를 반복해야 됐었던 것을 간단하게 슬라이스 툴과 Save for Web 메뉴를 통해서 일괄 처리할 수 있습니다.
슬라이스 툴에는 상황에 따라 필요한 많은 기능이 포함되어 있으며, Save as Web 에는 수 많은 옵션이 있 습니다. 이번 장에서는 슬라이싱의 개념적인 내용만 다루므로 이런 세부적인 내용은 뒷 장에서 설명하겠습니다.
1-1. 사각형 이미지
왜 이미지는 네모나게 자를까요? 동그랗거나 세모나면 안될까요? 컴퓨터는 이미지를 직사각형의 배열 형태로 인식합니다. 따라서 컴퓨터가 인식하는 이미지는 직사각형인 것입니다. 이러한 이미지 처리방식을 비트맵이라고 부릅니다. 비트맵은 모눈종이 같은 칸에 색을 순서대로 넣는 것입니다. 그런데 컴퓨터 화면을 보면 윈도우 창의 모서리는 둥글고, 시작버튼도 네모나지 않습니다. 거기다 아이콘은 모양이 각양각색입니다.
어떻게 된 것일까요? 색상 데이터 중에 투명이라는 데이터도 있습니다. 따라서 투명 값이 든 칸은 눈에 보이지 않으니 없는 것처럼 보이는 것입니다. 그런데 GIF 형식의 이미지는 투명한 데이터 값을 지원하지만, 인터넷에서 가장 많이 사용하는 JPG 형식의 이미지는 지원하지 않습니다. 모든 이미지를 GIF 로 쓰면 혼란스럽지 않아서 좋을 텐데 왜 JPG 를 사용할까요? 이유는 GIF 이미지가 256 개의 색상 밖에 사용할 수가 없어서 이미지가 자연스럽지 못해서 사진과 같은 이미지들을 처리하지 못하기 때문입니다.
그런데 투명 값도 지원하고, 색상도 총 천연색을 지원하는 이미지 형식이 있습니다.
PNG 라는 이미지 형식입니다. 원래 웹 표준에는 PNG 를 지원하도록 정의되어 있습니다. 그런데 일부 브라우저가 표준을 따르지 않아서 웹에서 PNG 가 인식되지 않거나 인식 되더라도 투명이 인식되지 않는 경우가 있습니다. 그래서 투명이 필요한 경우에 대부분의 사이트가 GIF 를 사용합니다. 그런데 플래쉬는 PNG 를 잘 지원합니다.
따라서 플래쉬에 투명이 필요한 경우 PNG 이미지를 사용합니다. 정리하자면, 사진과 같은 이미지는 JPG, 투명이 필요한 경우는 GIF 그리고 플래쉬는 PNG 를 사용하면 됩니다. 다만, 앞으로는 표준을 따르지 않는 브라우저가 줄어들 것이므로 PNG 만 사용해도 문제가 없을 때가 올 것입니다.
1-2. 가이드라인
디자인된 웹 페이지 이미지를 자를 때, 어디를 어떻게 나누면 좋을지 파악하기가 쉽지 않습니다. 또 정교하게 자르는 것도 어렵습니다. 이럴 때 선을 그어 보면서 어디를 어 떻게 나누면 좋을지 분석하기 편리하고, 정교하게 자르는데도 도움이 됩니다. 이런 이 유로 가이드 라인이라는 기능을 사용하게 됩니다. 가이드 라인은 말 그대로 가이드해 주는 선을 의미합니다. 이 선은 화면에 표기되지만 이미지에 영향은 미치지 않고 이미 지를 편집할 때 도움을 주는 선입니다. 포토샵에서 제공하는 가이드 라인을 만드는 방 법은 두 가지가 있습니다. 첫번째 방법은 이미지 위에 눈금자를 드래그하는 방법입니 다. 이미지 창 상단 또는 좌측에 위치한 눈금자를 간단히 이미지 위에 드래그해서 원 하는 위치에 놓으면 선이 하나 만들어 집니다. 그래서 여기도 지금 정확하게 안 맞는 것이 눈에 띄는데요, 이렇게 원하는 부분에 가이드라인을 정교하게 놓아주는 것이 필 요합니다. 눈금자를 이용할 때는 픽셀을 정확하게 놓는 것이 어렵습니다. 그래서 가이 드라인을 정교하게 만들기 위해서 이미지를 확대해서 작업합니다. 두번째 방법은 입력 창을 이용하는 방법입니다. ‘상단메뉴 > View > New Guide Line’을 선택하면 팝업 창이 뜹니다. 가로(horizon), 세로(Vertical)을 선택하고, 픽셀 값을 넣으면 됩니다. 이 값들은 디자인 가이드 라인 중 레이아웃 시스템(Layout System)에 명시되어 있는 것을 사용합 니다. 이 디자인 가이드 라인이 없다면, 힘들더라도 첫번째 방법으로 가이드 라인을 만 들 수 밖에 없습니다.
1-3. Snap옵션
가이드라인과 슬라이스를 쓸 때 한 픽셀 단위를 마우스로 정교하게 움직이는 것은 쉽 지 않습니다. 이런 경우 Snap옵션이 도움이 됩니다. Snap은 마우스가 이미지나 가이드 라인 가까이 다가가면 자석처럼 딱 하고 붙어버리는 기능입니다. Snap을 실행하는 방 법은 ‘상단메뉴 > view > snap’을 누르는 것입니다. 여기에는 세부 옵션으로 Slice, Guide Line, Documents bounds 등이 있습니다. 그런데 항상 Snap기능을 켜 놓으면 좋 지만 가이드 라인이 인접해 있으면 원치 않는 가이드라인에 붙어버려서 곤란한 경우가 많습니다. 따라서 실제 작업에서는 Snap을 켰다가 껐다가 반복하게 됩니다. 이럴 때는 단축키 ‘Ctrl+Shift+세미콜론(;)’를 사용하면 편리합니다. Snap은 토글(Toggle) 방식으로 한번 누르면 작동하고, 다시 한번 누르면 작동하지 않습니다.
1-4. 유용한 TIP
눈금자가 보이지 않는다면, 단축키 ‘Ctrl + R’을 누르거나 ‘상단메뉴 > View > Ruler’를 선택하면 됩니다. 이미지를 확대할 때는 단축키 ‘Ctrl + 더하기(+)’를 누르고, 축소는
‘Ctrl + 빼기(-)’를 누르면 편리합니다. ‘도구메뉴 하단의 돋보기 모양 아이콘’을 선택한 다음 이미지를 마우스로 이미지를 클릭해도 확대가 됩니다. 축소는 ‘Alt + 클릭’하면 됩 니다. 그리고 이미지를 확대해서 화면이 좁아 작업하기 쉽지 않을 때는 이미지 창을 전체 크기로 확대를 해서 사용하면 됩니다. 그래도 창이 좁을 때는 탭 버튼을 눌러 모 든 도구박스와 패널을 없애는 방법이 있습니다.
가이드라인을 잘못 만들었을 때는 도구상자 상단의 화살표 아이콘인 Move를 이용하면 됩니다. Move로 가이드라인을 드래그가 가능 합니다.
실습) ‘크롭 툴’로 이미지 슬라이싱
1. 크롭툴(Crop Tool) 선택
2. 이미지 듀플리케이트(Image Duplicate)
3. 학교로고 부분선택
4. 크롭된 학교로고 이미지
5. 학교로고 이미지 저장
6. 학교로고 이미지 저장하기
7. GIF 저장 옵션
8. 저장확인
9. 이미지 듀플리케이트
10. 첫번째 메뉴 부분선택(학교소개)
11. 크롭된 첫번째 메뉴 이미지 저장
12. JPG 저장옵션
13. 메인 이미지 부분선택
14. 메인 이미지 저장
15. 듀플리케이트 하지 않아서 발생한 문제
