Idea into reality now

CSS만으로 레트로 LCD 게임기 화면 만들기

웹게임 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..

가비아 도메인을 Cloudflare로 옮겨 티스토리와 서브도메인 서비스 함께 쓰기

가비아에서 산 도메인으로 티스토리 블로그를 운영하고 있었습니다. 여기에 직접 만든 웹 서비스를 서브도메인.내도메인.kr 형태로 붙이고 싶었습니다. 블로그는 그대로 두고 말이죠. Cloudflare를 DNS로 쓰면 이게 깔끔하게 됩니다. 실제로 하면서 막혔던 부분까지 순서대로 정리합니다.목표 구성www.ideality.kr → 티스토리 블로그 (그대로)ideality.kr → www로 이동goodluck.ideality.kr → Cloudflare Workers로 만든 웹게임1단계: Cloudflare에 도메인 추가Cloudflare 대시보드 → Add a domain → 도메인 입력 → Free 플랜 선택Cloudflare가 기존 DNS 레코드를 자동으로 스캔합니다. 티스토리용 레코드(www CNAME ..

Cloudflare Workers + D1로 조작할 수 없는 랭킹 웹게임 만들기

웹게임에 랭킹을 붙이면 반드시 조작 시도가 들어옵니다. 브라우저 개발자 도구로 점수를 바꾸거나, 정답을 미리 읽거나, 스크립트로 수천 판을 돌리는 식입니다. GOOD LUCK을 만들면서 이런 시도를 구조적으로 막기 위해 적용한 방법을 정리합니다. 서버는 Cloudflare Workers, DB는 D1(SQLite)이고 프론트엔드는 빌드 없는 바닐라 자바스크립트입니다.1. 문 배치는 서버에만 존재한다가장 중요한 원칙입니다. 문 10개 중 어느 것이 PASS인지는 서버에서 만들고 서버에만 저장합니다. 브라우저가 받는 정보는 "PASS 6개, FAIL 3개, ITEM 1개가 남아 있다" 같은 개수와, 투시로 이미 드러난 문의 정체뿐입니다.// 클라이언트에 보내는 상태: 정체 모르는 문은 종류별 개수만expor..

순전히 운으로만 하는 웹게임 GOOD LUCK을 만들었습니다

실력이 전혀 필요 없는 게임을 하나 만들었습니다. 이름은 GOOD LUCK입니다. 옛날 휴대용 LCD 게임기처럼 생긴 화면에 문 10개가 있고, 그중 하나를 고르면 끝입니다. 통과하면 다음 스테이지, 꽝이면 게임 오버. 판단할 거리가 거의 없어서 오히려 손이 계속 가는 게임입니다.👉 바로 해보기: https://goodluck.ideality.kr (가입 없음, 무료)규칙은 이게 전부입니다PASS 문: 다음 스테이지로 넘어가고 점수와 코인을 받습니다.FAIL 문: 게임 오버. 그때까지 모은 점수가 랭킹에 기록됩니다.ITEM 문: 스테이지를 통과하면서 아이템도 하나 받습니다.문은 항상 10개입니다. 1스테이지에는 PASS 문이 8개쯤 있어서 대부분 통과합니다. 하지만 3스테이지마다 PASS 문이 하나씩 ..