서평단: Do it! HTML+CSS 웹 표준의 정석 탄탄한 웹 기본기를 위한 교과서 | 개정판 3 판 후기

1. 서평단 활동 소개

이지스퍼블리싱 서평단으로 선정되어 도서를 무료로 지원받아 솔직하게 쓴 글입니다.

서평단 활동에 참여하게 된 HTML +CSS 웹 표준의 정석 3판

 

이번 글은 이지스퍼블리싱 서평단 활동을 통해, Do it! HTML+CSS 웹 표준의 정석: 탄탄한 웹 기본기를 위한 교과서(개정 3판)을 제공받아 읽고 정리한 후기입니다. 웹을 처음 시작할 때 어떤 책으로 공부할지 고민하는 분들은 대부분 도서 쇼핑몰 인기 순위를 한 번쯤 꼭 검색하게 되는데, 그때마다 늘 상위권을 지키던 ‘Do it!’ 시리즈가 떠오르더라고요. 특히 입문자의 입장을 잘 아는 구성과 풍부한 예제 덕분에, “따라 치다가 끝나는 공부”가 아니라 “이해하면서 쌓이는 공부”를 만들기 쉬웠던 기억이 있습니다. 이번 개정 3판은 단순한 재출간 느낌이 아니라, 최신 웹 표준과 반응형 웹 트렌드를 적극 반영하고, 더 나아가 AI와 협업하는 개발 방식까지 학습 흐름에 포함했다는 점에서 지금 시점에 특히 잘 맞는 업데이트라는 인상을 받았습니다. “AI가 코드를 짜 주는 시대인데 굳이 기본기 책이 필요할까?”라는 질문이 생길 수 있지만, 오히려 그래서 더 필요하다는 메시지가 책 전반에 깔려 있고, 그 방향성이 개인적으로도 꽤 설득력 있게 다가왔습니다.

 

읽고 나서 느낀 점은 HTML과 CSS를 "웹 표준"이라는 기준 위에서 기본기를 탄탄하게 쌓도록 설계된 교과서형 입문서입니다. HTML 태그가 무엇인지부터 출발해서, CSS로 화면을 구성하고, 실제 웹 환경에서 요구되는 반응형 대응까지 자연스럽게 확장해 나가도록 흐름이 짜여 있습니다. 특히 ‘웹 표준’이라는 표현이 입문자에게는 다소 딱딱하게 느껴질 수 있는데, 이 책은 그걸 추상적으로 설명하고 끝내지 않고, 내용 중간마다 포함된 "알아 두면 좋아요!"로 더 풍부한 지식과 폭넓은 관점을 가질 수 있습니다. 또한 각 장마다 한 눈에 바로 이해가 되는 실습 과정을 통해 “왜 이렇게 작성해야 하는지”를 체득하도록 만들어 둔 점이 장점처럼 느껴졌습니다. 결국 현업에서도 “동작만 하면 된다”가 아니라, 유지보수 가능한 구조, 다른 사람과 협업 가능한 코드, 다양한 디바이스에서 안전한 화면이 중요해지니까요.

 

그리고 책을 끝까지 읽으면서 가장 크게 느낀 건, 내용 구성 자체가 너무 잘 짜여 있다는 점이었어요. 책 소개에서 “한 번만 읽어도 세 번 읽은 것 같은 효과”를 얻을 수 있도록 설계했다고 하는데, 그 문장이 과장이 아니라는 느낌이 들었습니다. 단순히 개념을 설명하고 예제를 몇 개 보여주는 방식이 아니라, 장을 시작할 때는 “이 장을 다 공부하면!” 같은 형태로 학습 목표를 먼저 잡아주고, 그 다음에는 직접 손으로 따라 하며 실습을 통해 개념을 체득하게 만들고, 마지막에는 확인과 되새김 흐름으로 내가 진짜 이해했는지 스스로 돌아보게 하는 구조가 계속 반복되거든요. 그래서 책을 읽는 동안 “그냥 읽고 지나가는 공부”가 아니라, 자연스럽게 복습과 점검이 끼어들어서 결과적으로 반복 학습이 되는 느낌이었습니다. 각 장마다 마지막에서 점검 리스트(혹은 최종 점검 파트)가 정말 좋았습니다. 공부할 때 가장 위험한 순간이 “읽었으니까 안다”라고 착각하는 구간인데, 이 파트는 그런 착각을 확 깨 주더라고요. 내가 필수 개념을 제대로 이해했는지, 핵심 태그나 스타일링 개념을 실제로 설명할 수 있는지, 화면 구성에서 자주 헷갈리는 부분을 정확히 구분하고 있는지 등을 체크리스트처럼 하나씩 확인하면서, 부족한 부분은 다시 돌아가서 채울 수 있었습니다. 입문자 입장에서는 이런 ‘자가 진단 장치’가 있느냐 없느냐가 학습 효율을 크게 갈라준다고 생각해요.

 

책을 읽는 분들께 제가 꼭 권하고 싶은 건, 마지막 점검까지 끝냈다면 거기서 멈추지 않고 스스로 학습한 내용을 짧게라도 요약 정리하는 시간을 한 번 가져보라는 거예요. 이 방식은 지금 이 책 뿐만 아니라 다른 책들도 포함되는 학습 방식이에요. 예를 들어 “HTML에서 구조를 잡을 때 내가 기억해야 할 것”, “CSS 레이아웃에서 자주 쓰는 속성과 헷갈리는 개념”, “반응형에서 반드시 체크할 포인트”처럼 본인만의 문장으로 정리해보면, 책에서 배운 내용이 단순 지식이 아니라 ‘내 언어’로 바뀌면서 훨씬 오래 남습니다. 이 과정까지 같이 해주면, 이 책이 의도한 것처럼 정말로 한 번 읽었는데 세 번 읽은 효과를 체감할 수 있고, 다른 독자분들도 훨씬 더 큰 학습 효과를 얻을 수 있을 거라고 생각합니다.

2. 책 내용 소개

2.1 HTML 파트

HTML 파트를 읽으면서 가장 먼저 들었던 생각은, “입문자가 반드시 알아야 하는 핵심을 정말 잘 추려서, 흐름 있게 연결해 놨다”는 점이었어요. HTML을 처음 공부할 때는 태그 종류가 너무 많아서 어디까지가 필수고 어디부터가 확장인지 감이 잘 안 오는데, 이 책은 그런 혼란이 생기기 전에 ‘웹 페이지의 뼈대’로서 HTML이 어떤 역할을 하는지를 먼저 잡아주고, 그 위에 필요한 태그들을 차근차근 쌓아 올리도록 구성되어 있더라고요. 그래서 “태그를 외운다”가 아니라 “문서를 설계한다”는 관점으로 자연스럽게 접근하게 됩니다.

 

HTML 파트에서 가장 만족했던 부분은 폼(form)과 input 태그를 다루는 방식이었어요. 사실 웹 서비스를 만든다고 하면 결국 사용자가 무언가를 입력하고 전달하는 순간이 가장 중요하잖아요. 로그인, 회원가입, 검색, 게시글 작성, 문의하기… 전부 폼에서 시작합니다. 그런데 입문서 중에는 폼을 태그 나열식으로 소개하고 끝나는 경우도 많아서, 실제로는 “어떻게 조합해서 쓰는지”가 머릿속에 잘 안 남는 경우가 많거든요. 그런데 이 책은 form과 input을 그냥 스펙처럼 소개하지 않고, 입력 요소들이 어떤 목적을 갖고 있고 어떤 방식으로 묶여야 하는지를 학습 흐름 안에서 자연스럽게 이해하게 해줍니다. input의 타입들이 각각 어떤 상황에 적합한지, label과의 연결은 왜 중요한지, 사용자가 입력하기 편한 화면을 만들려면 어떤 포인트를 챙겨야 하는지 같은 것들이 “한 번 학습으로 바로 이해되게” 정리돼 있어서 정말 좋았어요. 나중에 복습할 때도 “아 이건 이렇게 묶어서 쓰는 거였지” 하고 빠르게 떠올릴 수 있었습니다.

 

또 하나 더 좋았던 건 시멘틱 태그(semantic tags)를 다루는 흐름이었어요. 입문자 때 시멘틱 태그를 배우면 header, nav, main, section, article, footer 같은 것들이 한 번에 쏟아져 들어오는데, 이걸 단순 암기하려고 하면 금방 헷갈리고 “그냥 div 쓰면 안 되나?”로 돌아가게 되더라고요.

 

그런데 이 책은 시멘틱 태그를 “용어”로 가르치기보다, 문서 구조를 더 명확하게 만드는 도구로 자연스럽게 이해시키는 느낌이었습니다. 결국 시멘틱 태그는 화면을 예쁘게 만드는 기술이라기보다, 문서를 읽는 주체(브라우저/검색엔진/스크린리더/개발자 자신)에게 ‘이 영역이 무엇을 의미하는지’ 전달하는 약속이잖아요. 이 포인트가 책 흐름에서 잘 살아 있어서, 시멘틱 태그를 배우는 순간에 “아, 그래서 이 태그를 쓰는구나”가 정리되는 경험을 했습니다.

 

무엇보다도 저는 이 책의 HTML 파트가 복습하거나 스스로 정리할 때 정말 강점이 크게 느껴졌어요. 내용이 촘촘하게 연결되어 있고 정리가 깔끔하게 되어 있어서, 다시 펼쳐볼 때 “어디에 뭐가 있었지?”를 찾느라 힘을 빼지 않게 됩니다. 핵심이 강조되어 있고 흐름이 자연스럽기 때문에, 한 번 읽고 끝나는 게 아니라 필요한 순간에 다시 꺼내서 참고하기 좋은 구조였어요. 초보자 입장에서는 이런 ‘회고/정리 친화성’이 학습 효율을 크게 올려준다고 생각합니다.

2.2 CSS 파트

CSS 파트는 개인적으로 정말 만족도가 컸습니다. CSS는 배우다가 중간에 포기하는 경우가 다반사인 영역인데, 이 책은 그런 지점을 정확히 알고 있는 것처럼 체계적인 학습 순서로 내용을 탄탄하게 쌓아 올리더라고요. 단순히 속성들을 나열하는 방식이 아니라, CSS의 기본기부터 시작해서 실무에서 반드시 필요한 반응형 웹까지 자연스럽게 연결되고, 더 나아가 그리드(Grid) 레이아웃까지 “한 번에 이해가 되게” 흐름을 만들어 준 점이 특히 좋았습니다. 그래서 CSS가 어렵게 느껴지는 이유 중 하나인 “지식이 여기저기 흩어져서 머릿속에서 연결이 안 되는 문제”가 확실히 줄어드는 느낌이었어요.

 

또한 기본기를 다진 뒤에는 CSS 고급 기능으로도 확장할 수 있게 구성되어 있어서 학습 폭이 넓었습니다. 예를 들어 연결 선택자(콤비네이터)와 속성 선택자처럼 처음에는 헷갈리기 쉬운데, 제대로 익혀두면 스타일링 생산성을 크게 올려주는 개념들도 함께 배울 수 있었고, 화면을 더 자연스럽고 생동감 있게 만드는 트랜지션(transition)과 애니메이션(animation)까지 다룰 수 있다는 점도 좋았습니다. 입문자가 “기본만 하다가 끝”이 아니라, 실제로 결과물을 더 완성도 있게 만드는 단계까지 이어갈 수 있도록 길이 열려 있다는 느낌이었습니다.

 

그리고 이 책에서 인상 깊었던 건 부록 구성입니다. 보통은 부록이 책 밖으로 빠져서 출판사 홈페이지에서 따로 다운로드 받거나 PDF로 제공되는 경우가 많은데, 이 책은 부록 자체가 정말 알차게 구성되어 있었습니다. 지금까지 학습한 내용과 연결해서 AI 코딩을 직접 경험할 수 있는 파트가 준비되어 있고, 특히 부록 B에는 ‘코딩 면허 시험’ 형태로 16개의 시험이 수록되어 있어서 내가 제대로 복습했는지, 현재 내 HTML/CSS 수준이 어느 정도인지 스스로 점검하고 파악할 수 있는 구조가 마련되어 있더라고요. 학습을 끝냈을 때 막연하게 “한 번 봤다”로 끝나는 게 아니라, 시험을 통해 실력을 객관적으로 확인할 수 있는 게 큰 장점이라고 느꼈습니다.

마지막으로, 고경희님께서 유튜브로 무료 강의(저자 직강)도 제공하고 있어서 책을 읽다가 이해가 애매한 부분이 생기면 강의를 통해 명쾌하게 정리하는 데 도움이 될 것 같아요. 다만 저는 개인적으로 책의 가독성이 워낙 좋아서 책만으로도 충분히 따라갈 수 있었고, 필요할 때 강의를 참고하면 학습 효율을 더 끌어올릴 수 있겠다는 생각이 들었습니다. (사실... CSS는 결국 암기라는 것을 미리 알려드립니다🤣)

 

 

3. 학습에 도움되는 참고 사항

 

이 책의 또 다른 매력은 단순히 책만으로 끝나지 않고, 학습 지원 시스템과 커뮤니티가 정말 잘 마련되어 있다는 점이에요. 공부를 하다 보면 아무리 쉬운 내용이라도 “이 부분은 왜 이렇게 되는 걸까?”라는 궁금증이 생기잖아요. 그럴 때마다 책 뒤에 안내된 저자 깃허브(GitHub)를 통해 예제 소스를 직접 확인할 수 있고, 실습 파일을 수정하거나 비교하면서 자연스럽게 복습할 수 있습니다. 또한 더 깊이 공부하다가 막히는 부분이 생기면 네이버 이지스퍼블리싱 공식 카페(Do it! 스터디룸)를 적극 활용할 수 있습니다. 카페 안에는 같은 책으로 공부하는 독자들이 모여 있어서, 서로 질문을 주고받거나 공부 팁을 공유할 수 있고, 저자인 고경희님께서 직접 답변을 남겨주시는 경우도 자주 있습니다. 저도 과거에 질문을 남겼을 때 친절하게 설명해 주신 기억이 있어서, 이 책을 공부하면서 다시 그 따뜻한 소통이 떠올랐어요. 단순히 교재 하나로 끝나는 공부가 아니라, 함께 성장하는 학습 경험을 느낄 수 있는 부분이 정말 좋았습니다.

 

그리고 이 책만의 또 하나의 재미는 공부단 학습 일지 이벤트예요. 매일 공부한 내용을 카페에 공부단 참여 신청 이후, 꾸준히 ‘공부 일지’로 작성하고 완독에 성공하면, 이지스퍼블리싱에서 출간된 다른 서적을 무료로 받을 수 있는 이벤트가 진행되고 있습니다. 학습 자체가 동기부여로 이어지고, 완독 이후에는 또 다른 도전을 이어갈 수 있는 기회를 얻게 되니까, 책을 꾸준히 읽는 데 큰 힘이 되고, 지식도 꾸준히 쌓아가고, 훌륭한 개발자가 되는 첫 걸음이 될 것이라고 확신합니다 ✨️

Do it! HTML+CSS 웹 표준의 정석 | 고경희 - 교보문고

 

GitHub - funnycom/doit-hc

 

Do it! 스터디룸 : 네이버 카페