describug
← 만든 것

색칠하기

운영중

5살 딸이 아이패드로 색칠하는 앱. 도안을 고르고, 칠하고, 스티커를 붙입니다.

연도
2026
스택
HTMLCanvasPWA

5살 딸이 색칠을 좋아합니다.

처음에는 필기 앱을 썼습니다. 도안 그림을 하나 붙여넣고 그 위에 형광펜으로 칠하는 식이었습니다. 되긴 됐습니다.

다만 필기 앱은 선을 긋는 도구입니다. 면을 채우는 도구가 아닙니다. 형광펜으로 넓은 데를 칠하려면 같은 자리를 여러 번 지나가야 하고, 다른 그림을 칠하려면 매번 새로 붙여넣어야 합니다.

색칠하는 앱이 아니라, 색칠에 쓸 수 있는 앱이었습니다. 그래서 만들었습니다.

무엇을 하나

도안을 고르면 그 위에 칠합니다. 나비, 물고기, 자동차, 집, 사과, 꽃. 백지도 있고, 그림을 넣어 자기 도안을 만들 수도 있습니다.

  • 페인트통 — 선 안쪽을 한 번에 채웁니다. 필기 앱에서 형광펜으로 하던 일이 한 번의 클릭이 됩니다
  • 여러 질감 — 색연필, 크레파스, 파스텔, 수채화, 유화. 같은 색이라도 느낌이 다릅니다
  • 스티커
  • 되돌리기
  • 갤러리 — 그린 것을 모아둡니다

유화를 넣은 건 제 욕심이었습니다.

고흐 그림을 봤을 때 받은 충격이 있습니다. 무엇이 그렇게 충격이었는지는 지금도 말로 못 하겠습니다. 색이라고 하기에도, 붓자국이라고 하기에도 모자랍니다. 그 느낌을 화면에서라도 흉내내보고 싶었습니다. 아이 앱에 유화가 왜 필요한가 싶지만, 넣고 싶었습니다.

아이가 제일 많이 쓰는 게 페인트통과 유화입니다.

만들면서 정한 것

아이가 못 나가게 했습니다. 전체 화면으로 뜨고 바깥으로 나가는 링크가 없습니다. 광고도 결제도 계정도 없습니다. 애초에 서버가 없어서 넣을 자리도 없습니다.

홈 화면에 아이콘으로 붙습니다. 사파리로 열어 「홈 화면에 추가」를 하면 주소창 없이 앱처럼 뜹니다. 설치할 것이 없습니다.

애플펜슬로도 손가락으로도 됩니다.

저장은 그림 파일로 나옵니다. 앱 안에 갇히지 않게요.

조용히 실패하고 있었다

자기 도안을 두 장 넣으면 앞의 것이 사라졌습니다.

호스팅 탓인 줄 알았는데 아니었습니다. 코드를 열어보니 도안·스티커·갤러리를 전부 브라우저의 작은 저장공간에 넣고 있었습니다. 그 공간은 5MB 남짓인데 이미지 한 장만으로도 몇 MB라 두 번째에서 넘쳤습니다.

문제는 넘쳤을 때였습니다. 실패를 그냥 넘어가게 짜놨더군요.

try { localStorage.setItem(k, JSON.stringify(v)); }
catch (e) { /* 용량초과 무시 */ }

주석까지 달아두고 무시하고 있었습니다. 넘칠 걸 알면서 아무 말도 안 하게 만들어둔 것입니다. 그래서 화면에는 들어간 것처럼 보이고, 껐다 켜면 없었습니다. 사라진 게 아니라 애초에 저장된 적이 없었습니다.

조용히 실패하는 게 제일 나쁜 실패입니다. 안 되는 것보다 나쁩니다. 안 되면 고치기라도 하는데, 되는 척하면 한참 뒤에야 압니다.

브라우저 안의 더 큰 저장소로 옮겼습니다. 서버도, 호스팅 변경도 필요 없었습니다. 전에 넣어둔 것은 처음 열 때 자동으로 옮겨옵니다. 이제 저장에 실패하면 화면에 알립니다.

아직 번거로운 것

도안을 구하는 게 일입니다. 새 그림이 필요하면 그때마다 AI에게 그려달라고 해서 넣습니다. 아이가 "공룡 그려줘" 하면 제가 앉아서 만들어야 합니다.

여기서부터는 결정이 필요합니다

여러 사람이 쓴다면 도안을 나눠 쓸 수 있을 겁니다. 누가 만든 공룡을 다른 집 아이가 받아 쓰는 식으로요. 지금 제일 번거로운 부분이 그걸로 풀립니다.

그런데 그러려면 도안을 어딘가에 모아둬야 하고, 거기서부터 돈이 듭니다. 지금은 공짜로 굴러가는데, 남의 그림을 맡아두기 시작하면 그게 안 됩니다. 돈이 들면 받아야 하고, 받으려면 사업이 됩니다.

아이 하나 색칠하라고 만든 앱에서 여기까지 왔습니다. 아직 정하지 못했습니다. 안 정하고 그냥 쓰는 것도 답일 수 있습니다.

업무 도구가 아닌 것도 여기 둡니다

이 사이트의 다른 것들은 대부분 일하다 막혀서 만든 것인데 이건 아닙니다. 그래도 만든 건 만든 것입니다.

만든 계기는 다른 것들과 같았습니다. 있는 도구로 어떻게든 되고는 있는데, 그 도구가 원래 그 일을 하라고 만들어진 게 아닐 때 새로 만들게 됩니다.