HTML/CSS를 배우기에 가장 어려운 부분이라고 생각하는 배치하기입니다. 웹표준타입셋팅 배우기의 5.배치하기 부분은 다양하고 복잡한 상황이 병목현상을 일으키는 부분이라고 생각합니다. 하지만 박스의 기본 성질을 이해하고 브라우저가 어떻게 랜더링을 하는지를 원리적으로 이해하기 시작한다면 간단하고 쉬워집니다.

이부분은 특히 반복해서 손으로 많은 상황을 격어보는것이 중요한 부분입니다. 원리를 머리로만 이해한다고 해서 완전히 이해했다고는 보기 어렵습니다. 반드시 다양한 상황을 반복해서 연습해야만 내것으로 만들 수 있습니다.

웹표준타입셋팅 배우기 의 Basic편의 4번째장 “박스다루기” 입니다. 커리큘럼 순서대로 작업을 하고 싶었지만, 가장 중요하고 어려운 개념부터 작업을 해야 전체적으로 설명하는 방식이나 순서가 자리 잡힐 수 있을것 같아 먼저 작업하게 되었습니다.

박스다루기에서는 가장 기본이되고 중요한 박스의 개념과 용도 성질등을 다양한 예를 통해서 배우게 됩니다.
많은 분들이 막연하고 다른 상황에서 적용이 안되는 이유가 처음 언어를 설계한 엔지니어의 의도를 모르기 때문 이라고 생각합니다. 예를 들면 블록박스는 항상 상단좌측에서 부터 아래로 쌓여갑니다. 반드시 한 칸을 차지하죠. 아주 당연한 것 같지만, 이런 기본적인 성질을 이해하고 있어야 문제가 생겼을 때 이유를 파악할 수있습니다.

먼저 웹표준타입셋팅은 우리가 흔히 알고 있는 웹표준HTML/CSS라는 점을 말씀드립니다. 그럼에도여기서 만큼은 웹표준타입셋팅라는 용어를 쓰고 싶은 저의 생각을 이해해주시면 감사하겠습니다.

어떤 분야이든 배우는 사람들이 할 수 있는 공통적인 질문중에 하나가 어떻게 공부하면 되냐는 질문일것입니다. 저만의 생각인지는 모르겠지만 이렇게 물어 보실 때마다 교과서 처럼 자신있게 추천해 드릴만한 책이나 가이드가 없었습니다.

HTML/CSS자체는 누구나 쉽게 사용할 수 있도록 하자는 보편성을 철학으로 만들어 졌음에도 누구나 배울수 있도록 차근차근 가이드 해주는 뭔가가 필요한 실정이라는 생각이 많이 들었습니다. 지금까지 혼자서 공부하시는 분들의 대부분은 블로그의 글이나 이책 저책을 뒤저가며 공부할 수 있는 실정이었습니다. 물론 이렇게 하는것도 배워지는 과정이며 값지고 중요한 노력의 댓가라고 할 수 있지만, 조금더 불필요한 시행착오를 줄이고 깊은 이해를 통해 개념을 잡아갈 수 있다면, 먼 걸음을 꾸준히 배워가는데 필요한 좋은 일이 될 것이라고 생각하였습니다. 그래서 관심있는 초보자가 처음부터 차근차근 공부할 수 있도록 직접 커리를 만들고 자료를 준비해 보기로 했습니다. 아래에 있는 커리와 만들어질 자료는 한번에 만든 결과물 이라기 보다는 2년정도 관련 강의를 진행하면서 배우는 분들과 함께 실험 되어지는 피드백들을 중심으로 다듬어진 결과라고 할 수 있겠습니다.

웹표준을 강의하고 있는 저에게 있어서 교실은 실험실과 같다는 생각이듭니다. 어떻게 하면 좀 더 원리를 쉽게 있해 시킬수 있을까? 어떤 부분을 덜어내야 실패감을 줄일 수 있을까? 이렇게 교실 속에서 필요한 자료를 만들고 피드백을 받아 진행하고 있기때문에 계속해서 다듬어 질것입니다. 그래서 슬라이드별로 버전을 표시해서 피드백을 반영할 예정입니다.

Basic편의 촛점은 HTML/CSS를 배워나가는 데 있어서 튼튼한 뿌리가 될 수 있도록 하는 것이며, 여기서 못다한 내용과 오히려 알아서 더 복잡하게 만드는 내용이나 속성들은 Advanced편을 통해서 소개할 계획입니다.

내용은 ie7~모던브라우져까지를 기준으로 하였고, HTML5/CSS3에 대한 내용은 넣지 않았습니다. 단, class네임을 html5에서 새로 만들어진 태그 이름(예:<div>class=”section”</div>)을 사용하여 새로운 태그의 의미가 익숙해 지도록 만들예정입니다. HTML5/CSS3 내용을 넣지 않은 큰 이유중에 하나는 처음 HTML/CSS를 배우는 입장에서 집중해야 할 부분이 아니라고 생각하였기 때문입니다. 먼저 이해와 원리를 충분히 이해하고 나서 추가되는 개념과 속성들은 기본기 위에 추가해 나가면 되기 때문입니다.

또한 쉽게 점진적으로 알아 나아가길 바랬기 때문에 목차의 순서를 조정하는데 고민도 많았고 시간도 많이 걸렸습니다. 순서대로 보시는것이 가장 좋지만, 부득이 하게도 끝까지 완성되기 전까지는 올리는 순서대로 보셔야 할것 같습니다. 가장 어렵고 중요한 부분부터 만들어 나아가야 설명하는 방식이 정해질 수 있기 때문에 오픈하는 시점은 의도한 공부 순서에 맞출 수 가 없게 되었으니 양해를 구합니다.

한 챕터의 슬라이드가 완성되면 해당하는 세부적인 목차를 소개하고 파일과 함께 링크를 걸어두고 챕터 제목으로 하나의 포스팅을 만들겠습니다. 제목별 포스팅에 덧글로 어려운설명이거나 틀린 부분들을 피드백 주시면 업데이트해 나가겠습니다.  완료되는 시점에 세부 목차가 소개되는 이유는 쉽게 이해 되어지도록 계속해서 오락가락하면서 다듬어지기 때문에 완료될 때 쯤에야 소개될 수 있겠다 싶었습니다.

이런 저의 의도와 노력이 슬라이드에 잘 반영되었는지는 모르겠지만 자료를 만들면서  많은 바램들과 아이디어들중  저에게 있어 몇가지 원칙을 말씀드립니다.

첫째. 최대한 쉽게 설명할 것.
둘째. 점진적으로 향상되는 재미가 있을것.
셋째. 최대한 일반인이 생각할 수 있는 표현으로 기술적 원리를 설명할것.
네째. 폭넓은 이해를 경험하도록 할 것.
다섯. 실제 작업과 괴리감이 없을 것.

웹표준타입셋팅-basic (2013년 10월 완료 예정)

1. 개념과 준비v1.0 (완료)
2. 시멘틱 마크업v1.0 (완료)
3. 기초 스타일링(일부 완료)
   • 스타일 시작하기 (완료)
   • 이름짓고 선택하기 (완료)
   • 우선순위 (완료)
   • 폰트 스타일링 (작업중)
   • 텍스트 스타일링 (작업중_
4. 박스다루기 v1.1 (완료)
   • 박스로 생각하기
   • 박스타입
   • 넓이와높이
   • 여백과 간격
   • 선긋기
   • 배경색과 배경이미지
   • 박스의 용도 지정하기
5. 배치하기v1.0 (완료)
   • 일반적인 흐름(normal flow)에서의 배치
   • 떠있는 상태(float)에서의 배치
   • 절대적인 위치(absolute)에서의 배치
6. 표와 입력양식v1.0 (완료)
   • 표
   • 입력양식

웹표준타입셋팅-advanced (2014년 상반기 완료 예정)

목차 미정

뭔가 한 분야를 배운다는것은 당장의 문제를 해결하기위해 단편적이고 끊어진 정보를 머리속에 넣는 과정이 아니며, 폭넓은 이해와 깊이를 가지고 꾸준히 발전시켜나가는 무언가라고 생각했습니다.
너무 급하지 않지만 스스로에게 충분하고 분명한 시간을 주고 즐겁게 배워나갈 수 있도록 하는 것이 중요하다고 생각합니다.

가장 큰 바램이 있다면 최신기술이나 팁 위주로 만들어지기 보다는, 기본적이고 중요한 원리가 누구에게나 이해 될 수 있도록 교육 과정 전체가 디자인 되는 것입니다. 내용들을 설명하고 공유해 나가면서, 중-고생이나 일반인등 누구나 배울수 있는  쉽고 알찬 자료로 다듬어지길 바랍니다. 설명이 어려운부분이 있다면, 해당 블로그 포스팅에 덧글을 통해 알려주시면 감사하겠습니다.

디자인과 기술에 대해 깊은 관심을 가지고 난 뒤 좋은 디자이너가 되어 보고자 해서 처음 시작한 일은 의외일지 모르지만 웹표준 HTML/CSS를 공부하기로 마음먹은 일이었다. 이유는 몇가지 있었으나 먼저는 먹고 사는 문제였다. 변변치 못한 디자이너였던 나는 가족을 부양하면서도 좋은 디자이너가 되고 싶은 꿈과 멀리 떨어지지 않고 싶었다.

당시는 코더라고 한창 불리울 때고 나도 프리랜서 디자이너로써 전문 코더에 대한 인식이 그닥 좋지만은 않았지만, 도서관을 전전하며 디자인과 기술에 대한 혼자만의 공부가 끝날때쯤 코드에 대한 새로운 인식을 갖게 되었고, 공부의 결과대로 디자이너로써 괜찮은 기술을 하나 정복해야 겠다고 생각했다.

사실 나에게 있어서는 이것이 웹표준을 만난 이유이다. 웹표준은 오픈된 기술이었이고 오픈이란 곧 미래이기 때문에 당시 포토샵에 비해 투박하고 거칠어 보이는 음식이었지만, 기꺼히 소화시켜 보리라는 다짐을 하고 시작하였다.

혼자 시작해서 1년정도 공부를 하다가 책만으로는 어렵다는 판단을 하고 좋은 동료들과 충분히 경험할 수 있는 회사에 들어갔다. 초보 수준이었기 때문에 배울것이 많았고 읽을것도 많았다. 출퇴근 시간에는 주로 책을 읽고 회사에서는 코드를 짜는일이 업무이기 때문에 자연스럽게 배움이되었다. 지금 생각해보면 지나친 욕심을 내려놓지 못한점이 아쉽기만 하다. 왜냐하면 당시 HTML/CSS가 손에 익지 못했으면서도 Javascript를 시작했고 빨리 끝내고 싶은 마음으로 가득차 공부를 하면서도 듬성듬성 알아갔기 때문이다. 웹표준 자체에 대해 재밌고 충분하게 시간을 갖으면서 그때를 보냈다면 더 좋았을 것을 하는 생각이 든다.

글제목에 타입셋팅(web typesetting)이라는 말을 사용하였는데 코딩 혹은 웹퍼블리싱이라고 흔히들 많이 사용하는 말이 있음에도 불구하고 이말을 사용하는 이유는 웹퍼블리싱이라고 하는 말보다 하는 일의 관점에서 더 가깝다고 생각하기 때문이다. 그렇다고 지금 널리 사용되고 있는 웹퍼블리싱이라는 말을 바꾸자는 이야기는 아니다. 단지 나의 글에서 만큼은 하는일에 대한 좀 더 명확한 단어를 사용하여 내가 하는일이 무엇인지 좀 더 생각해 보길 바랄뿐이다.

typesetting이란, 과거 인쇄를 하기위해 글자와 기타 모양들을 식자하는 일을 말하는데 사실 지금 퍼블리셔들이 하는일이 이와 꼭 같다. 타이포그라피에 대해 관심이 있다보니 과거 타입셋팅은 식자공(typesetter)들이 금속타입들을 식자하던 것에서 사진식자, 필름을 통한 식자로 발전하였고 지금은 컴퓨터를 통한 디지털 출판으로 이어지게 된 것을 볼 수 있다. 이처럼 인쇄에 있어서 딱딱한 금속등의 물성이 없어지고 점점 소프트해지게 되었으며 결국 지금처럼 물성이 전혀 없는 디지털 즉 컴퓨터 코드로 되어지고 있다.

여기서  흥미로운 점은 그 일을 하는 사람이다. 과거에도 디자인이 끝나면 식자공을 통해 인쇄할 수 있도록 글씨들을 셋팅하는 작업을 하였는데 기술자체가 점 점 소프트해지고 누구나 다룰 수 있게 되는 컴퓨터가 등장하면서 현재로써 출판의 경우 디자이너가 직접 할 수 있게 되었다.

또한 타이포그라피에 관련된 책들을 보면 식자공과 디자이너의 사이에 생기는 Gap때문에 그 당시에도 이슈가 있었던 것을 알 수 있는데 기술이 발달 하면서 식자공과 같이 기술이 대체할 수 있는 직군은 다른 직군과 달리 사라지기 쉽다는 것도 알게 되었다. 여기서 사라진다는 의미는 보편적인 상황의 표현이다. 예를들어 아직도 전문 식자공들은 남아있다. 하지만 이것은 특수한 목적에서의 일이지 보편적으로 우리가 보는 책을 식자공들이 만들고 있지는 않다.

흥미로운 사실중 하나는 유명 타이포그라퍼 중에 식자공들이 있었다는 것이고 조금전에 말했던 Gap을 스스로 두가지 영역을 소화함으로써 없앨수 있었지 않나 하는 생각이 들었다. 마치 의자를 만드는 장인이 원하는 나무를 어느 정도까지 휠수 있는지를 알때 디자인의 극한을 끌어 낼수 있는것 처럼 말이다. 이런 부분에서 지금의 통섭과 융합이란 말은 과거에도 여전히 중요했었고 지금도 앞으로도 뭔가의 ‘사이’에 존재한다는 것은 대단히 중요하다는 것을 알 수 있다.

이런 관점으로 웹표준을 볼때 국제적으로 표준 규격을 만들고 이에 따라 글과 그림등의 하나의 메세지를 구성하는 요소를 자리잡는 일 이라고 할 수 있을 것이다. 그렇게 html,css로 셋팅된 글과 그림들은 웹이라는 거대한 관계안에 들어가게 되고 표준화 되어있는 코드들은 그 거대함 정보의 관계속에서 누군가가 요청하고 원할때 혹은 알아서 스스로 우리에게 가져다 줄 수 있는 정보가 되는 것이다. 물론 의미론적인 웹표준만을 이야기 한 것 이지만, 지금과 미래에 웹을 만드는 사람들은 이런 의미적인 측면과 시각적인 측면 그리고 구조적인 측면을 모두 만족시켜야 하기 때문에 인식하고 있어야 한다고 생각한다.

이렇게 3가지 측면을 만족하는 웹을 만들기 위해서 지금은 웹 퍼블리셔와 같은 전문인력이 필요한 상황이다
하지만, 과거에 그랬듯이 기술(브라우저와 기술스펙, 그리고 저작툴)이 발전되는 상황이 계속되는한 결국 보편적인 상황에서는 기술이 대체할 수 있을것이라 생각한다. 예를 들면 해외에서 처럼 디자이너가 직접 해결할 수도 있다.

이런점은 기술(구현)과 디자인(생각) 사이의 불편했던 점을 해소해 주어서 더 가볍고 빠른 웹으로 발전해 나아갈 수 있다고 생각한다.  그렇다고 현재 전문 웹타입셋터(웹 퍼블리셔)들이 모두 사라진다는 말은 아니다. 가까운 미래까지는 여전히 전문 웹타입셋터들은 꼭 필요한 존재일것이고 다만 이후에는 대형사이트 구축이나 조직에 한두명씩 배치되어 일하게 되지 않을까 생각한다. 웹디자이너는 웹타입셋팅을 하게 되겠지만, 그렇다고 전문적으로 그것만하는 웹타입셋터가 된다는 말은 아니다.