[태그:] Vercel

작성자: 컴맹 집사

대표 이미지: 배포 첫날 직접 열어 본 앱 화면 (출처: 직접 캡처한 화면(2026년 9월 19일))

https://kba-butler-app.vercel.app

Vercel 축하 화면 아래에 이 주소가 떠 있었다. 별것 아닌 영어와 숫자 조합인데 한참을 쳐다봤다. 이 주소를 누르면 전 세계 어디에서든 왕립 개집사협회 앱이 열린다는 뜻이었다.

코딩을 한 줄도 모르던 사람이 AI와 함께 앱을 만들기 시작한 지 일주일쯤 지났을 때였다.

제일 먼저 한 일: 휴대폰으로 열어 보기

컴퓨터 화면으로 주소를 열어 보는 건 이미 해 봤다. 진짜 확인은 휴대폰이었다. 친구들도 컴퓨터가 아니라 휴대폰으로 열 테니까.

주소를 카카오톡 “나에게 보내기”로 보내고 휴대폰에서 눌렀다. 몇 초 뒤 시작 화면이 떴다. 폐하 정보를 입력하고, 질문 일곱 개를 넘기자 결과로 “발바닥 궁정대신”이 나왔다.

내 컴퓨터가 아니라 인터넷 어딘가에서 내 앱이 돌아가고 있었다. AI가 처음 코드를 만들어 줬을 때는 “신기하다”였고, 이번에는 “진짜 만들었다”였다.

친구들에게 링크를 보냈다

강아지를 키우는 친구 몇 명에게 링크를 보냈다. “강아지가 왕이고 우리가 집사인 앱 만들어 봤어. 집사 작위증 한번 받아 봐.”

반응은 생각보다 좋았다. 결과 화면을 캡처해서 보내 주는 친구도 있었다. “나 간식 협상형 집사래ㅋㅋ 너무 정확한데?” 같은 답장이 오자 괜히 뿌듯했다.

칭찬만 온 건 아니었다. 오히려 이날 받은 불편 신고가 더 값졌다.

배포하고 나서야 알게 된 문제들

1. 휴대폰에서 글자가 너무 작다

내 휴대폰에서는 괜찮았는데, 화면이 작은 휴대폰을 쓰는 친구는 질문 글자가 너무 작아서 확대해야 읽을 수 있다고 했다. 컴퓨터 창을 줄여서 확인했던 것과 실제 휴대폰은 달랐다.

2. 뒤로 가기를 누르면 처음으로 돌아간다

질문 5번쯤에서 답을 잘못 눌러 휴대폰의 뒤로 가기를 눌렀더니 앱이 처음부터 다시 시작됐다고 했다. 이 앱은 한 페이지 안에서 화면만 바꾸는 방식이라, 브라우저의 뒤로 가기가 “이전 질문”이 아니라 “이전 사이트”로 가 버린 것이다.

3. 사진이 안 나오는 친구가 있다

작위증 화면에 넣어 둔 기본 강아지 그림이 친구 휴대폰에서는 깨진 아이콘으로 나왔다. 내 컴퓨터에서는 멀쩡했는데 말이다.

AI에게 물어보니 원인은 뜻밖이었다. 코드에는 그림 파일 이름을 dog.png로 적어 두었는데, 실제 파일 이름은 Dog.png였다. 윈도우는 대문자와 소문자를 구분하지 않아서 내 컴퓨터에서는 문제가 없었다. 하지만 인터넷 서버는 대소문자를 구분하기 때문에 파일을 찾지 못한 것이다.

파일 이름을 전부 소문자로 바꾸고 다시 푸시하자 해결됐다. 이 일 이후로 나는 파일 이름을 영어 소문자와 하이픈(-)만 써서 짓는다.

고쳤는데 친구 화면은 그대로였다

글자 크기를 키우고 푸시한 뒤 친구에게 “다시 해 봐”라고 했다. 친구는 “똑같은데?”라고 답했다.

Vercel의 Deployments 화면에는 새 배포가 분명히 완료되어 있었다. AI는 캐시(cache) 때문일 수 있다고 했다. (출처: MDN 웹 문서, HTTP 캐시) 브라우저가 속도를 위해 예전에 받은 파일을 저장해 두고, 그걸 다시 보여 주는 것이다.

• 휴대폰에서는 페이지를 새로고침하거나, 잠시 뒤 다시 열어 보면 대부분 해결된다.
• 컴퓨터에서는 Ctrl + F5(강력 새로고침)를 누르면 새 파일을 받아 온다.

친구가 새로고침을 하자 바뀐 화면이 나왔다. 그 뒤로 앱을 고칠 때마다 “새로고침해 봐”라는 말을 붙이게 됐다.

배포 첫날의 체크리스트

이날 겪은 일을 바탕으로, 푸시하기 전과 후에 확인할 목록을 만들었다. 지금도 쓰고 있다.

푸시하기 전
– [ ] 내 컴퓨터에서 처음부터 끝까지 한 번 해 봤는가
– [ ] 브라우저 창을 휴대폰 크기로 줄여서 확인했는가
– [ ] 새로 추가한 파일 이름이 영어 소문자인가
– [ ] 커밋 메시지에 무엇을 바꿨는지 적었는가

푸시한 뒤
– [ ] Vercel Deployments에서 배포가 완료(Ready)됐는가
– [ ] 실제 휴대폰으로 열어 봤는가 (새로고침 후)
– [ ] 이번에 고친 부분이 반영됐는가
– [ ] 고치지 않은 다른 부분이 망가지지 않았는가

이날 배운 것

배포는 끝이 아니라 시작이었다. 내 컴퓨터 안에서는 나만 쓰니까 보이지 않던 문제가, 다른 사람 손에 들어가자 하나씩 드러났다. 화면 크기, 뒤로 가기, 파일 이름, 캐시. 배포하지 않았다면 몰랐을 것들이다.

배포 전의 긴장감도 사라졌다. 문제가 생겨도 고쳐서 다시 푸시하면 된다는 걸 알았기 때문이다. 앱을 완벽하게 만든 다음 배포하려 했다면 아직도 내 컴퓨터 안에만 있었을 것이다.

이제 남은 과제는 친구들이 알려 준 문제를 고치는 일이었다.

배포 후 반응으로 정한 다음 계획

1. 휴대폰 글자 크기와 여백 다듬기
2. 질문 화면에 “이전 질문” 버튼 넣기
3. 파일 이름 규칙 정리하기
4. 강아지 사진을 직접 넣을 수 있게 하기
5. 결과를 이미지로 저장하고 공유하기

앞의 세 가지는 바로 고칠 수 있는 것이고, 뒤의 두 가지는 기능 추가다. 처음 기획 때 만든 “나중에 할 것” 목록과 거의 겹쳤다. 사용자가 원하는 것과 내가 처음에 떠올린 것이 크게 다르지 않았다는 뜻이라 조금 안심이 됐다.

배포 첫날 받은 질문들

친구들이 물어본 것 중 기억에 남는 것도 적어 둔다. “이거 앱스토어에 있어?”, “우리 엄마 강아지도 해 보라고 보내도 돼?”, “사진은 어디에 저장돼?” 마지막 질문은 나중에 사진 업로드 기능을 만들 때 중요한 기준이 됐다. 사진이 서버로 올라가지 않고 휴대폰 안에서만 처리되도록 만든 이유가 여기에 있다.

처음 배포를 앞둔 분께

• 첫 배포는 완성본이 아니어도 된다. 돌아가기만 하면 올려 보자.
• 반드시 실제 휴대폰으로 열어 보자. 컴퓨터 화면과 다르다.
• 파일 이름은 영어 소문자로. 윈도우에서 괜찮아도 서버에서는 문제가 된다.
• 고쳤는데 그대로라면 새로고침부터 해 보자.
• 믿을 만한 친구 몇 명에게 먼저 보내 보자. 가장 좋은 테스터다.

---

이전 글: 깃허브와 Vercel 연결하기, 컴맹이 막혔던 곳 그대로 공개
다음 글: 배포한 앱, 어떻게 고치지? 컴맹이 정착한 5단계 수정 루틴

처음부터 따라가기: 코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연