Frontend Mentor 시작

웹 스타일링(HTML, CSS etc.)에 익숙해지고 싶어서 어떻게 공부하면 좋을지 고민을 했다.

처음에는 자습서를 찾아봤는데 스타일링은 책으로 정독하며 공부하기가 힘들었다. 하나씩 따라하는건 어렵지 않았지만, 구현을 해도 크게 감흥이 없고 잘 외워지지가 않았다. 그래서 자습서는 해당 부분이 필요할 때 사전처럼 찾아보기로 결정하고 다른 방법을 찾았다.

두번째 방법은 게임(?)이였다. flex 레이아웃을 사용해 볼 수 있는 개구리 게임이 있었는데, 한 번 도전해보았다.

FLEXBOX FROGGY라는 페이지인데, 끝까지 깨긴 했지만… flex 말고도 나에게는 익숙해져야할 속성이 너무 많다.😂 (그래도 나중에 grid를 공부하면서 같은 제작자 분이 만든 GRID GARDEN게임도 도전해 볼 생각이다.)

결국 돌고 돌아 내가 찾은 방법은 클론 코딩이다. 사실 클론 코딩을 시작하길 조금 주저했는데, 시작하는게 너무 막막하기 때문이였다. 클론 코딩이면 그래도 따라하는 페이지와 점점 같아져야 재미있을텐데 이미지 같은 리소스는 다 어떻게 딸거며…하는 고민이 있었다. 그런데 똑똑한 제미나이가 똑똑하게 클론 코딩 사이트를 소개해줬다. 바로 FrontEnd Mentor이다.

---

Frontend Mentor는 클론 코딩할 웹 페이지의 디자인과 리소스를 제공해주고, 클론 코딩을 완료한 git repo와 라이브 페이지(ex. vercel) url을 등록하면 코드의 고칠점을 집어주고 디자인 비교샷까지 제공해준다. (pro로 업데이트하면 피그마 파일까지 준다.)

사실 Frontend Mentor에서는 서로 리뷰할 수 있는 커뮤니티를 가장 강조하는데, 기본적으로 영어로 대화해야해서 아직 나는 코멘트를 많이 남겨보지 못했다.🥲

여러 시스템이 있지만 나는 특히 Learning paths 시스템이 마음에 들었다.

단계별로 Challenge를 제시하고, 그걸 하나하나 완수해가면서 목표를 완료하는 시스템인데, 게임 퀘스트를 깨는 것 같아서 재미있었다.

무엇보다 뉴비단계로 시작했더니 나에게 수준이 딱 맞다! 리소스도 다 제공해주고 색상 코드도 있어서 정말 일감 의뢰를 받은 것 처럼 코드 작성에만 집중할 수 있다는게 특히 좋았다. 디자인 비교샷이 딱 같게 떨어지면 쾌감이 있어서 나중에 pro를 결제할지도 모르겠다.🤭

오늘 막 “Getting started on Frontend Mentor” path를 마쳐서, 내용을 정리한 후에 다음 path로 넘어가보려고한다. 지금은 React와 Tailwind CSS로 작업하고 있는데, 또 익숙해지고 싶은 라이브러리가 있으면 같은 프로젝트를 다시 해봐도 괜찮을 것 같다.