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

,

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

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

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

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

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

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

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

추천: CSS 관련 리소스 활용

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

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

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

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

이후의 클론 코딩

이런 자원으로 학습을 하고 나서는 자기가 진로로 삼은 곳의 대표적인 사이트를 클론해 보면 되지 않을까 싶습니다. 예컨대 쇼핑몰에 취업하려면 쇼핑몰 사이트를 클론해 보는 식으로 말입니다.

이 때 주의할 점은, 해당 사이트의 구현이 최선이라고 여길 필요는 없다는 것입니다. 위와 같은 학습 후에 클론 코딩을 할 때는 자신의 구현과 실제 구현을 비교해 보면서 무엇이 최선일지 생각해 보는 식으로 학습해 가는 게 좋을 겁니다.

기타

방법론을 익히는 것도 필요한 일인데요. 주제를 벗어나므로 OOCSS, Utility-First CSS, Atomic CSS 같은 키워드로 검색을 해 보시기를 권합니다.

제 블로그에도 몇 가지 글이 있습니다. CSS 카테고리에서 관한 글들을 찾아 보시면 도움이 될 겁니다.

사진 Anton Maksimov 5642.su

카테고리 글 목록 👉

,

대표글

댓글 남기기