Idea into reality now

휴대폰 배경화면은 하루에도 수십 번 보는 화면인데, 대부분 사진 한 장으로 고정돼 있습니다. 좋아하는 영상을 배경으로 틀어 두고, 그 위로 작은 캐릭터가 아이콘 사이를 걸어 다니면 어떨까 싶었습니다. 그래서 만든 안드로이드 앱이 Wallive입니다. Wall(배경화면)과 Live(살아 있는)를 합친 이름입니다. 지금은 Google Play 출시를 준비하고 있습니다.왼쪽: 완성된 홈 화면. 캐릭터가 아이콘 뒤를 걸어 다닙니다. 오른쪽: 편집 화면. 미리보기 위에서 캐릭터 자리와 움직임을 정합니다.어떤 앱인가요한 줄로 말하면 "영상 배경화면 위에 내 캐릭터를 얹어 움직이게 만드는 앱"입니다. 갤러리의 영상, GIF, 사진을 배경으로 고르고, 그 위에 GIF·WebP·PNG 이미지를 캐릭터로 올립니다. 캐릭터..

여행을 다녀오면 사진은 수백 장인데, 어디서 무엇을 했는지는 금방 흐려집니다. 계획은 메모 앱에, 예약 확인서는 메일함에, 지도는 구글 지도에, 사진은 갤러리에 흩어져 있기 때문입니다. 이걸 한곳에 모아 여행을 한 편의 단편영화처럼 계획하고 기록하는 앱을 만들고 있습니다. 이름은 단편(Shortfilm)입니다. 아직 개발 중이고, 이 글은 그 첫 번째 개발 일지입니다.아이디어여행 전에는 일정을 짜고, 여행 중에는 실제로 움직인 경로와 사진이 쌓이고, 여행이 끝나면 그 기록이 한 편의 짧은 영화처럼 남는 앱입니다. 다만 여행 중 화면에서는 영화 용어를 쓰지 않기로 했습니다. 걷고 있는 사람에게 "씬"이나 "촬영" 같은 말은 오히려 헷갈립니다. 영화 이야기는 여행이 끝난 뒤의 결과물에만 씁니다.지금까지 만든..

'스위치온 다이어트'를 해보신 분이라면 아실 겁니다. 4주 동안 주차별로 먹는 것, 먹는 시간, 단식일이 계속 바뀝니다. 책이나 표를 옆에 두고 "오늘은 2주차 3일차니까 점심에는…" 하고 매번 확인하는 게 생각보다 번거롭습니다. 그래서 이 과정을 하루 일정으로 바꿔 주는 앱 스위치온 바디를 만들고 있습니다. 지금은 Google Play 비공개 테스트 단계입니다.어떤 앱인가요한 줄로 말하면 "오늘 무엇을, 언제 먹고, 언제 움직이고 쉬어야 하는지 알려주는 앱"입니다. 처음에 나이, 성별, 키, 몸무게, 활동량과 평일 기상·식사·취침 시각을 입력하면 4주 프로그램이 내 생활 시간에 맞춰 펼쳐집니다.왼쪽: 오늘 화면. 지금 몇 주차 며칠째인지, 다음 일정과 다음 단식까지 남은 날을 보여 줍니다. 오른쪽: 입..

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

가비아에서 산 도메인으로 티스토리 블로그를 운영하고 있었습니다. 여기에 직접 만든 웹 서비스를 서브도메인.내도메인.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 ..

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

문 10개 중 하나를 고르는 게임 GOOD LUCK을 만들면서 가장 오래 고민한 것은 난이도였습니다. 너무 쉬우면 금방 지루하고, 너무 어려우면 1스테이지에서 다 떨어집니다. 이 글에서는 실제 게임에 들어간 확률을 계산해 보고, 몇 스테이지까지 가면 잘한 건지 정리해 봤습니다.처음 버전은 아무도 1스테이지를 못 넘었다첫 버전은 문 개수가 스테이지마다 늘어나고 PASS 문은 적은 구조였습니다. 직접 해보니 1스테이지에서 떨어지는 일이 너무 많았습니다. 그래서 규칙을 이렇게 바꿨습니다.문은 항상 10개로 고정PASS 문은 1스테이지에 8개(80%)로 시작3스테이지마다 PASS 문이 1개씩 줄어들고, 2개(20%)에서 멈춤매 스테이지마다 PASS 개수가 ±1 무작위로 흔들림25% 확률로 FAIL 문 하나가 I..

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