Dev.to 프론트엔드 챌린지 '컴포트 푸드' 편 수상작 발표
Dev.to가 프론트엔드 챌린지 컴포트 푸드 편의 수상작 두 편을 공개했다. CSS만으로 고양이 베이커리를 그린 작품과 베트남 밥상을 청동 북 위에 올린 랜딩 페이지가 각 부문을 차지했다.
Congrats to the Frontend Challenge: Comfort Food Edition Winners!
We are so excited to announce the winners of our Frontend Challenge: Comfort Food Edition! This...
개요 #
Dev.to가 프론트엔드 챌린지: 컴포트 푸드 편 수상작을 발표했다. 주제는 단순했다. 나에게 의미 있는 음식을 웹으로 옮겨보라는 것.
들어온 작품의 폭이 넓었다. 상상 속 식당, 넘칠 듯 담긴 국수 그릇, 지역 음식이 화면을 채웠다. CSS로 만든 냉장고 속까지 들여다볼 수 있었고, 스크롤을 내리다 보면 입에 침이 고이는 랜딩 페이지도 있었다. 접근성을 진지하게 챙긴 작품이 많았고, 참가자들이 남긴 후기는 잘된 점만큼이나 실패한 부분을 솔직하게 풀어놨다.
수상작 #
CSS 아트 부문 — Kitty Cafe #
Kitty Cafe: A Whole Bakery Drawn in CSS →
@sizzlebop은 베이커리 하나를 통째로 CSS로 그렸다. 그리고 진열장 안의 모든 품목을 고양이로 바꿨다. 귀 달린 마카롱, 말차 컵케이크, 타이야키, 발자국 쿠키, 스프링클이 지나치게 많이 뿌려진 도넛, 그리고 선반 위에는 48시간 전에 예약해야 살 수 있는 고양이 케이크 한 판이 올라가 있다.
이미지도, SVG도, canvas도, 자바스크립트도 쓰지 않았다. 작성자 표현대로 "수염 한 올까지 전부 border-radius를 먹인 div"다. 가게 고양이는 클릭하면 깨어나고 시간이 지나면 알아서 다시 존다. 바닥에 떨어진 실뭉치는 집어서 고양이에게 건넬 수 있다. 이 모든 동작이 체크박스 상태 머신 위에서 돈다. 키보드만으로도 전체 조작이 가능하고, 화면이 좁아지면 메뉴가 일반 텍스트로 한 번 더 제공된다.
Photo by RealToughCandy.com on Pexels
랜딩 페이지 부문 — Mâm Cơm #
Mâm Cơm Landing Page: I Built a Vietnamese Dinner Tray on a 3000-Year-Old Bronze Drum →
@minhlong2605이 만든 Mâm Cơm은 베트남 가정식 밥상을 소개하는 랜딩 페이지다. 배경으로는 기원전 1000년경에 주조된 동선(Đông Sơn) 청동 북의 표면을 깔았다. 가운데 놓인 밥상은 돌아가는 회전판이다. 드래그, 스와이프, 클릭, 방향키 어느 쪽으로도 돌릴 수 있는데, 구현은 ARIA tablist를 원형으로 휘어서 만들었다.
후기 글도 페이지만큼 공들여 썼다. 자동 검사 도구가 전부 놓쳤던 대비(contrast) 버그, 한 번 만들었다가 "더 잘 렌더링되는 더 나쁜 아이디어"라는 이유로 버린 3D 버전, 눈으로는 멀쩡한데 수치를 재보면 틀린 레이아웃 버그 몇 가지를 차례로 짚었다. 코드도 음식도 배울 게 많은 글이다.
상품 #
두 수상자 모두 아래 두 가지를 받는다.
- DEV++ 멤버십
- 수상자 전용 배지
유효한 제출작을 낸 참가자 전원에게는 DEV 프로필에 완주 배지가 지급된다.
다음 챌린지 #
Dev.to는 새 챌린지 두 개를 준비 중이다. 각 페이지에서 지금 등록해두면 공개 시점에 알림을 받을 수 있다.
- Sanity Challenge — 9월 16일 시작
- Kaggle Challenge — 9월 23일 시작
이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.