CSS를 배우는 일은 때때로 답답하게 느껴질 수 있지만, 지루할 필요까지는 없습니다! 코딩 학습의 매력 중 하나는 코딩을 잘하는 사람들이 다른 사람에게 코딩을 가르치는 게임을 만들 기술도 함께 갖추고 있다는 점입니다. 기본적인 CSS를 익히는 데에는 연습과 실험에 대체할 방법이 없지만, 게임은 분명 큰 도움이 됩니다. 특히 그리드(grid)나 플렉스박스(flexbox) 같은 최신 레이아웃 모델은 직접 손으로 해보는 학습 방식에서 더욱 효과를 발휘합니다.
아래 소개하는 게임들을 활용하면 CSS를 빠르게 익힐 수 있습니다.
1. CSS Diner – CSS 선택자
"꽤 기본적이지 않나?"라고 생각하실 수 있습니다. 요소, 클래스, 아이디… 어쩌면 의사 클래스(pseudo-class) 정도? 하지만 실제로는 생각보다 훨씬 다양한 방법으로 요소를 선택할 수 있으며, CSS Diner는 여러분이 이를 익히도록 돕기 위해 CSS로 음식 조각들을 선택하는 과제를 제시합니다. 일부 챌린지는 다소 헷갈릴 수 있지만, 이것이 바로 코딩입니다. 검색해서 찾아보는 것에 부끄러워할 필요는 전혀 없습니다.
2. Flexbox Zombies
Flexbox Zombies는 놀랄 만큼 완성도 높은 게임 겸 강좌로, 직관적이고 몰입감 있으며 스스로 반복 학습되는 게임 방식으로 플렉스박스 사용법을 가르쳐 줍니다. 대부분의 내용은 플렉스박스 코드로 조작되는 무기를 들고 좀비를 사격하는 형식으로 진행됩니다. 기초부터 고급 내용까지 여러 레벨로 구성되어 있으며, 스토리라인과 멋진 그래픽, 좀비 사냥 액션이 함께 제공되다 보니 어느새 CSS를 배우고 있다는 사실조차 잊게 될지도 모릅니다.
플렉스박스 자체는 한 차원(행 또는 열)을 따라 콘텐츠를 반응형으로 배치하기에 훌륭한 기술입니다. 프론트엔드 웹 개발을 하는 사람이라면 반드시 익혀야 할 기술이기도 합니다. 미루고만 있었다면, Flexbox Zombies는 실제로 유용한 것을 배울 수 있는 게임을 즐길 완벽한 명분이 되어 줄 것입니다. 모든 교육이 이런 식이라면 얼마나 좋을까요?
참고로 같은 개발자가 CSS Grid를 위한 게임 강좌인 "Grid Critters"도 만들었습니다. 무료는 아니지만, Flexbox Zombies가 마음에 드셨다면 비용을 지불하고 이용해 볼 가치가 충분합니다.
3. Grid Garden
개인적으로 플렉스박스도 훌륭하지만, 진정한 빛을 발하는 곳은 행 또는 열처럼 한 방향(1차원) 레이아웃입니다. 따라서 규모가 더 큰 프로젝트나 템플릿 작업 시에는 그리드로 전환하는 것이 좋습니다(그리드 셀 안에 플렉스박스 컨테이너를 넣는 방식도 가능합니다). 한번 익히고 나면 깔끔하고 놀라운 도구이지만, 다소 학습 곡선이 존재합니다. 바로 이 지점에서 Grid Garden(그리고 앞서 언급한 Grid Critters)이 도움이 됩니다.
Grid Garden은 무료 게임으로, 당근에는 물이 가고 잡초에는 제초제가 뿌려지도록 정원을 배치해야 합니다. 그리고 놀랍게도 그리드가 이 작업에 딱 맞는 도구입니다! 이 게임을 통해 그리드 포지셔닝의 기본기를 탄탄히 다질 수 있으며, 이후 자신의 사이트 레이아웃에 바로 적용할 수 있습니다.
4. Flexbox Defense
플렉스박스의 기본은 알지만 "justify"와 "align"이 자꾸 헷갈리시나요? Flexbox Defense는 타워 디펜스 게임으로 위장한 플렉스박스 튜토리얼로, justify-content와 align-self를 확실히 기억하도록 만들어 줍니다. 물론 실패하더라도 다시 도전하면 됩니다. 정답이 하나뿐인 게임이 취향이 아니라면 이 게임이 마음에 들 것입니다. 타워를 원하는 위치에 자유롭게 배치하고 성공과 실패를 스스로 판단할 수 있기 때문입니다.
5. Flexbox Froggy
기존의 플렉스박스 튜토리얼만 진행해도 오후 내내 게임을 즐길 수 있을 정도지만, 기억을 확실히 새기기 위해서는 며칠 또는 몇 주에 걸쳐 나눠서 학습하는 것이 좋습니다. Flexbox Froggy는 바로 그 용도에 딱 맞습니다. 처음부터 차근차근 가르쳐 주지는 않지만, 명령어가 가물가물해졌을 때 몇 분 만에 게임을 클리어하며 감을 되살리기에 완벽합니다.
6. CodePip Games
Grid Garden과 Flexbox Froggy를 체험해 보셨다면 이미 CodePip의 작품을 접해 본 것입니다. 이 두 가지는 CodePip이 무료로 제공하는 게임일 뿐입니다. 해당 사이트에서 프로 계정에 가입하면 일반 CSS 복습부터 JavaScript까지 다양한 게임을 추가로 이용할 수 있습니다.
이 게임들로 어느 정도까지 배울 수 있을까?
이 게임들을 진행하면 기본 개념을 꽤 탄탄히 익힐 수 있습니다. 특히 플렉스박스를 배우고자 한다면 더욱 그렇습니다. 하지만 결국 게임이 가르쳐 줄 수 있는 것은 어떤 단어를 입력해야 하는지뿐입니다. 실제로 활용하는 방법을 익히려면 직접 실전에 적용해 봐야 합니다. 좋은 코드 에디터를 준비하고, 구현해 보고 싶은 아이디어를 떠올린 뒤 마음껏 만져보세요!