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

2023년 7월 29일

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

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

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

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

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

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

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

추천: CSS 관련 리소스 활용

경험 삼아 클론 코딩을 한 번쯤 해 본 다음에는 실제로 학습할 수 있는 자원들을 참고하는 게 좋을 것입니다.

예컨대 다양한 레이아웃과 컴포넌트를 구현하는 방법을 알려 주는 학습 자원이 있습니다. CSS 프레임워크를 참고하는 것도 도움이 될 것입니다. 프레임워크는 CSS 자체를 잘 작성하는 데 관심이 있기 때문이죠.

아래는 제가 나름대로 꼽아 본 자원들입니다.

MDN CSS Layout Cookbook: 이건 MDN에 있는 CSS 레이아웃 연습 튜토리얼입니다. MDN은 파이어폭스 브라우저 개발사인 모질라가 운영하는 웹표준 레퍼런스 사이트로 프론트엔드 분야에서 권위있는 사이트입니다.
부트스트랩 CSS 컴포넌트 예시들: 여기는 부트스트랩이라는 매우 유명한 CSS 프레임워크의 컴포넌트 예시들입니다. 여러 사이트에 공통으로 등장하는 패턴들을 예시로 쭉 보여 줍니다. 웹사이트의 다양한 구성요소를 연습하는 데 많은 도움이 될 것 같습니다. 모양을 보고 자기 나름으로 구현한 뒤, 부트스트랩은 이걸 어떻게 구현했는지 개발자 도구로 확인해 보면 도움이 될 겁니다.
csslayout.io: 여러 컴포넌트와 레이아웃 패턴과 코드가 있는 사이트.
빔캠프 CSS 예제 만드는 방송: 클론 코딩 학습 자원입니다. 최근 생방들을 보면 클론 코딩을 하는 게 쭉 나와요. 디자인만 보고 혼자 짜 본 다음에 이 사람은 어떻게 짜는지 확인해 보면 도움이 될 겁니다.
이 채널에는 CSS 학습 내용도 많은데 그 내용도 좋습니다.