변경이 잦은 프론트엔드에서 어떻게 건강한 테스트코드를 작성할 수 있을까?

Vitest + MSW 로 유연한 단위 / 통합 테스트코드 작성해보기

<img src="https://image.until.blog/grandff/article/1718942598885" alt="until-638"><p></p><h2>나처럼 육아에 바쁜 아빠들을 위한 앱.</h2><hr><p>주말에 아이랑 집에만 있으면 "정말" 시간이 안간다. 집밖에 아이와 갈만한 곳을 찾는 것도 생각보다 복잡하고 어려운 과제가 된다. 나같은 경우, 여러 포털사이트나 소셜미디어를 뒤져보곤 한다. 물론 유용한 정보를 자주 찾진 못했다. born to be 집돌이 태생이여서 어느 지역에 뭐가 유명한지도 모르고, 네비를 봐도 길을 헤매는 내가 여기가 어딘지 정확히 찾을리가... 이렇게 모르다 보니 장소를 찾는데도 시간이 많이 걸리고 후기까지 찾으면 주말이 다 지나가버렸다.</p><p>언제인지 기억은 안나지만, '어렸을 때부터 아이와 여행을 많이 다니고, 아빠의 육아참여가 자녀의 발달에 더 좋다'는 글을 봤다. 그래서인지 더더욱 아이와 어디 갈지를 고민하던 찰나에 나와 같은 생각을 가진 부모님들이 있지 않을까 싶었다. 아이와 함께 할 수 있는 활동에 관심이 많음에도 불구하고, 필요한 정보를 찾는 데 있어서 어려움을 겪는 경우가 많은 분들을 위한 서비스를 만들어볼까하고 시작한게 <strong>아랑아랑</strong> 프로젝트다. <strong>아이와 함께 갈 만한 여행지나 놀이 공간 정보를 모아 손쉽게 찾을 수 있는 앱</strong>을 목표로 시작하게 되었다.</p><p></p><h2>1인 팀 결성.</h2><hr><blockquote><p>나에겐 참 안타까운 일이지만 내 주변에 사이드 프로젝트를 하는 사람도 없고, 육아를 하는 사람도 없다. 강제로 1인 팀을 할 수 밖에 없었다.</p></blockquote><p>당시 회사에서 개발 사업이 WBS 기준 중후반 정도 왔을 때고, 개발 완료 시기까지 7개월 가량 남은 시점이었다. 아직 개발 사업이 진행 중이고, 육아와 집안일까지 해야해서 사이드 프로젝트에 사용할 시간을 그야말로 쥐어짜내야했었다. (출근 전 1시간, 점심시간 1시간, 애들 재우고 30분)</p><p></p><h2>시장분석.</h2><hr><blockquote><p>'<strong>오늘 하루</strong>' 갈 수 있는 여행지를 제공하되 공공데이터와 나만의 데이터를 결합하는 방향으로 잡았다.</p></blockquote><p>내가 생각하는 서비스는 시장에 이미 3~4개 정도 있었다. 장단점이 각각 있겠지만, 내가 주목한건 <strong>혼자서 만들고 운영할 수 있는 서비스인가</strong> 라는 것이다. 다른 서비스들처럼 주변 숙박업소의 할인정보를 제공하고, 예약 시 추가 할인 혜택을 주거나, SNS 홍보 자료도 작성하고.. 이런 작업을 본업을 하면서 하기엔 불가능인게 뻔했다. 그래서 아래처럼 방향을 잡고 시작했다.</p><h3>1. 무조건 당일 치기</h3><p>우리 가족은 일단 1박을 선호하지 않는다. 여름휴가나 겨울방학이나 특별한 시즌이 아니면 무조건 차로 갈 수 있는 당일치기 장소를 선호했다. 그래서 '오늘 하루'에 다녀올 수 있는 곳 위주로 정보 제공과 추천을 하려했고, 당연히 위치 정보 기반으로 서비스를 구성했다.</p><h3>2. AI 활용</h3><p>이번 사이드프로젝트를 하면서 유독 공공데이터를 많이 봤는데, 지자체마다 운영하는 공공데이터는 정확도가 너무 떨어졌다. 물론 관광공사에서 제공하는 데이터를 가지고 어느정도 활용이 가능했으나 실시간으로 변하는 정보(예를 들어 꽃구경이나 휴관일 정보 등)는 실시간 정보가 필요했다. 일일이 찾을 수는 없기에 자동화 프로세스가 필요했고, Langchain을 이용해 정보를 찾아 요약하는 프로세스를 구성했다.</p><h3>3. 디자인은 무리무리무리무리무리무리</h3><p>초등학생 때 미술학원을 다녔는데, 당시 선생님이 하셨던 말이 아직도 기억 난다.</p><p><em>" 색칠만 하면 그림이 이상해지네 ... ? "</em></p><p>색조합만 했다하면 카레가 똥이 되는 마법을 부렸고, 성인이 되어서도 나아지진 않았다. 그래서 디자인시스템을 참고하는 방향으로 했고, 스포카 디자인 가이드를 많이 참조했다. 화면은 와이어프레임만 그리고, dribble, mobbin, wwit 등 참고할만한 화면을 보면서 자체 디자인을 했다.</p><p></p><h2>시~작!</h2><hr><p>사이드 프로젝트가 처음은 아니지만 그렇다고 계속 유지해본 사이드 프로젝트가 있는 것도 아니였다. 지난번 부족한 점이 무엇인고하니 <strong><u>문서화</u></strong>를 전혀 하지 않았다. 그때만 하더라도 주니어(지금도 마음만은 주니어)여서 문서의 중요성을 얕잡아보고 코드만 바라보는 바보천치였다.</p><p>이번에는 동일한 실수를 하지 않겠다는 의미에서 기획부터 시작해서 사소한것 하나하나 문서로 시작해서 문서로 끝나는 작업을 많이 했다. 당시 회사 프로젝트가 진행 중이였고, 사이드 프로젝트 개발 기간이 길어지면 출시하기 어렵다고 판단해서 '<strong>8개월</strong>'로 개발 기간을 잡았다.</p><img src="https://image.until.blog/grandff/article/1718948390050" alt="until-641"><p>앱 이름은 '<strong>아빠와 아이가 함께 하는 여행</strong>' 이라는 의미로 '<strong>아랑아랑</strong>' 이라고 지었다.</p><img src="https://image.until.blog/grandff/article/1718948374179" alt="until-640"><p>지금 다시 보니 시스템 구성도가 참 저렴하게 그렸지만 아무튼 위와 같았다.</p><blockquote><h3>Front-end</h3><p>flutter를 사용하고 앱만 제공할거라 웹 버전은 고려하지 않았다.</p><h3>Back-end</h3><p>Spring Boot를 주로 사용하고 (MVC), LLM, 데이터 수집 등은 FastAPI를 사용했다.</p><h3>Cloud Infra</h3><p>최초 구축 시 NHN Cloud를 사용했고, CI/CD는 github action을 사용했다.</p></blockquote><p>개발하는 중간에 디자인을 바꿔 재개발하거나 테스트 중 발견한 수많은 오류 때문에 이거 진짜 가능? 이라는 생각까지 들었지만 정신 단디 차리고 최초 버전을 출시하는데 성공했다.</p><p></p><h2>아랑아랑 출시.</h2><hr><img src="https://image.until.blog/grandff/article/1718948746716" alt="until-642"><p>최초 출시 화면이다. 출시 후 노마드코더와 렛플에도 홍보글을 올렸다. 보통 내가 만든 서비스는 내 주변 지인한테 츄라이츄라이를 하는게 국룰이던데, 육아를 하는 사람이 나 혼자더라... 그래서 서비스 홍보를 직접 해야했었는데 이때부터 사이드 프로젝트를 벗어나 제2업무를 하게 된 것 같다. (그것도 수익이 거의 발생 안하는) 늘어나지 않는 사용자를 보며 추가 개발과 버그 수정을하며 앱을 계속 고쳐나갔다.</p><p></p><h2>출시 했다고 끝난게 아니란다.</h2><hr><h3>1. 비용 줄이기</h3><p>처음에 NHN Cloud로 백엔드 단을 배포해서 사용했는데, 유지비용이 너무 많이 들었다. 대안을 찾다보니 Serverless로 가능한 <strong>Google Cloud Run</strong>을 알게 되서 인프라를 이쪽으로 옮겼고, 현재까지도 만족하며 사용 중이다. Cloud Run에서 도커로 배포하는 옵션을 설정하면 레포지토리에 있는 도커파일을 읽어다가 자동으로 배포해줘서 특히 편했다.</p><h3>2. 직접 홍보하기</h3><p>홍보 채널을 찾으면서 인스타그램만한게 없었다. 인스타그램같은 SNS에서 여행지 정보 찾는걸 대체하기 위해 만들었지만 아이러니하게 홍보를 인스타그램에서 해야하는 상황이 왔다. 단순히 홍보 채널로만 이용하기엔 뭔가 심심한 면이 있어서 아이랑 다녀온 여행 후기도 같이 올리면서 아랑아랑의 창구로 사용하고 있다. 물론 인스타와 앱 서비스 운영을 병행하니 할일도 두배로 늘어났지만 이를 통해 유입되는 신규 사용자도 있어 홍보 효과를 톡톡히 봤다.</p><h3>3. UI/UX 개편</h3><p>최초 출시에는 여행지 카테고리가 20개였는데, 이게 사용자 입장에서 선택도 애매하고, 관리하는 입장에서도 확인 어려워 카테고리를 8개로 압축시켰다. 직접 사용을 계속 하다보니 사용자에게 계속 터치를 강요하는 UX로 구성되어 있었다. 그래서 사용자가 찾기 전에 서비스에서 위치나 취향에 맞게 데이터를 제공하는 방식으로 변경했다. 위치 기반은 유지하면서 날씨에 맞는 여행지를 추천하거나, 지역별로 특정 테마에 맞게 여행지를 취합해 정보를 제공하게 수정했다.</p><h3>4. AI 기능 강화</h3><p>처음에는 Chat-gpt를 사용해 해당 여행지 정보를 찾거나 검색 API를 사용해 정보를 요약하는 수준으로만 활용했는데, 할루시네이션 이슈가 심했고 답변을 생성하는데 너무 오래 걸렸다. 그래서 랭체인으로 사용자가 자주 접속하는 시간대 직전에 자주 찾는 여행지에 대한 최근 정보를 요약해서 제공하는 걸로 수정했다.</p><h3>5. 사용자 참여 유도</h3><p>사용자가 사용을 하지 않으면 아무리 질좋은 서비스라도 의미가 없기에 마일리지 서비스를 통해 활동에 대한 보상을 부여해서 참여를 유도했다.</p><p></p><h2>계속 개발하고 고치고 유지하며 느낀점.</h2><hr><img src="https://image.until.blog/grandff/article/1718950471330" alt="until-643"><img src="https://image.until.blog/grandff/article/1718950485876" alt="until-644"><p>마일리지 기능까지 추가하고나서야 최소한으로 구현이 필요한 것들은 모두 추가했다. 첫 출시 이후 7개월이나 더 시간을 썼으니 1년 넘게 운영하면서 개발을 해왔다. 아직까지 많은 유저수를 확보하진 못했지만 내가 끝까지 만들고 유지하는 서비스라 그런지 애착이 가서 끊임 없이 들여다보고 개선하고 있다.</p><p></p><p>이 사이드 프로젝트를 하면서 내 스스로 기회를 만들었다고 생각이 든다.</p><p>어떻게 하면 아이디어를 구체화할지, 어떻게 하면 더 효율적인 환경을 구축할지, 어떻게 하면 사용자들이 클릭하게 되는 서비스나 포스팅을 올릴지, 어떻게 하면 서비스 품질을 높일지.. 다양한 고민을 하면서 이것저것 찾아보게 되고, 보는 시야를 어제보다 더 넓어지는 기회를 얻었다고 생각한다.</p><p>나보다 훨씬 뛰어난 분들이 많아 감히 왈가왈부 하긴 그렇지만, 그래도 감히!! 말할 수 있다.</p><p><strong><u>사이드 프로젝트.. 당장해!!!</u></strong></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><hr><p></p><p></p>

사이드프로젝트를 개발하고, 런칭하고, 운영하고, 개선하면서 느낀 점을 주저리주저리 적어봤습니다.

아랑아랑 개발 후기(+1년간 유지하면서)

<blockquote><p>매일같이 쏟아지는 테크 이슈... 확인해야 할게 참 많죠? 😱</p></blockquote><img src="https://image.until.blog/shalomeir/article/1730692505362.png" data-width="100%" data-align="center" alt="1967"><p></p><p>#인공지능 업계는 하루가 멀다하고 새로운 기술이 나오고, #개발 트렌드는 왜이렇게 빨리 바뀌는지...</p><p>쏟아지는 정보 지식들 확인하려고 관심있는 뉴스레터 구독하고, 오픈 채팅방도 들어가보고 관련 커뮤니티에 가입하고 SNS 계정도 팔로우 하게 되는데요. 그러다보면 읽지않은 메일, 알림 들 때문에 죄책감도 들어요. 😮‍💨</p><p>하지만,,, 요즘 같이 IT 가 중요한 시대에 최신 #테크 트렌드 놓칠 수는 없잖아요!</p><blockquote><p>테크 정보, 스닙팟으로 한번에 확인 가능!</p></blockquote><p>안보면 뒤쳐지는 것 같고, 그렇다고 일일히 들어갈 시간도 없는 당신.<br>스닙팟 한 군데 에서 모두 모아 볼 수 있어요.</p><p>스닙팟에서는 #테크 업계에서 요즘 많이 공유되는 뉴스, 유튜브, 블로그 및 커뮤니티 링크 🔗 들이 #주제 별로 다 모이니까.<br>중요한 정보를 놓치지 않고 볼 수 있어요. 그것도 한번에!</p><p>예를 들어 #ChatGPT 관련 핫한 이슈는 스닙팟 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/r374?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech"><strong>#ChatGPT 팟</strong></a>에서 모이고 있구요. 이 이슈는 #인공지능 관련 주제이기도 하니까 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/ai-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech"><strong>#인공지능 팟</strong></a> 하위로 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/azyi?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#Google Bard 팟</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/clovax?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#클로바 X 팟</a> 등과 함께 모이고 있어요.<br>그래서 다양한 #AI 이슈를 모두 한번에 볼 수 도 있고 하위 주제로 파고들어가 그 주제만 따로 볼 수도 있죠.</p><p></p><a data-type="bookmark" href="https://www.snippod.com/ai-kr" target="_blank"><div class="content"><div><div class="title">#인공지능 | Snippod</div><div class="description">Artificial Intelligence, AI</div></div><div class="href">https://www.snippod.com/ai-kr</div></div><img src="https://d35vuyyypfad1y.cloudfront.net/rest/media/images/topic/ai-kr/head_lh2imgyv6zbfb9515hg2.jpg"></a><blockquote><p>인공지능 정보 만 있냐구요?<br>이건 시작일뿐...</p></blockquote><p></p><p>스닙팟에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/ai-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech"><strong>#인공지능</strong></a> 뿐 아니라 개발자를 위한 언어별 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/program?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#프로그래밍 정보</a> 에서부터 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/hl3t?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#메타버스</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/it-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#IT</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/w8yk?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#핀테크</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/blockchain?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#블록체인</a> 헉헉.. 🫠<br>정말 셀 수 없이 많은 주제별 #테크 정보가 스닙팟 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/technology?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech"><strong>#기술 팟</strong></a> 하위로 모이고 있어요. 😎</p><p>이 뿐 아니라 각종 기술 트렌드를 리딩하고 있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/google-technology?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">구글</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/j70v?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">네이버</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/2v6m?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">카카오</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/mry0?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">토스</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/aws?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">AWS</a> 등 회사 별 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/tech-blog-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech"><strong>#기술 블로그</strong></a> 도 모아 볼 수 있어요.</p><p>이제 내가 관심있는 팟만 팔로우하면 마이피드로 모아볼 수 있으니까, 괜히 여기 저기 둘러보지 마세요!<br>그리고 스닙팟에 올라오는 정보들은 유저들의 반응이 좋으면 <strong>끌올 ⏫</strong> 되면서 좋은 정보일수록 더 상위에서 볼 수 있으니까, 중요한 정보 빠르게 골라볼 수 있죠.</p><p>이제 핫한 테크 정보들 한 곳에서 모아보세요.<br>우리의 시간은 소중하니까요 😉</p><h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://click.snippod.com/cX4V/cwae3jfn">📱 스닙팟 Android | iOS 앱 다운로드 바로가기</a></h3><p></p><p></p>

인공지능 테크 이슈 모아보는 곳