-
웹 퍼블리싱이란?코딩으로 웹디자인/HTML 2024. 12. 15. 23:53
웹 퍼블리싱: 코딩으로 웹 디자인 구현 개요
웹 퍼블리싱이 처음이신가요?
이 글을 통해 웹 퍼블리싱이란 무엇인지, 그리고 실무에서 어떤 기술과 업무가 필요한지 차근히 알려드립니다.
웹 퍼블리싱은 단순히 웹 디자인을 코딩으로 구현하는 것 이상으로 온라인 생태계에서 중요한 역할을 합니다. 아래에 목차에 따라 순서대로 짚어 나가면 웹 퍼블리싱에 대해 차근히 이해할 수 있을거라 기대합니다.
0. 목차 안내
- 웹 퍼블리싱 의미
- 온라인 생태계의 이해
- 웹 퍼블리싱 역할
- 필요한 기술
- 웹 퍼블리셔의 주요 업무
- 웹 퍼블리싱의 목적
1. 웹 퍼블리싱 의미: 기본 개념 익히기
웹 퍼블리싱(Web Publishing)이란 정적인 디자인 이미지를 코딩 작업을 통해 실제 웹 사이트 디자인으로 구체화 시키는 과정을 의미한다.
2. 온라인 생태계의 이해: 웹 퍼블리싱과의 연관성
웹 퍼블리싱의 역할을 자세히 알아보기 전에 먼저 살펴볼 것이 있다. 온라인 생태계에 대해 전반적으로 먼저 살펴볼 것이다. 온라인 공간에서 웹 사이트가 만들어지기까지 필요한 일은 무엇이며, 또 각 역할별로 어떤 특징이 있는지 알 필요가 있다. 온라인 생태계를 전반적으로 살펴보는 작업은 웹 퍼블리싱 작업 단계와 특징을 이해하는데 분명히 도움이 될 것이다.
온라인 생태계에는 기획, 디자인, 제작, 관리, 배포, 이렇게 대략 5가지 정도로 분류할 수 있다. 이제부터 각 단계의 역할과 특징을 함께 살펴보자!2.1. 기획
웹사이트의 목적과 방향성, 그리고 주요 타겟에 맞게 웹사이트를 기획하는 단계다. 여기서 타겟이란 웹사이트 목적에 맞는 방문자를 의미한다. 예를 들면 화장품이 필요한 사람은 화장품 정보가 있는 웹 사이트에 방문할 것이고, 뉴스를 보고 싶은 사람은 온갖 뉴스를 수집해서 보여주는 웹 사이트를 방문할 것이다.
이렇게 주요 타겟까지 정해지고 나면 웹 사이트에 필요한 기능, 그리고 콘텐츠 내용과 디자인 콘셉트를 문서화 한다.
2.2. 디자인
기획 단계에서 문서화 된 내용을 바탕으로 디자인 도구를 이용해 웹사이트를 디자하는 단계다. 회사 규모나 작업자의 작업 방식에 따라 기획과 디자인이 하나로 통합되어 진행되는 경우도 많다. 이런 경우에는 디자인에 기획까지 모두 포함된 단계로 볼 수 있다.
2.3. 제작
제작 단계는 코딩으로 웹 사이트를 구현하는 작업이다. 제작 단계에서도 코딩 기술에 따라 작업 단계가 더 세분화 될 수 있다. 하지만 지금 이 설명에서는 간단하게 설명하기 위해 크게 2가지로 구분해 보겠다.+ 제작 1단계
디자인 단계에서 만든 ‘웹사이트 디자인’을 코딩으로 구현하는 작업이다. 움직이는 형태까지 고스란히 구현한다. 한 마디로 웹 사이트의 외관을 제작하는 단계다. 이 단계에서는 아직 웹 사이트라고 볼 수 없다. 왜냐하면 웹사이트와 사용자가 서로 상호작용할 수 있는 기능이 없기 때문이다. 그야말로 웹 사이트 디자인만 구현되어 있는 상태이다.
+ 제작 2단계
‘제작 1단계’에 기능을 부여하는 작업이다. 예를 들면 검색, 로그인, 결제, 댓글, 메일, 파일첨부 등의 기능을 부여하는 작업이다. 이 단계에서는 서버와 통신이 필요하거나 데이터(DB)를 주고 받거나 저장하는 등의 작업도 필요하다. 이런 기능을 추가함으로써 비로소 웹 사이트라고 볼 수 있다. 사용자가 웹 사이트에 들어와서 특정 기능을 통해 원하는 결과를 얻어가는 상호작용이 가능하기 때문이다.
2.4. 관리
웹 사이트 제작이 완료된 후 관리하는 단계다. 필요에 따라 기존 게시물을 업데이트 하거나, 새로운 게시물이나 상품을 업로드 할 수 있다. 또는 고객의 요청에 응답하는 등의 작업이다. 관리 도구는 웹 사이트가 제작된 방식에 따라 달라질 수 있다.
2.5. 배포
완성된 웹 사이트를 최종적으로 배포하거나 관리 단계에서 업데이트가 필요한 부분을 새롭게 배포할 수 있다. 대부분의 작업이 서버와 관련되어 있다. 온라인의 가상 공간은 서버의 일부분을 할당 받아 사용하는 공간이다. ‘서버’는 말 그대로 서비스를 제공하기 위해 만들어진 특수한 컴퓨터라고 할 수 있다.이렇게 5가지 각 단계의 역할과 특징을 살펴보았는데, 중요한 점은 각 단계별 직무가 프로젝트의 규모나 협업 환경에 따라 겹칠 수도 있고, 완전히 분리될 수도 있다는 것이다. 이 점을 염두에 두고 참고하시길 바란다.
3. 웹 퍼블리싱 역할: 실무에서의 위치와 중요성
앞서 말한 ‘온라인 생태계’ 5가지 단계에서 웹 퍼블리싱의 역할은 바로 ‘제작 1단계’에 해당한다. 즉 디자이너가 작업한 웹 사이트 디자인이 실제 웹 사이트가 될 수 있도록 코딩으로 똑같이 구현하는 작업이다.
직무 관계로 보자면 디자이너와 개발자 사이에서 중간단계 역할이다. 중간 역할을 하는만큼 디자이너와 개발자 사이에서 양쪽 모두 소통을 잘 할 수 있는 능력을 갖출 필요가 있다.
디자이너의 아이디어를 최대한 실현하는 역할도 필요하며 또 개발자가 기능을 입히기 좋게 코딩하는 능력도 필요하다.
또한 디자이너가 사용하는 디자인 도구를 기본적으로 다룰 줄 알아야 한다. 각 레이어별로 배치된 디자인 요소를 확인하고 이미지를 자르거나 별도로 저장할 수 있어야 한다. 그래야 디자이너가 디자인 한 파일을 토대로 퍼블리싱 작업이 가능하기 때문이다.
그리고 개발자가 사용하는 코딩 도구 또한 다룰 줄 알아야 한다. 파일을 넘겨 주거나 웹 사이트를 구축하는 과정에서 코드를 주고 받는데 불편함이 없어야 한다.
4. 필요한 기술
4.1. HTML(HyperText Markup Language)
웹 페이지 구조와 콘텐츠 작성
예를 들면, 제목, 이미지, 문단, 링크버튼, 기능 버튼, 목록, 표와 같은 형태로 콘텐츠를 작성할 수 있다.4.2. CSS(Cascading Style Sheets)
웹 페이지 디자인과 스타일 정의
HTML로 작성한 각각의 콘텐츠에 디자인을 입히거나 위치를 조정하여 레이아웃을 잡을 수 있다.
4.3. JS(JavaScript)
웹 페이지에서 동적인 기능 구현
CSS에도 간단한 움직임을 만들 수 있는 애니메이션 구현 기능이 있지만 조금 제한적이다. JS, 또는 jQuery를 이용해서 디자이너가 상상한 동적인 움직임을 추가할 수 있다.
4.4. 웹 표준 준수(W3C/World Wide Web Consortium)
웹 콘텐츠의 호환성과 접근성 확보
웹 표준이란 쉽게 말해서 웹 사이트를 만들 때 지켜야하는 규칙이다. 웹 표준을 따르면 다양한 브라우저와 기기에서 일관된 사용자 경험을 제공할 수 있다.
4.5. 이미지 최적화
이미지 데이터 전송량을 줄이기 위한 목적
최적화된 이미지는 웹 사이트 로딩 속도를 빠르게 하고 사용자 이탈률을 줄인다. 무엇보다 모바일 사용자의 데이터 소비를 줄이는데도 큰 역할을 한다.
5. 웹 퍼블리셔의 주요 업무
5.1. 디자이너가 만든 시안을 HTML, CSS, JS를 이용해 웹 사이트 디자인 구현.
5.2. 웹 사이트가 다양한 기기와 브라우저에서 동일하게 작동하도록 반응형 웹 구현.
5.3. 검색 엔진 최적화(SEO)를 고려하여 콘텐츠 작성 및 태그 설정.
5.4. 웹 접근성을 개선하여 모든 사용자가 콘텐츠를 쉽게 이용하도록 지원.
6. 웹 퍼블리싱의 목적
6.1. 정보 전달 - 필요한 정보를 효율적으로 제공.
6.2. 사용자 경험(UX / User Experience) - 직관적이고 사용하기 편리한 웹사이트 제작
6.3. 검색 엔진 최적화(SEO / Search Engine Optimization) - SEO를 통해 검색 결과 상위에 노출되도록 최적화.
6.4. 브랜드 이미지 구축 - 디자인과 곤텐츠로 기업 또는 개인의 가치 전달.마지막으로 전체 내용에서 마케팅 내용은 일부러 제외했는데, 마케팅은 웹 사이트 제작과 운영 보다는 홍보 느낌이 더 강하기 때문이다. 그러니까 웹 사이트를 제작해서 배포하고 관리하는 것과 별개로, 그야말로 사이트를 홍보하는 목적이 강하기 때문이다. 모든 웹 사이트에 마케팅이 반드시 필요한 건 아니기 때문이다.
그럼에도 불구하고 마케팅을 굳이 마지막에 언급하는 이유는 앞서 말한 SEO에 대해 설명을 덧붙이기 위함이다. SEO는 퍼블리싱 단계에서 반드시 갖추어야 하는 부분이 있지만 SEO 자체가 전적으로 퍼블리싱 업무에 해당된다고 보기는 어렵다. 오히려 마케팅 업무와 연관성은 더 높다고 볼 수 있다.
커피 한 잔으로 후원하기
2016년부터 오프라인에서 입문자를 위한 웹 퍼블리싱 교육을 하고 있습니다. 강의하면서 누적된 지식과 노하우를 온라인으로 공유합니다. 후원은 양질의 콘텐츠를 제작하는 데 아주 큰 힘이 됩니다. 감사합니다.
사이트 모음
최고의 가치는 "실력을 갖추는 것"이다.
가장 이상적인 학습
배운 내용을 자유롭게 가지고 노는 것.
'코딩으로 웹디자인 > HTML' 카테고리의 다른 글
<img>는 왜 닫는 태그가 없을까? (0) 2024.03.15 HTML 기본 구조 심화 학습 (3) 2024.03.06
