한빛미디어

이번에 리뷰할 책은 "완성된 웹사이트로 배우는 HTML&CSS 웹디자인" 입니다. 이 책은 HTML&CSS 를 처음 배운 분들이 다음 단계로 넘어가기 좋은 연습 교재입니다. 

진짜 초심자를 위한 교재로는 Head First 시리즈 중  Head First HTML 이 있습니다. HTML 의 개념을 잡고 코딩에 익숙해지는데 도움이 되는 책이죠. 이런 입문서를 통해 어느정도 HTML 코드에 어느정도 익숙해졌다면 다음 단계로 다양한 스타일의 사이트를 만들어 보아야 합니다.

웹 디자인은 시각디자인과 달리 그래픽적인 부분만 해결하는 것으로 완성되지 않습니다. 반드시 코딩을 통해 실제 사이트의 구축을 목표로 해야하죠. 그래서 웹 디자이너가 되고 싶은 사람들을 위해 교육기관들은 첫단계로 포토샵이나 일러스트레이터 같은 그래픽 프로그램들과 함께 HTML&CSS, JavaScript 등을 배우도록 구성합니다.

웹디자이너가 되기위해서는 HTML&CSS 를 기본으로 하여 코딩 영역의 실무능력을 반드시 갖추어야 하지만 코딩영역은 일반적으로 배우는 교과목과 너무나 다르고 낯설어서 코딩을 혼자 공부하는 일은 결코 쉽지 않습니다.

그래서 적절한 강의나 교재의 선택이 중요하겠죠.

그럼 웹 디자이너는 왜 HTML&CSS 를 배워야 할까요?

이것을 설명드리기 위해 우선 웹 사이트를 만들기 위한 업무 영역을 아주 간단하게 설명드려 보죠. 보통 웹 사이트를 제작하는데 중요한 업무영역은 대략 크게 나누면 네가지 영역으로 나눌 수 있겠습니다.

웹 기획, UX-UI, 웹디자인, 웹 개발(프로그램적 측면) 입니다. 이들 업무 영역은 서로 겹치거나 여러가지를 동시에 진행하는 경우도 많죠. 또 이들 업무를 상호 넘나들며 수행하는 능력자들도 많습니다.

웹 기획자는 사이트의 사용자 분석, 시장 분석, 목적과 활용, 개발 운영, 마케팅 등 전체적으로 사이트의 기획을 진행합니다. 기획이 완료되면 웹 디자이너는 보통 프론트엔드 개발자와 함께 혹은 개발자의 업무 진행 이전에 기획에 걸맞는 웹디자인 작업을 진행하게 됩니다.

웹 사이트 개발에 있어 가장 기초가 되는 웹 디자인을 실제로 브라우저에 띄울 수 있는 뼈대와 외양을 만드는 사람들이 웹 디자이너이고, 개발자들은 이 뼈대와 외양만 같춘 사이트에 데이터베이스를 기반으로 하는 여러 기능(프로그래밍)을 붙이는 사람들이라고 생각하시면 되겠습니다. 그리고 이런 기존의 업무 흐름에 UX-UI(사용자 환경 디자인) 을 고민하는 비교적 새로운 업무영역이 추가 되어 이 영역의 중요성도 점점 더 커지고 있습니다.

사실상 어떤 영역에서 업무를 진행하던지 웹 사이트를 만들기 위해서는 HTML 과 CSS 를 이해하는 것이 가장 필수적이고 기초적인 일입니다. 더구나 사이트의 시각적 영역과 구조적 기초부분을 담당하는 웹 디자이너에게는 코딩을 필수로 하면서 더 많은 영역을 넘나들 수 있는 전방위적 이해 능력과 실무 능력이 요구되고 있습니다.

물론 클라이언트 성향과 사이트를 제작하는 실무 기업의 업무 형태에 따라 업무영역이 달라질 수 있지만 웹 디자이너에게 기본적인 코딩 능력은 그래픽 디자인 능력 못지 않게 가장 중요한 요소 중 하나라고 할 수 있습니다. 그러니 기초부터 탄탄하게 공부해둘 필요가 있겠지요?

웹 사이트를 만들고 싶어서 HTML 과 CSS 를 배우기 시작하신 여러분이 가장 기초적인 코드와 기능에 대해 이미 모두 배웠다고 합시다. 다음 단계로는 실습을 해보고 싶으실 겁니다.

실무에서 실제 운영하는 사이트를 만들어 보는 것이 가장 빨리 배우는 방법이지만 HTML 과 CSS 를 처음 배운 초보에게 실제 사이트를 만드는 것은 무리입니다. 실습단계에서는 연습용 사이트가 자세히 설명되어 있는 교재를 선택해 많은 경우의 사례를 연습해 보시면 좋겠습니다.

이 책은 그런면에서 5개의 연습 사이트를 통해 그동안 배운 코드들을 실습하고 나름의 변형도 해보면서 연습할 수 있도록 돕는 책입니다. 코드 이해 수준에서 벗어나 웹사이트를 실제와 유사하게 만들어 볼 수 있는 연습 기회를 제공하고, 내가 배운 코드들이 실제로는 어떤 식으로 적용되는지, 실무에서 효율성 있게 작업하려면 어떻게 해야 하는 지 알려줍니다. 초보가 실습을 시작하기에 좋은 책이라 할 수 있겠네요.

이 책은 그리 두꺼운 책은 아니지만 내실이 있는 편입니다. 모두 8 챕터로 구성되어 있고 웹 사이트 개발을 위한 기본 정보를 제공하면서 웹 사이트 개발자 도구를 추천합니다.

에밋, calc 함수, Sass 활용 등 코드 효율화 방법에 대해서도 빠짐없이 다루고 있으며 사이트 런칭과 런칭 전 체크리스트와 많이 일어나는 오류 해결방법도 언급하고 있습니다. 독학에서 만나기 쉬운 문제 해결 방법들이 요소요소에 설명되고 있으니 대충넘기지 마시고 꼼꼼하게 읽어보시면서 반드시 코딩을 실제로 해보시면 좋겠습니다. 중요한 용어와 기술에 대해서 언급하고 있으므로 더 자세한 내용은 해당 내용을 다룬 강의나 다른 책을 통해 계속 공부를 이어나가시면 다음 단계의 공부가 되겠습니다.

또 5개의 웹 사이트 실습 예제를 자세한 코드 설명과 함께 제공하고 사이트 별로 연습문제, 커스터마이징 방법도 제시해 줍니다. 예제를 코딩해 본 뒤에는 내 나름의 커스터마이징을 해보는 것도 좋은 실습이 되겠습니다.

아래는 5개의 연습 예제가 다루고 있는 주요 내용입니다.

• 랜딩 페이지-반응형 웹디자인과 글꼴
• 블로그사이트-다단레이아웃과 요소별 꾸미기
• 회사사이트-표, 그래프, 폼, 자바스크립트
• 이벤트 사이트-색상과 애니메이션
• 갤러리 사이트-이미지와 동영상의 사용

적당히 읽어 보는 책이 아니라 실습을 해야하는 책이므로 구매해서 꼼꼼하게 읽으면서 예제 사이트를 만들어 보시고 가능하다면 친구나 동료와 모임을 만들어 함께 실습해 보는 것도 좋겠습니다.

실무 환경은 정말 다양하고 그에 맞게 사이트의 디자인과 기능도 정말 다양합니다. 한권의 교재에 다양한 환경과 여러 유형의 사이트를 모두 다루는 것은 불가능합니다. 일단 기초적인 연습을 시작할 수 있는 교재를 통해 공부를 시작하는 것이 좋습니다. 기왕 웹디자인 공부를 시작하셨다면 이 책처럼 실제 사이트에 가까운 샘플 사이트로 연습을 도와주는 책들을 여러권 구해서 되도록 다양한 유형의 실습용 사이트를 최대한 많이 만들어 보시길 권합니다.

모두 연습해본 뒤에는 나만의 프로젝트에 도전하여 포트폴리오를 쌓아나가시면 좋겠습니다.

여러분의 건투를 빕니다!

이 글은 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."