본 글은 서평단에 선정되어 작성하는 글입니다.
Do it! 인터랙티브 웹 페이지 만들기
웹 퍼블리싱은 학교에서 강의를 들으며 처음 배웠었고, 코드잇에서 진행되었던 코딩 캠프를 통해서도 복습을 하였었다.
학교에서 배운 내용만을 가지고는 내가 원하는 반응형 웹 페이지를 만들기에 부족함을 많이 느꼈다. 그래서 언제 한 번 제대로 웹 퍼블리싱을 배워보자는 생각을 했었는데, 기회가 되어 코드잇에서 웹 퍼블리싱 부분을 들을 수 있었지만 js부분 이후부터 제대로 들을 시간이 없어서(캠프 기간이 한 달로, 생각했던 것보다 짧기도 했다🙁) 내가 목표하는 바까지는 달성하지 못했었다.
그러다가 항상 눈여겨 보고있던 이지스퍼블리싱 페이스북에서 Do it! 인터랙티브 웹 페이지 만들기 책 서평단을 모집한다는 것을 알게 되었고, 밑져야 본전이라는 생각으로 신청하였는데 선정이 되어서 너무 기뻤다!
꼼꼼하게 책을 읽으며 오탈자도 열심히 찾아보려 했지만, 안타깝게도 프로젝트 기간과 겹치는 바람에 오탈자는 찾아내지 못했다 크크,,,
Why?
많은 웹 퍼블리싱 내용을 담고 있는 책들 중 이 책이 가장 끌렸던 이유는 8가지의 웹 사이트를 직접 만들어볼 수 있어서였다. 사실 웹 퍼블리싱에 아직 익숙하지 않은 사람이 이 정도 퀄리티의 웹 사이트를 단기간에 만들려면 유료 강의를 들어야 한다.. (아직 좋은 무료 강의를 찾지 못 한 걸 수도 있지만!) 포트폴리오 몇 개 만들기 위해서 유료 강의를 듣는다는 건 전공자 입장에서 좀 아깝다는 생각이 들었다.
개인적으로 웹 퍼블리싱은 다른 코딩과는 달리 디자인적 감각도 좀 있어야 잘 한다고 생각하는데 슬프게도 나한텐 그런 디자인적 감각이 없다. 아무래도 주로 사용되는 디자인들을 눈에 익히기 위해 예시가 되는 폼들이 많이 필요했다.
책 한 권으로 기본적인 개념들을 모두 훑어주고, 배운 내용을 활용해서 여러 가지 웹 사이트를 만들어볼 수 있는 점은 가장 큰 매력으로 다가왔다. 그리고 유튜브에서 무료 강의도 제공하기 때문에 이 점도 굉장히 좋았다.
비전공자
요즘 책을 읽을 때는 항상 머리말부터 먼저 보는데, 이 책에서는 비전공자도 코딩을 할 수 있다는 점을 가장 먼저 언급하였다. 그래서 나도 책을 읽으면서 '비전공자가 이 책을 보며 공부하기에 어떨까', 라는 생각을 하며 읽게 되었다.
가독성
개념 부분을 읽으면서 느꼈던 것은 정말 가독성이 좋다는 것이었다.
특히 HTML 부분에 대한 정리는 가독성이 정말 좋다고 느껴졌다. 내가 처음 HTML을 배웠을 땐 정말 많은 종류의 태그들을 보며 '이게 다 뭐지?'라는 생각을 가장 많이 했었다. 그때 전공책에서도 각각의 태그들에 관한 예제는 물론 있었지만, 태그에 대한 설명이 표 한 줄과 추가 문장 몇 줄 정도에 그친다는 게 좀 아쉬웠다. 그런데 이 책에서는 대문짝만 하게 태그와 태그 설명, 속성이 적혀있다. 이게 별 거 아닐 수도 있지만 보기 편한 게 머릿속에도 더 잘 입력되는 느낌이었다😎
예제
다른 책에서도 웹 폰트에 관한 얘기는 간단히 소개하고 넘어가지만, 어떻게 사용하는지 직접적인 예제를 자세히 보여주진 않았었다. 그래서 처음엔 구글링을 통해서 적용을 했었는데, 이 책에는 예제가 자세하게 나와있기 때문에 일을 두 번 할 필요 없이 한 번에 웹 폰트를 쉽게 적용할 수 있다. 또한 페이지를 좀 더 예쁘게 꾸밀 수 있는 폰트 아이콘(feat. 폰트 어썸) 사용 예제도 있는 게 좋았다.
단순히 개념을 잡아주는 것에 그치는 것만 아니라, 실제로 웹 사이트를 만들 때도 적용할 수 있도록 처음 단계부터 차근차근 함께 해나가는 느낌이었다. 이런 세세한 부분들은 코딩을 정말 처음 접하는 사람들에게는 큰 도움이 된다.
간단하게나마 시맨틱 태그에 대해서도 언급하고 넘어간 게 도움이 된다고 생각했다. 이렇게 다양한 시맨틱 태그가 존재하는지는 이번에 처음 알게 되었다.
CSS
CSS 내용들도 이것저것 많이 들어가 있다. 개인적으로는 CSS가 디자인에 있어서 대부분을 차지한다고 생각하기 때문에 CSS 예제가 많은 게 큰 도움이 되었다.
CSS 관련 내용은 너무 방대하기 때문에 기초적인 정도의 내용만 있는 경우가 많은 편인데, 이 책에서는 기초적인 내용과 더불어 웹 사이트 적용 시 자주 사용될 법한 내용과 세부적인 속성도 많이 다루었다. 특히 순서 선택자를 여러 예제에 많이 사용해서 익숙해지게끔 했다.
CSS 초기화 등 실제로 쓰이는 스킬도 소개해주는 것도 좋았다. float과 position은 중요하면서도 언제나 쉽지 않게 느껴지는 부분인데 해당 속성들의 쓰임을 자세히 소개해주었다. 이 부분을 읽으면서 개발할 때 바로 적용할 수 있을 정도의 내용을 담고 있다고 생각하게 되었다.
4장은 목차 자체가 '인터랙티브 웹을 위한 CSS 다루기'인데, 이 부분에서는 정말 처음 보는 CSS 내용들이 우후죽순 쏟아져 나왔다. 내가 그동안 봤던 예쁜 웹 페이지들이 이런 내용을 응용해서 만들어진 거라고 생각하니 이전에 배웠던 퍼블리싱은 겉핥기식으로밖에 안 했다는 생각이 들었다😢
벡터 이미지 파일 제어, flex 방식으로 레이아웃 만들기 등 다양한 CSS 사용 예제가 있기 때문에 이 책 한 권으로도 웬만한 정적 웹 페이지는 거의 다 만들 수 있을 것 같다고 생각됐다.
한 가지 아쉬웠던 부분은 margin, padding에 관한 내용을 다룰 때 ← 30px → 이런 도움말이 있는 게 더 직관적이지 않았을까 생각된다. 결과 화면에는 글자, 테두리, 여백만 있기 때문에 이 부분 예제는 직관성이 조금 떨어진다고 생각했다.
포트폴리오
구현 전 레이아웃 구조를 항상 먼저 파악하고 들어가기 때문에 만들 페이지에 대한 이해도를 높일 수 있어서 좋았다. 기능 하나 추가할 때마다 결과 화면을 삽입하였기 때문에 내가 어느 부분에서 코드를 잘못 썼는지 비교적 쉽게 알 수 있었다. 그리고 이 코드를 왜 써야 하는지도 설명되어있어서 코드를 무작정 따라 치기보다는 하나하나 이해를 해가며 코딩할 수 있는 게 좋았다.
포트폴리오는 온라인 프로필, 동화 애니메이션, 동영상 플레이어, 반응형 웹 갤러리, 기업 홈페이지, 파노라마 소개 페이지, 뮤직 플레이어, 스와이프 갤러리 이렇게 8개를 만들어볼 수 있는데 종류가 다양하다보니 스킬을 여러 방면으로 쌓을 수 있어서 좋았다.
결론
책이 그리 두껍지 않아서 과연 많은 내용을 배울 수 있을까 생각도 했었는데 내용 구성이 굉장히 알차게 되어있어 그런 걱정은 접어두게 되었다.
단기간으로 웹 퍼블리싱을 많이 배워보고 싶다면 이 책을 추천하고 싶다. 친절한 설명과 예제에 추가적인 설명이 필요하다면 유튜브 강의도 들을 수 있어서 초심자도 공부하기에 좋은 책 같다.
