퍼블리싱

퍼블리싱

웹 퍼블리싱이란?

웹 퍼블리싱은 웹 디자이너가 만든 시각적 디자인을 웹 브라우저에서 실제 작동 가능한 웹 페이지로 구현하는 작업이다. HTML, CSS, JavaScript를 사용하여 뼈대를 잡고, 스타일을 적용하며, 동적 기능을 추가한다. 이를 전문적으로 담당하는 사람을 '웹 퍼블러셔'라고 부르며,디자이너와 프론트엔드 개발자 사이의 가교(다리) 역할 을 한다.

1. 웹 퍼블리싱 작업에 필요한 것

• HTML(뼈대)

<!doctype html>  <!-- HTML5 버전이 쓰임. HTML 버전마다 들어가는 마커가 다름 -->
<html>
  <head> <!-- head에는 제목, meta, css, js 적용 등 셋팅. 제목, 파비콘, 유니코드에 대한거, css 외부꺼를 뭘 가져올건지에 대해
웹페이지의 전반적인 셋팅 내용을 적어준다. -->
    <title>제목을 적어보자</title>  
  </head>
  <body><!--body에는 실질적인 코드가 들어간다 -->
    <p>Hello World!</p>
  </body>
  <footer> <!-- 이용약관, 저작권 등에 대한 부분. 요즘에는 바디에도 많이 넣어놓음 -->
  </footer>  
  
</html>

• CSS(데코레이션)

p{
    font-size: 110%;
    font-family: garamond, sans-serif;
}
h2{
    color: red;
    background: white;
}

• JavaScript(행동을 부여)

<script type="text/javascript">
document.write('<p>Hello world!</p>');
</script>

2. 웹 퍼블리싱의 기술

웹 퍼블리싱은 다음 세 가지 언어를 조합하여 하나의 웹 페이지를 만든다.

• HTML(뼈대):마크업이라고 불린다.디자인이 되어 있는 부분을 웹 문서화 시켜준다. 제목, 본문, 이미지, 링크 등 웹 페이지에 들어갈 컨텐츠의 구조를 정의한다.
• CSS(데코레이션): 글자 크기, 색상, 정렬, 레이아웃 등 HTML로 만든 뼈대를 예쁘게 디자인한다.
• JavaScript(행동을 부여): 버튼을 누르면 팝업이 뜨거나, 이미지가 슬라이드되는 등 역동적인 움직임과 기능을 추가합니다.

3. 웹 퍼블리셔의 역할

과거에는 단순히 화면을 그대로 그리는 역할에 그쳤지만, 현대의 퍼블리싱은 다음과 같은 중요한 요구 조건을 충족해야 한다.

• 반응현 웹(Responsive Web): Pc, 태블릿, 모바일 등 화면 크
  기에 맞춰 레이아웃이 자동으로 변하도록 만든다.
• 웹 표준 & 웹 접근성: 크롬, 사파리, 엣지 등 어떤 브라우저에서도 똑같이 보이고, 시각 장애인용 스크린 리더 프로그램도 사이트를 잘 읽을 수 있도록 표준 규칙에 맞춰 코딩한다.
• 크로스 브라우징: 구형 브라우저부터 최신 브라우저까지 깨짐 없이 화면이 잘 나오도록 검수한다.