웹게임 GOOD LUCK은 옛날 휴대용 LCD 게임기처럼 보이도록 만들었습니다. 이미지 파일은 거의 쓰지 않고 CSS만으로 화면을 구성했습니다. 직접 써보고 효과가 좋았던 기법들을 정리합니다.
1. LCD 화면의 격자 무늬
LCD는 가까이서 보면 픽셀 사이에 가는 격자가 보입니다. 이걸 repeating-linear-gradient 두 개로 가로, 세로 줄을 겹쳐서 만들었습니다. 3px마다 1px짜리 아주 옅은 선입니다.
.lcd {
background: #b9c5a5;
background-image:
repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
linear-gradient(180deg, #b9c5a5, #a7b393);
box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), inset 0 6px 18px rgba(0,0,0,.18);
}마지막 linear-gradient는 위가 밝고 아래가 조금 어두운 화면 반사를, inset box-shadow는 화면이 본체 안으로 들어가 있는 느낌을 냅니다.
2. 색은 딱 두 가지
LCD는 "켜진 칸"과 "꺼진 칸"만 있습니다. 그래서 색을 배경(--lcd)과 글자(--seg) 두 개로 제한하고, 비활성 요소는 글자색을 투명하게 한 --ghost로 처리했습니다. 실제 LCD에서 꺼진 세그먼트가 희미하게 비쳐 보이는 것과 비슷한 효과입니다.
:root {
--lcd: #b9c5a5;
--seg: #1e2a21;
--ghost: rgba(30, 42, 33, 0.1);
}3. 버튼은 투명도 대신 모양으로 구분
처음에는 누를 수 없는 버튼을 opacity로 흐리게 했는데, 두 가지 색만 쓰는 화면에서는 켜진 버튼과 구분이 잘 안 됐습니다. 그래서 모양으로 바꿨습니다.
- 누를 수 있는 버튼: 3px 실선 테두리 + 아래로 3px 그림자. 누르면
translateY(3px)로 그림자만큼 내려가서 눌리는 느낌 - 누를 수 없는 버튼: 점선 테두리 + 연한 글자, 그림자 없음
.btn { border: 3px solid var(--seg); box-shadow: 0 3px 0 var(--seg); }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn:disabled { border-style: dashed; border-color: var(--ghost2);
color: var(--ghost2); box-shadow: none; }4. 스테이지가 오를수록 화면이 화려해진다
같은 화면만 보면 지루해서, 3스테이지마다 LCD 색과 배경 무늬, 문 장식이 한 단계씩 바뀌게 했습니다. 구현은 간단합니다. 게임 화면에 data-tier 속성을 붙이고, CSS 변수만 단계별로 덮어씁니다.
#game[data-tier="2"] { --lcd: #a6cbc9; --seg: #13303a; } /* 청록 */
#game[data-tier="3"] { --lcd: #c3b3d9; --seg: #2a1840; } /* 보라 */
#game[data-tier="4"] { --lcd: #e3c277; --seg: #3b2408; } /* 금색 */
#game[data-tier="5"] { --lcd: #e0a7b9; --seg: #3c0f22; } /* 분홍 */모든 요소가 변수를 참조하고 있어서 색 정의 몇 줄로 화면 전체가 바뀝니다. 단계가 바뀌는 순간에는 화면을 두 번 반전시키는 깜빡임과 함께 "NEXT STAGE" 문구를 띄웠습니다.
.lcd.flash { animation: flash .6s steps(1) 2; }
@keyframes flash { 50% { filter: invert(1) hue-rotate(180deg); } }steps(1)을 쓰면 중간 색 없이 뚝뚝 끊겨서 진짜 LCD처럼 보입니다.
5. 픽셀 폰트
영문과 숫자는 Google Fonts의 Press Start 2P, 한글은 오픈 라이선스 픽셀 폰트 갈무리(Galmuri)를 썼습니다. 글자가 번지지 않도록 -webkit-font-smoothing: none을 줬습니다. 픽셀 폰트는 8px의 배수 크기에서 가장 또렷합니다.
6. 공유 이미지도 같은 스타일로
게임이 끝나면 결과 카드를 1200×630 이미지로 만들어 공유할 수 있습니다. 이건 Canvas로 같은 색과 격자를 다시 그려서 만들었습니다. 브라우저 안에서 바로 생성되기 때문에 서버 비용이 들지 않습니다.
이렇게 만든 화면은 직접 보는 게 제일 빠릅니다. 12스테이지를 넘어 금색 화면까지 보실 수 있기를!