[HTML]웹 퍼블리싱(Web Publilshing)

3일 정도 웹 페이지 하나를 직접 퍼블리싱해 보았다. 컴퓨터공학부 학생으로써 디자인적인 부분을 다룰 수 있는 기회가 많이 없었는데, JSP공부에 들어가기 전에 이런 퍼블리싱 경험도 큰 도움이 된다고 하여 진행해 보았고, 그 소감을 바탕으로 이 글을 작성한다.

웹 퍼블리싱(Web Publishing)

웹 퍼블리싱이란 웹 디자이너에 의해서 디자인된 웹 페이지를 HTML, CSS, Java Script를 통해 브라우저에서 나타날 수 있도록 웹 페이지화 하는 것이다.

내 생각에 퍼블리싱의 최고 목표는 디자이너의 의도를 잘 이해하여 웹 페이지를 시각적으로 보기좋게 표현하고, 프로그래머가 퍼블리싱 된 페이지를 가지고 프로그래밍을 하기에 편하게 제작하는 것이라고 생각한다.

한마디로 디자인과 프로그래밍의 연결고리가 주된 목적이다.

퍼블리싱에 필요한 기술

이미지 분석

우리가 퍼블리싱을 하려면 이미지 분석에 관한 지식을 어느정도는 알고 있어야 한다. 웹 디자이너가 디자인한 이미지형태의 웹 페이지를 바탕으로 모든 요소의 크기와 위치를 정확하게 파악한 뒤에 그 정보를 바탕으로 HTML과 CSS를 작성할 수 있으므로 이미지 분석 기술이 필요하다.

HTML(Hyper Text Markup Language)

HTML은 웹 페이지의 구조만을 정의한다. 따라서 디자인적인 요소를 제외하고, 어디에 어떤 내용이 들어가는지 태그로 명시해준다. 그리고 페이지의 제목, 페이지의 인코딩 방식과 같이 페이지의 전반적인 정보들을 명시한다. 건축물에 비유하자면 철근과 콘크리트와 같은 역할을 한다고 할 수 있다.

CSS(Cascading Style Sheet)

CSS는 웹 페이지의 디자인적인 요소들을 명시하는 역할을 한다. HTML이 철근과 콘크리트라면, CSS는 도색하고, 인테리어하는 과정으로 비유할 수 있겠다. 결국 CSS는 페이지의 글씨체, 블록요소의 배치, 배경색, 배경 등의 세밀한 디자인을 담당한다고 할 수 있다.

Java Script

HTML과 CSS만으로 웹 페이지는 충분히 작성될 수 있다. 하지만 우리는 페이지가 좀 더 화려하게 움직이길 원한다. 그래서 Java Script가 등장하게 되었다. 웹에 좀더 생동감을 불어넣어주는 역할을 한다. 로그인을 실패했을 때 알림창을 띄우거나, 서버의 도움없이 클라이언트에서 어떤 설정값을 바꾸고자 한다면, 이 기술을 사용해야 한다.

사용한 개발 도구

Photoshop

먼저 전반적인 웹 페이지의 구조를 잡기 위해서는 이미지를 정확하게 분석할 필요가 있다. 따라서 각 요소들의 크기와 위치를 정확하게 파악할 수 있다면 더할나위 없이 좋을 것이다. 이 기능을 정확하게 수행할 수 있는 대표적인 툴이 바로 포토샵이다. 안내선을 잘 잡아 놓으면 어떤 구조로 나누어야 하는지, 얼만큼의 너비로 나누어야 하는지 확실하게 알 수 있어서, 이 툴을 사용하였다.

여담이지만, 우분투에서도 사용할 수 있는 이미지 편집 툴인 Gimp가 있다. 포토샵보다 기능은 떨어지지만, 오픈소스라는 점과 기본 기능에 충실하다는 점에서 사용해볼만한 툴이다.

Visual Studio Code

HTML과 CSS를 작성할 때 많은 사람들이 코드 하이라이트 기능이 있는 가벼운 텍스트 편집기를 사용한다. 여러 텍스트 편집기를 찾다가 MS사에서 나온 Visual Studio Code를 발견하고 이를 사용해 보았다. 정말 편리한 점이 하나 있었다. 태그나 CSS를 입력할 때, 태그 또는 속성의 이름을 쓰고 [Tab]키를 눌러서 자동완성되는 기능이 있는데 이 기능이 정말 편리했다. 그리고 프로젝트 폴더를 설정하여, 전체 프로젝트를 관리하는 기능도 상당히 매력적이었다.

이 툴 이외에도 Sublime Text, Aptana Studio, phpstorm 등 여러 툴이 존재하므로 써보고 자신에게 맞는 것을 찾으면 좋을 것이다.

Chrome

개발도구라고 하기에는 모호한 부분이 있지만, 크롬에서는 개발자를 위한 요소검사 기능을 제공하여 편리한 기능을 제공하므로 개발도구에 넣었다. [F12]버튼을 누르면 현재 페이지의 요소들이 어떻게 배치되어있는지 상세하게 확인할 수 있다. 크롬 뿐만 아니라 대부분의 브라우저들도 이런 기능을 제공하고 있다. 브라우저는 HTML을 표현할 때 오류 메시지를 보여주지 않는다. 따라서 내가 작성한 HTML과 CSS가 실제로 어떻게 브라우저에서 표현되는지 수시로 확인하면서 작업해야 하므로 이 기능을 요긴하게 사용하였다.

퍼블리싱 중 힘들었던 부분

디자인의 표현

웹 퍼블리싱에 대해 모르고 있을 때는 그냥 단순히 HTML태그를 가지고 그림이랑 비슷하게 만들어 내는 작업인 줄 알았다. 하지만 진행해보니, 웹 디자이너가 디자인한 이미지 파일을 동일하게 표현하는 과정 자체가 상당히 어려운 작업이었다. 어떤 부분을 요소로 뽑아내서 표현할 것인지를 결정하는 것 부터, 각 요소들을 어떤 계층으로 표현할 것인지 결정하는 것도 상당히 어려운 작업이었다.

요소의 위치

요소들이 내가 생각하는 위치에 정확하게 위치시키는 것이 생각보다 굉장히 힘들었다. 어떤 경우에는 margin값이 동작하지 않고, 어떤 경우에는 padding값이 동작하지 않았다. 이는 블록요소와 인라인요소, 인라인-블록요소 등의 각 요소마다의 특징에 연관이 있던 부분이여서 이 부분을 확실하게 잡고갈 필요가 있었다.

참고

http://www.usingu.co.kr/