클론 코딩은 실제 있는 사이트를 그대로 배껴 보는 학습 방법을 말합니다. 강의를 보고 따라 할 수도 있고, 혼자 해 볼 수도 있습니다.
클론 코딩의 장점은 실전의 구현을 거의 그대로 해 볼 수 있다는 점입니다. 그래서 기본적인 HTML, CSS 학습을 끝낸 초보 개발자가 CSS 학습 방법으로서 클론 코딩을 한 번 해 보면 느끼는 게 많을 것입니다. 수업에서 다 가르치지 못한 다양한 레이아웃과 컴포넌트(구성요소)를 만나고 고민해 볼 수 있기 때문입니다.
그런데 클론 코딩 강의가 아니라 혼자 하는 클론 코딩의 경우에는 고려할 게 좀 있습니다. 뭔가를 배우려면 그냥 존재하는 사이트를 배끼는 것으로는 충분하지 않기 때문입니다. 배우려면 좋은 코드를 봐야 합니다. 그냥 내 나름으로 구현하기만 하면 스스로의 실력을 점검하는 정도의 의미가 있을 것입니다.
따라서 반드시 이 구현을 어떻게 하는 것이 더 나은지를 볼 수 있어야 할 텐데요. 문제는 현실의 사이트들에 보고 배울 만한 좋은 코드들만 있는 건 아니라는 점입니다. 실전에서는 타협이 강제되는 경우가 많아서 그렇습니다. 짧은 프로젝트 기간, 잦은 요구사항 변경, 레거시 코드의 존재 등.
유명하고 큰 사이트를 따라하면 괜찮지 않을까 생각할 수도 있습니다. 물론 좀 나을 수는 있습니다. 그러나 큰 사이트에 맞는 구현이 모두에게도 맞다고 하기는 힘듭니다.
예컨대 몇 년 전 포털은 CSS를 작성할 때 약어도 많이 쓰고 한 줄에 CSS 프로퍼티를 다 쓰는 식으로 코드를 작성했습니다. 이 경우 트래픽 소모가 엄청나니 약자를 많이 쓰고 엔터값도 줄여서 글자 하나라도 아끼려고 그렇게 했을 지도 모릅니다. 그러나 트래픽을 아끼는 게 가장 중요하지는 않은 보통의 사이트는 약어를 최대한 자제하고 한 줄에 CSS 프로퍼티를 하나씩 써서 개발자가 읽기 좋은 코드를 작성하는 편이 더 낫습니다.
추천: CSS 관련 리소스 활용
경험 삼아 클론 코딩을 한 번쯤 해 본 다음에는 실제로 학습할 수 있는 자원들을 참고하는 게 좋을 것입니다.
예컨대 다양한 레이아웃과 컴포넌트를 구현하는 방법을 알려 주는 학습 자원이 있습니다. CSS 프레임워크를 참고하는 것도 도움이 될 것입니다. 프레임워크는 CSS 자체를 잘 작성하는 데 관심이 있기 때문이죠.
아래는 제가 나름대로 꼽아 본 자원들입니다.
- MDN CSS Layout Cookbook: 이건 MDN에 있는 CSS 레이아웃 연습 튜토리얼입니다. MDN은 파이어폭스 브라우저 개발사인 모질라가 운영하는 웹표준 레퍼런스 사이트로 프론트엔드 분야에서 권위있는 사이트입니다.
- 부트스트랩 CSS 컴포넌트 예시들: 여기는 부트스트랩이라는 매우 유명한 CSS 프레임워크의 컴포넌트 예시들입니다. 여러 사이트에 공통으로 등장하는 패턴들을 예시로 쭉 보여 줍니다. 웹사이트의 다양한 구성요소를 연습하는 데 많은 도움이 될 것 같습니다. 모양을 보고 자기 나름으로 구현한 뒤, 부트스트랩은 이걸 어떻게 구현했는지 개발자 도구로 확인해 보면 도움이 될 겁니다.
- csslayout.io: 여러 컴포넌트와 레이아웃 패턴과 코드가 있는 사이트.
- 빔캠프 CSS 예제 만드는 방송: 클론 코딩 학습 자원입니다. 최근 생방들을 보면 클론 코딩을 하는 게 쭉 나와요. 디자인만 보고 혼자 짜 본 다음에 이 사람은 어떻게 짜는지 확인해 보면 도움이 될 겁니다.
이 채널에는 CSS 학습 내용도 많은데 그 내용도 좋습니다. - 프로젝트 중심 실전 CSS: 제가 출판사 사이트를 구현하는 과정을 통으로 보여 주는 시리즈를 유튜브로 내보내고 있습니다. 실전을 그대로 강의로 찍는 프로젝트입니다.
이후의 클론 코딩
이런 자원으로 학습을 하고 나서는 자기가 진로로 삼은 곳의 대표적인 사이트를 클론해 보면 되지 않을까 싶습니다. 예컨대 쇼핑몰에 취업하려면 쇼핑몰 사이트를 클론해 보는 식으로 말입니다.
이 때 주의할 점은, 해당 사이트의 구현이 최선이라고 여길 필요는 없다는 것입니다. 위와 같은 학습 후에 클론 코딩을 할 때는 자신의 구현과 실제 구현을 비교해 보면서 무엇이 최선일지 생각해 보는 식으로 학습해 가는 게 좋을 겁니다.
기타
방법론을 익히는 것도 필요한 일인데요. 주제를 벗어나므로 OOCSS, Utility-First CSS, Atomic CSS 같은 키워드로 검색을 해 보시기를 권합니다.
제 블로그에도 몇 가지 글이 있습니다. CSS 카테고리에서 관한 글들을 찾아 보시면 도움이 될 겁니다.
