[태그:] AI 앱 만들기

  • 질문 7개로 집사 유형을 맞히는 테스트 앱 만드는 법

    질문 7개로 집사 유형을 맞히는 테스트 앱 만드는 법

    작성자: 컴맹 집사

    대표 이미지: 7개 질문 중 두 번째 질문 화면 (출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처)

    이 글에서 얻는 것

    • 이런 분께 질문에 답하면 유형이 나오는 테스트를 만들고 싶은 분
    • 핵심 답 보기마다 점수를 줄 유형을 정해 두고, 고를 때마다 1점씩 더해 가장 높은 유형을 결과로 보여 준다
    • 바로 쓰는 팁 질문은 “누구나 겪어 본 상황인가, 보기끼리 확실히 다른가, 답하면서 웃을 수 있는가”로 거르자

    “어떻게 답해도 비슷한 작위만 나와.”

    첫 버전을 해 본 친구의 말이다. AI가 처음 만들어 준 앱은 질문도 있고 결과도 있었지만, 질문과 결과가 어떻게 이어지는지는 내가 신경 쓰지 않았다. 그 연결을 AI에게 맡겨 두니 결과가 한쪽으로 쏠렸다.

    테스트 앱의 핵심은 질문 → 답 → 결과의 연결이다. 이 글은 왕립 개집사협회 앱에서 그 연결을 처음부터 다시 설계한 과정을 적는다.

    무엇을 묻는 테스트인가부터 정했다

    처음 헷갈렸던 건 “누구를 진단하느냐”였다. 폐하(강아지)의 성격은 앞 화면에서 보호자가 직접 고른다. 그러니 질문 7개는 폐하를 모시는 나, 즉 집사가 어떤 사람인지를 묻는 질문이어야 했다. 이 방향을 정하자 질문 후보를 고르는 기준도 분명해졌다.

    질문 개수는 왜 7개였나

    처음에는 10개를 생각했다. 직접 해 보니 8번째쯤에서 지루해졌다. 반대로 5개는 결과가 너무 가볍게 느껴졌다. AI에게 물으니, 가볍게 즐기는 테스트는 대체로 1분 안팎에 끝나는 게 좋고, 질문 하나에 5~8초쯤 걸린다고 봐서 7~10개가 적당하다고 했다. 다만 이 숫자는 AI의 일반적인 답이라, 나는 직접 시간을 재 보았다. 7개가 1분이 채 안 걸렸다. 첫 화면의 “정보 입력 → 질문 7개 → 작위증 발급” 순서와도 잘 맞았다.

    질문을 고른 기준

    AI에게 후보 질문을 20개쯤 받은 뒤 아래 기준으로 걸렀다. 후보는 제미나이와 챗GPT에서 각각 받아 겹치는 것과 참신한 것을 비교했다.

    1. 반려인이라면 누구나 겪어 본 상황인가. 산책, 목욕, 간식처럼 누구나 떠올릴 수 있어야 한다.
    2. 세계관 말투로 물을 수 있는가. “강아지가 목욕을 싫어하면?” 대신 “폐하가 목욕을 단호히 거부하신다면?”처럼 묻는다.
    3. 보기끼리 확실히 다른가. 보기 두 개가 비슷하면 사용자가 고민만 한다.
    4. 재미있는가. 답하면서 “이거 완전 나잖아” 하고 웃을 수 있어야 한다.

    최종 7개는 이렇다.

    1. 산책 시간이 되었을 때, 나는?
    2. 폐하가 목욕을 단호히 거부하신다면?
    3. 왕실 장난감이 감쪽같이 사라졌다!
    4. 폐하가 초롱초롱한 눈으로 간식을 요구하신다.
    5. 폐하와 함께하는 시간은 나에게?
    6. 왕실 업무가 산더미처럼 밀렸다!
    7. 새벽 세 시, 폐하의 갑작스러운 명령이 내려졌다.

    집사 유형 7가지와 작위 5단계

    결과는 두 겹으로 나오게 했다. 먼저 집사 유형이 정해지고, 유형에 따라 작위가 정해진다.

    진단 결과로 나온 집사 유형과 작위
    점수에 따라 집사 유형과 작위가 정해진다
    출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처
    집사 유형 받는 작위
    전략적 회피형 집사 1단계 견국 수습집사
    간식 협상형 집사 2단계 왕실 생활협력관
    과잉보호형 집사 / 왕실 기록형 집사 3단계 왕실 돌봄근위관
    무조건 충성형 집사 / 산책 원정대장 4단계 발바닥 궁정대신
    평화 유지 전문관 5단계 왕실 총집사

    처음에는 작위를 “1등급, 2등급”으로 표시했다. 보통 “1등급”은 가장 높은 것으로 받아들여진다. 우리 앱에서 1은 가장 처음 단계인 수습집사라서 헷갈렸다. 그래서 “등급” 대신 “단계”로 바꿨다. 단어 하나를 바꾸자 오해가 사라졌다.

    보기마다 점수를 매기는 방식

    AI에게 “질문 답에 따라 일곱 가지 유형이 골고루 나오게 하려면 어떻게 설계해?”라고 묻자, 가장 흔한 방식으로 점수 방식을 알려 줬다.

    • 각 질문의 보기 네 개는 어떤 집사 유형에 점수를 주는지 정해 둔다.
    • 사용자가 보기를 고를 때마다 그 유형에 1점을 더한다.
    • 일곱 문제가 끝나면 점수가 가장 높은 유형이 결과가 된다.

    1번 질문은 이렇게 설계했다.

    보기 점수가 가는 유형
    알람보다 먼저 목줄을 들고 대기한다 산책 원정대장
    폐하의 눈치를 보며 슬쩍 시간을 확인한다 무조건 충성형
    “오늘은 날씨가 좀…” 하며 협상을 시도한다 전략적 회피형
    오늘의 코스와 시간을 기록해 둔다 왕실 기록형

    첫 버전에서 결과가 쏠렸던 이유도 이때 알았다. 처음에는 보기마다 1~4점을 주고 합계로 결과를 나눴는데, 대부분 사람이 중간쯤 답하니 합계가 가운데 구간에 몰렸다. 게다가 가장 높은 5단계 작위는 처음부터 결과로 나오지 않게 짜여 있었다. 유형별로 점수를 따로 모으는 방식으로 바꾸고, 다섯 단계 모두 결과로 나올 수 있게 연결을 다시 짜자 결과가 골고루 나뉘었다.

    일곱 유형이 골고루 나오는지 점검했다

    질문 7개 × 보기 4개 = 28개 보기가 각각 어느 유형에 점수를 주는지 표로 세어 보았다. 한 유형이 너무 자주 나오면 그 유형만 결과로 몰리고, 너무 적게 나오면 거의 볼 수 없는 유형이 된다. 몇몇 보기의 유형을 바꿔 균형을 맞췄다. 이 표 작업은 AI에게 세어 달라고 부탁하면 금방 끝났다.

    질문을 코드 속 목록으로 관리하기

    질문을 고칠 때마다 코드 여기저기를 뒤지는 게 불편했다. AI에게 “질문과 보기를 한 곳에 모아 관리하기 쉽게 바꿔 줘”라고 하자, 질문과 문구만 모아 둔 데이터 파일을 만들어 줬다.

    const QUESTIONS = [
      { q: '산책 시간이 되었을 때, 나는?', options: [
        { t: '알람보다 먼저 목줄을 들고 대기한다', type: 'walk' },
        { t: '폐하의 눈치를 보며 슬쩍 시간을 확인한다', type: 'loyal' },
        { t: '“오늘은 날씨가 좀…” 하며 협상을 시도한다', type: 'evade' },
        { t: '오늘의 코스와 시간을 기록해 둔다', type: 'record' } ] },
      // 2번~7번 질문도 같은 모양으로 이어진다
    ];
    

    여기서 배열(array)을 처음 배웠다. (출처: MDN 웹 문서, Array) 대괄호 [ ] 안에 여러 개를 순서대로 담아 두는 목록이다. 질문 7개가 하나의 목록에 차례로 들어 있고, 각 질문 안에는 보기 4개의 목록이 또 들어 있다. type에 적힌 영어 이름이 그 보기가 점수를 주는 집사 유형이다.

    이렇게 바꾸고 나니 좋은 점이 컸다.

    • 질문 문구를 고칠 때 이 데이터 파일만 보면 된다. 화면을 움직이는 코드는 건드릴 필요가 없다.
    • 질문을 하나 더 넣고 싶으면 같은 모양으로 한 덩어리만 추가하면 된다.
    • 진행도(3/7)도 목록 길이를 세서 자동으로 표시된다.
    • 나중에 영어판, 일본어판을 만들 때도 이 파일만 언어별로 따로 만들면 됐다.

    코드를 몰라도 이 목록 부분은 문서처럼 읽을 수 있었다. 앱 전체에서 내가 직접 고치는 첫 부분이 됐다.

    직접 해 보며 조정한 것

    • 보기 순서: 특정 유형의 보기가 늘 같은 자리에 있으면 사용자가 눈치챈다. 질문마다 순서를 섞었다.
    • 보기 길이: 너무 길면 휴대폰에서 두세 줄로 넘어간다. 한 줄 안에 들어오도록 줄였다.
    • 웃음 포인트: “내일의 나에게 위임한다”, “못 들은 척 눈을 질끈 감는다” 같은 보기는 반응이 좋았다. 세계관의 톤인 “귀엽고 따뜻하게, 위트는 살짝”을 지키려고 날 선 표현은 뺐다.

    남은 문제는 마지막 계산이었다. 점수가 가장 높은 유형을 어떻게 고를지, 점수가 같으면 어떻게 할지. 여기서 처음으로 조건문을 이해하게 됐다.


    이전 글: 3초 안에 마음을 잡아라! 앱 첫 화면 만드는 법
    다음 글: 조건문, “만약에” 한 마디면 끝! 앱이 알아서 결과를 고르는 원리

  • 3초 안에 마음을 잡아라! 앱 첫 화면 만드는 법

    3초 안에 마음을 잡아라! 앱 첫 화면 만드는 법

    작성자: 컴맹 집사

    대표 이미지: 하루 만에 첫 화면에 그림 배너를 넣어 분위기를 바꿨다 (출처: 앱의 시기별 화면을 직접 캡처해 비교 이미지로 제작)

    이 글에서 얻는 것

    • 이런 분께 앱이나 페이지 첫 화면을 어떻게 꾸밀지 고민하는 분
    • 핵심 답 첫 화면은 무슨 앱인지, 해 보고 싶은 분위기, 걸리는 시간, 눌러야 할 버튼 네 가지를 보여 줘야 한다. 첫 버전은 둘이 빠져 친구가 망설였다
    • 바로 쓰는 팁 AI에게 디자인을 맡길 때는 한 가지만 받지 말고 비교안을 받아 고르는 방식이 가장 효과적이었다

    친구에게 링크를 보내고 옆에서 지켜본 적이 있다. 친구는 앱을 열고 1~2초쯤 화면을 보다가, 스크롤을 한 번 내리고 다시 올린 뒤에야 시작 버튼을 눌렀다.

    그 몇 초 동안 친구는 “이게 뭐 하는 앱이지?”를 고민하고 있었다. 첫 버전의 시작 화면에는 제목 한 줄과 버튼 하나뿐이었다. 그날부터 첫 화면을 다시 만들었다.

    첫 화면이 해야 하는 일

    AI에게 “테스트형 앱의 첫 화면에 꼭 있어야 하는 게 뭐야?”라고 물었다. 받은 답을 내 앱에 맞게 정리하니 네 가지였다.

    1. 무슨 앱인지 한눈에 알려 준다. (제목과 부제)
    2. 해 보고 싶게 만든다. (그림, 분위기)
    3. 얼마나 걸리는지 알려 준다. (질문 7개, 1분)
    4. 무엇을 눌러야 하는지 분명하게 보여 준다. (시작 버튼)

    첫 버전에는 1번과 4번만 있었다. 2번과 3번이 빠지니 친구가 망설였던 것이다.

    문구부터 다시 썼다

    디자인보다 문구를 먼저 정했다. AI에게 후보를 여러 개 받고 그중에서 골랐다.

    • 위쪽 작은 글씨: Royal Kennel Butler Association (RKBA)
    • 제목: 왕립 개집사협회
    • 한 줄 소개: “우리 집 강아지가 왕이라면, 나는 어떤 집사일까?”
    • 진행 안내: 정보 입력 → 질문 7개 → 작위증 발급
    • 버튼: 나도 왕실 집사 되기

    “테스트 시작”보다 “나도 왕실 집사 되기”가 앱의 세계관과 잘 어울렸다. 버튼 문구 하나로 분위기가 달라진다는 걸 이때 알았다.

    디자인을 요청한 방법

    디자인을 말로 설명하는 게 가장 어려웠다. “예쁘게 해 줘”라고 하면 무난하지만 개성 없는 화면이 나왔다. 몇 번 시도한 끝에 효과가 있었던 건 분위기, 색, 구성, 조건을 구체적으로 말하는 방식이었다.

    첫 화면 디자인을 바꿔 줘.
    [분위기] 왕실 집사 임명식, 하지만 귀엽고 따뜻하게. 날 선 풍자는 빼고 위트는 살짝만.
    [색] 따뜻한 크림색 배경, 금색 포인트, 진한 색 글자.
    [구성] 위에서부터 왕관 그림 → 제목 → 부제 → 안내 문구 → 시작 버튼.
    [버튼] 금색, 크고 둥글게, 엄지로 누르기 편하게.
    [조건] 휴대폰 세로 화면 기준. 다른 화면과 기능은 건드리지 마.
    

    처음에는 그림 없이 이모지(👑)로 시작했다. 이미지 파일은 나중에 준비해도 됐다. 이모지는 휴대폰마다 모양이 조금 다르지만, 첫 화면의 분위기를 잡는 데는 충분했다.

    나중에는 배경을 이미지 생성 AI로 만들었다. 첫 시안에는 커다란 왕관 그림이 들어갔는데, 원래 쓰던 왕관 이모지보다 어색해 보였다. 그래서 “왕관은 그대로 두고 밋밋한 배경만 알록달록하게”로 요청을 바꿨고, 발바닥·하트·뼈다귀가 흩뿌려진 배경을 골랐다. 배경이 화려해진 만큼 글자가 묻히지 않도록 아래로 갈수록 배경을 옅게 처리했다.

    CSS를 조금 알게 됐다

    디자인을 고치다 보니 AI가 바꾸는 부분이 매번 CSS라는 걸 알게 됐다. (출처: MDN 웹 문서, CSS) 처음 앱 코드를 받았을 때 “화면의 옷”이라고 배웠던 부분이다. 자주 보이는 몇 가지는 뜻을 알게 됐다.

    CSS 속성 뜻 내가 쓴 예
    background 배경색 따뜻한 크림색
    color 글자색 진한 파란색 제목
    font-size 글자 크기 제목은 크게
    padding 안쪽 여백 버튼 안쪽을 넉넉하게
    border-radius 모서리 둥글기 버튼을 알약 모양으로

    이걸 알고 나니 간단한 건 직접 고칠 수 있었다. 버튼 색을 조금 밝게 하고 싶을 때 AI에게 묻지 않고 색 코드만 바꿔 봤다. 망가질까 봐 늘 커밋을 먼저 해 두었다.

    글꼴을 바꾸니 분위기가 달라졌다

    기본 글꼴은 너무 평범했다. AI에게 왕실 분위기에 어울리는 무료 한글 글꼴을 묻자, 누구나 쓸 수 있는 무료 공개 글꼴(OFL 라이선스)을 추천받았다.

    주의할 점도 있었다. 한글 글꼴은 파일이 커서 그대로 쓰면 앱이 느려진다. 그래서 앱에서 실제로 쓰는 글자만 골라 담은 작은 글꼴 파일을 만들어 앱 안에 함께 넣었다. 외부 사이트에서 글꼴을 불러오지 않으니 속도도 빨라졌다. 대신 문구에 새 글자가 생기면 글꼴 파일을 다시 만들어야 한다. 무료 글꼴이라도 사용 조건(라이선스)은 한 번 확인하는 게 좋다.

    휴대폰에서 확인한 것

    크롬 F12의 기기 툴바로 여러 화면 크기를 확인했다. 첫 화면에서 특히 본 것은 이것들이다.

    • 스크롤 없이 시작 버튼이 보이는가. 작은 화면에서는 버튼이 아래로 밀려 안 보였다. 그림 크기와 여백을 줄여 해결했다.
    • 버튼이 엄지로 누르기 편한가. 너무 작거나 화면 맨 위에 있으면 불편하다.
    • 글자가 어색하게 끊기지 않는가. 한 줄 소개는 “왕이라면,” 뒤에서 줄이 바뀌도록 맞췄다.
    • 가로로 돌렸을 때 크게 깨지지 않는가. 완벽하진 않아도 쓸 수는 있게 했다.

    첫 화면에 넣지 않기로 한 것

    넣고 싶은 것은 많았다. 참여자 수, 인기 작위 순위, 배경 음악. 하지만 첫 화면이 복잡해지면 사람들은 다시 “뭘 눌러야 하지?”로 돌아간다. 그래서 시작 버튼 하나에 시선이 모이도록 나머지는 뺐다. 참여자 수 같은 기능은 서버가 필요해서 지금 단계에서는 만들기도 어려웠다.

    바꾼 뒤의 반응

    새 첫 화면을 배포하고 다른 친구에게 링크를 보냈다. 이번에는 열자마자 버튼을 눌렀다. 나중에 물어보니 “내가 어떤 집사일지 궁금해서 바로 눌렀다”고 했다. 기능은 하나도 바뀌지 않았는데 첫인상이 달라졌다.

    한참 뒤에 다시 손본 것

    첫 화면은 한 번에 끝나지 않았다. 앱을 쓰다 보니 제목 위 왕관이 작고, 버튼 글자가 흐리고, 버튼 배경이 화면 배경과 비슷해서 버튼처럼 보이지 않는다는 게 눈에 들어왔다. 그래서 왕관과 제목을 키우고, 버튼 글자를 크고 진하게 바꾸고, 버튼 배경을 금색으로 채웠다. 금색이 너무 진해 보여서 한 톤 옅은 금색으로 다시 조정했다. 디자인은 한 번에 정답을 찾는 게 아니라 보고, 고치고, 다시 보는 일이었다.

    현재 왕립 개집사협회 앱 첫 화면
    한참 뒤에 다시 손본 지금의 첫 화면
    출처: 직접 캡처한 화면(2026년 10월 12일)

    비교 요청이 가장 효과적이었다

    첫 화면 작업에서 가장 효과가 있었던 건 비교 요청이었다. “디자인 시안을 세 가지로 만들어 줘. 각각 다른 파일 이름으로”라고 하면 분위기가 다른 세 가지 버전이 나온다. 세 파일을 나란히 열어 보고 마음에 드는 것을 고른 뒤, 나머지 두 개에서 좋았던 부분을 가져와 합쳤다. 말로 “예쁘게”를 설명하는 것보다 보고 고르는 것이 훨씬 쉬웠다. 남은 시안 파일은 지워서 폴더를 정리했다.

    첫 화면을 지나면 이 앱의 핵심인 질문이 나온다. 다음 글에서는 질문 7개를 어떻게 만들고, 답이 어떻게 결과로 이어지게 했는지 적었다.


    이전 글: 빨간 글씨 가득한 배포 오류, 겁먹지 않고 해결한 순서
    다음 글: 질문 7개로 집사 유형을 맞히는 테스트 앱 만드는 법

  • AI에게 “앱 만들어 줘” 했더니 생긴 일, 첫 결과물과 시행착오

    AI에게 “앱 만들어 줘” 했더니 생긴 일, 첫 결과물과 시행착오

    작성자: 컴맹 집사

    대표 이미지: AI에게 처음 만들어 달라고 해서 받은 첫 화면. 이름도 “개집사 작위청”이었다 (출처: 왕립 개집사협회 앱 2026년 9월 19일 첫 버전 화면, 직접 캡처)

    이 글에서 얻는 것

    • 이런 분께 AI에게 처음 “앱 만들어 줘”라고 요청해 보려는 분
    • 핵심 답 첫 결과물에는 잘 된 곳과 어긋난 곳이 섞여 있었고, 첫 수정 요청은 오히려 일을 망쳤다. 요청 문장에 무엇을 담느냐가 결과를 갈랐다
    • 바로 쓰는 팁 수정 요청에는 지금 상태, 원하는 상태, “다른 부분은 건드리지 말고 이 부분만” 범위 제한 세 가지를 꼭 넣자

    엔터를 누르고 기다린 시간은 1분도 안 됐다. 화면에는 영어와 기호가 뒤섞인 긴 글이 쏟아졌다. 그게 내가 처음 받아 본 앱의 코드였다.

    기대와 불안이 반반이었다. 이게 정말 앱이 되는 걸까? 이걸 어디에 넣어야 하지? 이 글에는 그날 한 일과 헤맨 순서를 그대로 적었다.

    받은 코드를 어떻게 여는지부터 몰랐다

    앞 글에서 정리한 요청서에 “파일 하나(index.html)로 만들어 줘”라고 적었기 때문에, AI는 index.html이라는 파일 하나에 들어갈 코드를 줬다. (출처: MDN 웹 문서, HTML 기초)

    문제는 그다음이었다. 이 코드를 어디에 붙여 넣어야 하는지 몰랐다. AI에게 그대로 물었다.

    이 코드를 받았는데, 컴퓨터에서 어떻게 열어 봐?

    알려 준 방법은 생각보다 간단했다.

    1. 바탕화면에 새 폴더를 만든다. (나는 kba-butler-app이라고 지었다)
    2. 메모장을 열고 받은 코드를 전부 붙여 넣는다.
    3. 다른 이름으로 저장 → 파일 이름을 index.html로, 파일 형식은 모든 파일로 바꿔 저장한다.
    4. 저장된 파일을 더블클릭하면 인터넷 브라우저로 열린다.

    여기서 첫 실수를 했다. 파일 형식을 바꾸지 않고 저장해서 이름이 index.html.txt가 됐다. 더블클릭하니 메모장으로만 열렸다. 윈도우 탐색기에서 보기 → 파일 확장명 표시를 켜고 나서야 뒤에 .txt가 붙어 있다는 걸 알았다.

    초보자 팁: 윈도우 탐색기에서 “파일 확장명” 보기를 꼭 켜 두자. 앱을 만드는 동안 파일 이름 끝의 .html, .js, .png를 볼 일이 계속 생긴다.

    나중에는 메모장 대신 코드 편집 프로그램(VS Code)을 쓰게 됐지만, 첫날은 메모장으로도 충분했다.

    처음 열어 본 화면

    브라우저에 “왕립 개집사협회”라는 제목과 시작 버튼이 떴다. 버튼을 누르자 폐하 정보를 넣는 칸이 나오고, 질문이 하나씩 넘어갔다. 일곱 번째 질문에 답하니 “왕실 돌봄근위관”이라는 작위가 나왔다.

    솔직히 조금 소름이 돋았다. 코드는 한 줄도 이해하지 못했는데, 내가 설명한 앱이 실제로 움직이고 있었다.

    잘 된 것과 어긋난 것

    감동은 잠깐이었다. 여러 번 해 보니 아쉬운 점이 보이기 시작했다.

    첫 버전에서 발급된 작위증 결과 화면
    첫 버전의 결과 화면. 작위증은 코드로 그린 단순한 모양이었다
    출처: 왕립 개집사협회 앱 2026년 9월 19일 첫 버전 화면, 직접 캡처

    잘 된 것
    – 화면 순서가 요청서와 똑같았다.
    – 진행도(3/7 같은 표시)가 들어가 있었다.
    – 휴대폰 크기로 창을 줄여도 대체로 괜찮게 보였다.

    어긋난 것
    – 어떻게 답해도 비슷한 작위만 나왔다. 최고 작위인 “왕실 총집사”는 한 번도 나오지 않았다.
    – 작위증 화면이 흰 바탕에 글자뿐이라 “증서” 느낌이 없었다.
    – 폐하 이름 칸을 비워 두고 넘어가도 진행이 됐고, 작위증에 이름 없이 ” 폐하의 집사”라고 떴다.

    첫 번째 문제는 결과를 계산하는 방식 때문이었다. 이건 나중에 “조건문으로 결과를 나누는 방법”에서 자세히 쓸 예정인데, 간단히 말하면 질문의 보기와 집사 유형을 잇는 기준이 한쪽으로 쏠려 있었고, 최고 작위는 아예 결과로 나오지 않게 짜여 있었다.

    수정 요청을 망친 첫 시도

    문제를 발견하자마자 한꺼번에 고쳐 달라고 했다.

    총집사도 나오게 하고, 작위증 예쁘게 만들고, 이름 안 쓰면 못 넘어가게 해 줘.

    AI는 세 가지를 모두 고친 새 코드를 줬다. 그런데 이번에는 질문 화면에서 버튼이 아예 눌리지 않았다. 세 군데를 동시에 바꾸다가 어딘가가 망가졌는데, 어디가 문제인지 나도 AI도 한 번에 찾지 못했다.

    결국 처음 코드로 돌아가서 하나씩 다시 요청했다.

    1. “폐하 이름을 입력하지 않으면 다음으로 못 넘어가게 해 줘.” → 확인 완료
    2. “일곱 문항에 어떻게 답하느냐에 따라 집사 유형 일곱 가지와 작위 다섯 단계가 모두 나올 수 있게 해 줘.” → 확인 완료
    3. “작위증을 오래된 종이 느낌의 테두리가 있는 증서처럼 꾸며 줘.” → 확인 완료

    하나 고칠 때마다 직접 열어서 확인했다. 시간은 더 걸리는 것 같았지만 실제로는 훨씬 빨랐다.

    이날 정한 “AI에게 수정 요청하는 법”

    이 경험 이후로 나는 수정 요청을 할 때 항상 세 가지를 넣는다.

    • 지금 상태: “질문 화면에서 보기 버튼을 눌러도 다음 질문으로 안 넘어가.”
    • 원하는 상태: “보기를 누르면 바로 다음 질문으로 넘어갔으면 좋겠어.”
    • 범위 제한: “다른 부분은 건드리지 말고 이 부분만 고쳐 줘.”

    특히 마지막 문장이 효과가 컸다. 이 말을 안 하면 AI가 친절하게(?) 다른 부분까지 바꿔 버리는 경우가 있었다.

    이날의 가장 큰 고민

    저녁쯤 되자 폴더 안에 index.html, index2.html, index-최종.html, index-진짜최종.html이 쌓였다. 어느 게 제대로 돌아가는 버전인지 헷갈리기 시작했다. 게다가 이 앱은 아직 내 컴퓨터에서만 열린다. 친구에게 보여 주려면 파일을 통째로 보내야 했다.

    • 버전을 어떻게 관리하지?
    • 다른 사람은 어떻게 이 앱을 열지?

    AI에게 이 두 가지를 물었더니, 똑같이 두 단어가 돌아왔다. GitHub와 Vercel. 다음 단계는 이 낯선 이름들을 이해하는 일이었다.

    첫날 알게 된 index.html 안의 세 가지

    코드를 한 줄도 이해하지 못했지만, AI에게 “이 코드가 어떤 부분으로 나뉘어 있는지 큰 덩어리만 설명해 줘”라고 물어봤다. 답은 세 덩어리였다.

    • HTML: 화면에 무엇이 있는지 적는 부분. 제목, 버튼, 입력칸 같은 뼈대.
    • CSS: 어떻게 보이는지 정하는 부분. 색, 글자 크기, 배치 같은 옷.
    • JavaScript: 어떻게 움직이는지 정하는 부분. 버튼을 누르면 다음 질문이 나오는 동작.

    이 구분 하나만 알아도 수정 요청이 달라졌다. 글자색을 바꾸고 싶으면 “CSS 부분에서”, 버튼이 안 눌리면 “JavaScript 부분에서”라고 짚어 줄 수 있었다. AI도 엉뚱한 곳을 건드리는 일이 줄었다.


    이전 글: 앱 아이디어, 한 줄이면 충분했다! 컴맹의 초간단 기획서 쓰는 법
    다음 글: 깃허브(GitHub)가 뭐길래? 코딩 몰라도 이해되는 앱 타임머신 이야기

  • 앱 아이디어, 한 줄이면 충분했다! 컴맹의 초간단 기획서 쓰는 법

    앱 아이디어, 한 줄이면 충분했다! 컴맹의 초간단 기획서 쓰는 법

    작성자: 컴맹 집사

    대표 이미지: 기획은 화면 목록과 순서를 종이에 적는 데서 시작했다 (사진: joshuaworoniecki / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 앱 아이디어는 있는데 AI에게 어떻게 설명할지 모르는 분
    • 핵심 답 한 줄 정의 → 사용자가 거치는 순서 → 화면 목록 → 꼭 필요한 기능 고르기, 네 단계를 거치면 AI가 만들 수 있는 기획이 된다
    • 바로 쓰는 팁 사용자가 앱을 열고 닫을 때까지의 순서를 적어 보면 빠진 단계가 보인다. 이 앱도 ‘폐하 정보 입력’이 빠진 걸 이때 찾았다

    “강아지는 왕, 반려인은 왕의 집사”라는 세계관은 재미있었다. 문제는 그걸 AI에게 어떻게 설명하느냐였다.

    처음에는 “강아지가 왕이고 내가 집사인 앱 만들어 줘”라는 한 문장만 던졌다. 결과는 기대와 달랐다. 질문은 세 개뿐이었고, 결과는 “당신은 훌륭한 집사입니다!” 한 줄이 전부였다. AI가 잘못한 게 아니었다. 내가 원하는 걸 나도 정확히 몰랐던 것이다.

    그래서 코드를 요청하기 전에 머릿속 생각을 종이에 옮기는 과정을 거쳤다. 거창한 기획서가 아니라 초보자도 할 수 있는 네 단계였다.

    1단계. 앱을 한 문장으로 정의하기

    가장 먼저 “이 앱은 무엇인가”를 한 문장으로 적었다. 누가, 무엇을 해서, 무엇을 얻는지가 들어가도록 했다.

    반려인이 우리 강아지 폐하의 정보를 넣고 집사로서 질문 7개에 답하면, 나만의 반려견 왕국과 집사 작위가 적힌 작위증을 받는 웹앱

    이 한 문장을 쓰고 나니 빠진 것들이 보였다. “폐하 정보는 무엇을 받지?”, “집사 유형은 몇 가지?”, “작위는 몇 단계?”, “작위증에는 뭐가 들어가지?” 같은 질문이 저절로 생겼다.

    2단계. 사용자가 거치는 순서 적기

    다음으로 사용자가 앱을 열고 닫을 때까지 어떤 순서로 움직이는지 적었다. 개발에서는 이걸 사용자 흐름(user flow)이라고 부른다고 한다.

    1. 앱을 연다 → 시작 화면이 보인다
    2. 폐하(강아지)의 이름과 성격, 좋아하는 활동과 싫어하는 활동, 왕국 분위기를 고른다
    3. 집사로서 질문 7개에 차례로 답한다
    4. 나의 집사 유형과 작위, 우리 왕국의 이름·표어를 확인한다
    5. 강아지 사진이 들어간 작위증을 받는다
    6. 작위증을 저장하거나 친구에게 공유한다

    순서를 적어 보니 “폐하 정보 입력”이 빠져 있었다. 폐하의 이름과 성격이 없으면 “○○ 폐하의 왕국”을 만들 수도, 작위증에 적을 수도 없다. 이런 구멍은 코드를 받은 뒤에 발견하면 고치기 번거롭다.

    3단계. 화면 목록 만들기

    흐름을 바탕으로 필요한 화면을 나눴다.

    첫 버전 앱의 질문 화면
    기획서의 “질문 7개” 화면이 실제로 만들어진 모습
    출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처
    화면 들어갈 내용
    시작 화면 앱 제목, 짧은 소개, 시작 버튼
    왕국 만들기 화면 폐하 이름, 집사 닉네임, 폐하의 성격, 좋아하는·싫어하는 활동, 왕국 분위기
    질문 화면 질문 문장, 보기 버튼, 진행도(3/7 같은 표시)
    결과 화면 집사 유형, 작위 이름과 뜻, 왕국 이름·표어
    작위증 화면 사진, 이름, 작위, 발급일이 들어간 증서, 저장·공유 버튼

    손으로 네모를 그려 가며 해도 충분하다. 나는 휴대폰 메모장에 적었다. 중요한 건 예쁘게 그리는 게 아니라 화면마다 무엇이 있어야 하는지 정하는 것이다.

    4단계. 꼭 필요한 기능만 고르기

    화면을 정하다 보니 욕심이 계속 생겼다. 작위별 배경 음악, 친구 왕국과 궁합 보기, 세계관을 보여 줄 웹툰, 쉬는 시간용 게임. 전부 적어 놓고 처음 버전에 꼭 필요한 것과 나중에 할 것으로 나눴다.

    처음 버전(반드시)
    – 폐하 정보 입력
    – 질문 7개와 집사 유형 판정
    – 집사 작위 5단계 (견국 수습집사, 왕실 생활협력관, 왕실 돌봄근위관, 발바닥 궁정대신, 왕실 총집사)
    – 작위증 화면

    나중에(있으면 좋음)
    – 사진 업로드
    – 이미지로 저장
    – 공유하기
    – 이전 결과 다시 보기
    – 웹툰, 미니게임

    개발자들은 이걸 MVP(최소 기능 제품)라고 부른다고 한다. (출처: Wikipedia, Minimum viable product) 핵심 기능만 먼저 돌아가게 만들고 하나씩 붙이는 방식이다. 초보자에게는 이 방식이 특히 중요했다. 한꺼번에 만들면 어디서 문제가 생겼는지 알 수 없기 때문이다.

    AI에게 건넨 첫 요청서

    네 단계를 정리한 뒤 AI에게 보낸 요청은 이런 형태였다.

    반려인을 위한 집사 작위증 웹앱을 만들고 싶어.
    [세계관]
    강아지는 왕(폐하), 반려인은 왕을 모시는 집사. 왕립 개집사협회가 집사에게 작위를 내린다.
    [앱 설명]
    폐하의 이름·성격·좋아하는 활동·싫어하는 활동·왕국 분위기를 입력하고, 집사가 질문 7개에 답하면
    집사 유형을 정하고 그에 맞는 작위와 왕국 이름·표어가 담긴 작위증을 보여 주는 웹앱.
    [화면 순서]
    시작 화면 → 왕국 만들기(폐하 정보) → 질문 7개 → 결과 → 작위증
    [작위]
    견국 수습집사, 왕실 생활협력관, 왕실 돌봄근위관, 발바닥 궁정대신, 왕실 총집사 (5단계)
    [조건]
    - 코딩을 모르는 초보자라서, 파일 하나(index.html)로 만들어 줘.
    - 휴대폰 화면에서도 보기 좋게.
    - 사진 업로드와 공유는 아직 넣지 마.

    처음의 한 문장 요청과 비교하면 결과가 완전히 달랐다. 이 요청으로 받은 첫 결과물과 시행착오는 다음 글에 자세히 적었다.

    기획 단계에서 AI를 활용한 방법

    네 단계를 정리하는 것 자체도 AI의 도움을 받았다. 코드를 요청하기 전에, 기획만 따로 대화했다.

    • “이 아이디어로 앱을 만들 때 사용자 흐름을 짜 줘. 빠진 화면이 있으면 알려 줘.”
    • “처음 버전에 꼭 필요한 기능과 나중에 해도 되는 기능을 나눠 줘.”
    • “반려인이 어떤 집사인지 알아볼 수 있는 질문을 10개 후보로 뽑아 줘. 산책, 목욕, 간식처럼 누구나 겪는 상황으로.”

    특히 마지막 질문이 유용했다. AI가 뽑아 준 후보 중에서 반려인이라면 웃으며 답할 만한 것만 골라 일곱 개로 줄였다. 이 기획은 제미나이와 챗GPT에 번갈아 보여 주며 빠진 점을 확인했고, 마지막으로 클로드에게 검토받았다. 후보를 받고 고르는 일은 내가 하는 것, 이 역할 분담이 기획 단계에서도 잘 맞았다.

    기획서를 파일로 남겨 두니 생긴 장점

    정리한 기획 내용은 기획.txt라는 파일로 저장해 앱 폴더에 같이 넣어 두었다. 생각보다 쓸모가 많았다.

    • AI와 새 대화를 시작할 때 이 파일 내용을 먼저 붙여 넣으면, 앱이 어떤 것인지 다시 설명할 필요가 없었다.
    • 기능을 추가할 때마다 “나중에 할 것” 목록에서 하나씩 지우며 진행 상황을 확인할 수 있었다.
    • 방향이 흔들릴 때 처음 정한 한 문장을 다시 읽으면 중심이 잡혔다.

    기획 단계에서 한 실수

    처음 뽑은 질문 중에는 “폐하의 혈통은?”처럼 보호자가 모르면 답할 수 없는 질문이 있었다. 친구에게 미리 물어보니 “우리 애는 믹스라 모르겠는데”라는 답이 돌아왔다. 누구나 바로 답할 수 있는 행동 중심 질문으로 바꿨다. 기획 단계에서 한두 사람에게 질문만 먼저 보여 주는 것도 좋은 점검 방법이다.

    이 과정에서 배운 점

    • AI는 내가 설명한 만큼만 만들어 준다. 흐릿하게 말하면 흐릿한 결과가 나온다.
    • 기획이라고 해서 어렵지 않다. 한 문장 → 순서 → 화면 → 기능 고르기 네 단계면 충분했다.
    • “나중에 할 것” 목록을 따로 만들어 두니 욕심을 참기 쉬웠다. 실제로 이 목록이 이후 기능 추가의 순서표가 됐다.

    아이디어가 있는데 어디서 시작할지 모르겠다면, 코드를 요청하기 전에 이 네 가지만 먼저 적어 보길 권한다. 10분이면 되는데, 그 10분이 몇 시간의 수정을 줄여 준다.


    이전 글: 앱이랑 웹앱, 뭐가 달라? 앱스토어 없이 앱 만든 컴맹의 깨달음
    다음 글: AI에게 “앱 만들어 줘” 했더니 생긴 일, 첫 결과물과 시행착오

  • 코딩 몰라도 AI로 앱 만들 수 있을까? 컴맹이 직접 해본 솔직 후기

    코딩 몰라도 AI로 앱 만들 수 있을까? 컴맹이 직접 해본 솔직 후기

    작성자: 컴맹 집사

    대표 이미지: 코딩을 몰라도 AI에게 말로 설명하며 앱을 만들 수 있을까 (사진: kaboompics / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 코딩을 몰라도 AI로 앱을 만들 수 있을지 망설이는 분
    • 핵심 답 가능하다. 다만 AI가 코드를 써 줘도 무엇을 만들지 정하고 결과를 직접 눌러 확인하는 일은 내 몫이었다
    • 바로 쓰는 팁 한 번에 하나만 부탁하자. 디자인·질문·버튼을 한꺼번에 시키면 어디서 문제가 생겼는지 알기 어렵다

    결론부터 말하면 만들 수 있다. 다만 AI가 다 해 주지는 않는다.

    앱을 만들기 전에 “코딩 몰라도 AI로 앱 만들기”를 한참 찾아봤다. 5분 만에 앱이 뚝딱 나온다는 영상도 있었고, 결국 코딩을 배워야 한다는 글도 있었다. 둘 다 반은 맞고 반은 틀렸다. 왕립 개집사협회 앱을 직접 만들면서 그 사이 어딘가에 진짜 답이 있다는 걸 알게 됐다.

    AI가 정말 잘해 준 것

    1. 화면과 기능의 첫 뼈대
    “질문 7개에 답하면 집사 작위가 나오는 앱을 만들어 줘”라고 하자, AI는 몇십 초 만에 실제로 동작하는 코드를 줬다. 버튼을 누르면 다음 질문으로 넘어가고, 마지막에 결과가 나왔다. 혼자였다면 몇 주가 걸렸을 첫 단계가 한 번에 끝났다.

    2. 용어 설명
    GitHub, 배포, LocalStorage처럼 처음 듣는 말이 계속 나왔다. (출처: MDN 웹 문서, Web Storage API) 검색하면 개발자용 설명만 나와서 더 헷갈렸는데, AI에게 “코딩을 전혀 모르는 사람에게 비유로 설명해 줘”라고 하면 이해할 수 있는 말로 바꿔 줬다.

    3. 오류 해결
    화면이 하얗게 나오거나 버튼이 안 눌릴 때, 오류 메시지를 그대로 복사해서 붙여 넣으면 원인과 고치는 방법을 알려 줬다. 이 과정이 앱 만들기의 절반쯤 됐다.

    그래도 내가 해야 했던 것

    1. 무엇을 만들지 정하는 일
    AI는 시키는 걸 잘한다. 하지만 무엇을 시킬지는 내가 정해야 한다. “재미있는 앱 만들어 줘”라고 하면 평범한 결과가 나왔다. “질문 7개로 집사 유형 7가지를 가르고, 유형에 맞춰 5단계 작위를 주고, 결과 화면에 강아지 사진이 들어간 작위증”처럼 구체적으로 말할수록 결과가 좋아졌다.

    2. 확인하고 판단하는 일
    AI가 “수정했습니다”라고 해도 실제로 고쳐지지 않은 경우가 꽤 있었다. 결국 내가 직접 열어 보고, 눌러 보고, 이상한 점을 다시 말해 줘야 했다. AI는 만들고, 나는 검사하는 역할 분담이 자연스럽게 생겼다.

    3. 최소한의 개념 이해
    코드를 한 줄씩 짤 필요는 없었다. 하지만 파일은 어디에 있고, 어떻게 인터넷에 올라가고, 고치면 어떻게 반영되는지 정도의 큰 흐름은 알아야 했다. 이걸 모르면 AI가 알려 준 방법도 어디에 적용해야 할지 몰라서 헤맨다.

    4. 인내심
    한 번에 되는 일은 거의 없었다. 하나를 고치면 다른 게 망가지기도 했다. 이때 “방금 고친 뒤로 이게 안 돼”라고 차분히 다시 말하는 것이 가장 중요한 능력이었다.

    코딩을 몰라도 가능한 앱, 어려운 앱

    직접 해 보니 초보자가 AI로 만들기 좋은 앱과 어려운 앱이 나뉘었다.

    비교적 쉬운 앱 초보자에게 어려운 앱
    질문에 답하면 결과가 나오는 테스트 앱 회원가입·로그인이 필요한 앱
    계산기, 체크리스트, 메모 앱 여러 사용자가 실시간으로 대화하는 앱
    내 기기 안에만 저장하는 기록 앱 결제 기능이 들어가는 앱
    이미지 만들기·저장 앱 개인정보를 서버에 모으는 앱

    왼쪽은 내 휴대폰(브라우저) 안에서만 동작하는 앱이고, 오른쪽은 서버와 데이터베이스, 보안이 필요한 앱이다. 처음에는 왼쪽에서 시작하는 걸 추천한다. 왕립 개집사협회 앱도 왼쪽에 속한다. 로그인 없이 결과를 저장하는 방법은 뒤에서 따로 다룰 예정이다.

    처음 시작하는 분께 드리는 현실적인 조언

    소파에서 강아지를 안고 휴대폰을 보는 집사 그림
    결국 앱을 쓰는 사람은 휴대폰을 든 반려인이다
    출처: 직접 제작한 앱 그림(이미지 생성 AI 활용)
    • 작게 시작하자. 기능 하나가 제대로 돌아가는 게 기능 열 개가 반쯤 돌아가는 것보다 낫다.
    • 한 번에 하나만 부탁하자. “디자인 바꾸고, 질문 추가하고, 공유 버튼 넣어 줘”라고 한꺼번에 시키면 어디서 문제가 생겼는지 알기 어렵다.
    • AI의 말을 그대로 믿지 말고 직접 확인하자. 눌러 보고, 새로고침해 보고, 휴대폰으로도 열어 보자.
    • 모르는 단어는 그때그때 물어보자. 쌓아 두면 나중에 한꺼번에 무너진다.

    실제로 걸린 시간과 비중

    강아지 앱의 첫 버전(질문, 결과, 작위증까지)을 인터넷에 올리기까지 약 일주일이 걸렸다. 하루 한 시간 정도씩이었다. 시간을 나눠 보면 이랬다.

    • AI에게 요청하고 코드를 받는 시간: 전체의 10~20% 정도로 짧았다.
    • 받은 코드를 열어 보고 확인하는 시간: 약 30%. 눌러 보고, 새로고침하고, 휴대폰으로도 열었다.
    • 문제를 설명하고 고치는 시간: 가장 길어서 40% 가까이 됐다.
    • 처음 보는 개념을 이해하는 시간: GitHub, 배포 같은 것들. 나머지 시간이다.

    “AI가 몇 초 만에 앱을 만들어 준다”는 말은 맞지만, 그건 전체 과정의 일부일 뿐이다. 나머지 대부분은 확인하고 고치는 시간이었다. 이걸 미리 알았다면 처음 며칠 동안 덜 조급했을 것 같다.

    AI에게 질문할 때 효과가 컸던 방식

    • “코딩을 전혀 모르는 사람에게 설명하듯 말해 줘”를 붙인다.
    • 오류가 나면 오류 메시지 전체와 바로 전에 한 일을 함께 보낸다.
    • 방법이 여러 개라면 “초보자에게 가장 쉬운 방법 하나만 알려 줘”라고 한다.
    • 이해가 안 되면 “방금 설명에서 ○○가 무슨 뜻이야?”라고 다시 묻는다.

    시작 전에 알았으면 좋았을 것

    • AI가 준 코드가 한 번에 완벽하기를 기대하지 않는다. 처음 결과는 초안이다.
    • 대화가 길어지면 AI가 앞 내용을 헷갈리기도 한다. 그럴 때는 새 대화를 열고 현재 코드와 기획 내용을 다시 붙여 넣는 편이 낫다.
    • 잘 돌아가는 상태가 되면 그때마다 따로 보관해 둔다. 이 문제는 뒤에서 GitHub로 해결하게 된다.

    그래서, 할 수 있을까?

    할 수 있다. 다만 “AI가 알아서 앱을 만들어 준다”가 아니라 “AI라는 성실한 조수와 함께 내가 앱을 만든다”에 가깝다. 나는 코드를 쓰는 사람이 아니라, 무엇을 만들지 정하고 결과를 확인하고 방향을 잡는 사람이 됐다. 그게 생각보다 재미있었다.

    다음으로 부딪힌 건 뜻밖에도 아주 기초적인 질문이었다. 내가 만들려는 건 “앱”일까, “웹앱”일까?


    이전 글: 코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연
    다음 글: 앱이랑 웹앱, 뭐가 달라? 앱스토어 없이 앱 만든 컴맹의 깨달음

  • 코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연

    코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연

    작성자: 컴맹 집사

    대표 이미지: 강아지와 함께하는 반려인을 위한 앱을 만들기로 했다 (사진: vlaaitje / Pixabay)

    이 글에서 얻는 것

    • 이런 분께 코딩을 배운 적 없지만 AI로 내 앱을 만들어 보고 싶은 분
    • 핵심 답 말로 설명하면 AI가 코드도 써 준다는 데서 시작했다. 강아지를 왕, 반려인을 집사로 그린 ‘왕립 개집사협회’ 세계관을 정하고, 질문 7개에 답하면 작위증을 주는 앱을 만들기로 했다
    • 바로 쓰는 팁 시작 전에 규칙 세 가지를 정해 두자. 완벽한 앱 대신 돌아가는 앱, 모르는 용어는 넘기지 않기, 막힌 곳과 해결법 기록하기

    나는 코딩을 배운 적이 없다. 엑셀 함수는 배웠지만 거의 쓰지 않았고, 컴퓨터로 하는 일은 대부분 문서 작업이었다. 그런 사람이 앱을 만들어 보겠다고 마음먹었다. 이 글에서는 왜 시작했는지, 어떤 앱을 만들기로 했는지를 적는다.

    앱은 개발자만 만드는 줄 알았다

    예전에 앱을 만든다고 하면 떠오르는 장면은 이랬다.

    • 검은 화면에 알 수 없는 영어가 가득한 모니터
    • 몇 달은 배워야 하는 프로그래밍 언어
    • 서버, 데이터베이스 같은 무서운 단어들
    • 개발자 여러 명이 모여서 하는 일

    그래서 “앱 하나 만들어 볼까?”라는 생각은 늘 “나랑은 상관없는 일”로 끝났다.

    생각이 바뀐 건 AI를 조금씩 쓰기 시작하면서였다. 문서 요약이나 표 정리를 맡겨 보니, 말로 설명하면 AI가 결과물을 만들어 주었다. 그러다 AI가 코드도 써 준다는 이야기를 듣고 궁금해졌다. 말로 설명하면 앱도 만들어 줄까?

    반려인을 위한 앱을 만들고 싶었다

    나는 어릴 때부터 지금까지 강아지를 좋아해 왔다. 그래서 앱을 만든다면 반려동물과 함께 사는 사람들을 위한 것이어야 한다고 생각했다.

    요즘은 반려동물과 함께 사는 집이 많아졌다. 반려인들은 스스로를 “집사”라고 부른다. 밥을 챙기고, 산책을 모시고, 기분을 살피는 모습이 왕을 모시는 집사 같다는 농담은 이제 누구나 아는 말이 됐다.

    여기서 아이디어가 나왔다.

    강아지를 왕으로, 반려인을 왕의 집사로 그린 세계관을 만들고, 그 세계관 안에서 반려인들이 함께 즐길 수 있는 앱

    그렇게 정한 이름이 왕립 개집사협회(RKBA, Royal Kennel Butler Association)다. 앱에 들어오면 반려인은 협회의 집사가 된다. 우리 강아지 폐하의 이름과 성격을 알려 주고 집사로서 질문 7개에 답하면, 나만의 반려견 왕국이 만들어지고 집사 유형과 작위가 담긴 집사 작위증을 받는다. 쓸모를 따지는 앱은 아니다. 대신 반려인이라면 한 번쯤 해 보고 친구에게 보여 주고 싶어질 앱을 목표로 했다.

    세계관은 작위증 하나로 끝나지 않았다

    처음부터 작위증 하나로 끝낼 생각은 없었다. 반려인들이 이 세계관을 더 오래 즐기려면 몇 가지가 더 필요했다.

    왕립 개집사협회 웹툰 주인공 두부 폐하와 수습집사 지우
    앱 세계관의 주인공, 두부 폐하와 수습집사 지우
    출처: 직접 제작한 앱 그림(이미지 생성 AI 활용)
    • 웹툰: 강아지 폐하와 초보 집사가 함께 사는 이야기를 그려서, 세계관을 설명서 대신 이야기로 보여 주고 싶었다.
    • 게임: 쉬는 시간에 즐길 수 있는 간단한 게임을 넣었다. 흔한 게임을 그대로 가져오지 않고, 왕의 간식을 받거나 왕관 강아지를 만드는 식으로 앱 콘셉트에 맞게 바꿨다.
    • 계속 늘려 가기: 세계관에 맞는 기능과 콘텐츠를 하나씩 더 만들 계획이다.

    왜 하필 지금, 왜 AI였나

    내가 앱을 만들 수 있겠다고 생각한 이유는 세 가지였다.

    첫째, AI가 코드를 대신 써 준다.
    문법을 외우지 않아도 “이런 화면을 만들어 줘”라고 한국어로 설명하면 코드가 나온다. 그 코드가 한 번에 완벽하지 않다는 건 나중에 알게 됐지만, 출발선이 확 낮아진 건 분명했다.

    둘째, 모르는 걸 바로 물어볼 수 있다.
    책이나 강의는 내가 막힌 부분과 정확히 같은 내용을 다뤄 주지 않는다. AI에게는 “이 화면에서 이 버튼이 안 눌리는데 왜 그래?”처럼 내 상황 그대로 물을 수 있다.

    셋째, 돈이 거의 들지 않는다.
    나중에 자세히 쓰겠지만, 간단한 웹앱은 무료 서비스만으로도 인터넷에 올릴 수 있다. (출처: Vercel 요금제 안내) 실패해도 잃을 게 시간뿐이라는 점이 부담을 덜어 줬다.

    AI 여러 개에게 교차 검토를 받았다

    아이디어를 앱으로 옮길 때 나만의 방식이 하나 생겼다. AI 한 곳의 답만 믿지 않는 것이다.

    1. 내가 아이디어와 기획을 구상한다.
    2. 기획을 제미나이와 챗GPT에 각각 보여 주고, 빠진 점이나 이상한 점이 없는지 교차로 확인한다.
    3. 두 곳의 의견을 반영해 다듬은 내용을 클로드에게 다시 검토받은 뒤 작업을 진행한다.

    AI마다 잘 보는 부분이 달라서, 한 곳에서 놓친 문제를 다른 곳에서 짚어 주는 일이 많았다. 시간은 조금 더 걸려도 방향이 틀어지는 일은 확실히 줄었다. 이 방식은 뒤의 글에서도 여러 번 나온다.

    시작하기 전에 정한 규칙 세 가지

    막상 시작하려니 겁이 났다. 그래서 스스로 몇 가지 규칙을 정했다.

    1. 완벽한 앱이 아니라 “돌아가는 앱”을 목표로 한다. 예쁜 디자인이나 많은 기능은 나중 일이다.
    2. 모르는 용어는 넘기지 않는다. GitHub, 배포 같은 말이 나오면 AI에게 “초등학생에게 설명하듯” 다시 물어본다.
    3. 과정을 기록한다. 막혔던 부분, 해결한 방법, 헛수고한 부분까지 적어 둔다. 지금 이 블로그가 그 기록이다.

    세 번째 규칙이 제일 쓸모 있었다. 같은 실수를 여러 번 했는데, 기록해 둔 덕분에 두 번째부터는 훨씬 빨리 풀렸다.

    이 블로그에서 다룰 것

    이 블로그는 왕립 개집사협회 앱을 처음부터 만들어 가는 과정을 순서대로 담는다.

    • 시작 단계: 앱과 웹앱의 차이, 아이디어를 기획으로 바꾸는 법, AI에게 처음 앱을 시켜 본 경험
    • 개발 환경: GitHub, 커밋과 푸시, Vercel, 첫 배포
    • 기능 만들기: 첫 화면, 질문 7개, 결과 나누기, 작위증 발급, 사진 업로드, 저장과 공유
    • 재미 더하기: 웹툰, 미니게임 같은 콘텐츠
    • 스마트폰 앱으로: PWA, 모바일 화면 수정, 아이폰·안드로이드 테스트
    • 출시 준비: Google Play 등록 준비

    개발자가 쓰는 강좌가 아니라, 코딩을 모르는 사람이 한 단계씩 부딪히며 알게 된 것들을 적는다. 전문가가 보면 돌아가는 길처럼 보일 수도 있다. 대신 초보자가 실제로 어디서 막히는지는 누구보다 잘 보여 줄 수 있다고 생각한다.

    시작하면서 준비한 것들

    무엇이 필요한지도 몰랐다. AI에게 “코딩 초보가 웹앱을 만들려면 뭘 준비해야 해?”라고 물었고, 받은 목록에서 정말 필요한 것만 추렸다.

    • 컴퓨터 한 대: 특별한 사양은 필요 없었다. 평소 문서 작업하던 컴퓨터로 충분했다.
    • AI 서비스 계정: 코드를 만들고 질문에 답해 줄 조수다. 여러 AI를 역할에 맞게 나눠 썼다.
    • 크롬 같은 인터넷 브라우저: 만든 앱을 열어 보는 곳이다.
    • 메모장: 처음에는 AI가 준 코드를 붙여 넣는 용도였다. 나중에는 코드 편집 프로그램으로 바꿨다.
    • 스마트폰: 결국 앱은 휴대폰에서 쓰게 된다. 확인용으로 늘 옆에 두었다.

    돈이 드는 건 거의 없었다. 이 점이 시작하는 데 가장 큰 힘이 됐다.

    비슷한 고민을 하는 분께

    “나도 해 볼 수 있을까?”라는 생각이 든다면, 거창한 앱보다 내가 좋아하고 잘 아는 분야의 앱 하나를 먼저 떠올려 보길 권한다. 나에게는 그게 강아지와 반려인이었다. 좋아하는 분야일수록 아이디어가 끊이지 않고, 막혀도 끝까지 가 보고 싶어진다. 배우겠다는 마음보다 만들고 싶다는 마음이 훨씬 오래간다.


    다음 글: 정말 코딩을 몰라도 AI로 앱을 만들 수 있을까? 직접 해 보기 전에 가장 궁금했던 질문부터 정리했다.
    → 코딩 몰라도 AI로 앱 만들 수 있을까? 컴맹이 직접 해본 솔직 후기