Category: 개발일지

다음 큰 업무로 넘어가기전 찝찝했던 부분들과 지금 먼저 처리하면 나중에 편할것 같은 부분들을 모두 정리했다.

먼저 클라우드플레어 자동배포를 완료했다. jsonwebtoken 패키지가 클라우드플레어에서 지원하지 않아 조금 삽질.. 그래도 덕분에 넉스트러브 디스코드에서 여러 인사이트를 얻었다. 특히 인증관련해서 내가 수파베이스를 쓰는게 최선인지에 대해 고민하게 되었다. 프로젝트 정식 런칭 전에 이 고민에 대한 결론을 내려야 할것 같다.

프로필 편집 레이아웃을 적용하면 복잡도(사용성 측면에서)가 늘어날것 같아 고려하지 않고 있었는데, 기본적인 순서 변경만 지원하다 동적인 레이아웃을 최대한 편하게 지원하는 기능을 넣었다. 복잡도는 늘었지만 옵셔널한 기능이고, 이 기능 덕분에 오만가지 변화가 적용될 수 있다고 생각하니 구현하길 다행이라는 생각을 했다.

공개된 패키지로 쓰다가 원하는 기능 지원이 안되어 결국 새롭게 만들어야 했지만 일단 예상한대로 잘 동작한다. 이 기능 때문에 시간을 좀 많이 쓰고 답답했는데 오늘 완성이 되어 속이 다 시원..

이미지 크롭 기능을 빼고 원본을 사용하기로 했다. 레이아웃 기능이 추가 되면서 원본 사용시 이점이 더 크기 때문에.. 비디오는 처음부터 그렇게 하고 있어서 다행이었다. 덕분에 사이트는 더 가벼워지고 기능상으로도 편해졌다.

초기 위치 관련해 수정할 수 있도록 수정메뉴를 추가할 생각이다. 여기까지 하면 정말 다음 단계로 넘어가도 되는데.. 다음 빅 마일스톤은 소셜기능을 추가하는 것이다.

플러터가 애플/안드로이드 지원하는 일반적인 서비스 앱 만들기에 생산성이 아주 좋았다.

서버가 어느정도 정리되어 앱만 만들면 되겠다 생각해서 이미지와 동영상 포스팅 하는 기능을 만들었다. 동영상 트림 기능도 넣고 이미지 크롭이랑 편집 기능도 다른 패키지를 사용해 이쁘게 만들었다.

그리고 사용자 컨텐츠가 보이는 페이지도 만들고 모든 파일은 클라우드플레어R2에서 무료로 호스팅!

음..기능 자체는 잘 만들어졌는데 웹 버전으로 익스포트하니까 문제가 생겼다.

일단 초기 로딩이 너무 느려..플러터에 추가 패키지들까지..사용자가 받아야 할 초기 파일 용량이 약 10메가에 육박했다.
더 큰 문제는 동영상 편집 기능이 웹을 지원하지 않는것이었다. FFmpeg 패키지가 무겁고 플러터 정식 지원을 하지 않아 ios/Android 네이티브를 활용하는 것으로 했더니 웹에서는 동작을 하지 않는 것이었다.

그리고 미묘하게 반응성이 좋지 않은것도 맘에 걸렸다.

웹만 따로 만들어야 하나…고민, 웹은 뷰어만 만들고 어드민은 앱을 다운로드하게 유도할까 고민…여러 고민을 하다 웹을 먼저 앱을 나중에 만드는 것으로 결정했다. 만드는 서비스 특성상 접근성이 중요해서 비로그인 유저의 웹 접근을 포기할 수 없었기 때문이다.

1월중순부터 2달 반 정도를 만들어온 플러터 앱을 포기하기로 했다. 새로운 테크스택은 Nuxt.. Vue 는 좀 써봤는데 리엑트는 싫고 넉스트 한번 써보자는 생각으로 결정했다. 따라서 전에 node 로 만들었던 API서버도 옮겨야 했다.

그리고 지난 2주간(2주밖에 안되었다는게 믿기지 않지만), 백엔드 재구성에 기존 플러터 앱에서 지원하는 대부분의 기능들을 웹으로 다시 구현했다. 웹 기반의 동영상 편집기까지 구현해야 했고 간단한 이미지 크롭에 퍼포먼스가 안나오는 페이지들 개선, 동영상과 이미지 호스팅을 R2에서 유료 서비스로 이동, 내가 만든 Analytics 서버를 단순화 시키고 독립시키고 Umami를 이용한 사용자 통계 분석, 소셜로그인까지 모두 구현했다.

거기에 플러터로 만들 예정이었던 대시보드, 프로필 수정, 아카이브, 삭제등의 기능도 추가했고 디자인도 심플하게.. 모바일에서 비디오 플레이어 로딩이 너무 불안해서 이것저것 삽질을 하다 지금은 정말 초기로딩 시간 0.1초로 최적화된 결과물이 나왔다.

휴..간만에 즐거웠던 시간들이었다. 정말 오늘 커밋 히스토리를 보고 2주밖에 걸리지 않았다는것에 너무 놀랐는데 풀타임으로 한것도 아니고 주말에 놀고 약속도 있었는데 내가 생산성이 아직 좋구나 생각했다.

넉스트 사용하는 관계로 클라우드플레어로 배포해보려 했는데 알수없는 오류로 일단 멈췄지만 다시 도전해 보려고 한다. 나중에 어떻게 될 지 모르겠지만 정말 클라우드플레어가 갑이다. 어떤 서비스와 비교해도 성능과 가격에서 압도적이니 쓰지 않을수가 없다.

이제 남은 큰 업무들은
– 소셜
– 실시간
– 결제
– 보안
– 폴리싱

정도이다. 정말 기본 베이스가 다 완성된 기분이라 마일스톤 확보 차원에서 로그한번 남김.

백엔드로 노는게 생각보다 재밌다. 비용과 퍼포먼스를 고려해 여러 시도를 해 보고 다음과 같이 정착했다.

추후 로드밸런서로도 활용될 nginx 프록시 서버, node 로 만든 api 서버, 인증,디비,실시간 통신을 담당한 수파베이스 마지막으로 캐싱작업에 활용될 레디스 서버로 구성하였다.

도메인, 파일 호스팅은 클라우드 플레어에서 담당.

서비스 특성상 데이터가 공개되므로 트래픽과 디비콜을 줄이기 위해 데이터는 가능하면 레디스에 유지하고 실시간 업데이트는 수파베이스를 통해 공유, 디비 업데이트는 필요한 부분만 하도록 최소화 하는 방식이다.

서버들은 오라클에 1시피유+1기가램+50기가를 레디스 전용으로 돌리고 나머지 4시피유 24기가램 100기가에 모든걸 도커로 때려박았다.

인증/디비/실시간 통신 모두 지역별 배포를 포함해 수평 확장 방법도 대충 계획해 두었다. 제발 이걸 진지하게 고민할 만큼 서비스가 잘 되면 좋겠다.

기반 구조 스터디와 작업이 완료되었으니 이제 실제 기능 구현에 집중해야겠다!

게임이 아닌 서비스를 만들어보고 있다. 이것도 무려 5년전부터 기획했던 프로젝트이다.

아이디어를 5년 묵혀놓으니 그 형태가 이리저리 바뀌었다가 다시 원래 아이디어에서 다이어트 된 형태로 나왔다. 맘에든다. 쓸데없이 복잡하지 않고 심플하게 바뀐 아이디어에 목적도 분명하고 방향도 맞게 아이디어가 정리된 기분이다.

디테일한 부분들의 정리가 남아있지만 지난 한 달 동안 이것저것 프로토타입을 만들고 있는 중이다.

기술적으로도 굉장한 계획이 세워졌다가 하나씩 다이어트해서 현실적인 구현을 바라보고 있다. 내가 직접 모든것을 한다는 것은 즐겁고 성취감 넘치는 일일지 모르지만 서비스를 운영하고 키워나가기엔 현실적으로 불가능한 부분이 있다. 내가 만드는 하나의 프로덕트에 집중하기 위해 아쉽지만 다른 것들은 기존의 솔루션을 최대한 활용하기로 한다.

스케일이 확장되기 전에 비용이나 구조를 걱정하는건 바보같은 일임에 분명하지만 그렇다고 마구잡이로 만들다간 나중에 기회를 잃을 수 밖에 없다. 베스트프락티스가 아니어도 며칠정도 구조에 대해 고민해 보는건 나쁠게 없다. 최대한 다른 솔루션을 쓰고 최소한의 비용으로 향후 스케일 확장이 용이한 구조로 시작하게 되었다.

자잘한 비용들을 아낄 수 있는것도 좋지만 이정도 계획이면 마음의 평안을 찾을 수 있다는게 너무 좋다. 뭔가 이것저것 제한이 걸리고 비용이 발생한다는 생각은 개발에 집중을 못하게 해 주기 때문이다.

오라클 무료티어에 도커로 오픈소스 솔루션을 올리고 파일 트래픽은 클라우드플레어로 감당하기로 했다. 눈에 보일 비용 증가는 클라우드 플레어 스토리지인데 1테라에 월 15달라, 트래픽은 무제한이라는 조건이면 나쁘지 않다. 심지어 스토리지 비용이 다른 어떤 클라우드보다 싼것 같은데 선택의 여지가 없을 정도이다.

얼기설기 기본중에 기본 기능들은 구현이 끝났고 3월달은 베이스가 될 기능을 완성해 MVP를 선보일 MVP?를 만드는 것이 목표다. 즉 이번 버전은 다른 솔루션들과 큰 차이가 없지만, 큰 차이를 만들어 내기 위한 기본 준비작업을 하는것을 목표로 한다. 그러면 4월달에는 유니크한 기능에 집중할 수 있을것 같다.

인프라 설정과 설계도 끝났고, 기본 기능 구현도 완료 되었다. 어떤 결제 솔루션을 붙일지 아직 결정하진 않았지만 이건 옵션같은 부분이고.. 3월에 목표만큼 완성이 되면 애플개발자 프로그램에 다시 가입해 앱스토어에도 알파버전을 출시할 계획이다. 4월에 베타 5월 소프트런치를 하면 이 프로젝트가 수익성이 있을지 판가름 할 수 있을것 같다.

조금의 가능성이 보인다면 6월즈음에 회사를 그만두고 7월부터 더 집중해서 진행해 보고 싶은 욕심이 있다.

하지만 어디 첫술에 배부르랴..내가 재밌게 사용할 수 있는걸 1순위로 해서 만드는걸 즐기다 보면 좋은 결과가 있겠지!

오잉.. 언제 시간이 이렇게 지난건지… 지난 번 목표 중 구현 된 부분들

• Authentication
• Local action process
• Dynamic data
• Static data
• Local data
• Shortened key
• External asset

에셋관리는 실제 게임이 아니니 흥이 나지 않는다. 그래서 일단 보류. 한다면 Addressable + CCD 를 써야겠지? 근데 Addressable은 데이터가 캐시에 있어도 불러오는 딜레이가 조금 있던데 그 이유를 당췌 모르겠다.

1차 목표에는 없었지만 그 외 구현 사항으로

• 전체 로직 개선, 개선, 개선
• IPA 수동빌드 및 TestFlight upload

로직 개선이 조금 보람있었던 부분인데, 노출된 함수를 최소화 하고, 사용자 입장에서 디테일한 처리를 신경쓰지 않도록 구현했다. 사용자 정보를 건드리는 모든 콜은 히스토리를 남겨 서버와 자동으로 연동 되도록 하였다. 이 부분은 계속 개선이 필요한데 프로젝트 시작 전에 개선을 하면 할 수록 실제 프로젝트 구현과 유지보수에서 아낄 수 있는 시간은 어마어마 할 것이다.

다음 목표

• 디버그 메뉴 만들기
• 시간 디버그 가능하도록
• 기본 설정 UI로 설정 Flag 테스트
• 푸시/토큰 테스트
• 게임센터 로그인(타 계정 로그인 연동)

그 다음에 실제 UI구현으로…?

목표는 6월 말까지!

간단한 포스트 수정 기능 추가.

39도까지 열이나서 병가를 냈다. 이 회사로 옮겨 2년만의 첫 병가… 독일 회사에서 기본 10일은 병가로 쓰는데 나는 뭐 이리 열심히 일하는지 모르겠네. 아스피린 먹고 파라세타몰 먹고 땀 뺀다음 열이 좀 내려서 얼른 기능 추가.

이 다음은 무엇을 해야 할까?

• 화면 전환 효과
• 카테고리(룸) 만들기
• 이미지 에디터
• 사진 선택
• 잠금
• 백업
• 공유
• 사용자 기본 관리 메뉴

원본 사진으로 그리드 뷰에서 너무 느리기 때문에 포스트 저장 시 썸네일 생성. 원본사진 보기에서도 쓸 때없이 큰 사진을 볼 이유가 없으므로 상세보기용 중간크기 리사이즈 이미지도 생성. 그럼 원본 파일은 언제 사용? 그냥 백업용으로 일단 저장.

추후 이미지 에디터가 들어가면 이것들을 어떻게 처리할 지 고민해 보도록 하자. 썸네일 만드는데 의외로 시간이 걸려서 오버레이 로딩 스피너도 집어 넣음.

오늘 몸 컨디션이 최악인데… 그래도 무조건 1일 1기능 추가..아무리 작은 기능이라도 꼭 추가하는 것을 목표로 한다..

delete post

image 파일도 함께 지워야 한다.

TODO

• 처음 포스팅 할 때 이미지는 임시저장소에 저장 후 포스트 저장 시 최종 저장소로 이동해야 함.
• 삭제 확인 팝업
• 다음 작업은 수정. 이미지 수정이나 교체 없이 텍스트만

Named route 에 transition animation 적용

다음 목표는 포스트 삭제

오늘은 여러 일이 많아 간단하게 imagePicker 에서 불러온 이미지 localStorage 에 저장만…

썸네일 만들고 이런것 보다 상세보기/수정/삭제 부터 만들어야 겠다.