배포한 앱, 어떻게 고치지? 컴맹이 정착한 5단계 수정 루틴

작성자: 컴맹 집사

대표 이미지: 배포한 앱을 처음 고친 사례. 3시간 만에 이름이 “왕립 개집사협회”로 바뀌었다 (출처: 앱의 시기별 화면을 직접 캡처해 비교 이미지로 제작)

배포 전에는 앱을 고쳐도 나만 보면 그만이었다. 배포한 뒤로는 사정이 달라졌다. 내가 푸시하는 순간, 링크를 받은 친구들이 보는 앱도 함께 바뀐다.

첫 배포 날 친구들이 알려 준 문제는 세 가지였다. 휴대폰에서 글자가 작다, 뒤로 가기를 누르면 처음으로 돌아간다, 그림이 깨진다. 그림 문제는 그날 바로 고쳤고, 나머지 두 가지를 고치면서 배포한 앱을 수정하는 나만의 순서가 생겼다.

수정 전에 알아 둔 원칙 하나

AI에게 먼저 물었다. “이미 배포한 앱을 고칠 때 주의할 점이 뭐야?” 여러 답 중 가장 중요한 건 이것이었다.

인터넷에 있는 앱을 직접 고치는 게 아닙니다. 내 컴퓨터의 파일을 고친 뒤, 그걸 다시 올리는 것입니다.

당연한 말 같지만 처음엔 헷갈렸다. Vercel 화면 어딘가에서 글자를 고칠 수 있을 거라고 생각했기 때문이다. Vercel은 파일을 보여 주는 곳이지 고치는 곳이 아니다. (출처: Vercel 문서, 배포 개요) 고치는 곳은 언제나 내 컴퓨터의 index.html이다.

정착한 5단계

1단계. 한 가지만 정한다

“오늘은 글자 크기만 고친다.” 수정할 것을 하나만 정한다. 여러 가지를 한꺼번에 고치다 앱이 망가졌던 경험 때문이다.

2단계. AI에게 범위를 정해 요청한다

글자 크기 문제는 이렇게 요청했다.

휴대폰에서 질문 글자가 너무 작다는 의견이 있었어.
질문 문장과 보기 버튼 글자를 휴대폰에서 읽기 편하게 키워 줘.
CSS 부분만 고치고, 다른 기능은 건드리지 마. (MDN 웹 문서, CSS: https://developer.mozilla.org/en-US/docs/Web/CSS)
바뀐 부분만 보여 줘.

마지막 줄 “바뀐 부분만 보여 줘”는 나중에 추가한 요령이다. 파일 전체를 다시 받으면 어디가 바뀌었는지 알기 어렵지만, 바뀐 부분만 받으면 그 줄을 찾아서 교체하면 된다. 다만 초보자에게는 찾아서 교체하는 것도 실수가 잦아서, 자신이 없을 때는 “전체 코드를 다시 줘”라고 했다.

3단계. 내 컴퓨터에서 먼저 확인한다

파일을 저장하고 브라우저에서 연다. 크롬에서 F12를 누르고 휴대폰 모양 아이콘(기기 툴바)을 누르면 휴대폰 화면 크기로 볼 수 있다. 작은 화면 기종도 골라서 확인했다.

이 기능을 알고 나서 “컴퓨터에서는 괜찮았는데 휴대폰에서는 이상해” 하는 일이 크게 줄었다.

4단계. 커밋하고 푸시한다

GitHub Desktop에서 커밋 메시지를 적는다. 예: 질문과 보기 글자 크기 키움. 커밋한 뒤 푸시한다.

5단계. 배포 완료를 확인하고 실제 휴대폰으로 연다

Vercel의 Deployments 탭에서 새 배포 옆에 Ready가 뜨는지 본다. 보통 1분 안쪽이었다. 그다음 실제 휴대폰에서 링크를 열고 새로고침한다.

이 다섯 단계에 익숙해지면 10분도 걸리지 않는다.

두 번째 수정: 뒤로 가기 문제

뒤로 가기 문제는 글자 크기보다 까다로웠다. AI는 두 가지 방법을 알려 줬다.

• 방법 A: 질문마다 인터넷 주소 끝을 바꿔서, 브라우저의 뒤로 가기가 이전 질문으로 가도록 만든다.
• 방법 B: 화면 안에 “이전 질문” 버튼을 따로 만든다.

방법 A가 더 완벽하다고 했지만 설명을 들어도 잘 이해되지 않았다. 그래서 초보자에게 쉬운 방법 B를 먼저 적용했다. 질문 2번부터 왼쪽 위에 “← 이전” 버튼이 보이고, 누르면 앞 질문으로 돌아가면서 앞에서 고른 답도 취소되게 했다.

완벽한 해결은 아니었다. 휴대폰의 뒤로 가기 버튼을 누르는 사람은 여전히 처음으로 돌아간다. 그래서 시작 화면에 “진행 중에는 화면 안의 이전 버튼을 눌러 주세요”라는 짧은 안내도 넣었다. 방법 A는 나중에 웹툰 회차를 만들면서 결국 배우게 되는데, 그 이야기는 뒤에서 하겠다.

잘못 고쳤을 때: Vercel에서 되돌리기

어느 날은 결과 설명 문구를 고치고 푸시했는데, 결과 화면이 통째로 하얗게 나왔다. 따옴표 하나가 빠져서 JavaScript 전체가 멈춘 것이었다. 친구들이 보고 있을지도 모르는 상황이라 마음이 급했다.

이럴 때 쓸 수 있는 방법은 두 가지였다.

1. Vercel에서 이전 배포로 되돌리기
Deployments 목록에서 잘 되던 이전 배포를 찾아 오른쪽 점 세 개(⋯) 메뉴를 누르면 이전 배포로 되돌리는 메뉴(Instant Rollback 등)가 있다. 누르면 몇 초 만에 사이트가 그 버전으로 돌아간다. 급한 불을 끄는 데 좋았다.

2. GitHub에서 커밋 되돌리고 다시 푸시하기
GitHub Desktop의 History에서 문제 커밋을 Revert 하고 푸시한다. 내 파일과 인터넷의 앱이 같은 상태로 맞춰진다는 장점이 있다.

나는 1번으로 급한 불을 끄고, 차분히 원인을 고친 뒤 새로 푸시했다. 주의할 점은 Vercel에서 되돌려도 내 컴퓨터 파일에는 여전히 문제가 있다는 것이다. 되돌린 것으로 끝내지 말고, 반드시 파일을 고쳐서 다시 푸시해야 한다.

수정할 때 헷갈렸던 것

Q. 고쳤는데 휴대폰에서 그대로다.
대부분 캐시 문제였다. 새로고침하거나 잠시 뒤 다시 열면 된다. 그래도 그대로라면 Vercel 배포가 끝났는지, 푸시를 했는지 확인하자.

Q. 푸시했는데 Vercel에 새 배포가 안 생긴다.
GitHub 웹사이트에 커밋이 올라갔는지 먼저 본다. 올라갔는데도 배포가 안 생기면 Vercel의 Settings → Git에서 연결된 저장소가 맞는지 확인한다.

Q. 고칠 게 많은데 하나씩 하려니 느리다.
커밋은 하나씩 따로 하고, 푸시는 여러 개를 모아 한 번에 해도 된다. 대신 푸시 전에 전부 확인해야 한다.

이렇게 조심해도 피할 수 없는 게 있었다. 배포 자체가 실패하는 오류다. 빨간 글씨로 가득한 화면을 처음 봤을 때의 이야기를 다음 글에 적었다.

이전 글: 내 앱에 진짜 인터넷 주소가 생긴 날, 첫 배포 성공기
다음 글: 빨간 글씨 가득한 배포 오류, 겁먹지 않고 해결한 순서