SOT2 개발 회고

소개

Shout Out To 2024는 새해 목표를 작성하고 공유할 수 있는 아주 아주 간단한 웹 서비스이다.

너무 간단해서 사실 서비스 설명은 필요하지 않다. ^^

shout_out_to_2024

 

화면을 보면 더 직관적으로 이해할 수 있다.

이름 입력 → 목표 입력 → 텍스트 복사 혹은 트위터 공유

 

공유 페이지의 <목표 실천에 도움이 필요하신가요?>를 누르면 데일리 트래커 서비스 예고 페이지가 나온다. 데일리 트래커는 언젠가 개발할 토이프로젝트 아이디어 중 하나이다. 우항항. 어쨌든 이 페이지에서 이메일을 입력받고 어딘가에 저장해둔다. (나는 gcf 연결해서 로그로 남겨둠)

 

이 서비스를 왜 갑자기 만들게 되었나.. 그 시작은 내 다이어리에서 시작했다. 새해 목표를 작성한 페이지가 너무 예쁜 것임. 이걸 웹으로 구현하려고 했던게 목표였는데 디자인이 이렇게 귀엽게 나오진 않았다.

 

나에게 어떤 의미가 있었나

올해 여름에 노마드코더 플러터 강의를 들었는데, 실습만 따라하고 아무것도 안해서 다 까먹었다. 우하항

2학기에 피그마 사용법을 배웠는데, 찾아보니 컴포넌트를 다트 언어로 생성해주는 플러그인이 있었다.

그래서 피그마로 디자인하고, 플러터를 사용해서 프론트엔드를 구성해보았다.

올해 배운 툴들로 프론트엔드 프로젝트를 만들고 배포해보았다. 모든 것이 처음이어서 오류도 많이 났고 기간도 길어졌으나, 배포를 한 것이 만족스럽다.

새해 목표 많이 써줬으면 좋겠는데, 생각보다 홍보가 잘 안되서 쫌 슬프다. 그냥 우리 가족들이랑 친구들끼리 소소하게 이슈였어요.

아 그리고 이메일을 저장하는 부분은 GCF의 로그 버킷에 필터를 씌웠다. 서버리스도 배포된 서비스에는 처음 써보는건데, 워낙 저렴해서 걱정 덜할 수 있다.

 

겪었던 어려움

간단한 서비스인데 왜 오래 걸렸나? (약 일주일)

물론 나의 잘못도 있지만, 생각보다 플러터 웹이 구리다고 생각한다. 특히 디버깅할 때!

 

피그마 dev 모드의 배신

플러터로 구현하겠다고 결심한 계기는 피그마가 제공하는 dev 모드였다. 컴포넌트에 대한 UI 코드를 만들어준다. 프론트엔드 개발에서 UI 코드 짜는걸 가장 싫어했던 나에게 빛과 같은 도구처럼 보였다. 막상 써보니 오타도 많고 (사진의 FontWeith), 스타일도 대부분 생략되고, 하드코딩된 부분이 많아서 도중에 쓰다가 그만뒀다. 빨리 UI 그림으로 UI 코드를 자동으로 만들어주는 AI가 나왔으면 🥹

 

정적 웹 페이지 - 환경변수 주입도 안되는거였어?!

SOT2는 비즈니스 로직 수행도 없고 단순 입력과 공유가 전부여서 정적 웹인줄 알았다.

중간에 공유 기능을 위해 API 키나 외부에 호출을 날리는 URL을 dotenv로 적용했는데, firebase로 배포할 때 보니 값이 안 불러와지더라.

찾아보니 환경변수 주입은 정적 웹 페이지의 영역을 벗어나기 때문에 firebase로 배포하려면 gcf를 써서 외부에서 불러와야한다.

목적에 맞지 않는 툴을 억지로 쓰는건 꺼림직해서 firebase를 걷어내고 github page에 다시 배포했다.

github actions를 전에 사용해본 적이 있어서 시크릿 주입하고 스크립트 이해하는 것은 어렵지 않아 금방 다시 했다.

 

assets 경로 인식 안됨

배포를 하고 나서 보니 어라! 이미지 파일이 하나도 안 불러와진다. 로컬에선 잘 됐는데..?

구글링을 해보니 이런 이슈가 플러터에서 종종 발생한다고. assets를 불러오는 경로를 모두 절대 경로로 바꾸어주니 잘 동작했다. 왜 그런진 잘 모르겠음 😅

flutter:
  assets:
    - assets/icons/comment.svg
    - assets/icons/twitter-alt.svg
    - assets/images/dailytrackerpreview.png

# 사용
SvgPicture.asset('assets/icons/twitter-alt.svg')

 

 

카카오 api 이슈

카카오 공유하기 기능을 위해 카카오 flutter sdk를 사용했다. 웹 브라우저, 안드로이드, iOS에선 모두 잘 동작했다. 그런데 배포하고 나서 모바일 웹 브라우저로 들어가봤더니 띠용 공유하기가 안된다.

 

에뮬레이터의 사파리로 들어가서 검사해보니, 카카오 api로 요청을 날린 후 version.json 파일을 못 찾아서 404 오류가 뜨더라. 그런데 이 파일이 무슨 역할을 하는지도 모르겠고, 구글링 해봐도 정보는 안 나오고, 노트북 사파리에선 잘 됐는데 모바일 사파리에선 왜 안되는건지 감이 안 와서 그냥 빼버렸다. ㅋㅋㅋㅋ 중간에 어떻게 빌드됐는지도 잘 모르겠고 플러터가 만든 html과 json 디버깅하기도 어려우서 오류가 났을 때 해결하기 정말 어렵다는 생각을 했다. 다음에 웹 만들 때 플러터는 안 쓸 것 같다.. 아숩

 

어쨌든 연말 일주일동안 할게 생겨서 기뻤고 나의 작은 프론트 웹을 만들어서 좋았다. 역시 프론트는 나랑 안 맞는다.