[작성자:] 컴맹 집사

  • AI 다섯과 일 나누기, 기획·조사·개발·그림·음악 담당 정하기

    AI 다섯과 일 나누기, 기획·조사·개발·그림·음악 담당 정하기

    작성자: 컴맹 집사

    시즌 2 「비록 작은 왕국이지만, 왕립 개집사협회 앱의 세계관을 넓혀 가는 과정」 3편

    대표 이미지: 여럿이 역할을 나누어 일하는 회의 자리 (사진: sakibmia24 / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 AI 하나에게 모든 일을 맡기다 지친 분
    • 핵심 답 기획, 자료 조사, 개발, 그림, 음악으로 AI의 역할을 나누고, 한 AI가 쓴 것을 다른 AI가 검토하게 했다. 그래도 고르고 정하는 일은 사람 몫이다
    • 바로 쓰는 팁 시작은 둘이면 충분하다. 찾는 AI에게는 “출처 주소와 확인 날짜를 함께 적어 줘”, 만드는 AI에게는 “이 파일에 있는 내용만 써”라고 말하자

    시즌 1 때는 AI 하나와 모든 걸 했다. 아이디어도 묻고, 코드도 받고, 오류도 물었다. 앱이 작을 때는 그게 편했다. 그런데 웹툰을 그리고, 노래를 만들고, 반려견 동반 여행지를 조사하는 단계가 되자 한 대화창으로는 감당이 안 됐다. 대화가 길어질수록 앞에서 한 이야기를 잊었고, 조사하다 말고 코드를 고치다 보면 둘 다 엉성해졌다.

    그래서 회사처럼 부서를 나눴다. 사장은 나, 직원은 AI들이다.

    우리 왕국의 AI 부서 배치표

    지금 왕립 개집사협회 앱을 만드는 데 쓰는 AI는 이렇게 나뉘어 있다.

    부서 맡은 AI 하는 일
    기획·검토실 ChatGPT 같은 대화형 AI 아이디어 다듬기, 기준서 초안 검토, 공모전 같은 외부 자료 분석
    조사실 Claude 코워크 휴양소 여행지, 강아지가 먹어도 되는 음식처럼 사실 확인이 필요한 자료 조사. 출처와 확인 등급까지 기록
    개발실 Claude Code 앱 코드 작성, 자동 테스트, 배포
    미술실 Google Cloud Vertex AI 웹툰 컷, 동궁의 세자 그림, 연대기 삽화
    음악실 Suno 왕실음악당 노래, 작위증 축하송

    여기에 하나가 더 있다. 앱 안에서 일하는 AI다. 혈통 감정소에서 강아지 사진을 보고 견종을 추측하는 AI는 구글이 공개한 작은 이미지 인식 모델로, 사용자의 휴대폰 안에서만 돌아간다. 이건 나중에 혈통 감정소 편에서 자세히 이야기하겠다.

    나누고 나서 달라진 점

    가장 크게 달라진 건 조사와 개발을 떼어 놓은 것이다. 휴양소를 만들 때 처음에는 개발하는 AI에게 “반려견 동반 가능한 곳을 넣어 줘”라고 했다. 그러자 그럴듯한 장소 이름이 술술 나왔다. 문제는 그게 진짜인지 확인할 길이 없다는 것이었다. 실제로 가 보니 없는 곳이 들어갈 수도 있었다.

    그래서 조사는 조사실 AI에게 따로 맡겼다. 한국관광공사나 산림청, 지자체처럼 공식 자료에서 확인한 곳만 적고, 출처 주소와 확인한 날, 확인 등급을 함께 남기게 했다. 조사실이 만든 결과 파일을 개발실 AI가 받아서 앱에 넣는다. 부식보급청의 음식 정보도 같은 방식으로, 여러 자료를 비교한 표까지 만들어 넘겼다.

    그림도 마찬가지다. 세자 그림 16장을 만들 때는 개발실 AI가 “이런 그림이 필요하다”는 프롬프트 목록을 쓰고, 미술실 AI가 그림을 그리고, 내가 골랐다. 그림이 앱에 들어간 뒤 글씨가 잘 안 보이면 다시 개발실이 화면을 손봤다.

    부서끼리 일을 넘기는 방법

    여러 AI를 쓰면 생기는 문제가 있다. 서로 대화를 못 한다는 것이다. 조사실 AI가 찾은 내용을 개발실 AI는 모른다. 그래서 일을 넘길 때는 반드시 파일로 넘긴다.

    • 조사 결과는 데이터 파일과 조사 결과 문서로
    • 디자인 결정은 기준서의 확정 결정 칸으로
    • 다음에 이어서 할 일은 지시서로

    지시서는 “이 문서를 다른 대화창에 그대로 붙여 넣으면 이어서 일할 수 있게” 쓴 문서다. 무엇을 먼저 읽을지, 지금 어디까지 했는지, 건드리면 안 되는 것이 무엇인지가 들어 있다. 덕분에 한 기능을 며칠에 걸쳐, 여러 대화창에서 나눠 만들어도 흐름이 끊기지 않았다.

    사람 모양의 로봇
    사람 모양의 로봇. AI도 각자 잘하는 일을 맡겨야 제 몫을 한다
    사진: 84264 / Pixabay

    한 AI가 쓰고, 다른 AI가 검토한다

    부서를 나누고 나서 생긴 좋은 습관이 하나 더 있다. 중요한 계획은 만든 AI가 아닌 다른 AI에게 검토를 맡기는 것이다. 사람도 자기 글의 오타는 잘 못 찾듯이, AI도 자기가 쓴 계획의 빈틈은 잘 못 본다.

    앱 전체의 큰 방향을 담은 종합계획서를 썼을 때도 검토 의견을 따로 받아서 고쳤다. 동궁을 만들 때가 대표적이다. 처음 계획서에는 “왕자견”이라는 별도 캐릭터를 새로 만들자고 적혀 있었다. 검토를 거치면서 이게 “우리 집 폐하의 세자”로 바뀌었다. 새 캐릭터를 하나 더 만들면 세계관이 갈라지지만, 폐하의 아들로 두면 연대기와 작위증과 동궁이 한 가족 이야기로 이어지기 때문이다. 기준서에는 이 변화가 “계획서에서 바뀐 것”이라는 표로 남아 있다.

    검토를 맡길 때는 칭찬 말고 문제를 찾아 달라고 분명히 말한다.

    이 계획서에서 초보자가 만들기 어려운 부분, 기존 기능과 겹치는 부분, 빠진 부분을 찾아 줘. 좋은 점은 말하지 않아도 돼.

    이렇게 물으면 AI가 듣기 좋은 말 대신 쓸모 있는 말을 해 준다. 그리고 검토 의견을 다 받아들일지는 역시 내가 정한다. 검토 의견 중 절반은 받아들이고 절반은 “우리 왕국에는 안 맞아”라며 넘긴 적도 많다.

    그래도 사람이 해야 하는 일

    AI 다섯을 써도 내 일은 줄지 않았다. 오히려 분명해졌다.

    1. 정하기: 무엇을 만들지, 무엇을 만들지 않을지는 내가 정한다.
    2. 고르기: 그림 여러 장, 노래 여러 곡, 시안 여러 개 중에 고르는 건 내 몫이다.
    3. 써 보기: 왕실 연대기는 출시 기준에 “내가 실제 날짜로 사흘 넘게 직접 해 보기”를 넣었다. “내일도 열고 싶은가?”는 AI가 대신 답해 줄 수 없다.
    4. 책임지기: 앱에 들어가는 정보가 틀리면 그건 AI 탓이 아니라 내 책임이다.

    나에게 맞는 AI 배치표 만들기

    꼭 다섯 개를 쓸 필요는 없다. 시작은 둘이면 충분하다. “자료를 찾는 AI”와 “결과물을 만드는 AI”를 나누는 것만으로도 실수가 확 준다. 찾는 쪽에는 “출처 주소와 확인한 날짜를 반드시 함께 적어 줘”라고 하고, 만드는 쪽에는 “이 파일에 있는 내용만 써. 없는 건 지어내지 마”라고 말해 보자. 시즌 1의 AI와 함께 앱 만들기 솔직 후기에서 말한 “성실한 조수”가 이제는 조수 여러 명이 된 셈이다.


    이전 글: 기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유
    다음 이야기: 한국판 하나 고쳤는데 미국·일본판까지? 3개국 자동 배포 만든 날

  • 블로그 글 진단 앱 Blog X-ray를 직접 만들어 보고, 내 글 세 편을 돌려 본 기록

    작성자: 컴맹 집사

    이 글은 제가 만든 앱을 소개하는 글입니다. Blog X-ray는 제가 직접 기획하고 AI의 도움을 받아 만든 무료 도구입니다. 판매하거나 광고를 받지 않습니다.

    💻 이 앱, 내 컴퓨터에서 직접 실행해 볼 수 있습니다

    Blog X-ray 프로그램과 소스코드를 무료로 내려받아 내 Windows PC에서 돌려 보세요. 처음 설치하는 분도 따라 할 수 있도록 그림으로 안내합니다.

    ▶ 내려받기와 실행하는 법 보기

    이 글에서 얻는 것

    • 코딩을 잘 모르는 상태에서 웹앱 하나를 기획부터 배포까지 어떻게 끌고 갔는지
    • 앱이 내 블로그 글 세 편을 어떻게 점수 매겼는지, 실제 점수표
    • 점수보다 중요했던 것: 앱의 조언과 제 글쓰기 원칙이 부딪친 지점

    왜 만들었나

    블로그 글을 쓰면서 늘 같은 질문이 남았습니다. 제목은 괜찮은지, 휴대폰에서 읽기 불편하지는 않은지, 어디를 고쳐야 하는지. 전문가에게 매번 검토받기는 어렵고, 유료 분석 도구는 부담스러웠습니다. 그래서 “글 주소를 넣으면 기준에 따라 점검해 주는 도구를 직접 만들어 보자”고 시작했습니다.

    어떻게 만들었나

    1. 기준서부터 썼습니다. 어떤 항목을 볼지, 점수를 어떻게 줄지 먼저 정했습니다.
    2. 처음에는 네 가지 항목, 항목마다 25점이었습니다. 이후 여섯 가지로 늘리고 배점을 다시 나눴습니다. 제목 15점, 도입부 15점, 모바일 가독성 15점, 시각적 리듬 20점, 경험 증거 20점, 키워드 밀도 15점입니다.
    3. AI로 글의 어조를 판정하는 항목은 넣지 않았습니다. 사람이 쓴 글도 AI 글로 잘못 판정하는 경우가 많아서였습니다.
    4. 글 주소를 받아 본문만 추출하는 과정에서 내부 주소를 건드리지 못하도록 막는 장치를 먼저 넣었습니다. 원문은 저장하지 않습니다.
    5. 점검에는 AI API를 쓰지 않고 규칙과 계산만 씁니다. 그래서 비용이 들지 않습니다.
    6. GitHub에 코드를 올리고 Vercel에 연결해 배포했습니다.

    내 글 세 편을 돌려 본 결과

    Blog X-ray 입력 화면: 글 주소를 넣고 진단 버튼을 누르는 모습
    진단할 글 주소를 넣는 입력 화면
    Blog X-ray 진단 결과 화면: 총점 75점과 항목별 점수
    진단 결과 화면 (총점 75점)
    글 총점 가장 낮은 항목
    앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 75 / 100 시각적 강조·리듬 14/20
    영상 자동 제작 프로그램, 무료로 풀면 쓸모 있을까 72 / 100 시각적 강조·리듬 11/20
    기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유 72 / 100 E-E-A-T 경험 증거 8/20

    세 글 모두 제목, 모바일 가독성, 키워드 밀도는 대체로 높은 점수를 받았습니다. 낮은 점수는 두 가지에 몰렸습니다. 이미지 없이 긴 구간이 있다는 점, 그리고 경험을 보여 주는 사진과 표현이 부족하다는 점입니다.

    네이버에 올린 두 글도 같은 기준으로 돌려 봤습니다.

    글 총점 / 100 가장 낮은 항목
    블로그 글 진단 앱 Blog X-ray 개발기 (네이버) 86 시각적 강조·리듬 6/20
    두 번째 네이버 글 79 도입부 후킹 5/15

    네이버 첫 글의 시각적 강조 점수는 소제목을 못 읽은 탓일 가능성이 큽니다. 그래서 이 점수는 참고만 해 주세요.

    점수보다 중요했던 것

    앱은 “굵은 글씨가 하나도 없다”고 지적하고, 굵은 글씨를 넣으면 점수가 오른다고 알려 줍니다. 그런데 저는 굵은 글씨를 쓰지 않기로 정해 둔 상태였습니다. 글을 읽는 흐름을 끊지 않으려는 제 선택이었습니다.

    이 차이는 앱의 조언이 무조건 맞지 않는다는 뜻입니다. 점수는 기준이고, 어떤 기준을 따를지는 글쓴이가 정해야 합니다. 앱이 가르쳐 준 것은 정답보다 “내 글이 어떤 기준에서 약한가”였습니다.

    또 하나는 E-E-A-T 항목입니다. 이 항목은 체험 표현과 사진의 개수를 셉니다. 직접 해 본 경험이 얼마나 구체적인지는 재지 못합니다. 그래서 개수가 적어도 실제 경험이 충분한 글이 있을 수 있습니다. 이 한계도 확인했습니다.

    여섯 가지 항목은 무엇을 보려고 넣었나

    점수표에 낯선 말이 많아서, 각 항목을 왜 넣었는지 쉬운 말로 적어 둡니다.

    • 제목(15점): 제목만 보고 무슨 글인지 알 수 있는지 보려고 넣었습니다.
    • 도입부(15점): 첫 문단에서 이 글을 끝까지 읽을 이유를 주는지 보려고 넣었습니다.
    • 모바일 가독성(15점): 휴대폰 화면에서 읽기 불편하지 않은지 보려고 넣었습니다.
    • 시각적 리듬(20점): 이미지나 소제목 없이 글자만 길게 이어지는 구간이 있는지 봅니다. 위 점수표에서 가장 많이 깎인 항목입니다.
    • 경험 증거(20점): 직접 해 본 표현과 사진이 얼마나 있는지 셉니다.
    • 키워드 밀도(15점): 핵심 단어가 적당히 들어갔는지 봅니다. 형태소 분석이 아니라 어림값입니다.

    내 글을 점검해 보는 순서

    1. 점검할 글 주소를 복사합니다.
    2. Blog X-ray 입력 칸에 붙여 넣고 진단 버튼을 누릅니다.
    3. 총점보다 가장 낮은 항목 하나를 먼저 봅니다.
    4. 그 항목의 조언이 내 글쓰기 원칙과 맞는지 따져 보고, 맞는 것만 고칩니다.
    5. 고친 뒤 같은 글을 다시 넣어 점수가 어떻게 바뀌었는지 적어 둡니다.

    솔직한 한계

    • 워드프레스 글 세 편과 네이버 글 두 편을 점검했습니다. 네이버 글에서는 소제목을 제대로 읽지 못하는 것으로 보여, 시각 강조 점수는 그대로 믿기 어렵습니다. 티스토리는 아직 점검하지 않았습니다.
    • 점수는 검색 순위나 승인 여부를 예측하지 않습니다.
    • 키워드 밀도는 형태소 분석이 아니라 근사치입니다.

    다음 계획

    글을 고친 뒤 다시 점검해서 점수가 어떻게 바뀌는지 기록하겠습니다. 앱이 조언한 항목 중 제 원칙과 맞는 것만 반영하고, 맞지 않는 것은 왜 빼는지도 함께 적겠습니다.

    AI에게 이렇게 맡겨 보세요

    내 블로그 글 주소를 줄게. 제목, 첫 문단, 휴대폰에서 읽기, 소제목과 이미지 배치, 직접 해 본 경험 표현, 핵심 단어 반복을 기준으로 가장 약한 곳 한 가지만 골라서, 고쳐 쓴 예시와 함께 알려 줘. 내 원칙과 맞지 않는 조언이면 그렇다고 따로 표시해 줘.

    2026-11-02 항목 설명과 점검 순서를 보강했습니다.

  • 앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 쉽게 풀기

    앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 쉽게 풀기

    작성자: 컴맹 집사

    대표 이미지: 앱에 처음 넣은 미니게임, 왕실 간식 잡기 (출처: 왕립 개집사협회 앱 2026년 9월 23일 버전 화면, 직접 캡처)

    이 글에서 얻는 것

    • 이런 분께 앱에 미니게임을 넣어 보고 싶은 코딩 초보
    • 핵심 답 코드를 부탁하기 전에 목표, 조작, 점수, 난이도, 하지 말 것을 적은 게임 기준서부터 만들었다. 게임은 화면을 계속 다시 그리는 ‘게임 루프’로 움직인다
    • 바로 쓰는 팁 테스트할 때만 쓰는 주소를 만들어 한 판을 6초로 줄이고 간식 순서를 고정하면, 점수 계산이 맞는지 매번 똑같이 확인할 수 있다

    웹툰을 넣고 나니 “보는 재미”는 생겼다. 반려인들이 잠깐 쉬는 시간에 들어와서 직접 하는 재미도 있으면 좋겠다는 생각이 들었다. 그래서 게임을 넣기로 했다.

    앱을 만들기 시작할 때만 해도 게임은 가장 먼 영역이라고 생각했다. 전문 개발자들이 만드는 것 아닌가. 그런데 지금까지 해 온 걸 돌아보면 못 할 것도 없을 것 같았다. 질문도, 작위증도, 웹툰도 처음엔 막막했지만 결국 해냈으니까.

    흔한 게임을 세계관에 맞게 바꾸기

    한 가지 원칙은 분명했다. 어디서나 볼 수 있는 게임을 그대로 가져오지 않는다. 간단한 게임이라도 “강아지는 왕, 반려인은 집사”라는 세계관 안에 들어와야 했다.

    AI에게 “휴대폰에서 손가락 하나로 할 수 있는 간단한 게임을 왕립 개집사협회 세계관에 맞게 바꿔서 아이디어를 줘”라고 부탁했다. 고르는 기준은 세 가지였다.

    1. 규칙을 한 문장으로 설명할 수 있는가
    2. 휴대폰에서 손가락 하나로 할 수 있는가
    3. 한 판이 1분 이내인가

    첫 번째로 고른 건 왕실 간식 잡기였다. “30초 동안 떨어지는 왕의 간식을 받아라.” 한 문장이면 끝이다. 집사가 폐하의 간식을 지킨다는 설정도 세계관에 딱 맞았다.

    규칙을 먼저 문서로 정리했다

    기획 단계에서 배운 교훈을 게임에도 적용했다. 코드를 요청하기 전에 게임 개발 기준서를 먼저 만들었다. 규칙, 점수, 난이도, 조작 방법, 저장할 것, 하지 말아야 할 것까지 적은 문서다. 이 기준서도 제미나이와 챗GPT에 보여 주며 빠진 점을 찾고, 클로드에게 검토받은 뒤 확정했다.

    • 목표: 30초 동안 좋은 간식은 받고 이상한 물건은 피한다.
    • 조작: 손가락으로 강아지를 좌우로 움직인다. 컴퓨터에서는 마우스나 방향키.
    • 점수: 뼈다귀·고기·베이컨 같은 간식은 +10점, 양말은 -10점, 비누는 -5점. 점수는 0점 아래로 내려가지 않는다.
    • 특별 아이템: 마지막 10초에만 가끔 떨어지는 황금 왕관, +50점.
    • 난이도: 시간이 지날수록 조금씩 빨리, 더 자주 떨어진다.
    • 끝: 점수에 따라 견습 집사부터 왕실 특급 집사까지 등급을 준다.

    마지막 항목은 작위증과 연결하려고 넣었다. 게임에서도 집사 등급을 받는 것이다. 이상한 물건으로 양말과 비누를 고른 것도 이유가 있다. 강아지에게 위험한 음식을 게임에 넣으면 오해를 부를 수 있어서, 누구나 웃을 수 있는 물건으로 골랐다.

    게임은 지금까지의 앱과 무엇이 다른가

    AI에게 기준서를 보여 주며 만들어 달라고 하자, 먼저 개념부터 설명해 줬다. 지금까지의 앱과 게임은 움직이는 방식이 근본적으로 달랐다.

    왕실 간식 잡기 게임을 하는 화면
    떨어지는 간식을 강아지로 받는 첫 미니게임의 플레이 화면
    출처: 왕립 개집사협회 앱 2026년 9월 23일 버전 화면, 직접 캡처
    • 지금까지의 앱: 사용자가 버튼을 누를 때만 화면이 바뀐다. 가만히 있으면 화면도 가만히 있다.
    • 게임: 사용자가 아무것도 안 해도 화면이 계속 바뀐다. 간식은 알아서 떨어진다.

    계속 움직이는 화면을 만드는 원리를 게임 루프(game loop)라고 한다. 설명을 듣고 이해한 내용은 이렇다.

    게임은 1초에 약 60번, 아주 빠르게 “위치 계산 → 부딪혔는지 확인 → 다시 그리기”를 반복한다. 그 사이에 간식을 조금씩 아래로 옮기면, 사람 눈에는 떨어지는 것처럼 보인다.

    어릴 때 교과서 귀퉁이에 그리던 플립북과 같은 원리다. 한 장 한 장 조금씩 다른 그림을 빠르게 넘기면 움직이는 것처럼 보인다. 게임은 그 플립북을 1초에 60장씩 즉석에서 넘기는 셈이다.

    이 반복을 부드럽게 해 주는 기능이 브라우저에 있다(requestAnimationFrame). 이름은 어렵지만 뜻은 “다음 장면 그릴 준비됐으면 알려 줘”다. 화면이 새로 그려질 타이밍에 맞춰 알려 주기 때문에 움직임이 매끄럽다. (출처: MDN 웹 문서, requestAnimationFrame)

    AI에게 게임 제작 요청하기

    이번에는 처음부터 전부 만들어 달라고 하지 않고 단계를 나눴다.

    1. 1단계: 빈 게임 화면에 강아지만 보이게. 손가락으로 좌우 이동.
    2. 2단계: 간식이 위에서 떨어지게. 강아지에 닿으면 사라지고 점수 +10.
    3. 3단계: 30초 타이머와 결과 화면.
    4. 4단계: 이상한 물건, 황금 왕관, 난이도 상승.
    5. 5단계: 최고 기록 저장과 등급.

    단계마다 휴대폰으로 해 보고 확인한 뒤 커밋했다. 게임은 움직이는 부분이 많아서, 한꺼번에 만들면 문제가 어디서 생겼는지 찾기 어렵다.

    게임을 넣으며 겪은 문제들

    1. 황금 왕관이 떨어지지 않는다
    반짝이는 효과를 주려고 황금 왕관에 움직이는 장식(CSS 애니메이션)을 넣었더니, 아래로 떨어지지 않고 제자리에서 반짝이기만 했다. 반짝이는 효과와 떨어지는 움직임이 같은 설정을 두고 서로 덮어쓰고 있었던 것이다. 왕관 그림을 한 겹 더 감싸서, 바깥은 떨어지고 안쪽은 반짝이게 나눠서 해결했다.

    2. 분명히 닿았는데 점수가 안 오른다
    처음 코드는 계산을 줄이려고, 간식이 거의 바닥에 왔을 때만 강아지와 닿았는지 확인했다. 그런데 휴대폰이 잠깐 버벅이면 그 구간을 건너뛰어 버려서, 분명히 받았는데 놓친 것으로 처리됐다. 매 장면마다 확인하도록 바꿨다.

    3. 게임 화면을 나가도 게임이 계속 돈다
    게임 도중에 다른 화면으로 나가도 보이지 않는 곳에서 게임 루프가 계속 돌 수 있다고 AI가 짚어 줬다. 휴대폰이 뜨거워지고 배터리가 닳는 원인이 된다. 그래서 화면을 바꿀 때마다 “나가기 전에 정리할 것”을 실행하는 장치를 앱에 처음으로 만들었다. 게임 루프를 멈추고, 손가락 감지도 해제한다.

    4. 효과음이 없다
    배포하고 직접 해 보니 너무 조용했다. 소리 파일을 따로 구하지 않고, 브라우저가 즉석에서 소리를 만들어 내는 기능을 썼다. 간식을 받을 때, 이상한 물건에 닿았을 때, 황금 왕관, 게임 끝, 네 가지 소리를 만들었다. 휴대폰 브라우저는 사용자가 화면을 한 번 누르기 전에는 소리를 못 내게 막아 두기 때문에, “게임 시작” 버튼을 누르는 순간 소리를 준비하게 했다. 지하철에서 갑자기 소리가 나면 곤란하니 소리 켜기/끄기 버튼도 넣었다.

    테스트는 빠르게, 결과는 똑같이

    게임을 확인하려면 매번 30초를 기다려야 했다. AI는 테스트할 때만 쓰는 특별한 주소를 만들어 줬다. 그 주소로 열면 한 판이 6초로 줄고, 간식이 정해진 순서대로 떨어진다. 덕분에 “좋은 간식 → 좋은 간식 → 양말 → 좋은 간식 → 황금 왕관” 순서로 받았을 때 점수가 정확히 몇 점이 되는지 자동으로 확인할 수 있었다. 실제 사용자는 이 주소를 알 필요도 쓸 일도 없다.


    이전 글: 웹툰이 늘어나면 생기는 일, 회차 목록 정리하는 법
    다음 글: 손가락으로 강아지를 쓱쓱! 터치 게임 만들다 막힌 4가지

  • 영상 자동 제작 프로그램, 무료로 풀면 쓸모 있을까? 직접 따져 본 번외 편

    영상 자동 제작 프로그램, 무료로 풀면 쓸모 있을까? 직접 따져 본 번외 편

    작성자: 컴맹 집사

    번외 편

    대표 이미지: 영상 한 편도 결국 장면을 하나씩 잇는 일이다 (사진: terydanphiri / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 AI로 만든 도구나 파일을 남에게 무료로 나눠 줄지 고민하는 분
    • 핵심 답 직접 따져 보니 다른 컴퓨터에서 바로 돌지 않고, 설치가 어렵고, 무료 대안이 있고, 음성 요금이 붙었다. 그래서 파일 대신 만든 과정을 글로 나누기로 했다
    • 바로 쓰는 팁 나누기 전에 “다른 컴퓨터에서 도는가, 받는 사람이 설치할 게 몇 개인가, 무료 서비스보다 나은 점이 있는가, 요금이 붙는 곳은 없는가”를 묻자

    왕국을 키우다 보니 내 컴퓨터에 영상을 만드는 프로그램이 생겼다. 웹툰 컷을 쇼츠 영상으로 바꿔 주는 것, 그리고 대본 파일 하나만 주면 앱 소개 영상을 끝까지 만들어 주는 것. 둘 다 AI와 함께 만들었고, 실제로 매번 쓰고 있다.

    어느 날 다른 AI 챗봇에게 “이 프로그램들을 블로그에서 무료로 나눠 주면 어떨까?” 하고 물었다. “좋은 전략”이라는 답이 돌아왔다. 솔깃했다. 그런데 정말 내려받는 사람에게 도움이 될까? 이번 번외 편은 그 질문에 직접 답을 내 본 기록이다.

    내 컴퓨터 속 영상 프로그램 두 개

    첫 번째는 웹툰 쇼츠 자동 제작 프로그램이다. 말풍선이 들어간 웹툰 컷을 넣으면 명령 한 줄로 세로 쇼츠 영상이 나온다. 한 편에 약 59초, 캐릭터마다 다른 AI 목소리와 효과음, 배경음악까지 들어간다. 한국판·미국판·일본판을 모두 이걸로 만든다. 이 프로그램을 만든 과정은 시즌 2 9편에서 따로 자세히 풀 예정이다.

    두 번째는 같은 프로그램에 나중에 붙인 “설명 영상” 기능이다. 오늘 번외 편의 주인공은 이쪽이다.

    대본 파일 하나로 1분짜리 앱 소개 영상

    앱을 소개하는 1분짜리 영상이 필요한 일이 생겼다. 편집 프로그램을 배울 시간은 없었다. 그래서 AI(Claude)에게 부탁한 건 딱 하나였다. “내 손이 가지 않게, 끝까지 자동으로.”

    1. 대본: 장면마다 보여 줄 화면, 자막, 나레이션 문장을 적은 파일 하나. 장면은 14개, 나레이션은 11줄이다.
    2. 화면: 프로그램이 앱을 직접 열고 필요한 화면을 차례로 찍는다. 체급 버튼을 누르는 장면은 누르기 전과 후를 따로 찍어, 영상 속에서 누르는 모습으로 이어 붙인다.
    3. 소리: 나레이션은 구글 AI 음성, 배경음악은 왕실음악당 노래(Suno로 만든 곡)를 쓴다.
    4. 조립: 자막과 움직임을 얹어 세로(9:16) 영상과 가로(16:9) 영상을 한 번에 만든다.

    완성된 영상은 58.3초. 작업 기록에는 새벽 3시 13분에 시작해 3시 30분에 완성했다고 적혀 있다. 그사이 컴퓨터가 잠들지 않도록 절전 방지를 켜고, 혹시 중간에 멈추면 이어서 하도록 예약 작업까지 AI가 미리 걸어 두었다.

    진짜 편리함은 그다음에 알았다. 며칠 뒤 앱의 기본 강아지 그림이 바뀌었는데, 화면을 다시 찍고 명령을 한 번 더 내리니 끝이었다. 문구를 고치고 싶으면 대본 파일만 고치면 된다. 같은 문장의 나레이션은 저장해 둔 음성을 다시 써서 요금이 또 나가지도 않는다.

    왕실 휴양소 안내 화면
    설명 영상의 중심 장면이었던 왕실 휴양소. 영상에서는 이런 화면을 프로그램이 직접 찍어 넣었다
    출처: 왕립 개집사협회 앱 2026년 10월 16일 화면, 직접 캡처

    “무료로 나눠 주면 좋겠다”는 말에 솔깃했지만

    다른 챗봇의 생각은 이랬다. 웹툰을 보러 온 사람이 “이건 어떻게 만들었지?” 하고 궁금해지면, 그 도구를 직접 내려받아 써 볼 수 있게 하자는 것이다. 그럴듯했다.

    그래서 이번에는 Claude에게 실제 프로그램 폴더를 열어 보고, 남이 내려받았을 때 쓸 수 있는지 판정해 달라고 했다. 결과는 내 기대와 달랐다.

    직접 따져 본 네 가지

    따져 본 것 내 프로그램의 실제 모습 판정
    다른 컴퓨터에서 돌아가나 설정 파일에 내 컴퓨터의 폴더 주소가 그대로 적혀 있고, 앱 폴더의 데이터와 도구를 빌려 쓴다 지금은 안 된다
    설치가 쉬운가 파이썬, Node.js, 영상 변환 도구 ffmpeg를 깔고, 구글 클라우드 서비스 계정 키까지 만들어야 한다 개발자가 아니면 어렵다
    무료 대안보다 나은가 설명 영상은 문장만 넣으면 대본·이미지·AI 음성까지 만들어 주는 서비스가 이미 있다 굳이 내려받을 이유가 약하다
    숨은 비용은 없나 프로그램은 무료여도 나레이션에 쓰는 구글 AI 음성은 쓰는 만큼 요금이 붙는다 공개한다면 꼭 밝혀야 한다

    세 번째 줄은 확인해 보니 사실이었다. 예를 들어 Vrew는 한 문장만 넣으면 AI가 대본과 이미지, 음성까지 만들어 영상을 완성해 준다고 안내한다. (출처: Vrew 공식 사이트) 설치도 쉽다. 내 설명 영상 기능은 우리 앱 화면에 딱 맞춰 만든 것이라 우리 집에서는 최고지만, 남의 집에 가져가면 장점이 사라진다.

    네 번째 줄도 확인했다. 내가 쓰는 Gemini 음성 모델은 무료 사용량 없이, 쓴 만큼 요금이 나가는 방식이다. (출처: Google Cloud Text-to-Speech 가격 안내) “무료 프로그램”이라고 올려놓고 이 사실을 빠뜨리면, 믿고 내려받은 사람에게 뒤통수를 치는 셈이다.

    그래도 하나는 달랐다. 웹툰 쇼츠 프로그램은 딱 이 일만 해 주는 도구가 흔하지 않다. 인스타툰처럼 이미 컷이 있고 그걸 쇼츠로 계속 돌려야 하는 사람이라면 시간이 정말 줄어든다. 다만 이것도 첫 번째, 두 번째 줄에 똑같이 걸린다.

    그래서 내린 결론

    지금은 내려받기 파일을 올리지 않기로 했다. 설치하다 막히는 프로그램은 무료라도 선물이 아니라 숙제다. 받은 사람은 시간만 쓰고, 나는 “설치가 안 돼요”라는 질문에 답하느라 왕국 일을 못 하게 된다.

    대신 이렇게 만든 과정을 글로 먼저 나누기로 했다. 따라 해 보고 싶은 분에게는 프로그램 파일보다 “AI에게 무엇을, 어떤 순서로 시켰는지”가 더 쓸모 있다고 생각한다. 웹툰 쇼츠 프로그램은 써 보고 싶다는 분이 생기면, 내 컴퓨터에 묶인 부분을 풀고 다시 생각해 볼 생각이다.

    돌아보면 제일 큰 수확은 판정 그 자체였다. 다른 AI가 “좋다”고 해도, 실제 파일을 열어 보면 답이 달라질 수 있다. 의견을 듣는 AI와 직접 확인하는 AI를 나눠 쓰니 결정이 훨씬 단단해졌다.

    내 일에 가져갈 한 가지

    AI와 함께 만든 도구나 파일을 남에게 나눠 주기 전에, 이 네 가지만 물어보자.

    • 내 컴퓨터가 아닌 곳에서도 그대로 돌아가는가
    • 받는 사람이 따로 설치하거나 가입해야 하는 것은 몇 개인가
    • 이미 있는 무료 서비스보다 나은 점이 한 가지라도 있는가
    • 쓰다 보면 요금이 붙는 부분은 없는가

    혼자 따지기 어렵다면 AI에게 이렇게 맡기면 된다.

    이 폴더를 다른 사람 컴퓨터에 그대로 옮겼다고 생각하고, 실행이 막히는 곳을 전부 찾아 줘. 내 컴퓨터 주소가 박힌 곳, 따로 설치해야 하는 것, 요금이 나가는 곳까지 표로 정리해 줘.

    답을 보고 나면 “나눠 줄 것인가, 과정을 들려줄 것인가”가 저절로 정해진다.


    이전 글: 기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유
    다음 이야기: AI 다섯과 일 나누기, 기획·조사·개발·그림·음악 담당 정하기

  • 기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유

    기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유

    작성자: 컴맹 집사

    시즌 2 「비록 작은 왕국이지만, 왕립 개집사협회 앱의 세계관을 넓혀 가는 과정」 2편

    대표 이미지: 일을 시작하기 전에 책상 위에 계획부터 펼쳐 둔다 (사진: rawpixel / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 AI가 새 대화창에서 지난 결정을 잊어 같은 설명을 반복하게 되는 분
    • 핵심 답 기능을 만들기 전에 한 줄 정의, 확정 결정, 하지 않을 것, 완료 기준, 진행 기록을 담은 기준서를 쓰고 AI가 먼저 읽게 한다
    • 바로 쓰는 팁 새 대화창 첫 문장을 “먼저 기준서를 처음부터 읽어. 다르게 만들어야 하면 이유를 말하고 내 확인을 받아”로 시작하자

    시즌 1 때의 나는 성격이 급했다. 떠오르면 바로 AI에게 “이거 만들어 줘”라고 했다. 기능이 몇 개 없을 때는 그래도 됐다. 그런데 왕국이 커지자 똑같은 방식이 사고를 쳤다.

    어느 날 홈 화면 카드를 정리해 달라고 했더니, AI가 며칠 전에 같이 정한 규칙을 까맣게 잊고 전혀 다른 배치를 만들어 왔다. AI가 잘못한 게 아니었다. 그 결정은 지난 대화창에만 있었고, 새 대화창의 AI는 알 길이 없었다. 그날부터 기능을 만들기 전에 반드시 하는 일이 생겼다. 기준서 쓰기다.

    기준서가 뭐길래

    기준서는 “이 기능을 무엇을 위해, 어떻게, 어디까지 만들지”를 적은 문서다. 회사에서는 기획서나 명세서라고 부를 것이다. 나는 거창한 이름 대신 기준서라고 불렀다. AI와 내가 둘 다 보고 따르는 기준이라는 뜻이다.

    지금 앱의 내부 문서 폴더에는 00번부터 27번까지 번호가 붙은 기준서가 있다. 브랜드 표기 기준, 웹툰 제작 기준, 게임마다 하나씩, 휴양소, 혈통 감정소, 동궁, 연대기, 부띠끄 스튜디오까지. 기능 하나에 문서 하나가 짝을 이룬다.

    기준서에 꼭 들어가는 것들

    처음에는 이것저것 적다가 점점 틀이 잡혔다. 지금은 거의 모든 기준서가 이런 순서로 시작한다.

    1. 먼저 읽기: 지금 어디까지 왔는지. 새 대화창의 AI가 가장 먼저 읽는 칸이다.
    2. 한 줄 정의: 예를 들어 동궁은 “폐하의 세자를 하루 30초씩 돌보는 미니 육성 놀이”다.
    3. 확정 결정: 무엇을 정했는지, 언제, 왜. 날짜를 꼭 붙인다.
    4. 하지 않는 것: 만들지 않기로 한 기능. 이게 의외로 제일 중요하다.
    5. 테스트와 출시 기준: 무엇을 확인하면 내보내도 되는지.
    6. 진행 기록: 어느 날 어디까지 했는지.

    “하지 않는 것”을 적는 이유는 AI가 착하기 때문이다. 부탁하지 않아도 이것저것 좋은 기능을 더해 주려 한다. 그러다 보면 하루면 끝날 일이 일주일이 된다. 휴양소 기준서에는 “예약·결제는 하지 않는다”, 혈통 감정소에는 “사진을 서버로 보내지 않는다”처럼 선을 먼저 그어 두었다.

    기준서 덕분에 막은 사고들

    홈 카드 정리 기준서 맨 위에는 이런 문장이 있다. “기준서만 저장한다. 착수는 사용자 지시가 있을 때. 음악당 작업이 끝난 뒤에 시작한다.” 같은 파일을 두 작업이 동시에 고치면 서로 덮어쓰는 충돌이 나기 때문이다. 이 한 줄 덕분에 다른 대화창에서 일하던 AI가 순서를 지켰다.

    혈통 감정소 기준서에는 “계획서와 달라진 점”이라는 표가 있다. 처음 계획과 실제로 만든 것이 어떻게 다른지, 왜 바꿨는지 적어 두었다. 몇 주 뒤 “왜 이렇게 만들었지?” 싶을 때 이 표를 보면 바로 답이 나온다. 내 기억보다 문서가 훨씬 정확했다.

    부띠끄 스튜디오 기준서에는 내가 한 말이 그대로 적혀 있다. “어설픈 기능보단 멋지게 보여 주는 것이 중요하다.” 이 한 문장이 기준이 되어, 나중에 기능을 줄여야 할지 고민할 때 판단이 쉬워졌다.

    할 일 목록이 적힌 클립보드
    할 일 목록이 적힌 클립보드. 기능 하나를 만들기 전에 기준부터 적어 두면 무엇을 끝내야 하는지 분명해진다
    사진: viarami / Pixabay

    기준서는 내가 쓰지 않아도 된다

    오해하실까 봐 덧붙이면, 이 문서들을 내가 처음부터 다 쓴 건 아니다. 나는 하고 싶은 걸 말로 길게 설명하고, AI가 기준서 초안을 만든다. 나는 그걸 읽고 “이건 빼”, “이건 꼭 넣어”라고 고친다. 확정된 결정에는 “사용자 확정”이라고 날짜를 남긴다. 컴맹이 할 일은 쓰는 게 아니라 고르고 정하는 것이었다.

    그리고 기능을 만드는 대화창에는 첫 문장으로 늘 이렇게 말한다.

    먼저 22번 기준서를 처음부터 읽어. 기준서와 다르게 만들어야 하면 이유를 말하고 내 확인을 받아.

    기준서가 너무 길어지면 생기는 일

    기준서에도 부작용이 있었다. 왕실 연대기 기준서는 결정과 수정이 쌓이면서 어느새 아주 긴 문서가 되었다. 길어지니 AI가 중요한 부분을 놓치거나, 예전 버전의 문서를 읽고 일을 시작하는 일이 생겼다. 그래서 세 가지 장치를 더했다.

    첫째, 문서 맨 위에 “낡은 사본 확인부터”라는 칸을 두었다. 이 문서의 첫 줄이 몇 번째 판인지, 옆에 어떤 파일이 함께 있어야 하는지를 적어 두고, 하나라도 다르면 낡은 사본을 읽고 있는 것이니 멈추라고 했다. 둘째, 분량이 큰 내용은 따로 뺐다. 연대기의 사건 이야기는 별도의 “사건 원고” 문서로 나누고, 기준서에는 어디에 있는지만 적었다. 셋째, AI가 일을 시작하기 전에 나에게 물어볼 것을 미리 정해 두었다. 왕실 주방 기준서에는 “착수할 때 사용자에게 확인할 것은 세 가지뿐, 나머지는 문서대로 만들고 첫 미리보기 화면에서 바꿀 것만 묻는다”고 적혀 있다.

    세 번째가 특히 효과가 컸다. 예전에는 AI가 작은 것 하나하나를 물어봐서 대답하다 지치거나, 반대로 아무것도 묻지 않고 마음대로 만들어서 다시 해야 했다. 물어볼 것을 정해 두니 대화가 짧아지고 결과는 정확해졌다.

    기준서를 쓰는 데 시간이 드는 건 사실이다. 하지만 기준서 없이 만든 기능을 고치는 데 드는 시간에 비하면 훨씬 짧았다. 무엇보다 “그때 왜 이렇게 정했더라?”를 떠올리느라 끙끙대는 일이 사라졌다.

    바로 쓰는 기준서 틀

    앱이 아니어도 좋다. 블로그 개편, 가게 메뉴 바꾸기, 여행 계획처럼 여러 날에 걸쳐 AI와 함께하는 일이라면 이 틀이 도움이 된다.

    • 한 줄로 말하면: 무엇을 위한 일인가
    • 정한 것: 날짜와 이유를 함께
    • 하지 않을 것: 욕심나도 이번엔 빼는 것
    • 다 됐다는 기준: 무엇을 확인하면 끝인가
    • 지금 상태: 마지막으로 어디까지 했나

    다섯 줄이면 충분하다. 대화창이 바뀌어도 이 문서만 붙여 넣으면 AI가 어제의 나를 기억해 준다. 시즌 1에서 배운 한 줄 기획서가 자라서 기준서가 된 셈이다.


    이전 글: 50편 그 후, 작은 앱이 멈추지 않고 커진 이야기
    다음 이야기: AI 다섯과 일 나누기, 기획·조사·개발·그림·음악 담당 정하기

  • 웹툰이 늘어나면 생기는 일, 회차 목록 정리하는 법

    웹툰이 늘어나면 생기는 일, 회차 목록 정리하는 법

    작성자: 컴맹 집사

    대표 이미지: 회차를 목록으로 정리한 웹툰 화면 (출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처)

    이 글에서 얻는 것

    • 이런 분께 연재 콘텐츠가 늘어나 화면이 길어지고 있는 분
    • 핵심 답 회차를 목록으로 관리하고 홈에는 웹툰 버튼 하나만 두었다. 회차가 더 늘자 시리즈 목록 → 시리즈 상세 → 회차 보기 세 단계로 나눴다
    • 바로 쓰는 팁 새 회차는 목록에 한 덩어리만 추가하면 회차 목록과 이전·다음 버튼이 자동으로 만들어지게 해 두자

    첫 화를 올리고 두 번째, 세 번째 이야기를 만들었다. 2화는 《폐하의 산책 명령》, 3화는 《왕실 목욕 대작전》. 산책을 나가자는 폐하에게 끌려다니는 지우, 목욕을 단호히 거부하는 두부의 이야기다. 3화에는 옆집 강아지 복실이와 그 집사도 새로 등장한다.

    2화를 앱에 넣으려다 멈췄다. 1화 아래에 이어 붙이면 되나? 그럼 4화, 5화는? 10화쯤 되면 한 화면이 끝없이 길어질 텐데? 웹툰을 연재하려면 회차를 나누는 구조가 필요했다.

    평소 보던 웹툰 앱은 어떻게 되어 있지?

    AI에게 묻기 전에 평소 보던 웹툰 앱을 떠올려 봤다.

    • 작품 첫 화면: 회차 목록이 쭉 있다. 썸네일과 제목이 보인다.
    • 회차 화면: 한 화의 그림이 세로로 이어진다.
    • 회차 끝: “이전 화”, “목록”, “다음 화” 버튼이 있다.
    • 읽은 표시: 이미 본 회차는 표시가 된다.

    이 구조를 그대로 따라 하기로 했다. 익숙한 구조는 사용자가 설명 없이도 쓸 수 있다.

    회차를 목록으로 관리하기

    질문 7개를 목록(배열)으로 관리했던 것처럼, 웹툰 회차도 목록으로 모았다. 한 회차마다 번호, 제목, 썸네일, 그림이 있는 폴더, 컷 수를 적는다. 컷마다 들어갈 대사는 따로 모아 둔다.

    웹툰 1화 보기 화면
    회차를 누르면 열리는 웹툰 보기 화면
    출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처

    이렇게 해 두니 새 회차를 올리는 일이 간단해졌다.

    1. 그림 파일을 회차 폴더(webtoon/ep02/ 같은)에 넣는다.
    2. 목록에 한 덩어리를 추가하고, 대사를 적는다.
    3. 커밋하고 푸시한다.

    회차 목록 화면, 이전·다음 버튼은 이 목록을 보고 자동으로 만들어진다. 코드를 건드리지 않고 목록만 늘리면 된다.

    그림이 아직 준비되지 않은 회차를 위해 공개 여부 표시도 넣었다. 공개하지 않은 회차는 일반 사용자에게 보이지 않고, 주소 뒤에 미리 보기 표시를 붙였을 때만 나를 위해 보이게 했다. 그림을 다 넣고 확인한 뒤 “공개”로 바꾸기만 하면 된다.

    홈에는 버튼 하나만

    2화와 3화를 공개하고 나서 문제가 보였다. 첫 화면에 “웹툰 1화 보기” 버튼만 있어서, 2화와 3화로 들어가는 길을 찾기 어려웠다. 그렇다고 회차가 늘 때마다 첫 화면에 버튼을 추가할 수는 없었다.

    그래서 첫 화면에는 “📖 웹툰 보기” 버튼 하나만 두고, 회차 고르기는 웹툰 안에서 하도록 바꿨다. 버튼을 누르면 회차 목록이 나오고, 각 회차는 썸네일, 번호, 제목, 컷 수와 대략 읽는 시간으로 보여 준다. 썸네일은 회차마다 전용 그림을 따로 만들어 붙였다.

    각 회차 끝에는 버튼을 여러 개 두었다.

    • 나도 왕실 집사 되기: 웹툰을 보고 나서 바로 진단으로
    • 다음 화 / 이전 화
    • 웹툰 목록
    • 처음으로

    시리즈로 한 번 더 나눴다

    회차가 늘어나니 또 다른 고민이 생겼다. 앞으로 두부와 지우 말고도 다른 주인공의 이야기를 여러 개 올릴 계획이었다. 모든 회차를 한 줄로 늘어놓으면 100편이 되는 순간 100개가 한 화면에 쭉 나온다.

    그래서 시리즈 목록 → 시리즈 상세 → 회차 보기 세 단계로 구조를 바꿨다. 첫 시리즈의 이름은 《두부 폐하와 수습집사》로 정했다. 이때 함께 넣은 기능은 다음과 같다.

    • 이어 보기: 마지막으로 보던 회차로 바로 돌아가는 띠
    • 봤어요 표시: 이미 본 회차에 작은 표시
    • NEW 표시: 새 시리즈가 추가되고 2주 동안
    • 다음·이전 화는 같은 시리즈 안에서만: 다른 시리즈로 튀지 않게
    • 마지막 화에 다른 시리즈 추천

    시리즈마다 대사 파일도 따로 나눴다. 시리즈를 열 때만 그 시리즈의 대사를 불러오니, 편수가 늘어도 첫 화면이 느려지지 않는다.

    읽은 회차 기억하기

    “어디까지 봤더라?”를 해결하는 데 LocalStorage가 다시 등장했다. 회차를 보면 그 회차 번호와 마지막으로 본 회차를 공책에 적어 둔다. 목록을 그릴 때 공책을 보고, 본 회차에는 “봤어요” 표시를 붙이고, 이어 보기 띠에는 마지막 회차를 보여 준다. (출처: MDN 웹 문서, Window.localStorage)

    LocalStorage를 한 번 이해해 두니, 이런 기능은 AI에게 한 문장으로 요청할 수 있었다.

    웹툰 회차를 보면 그 회차 번호를 LocalStorage에 저장해 줘.
    목록에서 본 회차에는 "봤어요" 표시, 목록 위에는 마지막으로 본 회차 이어 보기.
    

    연재하면서 정한 규칙

    • 세계관은 이야기로: 폐하를 모시는 집사의 일상을 보여 주되, 톤은 “귀엽고 따뜻하게, 위트는 살짝”
    • 회차마다 한 가지 사건: 산책, 목욕, 간식, 미용처럼 반려인이라면 누구나 겪는 일
    • 마지막 컷 아래에 진단 입구: “나도 왕실 집사 되기”

    마지막 규칙이 중요했다. 웹툰만 보러 온 사람이 진단으로 넘어오고, 진단을 한 사람이 웹툰으로 넘어온다. 앱 안에서 서로 이어지는 길을 만든 것이다. 이 블로그의 글들이 서로 링크로 이어지는 것과 같은 원리다.


    이전 글: 그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법
    다음 글: 앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 쉽게 풀기

  • 50편 그 후, 작은 앱이 멈추지 않고 커진 이야기

    50편 그 후, 작은 앱이 멈추지 않고 커진 이야기

    작성자: 컴맹 집사

    시즌 2 「비록 작은 왕국이지만, 왕립 개집사협회 앱의 세계관을 넓혀 가는 과정」 1편

    대표 이미지: 잔디밭을 힘차게 달리는 강아지처럼, 작은 앱도 멈추지 않고 자랐다 (사진: ValterM / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 AI로 앱을 하나 만들었는데 “그다음엔 뭘 하지?”에서 멈춘 분
    • 핵심 답 한 번 쓰고 끝나던 테스트 앱을 하단 탭 5개짜리 작은 왕국으로 키웠다. 길어진 홈, 아무도 못 찾는 기능, 따로 노는 기능처럼 커지면서 생긴 문제를 시즌 2에서 하나씩 다룬다
    • 바로 쓰는 팁 기능을 늘리기 전에 “회원가입·서버 없이”, “사진은 기기 밖으로 안 보내기”처럼 양보 못 할 원칙부터 세우면 욕심에 휘둘리지 않는다

    작위증 하나로 끝날 줄 알았다. 질문 7개에 답하면 “당신은 간식 협상형 집사”라는 증서를 주는 앱. 시즌 1의 50편은 컴맹 집사가 AI와 함께 그 앱을 세상에 내놓기까지의 기록이었다.

    그런데 이상한 일이 벌어졌다. 앱을 내놓고 나니 오히려 할 일이 늘었다. “작위증 받고 나면 그다음엔 뭘 하지?” 앱을 다시 열어 보던 내가 스스로에게 던진 질문이었다. 작위증은 한 번 받으면 끝이다. 한 번 보고 끝나는 앱은 다시 열 이유가 없다.

    그래서 왕국을 넓히기로 했다. 시즌 2는 그 이야기다.

    작위증 하나에서 작은 왕국으로

    지금 왕립 개집사협회 앱을 열면 아래쪽에 탭이 다섯 개 있다. 홈, 연회장, 동궁/내전, 춘추관, 승정원. 처음엔 화면 하나짜리 테스트 앱이었는데, 이제는 궁궐처럼 방이 여러 개다.

    • 연회장: 미니게임 5종이 있는 왕실 오락실, 노래 9곡이 흐르는 왕실음악당, 강아지 사진을 꾸미는 부띠끄 스튜디오, 매일 조금씩 사건을 푸는 왕실 연대기
    • 동궁/내전: 아기 세자를 하루 30초씩 돌보는 동궁, 요리 게임 수라간, “이거 먹여도 돼?”를 찾는 부식보급청, 반려견과 갈 수 있는 곳을 모은 왕실 휴양소
    • 춘추관: 사진으로 견종을 맞히는 혈통 감정소, 강아지와 집사 중 누가 사고뭉치인지 가리는 왕실 재판, 출석부와 훈장함

    이름만 봐도 알겠지만 기능마다 왕실 이름을 붙였다. 강아지는 왕, 반려인은 집사라는 처음 세계관을 끝까지 지키고 싶었기 때문이다. 기능을 하나 더할 때마다 “이게 왕국 안에서는 무엇일까?”부터 물었다. 음식 정보는 부식보급청, 여행지는 휴양소, 동물 병원 정보는 어의원이 되는 식이다.

    시즌 1과 무엇이 다른가

    시즌 1이 “코딩을 몰라도 앱을 만들 수 있을까?”에 대한 답이었다면, 시즌 2는 “만든 앱을 어떻게 키우나?”에 대한 기록이다. 막히는 곳도 달랐다.

    처음엔 기능 하나 만드는 게 어려웠다. 이제는 기능이 많아져서 생기는 문제가 어려웠다. 새 기능을 넣었더니 홈 화면이 길어져 아무도 끝까지 내리지 않았다. 늦게 만든 기능일수록 아무도 찾지 못했다. 한국판을 고쳤는데 미국판과 일본판에는 반영이 안 되는 일도 있었다. 기능끼리 따로 놀아서 “그래서 이 앱이 뭐 하는 앱이야?”라는 질문을 다시 듣기도 했다.

    그때마다 AI와 머리를 맞댔고, 정답보다는 우리 왕국에 맞는 답을 찾으려 했다. 그 과정을 숨기지 않고 쓸 생각이다.

    2026년 10월 왕립 개집사협회 앱 홈 첫 화면
    지금의 홈 첫 화면. 왕실 교지, 오늘의 왕실 카드, 하단 탭 5개가 생겼다
    출처: 왕립 개집사협회 앱 2026년 10월 16일 화면, 직접 캡처

    이 시즌에서 얻어 갈 수 있는 것

    앱을 만들지 않는 분이라도 가져갈 게 있도록 글마다 세 가지를 담으려 한다.

    1. 아이디어가 기능이 되기까지: 머릿속 생각을 AI에게 어떻게 설명했는지, 실제로 쓴 요청 문장까지
    2. 막힌 곳과 바꾼 결정: 처음 계획에서 무엇이 왜 바뀌었는지
    3. 바로 써먹는 팁: 내 앱이나 내 일에 그대로 가져갈 수 있는 방법 한 가지

    순서는 대체로 실제로 만든 순서를 따른다. 먼저 일하는 방식이 어떻게 바뀌었는지부터 이야기하고, 웹툰과 음악, 매일 들어올 이유, 휴양소와 혈통 감정소, 재판, 동궁, 연대기 순으로 왕국을 한 바퀴 돌 예정이다.

    왕국을 넓히며 지킨 세 가지 약속

    기능이 늘수록 욕심도 늘었다. 로그인을 넣으면 기록을 여러 기기에서 볼 수 있고, 광고를 붙이면 운영비가 나오고, 사진을 서버로 보내면 더 똑똑한 AI를 쓸 수 있다. 하지만 시즌 2 내내 지킨 약속이 세 가지 있다.

    • 회원가입과 서버 없이 만든다. 동궁의 육아일지도, 연대기의 진행 기록도 모두 그 휴대폰 안에만 저장된다. 대신 휴대폰을 바꿀 때를 위해 기록 백업 파일을 만들 수 있게 했다.
    • 강아지 사진은 휴대폰 밖으로 나가지 않는다. 혈통 감정소가 사진으로 견종을 맞힐 때도, 부띠끄 스튜디오에서 모자를 씌울 때도 사진은 그 기기 안에서만 처리된다.
    • 앱 안에 광고와 제휴 링크를 넣지 않는다. 쇼핑 링크 하나쯤 넣자는 유혹이 있었지만, 앱은 끝까지 놀이터로 두기로 했다. 블로그와 유튜브처럼 우리 채널로 가는 링크만 둔다.

    재미로 하는 기능에는 “재미를 위한 오락용이며 실제 평가가 아니다”라는 안내도 꼭 붙였다. 혈통 감정서는 진짜 혈통 검사가 아니고, 재판 판결은 진짜 판결이 아니다. 반대로 휴양소나 부식보급청처럼 실제 생활에 쓰는 정보에는 출처와 확인한 날짜를 붙였다. 재미와 정보를 섞지 않는 것, 이게 작은 왕국이 믿음을 얻는 방법이라고 생각했다.

    이 약속 때문에 포기한 기능도 있고, 더 어렵게 돌아간 길도 있다. 그 이야기들도 시즌 2에서 하나씩 꺼내 볼 생각이다.

    여전히 컴맹 집사입니다

    달라지지 않은 것도 있다. 나는 지금도 코드를 직접 짜지 못한다. 대신 무엇을 만들지 정하고, 결과를 직접 써 보고, “이건 아니야”라고 말하는 역할이 훨씬 능숙해졌다. 시즌 1을 읽은 분이라면 그 변화가 반가울 테고, 처음 오신 분이라면 이 시즌부터 읽어도 충분하다.

    궁금한 기능이 있다면 앱을 먼저 열어 보셔도 좋다. 글을 읽고 다시 보면 같은 화면이 다르게 보일 것이다. 시즌 1 이야기는 코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연부터 시작한다.


    이전 이야기: 시즌 1 「코딩 몰라도 AI로 첫 앱 만들기」 전체 목차
    다음 이야기: 기능 하나 만들기 전에 ‘기준서’부터 쓰는 이유

  • 그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법

    그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법

    작성자: 컴맹 집사

    대표 이미지: 앱 안에 넣은 웹툰 1화의 첫 장면 (출처: 직접 제작한 앱 그림(이미지 생성 AI 활용))

    이 글에서 얻는 것

    • 이런 분께 그림 실력 없이 AI 그림으로 웹툰을 만들어 보고 싶은 분
    • 핵심 답 캐릭터 설정 시트를 참고 이미지로 함께 넣고 장소별 배경도 고정해야 컷마다 같은 캐릭터가 나온다. 대사는 그림에 넣지 않고 화면 글자로 올렸다
    • 바로 쓰는 팁 AI 이미지는 WebP로 줄이고 지연 로딩(loading=”lazy”)을 쓰면 휴대폰에서 빨리 뜬다. 15컷을 합쳐도 1MB가 안 됐다

    기능을 다 갖추고 나니 허전함이 생겼다. 사람들은 진단을 한 번 하고, 작위증을 공유하고, 떠났다. 다시 올 이유가 없었다. 테스트 앱의 숙명 같은 것이었다.

    또 하나. “강아지는 왕, 반려인은 왕의 집사”라는 세계관은 설명만으로는 전하기 어려웠다. 첫 화면에 몇 줄 적어 두는 것으로는 이 세계가 얼마나 귀엽고 따뜻한지 전해지지 않았다. 그래서 떠올린 게 웹툰이다. 그림이라고는 졸라맨밖에 못 그리는 사람이 앱에 웹툰을 넣기까지의 이야기다.

    왜 하필 웹툰이었나

    AI와 이야기하며 웹툰을 고른 데에는 세 가지 이유가 있었다.

    • 세계관을 이야기로 보여 줄 수 있다. 폐하를 모시는 초보 집사의 하루를 보여 주면, 설명하지 않아도 “아, 이런 세계구나” 하고 알게 된다.
    • 휴대폰에 잘 맞는다. 세로로 스크롤하며 보는 웹툰은 휴대폰에서 가장 편하게 소비되는 형식이다.
    • 다음 편을 기다리게 만든다. 연재 형식이면 다시 들어올 이유가 생긴다.

    주인공부터 정했다: 두부 폐하와 수습집사 지우

    이야기보다 먼저 캐릭터를 정했다. 흰 털에 갈색 귀를 가진 강아지 두부가 폐하, 노란 후드티를 입은 초보 집사 지우가 수습집사다. 두 캐릭터의 생김새와 옷차림, 여러 표정을 한 장에 모은 캐릭터 설정 시트를 먼저 만들었다. 지우의 옷은 가슴에 작은 왕관 로고가 있는 노란 후드티, 청바지, 흰 운동화로 못 박아 두었다.

    이 시트가 나중에 가장 중요한 도구가 됐다.

    AI 이미지로 같은 캐릭터를 유지하기

    캐릭터를 일정하게 유지하는 게 가장 어려웠다. 1컷의 두부와 2컷의 두부가 다른 강아지처럼 보이면 만화가 안 된다. 이미지 생성 AI는 요청할 때마다 조금씩 다른 그림을 만들었다.

    두부와 지우 캐릭터 설정 시트
    같은 캐릭터를 유지하려고 만든 설정 시트
    출처: 직접 제작한 앱 그림(이미지 생성 AI 활용)
    • 글 설명만으로는 캐릭터가 고정되지 않는다. “흰 강아지, 갈색 귀”라고 아무리 자세히 써도 컷마다 다른 강아지가 나왔다. 캐릭터 설정 시트를 참고 이미지로 함께 넣어야 같은 두부가 나왔다.
    • 모델마다 결과가 다르다. 여러 이미지 모델을 시험해 보니 어떤 모델은 인물을 너무 멀리서 잡고 컷 안에 테두리까지 그려 넣었다. 가장 안정적인 모델을 골랐다.
    • 장소도 고정해야 한다. 첫 화를 만들고 보니 거실 소파 색이 컷마다 갈색과 크림색을 오갔다. 다음 화부터는 “거실은 크림색 소파와 책장, 흰 커튼”처럼 장소별 배경을 미리 정해 두고 매번 넣었다. 두부의 크기도 “무릎 높이의 성견”으로 정했다. 그러자 일관성이 눈에 띄게 좋아졌다.

    한 컷을 만드는 데 20초 가까이 걸렸고, 요청이 몰리면 잠시 기다리라는 응답이 오기도 했다. 이런 경우 자동으로 다시 시도하게 해 두니 사람이 지켜보지 않아도 끝까지 만들어졌다.

    말풍선은 그림에 넣지 않았다

    처음엔 말풍선과 대사까지 그림에 넣으려 했다. 그런데 이미지 생성 AI는 한글을 정확히 그리지 못하는 경우가 많았다. 대사가 이상한 모양으로 뭉개졌다.

    그래서 그림에는 말풍선 없이 장면만 넣고, 대사는 앱 화면에서 글자로 올렸다. 그림 위에 말풍선 모양의 상자를 겹치고 그 안에 글자를 쓰는 방식이다.

    여기서 재미있는 실수가 있었다. 그림에 “말풍선이 들어갈 빈 자리를 남겨 줘”라고 요청했더니, AI가 빈 네모 상자를 그려 넣었다. 말 그대로 “빈 자리”를 그린 것이다. “상자나 테두리는 그리지 말고, 배경이 자연스럽게 이어지게, 컷 전체를 채워 줘”로 바꾸자 해결됐다. AI에게는 하지 말아야 할 것도 분명하게 말해야 한다는 걸 배웠다.

    대사를 글자로 올리니 좋은 점이 더 있었다.

    • 대사를 고칠 때 그림을 다시 만들 필요가 없다.
    • 글자가 선명하다. 휴대폰에서 확대해도 깨지지 않는다.
    • 나중에 영어판, 일본어판으로 바꾸기도 쉽다.

    완벽하지 않아도 공개했다

    첫 화 15컷을 모두 만들고 검토해 보니 아쉬운 점이 남아 있었다. 몇몇 컷에서 두부가 강아지처럼 작게 나오거나, 한 컷은 표정이 고양이 같았다. 다시 만들지 고민하다가 지금 상태로 공개하기로 했다. 문제 컷은 기록해 두고, 나중에 같은 파일 이름으로 새 그림을 만들어 덮어쓰면 되기 때문이다. 완벽을 기다리다 아무것도 못 올리는 것보다 낫다고 판단했다.

    휴대폰에서 빠르게 보이게 하기

    웹툰 이미지를 앱에 넣자 새 문제가 생겼다. 웹툰 화면을 열면 이미지가 뜨는 데 몇 초가 걸렸다. 특히 데이터가 느린 곳에서는 흰 화면이 한참 이어졌다.

    해결 방법은 두 가지가 있었다.

    1. 이미지 크기 줄이기
    생성된 이미지는 한 장에 수 MB나 됐다. AI가 만들어 준 변환 도구로 휴대폰 화면 너비에 맞춰 가로 800픽셀로 줄이고, 용량이 작은 WebP 형식으로 바꿨다. 15컷을 다 합쳐도 1MB가 안 됐다.

    2. 보일 때 불러오기(지연 로딩)
    모든 컷을 한꺼번에 불러오지 않고, 화면에 곧 보일 이미지만 불러오게 했다. (출처: MDN 웹 문서, 지연 로딩) 이미지 태그에 loading="lazy"라는 짧은 설정 하나로 가능했다. AI는 이걸 지연 로딩(lazy loading)이라고 불렀다. 필요할 때까지 미루니 첫 화면이 빨라진다.

    뷰어 위쪽에는 얼마나 읽었는지 보여 주는 진행 막대를, 마지막 컷 아래에는 “나도 왕실 집사 되기” 버튼을 넣었다. 웹툰을 다 본 사람이 자연스럽게 진단으로 넘어오도록 한 것이다.

    올리면 안 되는 파일

    웹툰 작업을 하다 보니 앱 폴더 안에 초안 그림과 작업용 파일이 잔뜩 쌓였다. 이 앱은 저장소의 파일이 그대로 인터넷에 올라간다. 초안 폴더를 그냥 두면 미완성 그림이 누구나 볼 수 있는 주소로 공개될 수 있다.

    그래서 초안은 앱 폴더 밖의 별도 폴더로 옮기고, GitHub에 올리지 않을 파일 목록(.gitignore)에도 적어 두었다. 기획서 같은 내부 문서도 공개 저장소와 분리했다. 무엇을 올리지 않을지 정하는 것도 배포의 일부였다.

    저작권과 관련해 확인한 것

    AI 이미지로 만든 웹툰을 공개하기 전에 확인한 것들이다.

    • 이미지 생성 도구의 이용약관에서 생성한 이미지를 공개하고 광고가 붙은 곳에서 써도 되는지
    • 이미지가 특정 작가나 유명 캐릭터를 닮지 않았는지
    • 웹툰 이야기가 다른 작품을 베끼지 않았는지

    AI가 만든 그림의 저작권 보호 범위는 아직 분명하지 않다는 점도 알게 됐다. 그래서 캐릭터 설정과 이야기, 대사, 배치처럼 사람이 직접 설계한 부분을 분명히 남겨 두려고 했다.

    첫 화를 올리고 나니 반응이 괜찮았다. “다음 편은 언제 나와?”라는 말까지 들었다. 이제 웹툰을 여러 회차로 늘릴 차례였다.


    이전 글: 회원가입 없이 데이터 저장하기, 3가지 방법 중 내가 고른 것
    다음 글: 웹툰이 늘어나면 생기는 일, 회차 목록 정리하는 법

  • 회원가입 없이 데이터 저장하기, 3가지 방법 중 내가 고른 것

    회원가입 없이 데이터 저장하기, 3가지 방법 중 내가 고른 것

    작성자: 컴맹 집사

    대표 이미지: 계정 없이도 기록은 내 기기 안에만 남는다 (사진: webandi / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 로그인 기능 없이 웹앱에 기록과 사진을 남기고 싶은 분
    • 핵심 답 글자 위주는 LocalStorage, 사진이 많으면 IndexedDB, 기기 이동은 파일 내보내기. 이 앱은 LocalStorage를 기본으로 쓰고 파일 백업을 더했다
    • 바로 쓰는 팁 “글자뿐인가, 사라지면 큰일인가, 여러 기기에서 봐야 하나” 세 질문에 답해 AI에게 알려 주면 맞는 저장 방법을 골라 준다

    “다른 휴대폰에서도 내 작위증 볼 수 있어?”

    이전 결과 보기 기능을 만들고 나서 받은 질문이다. 답은 “아니요”였다. 작위증을 휴대폰 브라우저 안에만 저장하고 있었기 때문이다. 게다가 앞으로 저장할 것은 점점 늘어날 참이었다. 작위증 재료와 사진, 아카데미 승급 단계, 게임 최고 기록, 첫 화면에 걸 “우리 집 왕” 사진까지.

    그럼 로그인을 넣으면 되지 않을까? 초보자에게 그건 집을 한 채 더 짓는 수준의 공사였다. 그래서 질문을 바꿨다. “회원가입 없이 어디까지 저장할 수 있을까? 그중 우리 앱에 맞는 건 뭘까?”

    잠깐, 로그인은 원래 왜 하는 걸까?

    로그인을 피하려면 로그인이 하는 일부터 알아야 했다. AI의 설명을 쉽게 바꾸면 이렇다. 로그인은 서버에게 “이 데이터는 이 사람 거예요”라고 알려 주는 이름표다. 데이터를 회사 서버 한곳에 모아 두는 앱이라면, 누구 것인지 구분해야 하니 로그인이 꼭 필요하다.

    거꾸로 말하면, 데이터를 사용자의 휴대폰 안에 두면 로그인이 필요 없다. 그 휴대폰 자체가 “이 사람 것”이니까. 우리 앱은 처음부터 이쪽이었다. 이유도 분명했다.

    • 재미로 하는 집사 진단에 회원가입까지 할 사람은 거의 없다.
    • 로그인이 생기면 비밀번호, 이메일 같은 개인정보를 책임져야 한다.
    • 서버와 데이터베이스를 만들고 지키는 일은 초보자에게 너무 크다.

    방법 1. LocalStorage, 브라우저 속 작은 공책

    앞 글에서 다룬 그 공책이다. 이름표를 붙여 적어 두면 앱을 닫아도 남는다.

    장점은 정말 쉽다는 것. 단점은 공책이 작고(보통 5MB 안팎) 글자만 적힌다는 것이다. 그래서 설정값, 마지막 결과, 게임 점수처럼 작은 기록에 딱 맞다. 사진을 많이 넣기에는 좁다.

    방법 2. IndexedDB, 브라우저 속 큰 창고

    AI가 사진 저장용으로 추천한 것이 IndexedDB였다. 이름은 외계어 같지만, 공책 옆에 있는 큰 창고라고 생각하면 된다. (출처: MDN 웹 문서, IndexedDB) 공책보다 훨씬 많이 넣을 수 있고, 사진 같은 큰 파일도 그대로 보관할 수 있다.

    대신 사용법이 공책보다 복잡하다. 다행히 AI 말로는 이 창고를 쉽게 쓰게 도와주는 작은 도구도 있다고 한다. 사진을 많이 다루는 앱이라면 이쪽이 정답이다.

    방법 3. 파일로 내보내기, 내 손에 쥐는 백업

    세 번째는 발상이 다르다. 기록을 파일로 만들어 사용자가 직접 보관하게 하는 것이다. 브라우저 기록을 지워도, 휴대폰을 바꿔도 파일만 있으면 다시 불러올 수 있다. 다른 기기로 기록을 옮길 때도 쓸 수 있다.

    기록 백업·옮기기 화면
    로그인 없이 기록을 파일로 내보내고 불러오는 기록 백업 기능
    출처: 왕립 개집사협회 앱 2026년 10월 1일 버전 화면, 직접 캡처

    단점은 사용자가 파일을 직접 챙겨야 한다는 것. 사실 앞에서 만든 “작위증 이미지 저장”도 넓게 보면 이 방식이다. 작위증을 사진첩에 저장해 두면 앱 기록이 사라져도 증서는 남는다.

    한눈에 비교

    구분 LocalStorage (공책) IndexedDB (창고) 파일 내보내기
    어디에 브라우저 브라우저 내 휴대폰의 파일
    얼마나 작음 (5MB 안팎) 큼 거의 제한 없음
    사진 어려움 가능 가능
    난이도 쉬움 보통 보통
    기록 삭제하면 사라짐 사라짐 남음

    그래서 내가 고른 조합

    결론은 단순했다. 공책을 기본으로 쓰고, 모자란 부분만 다른 방법으로 메운다.

    • 작위증 재료, 아카데미 단계, 게임 기록 → 공책(LocalStorage). 모두 글자로 된 작은 기록이다.
    • 사진 → 원본 대신 긴 쪽 900픽셀로 줄인 사진을 공책에 함께 넣는다. 자리가 모자라면 사진만 빼고 저장한다.
    • 백업 → 작위증 이미지 저장과 기록 파일 내보내기. 휴대폰을 바꿔도 소중한 건 남는다.

    창고(IndexedDB)도 진지하게 고민했다. 하지만 우리 앱은 작위증에 사진 한 장, 첫 화면에 사진 한 장이 전부였다. 줄인 사진 한두 장이면 공책으로도 충분했다. 나중에 사진 기능이 커지면 그때 옮기기로 하고, 지금은 “알아만 두기”로 정리했다.

    나에게 맞는 방법 고르는 질문 세 가지

    로그인 없는 앱을 만들려는 분이라면 아래 세 가지만 스스로 물어보면 된다.

    1. 저장할 것이 글자뿐인가, 사진도 많은가? 글자뿐이면 공책, 사진이 많으면 창고다.
    2. 사라지면 큰일 나는 자료인가? 그렇다면 파일 내보내기나 이미지 저장 같은 백업을 꼭 같이 둔다.
    3. 여러 기기에서 같이 봐야 하는가? 그렇다면 그때는 로그인과 서버가 필요하다는 신호다.

    이 답을 AI에게 그대로 알려 주면, AI가 알맞은 저장 방법을 골라 준다.

    사진 약속은 그대로 지켰다

    사진을 저장하게 되면서 사용자에게 보여 주는 안내 문구도 다시 확인했다. “사진은 사용자의 기기 안에서만 처리·저장되며, 서버나 다른 곳으로 전송되지 않습니다.” 처음 사진 기능을 만들 때 한 약속이라, 저장 방식이 바뀌어도 이 문장만은 지켜야 했다.

    첫 화면 “우리 집 왕” 사진과 작위증 사진은 서로 다른 이름표로 따로 저장했다. 첫 화면 사진을 바꿔도 이미 받은 작위증 사진은 그대로다. 헷갈리지 않도록 “이 사진은 작위증 사진과는 별개예요”라는 안내도 붙였다.

    뜻밖에 막힌 곳: 누워 버린 폐하

    첫 화면 사진을 만들다가 황당한 일을 겪었다. 휴대폰으로 세로로 찍은 사진을 올리면 폐하가 옆으로 누운 채 나오는 것이다. 알고 보니 사진 파일 안에는 “몇 도 돌려서 봐야 하는지”가 따로 적혀 있는데, 사진을 줄이는 과정에서 이 정보를 읽지 않아 생긴 문제였다. AI에게 그 정보를 읽어 방향을 바로잡아 달라고 해서 해결했다.

    안전장치도 몇 가지 달았다. 20MB가 넘는 사진이나 이미지가 아닌 파일을 고르면 “사진 용량이 너무 커요”, “이미지 파일만 올릴 수 있어요”라고 알려 준다. 저장 공간이 모자라면 사진을 더 작게 줄여서 다시 해 보고, 그래도 안 되면 안내만 띄운다. 어떤 경우에도 앱이 멈추지 않는 게 원칙이었다.

    여기까지로 집사 작위증 앱의 기본기는 다 갖췄다. 질문, 결과, 작위증, 사진, 저장, 공유, 기록까지. 이제 앱을 더 재미있게 만들 차례다. 첫 도전은 그림도 못 그리는 내가 앱 안에 웹툰을 넣는 것이었다.


    이전 글: LocalStorage, 브라우저 속 작은 공책? 컴맹도 이해한 저장의 원리
    다음 글: 그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법

  • LocalStorage, 브라우저 속 작은 공책? 컴맹도 이해한 저장의 원리

    LocalStorage, 브라우저 속 작은 공책? 컴맹도 이해한 저장의 원리

    작성자: 컴맹 집사

    대표 이미지: LocalStorage는 브라우저 안에 놓인 작은 공책과 같다 (사진: freephotocc / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 AI가 “LocalStorage에 저장하면 돼요”라고 했는데 무슨 뜻인지 모르는 분
    • 핵심 답 브라우저가 사이트마다 하나씩 주는 작은 공책이다. 앱을 닫아도 남지만 그 기기·그 브라우저 안에만 있고, 용량은 보통 5MB 안팎이라 사진에는 좁다
    • 바로 쓰는 팁 크롬에서 F12 → Application → Local Storage를 열면 실제로 저장된 내용을 눈으로 볼 수 있다

    “LocalStorage에 저장하면 됩니다.”

    이전 결과 보기 기능을 만들 때 AI가 툭 던진 말이다. 로컬스토리지? 로컬은 “지역”, 스토리지는 “저장소”. 지역 저장소라니, 동네 창고라도 빌린다는 건가 싶었다.

    기능은 AI가 만들어 줬고 잘 돌아갔다. 그런데 원리를 모르니 마음이 불안했다. 기록이 갑자기 사라지면 어쩌지? 얼마나 넣을 수 있지? 다른 사람이 훔쳐볼 수는 없나? 이 세 가지가 궁금해서 제대로 알아봤다. 결론부터 말하면, 생각보다 훨씬 단순했다.

    한 줄 요약: 브라우저 속 작은 공책

    LocalStorage는 크롬이나 사파리 같은 브라우저가 사이트마다 하나씩 나눠 주는 작은 공책이다. (출처: MDN 웹 문서, Web Storage API) 이 공책에는 네 가지 특징이 있다.

    • 내 앱 전용이다. 다른 사이트는 내 앱의 공책을 펼쳐 볼 수 없다.
    • 안 지워진다. 화면을 닫아도, 휴대폰을 껐다 켜도 적어 둔 내용이 남는다.
    • 그 휴대폰 안에만 있다. 서버로 보내지 않으니 회원가입도 로그인도 필요 없다.
    • 크기가 작다. 넣을 수 있는 양이 정해져 있다.

    앞 글에서 “칠판 대신 공책에 적자”고 했던 그 공책이 바로 이것이었다.

    사물함처럼 이름표를 붙여서 넣는다

    공책에 적을 때는 이름표와 내용을 한 쌍으로 적는다. 학교 사물함을 떠올리면 쉽다. “초코네 사물함”이라는 이름표를 붙이고 물건을 넣어 두면, 나중에 이름표만 대면 바로 꺼낼 수 있다.

    우리 앱은 기능마다 사물함을 따로 썼다. 작위증 사물함, 집사 아카데미 사물함, 첫 화면 “우리 집 왕” 사진 사물함, 게임 최고 기록 사물함. 이렇게 나눠 두니 게임을 고치다가 작위증 기록을 망가뜨리는 사고를 막을 수 있었다. 한 가지 더, 이름표는 한 번 정하면 함부로 바꾸지 않는다. 이름표를 바꾸면 기존 사용자의 기록을 못 찾게 되기 때문이다.

    함정 하나: 공책에는 글자만 적힌다

    여기서 한참 헤맸다. 이 공책에는 글자만 적을 수 있다. 숫자 3을 넣어도 꺼내 보면 글자 “3”이 되어 있다.

    진짜 문제는 덩어리였다. 작위증을 다시 그리려면 폐하 정보, 답 7개, 발급일, 사진을 한 묶음으로 넣어야 한다. 그런데 묶음을 그대로 넣었더니 “[object Object]”라는 정체불명의 글자로 바뀌어 저장됐다. 꺼내 봐도 쓸 수가 없었다.

    화면을 보여 주자 AI가 바로 원인을 알려 줬다. 묶음을 글자로 “포장”해서 넣고, 꺼낼 때 다시 “포장을 풀면” 된다는 것이다. 이사할 때 짐을 박스에 싸서 보관했다가 새집에서 푸는 것과 같다. 이 포장 방식의 이름이 JSON이다. 예전에 배포 오류 글에서 쉼표 하나 때문에 배포를 망쳤던 바로 그 JSON이라 묘하게 반가웠다.

    브라우저 Local Storage에 저장된 작위증 데이터
    결과를 받은 뒤 브라우저 공책(Local Storage)에 실제로 적힌 내용
    출처: 앱(2026년 9월 20일 버전)에서 결과를 받은 뒤 저장 내용을 확인해 직접 정리

    공책에 실제로 뭐가 적혔는지 눈으로 볼 수도 있다. 컴퓨터 크롬에서 F12를 누르고 Application 탭의 Local Storage를 열면 이름표와 내용이 표로 나온다. 기록이 이상하게 나올 때 여기를 열어 보면 “저장이 잘못됐는지, 보여 주는 게 잘못됐는지” 바로 구분된다.

    얼마나 넣을 수 있을까? 사진이 복병이다

    브라우저마다 조금씩 다르지만 보통 사이트당 5MB 안팎이라고 한다. 글자로만 치면 어마어마한 양이다. 폐하 정보와 답 7개는 1KB도 안 된다.

    문제는 사진이다. 휴대폰 원본 사진은 한 장에 몇 MB나 되고, 글자로 포장하면 더 커진다. 원본 두세 장이면 공책이 꽉 찬다. 앞에서 사진을 긴 쪽 900픽셀로 줄여 둔 게 여기서 빛을 봤다.

    그래도 공책이 꽉 차면 저장에 실패하고, 최악의 경우 앱이 멈춘다. 그래서 안전장치를 부탁했다. 작위증 기록은 사진을 빼고 한 번 더 저장해 보고, 첫 화면 사진은 더 작게 줄여서 다시 시도한다. 그래도 안 되면 안내만 띄우고 앱은 계속 쓸 수 있게 했다. 공책이 꽉 찬 상황을 일부러 만들어 자동 테스트로도 확인했다.

    공책이 사라지는 네 가지 경우

    “영원히 남는다”는 말은 반만 맞다. 이럴 때는 공책이 비어 있다.

    • 사용자가 브라우저의 사이트 데이터를 지웠을 때
    • 시크릿 모드로 쓰고 창을 닫았을 때
    • 오래 방문하지 않아 브라우저가 공간을 정리했을 때 (일부 브라우저)
    • 다른 브라우저나 다른 기기로 열었을 때 (사라진 게 아니라 원래 없는 것)

    그래서 원칙을 세웠다. 공책에는 사라져도 큰일 나지 않는 것만 적는다. 작위증 기록은 사라져도 다시 진단받으면 되고, 소중한 작위증은 이미지로 저장해 두면 된다. 우리 앱에 딱 맞는 용도였다.

    한눈에 정리: 이럴 때 쓰고, 이럴 땐 쓰지 말자

    앱을 만들면서 정리한 기준을 표로 남겨 둔다. 처음 LocalStorage를 쓰는 분이라면 이 표만 기억해도 실수를 크게 줄일 수 있다.

    이럴 때 좋다 이럴 땐 피하자
    마지막 결과, 설정값처럼 작은 기록 비밀번호, 연락처 같은 개인정보
    사라져도 다시 만들 수 있는 것 절대 잃어버리면 안 되는 자료
    한 기기에서만 쓰면 되는 것 휴대폰과 컴퓨터에서 함께 봐야 하는 것
    작게 줄인 사진 한두 장 원본 사진 여러 장

    AI에게 저장 기능을 부탁할 때도 이 표를 그대로 보여 주면 좋다. “이 기록은 사라져도 괜찮으니 LocalStorage에 저장해 줘. 대신 저장에 실패해도 앱이 멈추지 않게 해 줘.” 이렇게 말하면 안전장치까지 알아서 챙겨 준다.

    다른 사람이 훔쳐볼 수 있을까?

    AI에게 이것도 물었다. 다른 사이트는 절대 볼 수 없지만, 그 휴대폰을 직접 쓰는 사람은 볼 수 있다고 한다. 그래서 비밀번호나 주민번호 같은 민감한 정보는 이 공책에 적으면 안 된다. 강아지 이름과 작위 정도면 괜찮다. 앱을 만드는 사람이라면 이것만은 꼭 기억하자.

    그런데 사진을 더 안전하게 남길 방법은 정말 없을까? 로그인 없이 데이터를 남기는 다른 방법을 다음 글에서 비교해 봤다.


    이전 글: 앱 닫으면 결과가 사라진다고? 이전 결과 보기 만든 이야기
    다음 글: 회원가입 없이 데이터 저장하기, 3가지 방법 중 내가 고른 것