5일 만에 코덱스로 앱 만들고, 앱인토스 챌린지 제출 성공!

휴가능(huganeung)은 앱인토스 챌린지 7월 주제로 출품하기 위해 만든 여름 휴가 준비용 미니앱이다. 처음 챌린지 공고를 보고 ‘여름’이란 테마로 만들 수 있는 앱 기획이 뭘까 고민하다, 내가 실상에서 겪는 문제로 접근하는 것이 좋겠다고 생각했다. “휴일에 약속 잡을 때, 휴가 갈 때, 예산 짤 때, 준비물 챙길 때 귀찮은 것들을 한 번에 정리할 수 있으면 좋겠다”는 생각으로 첫 타겟을 본인으로 설정해서 시작했다.

그런데 막상 만들기 시작하니 호기롭게 기획했던 것과 다르게 점점 단순한 휴가 추천 앱이 아니게 되었다. 약속 중간지점, 날씨, 휴가 장소 추천, 예산 계산, 체크리스트, 캘린더 저장, 앱인토스 등록, 모바일 테스트, .ait 번들 생성, 검토 요청까지 욕심 그득그득하게 전부 챙겨야 했다..

지금부터 휴가능 앱을 기획하고, 코덱스와 함께 개발, 실제 토스앱에서 테스트, 챌린지 제출 직전까지 다듬었던 김독래의 개발 과정을 정리해 보겠다.

1. 시작은 토스 미니앱 챌린지로부터!

휴가능 프로젝트는 토스 미니앱 챌린지를 발견하면서 시작됐다. 챌린지 주제는 여름이었고, 제출 마감일까지 시간이 많지 않았다. 딱 5일… 그래도 그냥 지나치기엔 너무 아쉬웠다.

처음 생각한 방향은 단순했다. 여름에 사람들이 자주 겪는 순간을 해소할 수 있게 내 경험에 빗대어 미니앱으로 만들어보자는 것이었다.

• 휴일에 약속 잡을 때 어디서 만나야 할지 고민하는 상황
• 약속 상대방과 합리적인 거리와 장소에서 만나고 싶은 상황
• 여름 휴가를 가고 싶은데 어디로 갈지 못 정하는 상황
• 휴가 예산이 어느 정도 필요할지 감이 안 오는 상황
• 여럿이 여행하는 경우 비용을 어떻게 나눠야 할 지 헷갈리는 상황
• 짐을 챙기다가 꼭 하나씩 빠뜨리는 상황
• 내가 계획한 휴가와 약속을 나중에 다시 보고 싶은 상황

이러한 공통점을 고려해 앱 이름은 ‘휴가능‘으로 정했다. 한자 休와 “가능할까?”+ “가능하지!”의 중의적인 뜻을 넣어, 휴일과 휴가를 조금 더 쉽게 계획해보자는 의미를 담았다.

2. 휴가 앱 하나가 아닌 기능 묶음?

처음부터 하나의 기능만 넣고 싶지는 않았다. 토스 미니앱은 사용자가 짧게 들어와서 바로 쓰고 나가는 구조가 잘 맞는다고 느꼈다. 그래서 휴가능도 거창한 하나의 플랫폼보다는, 휴가와 약속 준비에 필요한 작은 도구들을 묶은 형태로 기획했다.

초기 핵심 메뉴는 다음과 같았다.

메뉴	역할
휴일, 약속 잡을까?	두 사람의 출발지를 기준으로 중간지점과 약속 가능성을 참고용으로 추천
휴가, 어디로 갈까?	휴가 타입, 동행자, 예산, 조건에 맞춰 국내외 여행지 후보 추천
휴가, 예산 짜볼까?	숙박비, 교통비, 식비, 액티비티, 예비비 등 휴가 지출을 나눠 계산
휴, 이거 챙겼나?	날짜, 장소, 시즌, 동행자 조건에 맞춰 준비물 체크리스트 추천
휴가 캘린더 보기	저장한 약속, 휴가, 예산, 체크리스트 기록을 날짜별로 확인

홈 화면의 카피는 처음에 여러 번 바꿨다. 최종적으로는 “완벽한 휴가를 위해 날씨, 장소, 예산, 준비물까지 한 번에 챙겨보세요!” 방향으로 정리했다.

만들다보니, 휴가능은 여행지 추천 앱이 아니라 휴가/휴일 전반의 계획를 도와주는 앱이라는 점을 직관적으로 유저가 이해할 수 있었으면 했다.

3. 미니앱 테마와 홈 화면을 먼저 잡고 시작!

휴가능은 여름 챌린지 주제에 걸맞게 딱딱한 계산기 느낌보다는, 귀여운 감성 한스푼을 넣은 여름 분위기를 주고 싶었다. 그래서 레몬 캐릭터와 레몬나무 이미지를 중심으로 홈 화면을 구성했다. 나무 그늘 아래서 상콤한 레몬 캐럭타가 휴식하는 느낌이 딱이라고 생각했다.

또한, 홈 메뉴마다 레몬 캐릭터 이미지를 기능에 맞춰 다르게 넣었다.

• 지도 위에 서 있는 레몬 : 약속 중간지점 찾기
• 선글라스를 끼고 여행 가는 레몬 : 휴가 장소 추천
• 계산기를 두드리는 레몬 : 휴가 예산
• 캐리어와 함께 있는 레몬 : 준비물 체크리스트
• 레몬나무 아이콘 : 휴가 캘린더

처음에는 상단 히어로 이미지에 움직이는 효과도 넣어보고 싶었다. 나뭇잎이나 레몬이 반짝이는 느낌을 CSS로 시도했지만, 실제 화면에서는 효과가 거의 느껴지지 않았다. 결국 과한 모션보다는 버튼 호버나 터치 피드백처럼 사용자가 직접 느끼는 인터랙션에 집중하기로 했다.

4. 첫 번째 기능은 ‘약속 중간지점 찾기’

휴가능에서 가장 먼저 잡은 기능은 약속 중간지점 추천이었다. 휴일에 친구나 연인과 약속을 잡을 때, 서로 어디서 출발하는지에 따라 대체로 서로에게 합리적인 장소를 정하는 경우가 많기 때문이다.

그리고 황금같은 휴일 or 주말에 웬만하면 성공적인 코스이고 싶은 심리도 반영하고 싶었다! 처음부터 잘 짜면 엉망이 될 문제 요소를 줄일 수 있으니까..?

초기 흐름은 다음과 같았다.

• 내 출발지 선택
• 상대 출발지 선택
• 중간지점 후보 확인
• 해당 지역 날씨 확인
• 약속 분위기와 조건 선택
• 약속 가능성 결과 확인

처음에는 지하철역 데이터가 너무 적었다. 특히 서울 지하철 호선별 역 개수가 부족해 보였고, 사용자가 검색해서 선택할 수 있어도 기본 후보가 빈약하면 앱이 허술해 보였다.

(바로 API 연결을 안 한 이유는 첫 앱 제작이라 망가질 리스크를 최소화하고 싶었다.. 추후 업뎃 시 연결 예정)

그래서 서울 주요 지하철역 데이터를 크게 늘렸고, 각 호선을 눌렀을 때는 역을 10개만 먼저 보여주고 더보기로 확장하는 방식으로 바꿨다. 모든 역을 한 번에 보여주면 화면이 너무 길어지고 모바일 프레임을 벗어났기 때문이다.

요청 방향:
- 서울 지하철역 데이터 확장
- 호선별 역은 처음에 10개만 표시
- 더보기 버튼을 누르면 나머지 표시
- 검색 사용자는 검색창으로 바로 찾을 수 있게 유지
- 역 리스트가 모바일 화면 밖으로 튀지 않게 처리

이 기능을 만들면서 느낀 건, 데이터가 조금만 부족해도 실제 서비스처럼 보이지 않는다는 점이었다. 기능은 있어도 선택지가 적으면 사용자는 바로 “이거 쓸 수 있나?”라고 느낄 수 있다.

5. 날씨 API는 자동값과 수동 선택을 함께 두었다

약속이나 휴가에는 날씨가 중요하다. 그래서 선택한 지역 기준의 날씨 정보를 불러오는 기능을 붙였다. 다만 API가 항상 정상적으로 불러와진다는 보장은 없었다. 실제 화면에서도 “날씨 정보를 자동으로 불러오지 못했어요” 같은 상태가 필요했다.

그래서 날씨는 자동 API 값을 우선 사용하되, 사용자가 직접 체감 날씨를 선택할 수 있는 구조로 만들었다.

• 선선함
• 보통
• 더움
• 폭염
• 습함
• 비
• 추움
• 강풍

이 방식이 마음에 들었던 이유는, API가 실패해도 앱 흐름이 끊기지 않기 때문이다. 자동으로 불러오면 좋고, 실패하면 사용자가 직접 선택하면 된다.

6. 휴가 장소 추천은 국내와 해외 데이터를 늘렸다

휴가 장소 추천 기능은 처음에 너무 선택지가 한정적이었다. 부산 기장, 제주 조천, 가평, 타이베이, 삿포로, 오사카 정도만 보이니 실제 추천 서비스라기보다는 샘플 데이터처럼 느껴졌다.

그래서 국내외 여행지 추천 데이터를 늘렸다. 단순히 여행지만 추가한 것이 아니라, 여행 타입과 조건에 따라 추천이 달라지도록 구성했다.

추천 조건은 대략 이런 방향으로 잡았다.

• 혼자 여행
• 친구와 여행
• 가족 여행
• 연인 여행
• 드라이브
• 숙박 중심
• 카페 중심
• 자연 경치
• 먹방
• 조용한 휴식
• 관광형 여행

처음에는 추천 문구도 다 비슷했다. “차로 이동하기 좋아요”, “맛집과 카페를 묶기 좋아요” 같은 문장이 반복되면 앱이 너무 기계적으로 보인다. 그래서 여행지별로 추천 이유와 태그를 조금씩 다르게 정리했다.

7. 예산 계산은 단순 N분의 1보다 조건별 분배가 중요했다

휴가 예산 기능은 처음에 총예산을 단순히 나눠 보여주는 구조였다. 그런데 실제 휴가 예산은 그렇게 단순하지 않다. 숙박형 여행이면 숙소 비중이 커지고, 당일치기라면 교통비와 식비 비중이 더 중요해진다.

그래서 예산 항목을 다음처럼 나눴다.

• 숙박비
• 교통비
• 식비
• 카페/간식
• 액티비티
• 쇼핑/기념품
• 예비비

여기에 사용자가 직접 추가 비용을 입력할 수 있게 했다. 실제 여행에서는 “렌터카”, “펜션 바비큐”, “반려동물 비용”, “기념일 선물”처럼 기본 항목에 없는 비용이 자주 생기기 때문이다.

최종 결과에서는 전체 예상 금액과 1인당 예상 금액을 같이 보여주도록 했다. 휴가 예산은 결국 “총 얼마가 필요하냐”와 “내가 얼마를 내야 하냐”가 핵심이기 때문이다.

8. 체크리스트는 추천형과 커스텀형으로 나눴다

준비물 체크리스트는 처음에는 추천 리스트만 만들면 된다고 생각했다. 하지만 사람마다 여행 스타일이 너무 다르다. 누군가는 바다 여행 준비물이 필요하고, 누군가는 해외여행 서류가 중요하고, 누군가는 반려동물 동반 준비물이 필요하다.

그래서 체크리스트 기능은 두 가지 모드로 나눴다.

모드	설명
추천 체크리스트	날짜, 장소 유형, 시즌, 동행자 조건을 바탕으로 준비물 추천
커스텀 체크리스트	사용자가 직접 준비물을 만들고 저장

처음에는 추천 저장 경로가 애매했다. 추천 체크리스트를 저장했는데 캘린더나 보관함에서 제대로 이어지지 않는 느낌이 있었다. 그래서 추천 저장 시 체크리스트 보관함으로 들어가도록 경로를 수정했다.

9. 휴가 캘린더는 리스트에서 진짜 달력 형태로!

휴가 캘린더는 처음에 저장된 기록을 카드 리스트로 보여주는 형태였다. 그런데 “캘린더 보기”라는 이름과 달리 진짜 달력처럼 보이지 않았다. 그래서 월별 달력 형태로 바꾸기로 했다.

기록이 있는 날짜에는 레몬 캐릭터가 붙어 있고, 그 날짜를 누르면 아래에서 저장한 기록을 볼 수 있게 만드는 것이다.

이 과정에서도 문제가 있었다.

• 날짜 배치가 이상하게 보임
• 레몬 이미지가 public/assets 경로에 있는데 화면에서 깨짐
• 기록이 있는 날짜를 눌러도 상세 기록이 보이지 않음
• 기록 상세 디자인이 너무 투박함
• 삭제 버튼이 카드 프레임 밖으로 빠져나감

결국 캘린더는 단순히 날짜를 그리는 기능이 아니라, 저장된 기록과 날짜를 정확히 연결하는 구조가 중요했다. 예산 기록, 체크리스트 기록, 휴가 기록, 약속 기록이 모두 같은 날짜 아래에서 보여야 했다.

캘린더 수정 방향:
- 월별 날짜 그리드로 표시
- 기록이 있는 날짜에는 레몬 아이콘 표시
- 날짜 클릭 시 해당 날짜 기록만 필터링
- 기록 카드에는 유형, 제목, 핵심 요약, 상세 입력값 표시
- 삭제 버튼은 카드 내부에 자연스럽게 배치

이후에는 캘린더에서 날짜를 누르면 어떤 기록인지 상세하게 볼 수 있도록 정리했다. 단순히 제목만 보여주면 나중에 다시 봤을 때 무슨 기록인지 알기 어렵기 때문이다.

10. 모바일 토스앱 테스트 무조건 필수..

샌드박스나 데스크탑 미리보기에서는 괜찮아 보였는데, 실제 토스앱 모바일 테스트를 하자 문제들이 많이 보였다. 특히 iPhone과 Android에서 화면이 다르게 보이는 부분이 있었다.

모바일 테스트에서 발견한 문제는 이런 것들이었다.

• iPhone에서 날짜 입력칸이 오른쪽 프레임 밖으로 벗어남
• 약속 기록 저장 날짜 칸도 오른쪽이 잘림
• 긴 역명이 카드 안에서 넘침
• 검색창 focus 테두리가 둥근 모서리 안에서 잘려 보임
• 섹션마다 그림자가 너무 네모난 직각처럼 보여 인위적임
• 하단 버튼이 카드 프레임을 벗어남
• 설정 버튼 위치가 너무 안쪽으로 들어감

이때 느낀 건, 데스크탑에서 화면을 줄여 보는 것과 실제 토스앱 WebView에서 보는 것은 다르다는 점이다. 특히 iPhone에서는 input, select, 스크롤바, safe area 때문에 예상하지 못한 깨짐이 생겼다.

11. 자동 다음 이동 구현하기

단계형 화면을 만들다 보니, 사용자가 옵션을 고르고 다시 아래로 스크롤해서 다음 버튼을 누르는 게 번거로워 보였다. 그래서 선택형 항목은 누르면 자동으로 다음 단계로 넘어가게 수정했다.

이 방식은 대부분의 선택형 화면에서는 좋았다.

• 휴가 타입 선택
• 동행자 선택
• 예산 범위 선택
• 날씨 체감 선택
• 장소 유형 선택

하지만 날짜 선택은 달랐다. 날짜를 누르는 순간 너무 빨리 다음으로 넘어가면, 사용자가 잘못 누른 것을 확인할 시간이 없었다. 그래서 날짜 선택 화면은 자동 이동을 제외하고, 시작일과 종료일을 모두 선택한 뒤 직접 다음 버튼을 누르게 바꿨다.

수정 기준:
- 선택형 버튼은 자동 다음 이동 유지
- 날짜 선택 화면은 자동 이동 금지
- 시작일/종료일을 모두 선택하면 다음 버튼 활성화
- 사용자가 직접 다음 버튼을 눌러 이동
- 이전 버튼은 모든 단계에서 유지

이 수정은 꽤 중요했다. UX를 편하게 만드는 것과 실수를 줄이는 것은 항상 같은 방향이 아니었다. 빠른 이동이 편할 때도 있지만, 날짜처럼 정확해야 하는 값은 확인 단계를 남겨야 했다.

12. 설정 화면에 약관과 저장 방식 안내 넣기

처음 설정 화면은 기능이 거의 없었다. 하지만 앱인토스에 제출하려면 사용자가 어떤 방식으로 앱을 쓰는지, 데이터가 어디에 저장되는지, 서비스가 참고용인지 안내하는 것이 필요했다.

그래서 설정 화면에 다음 항목을 추가했다.

• 서비스 이용약관
• 개인정보 처리방침
• 저장 방식 안내
• 날씨 정보 안내
• 리소스 안내
• 문의하기
• 앱 정보
• 이후 업데이트 예정

휴가능은 로그인이나 서버 저장을 사용하지 않기 때문에, 기록은 사용자의 기기 브라우저 저장소에만 저장된다고 안내했다. 앱 데이터를 삭제하면 복구할 수 없다는 점도 함께 적었다.

또 중간지점, 여행지, 예산, 준비물, 날씨 정보는 모두 참고용이라는 점을 분명히 했다. 실제 이동 시간, 비용, 날씨, 운영 여부는 달라질 수 있으니 중요한 일정이나 예약 전에는 공식 경로로 다시 확인해야 한다.

13. 앱인토스 등록 정보도 하나씩 채웠다

기능이 어느 정도 완성된 뒤에는 앱인토스 콘솔에 앱 정보를 입력해야 했다. 이 단계도 생각보다 신경 쓸 게 많았다. 짜잘하게 뭐가 많아..

입력해야 했던 정보는 다음과 같았다.

항목	작성 방향
한국어 앱 이름	휴가능
영어 앱 이름	Huganeung
appName	huganeung
부제	완벽한 휴가를 위해 장소, 예산, 준비물까지 한 번에 챙겨요
상세 설명	사용자가 앱에서 무엇을 보고, 무엇을 누르고, 어떤 결과를 확인하는지 흐름 중심으로 작성
검색 키워드	휴가, 여행, 약속, 예산, 준비물, 체크리스트, 캘린더 등
챌린지 연관성	여름 휴가와 약속 준비를 돕는 미니앱이라는 점 강조

특히 상세 설명은 500자 이내로 줄여야 했다. 너무 길면 입력할 수 없고, 너무 짧으면 앱의 기능이 제대로 전달되지 않는다. 그래서 핵심 기능을 모두 담되, 앱 흐름이 보이게 압축했다.

휴가능은 여름 휴가와 약속 준비를 한 번에 돕는 미니앱입니다. 사용자는 약속 중간지점 찾기, 휴가 장소 추천, 예산 정리, 준비물 체크리스트, 휴가 캘린더를 선택할 수 있습니다. 입력한 조건에 따라 참고용 중간지점, 여행지 후보, 예상 예산, 준비물을 확인하고, 저장한 기록은 캘린더에서 날짜별로 다시 볼 수 있습니다.

이 단계에서는 “내가 만든 앱을 어떻게 짧게 설명할 것인가”가 중요했다. 기능을 많이 넣었다고 다 좋은 게 아니라, 한 줄만 봐도 어떤 앱인지 이해되어야 했다.

14. 앱 로고와 썸네일도 따로 고민했다

앱인토스에 등록하려면 앱 로고와 썸네일도 필요했다. 처음에는 한자 休를 크게 넣은 로고와, 레몬나무 캐릭터 이미지를 후보로 만들었다.

하지만 실제 토스 미니앱 목록을 보면 작은 아이콘에서 너무 복잡한 이미지는 잘 보이지 않았다. 한자와 캐릭터를 모두 넣으면 의미는 담기지만, 작은 크기에서는 알아보기 어려울 수 있었다.

그래서 로고 후보는 다음 기준으로 봤다.

• 작은 화면에서도 무엇인지 보이는가
• 휴가능의 여름 휴가 분위기가 느껴지는가
• 다른 앱과 헷갈리지 않는가
• 다크모드에서도 형태가 깨지지 않는가
• 600×600 정사각형 안에서 중심이 잘 맞는가

결국 로고는 예쁜 일러스트보다 “작게 봐도 알아보이는 단순함”이 더 중요했다. 앱 썸네일은 기능이 더 잘 드러나도록 홈 화면과 휴가 플래너 느낌을 보여주는 방향으로 고민했다.

15. .ait 파일 만들기에서 제일 많이 막혔다

기능을 만들고 앱 정보를 채운 뒤에는 실제 토스앱에서 테스트할 수 있도록 앱 번들 파일을 만들어야 했다. 여기서 필요한 파일이 바로 .ait 파일이었다.(ait이 대체 몬데요ㅜ)

처음에는 평소처럼 npm run build만 실행하면 .ait 파일이 생기는 줄 알았다. 하지만 일반 Vite 빌드는 dist 폴더만 만들 뿐, 앱인토스용 번들을 만들어주지는 않았다.

npm run build

이 명령어를 실행하면 dist는 생성됐지만 huganeung.ait 파일은 없었다. 알고 보니 앱인토스 CLI와 granite.config.ts 설정이 필요했다.

처음에는 npx ait --help를 실행해서 CLI가 설치되어 있는지 확인했다.

npx ait --help

명령어 목록에 ait build, ait deploy, ait init 등이 보였으니 CLI 자체는 동작하고 있었다. 문제는 프로젝트 설정이었다.

npx ait build

처음 오류는 granite.config.ts 파일을 찾을 수 없다는 것이었다.

Internal Error: Cannot find granite config:
.../huga/granite.config.ts

그래서 프로젝트 루트에 granite.config.ts를 추가했다. 그런데 이번에는 플러그인 옵션이 올바르지 않다는 오류가 났고, 이후에는 dependencyVersions 문제까지 이어졌다.

Type Error: Cannot convert undefined or null to object

결국 앱인토스 플러그인 설정에 필요한 값을 하나씩 채워 넣고, 의존성 버전 정보를 추가한 뒤에야 빌드가 성공했다.

npx ait build

✓ built in 339ms
[1/2] Built for RN 0.84.0
[2/2] Built for RN 0.72.6
Creating .ait artifact...
AIT build completed (huganeung.ait)

이때 드디어 프로젝트 루트에 huganeung.ait 파일이 생겼다. 이 순간은 진짜 안도했다.

16. 앱 출시 메뉴에 번들을 올리고 QR로 테스트했다

huganeung.ait 파일이 생긴 뒤에는 앱인토스 콘솔의 앱 출시 메뉴에서 버전을 등록했다. 번들 파일을 업로드하면 테스트용 스킴과 QR 코드가 생성된다.

테스트 흐름은 다음과 같았다.

• 앱인토스 콘솔 접속
• 워크스페이스 선택
• 휴가능 앱 선택
• 좌측 메뉴에서 앱 출시 선택
• 버전 등록 클릭
• huganeung.ait 파일 업로드
• 테스트하기 버튼 클릭
• QR 코드를 토스앱으로 스캔
• 실제 토스앱 안에서 휴가능 실행

토스앱 안에서 직접 테스트해보니, 샌드박스에서는 보이지 않던 문제가 다시 보였다. 그래서 수정하고, 다시 npx ait build로 새 번들을 만들고, 다시 업로드하는 과정을 여러 번 반복했다.

수정 후 재배포 흐름:
1. 코드 수정
2. npm run build
3. npx ait build
4. 새 huganeung.ait 생성 확인
5. 앱인토스 콘솔에서 + 버전 등록
6. 새 .ait 업로드
7. QR 테스트
8. 문제 있으면 다시 수정

이때부터는 “기능 개발”보다 “제출 가능한 상태로 다듬기”에 가까웠다. 실제 사용자 화면에서 깨지는 부분을 하나씩 찾아서 고쳐야 했다.

결국 9번째 프로젝트 업로드만에 ‘검토 요청’을 날릴 수 있었다..

17. 검토 요청 전 출시 노트도 꼼꼼하게 작성했다

앱을 검토 요청할 때는 출시 노트를 작성해야 했다. 이 칸에는 이번 버전에서 무엇을 수정했는지, 왜 검토 요청하는지 적어야 했다.

나는 모바일 테스트에서 수정한 내용을 중심으로 정리했다.

모바일 토스앱 테스트 결과를 반영해 휴가능 미니앱의 사용성과 안정성을 개선했습니다.

1. iPhone 환경에서 날짜 입력칸과 일부 입력 영역이 화면 프레임을 벗어나던 문제를 수정했습니다.
2. 긴 역명과 긴 텍스트가 카드 영역을 벗어나지 않도록 줄바꿈과 영역 처리를 개선했습니다.
3. 검색창 focus 테두리가 둥근 모서리에서 잘려 보이던 문제를 수정했습니다.
4. 홈 화면 설정 버튼 위치를 우측 안전 여백에 맞게 조정했습니다.
5. 설정 화면에 서비스 이용약관, 개인정보 처리방침, 저장 방식 안내, 날씨 정보 안내, 리소스 안내, 문의하기, 앱 정보를 추가했습니다.
6. 선택형 단계에서는 항목 선택 후 다음 단계로 자연스럽게 이동하도록 개선하되, 날짜 선택 화면은 사용자가 직접 확인 후 다음 버튼을 누르도록 조정했습니다.
7. 약속 개선 권장 영역의 안내 문구와 배치를 정리해 사용자가 추천 이유를 더 쉽게 이해할 수 있도록 수정했습니다.
8. 전반적인 모바일 화면 여백, 카드 그림자, 버튼 정렬을 다듬어 토스앱 WebView에서 더 안정적으로 보이도록 개선했습니다.

출시 노트는 그냥 대충 적는 칸이 아니었다. 검토 담당자가 어떤 변경이 있었는지 바로 이해할 수 있도록, 문제와 수정 내용을 명확히 적는 것이 중요했다.

18. 검토 요청용 주요 기능도 따로 입력했다

검토 요청 단계에서는 앱 상세 화면에 보여질 주요 기능도 입력해야 했다. 이 부분은 앱을 대표하는 기능을 최대 3개 정도로 정리해야 했다.

휴가능의 경우 너무 많은 기능을 다 넣으려 하면 오히려 흐려질 수 있어서, 대표 기능은 이렇게 잡았다.

한국어 기능 이름	영어 기능 이름	의미
휴가 계획 플래너	Vacation Planner	휴가 장소, 예산, 준비물을 한 흐름에서 정리
약속 중간지점 찾기	Meeting Spot Finder	서로의 출발지를 기준으로 참고용 만남 후보 추천
휴가 체크리스트	Packing Checklist	날짜와 장소 조건에 맞춰 준비물 추천 및 저장

여기서도 중요한 건 기능명을 너무 거창하게 만들지 않는 것이었다. 사용자가 보고 바로 이해할 수 있는 이름이어야 했다.

19. 토스 로그인 설정은 사용하지 않는 방향으로 정리했다

앱인토스 콘솔에는 토스 로그인 관련 설정도 있었다. 이름, 이메일, 성별, 생년월일, 휴대전화번호 같은 항목을 필수/선택/사용 안 함으로 설정할 수 있었다.

(처음 해봐서 뭐가 뭔지 익히는 것도 한 세월..)

하지만 휴가능은 현재 로그인 없이 로컬 저장으로만 동작하는 앱이다. 사용자의 개인정보를 받을 필요가 없고, 서버 저장도 하지 않는다. 그래서 토스 로그인은 사용하지 않는 방향으로 보는 것이 맞았다.

개인정보를 적게 다루는 것이 초기 미니앱에서는 더 안전하다고 판단했다. 나중에 계정 동기화나 기기 간 저장 기능이 필요해지면 그때 다시 검토하면 된다.

20. 현재 완성된 기능

출품 직전 기준으로 휴가능에 들어간 기능은 꽤 많아졌다.

• 홈 화면 5개 메뉴 구성
• 휴일 약속 중간지점 추천
• 서울 지하철역 검색 및 호선별 선택
• 일부 타 지역 역/장소 데이터 선택
• 지역 날씨 API 연동 및 수동 체감 날씨 선택
• 약속 가능성 계산 및 개선 권장 안내
• 국내 여행지 추천
• 해외 여행지 추천
• 휴가 타입, 동행자, 예산 조건별 추천
• 휴가 예산 계산
• 숙박비, 교통비, 식비, 카페/간식, 액티비티, 쇼핑/기념품, 예비비 분배
• 사용자 직접 추가 비용 입력
• 전체 합계와 1인당 예상 금액 표시
• 추천 체크리스트 생성
• 커스텀 체크리스트 생성 및 저장
• 체크리스트 보관함
• 휴가 캘린더 월별 보기
• 날짜별 저장 기록 확인
• 기록 삭제 및 전체 기록 삭제
• 설정 화면 약관/개인정보/저장 방식 안내
• 모바일 토스앱 WebView 대응
• .ait 번들 생성 및 콘솔 업로드

처음에는 “휴가 앱 하나” 정도였는데, 만들고 보니 작은 서비스 하나를 거의 끝까지 다듬은 느낌이었다.

계속 틈날 때마다 기능 업데이트 중…

21. 이번 프로젝트에서 가장 크게 배운 점

휴가능을 만들면서 가장 크게 느낀 건, 우선 앱 제작에 대한 공포가 한 풀 꺾였다는 것! 이것만으로도 난 굉장한 배움과 성장이지 않았을까…?

서비스를 만든다는 것은 결국 웹 뿐만 아니라 앱 제작도 포함된 건데, 괜히 너무 무섭고 어렵게 느껴졌다.

다행히 앱인토스 내에서 미니앱으로 연습해볼 수 있어서 뭔가 과정의 한 사이클을 경험한 느낌??

이번 프로젝트에서 기능적으로 배운 점은 다음과 같다.

• 기능보다 모바일 실제 테스트가 더 중요할 때가 많다.
• 데스크탑 미리보기와 토스앱 WebView는 다르게 보일 수 있다.
• 자동 이동 UX는 편하지만 날짜처럼 정확한 입력에는 위험할 수 있다.
• 데이터가 부족하면 기능이 있어도 서비스처럼 느껴지지 않는다.
• 약관, 개인정보, 저장 방식 안내는 작은 앱에도 필요하다.
• .ait 번들은 일반 웹 빌드와 다르다.
• 앱인토스 제출은 개발뿐 아니라 설명, 로고, 썸네일, 스크린샷, 출시 노트까지 필요하다.
• 바이브코딩은 빠르지만, 마지막 20%의 완성도는 잔수정 싸움이다. 아니..? 50%..?

22. 앞으로 개선하고 싶은 부분

출품용 버전은 완성했지만, 휴가능은 앞으로도 개선할 부분이 많다. 지금은 챌린지 제출을 목표로 만든 1차 버전에 가깝다.

앞으로 추가하고 싶은 기능은 다음과 같다.

• 실제 지도 API 연동
• 중간지점 추천 정확도 개선
• 실제 이동 시간과 환승 정보 반영
• 여행지 추천 데이터 고도화
• 결과 카드 이미지 저장 기능
• 휴가 캘린더 통계
• 기기 간 동기화
• 친구에게 결과 공유하기
• 날씨 알림
• 사용자 취향 기반 추천

다만 지금은 너무 많은 기능보다 안정적인 1차 버전이 더 중요했다. 챌린지 제출용 앱에서는 “되는 기능을 많이 넣는 것”보다 “깨지지 않고 이해되는 기능을 넣는 것”이 더 중요하다고 느꼈다.

23. 마무리

휴가능은 처음엔 가볍게 시작한 토스 미니앱 챌린지 프로젝트였다. 하지만 만들다 보니 기획, 디자인, 캐릭터, 데이터, 날씨 API, 로컬 저장, 캘린더, 모바일 테스트, 앱인토스 등록, .ait 빌드, 검토 요청까지 모두 경험하게 됐다.

AI와 함께 개발하면 시작은 정말 빠르다. 하지만 실제로 제출할 수 있는 앱으로 만들려면 결국 사람이 계속 눌러보고, 깨지는 부분을 찾고, 문구를 다듬고, 화면을 다시 확인해야 한다.

이번 휴가능 제작기는 그 과정을 그대로 보여준 프로젝트였다. 처음엔 “이거 5일 안에 가능할까?”였는데, 결국 기능을 만들고, 테스트하고, 수정하고, 번들까지 만들어 제출 단계까지 왔다. 역시 뭐든 하면 된다…

아직 부족한 부분은 많지만, 휴가와 약속 준비를 한 번에 챙길 수 있는 첫 번째 버전은 완성했다. 이제 남은 건 결과를 기다리는 일이다.

뭐.. 결과에 대한 기대는 크지 않지만, 그래도 좋은 게 좋은 거니까~~ 좋은 결과 있어라^^

매달 챌린지에 참여해보는 것이 앞으로의 목표다… 계속 해보다 보면 결국 유저에게 통하는 메시지, 기능을 좀 더 밀접하게 알아챌 수 있지 않을까..?(희망사항)

🔻5일만에 만든 7월 챌린지 미니앱, ‘휴가능’이 궁금하신 분들은 요기서!!!