기발자의 개발 노트

키즈가오는 광고회사를 나와서 합류한 KLOZEUP 스타트업에서 처음으로 맡은 외주 작업이다. 개발 공부를 3개월 하고 투입된 개발자(?) 1명, 편집 디자인을 위주로 작업한 디자이너 1명, 문화 기획 대학원을 졸업한 기획자 1명이 키즈가오 외주 작업에 투입되었다. 그나마 광고회사에서 웹 사이트 기획을 경험한 필자를 빼면 웹 제작 경험이 전혀 없는 사람이 모인 셈이다. 이렇게 모인 사람들이 우여곡절을 거치며 만든 첫 사이트가 키즈가오이다. 덕분에 기획자나 디자이너와 소통하는 방법, 웹 사이트를 제작할 때 고려해야 할 요소, HTML과 CSS 코드를 활용하는 방법 등 책에서는 결코 배울 수 없는 상황별 대처 방법을 몸으로 익힐 수 있었다.

제작 기간은 기획, 디자인, 개발까지 약 4개월이 걸렸다. 사이 사이에 기획과 디자인 시안 변경, 클라이언트 요청 사항으로 코드를 스무 번 넘게 수정해야 했다. position 속성의 상관관계나 float 속성을 사용할 때 주의해야 할 사항 등 기존 개발서나 블로그에서는 소개하지 않은 내용을 스무 번이 넘는 수정 경험 덕분에 몸으로 배울 수 있었다.

▲ 스무 번 넘게 수정 작업을 한 correct, real, final 폴더

이 책에서 소개한 모든 HTML과 CSS 개념은 키즈가오 웹 사이트를 제작하면서 몸으로 익힌 내용이다. 지금이야 좋은 경험이었다고 웃으며 말할 수 있지만 당시에는 모든 개발 문제를 스스로 해결해야 했기에 부담감이 이루 말할 수 없었다.

특히 이번 시간에 소개한 introWrap 서랍장을 아래로 내리는 작업에만 자그마치 사흘이 걸렸다. 부모 자식 간에 발생하는 마진 병합 현상은 분명 처음 HTML과 CSS를 학습할 때 생활코딩이나 기타 블로그에서 배운 내용이었다. 하지만 막상 실전에서 문제가 생겼을 때는 떠오르지 않았다. 문제를 해결하기 위해 여러 개발자 커뮤니티에 질문을 올렸고 사흘이 지난 후에야 비로소 어느 개발자의 조언 덕분에 병합 현상을 떠올릴 수 있었고 그제서야 문제를 해결할 수 있었다.

이번 시간에 배운 내용은 웹 사이트 레이아웃을 작업할 때 자주 마주치는 현상들이다. 꼭 여러 번 반복해서 학습하여 머리와 몸으로 기억해 두길 바란다.