CSS 초보의 클론 코딩, 어떻게 하는 게 좋을까?

클론 코딩은 실제 있는 사이트를 그대로 배껴 보는 학습 방법을 말합니다. 강의를 보고 따라 할 수도 있고, 혼자 해 볼 수도 있습니다.

클론 코딩의 장점은 실전의 구현을 거의 그대로 해 볼 수 있다는 점입니다. 그래서 기본적인 HTML, CSS 학습을 끝낸 초보 개발자가 CSS 학습 방법으로서 클론 코딩을 한 번 해 보면 느끼는 게 많을 것입니다. 수업에서 다 가르치지 못한 다양한 레이아웃과 컴포넌트_{(구성요소)}를 만나고 고민해 볼 수 있기 때문입니다.

그런데 클론 코딩 강의가 아니라 혼자 하는 클론 코딩의 경우에는 고려할 게 좀 있습니다. 뭔가를 배우려면 그냥 존재하는 사이트를 배끼는 것으로는 충분하지 않기 때문입니다. 배우려면 좋은 코드를 봐야 합니다. 그냥 내 나름으로 구현하기만 하면 스스로의 실력을 점검하는 정도의 의미가 있을 것입니다.

따라서 반드시 이 구현을 어떻게 하는 것이 더 나은지를 볼 수 있어야 할 텐데요. 문제는 현실의 사이트들에 보고 배울 만한 좋은 코드들만 있는 건 아니라는 점입니다. 실전에서는 타협이 강제되는 경우가 많아서 그렇습니다. 짧은 프로젝트 기간, 잦은 요구사항 변경, 레거시 코드의 존재 등.

유명하고 큰 사이트를 따라하면 괜찮지 않을까 생각할 수도 있습니다. 물론 좀 나을 수는 있습니다. 그러나 큰 사이트에 맞는 구현이 모두에게도 맞다고 하기는 힘듭니다.

예컨대 몇 년 전 포털은 CSS를 작성할 때 약어도 많이 쓰고 한 줄에 CSS 프로퍼티를 다 쓰는 식으로 코드를 작성했습니다. 이 경우 트래픽 소모가 엄청나니 약자를 많이 쓰고 엔터값도 줄여서 글자 하나라도 아끼려고 그렇게 했을 지도 모릅니다. 그러나 트래픽을 아끼는 게 가장 중요하지는 않은 보통의 사이트는 약어를 최대한 자제하고 한 줄에 CSS 프로퍼티를 하나씩 써서 개발자가 읽기 좋은 코드를 작성하는 편이 더 낫습니다.

(그러고 보니 소스와 컴파일 결과물이 달라지는 점도 고려를 해야겠군요.)