가상 정원 게임으로 배우는 CSS Grid

• Grid Garden은 CSS 코드를 작성해 당근 정원에 물을 주는 게임형 학습 도구로, CSS Grid 배치를 단계별로 연습하게 함
• 첫 단계는 당근이 있는 영역에만 물이 닿도록 grid-column-start 속성으로 시작 열을 지정하는 방식임
• grid-column-start: 3;은 왼쪽에서 세 번째 세로 그리드 선부터 물을 주는 영역을 시작하게 함
• 예제 정원은 display: grid와 grid-template-columns, grid-template-rows로 구성된 5x5 그리드이며, 각 행과 열이 20%씩 나뉨
• 전체는 28개 레벨로 구성되며, CSS를 더 배우고 싶다면 Flexbox Froggy와 Anchoreum으로 이어서 학습할 수 있음

---

CSS Grid를 게임 규칙으로 익히는 방식

• Grid Garden은 CSS 코드를 입력해 당근 정원을 키우는 게임임
• 플레이어는 당근이 있는 영역에만 물을 주도록 CSS Grid 속성을 조정함
• 첫 레벨에서는 grid-column-start로 물이 시작되는 열 위치를 지정함

첫 레벨: grid-column-start와 5x5 정원

• grid-column-start: 3;은 그리드의 왼쪽에서 세 번째 세로 경계선부터 물을 주는 영역을 시작함
• 예제 코드의 #garden은 CSS Grid 컨테이너로 설정됨
  • display: grid;
  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-rows: 20% 20% 20% 20% 20%;
• 이 설정은 열과 행이 각각 20%씩 나뉜 5x5 그리드를 만듦

레벨 구성과 이어서 해볼 게임

• 화면에는 28개 레벨 중 1레벨이 표시됨
• CSS를 더 배우는 게임으로 Flexbox Froggy와 Anchoreum이 함께 안내됨

[GN⁺]

Hacker News 의견들

• Rachel Andrews의 이 시리즈는 늘 훌륭한 학습 자료라고 느꼈음: https://www.smashingmagazine.com/2020/01/understanding-css-g...
  백엔드를 하는 입장에서도 현대적인 UI 앱을 가볍고 단순하게 만들 수 있는 탄탄한 기반을 줬음
  Bootstrap도 Tailwind도 필요 없었음

  • Bootstrap은 CSS를 잘 몰라도 간단한 건 버틸 수 있게 CSS를 추상화해 주지만, Tailwind는 그냥 토큰화된 CSS에 가까움
    CSS를 모르고는 Tailwind를 쓸 수 없고, 쓰는 과정에서 CSS를 배우게 됨
    그래서 오히려 꽤 가볍고 단순하다고 느껴짐
  • Jen Simmons의 Layout Land 영상 시리즈도 추천함: https://www.youtube.com/layoutland
  • Bootstrap은 애초에 CSS Grid나 Flexbox를 신경 쓰고 싶지 않을 때 쓰기 위한 쪽에 가까움
    반면 Tailwind는 그 부분을 대신해 주지 않음
    Grid나 Flexbox를 모르면 Tailwind도 순수 CSS만큼 고생스러울 수 있음

• 이 게임은 꽤 좋고 재미있지만, “실제로 어떻게 동작하는가”에 집중하기보다 값을 이리저리 실험해서 현재 문제만 푸는 유혹이 큼
  더 깊은 이해로 이어지려면 문제를 푸는 자유도는 더 주되, 2~3번 이상 시도하면 작은 페널티를 주는 방식도 가능해 보임

  • 프런트엔드 코드를 쓰는 입장에서, 특히 CSS는 늘 시행착오이고 말한 것처럼 무차별 대입에 가까울 때가 많음
    비슷한 문제를 두드리며 배운 걸 활용하면서, 될 때까지 만져 봐야 하는 순간이 있음
  • 자기 절제 문제를 게임 탓으로 돌릴 수는 없음

• 몇 가지 잡다한 메모:

  1. 좋은 점: 답을 절대 위치로 검증함
     그래서 유효한 답이면 그리드가 아닌 방식까지 포함해 레벨을 통과할 수 있음
  2. 별로인 점: 매 시도마다 Google Analytics를 보냄
  • 1번에 대해서는, 첫 번째 과제의 견고한 해법이 position: relative; left: 31.4em;이라는 데 모두 동의할 듯함

• 예전에 다니던 곳에서 매주 30분 정도 팀과 쇼앤텔을 했는데, 어느 주에 이걸 가져와서 코딩을 안 하는 사람들이 답을 내보게 했음
  어디까지 갈 수 있는지 보는 게 흥미로웠고, 어떤 사람은 바로 이해하고 어떤 사람은 꽤 어려워했음
  전반적으로 다들 좋아했고, 평생 코딩할 일이 없을 사람들에게 기본적인 프로그래밍 감각을 길러 주는 좋은 방법이었다고 봄
  몇 년 뒤에도 동료들이 “네가 하루 종일 하는 게 이런 거야?” 식으로 꺼내곤 했는데, 내 일에서 가장 쉬운 부분인데도 마술사처럼 봐서 웃겼음
  그래도 직접 조금 해본 덕분에 일을 더 존중하게 된 것 같아 좋았음

• Flexbox가 CSS의 판도를 바꿨다고 생각했는데, 그다음 Grid가 나왔고 정말 놀랍고 예측 가능했음
  이제 CSS에서 남은 고통은 “형제 요소들이 안 쓰는 남은 공간을 어떤 컴포넌트가 차지하고, 그 자식 중 하나도 자기 형제들이 안 쓰는 걸 전부 차지하다가 공간이 부족하면 스크롤 오버플로가 되어야 한다” 같은 이상한 경우임
  Flexbox와 Grid 사이의 이상한 상호작용, 그리고 크기 산정 레이아웃의 우선순위가 얽히는 사례가 여럿 있는데 아직 완전히 이해하지 못했음
  대부분 내 문제일 수 있지만, Flexbox나 Grid 자체와 달리 여전히 직관적이지 않게 느껴짐

• 잠깐 https://csszengarden.com/pages/about/ 얘기인 줄 알았음
  오래전에는 CSS를 배우고 디자인 영감을 얻기에 놀라운 자료였음

  • 그 시절을 아직도 웹 개발의 황금기로 봄
    웹 표준 운동의 결실이 나타나기 시작하던 때였음
    안타깝게도 그 뒤 React가 왔고 좋은 것들이 창밖으로 던져졌음
    태그 수프도 node_modules 깊숙이 묻혀 있으면 먹을 만해지는 모양임

• 예전의 큰 논의 몇 개:
  2019: https://news.ycombinator.com/item?id=21050501
  2018: https://news.ycombinator.com/item?id=18753358
  2017: https://news.ycombinator.com/item?id=14041367

• 이 게임과 Flexbox Froggy는 CSS 레이아웃에 재미있게 입문하기 좋음

  • 웹사이트가 Flexbox Froggy로 링크하긴 하지만 계정 등록이 필요한 링크를 거침
    직접 접속하려면 https://flexboxfroggy.com/로 가면 됨

• 작업 중인 작고 단순한 웹 프런트엔드 문제에 좋은 해법을 찾는 데 도움이 되길 바랐음
  그런데 처음 10레벨을 하고 나니 CSS가 더 싫어졌음

• CSS Grid가 싫은 이유는 HTML의 의미 구조를 거의 빼앗아가기 때문임
  Flexbox는 적어도 HTML 트리가 페이지의 어떤 구조와 대응되지만, CSS Grid를 쓰면 이런 식으로 보이게 됨
  <-! random amount of divs without classnames -->
  그러면 페이지에서 무슨 일이 일어나는지 이해하려면 갑자기 CSS와 대조해 봐야 함
  매우 효과적이긴 해도 보기 흉함

  • 다른 주제이긴 하지만, HTML과 CSS 사이의 모든 관계를 이해하고 수동으로 기호를 대조하지 않아도 시각적으로 조작하게 해 주는 IDE가 있다면 해결될 수 있음