코딩 학습용 게임 사이트, Codepip을 소개합니다.

 

Codepip, 게임으로 쉽고 즐겁게 CSS와 Javascript를 배워보자!

 

 

오늘은 CSS의 Flexbox, Grid 개념이나 Javascript의 Scope, ArrayList 개념 등 

 

웹 개발의 프론트엔드(Front_End) 핵심 기술들을 쉽게 체험해 볼 수 있는 Codepip을 소개합니다. 

 

 

 

MDN의 기술문서 설명, 어렵고 난해하다. 

Flexbox 등의 기술문서 설명은 문서화된 설명으로 접하면 이해하기 굉장히 어렵습니다.  

 

flexbox의 "주축" 에 대하여 간단히 설명한 것만 해도 벌써 4개의 속성이 등장합니다.

 

FLEXBOX FROGGY, CSS FLEXBOX 연습을 위한 게임 

 

 

FLEXBOX FROGGY 게임은 flexbox의 속성들을 하나씩 적어 보면서

 

어떻게 작동하는지 알 수 있는 간단한 게임을 통해서 빠르게, 그리고 즐겁게 Flexbox를 체험해 볼 수 있습니다. 

 

 

회색의 코드 칸에 flexbox의 속성들을 입력하면, 오른쪽의 개구리가 속성이 적용되는 컨텐츠(Content) 가 됩니다. 

 

이를 활용해서 화면에 나오는 모든 개구리들을 연꽃 위에 놓을 수 있다면 통과입니다! 

 

지금은 개구리가 한 마리이지만, 나중에는 무더기로 나온다.

 

GRID GARDEN, CSS 그리드 연습을 위한 게임 

 

당근 정원에 물을 주는 Grid Garden도 이해하기 어렵고 난해한 그리드 개념을 

 

쉽게 이해할 수 있도록 도와주는 좋은 게임입니다. 

 

 

 

 

당근에 물을 줄 의지만 있다면 당신도 GRID 마스터

 

Codepip, 누가 어떤 목적으로 운영하는 사이트일까?

 

Codepip의 게임들은 보통 구글링을 통한 검색으로 들어가면 계정 없이 무료로 체험해 볼 수 있습니다. 

 

다만, Codepip 사이트를 찾아 다른 게임들을 시도해보려 하면, 계정 가입과 함께 

 

최하단에 있는 요금제 배너를 볼 수 있습니다. 

 

무료 버전은 프리미엄 게임이 막혀있고, 광고가 나온다.

 

다만 영리 목적으로 운영한다기 보다는, 웹 기술에 대한 사람들의 접근성을 높이고,

 

기술의 러닝커브를 줄이기 위해서 운영하는 면이 큰 것 같습니다. 

 

 

Understanding Learning Curves and Trajectories in CSS Layout | Proceedings of the 50th ACM Technical Symposium on Computer Scien

CSS Layout에 대한 러닝커브의 이해에 관한 논문을 예시로 들며 사이트 운영 이념을 설명한다.

 

 

그 예시로, 해당 Codepip 사이트를 지원하는 단체들을 보면 유명한 기술 기업들이 눈에 띕니다. 

 

 

 

지원하는 그룹들의 목록을 자세하게 한번 살펴볼까요?

 

Smashing Magazine은 웹 디자이너, 개발자, 웹사이트 퍼블리셔를 위한 온라인 매거진입니다. 

 

CSS-Tricks는 Digital Oceans 주관의 CSS 매거진으로, Digital Oceans는 세계에서 두 번째로 큰 호스팅 업체라고 합니다. 

 

또, Mozilla는 파이어폭스(Firefox), MDN으로 웹 개발자들에게 친숙하고 많은 도움을 주는 기업이죠.

 

A LIST APART는 웹 개발자를 위한 1997년부터 시작된 아티클 사이트입니다. 

 

다들 웹이라는 업계에 있어 쟁쟁한 이력을 뽐내는 기업들이군요. 

 

사이트에 대한 신뢰성은 충분히 보장할 수 있다고 봐도 되겠습니다. 

 

 

아쉬운 단점, 느린 업데이트 주기

 

 

수익모델이 있기는 하지만, 무료로 즐길 수 있는 게임이 많기도 하고 

 

지속적으로 즐길 수 있는 게임은 아니어서 

 

업데이트가 좀 뜸하다는 것이 단점입니다. 

 

FILE의 PATH를 학습할 수 있는 게임이 2021년 11월 15일에 릴리즈 된 것을 마지막으로

 

업데이트 소식이 뜸한 것 같습니다. 

 

2021년 11월 15일에 올라온 글, 이 글을 마지막으로 추가적인 업데이트 소식은 거의 없다.

 

조만간 Javascript Scope를 쉽고 재미있게 학습할 수 있는 Sherlock Scopes 게임이 나온다고 하니 

 

기대해 보시는 것도 좋을 것 같습니다. 

 

시간이 되신다면 Codepip 홈페이지의 여러 게임들을 가볍게 즐겨보시는 것을 추천드립니다.