한빛 스토리

한빛리더스 10기 김기범 님의 

『모던 웹 디자인을 위한 HTML5+CSS3 입문, 개정판』도서 리뷰 입니다.

[원문: http://blog.naver.com/kgbdiy/220348590237]

웹 관련 서적을 보면 처음부터 끝까지 저자가 기술한게 그리 많지 않습니다. 특히 새로 나온 기술에 대한 책은 대부분 번역서이고 좀 많이 대두되어야만 활용서적이 출판되어 나오는게 되죠...그래서 내용적인 면에서 바이블적인 면은 있지만, 실제 자신이 일하고 있는 환경에 실용적으로 적용하는데 있어서는 한계가 있고 부족하다고 느끼게 됩니다.

이 책은 이미 <모던 웹 디자인을 위한 HTML5+CSS3 :개정판>초판이 나왔었고 이번에 나온건 개정판입니다. 이런저런 HTML5 관련서적을 읽으면서 책마다 저자들의 고유 화법도 느끼게 되고 장/단점이 있게 마련입니다. 책을 소개하면서 화려함보다는 내실을 다졌다고 미리 얘기하고 서평을 시작하려고 합니다.

▲ 웹표준과 함께 HTML5 와 CSS3 가 대두되면서 프런트엔드 퍼블리셔, 웹디자이너뿐만 아니라 개발자들도 반드시 알고 있어야만 원활한 협업기 가능하게 됐습니다. 아주 예전에 초기 웹표준을 대형 사이트들마다 적용하면서 관리자개발 프로젝트를 진행할때 개발자들이 웹표준때문에 고생하던 모습을 보면서, 아직은 힘들겠구나? 하는 생각을 했었던 적이 있지만, 지금은 어느새 일반화되어 있고 개발자들도 이런 구조적인 언어에 대한 인지도 많이 높아져 가고 있습니다.

입문서답게 첫장부터 HTML5 기본 태그와 CSS의 속성에 테이블을 정리한 페이지를 따로 제공합니다. 오려두고 책상에 놓던 자시 책상에 파티션에 붙여놓고 쓰던간에 참 용이할것 같습니다.

▲ 웹언어를 다룬 책들은 디자인관련서적에 비해 화려하지 못하고 많이 지루한 편집으로 집중력이 떨어집니다. 어떻게 말하면 재미가 없다고 라고나 할까요!

<모던 웹 디자인을 위한 HTML5+CSS3 :개정판>책은 재미난 책은 아닙니다. 그도 그럴것이 웹쪽일을 하는 사람이 아니라면 당연한 얘기지만, 비슷한 류의 책을 보던 본인입장에서는 서툴면서도 정리가 잘된 내 노트를 보는듯합니다. 이 도서는 과장이 없습니다. 책의 내용대도 코딩한 결과를 정직하게 보여줍니다. 당연한 얘기이지만, 이 책에서 제시하는 무료 HTML5 편집툴과 대상 브라우저등 꼼꼼하게 가이드해주고 있기때문입니다.

또한 반드이 알고 넘어가야하는 부분은 NOTE라고는 박스안에 잘 정리해놓았고 가장 핵심이 되는 마크업이나 문법은 필기체로 다른 내용과 구별해서 표현해주고 있습니다. 투박해 보일 수도 있지만, 나름 구분해서 알기 쉽게 하자는 저자와 (출판)편집자와의 의도가 아닐까! 라는 생각도 듭니다.

▲ HTML 에디터의 기본 폰트설정을 바꾸면 본인한테는 편할지 모르지만, 언어의 형태가 바뀌면 초보자 입장에서는 따라하다가 당황하게 됩니다. 그런 세세한것까지 고려한건지는 모르지만, 기본 서체로 책의 내용은 진행됩니다.

▲ <모던 웹 디자인을 위한 HTML5+CSS3 :개정판>에서는 브라우저마다 어떻게 보여지는지에 대해 알려주고 태그별로 설명할때는 해당 타이틀에서 표기둬서 책을 통해 학습하는 분들이 쉽게 크로스 브라우징에 대한 이해도를 높이도록 배려해주고 있습니다.

그리고 사견이지만, 은근히 편하게 표현 예제(꿈틀이)들도 소소하게 이 책이 쉽고 편하게 입문자들이 접하게끔 했다는 노력의 흔적이 곳곳에서 보입니다.

▲ 이 책은 은 산만해 보일 수지 모르지만, 흐름이 있습니다. HTML5에 대한 전체적인 마크업이 익숙해지고 정리가 되면 흔히 말해 이쁘게 레이아웃을 만드는 CSS3로 넘어갑니다.

웹코딩이나 디자인을 하면서 막상 마크업을 해놓았는데, 어떻게 복잡해 보이는 웹디자인 이미지를 화면에 띄우게 할 수 있을까? 많이 망설이고 고민하겠죠!

또한 붙박이 메뉴바부터 따로 움직이는 페이지 등 요즘은 단순히 전체 페이지가 스크롤되지 않고 레이아웃 프레임에 따라 유지적으로 동작함으로 초보자는 걱정이 먼저 앞서게 되죠...

그래서 기본적인 내용과 함께 예전~최근까지 많이 사용되는 레이아웃이 어떤 CSS3 로 꾸며지는지 재빠르게 소개하고 있네요~

▲ 예제 파일은 한빛미디어 웹사이트를 통해 다운로드 받을 수 있습니다. 우리가 이런 책들로 학습하다보면 안내되는 예제파일중 어떤걸 열어봐야 하는지 헷갈릴때가 있는데 위 이미지와 같이 ▲해당 태그나 속성에 대한 학습시 어떤 예제파일이 해당되는지 바로 옆에 표기해줘서 폴더에서 찾기 편합니다.

<모던 웹 디자인을 위한 HTML5+CSS3 :개정판>책을 읽으면서 HTML5와 CSS3에 대한 학습/배움의 종착역을 찾은듯한 기분이 듭니다. 물론, 더 나은 책이 나올 수도 있겠지만 현재 이 서평을 작성하면서도 아직 이책을 완전히 완파하지는 못했습니다만 그만큰 더 뜯(!)어보고 싶은 책임에는 분명합니다.

입문을 하든, 이미 입문해 있던간에 HTML5와 CSS3를 다지고 싶고 기초를 탄탄히 하고 싶다면 추천하며 책보다는 자기것을 만들기 위한 "노력"이 가장 중요한다는걸 명심해두시기 바랍니다.

<글/사진 : IT1팀 홍혜은 사원>

표지 한 장을 만드는 데는 많은 시간과 노력이 필요합니다.

표지는 책의 첫인상을 결정할 아주 중요한 요소이기 때문입니다.

이번 포스팅은 바로 ‘표지’와 관련된 이야기랍니다. +_+

얼마 전, 하늘이 맑은 오후!

한빛미디어의 IT출판부에 위치한 Make 팀에서는 재미있는 작업이 진행됐는데요. 

바로 신간 <프로젝트로 배우는 라즈베리 파이>의 표지에 사용될 소품 촬영이 있었습니다. 

표지 촬영! 어떻게 진행되는 걸까요? ㅎㅎㅎ

대체 어떤 특별한 소품이기에 포스팅까지 하는 걸까요? (홍보 냄새가 나더라도 이해를...^^;;)

그 표지 촬영 현장! 지금부터 한빛 이웃님들께 살짝~~ 공개합니다!

*** 라즈베리 파이란?

2006년경 영국 케임브리지 대학교의 에반 업튼 박사가 함께 개발한 신용카드 한 장 크기의 자그마한 개발 보드이다. 운영체제를 온전히 돌릴 수 있기 때문에 손바닥 컴퓨터라고도 불리운다.

▲ 짜자쟌! 촬영 준비를 하는 모습입니다. 

조명 아래에 놓인 소품이 보이시나요? 표지를 더더욱 귀엽게 꾸며 줄 오늘의 주인공!!!

요리사 미니어처 그리고 산딸기 되시겠습니다!!! 

대체 표지가 어떤 콘셉트일지 이쯤되면 궁금하시겠지만 조금만 참아주세요. 

완성된 표지는 이 글을 쭉~ 읽고 나면 보실 수 있습니다. ㅎㅎ

▲ 이것이 바로 완성된 표지입니다. +_+!!! ㅎㅎㅎㅎ

보드 위에서 요리를 하는 요리사, 스푼 위의 산딸기 등등이 곳곳에 놓여있는 것, 보이시나요?

라즈베리 파이가 누구에게나 쉽고 친숙한 콘텐츠임을 알리고자 하는 

애환과 고민이 담긴 결과물이라고나 할까요… ^.ㅜ 

이 표지를 위해 수고해주신 분들이 많습니다. 

(사실 Make팀에서 한 일은 소품 준비와 촬영 보조정도였습니다^^;;)

이 자리를 빌어 디자인을 해 주신 강은영 과장님, 

그리고 표지의 얼굴인 ‘라즈베리 파이’ 사진을 찍어주신 류승완 작가님께 감사드립니다. :D

이렇게 미니어처를 활용한 것은 메이크에서는 처음 있는 일이 아니에요. 

지금까지 출간된 메이크 프로젝트 시리즈 표지에는 공통적으로 미니어처가 등장하고 있거든요. 

(앞서 출간된 다른 도서들도 모두 직접 하나하나 촬영을 했다고 합니다. 그 열정에 박수를….ㅠ_ㅠ)

오늘 소개한 내용은 한빛미디어에서 출간되는 수많은 도서 중 하나의 사례일 뿐이지만, 

요점은 동일합니다. 모든 편집자들은 한 권의 표지를 기획할 때 동일한 고민을 하게 된다는 거죠. 

어떻게 하면 표지를 통해 이 책의 콘셉트를 제대로 알릴 수 있을까 하고요. 

이 글을 읽고 나신 후에는 주위에 있는 책의 표지를 유심히 살펴보세요. 

생각지도 못했던 숨은 이야기들을 발견하실지도 몰라요^^ 

<글/사진 : IT활용서팀 방현규 사원>

안녕하세요! 오랜만에 인사드리는 한빛 IT활용서팀입니다.

기나긴 꽃샘 추위를 지나고 나니 갑자기 몰아서 내리는 봄비로

포근한 봄날씨를 제대로 만끽하지 못했었는데

저번 주부터는 날씨가 짓궂어서 너네 섭섭했지?하면서 제대로 봄이 왔네요!

그리고

그 봄날의 중심에 드디어 그날*이 오고야 말았습니다.

*그날이란?

지난 달에 과장으로 승진하신 IT활용서팀의 맏이이자 

오피스 도서의 최강 편집자 배 과장님의 승진 턱을

화끈하게 쏘는 날로서 고된 업무와 지친 일상에 한 줄기 빛과 같은 행사이며

팀장님을 비롯해 팀원들, 그리고 부장님까지도 손꼽으면서 기다렸던 날!

▲ 모든 것은 이 초대장이 오면서부터 시작되었습니다. 

베일에 쌓였던 장소는 많은 토론과 추측이 있었지만 누구 하나

섣불리 결론을 내리지 못하고 기다리고만 있었습니다...

그리고 나른한 수요일 아침 열시 직전, 따스한 봄날의 햇살처럼

팀원들에게 따스한 메일이 도착했습니다!

▲ 수 제 버 거 ?!

홍대 감싸롱은 아는 사람은 다 아는 유명한 수제 버거 맛집이죠! 

저야 뭐든지 잘 먹지만 햄버거 특히, 수제 버거는 정말 좋아해서

점심시간까지 연신 침을 닦아가며 일을 했답니다.

그리고 시간은 흘러흘러 점심 시간이 되었고

부장님을 비롯해 활용서팀 전원, 총 6명이 감싸롱까지의 긴 여정을 떠났습니다.

오늘도 날씨가 좋지만 그날은 정말 그림 같은 봄날이었습니다.

걸을수록 더 걷고 싶어지는 그런 날이었어요.

그렇게 15분여를 걸어가서 드디어 감싸롱에 도착!

감싸롱은 우리 한빛 활용서팀이 가본 적은 없지만 한번쯤 들어본 가게입니다.

바로 우리 팀의 주요 저자 중 한 분이신 일러스트레이터 밥장 작가님의

오랜 단골집이라서 그 작품들이 인테리어와 소품 곳곳에 있기 때문이지요. 

종종 작가님의 글에서도 감싸롱에 대한 이야기가 언급되곤 한답니다.

밥장 작가님과 감싸롱의 특별한 인연은 링크를 참고하시면 이해가 되실거에요.

(참고 : 네이버 캐스트 '감싸롱')

http://navercast.naver.com/magazine_contents.nhn?rid=2602&rid=&contents_id=68905

(참고 : 밥장 작가의 도서『나는 일러스트레이터다』)

http://www.hanbit.co.kr/book/look.html?isbn=978-89-6848-080-5

▲ 들어서자마자 친숙한 밥장 작가님의 일러스트로 장식된 벽면이 저희를 맞아주었어요.

사진에는 담지 못했지만 냅킨에도 앙증맞게 일러스트가 들어가 있었어요.

별의 개수를 중시하는 부장님은 감싸롱 버거를 시키시고 나머지는 애니멀 버거로 통일!

취향에 따라 음료를 선택한 다음 행여 양이 모자를까 걱정하신

배과장님은 역시 별이 붙은 치즈칠리감자도 주문해주셨답니다.

▲ 푸짐하게 주문을 마치고 기다리는 주인공 배과장님의 인자한 미소(feat.방사원의 입술)

▲ 부장님이 친히 찍어주신 IT활용서팀 완전체!

이렇게 사진을 찍으며 놀고 있던 중에 드디어 사이드 메뉴인 칠리치즈감자가 나왔답니다.

▲ 곱디 고운 자태의 치즈칠리감자! 치즈 소스와 칠리가 듬뿍 올려져 있어요. 

이 사진을 찍고 정확히 3분 만에 같은 그릇을 찍어 보았습니다.

▲ 이거 안 시켰으면 어쩔 뻔 했어...

그리고 오랜 기다림 끝에 나온 메인 메뉴!

▲ 고운 자태의 애니멀 버거...포스팅을 하는 지금도 침이 넘어가네요 꿀꺽...

폭신하고 보드라운 빵 사이에 두툼한 쇠고기 패티와 치즈, 그리고 특제 양파 소스가 듬뿍!

씹는 맛도 있었지만 무엇보다 다른 곳에선 먹을 수 없는 특제 양파 소스가

은은하니 맛있게 매워서 계속 먹고 또 먹게 만들더라구요!

따스한 봄 햇살 아래에서 배 과장님을 축하하고 도란도란 이야기도 나누며

맛있는 음식을 나누니 거짓말처럼 시간이 빨리가고...

저는 부장님과 팀장님께 우리 종종 이런 시간을 가지자고 농담 같은 진담으로 조르면서

봄 날씨를 느끼면서 회사로 걸어왔답니다. 

돌아오니 일도 더 잘 되더라구요.

좋은 날, 좋은 사람들과 좋은 음식은 정말 보약이 따로 없다는 것을 느낀 날이었습니다. 

이렇게 좋은 시간을 갖게 해주신 우리 팀의 기둥, 배과장님! 정말 감사드리고

다시 한번 승진 축하드려요!

이 날의 기운을 받아서 우리 한빛미디어 IT활용서팀은 2분기에도 더 큰 활약을 

펼치도록 노력하겠습니다. 많은 응원과 관심 부탁드립니다!

언제나 감사합니다. 

다들 행복한 봄날 보내시기를 기원해요^^

▲ #Selfie #Selfie #Selfie #Selfie #Selfie #Selfie